From 69223456dabb5e82b17aa6ddc5cc861546c6be5a Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Thu, 26 Mar 2015 14:51:02 +0900 Subject: [PATCH 1/2] Improve doc --- README.md | 160 ++++++++++++++++++++++++++--------------- package.json | 2 +- public/stage7/tests.js | 2 +- 3 files changed, 106 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index 837278aa..28eea9cb 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,14 @@ -JavaScript Training -=================== +2日でできる JavaScriptTraining +============================== JavaScript 初心者が JS の未来を見据えつつ、 基礎をひととおり身に付けるための資料です。 +この README は `npm run presentation` で +再生することができます。 + + セットアップ ------------ @@ -26,6 +30,8 @@ JavaScriptTraining リポジトリを fork します。 画面右上にある fork ボタンを押してください。 +[](http://mixi-inc.github.io/JavaScriptTraining/images/fork-button.png) + ### 3. 必要なものをダウンロード @@ -165,6 +171,8 @@ Web ページの適当な場所で この Console から、JavaScript を 実行することができます。 +[](http://mixi-inc.github.io/JavaScriptTraining/images/console.png) + ### 3. 何か実行してみる @@ -188,7 +196,7 @@ foo; ``` -### 6. ブラウザオブジェクトをいじってみる +### 6. ブラウザオブジェクトをいじる ブラウザオブジェクトもいじってみましょう。 @@ -242,12 +250,15 @@ JavaScript に精通していない人に 「どんなツールを使ったらいいですか？」と 聞かれることがよくあります。 -私は、「構文ハイライトと lint を使うといいですよ」、 +私は「構文ハイライトと lint を使うといいですよ」、 と答えることにしています。 [](http://mixi-inc.github.io/JavaScriptTraining/images/syntax-error.png) +ひとつエピソードを紹介します。 + + JavaScript には静的型検査がないことや、 記号が多い構文や、まずい仕様がいくつもあるので、 ミスを犯しやすい言語の一つです。 @@ -292,10 +303,10 @@ JavaScript には静的型検査がないことや、 なってしまっていたのでした。 -このミスは、いわゆる**初見殺し**です。 +このエピソードは、いわゆる**初見殺し**です。 -「何それどうしてそんな仕様なの😱」というのが -正常なプログラマの反応だと思います。 +「何それどうしてそんな仕様なの😱」 +と言いたくなりますね。 悲しいことに、このような落とし穴は @@ -306,8 +317,10 @@ JavaScript の仕様・文化に数多く 防げるのでしょうか？ -ESLint や JSHint、 JSLint のような lint を -使いましょう。たとえば、ESLint を実行すると +[ESLint](http://eslint.org/) や [JSHint](http://jshint.com/)、 [JSLint](http://www.jslint.com/) のような lint を +使いましょう。 + +たとえば、ESLint を実行すると 下のような警告が出されます。これによって、 潜在的な不具合をだいぶ減らせるようになるのです。 @@ -404,19 +417,13 @@ var div = document.getElementById('foo'); ``` -他にも CSS クラスやタグ名、 +他にも CSS クラスやタグ名、その他の属性から、 +DOM 要素を取得することができます。 ```html
foo
``` -その他の属性から、DOM 要素を取得することが -できます。 - -```html -foo -``` - #### CSS セレクタについて @@ -676,8 +683,13 @@ click イベント以外にも多様なイベントがあります： 開発ツールを開き、Elements タブの中段にある Event Listeners タブを開いてみてください。 + [](http://mixi-inc.github.io/JavaScriptTraining/images/chrome-dev-tool-event-debugging.png) +たくさんのイベントが登録されていますね。 + +では、これらのイベントの使い方を解説していきます。 + #### DOM イベント実装編 @@ -721,7 +733,7 @@ button.addEventListener('click', function(event) { ``` -しかし、AngularJS という最近の +しかし、[AngularJS](https://angularjs.org/) という最近の フレームワークでイベント属性スタイルを 積極的に採用する動きもあります。 @@ -752,10 +764,10 @@ button.addEventListener('click', function(event) { ``` -この button 要素の click イベントを +この button 要素の `click` イベントを 監視することを考えます。 -button 要素に addEventListener すればよいように +button 要素に `addEventListener` すればよいように 見えますが、アイコン画像をクリックされた場合 どうなるのでしょうか？ @@ -766,8 +778,11 @@ button 要素に addEventListener すればよいように この仕組みが DOM イベントの伝搬です。 +[](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) + + `addEventListener` の引数で -1-2-4 か 1-3-4 を選べます。 +1-2-4 か 1-3-4 のどちらかを選べます。 1. capturing フェーズ @@ -786,9 +801,6 @@ button 要素に addEventListener すればよいように リンクなどによる画面遷移がおこなわれる -[](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) - - 先ほどのボタンの例では、img 要素の click イベントは bubbling によって button 要素まで通知されるのです。 @@ -820,6 +832,36 @@ button.addEventListener('click', function(event) { 非同期処理のトレーニング +JavaScript の美しい機能のひとつに +非同期処理があります。 + +下のコードは 1 秒まったあとに +`console.log(1)` を実行するコードです。 + +```javascript +setTimeout(function() { + console.log(1); +}, 0); + +console.log(2); +``` + +このコードを実行すると、`1` と `2` の +どちらか先に表示されるでしょうか。 + + +答えは、`2` です。`setTimeout` に登録された +関数はいま実行途中のすべての関数が終了してから +呼び出されます（[JavaScriptのsetTimeoutを理解する](http://blog.mouten.info/2014/09/20/article/)）。 + +ここでは、関数を実行するタイミングを +後回しにすることによって、待っている間に +別のことができる、ということを覚えてください。 + +この待ち時間の間に別の処理を実行する +やり方を非同期処理と呼びます。 + + #### サーバーとの通信 非同期処理の代表例といえばサーバーとの通信です。 @@ -830,7 +872,7 @@ button.addEventListener('click', function(event) { よって、時間を有効活用することが重要になります。 -JavaScript にはサーバーと非同期に通信するための +JavaScript にはサーバーと非同期に通信するための API が用意されています。 - [fetch API](http://www.hcn.zaq.ne.jp/___/WEB/Fetch-ja.html) @@ -1008,18 +1050,23 @@ JavaScript は言語機能としてモジュールの #### bower -bower は、JavaScript、HTML、CSS等の、 -フロントエンドリソースのエコシステムです。 +bower は、JavaScript、HTML、CSSなどを +共有して使えるようにするフロントエンドの +エコシステムです。 + +他の人が作ったモジュールを利用することや、 +自分が作ったモジュールを公開することも +できます。 -ただ、モジュールローディングの仕組みを -もたないため、この部分は RequireJS などの -外部モジュールシステムに頼ることになります。 +ただ、JavaScript の場合モジュールの仕組みを +もたないため、この部分を RequireJS などの +モジュールシステムに頼ることになります。 どのモジュールシステムに対応するかという選択は、 bower によって読み込まれるパッケージ側に 裁量（責務）があります。 -これを、[公式ドキュメント](http://bower.io/#getting-started)は端的に +この方針を[公式ドキュメント](http://bower.io/#getting-started)は端的に 言い表しています。 > How you use packages is up to you. @@ -1027,13 +1074,17 @@ bower によって読み込まれるパッケージ側に > （どのようにしてパッケージを使うのかはあなた次第です） -bower の使い方は簡単です。 +#### 実習 -bower で管轄したいファイルのディレクトリを開き、 +まず、bower を実行することを体験してみます。 +bower の設定ファイル bower.json を対話的に +作成します。 + cd public/stage6/sample bower init -です。あとは説明に従って選択していくと、bower の + +あとは説明に従って選択していくと、bower の パッケージ設定ファイル `bower.json` が作成されます。 @@ -1154,36 +1205,33 @@ y でレジストリへの公開ができないように設定します。 ##### bower install -あとは、使いたいモジュールを追加していきます -（`--save` はパッケージ設定に依存ファイルを -追記する効果があります）。 +いよいよ、パッケージを追加していきます。 - bower install --save fetch - -このコマンドによって、fetch パッケージが、 -`bower_components` 以下に配置されます。 +パッケージは [Search Bower packages](http://bower.io/search/) で +検索することができます。 -また、ここで設定に記載されたモジュールは、 -`bower install` で取得することが -できるようになります。 +では、試しに [Buttons](https://github.com/alexwolfe/Buttons) パッケージを +追加してみましょう。 -今回は、簡単のために script タグで直接 -`bower_components` 以下の JavaScript/CSS を -読み込みます。 +下のコマンドによって、Buttons パッケージが、 +`bower_components` 以下に配置されます。 + bower install --save Buttons -パッケージは [Search Bower packages](http://bower.io/search/) で -検索することができます。 +`--save` はパッケージ設定に依存ファイルを +追記する効果があります（`bower.json` の +内容が変化しているので、見てみてください）。 -#### 実習 +ここで設定に追記されたパッケージは、 +次回から `bower install` でまとめて +取得することができるようになります。 -まず、bower を実行することを体験してみます。 - cd public/stage6/sample - bower init - bower install Buttons +今回は、簡単のために script タグで直接 +`bower_components` 以下の JavaScript/CSS を +読み込みます。 今回の実習はテスト駆動形式ではありません。 @@ -1198,13 +1246,13 @@ y でレジストリへの公開ができないように設定します。 ### ステージ7 -よくあるイディオムを読み書きするトレーニング +よくあるイディオムを読むトレーニング このステージでは、よくある JavaScript の 不思議な書き方を学びます。 -なお、今回はヒントがありません！ +なお、今回はヒントがありません！ ぜひ自分で調べて、結果を確かめてみてください！ diff --git a/package.json b/package.json index 54efa158..ca45ee05 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "setup": "npm install; (cd public; bower install)", "help": "$(npm bin)/gulp help", "serve": "$(npm bin)/gulp serve", - "presentation": "$(npm bin)/reveal-md README.md --separator '^\\n\\n\\n' --verticalSeparator '^\\n\\n'" + "presentation": "$(npm bin)/reveal-md README.md --theme solarized --separator '^\\n\\n\\n' --verticalSeparator '^\\n\\n'" }, "repository": { "type": "git", diff --git a/public/stage7/tests.js b/public/stage7/tests.js index f6021af2..32bbcb7a 100644 --- a/public/stage7/tests.js +++ b/public/stage7/tests.js @@ -165,7 +165,7 @@ describe.skip('闇', function() { }); - it('with文', function(){ + it('with 文', function(){ var obj = { 'foo': undefined, 'undefined': true }; with (obj) { From 952498cca6384ccdf5494a543caf037aa08baa61 Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Thu, 26 Mar 2015 15:10:29 +0900 Subject: [PATCH 2/2] Improve looks --- README.md | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++- reveal.json | 3 ++ 2 files changed, 130 insertions(+), 1 deletion(-) create mode 100644 reveal.json diff --git a/README.md b/README.md index 28eea9cb..d5288503 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,7 @@ JavaScript 初心者が JS の未来を見据えつつ、 基礎をひととおり身に付けるための資料です。 + この README は `npm run presentation` で 再生することができます。 @@ -14,6 +15,7 @@ JavaScript 初心者が JS の未来を見据えつつ、 ------------ + ### 1. 環境をセットアップ この研修では [Google Chrome](https://www.google.co.jp/chrome/browser/desktop/index.html) を利用します。 @@ -23,6 +25,7 @@ JavaScript 初心者が JS の未来を見据えつつ、 こちらも上のリンクからインストールしてください。 + ### 2. JavaScriptTraining を fork JavaScriptTraining の学習履歴を残すために、 @@ -33,6 +36,7 @@ JavaScriptTraining リポジトリを fork します。 [](http://mixi-inc.github.io/JavaScriptTraining/images/fork-button.png) + ### 3. 必要なものをダウンロード ここからはターミナル上での操作になります。 @@ -42,6 +46,7 @@ JavaScriptTraining リポジトリを fork します。 git clone コピーしたURL + ### 4. セットアップ 下のコマンドをターミナルで実行してください。 @@ -50,6 +55,7 @@ JavaScriptTraining リポジトリを fork します。 npm run setup + ### 5. webサーバーを立ち上げる 下のコマンドをターミナルで実行してください。 @@ -60,6 +66,7 @@ JavaScriptTraining リポジトリを fork します。 npm run serve + ### 6. トップページにアクセスする ブラウザから [http://localhost:8000](http://localhost:8000) へ @@ -73,6 +80,7 @@ JavaScriptTraining リポジトリを fork します。 ------------------------ + ### JavaScript とは > JavaScript はウェブの言語です。 @@ -84,6 +92,7 @@ JavaScriptTraining リポジトリを fork します。 > (JavaScript パターン, O'Reilly) + ### JavaScript のすごいところ > クラスというものがなく、 @@ -93,6 +102,7 @@ JavaScriptTraining リポジトリを fork します。 > (JavaScript パターン, O'Reilly) + > Java や PHP が追加しはじめた > クロージャーや無名関数といった > 機能は、JavaScript 開発者が @@ -102,6 +112,7 @@ JavaScriptTraining リポジトリを fork します。 > (JavaScript パターン, O'Reilly) + ### 楽しんできた機能？？？ ```javascript @@ -113,6 +124,7 @@ JavaScriptTraining リポジトリを fork します。 （クロージャーはトレーニングで扱います） + ### JavaScript はどこで動くのか - Web ブラウザ @@ -124,6 +136,7 @@ JavaScript の特色のひとつは、ブラウザ上で JavaScript がよく使われます。 + ### いつ JavaScript を使うのか - Web ページに独自の動きをつけたいとき @@ -137,6 +150,7 @@ JavaScript がよく使われます。 （タスクランナーとかパッケージマネージャ） + ### JavaScript を使うと… - アニメーションの例: [Si digital](http://sidigital.co/) @@ -149,6 +163,7 @@ JavaScript に会いにいこう ------------------------- + ### 1. 開発ツールを開く Chrome で [http://localhost:8000](http://localhost:8000) を開きます。 @@ -162,6 +177,7 @@ Web ページの適当な場所で - Windows の人：Ctrl + Shift + i + ### 2. Console を開く 開発ツールを選択し、Esc キーを @@ -174,6 +190,7 @@ Web ページの適当な場所で [](http://mixi-inc.github.io/JavaScriptTraining/images/console.png) + ### 3. 何か実行してみる 試しに `alert('Foo');` と実行してみてください。 @@ -181,11 +198,13 @@ Web ページの適当な場所で アラートポップアップが表示されます。 + ### 4. 計算させてみる `1 + 1` や `'Foo' + 'Bar'` なども実行できますね。 + ### 5. 変数代入・参照してみる 変数代入・参照もできますね。 @@ -196,6 +215,7 @@ foo; ``` + ### 6. ブラウザオブジェクトをいじる ブラウザオブジェクトもいじってみましょう。 @@ -207,6 +227,7 @@ document.title = 'あなたとjava 今すぐダウンロード'; Chrome のタブ名が書き変わりました。 + ### 7. ページを再読み込みすると戻る ページを再読み込みしてみてください。 @@ -216,6 +237,7 @@ Chrome のタブ名が書き変わりました。 できないということですね！） + ### 8. JavaScript とここで会える - スクリプト読み込みパターン（推奨） @@ -242,10 +264,12 @@ Chrome のタブ名が書き変わりました。 （あるいはポエム） + JavaScript を効率的に書けるようにするために 最低限の開発環境を整えます。 + JavaScript に精通していない人に 「どんなツールを使ったらいいですか？」と 聞かれることがよくあります。 @@ -256,20 +280,24 @@ JavaScript に精通していない人に [](http://mixi-inc.github.io/JavaScriptTraining/images/syntax-error.png) + ひとつエピソードを紹介します。 + JavaScript には静的型検査がないことや、 記号が多い構文や、まずい仕様がいくつもあるので、 ミスを犯しやすい言語の一つです。 + たとえば、JavaScript には `"use strict"` という 宣言があります。この宣言は JavaScript の まずい仕様の一部をエラーにすることで修正を 促す効果があり、よく記述を推奨される宣言です。 + あるプロジェクトで気を利かした プログラマーが `"use strict"` を 新しいスクリプトで使い始めました。 @@ -284,6 +312,7 @@ JavaScript には静的型検査がないことや、 するよい方法です！ + しかし、リリース後、新しいスクリプトとは 関係ないはずの JavaScript による メニューが動作しなくなっていました。 @@ -291,6 +320,7 @@ JavaScript には静的型検査がないことや、 なぜでしょうか？ + これは、パフォーマンスチューニングの一環で 複数の JavaScript ファイルを結合していたこと、 ファイルに対する `"use strict"` を利用していた @@ -303,12 +333,14 @@ JavaScript には静的型検査がないことや、 なってしまっていたのでした。 + このエピソードは、いわゆる**初見殺し**です。 「何それどうしてそんな仕様なの😱」 と言いたくなりますね。 + 悲しいことに、このような落とし穴は JavaScript の仕様・文化に数多く 潜んでいます。 @@ -317,6 +349,7 @@ JavaScript の仕様・文化に数多く 防げるのでしょうか？ + [ESLint](http://eslint.org/) や [JSHint](http://jshint.com/)、 [JSLint](http://www.jslint.com/) のような lint を 使いましょう。 @@ -328,6 +361,7 @@ JavaScript の仕様・文化に数多く （関数形式の "use strict" を使ってね） + ミスを防ぐためには、「頑張る」とか 「注意する」のような精神論ではなく、 lint によって防止することが必要です。 @@ -335,6 +369,7 @@ JavaScript の仕様・文化に数多く あれば、真っ先にいれるべきは lint なのです。 + 1. lint をかけてみる ターミナルで下のコマンドを実行してください。 @@ -362,6 +397,7 @@ JavaScript の仕様・文化に数多く DOM 要素を取得するトレーニング + #### DOM とは Web ページは HTML のタグによって @@ -374,6 +410,7 @@ Web ページは HTML のタグによって Web ページが構成されていることがよくわかります。 + この HTML タグは下のような木構造をとっています。 [](http://mixi-inc.github.io/JavaScriptTraining/images/github-elements.png) @@ -384,6 +421,7 @@ Web ページが構成されていることがよくわかります。 構造を確認してみてください。 + DOM (Document Object Model) は、この HTML のタグを JavaScript の世界で操作することができる API です。 @@ -391,6 +429,7 @@ HTML タグは、JavaScript の世界で DOM 要素というオブジェクトとして扱われます。 + [](http://mixi-inc.github.io/JavaScriptTraining/images/github-tree.png) HTML のタグを JavaScript 側で操作するためには @@ -401,6 +440,7 @@ JavaScript の世界へと取ってこなければなりません。 取得するという操作について学びます。 + HTML タグには、目印となるいくつかの情報が 付属しています。たとえば、下の div タグには ID 属性が付属しています。 @@ -417,6 +457,7 @@ var div = document.getElementById('foo'); ``` + 他にも CSS クラスやタグ名、その他の属性から、 DOM 要素を取得することができます。 @@ -425,6 +466,7 @@ DOM 要素を取得することができます。 ``` + #### CSS セレクタについて また、目印の指定の仕方のひとつに、 @@ -444,6 +486,7 @@ var div = document.querySelector('#foo'); IDセレクタ `#foo` で、取得したい DOM 要素を指示します。 + この方法の利点は、複雑な位置にある DOM 要素を 取得することができるということでしょう。 @@ -468,17 +511,19 @@ var div = document.querySelector('.foo div:last-child'); という操作になります。 + 図にすると、このようになります。 [](http://mixi-inc.github.io/JavaScriptTraining/images/css-selector-example.png) -CSS セレクタについては、[MDN のCSS リファレンス](https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors) が +CSS セレクタについては、[MDN のCSS リファレンス](https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors) が 参考になります。 仕様を見ないと我慢ならぬ！という立派な方は、 [セレクタ Level 3 仕様](http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/) を見るとよいでしょう。 + #### 実習 下のテストが green になるように、 @@ -494,6 +539,7 @@ CSS セレクタについては、[MDN のCSS リファレンス](https://develo DOM 要素のスタイルを変更するトレーニング + #### DOM 要素のスタイル DOM 要素には、 @@ -508,6 +554,7 @@ DOM 要素には、 参照してください） + このうち、スタイル属性を編集すると、DOM 要素の 見た目を変化させることができます。 @@ -517,6 +564,7 @@ style.color 属性を変更してみました。 [](http://mixi-inc.github.io/JavaScriptTraining/images/octocats.png) + このスタイル属性は CSS の仕様と対応するように 定められています。 @@ -531,6 +579,7 @@ JavaScript は見た目の変更のきっかけを HTML/JavaScript/CSS 分業の基本です。 + 残念なお知らせですが、 今回のトレーニングは CSS を 書けるようになることが目的ではないので、 @@ -538,9 +587,11 @@ HTML/JavaScript/CSS 分業の基本です。 学びます。 + レガシー… 😱 + まあ、肩を落とさないでください。 レガシーとはいえ、レガシーブラウザーを @@ -552,6 +603,7 @@ HTML/JavaScript/CSS 分業の基本です。 大事にしてください。 + #### 実習 下のテストが green になるように、 @@ -567,6 +619,7 @@ HTML/JavaScript/CSS 分業の基本です。 DOM の構造を変更するトレーニング + #### DOM の構造 このステージでは、DOM のスタイルではなく、 @@ -577,6 +630,7 @@ DOM の構造を変更するトレーニング DOM の構造を変更する必要性を考えてみます。 + 書籍検索サービスの API は、検索結果を 下のように返したとしましょう。 @@ -599,6 +653,7 @@ DOM の構造を変更する必要性を考えてみます。 ``` + このとき、画面に表示するために下のような HTML を 追加することになります。 @@ -621,6 +676,7 @@ DOM の構造を変更する必要性を考えてみます。 ``` + サーバー側で上のような HTML を 生成してもよいのですが、 JavaScript による DOM 構造の操作に @@ -630,11 +686,13 @@ JavaScript による DOM 構造の操作に （ページのリロードが必要ないからですね！） + このように、Web サービスの使いやすさを 追求するためには、JavaScript による DOM 構造の操作が重要なのです。 + #### 実習 下のテストが green になるように、 @@ -650,6 +708,7 @@ DOM 構造の操作が重要なのです。 DOM イベントを利用するトレーニング + ### DOM イベント解説編 ユーザーがボタンを押したり、 @@ -662,6 +721,7 @@ DOM イベントをうけとることができます。
+ click イベント以外にも多様なイベントがあります： - dblclick: 要素上でダブルクリックされたとき @@ -677,6 +737,7 @@ click イベント以外にも多様なイベントがあります： 参照するとよいでしょう。 + 試しに、このページを制御する JavaScript が 監視しているイベントを見てみましょう。 @@ -684,6 +745,7 @@ click イベント以外にも多様なイベントがあります： Event Listeners タブを開いてみてください。 + [](http://mixi-inc.github.io/JavaScriptTraining/images/chrome-dev-tool-event-debugging.png) たくさんのイベントが登録されていますね。 @@ -691,6 +753,7 @@ Event Listeners タブを開いてみてください。 では、これらのイベントの使い方を解説していきます。 + #### DOM イベント実装編 DOM のイベントを JavaScript 側で監視するには、 @@ -721,6 +784,7 @@ DOM のイベントを JavaScript 側で監視するには、 ``` + このうち、 `addEventListener` スタイルが お行儀のよい方法だといわれ、 推奨されてきました。 @@ -733,6 +797,7 @@ button.addEventListener('click', function(event) { ``` + しかし、[AngularJS](https://angularjs.org/) という最近の フレームワークでイベント属性スタイルを 積極的に採用する動きもあります。 @@ -750,12 +815,14 @@ button.addEventListener('click', function(event) { 従うとよいでしょう。 + ### DOM イベント伝搬の仕組み 次に、DOM のイベント伝搬（propagation） について解説します。 + 下のようなボタンを例に、伝搬の必要性を 考えていきます。このボタンは、アイコンつきで 表示されることを意図しています。 @@ -772,15 +839,18 @@ button 要素に `addEventListener` すればよいように どうなるのでしょうか？ + 実は、子要素で発生した DOM イベントは 親要素からも監視することができます。 この仕組みが DOM イベントの伝搬です。 + [](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) + `addEventListener` の引数で 1-2-4 か 1-3-4 のどちらかを選べます。 @@ -801,6 +871,7 @@ button 要素に `addEventListener` すればよいように リンクなどによる画面遷移がおこなわれる + 先ほどのボタンの例では、img 要素の click イベントは bubbling によって button 要素まで通知されるのです。 @@ -817,6 +888,7 @@ button.addEventListener('click', function(event) { ``` + #### 実習 下のテストが green になるように、 @@ -832,6 +904,7 @@ button.addEventListener('click', function(event) { 非同期処理のトレーニング + JavaScript の美しい機能のひとつに 非同期処理があります。 @@ -850,6 +923,7 @@ console.log(2); どちらか先に表示されるでしょうか。 + 答えは、`2` です。`setTimeout` に登録された 関数はいま実行途中のすべての関数が終了してから 呼び出されます（[JavaScriptのsetTimeoutを理解する](http://blog.mouten.info/2014/09/20/article/)）。 @@ -862,6 +936,7 @@ console.log(2); やり方を非同期処理と呼びます。 + #### サーバーとの通信 非同期処理の代表例といえばサーバーとの通信です。 @@ -872,6 +947,7 @@ console.log(2); よって、時間を有効活用することが重要になります。 + JavaScript にはサーバーと非同期に通信するための API が用意されています。 @@ -885,11 +961,13 @@ API が用意されています。 ことが多く、実際手で書くことはほとんどない + 今回は、JavaScript の将来を見据えて、 fetch API によるサーバーとの通信を トレーニングします。 + #### fetch API fetch API は下のように書きます。 @@ -913,6 +991,7 @@ fetch('/users.json') つながっています。 + #### Promise を使った非同期処理 さきほどの `.then`、`.catch` は、非同期処理の @@ -935,6 +1014,7 @@ fetch('/users.json') エラーがあった場合は、ログ出力は実行されません。 + また、`.catch` を使うと、エラーが発生した場合に 関数を実行できます。 @@ -955,10 +1035,12 @@ fetch('/users.json') 同時につけることもできます。 + サーバーと通信するだけなのに、 なんか複雑すぎるような…？ + 実はこの Promsie という複雑な仕組みを使う理由は、 - 並行非同期処理 @@ -967,6 +1049,7 @@ fetch('/users.json') を書きやすくする、ということなのです。 + #### Promise による平行非同期処理 `Promise.all` を使います。 @@ -986,6 +1069,7 @@ Promise.all([ ``` + #### Promise による直列非同期処理 `.then` で次々に処理を連結できます。 @@ -1002,6 +1086,7 @@ fetch('/api/foo') ``` + #### 実習 下のテストが green になるように、 @@ -1011,6 +1096,7 @@ fetch('/api/foo') [http://localhost:8000/stage5/](http://localhost:8000/stage5/) + #### 参考になる資料 - [Promise に関する参考情報](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) @@ -1025,6 +1111,7 @@ fetch('/api/foo') モジュールを実装するトレーニング + #### モジュール JavaScript は言語機能としてモジュールの @@ -1034,20 +1121,25 @@ JavaScript は言語機能としてモジュールの [ECMAScript 6](https://developer.mozilla.org/ja/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla) を待たなければなりません。 + とはいっても、みんなモジュールを使いたかったので、 さまざまなモジュールシステムとそれに付随する エコシステムが開発されてきました。 + [エコシステムの例](https://github.com/wilmoore/frontend-packagers) + あ…めっちゃ多い…😵 + 今回は、利用方法がシンプルな「[bower](http://bower.io)」を使います。 + #### bower bower は、JavaScript、HTML、CSSなどを @@ -1066,6 +1158,7 @@ bower によって読み込まれるパッケージ側に 裁量（責務）があります。 + この方針を[公式ドキュメント](http://bower.io/#getting-started)は端的に 言い表しています。 @@ -1074,6 +1167,7 @@ bower によって読み込まれるパッケージ側に > （どのようにしてパッケージを使うのかはあなた次第です） + #### 実習 まず、bower を実行することを体験してみます。 @@ -1084,10 +1178,12 @@ bower の設定ファイル bower.json を対話的に bower init + あとは説明に従って選択していくと、bower の パッケージ設定ファイル `bower.json` が作成されます。 + ##### 1. name このパッケージの名前を指定します。 @@ -1100,6 +1196,7 @@ bower の設定ファイル bower.json を対話的に お好きな名前をつけてください。 + ##### 2. version このパッケージのバージョンを指定します。 @@ -1117,6 +1214,7 @@ bower の設定ファイル bower.json を対話的に （major versionの 0 は開発版であることを示します）。 + ##### 3. description パッケージの簡単な概要を記述します。 @@ -1128,6 +1226,7 @@ bower の設定ファイル bower.json を対話的に - less.js: Leaner CSS + ##### 4. main file このパッケージが外部のパッケージに公開したい @@ -1135,6 +1234,7 @@ bower の設定ファイル bower.json を対話的に 今回は空で問題ありません。 + ##### 5. what types of module does this package expose? このパッケージが外部にエンドポイントを公開する @@ -1149,17 +1249,20 @@ bower の設定ファイル bower.json を対話的に 今回は何も選択しないで問題ありません。 + ##### 6. keywords このパッケージを検索でヒットさせるための キーワードを指定します。 + ##### 7. authors このパッケージの作者を指定します。 + ##### 8. license 好きなライセンスを選ぶとよいです。 @@ -1167,11 +1270,13 @@ bower の設定ファイル bower.json を対話的に デフォルトは [MIT ライセンス](http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license)です。 + ##### 9. homepage このパッケージの情報が見られる URL を記述します。 + ##### 10. set currenttly installed components as dependencies? 既に `bower_components` に含まれている @@ -1181,6 +1286,7 @@ bower の設定ファイル bower.json を対話的に n で構いません。 + ##### 11. add commonly ignored files to ignore list? `.gitignore` などのファイルから、 @@ -1190,6 +1296,7 @@ n で構いません。 y で読み込ませます。 + ##### 12. would you like to mark this package as private which prevents it from being accidentaly published to the registry? bower のレジストリへ登録できないようにするか @@ -1198,11 +1305,13 @@ bower のレジストリへ登録できないようにするか y でレジストリへの公開ができないように設定します。 + ##### 13. Looks good? この設定で問題なければ y を入力します。 + ##### bower install いよいよ、パッケージを追加していきます。 @@ -1211,6 +1320,7 @@ y でレジストリへの公開ができないように設定します。 検索することができます。 + では、試しに [Buttons](https://github.com/alexwolfe/Buttons) パッケージを 追加してみましょう。 @@ -1220,6 +1330,7 @@ y でレジストリへの公開ができないように設定します。 bower install --save Buttons + `--save` はパッケージ設定に依存ファイルを 追記する効果があります（`bower.json` の 内容が変化しているので、見てみてください）。 @@ -1229,11 +1340,13 @@ y でレジストリへの公開ができないように設定します。 取得することができるようになります。 + 今回は、簡単のために script タグで直接 `bower_components` 以下の JavaScript/CSS を 読み込みます。 + 今回の実習はテスト駆動形式ではありません。 満足のいく Web アプリケーションが書けたら、 @@ -1249,6 +1362,7 @@ y でレジストリへの公開ができないように設定します。 よくあるイディオムを読むトレーニング + このステージでは、よくある JavaScript の 不思議な書き方を学びます。 @@ -1256,6 +1370,7 @@ y でレジストリへの公開ができないように設定します。 ぜひ自分で調べて、結果を確かめてみてください！ + なお、興味のある方は、ステージ「闇」に 挑戦してみてくださいね！ @@ -1263,6 +1378,7 @@ y でレジストリへの公開ができないように設定します。 なります。 + #### 実習 下のテストが green になるように、 @@ -1277,9 +1393,11 @@ y でレジストリへの公開ができないように設定します。 ---- + ### Promise について + #### Promise による平行非同期処理 Promise による平行非同期処理を通常のやりかたと、 @@ -1288,6 +1406,7 @@ Promise らしいやり方とでやってみました。 コードを比較してみてください。 + ```javascript // 2つの Web API からレスポンスが欲しい！ @@ -1315,6 +1434,7 @@ fetch('/api/bar').then(function(responseBar) { 状態を複数もつ厄介なコードにしあがっていますね。 + ```javascript // 2つの Web API からレスポンスが欲しい！ @@ -1333,6 +1453,7 @@ Promise.all([ なくスッキリ！ + #### Promise による直列非同期処理 直列非同期処理についても、通常のやり方と、 @@ -1341,6 +1462,7 @@ Promise らしいやり方でやってみました。 コードを比較してみてください。 + ```javascript // Web API の結果を利用して別の API を実行したい！ @@ -1360,6 +1482,7 @@ fetch('/api/foo').then(function(responseFoo) { 変数を追跡するのに手間がかかりそうです。 + ネストの外に出すだけならば、終了コールバックを 呼び出す[継続渡しスタイル](http://ja.wikipedia.org/wiki/%E7%B6%99%E7%B6%9A%E6%B8%A1%E3%81%97%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB) で 書くことができます。 @@ -1395,6 +1518,7 @@ function callbackBuz(responseBuz) { 流れが追いづらい！ + クロージャー + 継続渡しスタイルを使うと… ```javascript @@ -1418,11 +1542,13 @@ function fetchBuz(callback) { ``` + これはこれで美しい…😌 （JS に慣れるまではちょっと読みづらいと思います） + Promise らしいやり方をとると `.then` で 次々に処理を連結できます。 diff --git a/reveal.json b/reveal.json new file mode 100644 index 00000000..846f7116 --- /dev/null +++ b/reveal.json @@ -0,0 +1,3 @@ +{ + "transition": "slide" +}