Stage6 slide

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 すればよいように
 リンクなどによる画面遷移がおこなわれる
 
 
-[<img src="http://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg" style="background-color:white" height="500px">](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow)
+[<img src="http://www.w3.org/TR/DOM-Level-3-Events/eventflow.svg" style="background-color:white" height="500px">](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)
+
+
+あ…めっちゃ多い…&#x1f635;
+
+
+今回は、利用方法がシンプルな「[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) {
 }
 ```
 
+
 これはこれで美しい…&#x1f60c;
 
 （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);
 ```

public/bower.json

@@ -6,10 +6,6 @@
  "Kuniwak <yuki.kokubun@mixi.co.jp>"
  ],
  "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"
  }
 }

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);
 

public/stage6/index.html

@@ -6,15 +6,12 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
  <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
- <link rel="stylesheet" href="/bower_components/Buttons/css/buttons.css" media="all">
  <link rel="stylesheet" href="/bower_components/mocha/mocha.css" media="all">
  <link rel="stylesheet" href="/common/mocha-patch.css" media="all">
  <link rel="stylesheet" href="style.css" media="all">
 </head>
 <body>
- <div class="js-training-playground">
- <button class="button button-caution button-3d button-pill button-giant js-training-button">Push</button>
- </div>
+ <a href="sample" class="js-training-sample-link">サンプルパッケージ</a>
  <div id="mocha"></div>
  <script src="/bower_components/jquery/dist/jquery.js"></script>
  <script src="/bower_components/mocha/mocha.js"></script>