diff --git a/README.md b/README.md index 0c605f96..837278aa 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 を入力します。 @@ -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 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..f6021af2 --- /dev/null +++ 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(/* ここに値を書き込んでください */); + }); +});