mixi-inc · Kuniwak · Mar 25, 2015 · Mar 25, 2015 · Mar 25, 2015 · Mar 25, 2015
diff --git a/README.md b/README.md
@@ -817,13 +817,21 @@ button.addEventListener('click', function(event) {
 
 ### ステージ5
 
-サーバーと通信するトレーニング
+非同期処理のトレーニング
 
 
 #### サーバーとの通信
 
-JavaScript にはサーバーと通信するための API が 
-用意されています。
+非同期処理の代表例といえばサーバーとの通信です。
+
+サーバーとの通信はネットワークを通過するため、 
+かなりの時間がかかります。そこで、レスポンスが 
+返ってくるまでの間に、別の処理をおこなうことに 
+よって、時間を有効活用することが重要になります。
+
+
+JavaScript にはサーバーと非同期に通信するための 
+API が用意されています。
 
 - [fetch API](http://www.hcn.zaq.ne.jp/___/WEB/Fetch-ja.html)
 
@@ -855,7 +863,7 @@ fetch('/users.json')
  console.log('parsed json', json)
  })
  .catch(function(error) {
- console.log('parsing failed', error)
+ console.error('parsing failed', error)
  });
 ```
 
@@ -894,7 +902,7 @@ fetch('/users.json')
 
  // /users.json の取得時にエラーがでたときに、
  // error をログに出力する
- console.log(error);
+ console.error(error);
  });
 ```
 
@@ -1101,19 +1109,19 @@ bower で管轄したいファイルのディレクトリを開き、
 このパッケージの作者を指定します。
 
 
-##### 7. license
+##### 8. license
 
 好きなライセンスを選ぶとよいです。
 
 デフォルトは [MIT ライセンス](http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license)です。
 
 
-##### 8. homepage
+##### 9. homepage
 
 このパッケージの情報が見られる URL を記述します。
 
 
-##### 9. set currenttly installed components as dependencies?
+##### 10. set currenttly installed components as dependencies?
 
 既に `bower_components` に含まれている 
 コンポーネントをパッケージ設定に 
@@ -1122,7 +1130,7 @@ bower で管轄したいファイルのディレクトリを開き、
 n で構いません。
 
 
-##### 10. add commonly ignored files to ignore list?
+##### 11. add commonly ignored files to ignore list?
 
 `.gitignore` などのファイルから、 
 パッケージに含めないファイルの指定を 
@@ -1131,15 +1139,15 @@ n で構いません。
 y で読み込ませます。
 
 
-##### 11. would you like to mark this package as private which prevents it from being accidentaly published to the registry?
+##### 12. would you like to mark this package as private which prevents it from being accidentaly published to the registry?
 
 bower のレジストリへ登録できないようにするか 
 どうか指定します。
 
 y でレジストリへの公開ができないように設定します。
 
 
-##### 12. Looks good?
+##### 13. Looks good?
 
 この設定で問題なければ y を入力します。
 
@@ -1193,13 +1201,27 @@ y でレジストリへの公開ができないように設定します。
 よくあるイディオムを読み書きするトレーニング
 
 
+このステージでは、よくある JavaScript の 
+不思議な書き方を学びます。
+
+なお、今回はヒントがありません！
+ぜひ自分で調べて、結果を確かめてみてください！
+
+
+なお、興味のある方は、ステージ「闇」に 
+挑戦してみてくださいね！
+
+`.skip` を削除すれば挑戦できるようにに 
+なります。
+
+
 #### 実習
 
 下のテストが green になるように、 
-`public/stage6/tests.js` を 
+`public/stage7/tests.js` を 
 修正してください。
 
-[http://localhost:8000/stage6/](http://localhost:8000/stage6/)
+[http://localhost:8000/stage7/](http://localhost:8000/stage7/)
 
 
 

diff --git a/public/stage7/.csslintrc b/public/stage7/.csslintrc
@@ -0,0 +1,4 @@
+{
+ "//": "さすがにいまどき IE7 はやめてほしい",
+ "box-sizing": false
+}
diff --git a/public/stage7/.eslintrc b/public/stage7/.eslintrc
@@ -0,0 +1,17 @@
+{
+ "env": {
+ "browser": true,
+ "mocha": true
+ },
+ "rules": {
+ "no-unused-expressions": 0,
+ "no-undef-init": 0
+ },
+ "globals": {
+ "$": false,
+ "jQuery": false,
+ "fetch": false,
+ "Promise": false,
+ "HTMLCollection": false
+ }
+}
diff --git a/public/stage7/index.html b/public/stage7/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>mixi JS Training</title>
+ <meta charset="UTF-8">
+ <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/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 id="mocha"></div>
+ <script src="/bower_components/mocha/mocha.js"></script>
+ <script src="/bower_components/chai/chai.js"></script>
+ <script src="/bower_components/chai-as-promised/lib/chai-as-promised.js"></script>
+ <script src="/bower_components/fetch/fetch.js"></script>
+ <script>
+ mocha.ui('bdd');
+ mocha.reporter('html');
+ expect = chai.expect;
+ </script>
+ <script>mocha.setup('bdd')</script>
+ <script src="tests.js"></script>
+ <script>
+ if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
+ else { mocha.run(); }
+ </script>
+</body>
+</html>
diff --git a/public/stage7/style.css b/public/stage7/style.css
@@ -0,0 +1,5 @@
+.js-training-sample-link {
+display: block;
+margin: 10px auto;
+text-align: center;
+}
diff --git a/public/stage7/tests.js b/public/stage7/tests.js
@@ -0,0 +1,195 @@
+describe('ステージ7（よくあるJSのイディオムを読める）', function() {
+ 'use strict';
+
+ it('クロージャー', function() {
+ var createCounter = function() {
+ var i = 0;
+
+ return function() {
+ return i++;
+ };
+ };
+
+ var counter = createCounter();
+
+ expect(counter()).to.equal(/* ここに値を書き込んでください */);
+ expect(counter()).to.equal(/* ここに値を書き込んでください */);
+ expect(counter()).to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('ショートサーキット演算', function() {
+ expect(true && 'default').to.equal(/* ここに値を書き込んでください */);
+
+ expect(false || 'default').to.equal(/* ここに値を書き込んでください */);
+
+ expect(0 || 'default').to.equal(/* ここに値を書き込んでください */);
+
+ expect({} || 'default').to.deep.equal(/* ここに値を書き込んでください */);
+
+ var func = function(arg) {
+ return arg || {};
+ };
+
+ expect(func({ foo: 'bar' })).to.deep.equal(/* ここに値を書き込んでください */);
+
+ expect(func()).to.deep.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('無名即時実行関数', function() {
+ var num = 0;
+
+ (function() {
+ num = 1;
+ })();
+
+ expect(num).to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('setTimeout 0 パターン', function() {
+ var num = 0;
+
+ setTimeout(function() {
+ num = 1;
+ }, 0);
+
+ expect(num).to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('真偽値変換', function() {
+ var truthy = 1;
+ var falsey = 0;
+
+ expect(!!truthy).to.equal(/* ここに値を書き込んでください */);
+ expect(!!falsey).to.equal(/* ここに値を書き込んでください */);
+ expect(Boolean(truthy)).to.equal(/* ここに値を書き込んでください */);
+ expect(Boolean(falsey)).to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('prototype 継承', function() {
+ var GrandParent = function() {
+ this.grandParent = true;
+ };
+
+ var Parent = function() {
+ this.parent = true;
+ };
+ Parent.prototype = new GrandParent();
+
+ var Child = function() {
+ this.child = true;
+ };
+ Child.prototype = new Parent();
+
+ var parent = new Parent();
+ var child = new Child();
+
+ expect(parent.grandParent).to.equal(/* ここに値を書き込んでください */);
+
+ expect(parent.child).to.equal(/* ここに値を書き込んでください */);
+
+ expect(child.grandParent).to.equal(/* ここに値を書き込んでください */);
+
+ expect(child.parent).to.equal(/* ここに値を書き込んでください */);
+ });
+});
+
+
+describe.skip('闇', function() {
+ it('== 演算子', function(){
+ expect('10' == 10)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(null == undefined)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(null == false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(true == 1)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect([0, 1] == 0)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect([1] == 1)
+ .to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('new 演算子', function(){
+ expect(Boolean(false) ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(Boolean(0) ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(new Boolean(0) ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect('abc' ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect('' ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(String(0) ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(String('') ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(new String(0) ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+
+ expect(new String('') ? true : false)
+ .to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('暗黙のキャスト', function(){
+ expect(+'10' === '10').to.equal()/* ここに値を書き込んでください */;
+
+ expect(10 === (10 + '')).to.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('Array コンストラクタ', function(){
+ expect(Array(3)).to.deep.equal(/* ここに値を書き込んでください */);
+
+ expect(Array(1, 2, 3)).to.deep.equal(/* ここに値を書き込んでください */);
+ });
+
+
+ it('with文', function(){
+ var obj = { 'foo': undefined, 'undefined': true };
+
+ with (obj) {
+ expect(obj.foo === undefined)
+ .to.equal(/* ここに値を書き込んでください */);
+ }
+ });
+
+
+ it('typeof 演算子', function(){
+ expect(typeof 0).to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof true).to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof 'string').to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof function() {}).to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof {}).to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof []).to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof undefined).to.equal(/* ここに値を書き込んでください */);
+
+ expect(typeof null).to.equal(/* ここに値を書き込んでください */);
+ });
+});