Merge pull request mixi-inc#15 from mixi-inc/impl-stage7

Kuniwak · Kuniwak · commit 236b65ddc927 · 2015-03-25T23:55:08.000+09:00
Implement stage7
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(/* ここに値を書き込んでください */);
+  });
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +  "//": "さすがにいまどき IE7 はやめてほしい",
 +  "box-sizing": false
 +}