From 9bee0c28bcfde818a494339c564aec812956edb8 Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 15:47:55 +0900
Subject: [PATCH 1/7] Goodbye phantomjs

---
 gulpfile.js  | 13 -------------
 package.json |  2 --
 2 files changed, 15 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index 02c4e6e4..de2a0bfd 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,6 +1,5 @@
 'use strict';
 
-var util = require('util');
 var path = require('path');
 var gulp = require('gulp-help')(require('gulp'));
 var merge = require('merge-stream');
@@ -33,18 +32,6 @@ var tasks = [
 ];
 
 
-tasks.forEach(function(task) {
-  var run = require('gulp-run');
-  var url = util.format('http://localhost:%d/%s/', serve.PORT, task.id);
-
-  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 ' + url + ' || true').exec();
-  });
-});
-
-
 tasks.forEach(function(task) {
   var stage = path.join('public', task.id);
   var js = path.join(stage, '**/*.js');
diff --git a/package.json b/package.json
index ca45ee05..2423af7b 100644
--- a/package.json
+++ b/package.json
@@ -31,10 +31,8 @@
     "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",
     "merge-stream": "^0.1.7",
-    "mocha-phantomjs": "^3.5.3",
     "stream-combiner2": "^1.0.2"
   },
   "dependencies": {

From d2a47db7fffa0fd210cb7c0dd6a7ff3af77d102f Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 16:27:35 +0900
Subject: [PATCH 2/7] Remove code for PhantomJS

---
 public/stage1/index.html | 3 ---
 public/stage1/tests.js   | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/public/stage1/index.html b/public/stage1/index.html
index 83b38a29..5528cf67 100644
--- a/public/stage1/index.html
+++ b/public/stage1/index.html
@@ -41,9 +41,6 @@
     </script>
     <script>mocha.setup('bdd')</script>
     <script src="analytics.js"></script>
-    <script>
-      describe.skipWhenPhantomJS = window.mochaPhantomJS ? describe.skip : describe;
-    </script>
     <script src="tests.js"></script>
     <script>
       if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index e0cea582..0d96b5bf 100644
--- a/public/stage1/tests.js
+++ b/public/stage1/tests.js
@@ -327,7 +327,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
   });
 
 
-  describe.skipWhenPhantomJS('エクストラステージ', function(){
+  describe('エクストラステージ', function(){
     it('動いている寿司要素を取得する', function(){
 
       // 'change me!' を書き換えてください。

From 159265e8ce367e2978aa3b2d8e8847fea13f8dfe Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 16:28:12 +0900
Subject: [PATCH 3/7] More readable

---
 reveal.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/reveal.json b/reveal.json
index 846f7116..c2394c2e 100644
--- a/reveal.json
+++ b/reveal.json
@@ -1,3 +1,4 @@
 {
-  "transition": "slide"
+  "transition": "slide",
+  "transitionSpeed": "fast"
 }

From 9acf0cc4015f67199df3641e164b4e91bca6a338 Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 21:28:39 +0900
Subject: [PATCH 4/7] Improve stage1

---
 public/stage1/tests.js | 58 ++++++++++++++++--------------------------
 1 file changed, 22 insertions(+), 36 deletions(-)

diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index 0d96b5bf..15e90ff4 100644
--- a/public/stage1/tests.js
+++ b/public/stage1/tests.js
@@ -1,16 +1,14 @@
 'use strict';
 
-
-
 describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
   describe('DOM インターフェース編', function() {
     it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
-      var elementId = 'firebrick';
 
       // チュートリアル
       //
       // 'change me!' を document.getElementById(elementId); に
       // 書き換えてください。
+      var elementId = 'firebrick';
       var element = 'change me!';
 
       expect(element).to.be.instanceof(HTMLElement);
@@ -19,65 +17,59 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
 
     it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function(){
-      var elementId = 'chocolate';
 
       // 'change me!' を書き換えてください。
+      var elementId = 'chocolate';
       var element = 'change me!';
 
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
-
       expect(element).to.be.instanceof(HTMLElement);
       expect(element).to.have.property('id', elementId);
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById
     });
 
 
     it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function(){
-      var elementClassName = 'mediumseagreen';
 
       // 'change me!' を書き換えてください。
+      var elementClassName = 'mediumseagreen';
       var elements = 'change me!';
 
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
-
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property('className', elementClassName);
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
     });
 
 
     it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function(){
-      var elementClassName = 'turquoise';
 
       // 'change me!' を書き換えてください。
+      var elementClassName = 'turquoise';
       var elements = 'change me!';
 
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
-
       expect(elements).to.have.length(2);
       expect(elements[0]).to.have.property('className', elementClassName);
       expect(elements[1]).to.have.property('className', elementClassName);
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName
     });
 
 
     it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function(){
-      var elementTagName = 'blockquote';
 
       // 'change me!' を書き換えてください。
+      var elementTagName = 'blockquote';
       var elements = 'change me!';
 
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
-
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
-    });
-
 
-    it.skip('6 番の紫色の要素（data-js-training 属性の値は "blueviolet"）が1つ取得できる', function(){
-      // document.querySelector を学ばないと取得することができません！
-      // 次に進んでください。
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName
     });
   });
 
@@ -134,12 +126,6 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C'));
     });
-
-
-    it.skip('12 番の紫色の要素が1つ取得できる', function(){
-      // document.querySelector を学ばないと取得することができません！
-      // 次に進んでください。
-    });
   });
 
 
@@ -231,12 +217,12 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // 'change me!' を書き換えてください。
       var selector = 'change me!';
 
-      // 参考資料
-      // https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
-
       var element = document.querySelector(selector);
       expect(selector).to.not.have.string('#');
       expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
+
+      // 参考資料
+      // https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
     });
 
 
@@ -274,11 +260,11 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // 'change me!' を書き換えてください。
       var $element = 'change me!';
 
-      // 参考情報（英語）
-      // http://api.jquery.com/jQuery/#jQuery1
-
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.id(secret('qnexbenatr'));
+
+      // 参考情報（英語）
+      // http://api.jquery.com/jQuery/#jQuery1
     });
 
 

From 6c27c613d172a39846cea13f79b0b21ccc2bf38e Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 21:28:54 +0900
Subject: [PATCH 5/7] Fix titles

---
 public/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6d41f7bf..4d6d865e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -29,9 +29,9 @@ <h1>mixi JavaScript Training</h1>
       <li><a href="stage2">DOM 要素のスタイルを変更するトレーニング</a></li>
       <li><a href="stage3">DOM の構造を変更するトレーニング</a></li>
       <li><a href="stage4">DOM イベントを利用するトレーニング</a></li>
-      <li><a href="stage5">サーバーと通信するトレーニング</a></li>
+      <li><a href="stage5">非同期処理を書くトレーニング</a></li>
       <li><a href="stage6">モジュールを実装するトレーニング</a></li>
-      <li><a href="stage7">よくあるイディオムを読み書きするトレーニング</a></li>
+      <li><a href="stage7">よくあるイディオムを読むトレーニング</a></li>
     </ol>
   </div>
 </body>

From 32d60c2ca66c7e89d7aaeb482f99387f8d9646eb Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 21:38:38 +0900
Subject: [PATCH 6/7] Improve stage1

---
 public/stage1/tests.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index 15e90ff4..8ceb7101 100644
--- a/public/stage1/tests.js
+++ b/public/stage1/tests.js
@@ -79,9 +79,14 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // チュートリアル
       //
-      // 調べたい要素の上で右クリック > 要素の検証
+      // ここからは、開発ツールを使って目印となる ID やクラス名を調べてみましょう。
       //
-      // 'change me!' を書き換えてください。
+      // 調べたい要素の上で右クリック > 要素の検証をクリックします。
+      //
+      // すると、開発ツール上で <li id="brown">... が選択されます。
+      // このことから、7 番の赤色の要素の ID は brown だということがわかります。
+      //
+      // 'change me!' を document.getElementById('brown') に書き換えてください。
       var element = 'change me!';
 
       expect(element).to.have.property(secret('vq'), secret('oebja'));
@@ -134,14 +139,16 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // チュートリアル
       //
+      // 次に、document.querySelector ファミリを使って、DOM 要素を取得します。
+      //
       // 'change me!' を document.querySelector('#firebrick'); に
       // 書き換えてください。
       var element = 'change me!';
 
+      expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
+
       // 参考資料
       // https://developer.mozilla.org/ja/docs/DOM/Locating_DOM_elements_using_selectors
-
-      expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
     });
 
 
@@ -150,10 +157,10 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // 'change me!' を書き換えてください。
       var element = 'change me!';
 
+      expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
+
       // 参考資料
       // https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors
-
-      expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
     });
 
 
@@ -245,6 +252,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // チュートリアル
       //
+      // jQuery を使って要素を取得する方法も学んでおきましょう。
       // 基本的な使い方は document.querySelectorAll と同じです。
       //
       // 'change me!' を $('#brown') に書き換えてください。

From 1d67551b2dfa2bab1162daf073e17324f5b6ff27 Mon Sep 17 00:00:00 2001
From: Kuniwak <yuki.kokubun@mixi.co.jp>
Date: Thu, 26 Mar 2015 22:26:07 +0900
Subject: [PATCH 7/7] Fix issues found by review

---
 README.md              |  12 +++-
 public/index.html      |   2 +-
 public/stage1/tests.js |  77 ++++++++++++++-----------
 public/stage2/tests.js | 126 ++++++++++++++++++++++-------------------
 public/stage3/tests.js |  34 +++++------
 public/stage5/tests.js |  32 +++++------
 public/stage7/tests.js |  12 ++--
 7 files changed, 161 insertions(+), 134 deletions(-)

diff --git a/README.md b/README.md
index d5288503..d5124594 100644
--- a/README.md
+++ b/README.md
@@ -536,11 +536,17 @@ CSS セレクタについては、[MDN のCSS リファレンス](https://develo
 
 ### ステージ2
 
-DOM 要素のスタイルを変更するトレーニング
+DOM 要素の属性・テキストを変更する  
+トレーニング
+
+
+
+このステージでは、スタイルの変更や  
+表示文字列を変更するやり方を学びます。
 
 
 
-#### DOM 要素のスタイル
+#### DOM 要素の属性・テキスト
 
 DOM 要素には、
 
@@ -622,7 +628,7 @@ DOM の構造を変更するトレーニング
 
 #### DOM の構造
 
-このステージでは、DOM のスタイルではなく、  
+このステージでは、DOM の属性ではなく、  
 構造を変更するトレーニングをおこないます。
 
 たとえば、書籍を検索する Web API を使って、  
diff --git a/public/index.html b/public/index.html
index 4d6d865e..9dcac94e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@ <h1>mixi JavaScript Training</h1>
     </div>
     <ol>
       <li><a href="stage1">DOM 要素を取得するトレーニング</a></li>
-      <li><a href="stage2">DOM 要素のスタイルを変更するトレーニング</a></li>
+      <li><a href="stage2">DOM 要素の属性・テキストを変更するトレーニング</a></li>
       <li><a href="stage3">DOM の構造を変更するトレーニング</a></li>
       <li><a href="stage4">DOM イベントを利用するトレーニング</a></li>
       <li><a href="stage5">非同期処理を書くトレーニング</a></li>
diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index 8ceb7101..46f1ed45 100644
--- a/public/stage1/tests.js
+++ b/public/stage1/tests.js
@@ -1,22 +1,29 @@
 'use strict';
 
-describe('ステージ1（意図した DOM 要素を取得できるようになる）', function(){
+describe('ステージ1（意図した DOM 要素を取得できるようになる）', function() {
   describe('DOM インターフェース編', function() {
-    it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function(){
+    it('1 番の赤色の要素（ID は "firebrick"）が1つ取得できる', function() {
 
       // チュートリアル
       //
-      // 'change me!' を document.getElementById(elementId); に
-      // 書き換えてください。
+      // JavaScriptTraining へようこそ。
+      //
+      // このステージでは DOM 要素の取得を学びます。
+      // 'change me!' を document.getElementById(elementId) に
+      // 書き換え、ブラウザをリロードしてみてください。
       var elementId = 'firebrick';
       var element = 'change me!';
 
       expect(element).to.be.instanceof(HTMLElement);
       expect(element).to.have.property('id', elementId);
+
+      // テストが green になりましたか？
+      // では、すべてのテストが green になるように、すべてのテストを
+      // 修正してみましょう。
     });
 
 
-    it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function(){
+    it('2 番の橙色の要素（ID は "chocolate"）が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elementId = 'chocolate';
@@ -30,7 +37,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function(){
+    it('3 番の緑色の要素（CSS クラス名は "mediumseagreen"）が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elementClassName = 'mediumseagreen';
@@ -44,7 +51,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function(){
+    it('4 番の水色の要素（CSS クラス名は "turquoise"）が2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elementClassName = 'turquoise';
@@ -59,7 +66,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function(){
+    it('5 番の青色の要素（タグ名は "blockquote"）が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elementTagName = 'blockquote';
@@ -75,7 +82,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
 
   describe('開発ツール編', function() {
-    it('7 番の赤色の要素が1つ取得できる', function(){
+    it('7 番の赤色の要素が1つ取得できる', function() {
 
       // チュートリアル
       //
@@ -85,15 +92,14 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       //
       // すると、開発ツール上で <li id="brown">... が選択されます。
       // このことから、7 番の赤色の要素の ID は brown だということがわかります。
-      //
-      // 'change me!' を document.getElementById('brown') に書き換えてください。
+      // では、'change me!' を document.getElementById('brown') に書き換えてみましょう。
       var element = 'change me!';
 
       expect(element).to.have.property(secret('vq'), secret('oebja'));
     });
 
 
-    it('8 番の橙色の要素が1つ取得できる', function(){
+    it('8 番の橙色の要素が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var element = 'change me!';
@@ -102,7 +108,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('9 番の緑色の要素が1つ取得できる', function(){
+    it('9 番の緑色の要素が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elements = 'change me!';
@@ -112,7 +118,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('10 番の水色の要素が2つ取得できる', function(){
+    it('10 番の水色の要素が2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elements = 'change me!';
@@ -123,9 +129,12 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('11 番の青色の要素が1つ取得できる', function(){
+    it('11 番の青色の要素が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
+      //
+      // なお、11 番の青色の要素は li 要素ではありません！
+      // よくみると、色がついているのはさらに内側の要素のようです。
       var elements = 'change me!';
 
       expect(elements).to.have.length(1);
@@ -135,13 +144,13 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
 
   describe('基本 CSS セレクタ編', function() {
-    it('1 番の赤色の要素を querySelector を使って1つ取得できる', function(){
+    it('1 番の赤色の要素を querySelector を使って1つ取得できる', function() {
 
       // チュートリアル
       //
       // 次に、document.querySelector ファミリを使って、DOM 要素を取得します。
       //
-      // 'change me!' を document.querySelector('#firebrick'); に
+      // 'change me!' を document.querySelector('#firebrick') に
       // 書き換えてください。
       var element = 'change me!';
 
@@ -152,7 +161,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('2 番の橙色の要素を querySelector を使って1つ取得できる', function(){
+    it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var element = 'change me!';
@@ -164,7 +173,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('3 番の緑色の要素を querySelector を使って1つ取得できる', function(){
+    it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var element = 'change me!';
@@ -173,7 +182,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function(){
+    it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var elements = 'change me!';
@@ -184,7 +193,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('5 番の青色の要素を querySelector を使って1つ取得できる', function(){
+    it('5 番の青色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var element = 'change me!';
@@ -193,7 +202,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('6 番の紫色の要素を querySelector を使って1つ取得できる', function(){
+    it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var element = 'change me!';
@@ -205,11 +214,11 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
 
   describe('応用 CSS セレクタ編', function() {
-    it('7 番の赤色の要素を ID セレクタを使わずに1つ取得できる', function(){
+    it('7 番の赤色の要素を ID セレクタを使わずに1つ取得できる', function() {
 
       // チュートリアル
       //
-      // 'change me!' を '.js-training:nth-child(2) li';
+      // 'change me!' を '.js-training:nth-child(2) li'
       // に書き換えてください。
       var selector = 'change me!';
 
@@ -219,7 +228,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function(){
+    it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var selector = 'change me!';
@@ -233,7 +242,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function(){
+    it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var selector = 'change me!';
@@ -248,7 +257,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
 
   describe('jQuery 編', function() {
-    it('7 番の赤色の要素を jQuery を使って1つ取得できる', function(){
+    it('7 番の赤色の要素を jQuery を使って1つ取得できる', function() {
 
       // チュートリアル
       //
@@ -263,7 +272,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('8 番の橙色の要素を jQuery を使って1つ取得できる', function(){
+    it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var $element = 'change me!';
@@ -276,7 +285,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('9 番の緑色の要素を jQuery を使って1つ取得できる', function(){
+    it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var $element = 'change me!';
@@ -286,7 +295,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('10 番の水色の要素を jQuery を使って2つ取得できる', function(){
+    it('10 番の水色の要素を jQuery を使って2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var $element = 'change me!';
@@ -297,7 +306,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('11 番の青色の要素を jQuery を使って1つ取得できる', function(){
+    it('11 番の青色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var $element = 'change me!';
@@ -308,7 +317,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     });
 
 
-    it('12 番の紫色の要素を jQuery を使って1つ取得できる', function(){
+    it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
       var $element = 'change me!';
@@ -321,8 +330,8 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
   });
 
 
-  describe('エクストラステージ', function(){
-    it('動いている寿司要素を取得する', function(){
+  describe('エクストラステージ', function() {
+    it('動いている寿司要素を取得する', function() {
 
       // 'change me!' を書き換えてください。
       var element = 'change me!';
diff --git a/public/stage2/tests.js b/public/stage2/tests.js
index 90c32783..3493dbff 100644
--- a/public/stage2/tests.js
+++ b/public/stage2/tests.js
@@ -1,17 +1,17 @@
 'use strict';
 
 
-describe('ステージ2（意図した通りに DOM 要素のスタイルを変更できるようになる）', function(){
+describe('ステージ2（意図した通りに DOM 要素の属性・テキストを変更できるようになる）', function() {
   describe('DOMインターフェース編', function() {
-    it('寿司が表示されている要素の寿司を2つに増やす', function(){
-      var element;
+    it('1 番の要素の寿司を2つに増やす', function() {
 
       // チュートリアル
       //
       // ここに以下のコードを記述してください。
       //
-      // element = document.getElementById('firebrick');
+      // var element = document.getElementById('firebrick');
       // element.textContent = element.textContent + element.textContent;
+      var element = 'change me!';
 
 
       expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
@@ -20,84 +20,85 @@ describe('ステージ2（意図した通りに DOM 要素のスタイルを変
     });
 
 
-    it('チョコが表示されている要素のチョコを2つに増やす', function(){
-      var element;
+    it('2 番の要素のチョコを2つに増やす', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は element 変数に代入してください。
+      // 変更した DOM 要素は element 変数に代入してください。
+      var element = 'change me!';
 
 
-      // 参考情報
-      // https://developer.mozilla.org/ja/docs/Web/API/Node/textContent
-
       expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
       expect(element).to.have.deep.property(
         secret('grkgPbagrag'), '\uD83C\uDF6B\uD83C\uDF6B');
+
+      // 参考情報
+      // https://developer.mozilla.org/ja/docs/Web/API/Node/textContent
     });
 
 
-    it('3 番の要素の背景色を "limegreen" に変更する', function(){
-      var element;
+    it('3 番の要素の背景色を "limegreen" に変更する', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は element 変数に代入してください。
+      // 変更した DOM 要素は element 変数に代入してください。
+      var element = 'change me!';
 
 
-      // 参考情報
-      // https://developer.mozilla.org/ja/search?q=css+%E8%89%B2
-
       expect(element).to.have.property(
         secret('pynffAnzr'), secret('zrqvhzfrnterra'));
 
       expect(element).to.have.deep.property(
         secret('fglyr.onpxtebhaqPbybe'), normalizeColor('limegreen'));
+
+      // 参考情報
+      // https://developer.mozilla.org/ja/search?q=css+%E8%89%B2
     });
 
 
-    it('4 番の要素を 50% の透明度に変更する', function(){
-      var element;
+    it('4 番の要素を 50% の透明度に変更する', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は element 変数に代入してください。
-
+      // 変更した DOM 要素は element 変数に代入してください。
+      var element = 'change me!';
 
-      // 参考情報
-      // https://developer.mozilla.org/ja/search?q=css+%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6
 
       expect(element).to.have.property(
         secret('pynffAnzr'), secret('ghedhbvfr'));
 
       expect(element).to.have.deep.property(
         secret('fglyr.bcnpvgl'), '0.5');
+
+      // 参考情報
+      // https://developer.mozilla.org/ja/search?q=css+%E4%B8%8D%E9%80%8F%E6%98%8E%E5%BA%A6
     });
 
 
-    it('5 番の要素を時計回り方向に 10 度回転させる', function(){
-      var element;
+    it('5 番の要素を時計回り方向に 10 度回転させる', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は element 変数に代入してください。
+      // 変更した DOM 要素は element 変数に代入してください。
+      var element = 'change me!';
 
 
-      // 参考情報
-      // https://developer.mozilla.org/ja/search?q=css+%E5%9B%9E%E8%BB%A2
-
       expect(element).to.have.property(
         secret('gntAnzr'), secret('OYBPXDHBGR'));
 
       expect(element).to.have.deep.property(
         secret('fglyr.genafsbez'), secret('ebgngr(10qrt)'));
+
+      // 参考情報
+      // https://developer.mozilla.org/ja/search?q=css+%E5%9B%9E%E8%BB%A2
     });
 
 
-    it('6 番の要素を上に 20px 移動させる', function(){
-      var element;
+    it('6 番の要素を上に 20px 移動させる', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は element 変数に代入してください。
+      // 変更した DOM 要素は element 変数に代入してください。
+      //
+      // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
+      // 使う方法を使ってください。
+      var element = 'change me!';
 
-      // 参考情報
-      // https://developer.mozilla.org/ja/docs/Web/CSS/top
 
       expect(element).to.have.deep.property(
         secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg'));
@@ -107,20 +108,26 @@ describe('ステージ2（意図した通りに DOM 要素のスタイルを変
 
       expect(element).to.have.deep.property(
         secret('fglyr.cbfvgvba'), secret('eryngvir'));
+
+      // 参考情報
+      // https://developer.mozilla.org/ja/docs/Web/CSS/top
     });
   });
 
 
   describe('jQuery 編', function() {
-    it('寿司が表示されている要素の寿司を jQuery を使って2つに増やす', function(){
-      var $element;
+    it('7 番の要素の寿司を jQuery を使って2つに増やす', function() {
 
       // チュートリアル
       //
+      // 同じように、jQuery ではどのようにして DOM を操作するのか
+      // 体験してみましょう。
+      //
       // ここに以下のコードを記述してください。
       //
-      // $element = document.getElementById('brown');
-      // $element.textContent = $element.textContent + $element.textContent;
+      // var $element = $('#brown');
+      // $element.text($element.text() + $element.text());
+      var $element = 'change me!';
 
 
       expect($element).to.be.instanceof(jQuery);
@@ -129,44 +136,44 @@ describe('ステージ2（意図した通りに DOM 要素のスタイルを変
     });
 
 
-    it('チョコが表示されている要素のチョコを jQuery を使って2つに増やす', function(){
-      var $element;
+    it('8 番の要素のチョコを jQuery を使って2つに増やす', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は $element 変数に代入してください。
+      // 変更した DOM 要素は $element 変数に代入してください。
+      var $element = 'change me!';
 
 
-      // 参考情報
-      // http://api.jquery.com/category/manipulation/
-
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.id(secret('qnexbenatr'));
       expect($element).to.have.text('\uD83C\uDF6B\uD83C\uDF6B');
+
+      // 参考情報
+      // http://api.jquery.com/category/manipulation/
     });
 
 
-    it('9 番の要素の背景色を jQuery を使って "mediumseagreen" に変更する', function(){
-      var $element;
+    it('9 番の要素の背景色を jQuery を使って "mediumseagreen" に変更する', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は $element 変数に代入してください。
+      // 変更した DOM 要素は $element 変数に代入してください。
+      var $element = 'change me!';
 
 
-      // 参考情報
-      // http://api.jquery.com/category/css/
-
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.class(secret('yvzrterra'));
       expect($element).to.have.css(
         secret('onpxtebhaq-pbybe'), normalizeColor('mediumseagreen'));
+
+      // 参考情報
+      // http://api.jquery.com/category/css/
     });
 
 
-    it('10 番の要素を jQuery を使って 50% の透明度に変更する', function(){
-      var $element;
+    it('10 番の要素を jQuery を使って 50% の透明度に変更する', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は $element 変数に代入してください。
+      // 変更した DOM 要素は $element 変数に代入してください。
+      var $element = 'change me!';
 
 
       expect($element).to.be.instanceof(jQuery);
@@ -175,11 +182,11 @@ describe('ステージ2（意図した通りに DOM 要素のスタイルを変
     });
 
 
-    it('5 番の要素を jQuery を使って時計回り方向に 10 度回転させる', function(){
-      var $element;
+    it('5 番の要素を jQuery を使って時計回り方向に 10 度回転させる', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は $element 変数に代入してください。
+      // 変更した DOM 要素は $element 変数に代入してください。
+      var $element = 'change me!';
 
 
       expect($element).to.be.instanceof(jQuery);
@@ -191,11 +198,14 @@ describe('ステージ2（意図した通りに DOM 要素のスタイルを変
     });
 
 
-    it('6 番の要素を jQuery を使って上に 20px 移動させる', function(){
-      var $element;
+    it('6 番の要素を jQuery を使って上に 20px 移動させる', function() {
 
       // ここにコードを記述してください。
-      // 変更した HTML 要素は $element 変数に代入してください。
+      // 変更した DOM 要素は $element 変数に代入してください。
+      //
+      // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
+      // 使う方法を使ってください。
+      var $element = 'change me!';
 
 
       expect($element).to.be.instanceof(jQuery);
diff --git a/public/stage3/tests.js b/public/stage3/tests.js
index dbccc0da..fa3cb6f2 100644
--- a/public/stage3/tests.js
+++ b/public/stage3/tests.js
@@ -1,15 +1,15 @@
 'use strict';
 
-describe('ステージ3（意図した通りに DOM 要素の構造を変更できるようになる）', function(){
+describe('ステージ3（意図した通りに DOM 要素の構造を変更できるようになる）', function() {
   describe('DOMインターフェース編', function() {
-    it('1 番の要素から幽霊要素を除去する', function(){
+    it('1 番の要素から幽霊要素を除去する', function() {
 
       // チュートリアル
       //
       // ここに以下のコードを記述してください。
       //
       // var element = document.querySelector('#firebrick');
-      // var ghost = document.querySelector('.ghost');
+      // var ghost = document.querySelector('.firebrick-ghost');
       // element.removeChild(ghost);
 
 
@@ -19,7 +19,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('2 番の要素からインベーダー要素を除去する', function(){
+    it('2 番の要素からインベーダー要素を除去する', function() {
 
       // ここにコードを記述してください。
 
@@ -30,7 +30,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('3 番の要素の左右の幽霊要素をすべて除去する', function(){
+    it('3 番の要素の左右の幽霊要素をすべて除去する', function() {
 
       // ここにコードを記述してください。
 
@@ -40,7 +40,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('4 番の水色の要素の最後に要素を追加する', function(){
+    it('4 番の水色の要素の最後に要素を追加する', function() {
       var elementToAdd = document.createElement('span');
       elementToAdd.textContent = '\uD83D\uDC2C';
 
@@ -54,11 +54,12 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('5 番の青色の要素の最初に要素を追加する', function(){
+    it('5 番の青色の要素の最初に要素を追加する', function() {
       var elementToAdd = document.createElement('span');
       elementToAdd.textContent = '\uD83D\uDC1F';
 
-      // 上の elementToAdd を追加するコードをここに記述してください。
+      // 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを
+      // ここに記述してください。
 
 
       var blockquote = document.querySelector('blockquote');
@@ -70,10 +71,11 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
 
   describe('jQuery 編', function() {
-    it('6 番の要素から幽霊要素を除去する', function(){
+    it('6 番の要素から幽霊要素を除去する', function() {
 
       // チュートリアル
       //
+      // jQuery でも同じことをおこなってみましょう。
       // ここに以下のコードを記述してください。
       //
       // $('.brown-ghost').remove();
@@ -85,21 +87,21 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('7 番の要素からインベーダー要素を除去する', function(){
+    it('7 番の要素からインベーダー要素を除去する', function() {
 
       // ここにコードを記述してください。
 
 
-      // 参考情報
-      // http://api.jquery.com/category/manipulation/
-
       var $darkorange = $('#darkorange');
       expect($darkorange.children()).to.have.length(0);
       expect($darkorange).to.have.text('7');
+
+      // 参考情報
+      // http://api.jquery.com/category/manipulation/
     });
 
 
-    it('8 番の要素の左右の幽霊要素をすべて除去する', function(){
+    it('8 番の要素の左右の幽霊要素をすべて除去する', function() {
 
       // ここにコードを記述してください。
 
@@ -109,7 +111,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('9 番の水色の要素の最後に要素を追加する', function(){
+    it('9 番の水色の要素の最後に要素を追加する', function() {
       var $elementToAdd = $('<span>\uD83D\uDC2C</span>');
 
       // 上の $elementToAdd を追加するコードをここに記述してください。
@@ -121,7 +123,7 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
     });
 
 
-    it('10 番の青色の要素の最初に要素を追加する', function(){
+    it('10 番の青色の要素の最初に要素を追加する', function() {
       var $elementToAdd = $('<span>\uD83D\uDC1F</span>');
 
       // 上の $elementToAdd を追加するコードをここに記述してください。
diff --git a/public/stage5/tests.js b/public/stage5/tests.js
index 8871847a..8cb4d5ca 100644
--- a/public/stage5/tests.js
+++ b/public/stage5/tests.js
@@ -31,28 +31,28 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     });
 
 
-    it('複数の promise すべての完了を待つ promise を作成できる', function(){
+    it('複数の promise すべての完了を待つ promise を作成できる', function() {
       var messageFragments = ['あなたと', 'java', '今すぐダウンロード'];
       var promise1 = createWaitPromise(messageFragments[0], 10);
       var promise2 = createWaitPromise(messageFragments[1], 20);
       var promise3 = createWaitPromise(messageFragments[2], 30);
 
       // 作成した promise を promise 変数に代入してください。
-      var promise;
+      var promise = 'change me!';
 
 
       return expect(promise).to.eventually.deep.equal(messageFragments);
     });
 
 
-    it('複数の promise のうち最も速く解決された値をもつ promise を作成できる', function(){
+    it('複数の promise のうち最も速く解決された値をもつ promise を作成できる', function() {
       var messageFragments = ['30億の', 'デバイスで', '走るjava'];
       var promise1 = createWaitPromise(messageFragments[0], 30);
       var promise2 = createWaitPromise(messageFragments[1], 10);
       var promise3 = createWaitPromise(messageFragments[2], 30);
 
       // 作成した promise を promise 変数に代入してください。
-      var promise;
+      var promise = 'change me!';
 
 
       return expect(promise).to.eventually.equal(messageFragments[1]);
@@ -61,7 +61,7 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
 
 
   describe('fetch API 編', function() {
-    it('/api/friends API を使って Sugar の友人を取得できる', function(){
+    it('/api/friends API を使って Sugar の友人を取得できる', function() {
       var api = '/api/friends/';
       var username = 'Sugar';
 
@@ -78,12 +78,12 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     });
 
 
-    it('/api/friends API を使って Shen の友人を取得できる', function(){
+    it('/api/friends API を使って Shen の友人を取得できる', function() {
       var api = '/api/friends/';
       var username = 'Shen';
 
       // 作成した promise を promisedFriends 変数に代入してください。
-      var promisedFriends;
+      var promisedFriends = 'change me!';
 
 
       return expect(promisedFriends).to.eventually.deep.equal(
@@ -92,24 +92,24 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     });
 
 
-    it('/api/friends API を使って Shen の友人の友人を取得できる', function(){
+    it('/api/friends API を使って Shen の友人の友人を取得できる', function() {
       var api = '/api/friends/';
       var username = 'Shen';
 
       // 作成した promise を promisedFriends 変数に代入してください。
-      var promisedFriends;
+      var promisedFriends = 'change me!';
 
 
       return expect(promisedFriends).to.eventually.deep.equal(['TypeScript']);
     });
 
 
-    it.skip('/api/friends API を使って CoffeeScript の友人を再帰的に取得できる', function(){
+    it.skip('/api/friends API を使って CoffeeScript の友人を再帰的に取得できる', function() {
       // 難易度高いので、自信のある人だけ挑戦してください。
       // it.skip の .skip を消せば、テストが走るようになります。
 
       // 作成した promise を promisedFriends 変数に代入してください。
-      var promisedFriends;
+      var promisedFriends = 'change me!';
 
 
       return expect(promisedFriends).to.eventually.deep.equal(
@@ -121,7 +121,7 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     it('Github の mixi-inc の organization の情報を取得できる', function() {
 
       // 作成した promise を mixiOrg 変数に代入してください。
-      var mixiOrg;
+      var mixiOrg = 'change me!';
 
       return expect(mixiOrg).to.eventually.have.property('id', 1089312);
 
@@ -130,11 +130,11 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     });
 
 
-    it('Github API を使って、mixi-inc/JavaScriptTraining の情報を取得できる', function(){
+    it('Github API を使って、mixi-inc/JavaScriptTraining の情報を取得できる', function() {
       var repositry = 'mixi-inc/JavaScriptTraining';
 
       // 作成した promise を mixiRepo 変数に代入してください。
-      var mixiRepo;
+      var mixiRepo = 'change me!';
 
 
       return expect(mixiRepo).to.eventually.have.property('full_name', repositry);
@@ -145,9 +145,9 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
 
 
     it('Github API を使って、VimL、Emacs Lisp でスターが最も多いプロダクト名を' +
-       'それぞれ 1 つずつ取得できる', function(){
+       'それぞれ 1 つずつ取得できる', function() {
       var languages = [ 'VimL', '"Emacs Lisp"' ];
-      var mostPopularRepos;
+      var mostPopularRepos = 'change me!';
 
       // 作成した promise を mostPopularRepos 変数に代入してください。
 
diff --git a/public/stage7/tests.js b/public/stage7/tests.js
index 32bbcb7a..20c102c8 100644
--- a/public/stage7/tests.js
+++ b/public/stage7/tests.js
@@ -100,7 +100,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
 
 
 describe.skip('闇', function() {
-  it('== 演算子', function(){
+  it('== 演算子', function() {
     expect('10' == 10)
       .to.equal(/* ここに値を書き込んでください */);
 
@@ -121,7 +121,7 @@ describe.skip('闇', function() {
   });
 
 
-  it('new 演算子', function(){
+  it('new 演算子', function() {
     expect(Boolean(false) ? true : false)
     .to.equal(/* ここに値を書き込んでください */);
 
@@ -151,21 +151,21 @@ describe.skip('闇', function() {
   });
 
 
-  it('暗黙のキャスト', function(){
+  it('暗黙のキャスト', function() {
     expect(+'10' === '10').to.equal()/* ここに値を書き込んでください */;
 
     expect(10 === (10 + '')).to.equal(/* ここに値を書き込んでください */);
   });
 
 
-  it('Array コンストラクタ', function(){
+  it('Array コンストラクタ', function() {
     expect(Array(3)).to.deep.equal(/* ここに値を書き込んでください */);
 
     expect(Array(1, 2, 3)).to.deep.equal(/* ここに値を書き込んでください */);
   });
 
 
-  it('with 文', function(){
+  it('with 文', function() {
     var obj = { 'foo': undefined, 'undefined': true };
 
     with (obj) {
@@ -175,7 +175,7 @@ describe.skip('闇', function() {
   });
 
 
-  it('typeof 演算子', function(){
+  it('typeof 演算子', function() {
     expect(typeof 0).to.equal(/* ここに値を書き込んでください */);
 
     expect(typeof true).to.equal(/* ここに値を書き込んでください */);