mixi JS Training

diff --git a/README.md b/README.md index b09f424c..0c605f96 100644 --- a/README.md +++ b/README.md @@ -292,8 +292,10 @@ JavaScript には静的型検査がないことや、なってしまっていたのでした。 -この説明を読んで、「何それ意味わからない😱」と -思いませんでしたか？ +このミスは、いわゆる**初見殺し**です。 + +「何それどうしてそんな仕様なの😱」というのが +正常なプログラマの反応だと思います。悲しいことに、このような落とし穴は @@ -758,13 +760,14 @@ button 要素に addEventListener すればよいようにどうなるのでしょうか？ -実は、個要素で発生した DOM イベントは +実は、子要素で発生した DOM イベントは親要素からも監視することができます。この仕組みが DOM イベントの伝搬です。 -イベントの伝搬は4つのフェーズから構成されます。 +`addEventListener` の引数で +1-2-4 か 1-3-4 を選べます。 1. capturing フェーズ @@ -783,7 +786,7 @@ button 要素に addEventListener すればよいようにリンクなどによる画面遷移がおこなわれる -[

](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) +[

](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) 先ほどのボタンの例では、img 要素の @@ -963,7 +966,7 @@ fetch('/api/foo') - [Promise に関する参考情報](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise) - [Promise 参考情報（重量級）](http://azu.github.io/promises-book/) - [fetch API に関する参考情報](https://github.com/github/fetch) -- [Github API に関する参考情報](https://developer.github.com/v3/search/) +- [Github API に関する参考情報](https://developer.github.com/v3/) @@ -972,11 +975,214 @@ fetch('/api/foo') モジュールを実装するトレーニング +#### モジュール + +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等の、 +フロントエンドリソースのエコシステムです。 + +ただ、モジュールローディングの仕組みを +もたないため、この部分は RequireJS などの +外部モジュールシステムに頼ることになります。 +どのモジュールシステムに対応するかという選択は、 +bower によって読み込まれるパッケージ側に +裁量（責務）があります。 + + +これを、[公式ドキュメント](http://bower.io/#getting-started)は端的に +言い表しています。 + +> How you use packages is up to you. +> +> （どのようにしてパッケージを使うのかはあなた次第です） + + +bower の使い方は簡単です。 + +bower で管轄したいファイルのディレクトリを開き、 + + bower init + +です。あとは説明に従って選択していくと、bower の +パッケージ設定ファイル `bower.json` が作成されます。 + + +##### 1. name + +このパッケージの名前を指定します。 + +パッケージとして公開する場合には、既に同じ +パッケージ名が存在していないか確かめる必要が +あります。 + +この研修では、公開/非公開を問わないので、 +お好きな名前をつけてください。 + + +##### 2. version + +このパッケージのバージョンを指定します。 + +バージョンの形式は [Semantic Versioning](http://semver.org/lang/ja/) に +準拠しています。 + +この形式は、一般的に `X.Y.Z` と記述されます。 + +- `X` は major version（後方互換性がなくなる変更） +- `Y` は minor version（前方互換性がなくなる変更） +- `Z` は patch version（バグ修正など） + +今回は開発版なので、0.0.0 にしておきましょう +（major versionの 0 は開発版であることを示します）。 + + +##### 3. description + +パッケージの簡単な概要を記述します。 + +有名どころの説明をみてみます。 + +- bootstrap: The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. +- angular-latest: HTML enhanced for web apps +- less.js: Leaner CSS + + +##### 4. main file + +このパッケージが外部のパッケージに公開したい +ファイルを指定します。文字列と配列が指定できます。 +今回は空で問題ありません。 + + +##### 5. what types of module does this package expose? + +このパッケージが外部にエンドポイントを公開する +方法を明示します。 + +- amd: [Asynchronouse Module Definition](https://github.com/amdjs/amdjs-api/wiki/AMD) ([参考資料](http://www.matzmtok.com/blog/?p=845)) +- es6: [EcmaScript 6](http://wiki.ecmascript.org/lib/exe/fetch.php?id=harmony%3Aspecification_drafts&cache=cache&media=harmony:ecma-262_edition_6_03-17-15-releasecandidate3.pdf) ([参考資料](https://www.xenophy.com/javascript/8447#run-time-renaissance)) +- globals: グローバル変数経由でエンドポイント公開 +- node: [Node.js](https://nodejs.org/api/modules.html) +- yui: [YUI](http://yuilibrary.com/yui/docs/yui/create.html) (メンテ停止したのでもうやめましょう) + +今回は何も選択しないで問題ありません。 + + +##### 6. keywords + +このパッケージを検索でヒットさせるための +キーワードを指定します。 + + +##### 7. authors + +このパッケージの作者を指定します。 + + +##### 7. license + +好きなライセンスを選ぶとよいです。 + +デフォルトは [MIT ライセンス](http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license)です。 + + +##### 8. homepage + +このパッケージの情報が見られる URL を記述します。 + + +##### 9. set currenttly installed components as dependencies? + +既に `bower_components` に含まれている +コンポーネントをパッケージ設定に +含まれるようにするかどうかを指定します。 + +n で構いません。 + + +##### 10. add commonly ignored files to ignore list? + +`.gitignore` などのファイルから、 +パッケージに含めないファイルの指定を +読み込むかどうか指定します。 + +y で読み込ませます。 + + +##### 11. would you like to mark this package as private which prevents it from being accidentaly published to the registry? + +bower のレジストリへ登録できないようにするか +どうか指定します。 + +y でレジストリへの公開ができないように設定します。 + + +##### 12. Looks good? + +この設定で問題なければ y を入力します。 + + +##### bower install + +あとは、使いたいモジュールを追加していきます +（`--save` はパッケージ設定に依存ファイルを +追記する効果があります）。 + + bower install --save fetch + +このコマンドによって、fetch パッケージが、 +`bower_components` 以下に配置されます。 + +また、ここで設定に記載されたモジュールは、 +`bower install` で取得することが +できるようになります。 + + +今回は、簡単のために script タグで直接 +`bower_components` 以下の JavaScript/CSS を +読み込みます。 + + +パッケージは [Search Bower packages](http://bower.io/search/) で +検索することができます。 + + #### 実習 -下のテストが green になるように、 -`public/stage6/tests.js` を -修正してください。 +まず、bower を実行することを体験してみます。 + + cd public/stage6/sample + bower init + bower install Buttons + + +今回の実習はテスト駆動形式ではありません。 + +満足のいく Web アプリケーションが書けたら、 +`qualityOfYourAppliation` に `true` を +代入してください。 [http://localhost:8000/stage6/](http://localhost:8000/stage6/) @@ -1118,6 +1324,7 @@ function callbackBuz(responseBuz) { 流れが追いづらい！ + クロージャー + 継続渡しスタイルを使うと… ```javascript @@ -1140,6 +1347,7 @@ function fetchBuz(callback) { } ``` + これはこれで美しい…😌 （JS に慣れるまではちょっと読みづらいと思います） @@ -1153,8 +1361,8 @@ Promise らしいやり方をとると `.then` で fetch('/api/foo') .then(doSomething) - .then(fetch('/api/bar')) + .then(function() { return fetch('/api/bar'); }) .then(doSomething) - .then(fetch('/api/buz')) + .then(function() { return fetch('/api/buz'); }) .then(doSomething); ``` diff --git a/public/bower.json b/public/bower.json index 8440f76d..943413aa 100644 --- a/public/bower.json +++ b/public/bower.json @@ -6,10 +6,6 @@ "Kuniwak " ], "description": "Training course repositry for JavaScript by mixi", - "main": "index.html", - "moduleType": [ - "globals" - ], "keywords": [ "training" ], @@ -30,7 +26,6 @@ "chai-jquery": "~2.0.0", "jquery": "~2.1.3", "fetch": "~0.7.0", - "github-fork-ribbon-css": "~0.1.1", - "Buttons": "~2.0.0" + "github-fork-ribbon-css": "~0.1.1" } } diff --git a/public/stage5/tests.js b/public/stage5/tests.js index 8055bc72..8871847a 100644 --- a/public/stage5/tests.js +++ b/public/stage5/tests.js @@ -61,8 +61,26 @@ describe('ステージ5（意図通りに非同期処理を利用できる）', describe('fetch API 編', function() { + it('/api/friends API を使って Sugar の友人を取得できる', function(){ + var api = '/api/friends/'; + var username = 'Sugar'; + + // チュートリアル + // + // ここに下記のコードを記述してください。 + // + // var promisedFriends = fetch(api + username).then(function(res) { + // return res.json(); + // }); + + + return expect(promisedFriends).to.eventually.deep.equal(['PYXC-PJ']); + }); + + it('/api/friends API を使って Shen の友人を取得できる', function(){ - var api = '/api/friends/Shen'; + var api = '/api/friends/'; + var username = 'Shen'; // 作成した promise を promisedFriends 変数に代入してください。 var promisedFriends; @@ -75,7 +93,8 @@ describe('ステージ5（意図通りに非同期処理を利用できる）', it('/api/friends API を使って Shen の友人の友人を取得できる', function(){ - var api = '/api/friends/Shen'; + var api = '/api/friends/'; + var username = 'Shen'; // 作成した promise を promisedFriends 変数に代入してください。 var promisedFriends; @@ -100,17 +119,9 @@ describe('ステージ5（意図通りに非同期処理を利用できる）', it('Github の mixi-inc の organization の情報を取得できる', function() { - var mixiOrg; - - // チュートリアル - // - // ここに下記のコードを記述してください。 - // - // mixiOrg = fetch('https://api.github.com/orgs/mixi-inc'). - // then(function(response) { - // return response.json(); - // }); + // 作成した promise を mixiOrg 変数に代入してください。 + var mixiOrg; return expect(mixiOrg).to.eventually.have.property('id', 1089312); diff --git a/public/stage6/index.html b/public/stage6/index.html index 0f0f5252..6b8f5810 100644 --- a/public/stage6/index.html +++ b/public/stage6/index.html @@ -6,15 +6,12 @@ - -

- -

+ サンプルパッケージ

diff --git a/public/stage6/sample/index.html b/public/stage6/sample/index.html new file mode 100644 index 00000000..e7f0052b --- /dev/null +++ b/public/stage6/sample/index.html @@ -0,0 +1,18 @@ + + + + mixi JS Training + + + + + + + + +

+ +

+ + + diff --git a/public/stage6/sample/script.js b/public/stage6/sample/script.js new file mode 100644 index 00000000..f1a7325f --- /dev/null +++ b/public/stage6/sample/script.js @@ -0,0 +1,2 @@ +// ボタンはサービスです。 +// 自由に使ってください。 diff --git a/public/stage6/sample/style.css b/public/stage6/sample/style.css new file mode 100644 index 00000000..f7d4154c --- /dev/null +++ b/public/stage6/sample/style.css @@ -0,0 +1,10 @@ +.js-training-playground { + box-sizing: border-box; + padding: 80px 0; + height: 250px; +} + +.js-training-button { + display: block; + margin: 0 auto; +} diff --git a/public/stage6/style.css b/public/stage6/style.css index f7d4154c..3d2d8efd 100644 --- a/public/stage6/style.css +++ b/public/stage6/style.css @@ -1,10 +1,5 @@ -.js-training-playground { - box-sizing: border-box; - padding: 80px 0; - height: 250px; -} - -.js-training-button { - display: block; - margin: 0 auto; +.js-training-sample-link { + display: block; + margin: 10px auto; + text-align: center; }