Implement stage6

.gitignore

@@ -1 +1,2 @@
 node_modules
+bower_components

README.markdown

@@ -0,0 +1,38 @@
+JavaScript Training
+===================
+
+JavaScript 初心者が JS の未来を見据えつつ、基礎をひととおり身に付けるための資料です。
+
+
+環境のセットアップ
+------------------
+
+1. 必要なものをダウンロード
+
+	下のコマンドを端末で実行してください。
+
+		git clone https://github.com/mixi-inc/JavaScriptTraining.git
+		cd JavaScriptTraining
+		npm run setup
+
+
+2. webサーバーを立ち上げる
+
+	下のコマンドを端末で実行してください。なお、トレーニング中は
+	このコマンドを終了しないでください。
+
+		npm run serve
+
+
+3. トップページにアクセスする
+
+	ブラウザから [http://localhost:8080](http://localhost:8080) へアクセスしてください。
+
+
+4. トレーニングを始める
+
+	public/stage1/tests.js を編集し、 [http://localhost:8080/stage1](http://localhost:8080/stage1) で
+	実行されるすべてのテストにパスするようコードを編集してください。
+
+	コードを編集しおわったら、ページのリロードが必要です。
+	ステージはすべてで 6 つあります。

gulp/serve.js

@@ -1,11 +1,11 @@
 /* eslint no-underscore-dangle:0 */
 'use strict';
 
+var path = require('path');
 var stream = require('stream');
 var gutil = require('gulp-util');
 
-var SERVER_SCRIPT = './server.js';
-var PORT = 8000;
+var SERVER_SCRIPT = path.join(__dirname, '../server.js');
 
 
 var serve = function() {
@@ -18,7 +18,7 @@ var serve = function() {
     nodemon({
       script: SERVER_SCRIPT,
       watch: [SERVER_SCRIPT],
-      env: { PORT: PORT },
+      env: { PORT: serve.PORT },
       stdout: false
     })
     .on('readable', function() {
@@ -31,12 +31,21 @@ var serve = function() {
       });
 
       this.stderr.on('data', function(buf) {
-        gutil.log(gutil.colors.red(buf));
+        var stderr = String(buf);
+        var isAddressAlreadyInUse = Boolean(stderr.match(/EADDRINUSE/));
+
+        var msg = 'サーバーを起動できませんでした。\n' + (isAddressAlreadyInUse ?
+            '既にサーバーが立ち上がっているか、8000 番ポートが既に使用されています。' : stderr);
+
+        gutil.log(gutil.colors.red(msg));
       });
     });
   };
 
   return readable;
 };
 
+
+serve.PORT = 8000;
+
 module.exports = serve;

gulpfile.js

@@ -1,69 +1,76 @@
 'use strict';
 
 var util = require('util');
+var path = require('path');
 var gulp = require('gulp-help')(require('gulp'));
+var merge = require('merge-stream');
 
-var PORT = 8000;
-var BASE_URL = util.format('http://localhost:%d/', PORT);
+var serve = require('./gulp/serve.js');
 
 var tasks = [
   {
-    cmd: 'stage1',
-    help: '意図した DOM を取得できているかテストします',
-    url: BASE_URL + 'stage1',
-    src: 'test/stage1.js'
+    id: 'stage1',
+    help: '意図した DOM を取得できているかテストします'
   }, {
-    cmd: 'stage2',
-    help: '意図通りに DOM の構造・スタイルが変更できているかテストします',
-    url: BASE_URL + 'stage2',
-    src: 'test/stage2.js'
+    id: 'stage2',
+    help: '意図通りに DOM のスタイルが変更できているかテストします'
   }, {
-    cmd: 'stage3',
-    help: '意図通りにイベントを利用できているかテストします',
-    url: BASE_URL + 'stage3',
-    src: 'test/stage3.js'
+    id: 'stage3',
+    help: '意図通りに DOM の構造が変更できているかテストします'
   }, {
-    cmd: 'stage4',
-    help: '意図通りにサーバーと通信できているかテストします',
-    url: BASE_URL + 'stage4',
-    src: 'test/stage4.js'
+    id: 'stage4',
+    help: '意図通りにイベントを利用できているかテストします'
   }, {
-    cmd: 'stage5',
-    help: '意図通りにモジュールを実装できているかテストします',
-    url: BASE_URL + 'stage5',
-    src: 'test/stage5.js'
+    id: 'stage5',
+    help: '意図通りに非同期処理ができているかテストします'
   }, {
-    cmd: 'stage6',
-    help: 'よくあるイディオムを読み書きできているかテストします',
-    url: BASE_URL + 'stage6',
-    src: 'test/stage6.js'
+    id: 'stage6',
+    help: '意図通りにモジュールを実装できているかテストします'
+  }, {
+    id: 'stage7',
+    help: 'よくあるイディオムを読み書きできているかテストします'
   }
 ];
 
 
 tasks.forEach(function(task) {
   var run = require('gulp-run');
+  var url = util.format('http://localhost:%d/%s/', serve.PORT, task.id);
 
-  gulp.task(task.cmd, task.help, ['lint-' + task.cmd], function() {
+  gulp.task(task.id, task.help, ['lint-' + task.id], function() {
     // We expected that mocha-phantomjs print colorized results, but it isn't.
     // So, I take a fast way that is using gulp-run.
-    return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec();
+    return run('$(npm bin)/mocha-phantomjs ' + url + ' || true').exec();
   });
 });
 
 
 tasks.forEach(function(task) {
-  gulp.task('lint-' + task.cmd, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() {
+  var stage = path.join('public', task.id);
+  var js = path.join(stage, '**/*.js');
+  var css = path.join(stage, '**/*.css');
+  var csslintrc = path.join(stage, '.csslintrc');
+
+  gulp.task('lint-' + task.id, 'ミスのおこりやすいコード・可読性の低いコードがないか検査します', function() {
     var eslint = require('gulp-eslint');
+    var csslint = require('gulp-csslint');
+
+    var lints = merge(
+      gulp.src(css)
+        .pipe(csslint(csslintrc))
+        .pipe(csslint.reporter()),
 
-    return gulp.src(task.src)
-      .pipe(eslint())
-      .pipe(eslint.format());
+      gulp.src(js)
+        .pipe(eslint())
+        .pipe(eslint.format())
+    );
+
+    return lints;
   });
 });
 
 
+
 gulp.task('serve', 'サーバーを起動し、ブラウザでテストを確認できるようにします', function(){
-  var serve = require('./gulp/serve.js');
   return serve();
 });

package.json

@@ -4,7 +4,9 @@
   "description": "Training course repository for JavaScript by mixi",
   "main": "index.js",
   "scripts": {
-    "help": "$(npm bin)/gulp help"
+    "setup": "npm install; (cd public; bower install)",
+    "help": "$(npm bin)/gulp help",
+    "serve": "$(npm bin)/gulp serve"
   },
   "repository": {
     "type": "git",
@@ -21,22 +23,20 @@
   "homepage": "https://github.com/mixi-inc/JavaScriptTraining",
   "devDependencies": {
     "body-parser": "^1.12.0",
-    "chai": "^2.1.1",
-    "chai-as-promised": "^4.3.0",
+    "event-stream": "^3.3.0",
     "express": "^4.12.2",
     "gulp": "^3.8.11",
+    "gulp-csslint": "^0.1.5",
     "gulp-eslint": "^0.6.0",
     "gulp-help": "^1.3.3",
     "gulp-nodemon": "^1.0.5",
     "gulp-run": "^1.6.6",
     "gulp-util": "^3.0.4",
-    "mocha": "^2.2.0",
-    "mocha-phantomjs": "^3.5.3"
+    "merge-stream": "^0.1.7",
+    "mocha-phantomjs": "^3.5.3",
+    "stream-combiner2": "^1.0.2"
   },
   "dependencies": {
-    "bootstrap": "^3.3.2",
-    "chai-jquery": "^2.0.0",
-    "jquery": "^2.1.3",
-    "whatwg-fetch": "^0.7.0"
+    "bower": "^1.3.12"
   }
 }

public/bower.json

@@ -0,0 +1,36 @@
+{
+  "name": "mixi-js-training-client",
+  "version": "0.0.0",
+  "homepage": "https://github.com/mixi-inc/JavaScriptTraining",
+  "authors": [
+    "Kuniwak <yuki.kokubun@mixi.co.jp>"
+  ],
+  "description": "Training course repositry for JavaScript by mixi",
+  "main": "index.html",
+  "moduleType": [
+    "globals"
+  ],
+  "keywords": [
+    "training"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "chai": "~2.1.2",
+    "chai-as-promised": "~4.3.0",
+    "mocha": "~2.2.1",
+    "bootstrap": "~3.3.4",
+    "chai-jquery": "~2.0.0",
+    "jquery": "~2.1.3",
+    "fetch": "~0.7.0",
+    "github-fork-ribbon-css": "~0.1.1",
+    "Buttons": "~2.0.0"
+  }
+}

test/index.html → public/index.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>mixi JS Training</title>
-  <link rel="stylesheet" href="modules/bootstrap/dist/css/bootstrap.css" media="all">
-  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css" />
+  <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" media="all">
+  <link rel="stylesheet" href="/bower_components/github-fork-ribbon-css/gh-fork-ribbon.css" />
   <style>
     .github-fork-ribbon {
       background-color: #f80;

public/stage1/.csslintrc

@@ -0,0 +1,7 @@
+{
+  "//": "querySelector の練習のために、あえて ID セレクタでしかひけない要素を入れている",
+  "ids": false,
+
+  "//": "querySelector の練習のために、あえて属性セレクタでしかひけない要素を入れている",
+  "unqualified-attributes": false
+}

test/stage1/index.html → public/stage1/index.html

@@ -6,8 +6,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="/modules/mocha/mocha.css" />
-    <link rel="stylesheet" href="../common/mocha-patch.css" />
+    <link rel="stylesheet" href="/bower_components/mocha/mocha.css" />
+    <link rel="stylesheet" href="/common/mocha-patch.css" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -30,10 +30,10 @@
       <li data-js-training="darkorchid">12</li>
     </ul>
     <div id="mocha"></div>
-    <script src="/modules/jquery/dist/jquery.js"></script>
-    <script src="/modules/mocha/mocha.js"></script>
-    <script src="/modules/chai/chai.js"></script>
-    <script src="/modules/chai-jquery/chai-jquery.js"></script>
+    <script src="/bower_components/jquery/dist/jquery.js"></script>
+    <script src="/bower_components/mocha/mocha.js"></script>
+    <script src="/bower_components/chai/chai.js"></script>
+    <script src="/bower_components/chai-jquery/chai-jquery.js"></script>
     <script>
       mocha.ui('bdd');
       mocha.reporter('html');

public/stage2/.csslintrc

@@ -0,0 +1,7 @@
+{
+  "//": "querySelector の練習のために、あえて ID セレクタでしかひけない要素を入れている",
+  "ids": false,
+
+  "//": "querySelector の練習のために、あえて属性セレクタでしかひけない要素を入れている",
+  "unqualified-attributes": false
+}

test/stage2/index.html → public/stage2/index.html

@@ -6,8 +6,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="/modules/mocha/mocha.css">
-  <link rel="stylesheet" href="../common/mocha-patch.css">
+  <link rel="stylesheet" href="/bower_components/mocha/mocha.css">
+  <link rel="stylesheet" href="/common/mocha-patch.css">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -34,10 +34,10 @@
   <div class="js-training-trick">&#x1f420;&#x1f420;</div>
   </div>
   <div id="mocha"></div>
-  <script src="/modules/jquery/dist/jquery.js"></script>
-  <script src="/modules/mocha/mocha.js"></script>
-  <script src="/modules/chai/chai.js"></script>
-  <script src="/modules/chai-jquery/chai-jquery.js"></script>
+  <script src="/bower_components/jquery/dist/jquery.js"></script>
+  <script src="/bower_components/mocha/mocha.js"></script>
+  <script src="/bower_components/chai/chai.js"></script>
+  <script src="/bower_components/chai-jquery/chai-jquery.js"></script>
   <script>
     mocha.ui('bdd');
     mocha.reporter('html');

public/stage3/.csslintrc

@@ -0,0 +1,7 @@
+{
+  "//": "querySelector の練習のために、あえて ID セレクタでしかひけない要素を入れている",
+  "ids": false,
+
+  "//": "querySelector の練習のために、あえて属性セレクタでしかひけない要素を入れている",
+  "unqualified-attributes": false
+}

test/stage3/index.html → public/stage3/index.html

@@ -6,8 +6,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="/modules/mocha/mocha.css">
-  <link rel="stylesheet" href="../common/mocha-patch.css">
+  <link rel="stylesheet" href="/bower_components/mocha/mocha.css">
+  <link rel="stylesheet" href="/common/mocha-patch.css">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -32,10 +32,10 @@
   <div class="js-training-trick">&#x1f420;&#x1f420;</div>
   </div>
   <div id="mocha"></div>
-  <script src="/modules/jquery/dist/jquery.js"></script>
-  <script src="/modules/mocha/mocha.js"></script>
-  <script src="/modules/chai/chai.js"></script>
-  <script src="/modules/chai-jquery/chai-jquery.js"></script>
+  <script src="/bower_components/jquery/dist/jquery.js"></script>
+  <script src="/bower_components/mocha/mocha.js"></script>
+  <script src="/bower_components/chai/chai.js"></script>
+  <script src="/bower_components/chai-jquery/chai-jquery.js"></script>
   <script>
     mocha.ui('bdd');
     mocha.reporter('html');

public/stage4/.csslintrc

@@ -0,0 +1,7 @@
+{
+  "//": "querySelector の練習のために、あえて ID セレクタでしかひけない要素を入れている",
+  "ids": false,
+
+  "//": "さすがにいまどき IE7 はやめてほしい",
+  "box-sizing": false
+}