世界のJavaScriptを読もう @ 2012

Presenter Notes

自己紹介

Presenter Notes

テーマ

調べる方法を知る

Webの動きはとても早いので、調べ方を知る

Presenter Notes

目次

  • 見る(何を見る、どこを見る)
  • 知る(何を知りたい、探す、情報の取捨選択)
  • 学ぶ(何からどう学ぶ、学習方法)

Presenter Notes

序章 導入

Presenter Notes

JavaScriptとは

JavaScriptはもはやブラウザだけのJavaScriptではない

Presenter Notes

JavaScriptの変化

  • JavaScriptは制限された言語?
    • マルチコア(RiverTrail)、GPU(WebCL)
    • ファイル操作、Device APIs: see Mobile Device APIs
    • バイナリ
    • 固定型(e.g. Typed Arrays)
    • スレッド(e.g. Web Workers)
    • WebSocket
  • JavaScript自体ができる幅も広がってきた
  • HTML5 via HTML5, きちんと。
    • HTML4 文章が目的
    • HTML5 アプリケーションが追加

Presenter Notes

JavaScriptの変化

  • The evolution of the web - ウェブの進化
    • ブラウザと共に変化が激しい時期
  • 近年のJavaScript環境の変化は急速
  • 一年で常識が変わる事もあるレベル
  • 動作プラットフォームの多様化
    • モバイル、サーバサイド
  • テストの変化
  • なので、変化に対応できるように調べ方を知る

Presenter Notes

例) JavaScriptのテストの変化

DialyJSのアンケートから

JavaScriptのテスト利用率

2009
2010
2011
YES
46(32%)
401(34%)
1185(48%)
NO
96(68%)
778(66%)
1619(52%)

via DailyJS : JavaScript Developer Survey

This table was created with Compare Ninja.

Presenter Notes

利用されてるテスティングフレームワーク

Presenter Notes

2009年

2009

Presenter Notes

2010年

2010

Presenter Notes

2011年

2011

Presenter Notes

ライブラリの簡単な補足

  • JsUnitTest < 元々はPrototype.js依存
  • unittest.js < script.aculo.usのユニットテスト
  • JsUnit =port=> jqunit(JsUnit互換) -> QUnit
  • Jasmine (Pivotal Labs)
    • JsUnit (Pivotal Labs)
    • Screw.Unit (Pivotal Labs)

test

Presenter Notes

今のテスト環境について

  • QUnit - XUnit系
  • Jasmine - RSpec系

テストの実行環境

  • ブラウザ(IE,Firefox,Chrome,Opera…etc)
  • PhantomJS, Webkitを利用したもの
  • Node(V8)
  • SpiderMonkey,Rhino などのコンソール
  • テスト実行環境ホスティングサービス

Presenter Notes

テストの補助ライブラリ

テストに便利なモックなど補助機能等を提供

  • QUnit-TAP - TAP出力
  • Sinon.jS
  • Ajaxmock

テスティングフレームワーク

全部入りの環境を提供してくれる

  • mocha
  • Buster
  • JSTestDriver

Presenter Notes

テスト環境の変化まとめ

  • まだまだテスティングツールが変化している
  • 2011年はNodeで動くものが続々登場
    • 今よりいいものが出てくる可能性

Next: 新しいものを見ていく方法

Presenter Notes

見る・Watch

Presenter Notes

ソーシャルサービス

Twitter

  • JavaScriptな人はTwitter利用者が多い
  • ベンダー公式アカウントも

Presenter Notes

はてなブックマーク

ユーザーで追う

タグで追う

はてブフィルタ

  • 基本はフィルターなし
  • 1Userのブックマークが大事
    • 新しい事との出会いは1ブクマから始まる

Presenter Notes

Pinboard

Pinboard利用料金

  • Deliciousと入れ替わりに利用者増加
  • 有料であるからか、質も高め
  • 新しい話題も多くブックマークされている
  • メインは英語だが日本語のものも多め
  • Deliciousは中国、ロシア利用者もポツポツいた
  • Deliciousは古いもの内容混ざりごちゃごちゃ

Presenter Notes

SNS , ソーシャルニュース

Twitter

Presenter Notes

定期配信型のサイト

メールマガジン

Web版もあるが、メールマガジンとして立ち上がったもの

Presenter Notes

ブログ

Presenter Notes

乱立するまとめサイト

  • ブラウザのアップデート頻度が増加
  • Webの変化が急速化
  • Webの情報量の増加
  • SBMがまとめ役を保てなくなった
    • まとめ役が求められた
    • => Weekly系、小さくまとめるソーシャルニュースサイトが乱立

Presenter Notes

今年のブラウザアップデート

  • FirefoxのRapidリリース

今年のブラウザバージョン via Timeline of web browsers - Wikipedia, the free encyclopedia

Presenter Notes

ブラウザ年表

他のブラウザもアップデート頻度は徐々に上がっている

via Browser History Timeline

Presenter Notes

見る(購読する)とは...

  • 全てのRSSを読む必要はない
  • 軽く目を通しておく程度でいい
  • まとめサイトなどを上手く利用して見る
    • 同じ情報が複数のサイトで出てきたならそれは重要
    • 複数の情報源を目を通す

Presenter Notes

RSS購読フロー

自分の場合

  • 忘れないように何度も同じ記事がRSSにでてくる仕組み
  • 重要なものほどRSSに出現することが多くなる
  • 流し読みな記事もTwiterへ投稿
  • フォロワーが興味を持ったもの => 少なくても需要があった記事 => 読んでおいたほうがいい記事

Presenter Notes

RSSを活用したフロー

Presenter Notes

見る-まとめ

  • JavaScriptの情報量は膨大
  • 新しいものだけに絞っても多い
  • 効率よく見ていく
  • 詳しい人を追って見る
  • まとめサイトを見る
  • 全てを見るのは無謀

NEXT : 知りたいことを知る方法

Presenter Notes

知る・know ・探す・Search

Presenter Notes

JavaScriptで知りたいことを調べる方法

  • JavaScriptの機能について
    • 目的の挙動をするメソッドの探し方、メソッドの使い方
  • JavaScriptライブラリについて
    • jQuery APIの使い方、ライブラリ内部の動作を調べる
  • JavaScriptの速度、ベンチマークについて
    • どの方法が早いのか、どうやるのが最適なのか

Presenter Notes

調べる前にググれ

まずは何事もググる!!!

ググるは調べるに入らないぐらい自然な習慣

  • JavaScriptの多くはググるだけで先例が見つかる、使い方が書かれている
    • 読む、試す で多くの場合は解決できる
  • JavaScriptの高速化、ベンチマークについてはそのまま鵜呑みにしてはいけない
    • 使い方などに比べて、自分で試さないで満足する場合が多い
    • 昔は正しかった、けど今は異なる という場合も多い
    • JavaScriptエンジンorブラウザの性能は日進月歩

Presenter Notes

間違いが広まる実例

自分で動かして比較するのが正しい

Presenter Notes

JavaScriptの機能についての調べ方

Presenter Notes

リファレンスサイトを利用して調べる

Presenter Notes

ECMAScriptの仕様書を当たる

Presenter Notes

Presenter Notes

ブラウザの対応機能を調べる

書いて試すのが確実だが...

Presenter Notes

ライブラリを調べる

Presenter Notes

ドキュメント or ソースコード

APIドキュメントを読む

ソースコードを読む

Presenter Notes

実行速度・ベンチマークについて

Presenter Notes

知る・探す - まとめ

  • ググれ
  • 動かして確認しろ
  • リファレンスだけではなく仕様書も参考になる
    • ECMAScriptの仕様書はコンパクト
  • ベンチは再利用できるようにする

NEXT: JavaScriptを学ぶ方法

Presenter Notes

学ぶ

Presenter Notes

何故JavaScript自体を学ぶか

  • jQueryが便利だから生JavaScript書くのがだるい
  • 今はCoffeeScriptなどが人気
  • あえてJavaScript自体を知る必要はあるの?

Presenter Notes

JavaScriptという枠

JavaScriptはJavaScriptで書かれるとは限らない

別言語からの変換

  • altJS
    • 別言語からJavaScriptへ変換するものをまとめたサイト
  • 例)
    • CoffeeScript
    • GWT Java -> JavaScript
    • Script# C# -> JavaScript
    • Emscripten

Presenter Notes

JavaScriptに別言語で入門する弊害

jQueryという別言語...

  • jQuery語
    • 「jQueryでできて、JavaScriptでできないことは何ですか?」
    • プラグインモンキーになりやすい
    • jQueryを枠を出たJavaScriptの問題を解決できない
  • CoffeeScript語 new
    • "JavaScriptのGood Partsを集めたもの"
    • JavaScriptに存在しないclassを持っている
      • classという言葉がJavaScriptに変換した際に持つ意味合いの違い
      • JavaScriptはprototype
    • CoffeeScriptだけでは本質までは見えない

Presenter Notes

JavaScriptの本質を知る必要性

  • JavaScript以外で書けても実行時はJavaScript
  • SassでCSSの表現の本質が変わらないのと同じ
  • 結局はJavaScriptを知らないと解決できない問題が存在

Presenter Notes

JavaScriptを学ぶ

Presenter Notes

書籍から学ぶ

初心者向けの決定版はまだわからない

Presenter Notes

書籍の読み方

英語が読めない人向け、英語技術書の読み方 | Web scratch

  • 章ごとなどノルマを決めて読む
  • 節ごとにメモを取る
    • 既知の事についてのメモは手を抜く
    • 気になることを調べてリンクを貼る
  • インプットアウトプット
    1. 読む
    2. 理解
    3. 書く

Presenter Notes

学習テスト

学習テスト via Test-Driven JavaScript Development

  • 外で学んだ知恵の定着
    • 他人のコード・論文・書籍からえた知恵の学習テストを書くと頭に定着しやすい
  • 奇妙なふるまいの調査
    • ブラウザの奇妙なふるまいにハマった時に対処法を学習テストに記録しておくと、同じ所でハマる事はなくなる
  • 新しいブラウザの調査
    • 書きためた学習テストは、新しいブラウザのふるまいの調査に流用できる
  • フレームワークの調査
    • 新たに導入するフレームワークはまず学習テストを書いてみる
    • 本番コード前にフレームワークの使い方が身につく

Presenter Notes

オンラインのチュートリアル

なども参考に

Presenter Notes

コードリーディング

Presenter Notes

コードを読んで取り込み書きだす

  • 読む目的を定める
    • 先になぜ読むのかを決めておいた方がいい
  • 新しいことを知る
    • いいところをパクる
    • パターンを知る
    • クロスブラウザ対応処理(バットノウハウ多いけど)
  • 知ったことを取り入れたコードを書く
    • 書いて自分のものにする
    • 車輪の再発明で学ぶ

自分の場合は、コード = Greasemonkeyで有ることが多かった。

Presenter Notes

コードの質

一般的なWebサイトなら速度よりも可読性や保守性を優先した方がよい場合も多い。

Presenter Notes

まとめのまとめ

  • 見る(何を見る、どこを見る)
    • Web, ブラウザのアップデートも高速化
    • 新しい情報がどんどん増えている
    • ソーシャルサービスやSBMなどを上手く使って情報を得る
    • メールマガジンや週間のまとめサイトが急増
  • 知る(何を知りたい、探す、情報の取捨選択)
    • とりあえずぐぐってみる
    • 何が正しい情報なのかを知る
    • リファレンスサイトなどを上手く使う
    • テストケースやベンチマークは今を知るツール
  • 学ぶ(何からどう学ぶ、学習方法)
    • JavaScriptの本質を学ぶ事は大事
    • 学習テスト
    • 書いて学ぶ
    • コードリーディング

Presenter Notes

おわり

Presenter Notes

For Question

Presenter Notes

Pivotal Labsとは

  • シリコンバレーのソフトウェア会社
  • Job DescriptionにTDDと書くぐらいテストが浸透してる

テストは必須。テストが無いなんて考えられないという感じらしい。なので,テストツールを自前で作ったりしてるらしい。 @gokingのシリコンバレー土産話 Pivotal Labs - Togetter

Presenter Notes