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
+}