Skip to content

Commit 6df7c4d

Browse files
KuniwakKuniwak
committed
Merge pull request mixi-inc#8 from mixi-inc/stage6
Implement stage6
2 parents c4338eb + 9124b06 commit 6df7c4d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+299
-89
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
node_modules
2+
bower_components

‎README.markdown‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
JavaScript Training
2+
===================
3+
4+
JavaScript 初心者が JS の未来を見据えつつ、基礎をひととおり身に付けるための資料です。
5+
6+
7+
環境のセットアップ
8+
------------------
9+
10+
1. 必要なものをダウンロード
11+
12+
下のコマンドを端末で実行してください。
13+
14+
git clone https://github.com/mixi-inc/JavaScriptTraining.git
15+
cd JavaScriptTraining
16+
npm run setup
17+
18+
19+
2. webサーバーを立ち上げる
20+
21+
下のコマンドを端末で実行してください。なお、トレーニング中は
22+
このコマンドを終了しないでください。
23+
24+
npm run serve
25+
26+
27+
3. トップページにアクセスする
28+
29+
ブラウザから [http://localhost:8080](http://localhost:8080) へアクセスしてください。
30+
31+
32+
4. トレーニングを始める
33+
34+
public/stage1/tests.js を編集し、 [http://localhost:8080/stage1](http://localhost:8080/stage1) で
35+
実行されるすべてのテストにパスするようコードを編集してください。
36+
37+
コードを編集しおわったら、ページのリロードが必要です。
38+
ステージはすべてで 6 つあります。

‎gulp/serve.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/* eslint no-underscore-dangle:0 */
22
'use strict';
33

4+
var path = require('path');
45
var stream = require('stream');
56
var gutil = require('gulp-util');
67

7-
var SERVER_SCRIPT = './server.js';
8-
var PORT = 8000;
8+
var SERVER_SCRIPT = path.join(__dirname, '../server.js');
99

1010

1111
var serve = function() {
@@ -18,7 +18,7 @@ var serve = function() {
1818
nodemon({
1919
script: SERVER_SCRIPT,
2020
watch: [SERVER_SCRIPT],
21-
env: { PORT: PORT },
21+
env: { PORT: serve.PORT },
2222
stdout: false
2323
})
2424
.on('readable', function() {
@@ -31,12 +31,21 @@ var serve = function() {
3131
});
3232

3333
this.stderr.on('data', function(buf) {
34-
gutil.log(gutil.colors.red(buf));
34+
var stderr = String(buf);
35+
var isAddressAlreadyInUse = Boolean(stderr.match(/EADDRINUSE/));
36+
37+
var msg = 'サーバーを起動できませんでした。\n' + (isAddressAlreadyInUse ?
38+
'既にサーバーが立ち上がっているか、8000 番ポートが既に使用されています。' : stderr);
39+
40+
gutil.log(gutil.colors.red(msg));
3541
});
3642
});
3743
};
3844

3945
return readable;
4046
};
4147

48+
49+
serve.PORT = 8000;
50+
4251
module.exports = serve;

‎gulpfile.js‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,76 @@
11
'use strict';
22

33
var util = require('util');
4+
var path = require('path');
45
var gulp = require('gulp-help')(require('gulp'));
6+
var merge = require('merge-stream');
57

6-
var PORT = 8000;
7-
var BASE_URL = util.format('http://localhost:%d/', PORT);
8+
var serve = require('./gulp/serve.js');
89

910
var tasks = [
1011
{
11-
cmd: 'stage1',
12-
help: '意図した DOM を取得できているかテストします',
13-
url: BASE_URL + 'stage1',
14-
src: 'test/stage1.js'
12+
id: 'stage1',
13+
help: '意図した DOM を取得できているかテストします'
1514
}, {
16-
cmd: 'stage2',
17-
help: '意図通りに DOM の構造・スタイルが変更できているかテストします',
18-
url: BASE_URL + 'stage2',
19-
src: 'test/stage2.js'
15+
id: 'stage2',
16+
help: '意図通りに DOM のスタイルが変更できているかテストします'
2017
}, {
21-
cmd: 'stage3',
22-
help: '意図通りにイベントを利用できているかテストします',
23-
url: BASE_URL + 'stage3',
24-
src: 'test/stage3.js'
18+
id: 'stage3',
19+
help: '意図通りに DOM の構造が変更できているかテストします'
2520
}, {
26-
cmd: 'stage4',
27-
help: '意図通りにサーバーと通信できているかテストします',
28-
url: BASE_URL + 'stage4',
29-
src: 'test/stage4.js'
21+
id: 'stage4',
22+
help: '意図通りにイベントを利用できているかテストします'
3023
}, {
31-
cmd: 'stage5',
32-
help: '意図通りにモジュールを実装できているかテストします',
33-
url: BASE_URL + 'stage5',
34-
src: 'test/stage5.js'
24+
id: 'stage5',
25+
help: '意図通りに非同期処理ができているかテストします'
3526
}, {
36-
cmd: 'stage6',
37-
help: 'よくあるイディオムを読み書きできているかテストします',
38-
url: BASE_URL + 'stage6',
39-
src: 'test/stage6.js'
27+
id: 'stage6',
28+
help: '意図通りにモジュールを実装できているかテストします'
29+
}, {
30+
id: 'stage7',
31+
help: 'よくあるイディオムを読み書きできているかテストします'
4032
}
4133
];
4234

4335

4436
tasks.forEach(function(task) {
4537
var run = require('gulp-run');
38+
var url = util.format('http://localhost:%d/%s/', serve.PORT, task.id);
4639

47-
gulp.task(task.cmd, task.help, ['lint-' + task.cmd], function() {
40+
gulp.task(task.id, task.help, ['lint-' + task.id], function() {
4841
// We expected that mocha-phantomjs print colorized results, but it isn't.
4942
// So, I take a fast way that is using gulp-run.
50-
return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec();
43+
return run('$(npm bin)/mocha-phantomjs ' + url + ' || true').exec();
5144
});
5245
});
5346

5447

5548
tasks.forEach(function(task) {
56-
gulp.task('lint-' + task.cmd, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() {
49+
var stage = path.join('public', task.id);
50+
var js = path.join(stage, '**/*.js');
51+
var css = path.join(stage, '**/*.css');
52+
var csslintrc = path.join(stage, '.csslintrc');
53+
54+
gulp.task('lint-' + task.id, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() {
5755
var eslint = require('gulp-eslint');
56+
var csslint = require('gulp-csslint');
57+
58+
var lints = merge(
59+
gulp.src(css)
60+
.pipe(csslint(csslintrc))
61+
.pipe(csslint.reporter()),
5862

59-
return gulp.src(task.src)
60-
.pipe(eslint())
61-
.pipe(eslint.format());
63+
gulp.src(js)
64+
.pipe(eslint())
65+
.pipe(eslint.format())
66+
);
67+
68+
return lints;
6269
});
6370
});
6471

6572

73+
6674
gulp.task('serve', 'サーバーを起動し、ブラウザでテストを確認できるようにします', function(){
67-
var serve = require('./gulp/serve.js');
6875
return serve();
6976
});

‎package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
"description": "Training course repository for JavaScript by mixi",
55
"main": "index.js",
66
"scripts": {
7-
"help": "$(npm bin)/gulp help"
7+
"setup": "npm install; (cd public; bower install)",
8+
"help": "$(npm bin)/gulp help",
9+
"serve": "$(npm bin)/gulp serve"
810
},
911
"repository": {
1012
"type": "git",
@@ -21,22 +23,20 @@
2123
"homepage": "https://github.com/mixi-inc/JavaScriptTraining",
2224
"devDependencies": {
2325
"body-parser": "^1.12.0",
24-
"chai": "^2.1.1",
25-
"chai-as-promised": "^4.3.0",
26+
"event-stream": "^3.3.0",
2627
"express": "^4.12.2",
2728
"gulp": "^3.8.11",
29+
"gulp-csslint": "^0.1.5",
2830
"gulp-eslint": "^0.6.0",
2931
"gulp-help": "^1.3.3",
3032
"gulp-nodemon": "^1.0.5",
3133
"gulp-run": "^1.6.6",
3234
"gulp-util": "^3.0.4",
33-
"mocha": "^2.2.0",
34-
"mocha-phantomjs": "^3.5.3"
35+
"merge-stream": "^0.1.7",
36+
"mocha-phantomjs": "^3.5.3",
37+
"stream-combiner2": "^1.0.2"
3538
},
3639
"dependencies": {
37-
"bootstrap": "^3.3.2",
38-
"chai-jquery": "^2.0.0",
39-
"jquery": "^2.1.3",
40-
"whatwg-fetch": "^0.7.0"
40+
"bower": "^1.3.12"
4141
}
4242
}

test/.eslintrc renamed to public/.eslintrc

File renamed without changes.

‎public/bower.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "mixi-js-training-client",
3+
"version": "0.0.0",
4+
"homepage": "https://github.com/mixi-inc/JavaScriptTraining",
5+
"authors": [
6+
"Kuniwak <yuki.kokubun@mixi.co.jp>"
7+
],
8+
"description": "Training course repositry for JavaScript by mixi",
9+
"main": "index.html",
10+
"moduleType": [
11+
"globals"
12+
],
13+
"keywords": [
14+
"training"
15+
],
16+
"license": "MIT",
17+
"private": true,
18+
"ignore": [
19+
"**/.*",
20+
"node_modules",
21+
"bower_components",
22+
"test",
23+
"tests"
24+
],
25+
"dependencies": {
26+
"chai": "~2.1.2",
27+
"chai-as-promised": "~4.3.0",
28+
"mocha": "~2.2.1",
29+
"bootstrap": "~3.3.4",
30+
"chai-jquery": "~2.0.0",
31+
"jquery": "~2.1.3",
32+
"fetch": "~0.7.0",
33+
"github-fork-ribbon-css": "~0.1.1",
34+
"Buttons": "~2.0.0"
35+
}
36+
}

test/common/mocha-patch.css renamed to public/common/mocha-patch.css

File renamed without changes.

test/index.html renamed to public/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>mixi JS Training</title>
7-
<link rel="stylesheet" href="modules/bootstrap/dist/css/bootstrap.css" media="all">
8-
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
7+
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" media="all">
8+
<link rel="stylesheet" href="/bower_components/github-fork-ribbon-css/gh-fork-ribbon.css" />
99
<style>
1010
.github-fork-ribbon {
1111
background-color: #f80;

‎public/stage1/.csslintrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"//": "querySelector の練習のために、あえて ID セレクタでしかひけない要素を入れている",
3+
"ids": false,
4+
5+
"//": "querySelector の練習のために、あえて属性セレクタでしかひけない要素を入れている",
6+
"unqualified-attributes": false
7+
}

0 commit comments

Comments
 (0)