From 685ba950abe7a021e9f7921068fa06a64bd4c65d Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Wed, 25 Mar 2015 23:36:36 +0900 Subject: [PATCH 1/4] Improve doc --- README.md | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 0c605f96..1c983ee2 100644 --- 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,7 +1139,7 @@ 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 のレジストリへ登録できないようにするか どうか指定します。 @@ -1139,7 +1147,7 @@ bower のレジストリへ登録できないようにするか y でレジストリへの公開ができないように設定します。 -##### 12. Looks good? +##### 13. Looks good? この設定で問題なければ y を入力します。 From 8c29da9c309b76151529848528b9b4afd3dc8ca6 Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Wed, 25 Mar 2015 23:37:02 +0900 Subject: [PATCH 2/4] Add stage7 --- public/stage7/.csslintrc | 4 + public/stage7/.eslintrc | 17 ++++ public/stage7/index.html | 31 ++++++ public/stage7/style.css | 5 + public/stage7/tests.js | 197 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 254 insertions(+) create mode 100644 public/stage7/.csslintrc create mode 100644 public/stage7/.eslintrc create mode 100644 public/stage7/index.html create mode 100644 public/stage7/style.css create mode 100644 public/stage7/tests.js diff --git a/public/stage7/.csslintrc b/public/stage7/.csslintrc new file mode 100644 index 00000000..a45be0e9 --- /dev/null +++ b/public/stage7/.csslintrc @@ -0,0 +1,4 @@ +{ + "//": "さすがにいまどき IE7 はやめてほしい", + "box-sizing": false +} diff --git a/public/stage7/.eslintrc b/public/stage7/.eslintrc new file mode 100644 index 00000000..f6d7f11c --- /dev/null +++ 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 new file mode 100644 index 00000000..701812a5 --- /dev/null +++ b/public/stage7/index.html @@ -0,0 +1,31 @@ + + + + mixi JS Training + + + + + + + + + +
+ + + + + + + + + + diff --git a/public/stage7/style.css b/public/stage7/style.css new file mode 100644 index 00000000..3d2d8efd --- /dev/null +++ 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 new file mode 100644 index 00000000..3ce9837f --- /dev/null +++ b/public/stage7/tests.js @@ -0,0 +1,197 @@ +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.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.strictEqual(/* ここに値を書き込んでください */); + expect(!!falsey).to.strictEqual(/* ここに値を書き込んでください */); + expect(Boolean(truthy)).to.strictEqual(/* ここに値を書き込んでください */); + expect(Boolean(falsey)).to.strictEqual(/* ここに値を書き込んでください */); + }); + + + 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('闇', function() { + it('== 演算子', function(){ + expect('10' == 10) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(null == undefined) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(null == false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(true == 1) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect([0, 1] == 0) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect([1] == 1) + .to.strictEqual(/* ここに値を書き込んでください */); + }); + + + it('new 演算子', function(){ + expect(Boolean(false) ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(Boolean(0) ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(new Boolean(0) ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect('abc' ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect('' ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(String(0) ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(String('') ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(new String(0) ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + + expect(new String('') ? true : false) + .to.strictEqual(/* ここに値を書き込んでください */); + }); + + + it('暗黙のキャスト', function(){ + expect(+'10' === '10').to.strictEqual(/* ここに値を書き込んでください */); + + expect('10' | 0 === 10).to.strictEqual(/* ここに値を書き込んでください */); + + expect(10 === (10 + '')).to.strictEqual(/* ここに値を書き込んでください */); + }); + + + it('Array コンストラクタ', function(){ + expect(Array(10)).to.strictEqual(/* ここに値を書き込んでください */); + + expect(Array(10, 10)).to.strictEqual(/* ここに値を書き込んでください */); + }); + + + it('with文', function(){ + var obj = { 'foo': undefined, 'undefined': true }; + + with (obj) { + expect(obj.foo === undefined) + .to.strictEqual(/* ここに値を書き込んでください */); + } + }); + + + 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(/* ここに値を書き込んでください */); + }); +}); From e1cb20eb7469fdeee399895aec3acaf36e2fb71c Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Wed, 25 Mar 2015 23:48:59 +0900 Subject: [PATCH 3/4] Fix tests --- public/stage7/tests.js | 58 ++++++++++++++++++++---------------------- 1 file changed, 28 insertions(+), 30 deletions(-) diff --git a/public/stage7/tests.js b/public/stage7/tests.js index 3ce9837f..1129df2e 100644 --- a/public/stage7/tests.js +++ b/public/stage7/tests.js @@ -12,9 +12,9 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func var counter = createCounter(); - expect(counter).to.equal(/* ここに値を書き込んでください */); - expect(counter).to.equal(/* ここに値を書き込んでください */); - expect(counter).to.equal(/* ここに値を書き込んでください */); + expect(counter()).to.equal(/* ここに値を書き込んでください */); + expect(counter()).to.equal(/* ここに値を書き込んでください */); + expect(counter()).to.equal(/* ここに値を書き込んでください */); }); @@ -25,7 +25,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func expect(0 || 'default').to.equal(/* ここに値を書き込んでください */); - expect({} || 'default').to.equal(/* ここに値を書き込んでください */); + expect({} || 'default').to.deep.equal(/* ここに値を書き込んでください */); var func = function(arg) { return arg || {}; @@ -63,10 +63,10 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func var truthy = 1; var falsey = 0; - expect(!!truthy).to.strictEqual(/* ここに値を書き込んでください */); - expect(!!falsey).to.strictEqual(/* ここに値を書き込んでください */); - expect(Boolean(truthy)).to.strictEqual(/* ここに値を書き込んでください */); - expect(Boolean(falsey)).to.strictEqual(/* ここに値を書き込んでください */); + expect(!!truthy).to.equal(/* ここに値を書き込んでください */); + expect(!!falsey).to.equal(/* ここに値を書き込んでください */); + expect(Boolean(truthy)).to.equal(/* ここに値を書き込んでください */); + expect(Boolean(falsey)).to.equal(/* ここに値を書き込んでください */); }); @@ -102,68 +102,66 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func describe('闇', function() { it('== 演算子', function(){ expect('10' == 10) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(null == undefined) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(null == false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(true == 1) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect([0, 1] == 0) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect([1] == 1) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); }); it('new 演算子', function(){ expect(Boolean(false) ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(Boolean(0) ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(new Boolean(0) ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect('abc' ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect('' ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(String(0) ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(String('') ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(new String(0) ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); expect(new String('') ? true : false) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); }); it('暗黙のキャスト', function(){ - expect(+'10' === '10').to.strictEqual(/* ここに値を書き込んでください */); + expect(+'10' === '10').to.equal()/* ここに値を書き込んでください */; - expect('10' | 0 === 10).to.strictEqual(/* ここに値を書き込んでください */); - - expect(10 === (10 + '')).to.strictEqual(/* ここに値を書き込んでください */); + expect(10 === (10 + '')).to.equal(/* ここに値を書き込んでください */); }); it('Array コンストラクタ', function(){ - expect(Array(10)).to.strictEqual(/* ここに値を書き込んでください */); + expect(Array(3)).to.deep.equal(/* ここに値を書き込んでください */); - expect(Array(10, 10)).to.strictEqual(/* ここに値を書き込んでください */); + expect(Array(1, 2, 3)).to.deep.equal(/* ここに値を書き込んでください */); }); @@ -172,7 +170,7 @@ describe('闇', function() { with (obj) { expect(obj.foo === undefined) - .to.strictEqual(/* ここに値を書き込んでください */); + .to.equal(/* ここに値を書き込んでください */); } }); From 55b16bd381bfb1d5d0da783b923f4ac8572ab3f1 Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Wed, 25 Mar 2015 23:52:34 +0900 Subject: [PATCH 4/4] Add stage7 --- README.md | 18 ++++++++++++++++-- public/stage7/tests.js | 2 +- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1c983ee2..837278aa 100644 --- a/README.md +++ b/README.md @@ -1201,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/tests.js b/public/stage7/tests.js index 1129df2e..f6021af2 100644 --- a/public/stage7/tests.js +++ b/public/stage7/tests.js @@ -99,7 +99,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func }); -describe('闇', function() { +describe.skip('闇', function() { it('== 演算子', function(){ expect('10' == 10) .to.equal(/* ここに値を書き込んでください */);