Skip to content

Commit 236b65d

Browse files
KuniwakKuniwak
committed
Merge pull request mixi-inc#15 from mixi-inc/impl-stage7
Implement stage7
2 parents 0d622b0 + 55b16bd commit 236b65d

6 files changed

Lines changed: 287 additions & 13 deletions

File tree

‎README.md‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -817,13 +817,21 @@ button.addEventListener('click', function(event) {
817817

818818
### ステージ5
819819

820-
サーバーと通信するトレーニング
820+
非同期処理のトレーニング
821821

822822

823823
#### サーバーとの通信
824824

825-
JavaScript にはサーバーと通信するための API が
826-
用意されています。
825+
非同期処理の代表例といえばサーバーとの通信です。
826+
827+
サーバーとの通信はネットワークを通過するため、
828+
かなりの時間がかかります。そこで、レスポンスが
829+
返ってくるまでの間に、別の処理をおこなうことに
830+
よって、時間を有効活用することが重要になります。
831+
832+
833+
JavaScript にはサーバーと非同期に通信するための
834+
API が用意されています。
827835

828836
- [fetch API](http://www.hcn.zaq.ne.jp/___/WEB/Fetch-ja.html)
829837

@@ -855,7 +863,7 @@ fetch('/users.json')
855863
console.log('parsed json', json)
856864
})
857865
.catch(function(error) {
858-
console.log('parsing failed', error)
866+
console.error('parsing failed', error)
859867
});
860868
```
861869

@@ -894,7 +902,7 @@ fetch('/users.json')
894902

895903
// /users.json の取得時にエラーがでたときに、
896904
// error をログに出力する
897-
console.log(error);
905+
console.error(error);
898906
});
899907
```
900908

@@ -1101,19 +1109,19 @@ bower で管轄したいファイルのディレクトリを開き、
11011109
このパッケージの作者を指定します。
11021110

11031111

1104-
##### 7. license
1112+
##### 8. license
11051113

11061114
好きなライセンスを選ぶとよいです。
11071115

11081116
デフォルトは [MIT ライセンス](http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license)です。
11091117

11101118

1111-
##### 8. homepage
1119+
##### 9. homepage
11121120

11131121
このパッケージの情報が見られる URL を記述します。
11141122

11151123

1116-
##### 9. set currenttly installed components as dependencies?
1124+
##### 10. set currenttly installed components as dependencies?
11171125

11181126
既に `bower_components` に含まれている
11191127
コンポーネントをパッケージ設定に
@@ -1122,7 +1130,7 @@ bower で管轄したいファイルのディレクトリを開き、
11221130
n で構いません。
11231131

11241132

1125-
##### 10. add commonly ignored files to ignore list?
1133+
##### 11. add commonly ignored files to ignore list?
11261134

11271135
`.gitignore` などのファイルから、
11281136
パッケージに含めないファイルの指定を
@@ -1131,15 +1139,15 @@ n で構いません。
11311139
y で読み込ませます。
11321140

11331141

1134-
##### 11. would you like to mark this package as private which prevents it from being accidentaly published to the registry?
1142+
##### 12. would you like to mark this package as private which prevents it from being accidentaly published to the registry?
11351143

11361144
bower のレジストリへ登録できないようにするか
11371145
どうか指定します。
11381146

11391147
y でレジストリへの公開ができないように設定します。
11401148

11411149

1142-
##### 12. Looks good?
1150+
##### 13. Looks good?
11431151

11441152
この設定で問題なければ y を入力します。
11451153

@@ -1193,13 +1201,27 @@ y でレジストリへの公開ができないように設定します。
11931201
よくあるイディオムを読み書きするトレーニング
11941202

11951203

1204+
このステージでは、よくある JavaScript の
1205+
不思議な書き方を学びます。
1206+
1207+
なお、今回はヒントがありません！
1208+
ぜひ自分で調べて、結果を確かめてみてください！
1209+
1210+
1211+
なお、興味のある方は、ステージ「闇」に
1212+
挑戦してみてくださいね！
1213+
1214+
`.skip` を削除すれば挑戦できるようにに
1215+
なります。
1216+
1217+
11961218
#### 実習
11971219

11981220
下のテストが green になるように、
1199-
`public/stage6/tests.js` を
1221+
`public/stage7/tests.js` を
12001222
修正してください。
12011223

1202-
[http://localhost:8000/stage6/](http://localhost:8000/stage6/)
1224+
[http://localhost:8000/stage7/](http://localhost:8000/stage7/)
12031225

12041226

12051227

‎public/stage7/.csslintrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"//": "さすがにいまどき IE7 はやめてほしい",
3+
"box-sizing": false
4+
}

‎public/stage7/.eslintrc‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"mocha": true
5+
},
6+
"rules": {
7+
"no-unused-expressions": 0,
8+
"no-undef-init": 0
9+
},
10+
"globals": {
11+
"$": false,
12+
"jQuery": false,
13+
"fetch": false,
14+
"Promise": false,
15+
"HTMLCollection": false
16+
}
17+
}

‎public/stage7/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>mixi JS Training</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="icon">
8+
<link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
9+
<link rel="stylesheet" href="/bower_components/mocha/mocha.css" media="all">
10+
<link rel="stylesheet" href="/common/mocha-patch.css" media="all">
11+
<link rel="stylesheet" href="style.css" media="all">
12+
</head>
13+
<body>
14+
<div id="mocha"></div>
15+
<script src="/bower_components/mocha/mocha.js"></script>
16+
<script src="/bower_components/chai/chai.js"></script>
17+
<script src="/bower_components/chai-as-promised/lib/chai-as-promised.js"></script>
18+
<script src="/bower_components/fetch/fetch.js"></script>
19+
<script>
20+
mocha.ui('bdd');
21+
mocha.reporter('html');
22+
expect = chai.expect;
23+
</script>
24+
<script>mocha.setup('bdd')</script>
25+
<script src="tests.js"></script>
26+
<script>
27+
if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
28+
else { mocha.run(); }
29+
</script>
30+
</body>
31+
</html>

‎public/stage7/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.js-training-sample-link {
2+
display: block;
3+
margin: 10px auto;
4+
text-align: center;
5+
}

‎public/stage7/tests.js‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
describe('ステージ7（よくあるJSのイディオムを読める）', function() {
2+
'use strict';
3+
4+
it('クロージャー', function() {
5+
var createCounter = function() {
6+
var i = 0;
7+
8+
return function() {
9+
return i++;
10+
};
11+
};
12+
13+
var counter = createCounter();
14+
15+
expect(counter()).to.equal(/* ここに値を書き込んでください */);
16+
expect(counter()).to.equal(/* ここに値を書き込んでください */);
17+
expect(counter()).to.equal(/* ここに値を書き込んでください */);
18+
});
19+
20+
21+
it('ショートサーキット演算', function() {
22+
expect(true && 'default').to.equal(/* ここに値を書き込んでください */);
23+
24+
expect(false || 'default').to.equal(/* ここに値を書き込んでください */);
25+
26+
expect(0 || 'default').to.equal(/* ここに値を書き込んでください */);
27+
28+
expect({} || 'default').to.deep.equal(/* ここに値を書き込んでください */);
29+
30+
var func = function(arg) {
31+
return arg || {};
32+
};
33+
34+
expect(func({ foo: 'bar' })).to.deep.equal(/* ここに値を書き込んでください */);
35+
36+
expect(func()).to.deep.equal(/* ここに値を書き込んでください */);
37+
});
38+
39+
40+
it('無名即時実行関数', function() {
41+
var num = 0;
42+
43+
(function() {
44+
num = 1;
45+
})();
46+
47+
expect(num).to.equal(/* ここに値を書き込んでください */);
48+
});
49+
50+
51+
it('setTimeout 0 パターン', function() {
52+
var num = 0;
53+
54+
setTimeout(function() {
55+
num = 1;
56+
}, 0);
57+
58+
expect(num).to.equal(/* ここに値を書き込んでください */);
59+
});
60+
61+
62+
it('真偽値変換', function() {
63+
var truthy = 1;
64+
var falsey = 0;
65+
66+
expect(!!truthy).to.equal(/* ここに値を書き込んでください */);
67+
expect(!!falsey).to.equal(/* ここに値を書き込んでください */);
68+
expect(Boolean(truthy)).to.equal(/* ここに値を書き込んでください */);
69+
expect(Boolean(falsey)).to.equal(/* ここに値を書き込んでください */);
70+
});
71+
72+
73+
it('prototype 継承', function() {
74+
var GrandParent = function() {
75+
this.grandParent = true;
76+
};
77+
78+
var Parent = function() {
79+
this.parent = true;
80+
};
81+
Parent.prototype = new GrandParent();
82+
83+
var Child = function() {
84+
this.child = true;
85+
};
86+
Child.prototype = new Parent();
87+
88+
var parent = new Parent();
89+
var child = new Child();
90+
91+
expect(parent.grandParent).to.equal(/* ここに値を書き込んでください */);
92+
93+
expect(parent.child).to.equal(/* ここに値を書き込んでください */);
94+
95+
expect(child.grandParent).to.equal(/* ここに値を書き込んでください */);
96+
97+
expect(child.parent).to.equal(/* ここに値を書き込んでください */);
98+
});
99+
});
100+
101+
102+
describe.skip('闇', function() {
103+
it('== 演算子', function(){
104+
expect('10' == 10)
105+
.to.equal(/* ここに値を書き込んでください */);
106+
107+
expect(null == undefined)
108+
.to.equal(/* ここに値を書き込んでください */);
109+
110+
expect(null == false)
111+
.to.equal(/* ここに値を書き込んでください */);
112+
113+
expect(true == 1)
114+
.to.equal(/* ここに値を書き込んでください */);
115+
116+
expect([0, 1] == 0)
117+
.to.equal(/* ここに値を書き込んでください */);
118+
119+
expect([1] == 1)
120+
.to.equal(/* ここに値を書き込んでください */);
121+
});
122+
123+
124+
it('new 演算子', function(){
125+
expect(Boolean(false) ? true : false)
126+
.to.equal(/* ここに値を書き込んでください */);
127+
128+
expect(Boolean(0) ? true : false)
129+
.to.equal(/* ここに値を書き込んでください */);
130+
131+
expect(new Boolean(0) ? true : false)
132+
.to.equal(/* ここに値を書き込んでください */);
133+
134+
expect('abc' ? true : false)
135+
.to.equal(/* ここに値を書き込んでください */);
136+
137+
expect('' ? true : false)
138+
.to.equal(/* ここに値を書き込んでください */);
139+
140+
expect(String(0) ? true : false)
141+
.to.equal(/* ここに値を書き込んでください */);
142+
143+
expect(String('') ? true : false)
144+
.to.equal(/* ここに値を書き込んでください */);
145+
146+
expect(new String(0) ? true : false)
147+
.to.equal(/* ここに値を書き込んでください */);
148+
149+
expect(new String('') ? true : false)
150+
.to.equal(/* ここに値を書き込んでください */);
151+
});
152+
153+
154+
it('暗黙のキャスト', function(){
155+
expect(+'10' === '10').to.equal()/* ここに値を書き込んでください */;
156+
157+
expect(10 === (10 + '')).to.equal(/* ここに値を書き込んでください */);
158+
});
159+
160+
161+
it('Array コンストラクタ', function(){
162+
expect(Array(3)).to.deep.equal(/* ここに値を書き込んでください */);
163+
164+
expect(Array(1, 2, 3)).to.deep.equal(/* ここに値を書き込んでください */);
165+
});
166+
167+
168+
it('with文', function(){
169+
var obj = { 'foo': undefined, 'undefined': true };
170+
171+
with (obj) {
172+
expect(obj.foo === undefined)
173+
.to.equal(/* ここに値を書き込んでください */);
174+
}
175+
});
176+
177+
178+
it('typeof 演算子', function(){
179+
expect(typeof 0).to.equal(/* ここに値を書き込んでください */);
180+
181+
expect(typeof true).to.equal(/* ここに値を書き込んでください */);
182+
183+
expect(typeof 'string').to.equal(/* ここに値を書き込んでください */);
184+
185+
expect(typeof function() {}).to.equal(/* ここに値を書き込んでください */);
186+
187+
expect(typeof {}).to.equal(/* ここに値を書き込んでください */);
188+
189+
expect(typeof []).to.equal(/* ここに値を書き込んでください */);
190+
191+
expect(typeof undefined).to.equal(/* ここに値を書き込んでください */);
192+
193+
expect(typeof null).to.equal(/* ここに値を書き込んでください */);
194+
});
195+
});

0 commit comments

Comments
 (0)