From 57077b40d83e29f65104972cb3d2ba12c681d913 Mon Sep 17 00:00:00 2001
From: Yuichi Mori <yuichi.mori@sindbad-int.com>
Date: Fri, 17 Jul 2015 17:36:33 +0900
Subject: [PATCH] commit

---
 .DS_Store                                   | Bin 0 -> 6148 bytes
 npm-debug.log                               |  24 +++++++
 public/.DS_Store                            | Bin 0 -> 6148 bytes
 public/stage1/tests.js                      |  52 +++++++-------
 public/stage2/tests.js                      |  54 ++++++++-------
 public/stage3/tests.js                      |  44 +++++++++---
 public/stage4/tests.js                      |  68 ++++++++++++++++--
 public/stage5/tests.js                      |  72 ++++++++++++++------
 public/stage6/.DS_Store                     | Bin 0 -> 6148 bytes
 public/stage6/sample/.DS_Store              | Bin 0 -> 6148 bytes
 public/stage6/sample/index.html             |  14 +++-
 public/stage6/sample/public/.DS_Store       | Bin 0 -> 6148 bytes
 public/stage6/sample/public/bower.json      |  23 +++++++
 public/stage6/sample/public/img/miniman.png | Bin 0 -> 4802 bytes
 public/stage6/sample/script.js              |  64 ++++++++++++++++-
 public/stage6/sample/style.css              |  36 +++++++++-
 public/stage7/tests.js                      |  42 ++++++------
 17 files changed, 380 insertions(+), 113 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 npm-debug.log
 create mode 100644 public/.DS_Store
 create mode 100644 public/stage6/.DS_Store
 create mode 100644 public/stage6/sample/.DS_Store
 create mode 100644 public/stage6/sample/public/.DS_Store
 create mode 100644 public/stage6/sample/public/bower.json
 create mode 100644 public/stage6/sample/public/img/miniman.png

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b58b51eb1bcce3b292f0b283b09be84d2d433f4f
GIT binary patch
literal 6148
zcmeHKI|>3Z5S>vG!DdU#T)`Uz(Gz$9Q5#`FLF~8kTprCgpF&yfv{2r_<Rz1N33<iN
zj)>^uvY(4IA~Jy+%GHLx*}i$t1{qNx9A_M4w?FUN?eW<5vR?;`JC>7NWGn3>-!^De
zfC^9nDnJFOz{eHH5<8iG{A3<T1*pKUD`4M;0ynIQU7&wDFn9|993kw6x%U#lVgX=H
z>;e&iX;6Vd)od{|=!lohtBGA;&_%QP(7ai*Ls7pS=NC^Gt$`e=02O#vU>M8B>i-J<
zrvHB?aYY5Fz+Wk#qvd+Jz>~7J_8w=ow!k-V%eleLFn0<DFULSH$5>c7o_SK_6`Nzf
VCU${NN8IT^{tTEdG%E0I1@0mY6@&l)

literal 0
HcmV?d00001

diff --git a/npm-debug.log b/npm-debug.log
new file mode 100644
index 00000000..5ed6115e
--- /dev/null
+++ b/npm-debug.log
@@ -0,0 +1,24 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'node', '/usr/local/bin/npm', 'run', 'server' ]
+2 info using npm@2.7.4
+3 info using node@v0.12.2
+4 verbose stack Error: missing script: server
+4 verbose stack     at run (/usr/local/lib/node_modules/npm/lib/run-script.js:165:19)
+4 verbose stack     at /usr/local/lib/node_modules/npm/lib/run-script.js:81:5
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:52:40
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:376:33
+4 verbose stack     at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:341:59)
+4 verbose stack     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:373:17)
+4 verbose stack     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:127:33)
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:332:40
+4 verbose stack     at evalmachine.<anonymous>:334:14
+4 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:102:5
+5 verbose cwd /Users/sindbadmori/git/JavaScriptTraining
+6 error Darwin 14.0.0
+7 error argv "node" "/usr/local/bin/npm" "run" "server"
+8 error node v0.12.2
+9 error npm  v2.7.4
+10 error missing script: server
+11 error If you need help, you may report this error at:
+11 error     <https://github.com/npm/npm/issues>
+12 verbose exit [ 1, true ]
diff --git a/public/.DS_Store b/public/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1884476ac46945f96c68551c9391cf3361bac803
GIT binary patch
literal 6148
zcmeHKyH3ME5S)VuMWS&@dA~qIZAIY=_y8aYq6smILA37pZDt=JTMjJ+nw56PH@ABy
zPvP|fD699~HP8T9(hc!xVQ#i>KC`oA42z#}#67m?@PgM__G!Xu8*EtffhUaXI~>Ry
z@P>ZZZ}*$7+w&4!peOZ+XKvn%H%^}~RtiV~DIf);fE1W2VC|H)ybM&70#ZN<{3u}G
zhe|hW6Nf<mbTIe`KwOY^<Fn5a#A*bwO&kKr&`OjNqqO9RQKFoD&Ac{o2#j(RznSOc
z%_S$4;<uBpo{rK6DoOz<Fje3@mW}oQTlz2a|FlReDIf*@l>%k4zFV*OO4(ayFK4~B
u(jVyG##~Ql@K#LpR?LO9;;T_!wP)_Pi9?{5llO9>egsSxnH2a71-<~&(j6NB

literal 0
HcmV?d00001

diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index 46f1ed45..58549a2a 100644
--- a/public/stage1/tests.js
+++ b/public/stage1/tests.js
@@ -12,7 +12,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // 'change me!' を document.getElementById(elementId) に
       // 書き換え、ブラウザをリロードしてみてください。
       var elementId = 'firebrick';
-      var element = 'change me!';
+      var element = document.getElementById(elementId);
 
       expect(element).to.be.instanceof(HTMLElement);
       expect(element).to.have.property('id', elementId);
@@ -27,7 +27,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // 'change me!' を書き換えてください。
       var elementId = 'chocolate';
-      var element = 'change me!';
+      var element = document.getElementById(elementId);
 
       expect(element).to.be.instanceof(HTMLElement);
       expect(element).to.have.property('id', elementId);
@@ -41,7 +41,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // 'change me!' を書き換えてください。
       var elementClassName = 'mediumseagreen';
-      var elements = 'change me!';
+      var elements = document.getElementsByClassName(elementClassName);
 
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property('className', elementClassName);
@@ -55,7 +55,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // 'change me!' を書き換えてください。
       var elementClassName = 'turquoise';
-      var elements = 'change me!';
+      var elements = document.getElementsByClassName(elementClassName);
 
       expect(elements).to.have.length(2);
       expect(elements[0]).to.have.property('className', elementClassName);
@@ -70,7 +70,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
 
       // 'change me!' を書き換えてください。
       var elementTagName = 'blockquote';
-      var elements = 'change me!';
+      var elements = document.getElementsByTagName(elementTagName);
 
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property('tagName', elementTagName.toUpperCase());
@@ -93,7 +93,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // すると、開発ツール上で <li id="brown">... が選択されます。
       // このことから、7 番の赤色の要素の ID は brown だということがわかります。
       // では、'change me!' を document.getElementById('brown') に書き換えてみましょう。
-      var element = 'change me!';
+      var element = document.getElementById('brown');
 
       expect(element).to.have.property(secret('vq'), secret('oebja'));
     });
@@ -102,7 +102,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('8 番の橙色の要素が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var element = 'change me!';
+      var element = document.getElementById('darkorange');
 
       expect(element).to.have.property(secret('vq'), secret('qnexbenatr'));
     });
@@ -111,7 +111,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('9 番の緑色の要素が1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var elements = 'change me!';
+      var elements = document.getElementsByClassName('limegreen');
 
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('yvzrterra'));
@@ -121,7 +121,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('10 番の水色の要素が2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var elements = 'change me!';
+      var elements = document.getElementsByClassName('mediumturquoise');
 
       expect(elements).to.have.length(2);
       expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('zrqvhzghedhbvfr'));
@@ -135,7 +135,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       //
       // なお、11 番の青色の要素は li 要素ではありません！
       // よくみると、色がついているのはさらに内側の要素のようです。
-      var elements = 'change me!';
+      var elements = document.getElementsByTagName('p');
 
       expect(elements).to.have.length(1);
       expect(elements[0]).to.have.property(secret('gntAnzr'), secret('C'));
@@ -152,7 +152,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       //
       // 'change me!' を document.querySelector('#firebrick') に
       // 書き換えてください。
-      var element = 'change me!';
+      var element = document.querySelector('#firebrick');
 
       expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
 
@@ -164,7 +164,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('2 番の橙色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var element = 'change me!';
+      var element = document.querySelector('#chocolate');
 
       expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
 
@@ -176,7 +176,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('3 番の緑色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var element = 'change me!';
+      var element = document.querySelector('.mediumseagreen');
 
       expect(element).to.have.property(secret('pynffAnzr'), secret('zrqvhzfrnterra'));
     });
@@ -185,7 +185,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('4 番の水色の要素を querySelectorAll を使って2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var elements = 'change me!';
+      var elements = document.querySelectorAll('.turquoise');
 
       expect(elements).to.have.length(2);
       expect(elements[0]).to.have.property(secret('pynffAnzr'), secret('ghedhbvfr'));
@@ -196,7 +196,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('5 番の青色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var element = 'change me!';
+      var element = document.querySelector('blockquote');
 
       expect(element).to.have.property(secret('gntAnzr'), secret('OYBPXDHBGR'));
     });
@@ -205,7 +205,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('6 番の紫色の要素を querySelector を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var element = 'change me!';
+      var element = document.querySelector('[data-js-training=blueviolet]');
 
       expect(element).to.have.deep.property(secret('qngnfrg.wfGenvavat'),
                                             secret('oyhrivbyrg'));
@@ -220,7 +220,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       //
       // 'change me!' を '.js-training:nth-child(2) li'
       // に書き換えてください。
-      var selector = 'change me!';
+      var selector = '.js-training:nth-child(2) li:nth-child(1)';
 
       var element = document.querySelector(selector);
       expect(selector).to.not.have.string('#');
@@ -231,7 +231,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('8 番の橙色の要素を ID セレクタを使わずに1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var selector = 'change me!';
+      var selector = '.js-training:nth-child(2) li:nth-child(2)';
 
       var element = document.querySelector(selector);
       expect(selector).to.not.have.string('#');
@@ -245,7 +245,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var selector = 'change me!';
+      var selector = '.js-training:last-of-type li:nth-last-child(1)';
 
       var element = document.querySelector(selector);
       expect(selector).to.not.match(/\[\s*name\s*[~\|\^\$\*]?=/);
@@ -265,7 +265,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
       // 基本的な使い方は document.querySelectorAll と同じです。
       //
       // 'change me!' を $('#brown') に書き換えてください。
-      var $element = 'change me!';
+      var $element = $('#brown');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.id(secret('oebja'));
@@ -275,7 +275,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('8 番の橙色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var $element = 'change me!';
+      var $element = $('#darkorange');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.id(secret('qnexbenatr'));
@@ -288,7 +288,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('9 番の緑色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var $element = 'change me!';
+      var $element = $('.limegreen');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.class(secret('yvzrterra'));
@@ -298,7 +298,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('10 番の水色の要素を jQuery を使って2つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var $element = 'change me!';
+      var $element = $('.mediumturquoise');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.length(2);
@@ -309,7 +309,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('11 番の青色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var $element = 'change me!';
+      var $element = $('p');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.length(1);
@@ -320,7 +320,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('12 番の紫色の要素を jQuery を使って1つ取得できる', function() {
 
       // 'change me!' を書き換えてください。
-      var $element = 'change me!';
+      var $element = $('[data-js-training=darkorchid]');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.length(1);
@@ -334,7 +334,7 @@ describe('ステージ1（意図した DOM 要素を取得できるようにな
     it('動いている寿司要素を取得する', function() {
 
       // 'change me!' を書き換えてください。
-      var element = 'change me!';
+      var element = document.querySelector('div:last-of-type');
 
       expect(element).to.have.deep.property(
         secret('grkgPbagrag'), '\uD83C\uDF63');
diff --git a/public/stage2/tests.js b/public/stage2/tests.js
index b430dfdc..a9deb40a 100644
--- a/public/stage2/tests.js
+++ b/public/stage2/tests.js
@@ -11,8 +11,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // var element = document.getElementById('firebrick');
       // element.textContent = element.textContent + element.textContent;
-      var element = 'change me!';
-
+      var element = document.getElementById('firebrick');
+      element.textContent = element.textContent + element.textContent;
 
       expect(element).to.have.property(secret('vq'), secret('sveroevpx'));
       expect(element).to.have.deep.property(
@@ -24,8 +24,13 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
-      var element = 'change me!';
-
+      // var element = document.getElementById('chocolate');
+      var element = document.querySelector('#chocolate');
+      var numofSushi = 1;
+      var content = element.textContent;
+      for(var i = 0; i < numofSushi; i++){
+        element.textContent += content;
+      }
 
       expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
       expect(element).to.have.deep.property(
@@ -40,8 +45,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
-      var element = 'change me!';
-
+      var element = document.querySelector('.mediumseagreen');
+      element.style.backgroundColor = 'limegreen';
 
       expect(element).to.have.property(
         secret('pynffAnzr'), secret('zrqvhzfrnterra'));
@@ -58,8 +63,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
-      var element = 'change me!';
-
+      var element = document.querySelector('.turquoise');
+      element.style.opacity = 0.5;
 
       expect(element).to.have.property(
         secret('pynffAnzr'), secret('ghedhbvfr'));
@@ -76,8 +81,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は element 変数に代入してください。
-      var element = 'change me!';
-
+      var element = document.querySelector('blockquote');
+      element.style.transform = 'rotate(10deg)';
 
       expect(element).to.have.property(
         secret('gntAnzr'), secret('OYBPXDHBGR'));
@@ -97,8 +102,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
       // 使う方法を使ってください。
-      var element = 'change me!';
-
+      var element = document.querySelector('[data-js-training=blueviolet]');
+      element.style.top += '-20px';
+      element.style.position = 'relative';
 
       expect(element).to.have.deep.property(
         secret('qngnfrg.wfGenvavat'), secret('oyhrivbyrg'));
@@ -127,8 +133,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // var $element = $('#brown');
       // $element.text($element.text() + $element.text());
-      var $element = 'change me!';
-
+      var $element = $('#brown');
+      $element.text($element.text() + $element.text());
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.id(secret('oebja'));
@@ -140,8 +146,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は $element 変数に代入してください。
-      var $element = 'change me!';
-
+      var $element = $('#darkorange');
+      $element.text($element.text() + $element.text());
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.id(secret('qnexbenatr'));
@@ -156,8 +162,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は $element 変数に代入してください。
-      var $element = 'change me!';
-
+      var $element = $('.limegreen');
+      $element.css('backgroundColor', 'mediumseagreen');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.class(secret('yvzrterra'));
@@ -173,7 +179,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は $element 変数に代入してください。
-      var $element = 'change me!';
+      var $element = $('.mediumturquoise');
+      $element.css('opacity', '0.5');
 
 
       expect($element).to.be.instanceof(jQuery);
@@ -186,8 +193,8 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
 
       // ここにコードを記述してください。
       // 変更した DOM 要素は $element 変数に代入してください。
-      var $element = 'change me!';
-
+      var $element = $('p');
+      $element.css('transform', 'rotate(10deg)');
 
       expect($element).to.be.instanceof(jQuery);
 
@@ -205,8 +212,9 @@ describe('ステージ2（意図した通りに DOM 要素の属性・テキス
       //
       // なお、上に 20px 移動させる方法は複数ありますが、今回は top 属性を
       // 使う方法を使ってください。
-      var $element = 'change me!';
-
+      var $element = $('[data-js-training=darkorchid]');
+      $element.css('top', '-20px');
+      $element.css('position', 'relative');
 
       expect($element).to.be.instanceof(jQuery);
       expect($element).to.have.data(secret('wfGenvavat'), secret('qnexbepuvq'));
diff --git a/public/stage3/tests.js b/public/stage3/tests.js
index fa3cb6f2..ec45a537 100644
--- a/public/stage3/tests.js
+++ b/public/stage3/tests.js
@@ -13,9 +13,16 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
       // element.removeChild(ghost);
 
 
-      var firebrick = document.getElementById('firebrick');
-      expect(firebrick.childNodes.length).to.equal(1);
-      expect(firebrick).to.have.property('textContent', '1');
+      // var element = document.querySelector('#firebrick');
+      // var ghost = document.querySelector('.firebrick-ghost');
+      // element.removeChild(ghost);
+
+      var element = document.getElementById('firebrick');
+      var ghost = document.querySelector('.firebrick-ghost');
+      element.removeChild(ghost);
+
+      expect(element.childNodes.length).to.equal(1);
+      expect(element).to.have.property('textContent', '1');
     });
 
 
@@ -23,8 +30,10 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // ここにコードを記述してください。
 
-
       var darkorange = document.getElementById('chocolate');
+      var invader = document.querySelector('.chocolate-space-invader');
+      darkorange.removeChild(invader);
+
       expect(darkorange.childNodes.length).to.equal(1);
       expect(darkorange).to.have.property('textContent', '2');
     });
@@ -34,8 +43,11 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // ここにコードを記述してください。
 
-
       var darkorange = document.querySelector('.mediumseagreen');
+      var everyghost = document.querySelectorAll('.mediumseagreen-ghosts');
+      for(var i = 0; i < everyghost.length; i++){
+        darkorange.removeChild(everyghost[i]);
+      }
       expect(darkorange).to.have.property('textContent', '3\uD83C\uDF3F');
     });
 
@@ -46,8 +58,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // 上の elementToAdd を追加するコードをここに記述してください。
 
-
       var turquoise = document.querySelector('.turquoise');
+      turquoise.appendChild(elementToAdd);
+
       expect(turquoise.childNodes.length).to.equal(2);
       expect(turquoise).to.have.deep.property('childNodes[0].textContent', '4');
       expect(turquoise).to.have.deep.property('childNodes[1]').equal(elementToAdd);
@@ -61,8 +74,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
       // 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを
       // ここに記述してください。
 
-
       var blockquote = document.querySelector('blockquote');
+      blockquote.insertBefore(elementToAdd, blockquote.firstChild);
+
       expect(blockquote.childNodes.length).to.equal(2);
       expect(blockquote).to.have.deep.property('childNodes[0]').equal(elementToAdd);
       expect(blockquote).to.have.deep.property('childNodes[1].textContent', '5');
@@ -82,6 +96,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
 
       var $brown = $('#brown');
+      var $ghost = $('.brown-ghost');
+      $ghost.remove();
+
       expect($brown.children()).to.have.length(0);
       expect($brown).to.have.text('6');
     });
@@ -91,8 +108,10 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // ここにコードを記述してください。
 
-
       var $darkorange = $('#darkorange');
+      var $invader = $('.darkorange-space-invader');
+      $invader.remove();
+
       expect($darkorange.children()).to.have.length(0);
       expect($darkorange).to.have.text('7');
 
@@ -107,6 +126,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
 
       var $limegreen = $('.limegreen');
+      var $ghosts = $('.limegreen-ghosts');
+      $ghosts.remove();
+
       expect($limegreen).to.have.text('8\uD83C\uDF3F');
     });
 
@@ -116,8 +138,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // 上の $elementToAdd を追加するコードをここに記述してください。
 
-
       var $mediumturquoise = $('.mediumturquoise');
+      $mediumturquoise.append($elementToAdd);
+
       expect($mediumturquoise.children()).to.have.length(1);
       expect($mediumturquoise).to.have.text('9\uD83D\uDC2C');
     });
@@ -128,8 +151,9 @@ describe('ステージ3（意図した通りに DOM 要素の構造を変更で
 
       // 上の $elementToAdd を追加するコードをここに記述してください。
 
-
       var $p = $('p');
+      $p.prepend($elementToAdd);
+
       expect($p.children()).to.have.length(1);
       expect($p).to.have.text('\uD83D\uDC1F10');
     });
diff --git a/public/stage4/tests.js b/public/stage4/tests.js
index 599536b6..efdccb0d 100644
--- a/public/stage4/tests.js
+++ b/public/stage4/tests.js
@@ -26,11 +26,26 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
 
 
       var firebrick = document.getElementById('firebrick');
-      firebrick.dispatchEvent(createClickEvent());
-      expect(firebrick).to.have.property('textContent', '2');
 
-      firebrick.dispatchEvent(createClickEvent());
+      $('#firebrick').on('click', function(event) {
+        var $target = $(event.target);
+        $target.text(Number($target.text()) + 1);
+      });
+
+      //ダブルクリックが起きたらどうなるかを定義
+      $('#firebrick').on('dblclick', function(event) {
+        var $target = $(event.target);
+        $target.text(Number($target.text()) + 2);
+      });
+
+      //ダブルクリックを発火
+      firebrick.dispatchEvent(createDoubleClickEvent());
+
+      //内容をチェック
       expect(firebrick).to.have.property('textContent', '3');
+
+      firebrick.dispatchEvent(createClickEvent());
+      expect(firebrick).to.have.property('textContent', '4');
     });
 
 
@@ -38,9 +53,18 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
 
       // ここにコードを記述してください。
 
-
       var chocolate = document.getElementById('chocolate');
+
+      $('#chocolate').on('click', function(event){
+        var $target = $(event.target);
+        $target.text(Number($target.text()) - 1);
+      });
+
+
       chocolate.dispatchEvent(createClickEvent());
+
+
+
       expect(chocolate).to.have.property('textContent', '1');
 
       chocolate.dispatchEvent(createClickEvent());
@@ -54,6 +78,14 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
 
 
       var mediumseagreen = document.querySelector('.mediumseagreen');
+      var degree = 0;
+
+      $('.mediumseagreen').on('click', function(event){
+        var $target = $(event.target);
+        degree += 10;
+        $target.css({transform: 'rotate(' + degree + 'deg)'});
+      });
+
       mediumseagreen.dispatchEvent(createClickEvent());
       expect(mediumseagreen).to.have.deep.property(
         secret('fglyr.genafsbez'), secret('ebgngr(10qrt)'));
@@ -72,6 +104,14 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
       var turquoise = document.querySelector('.turquoise');
       var turquoiseInput = turquoise.querySelector('input');
 
+
+      $('input').on('change', function(event){
+        var $target = $(event.target).parent();
+        $target.css('transform', 'rotate(' + turquoiseInput.value + 'deg)');
+        // $target.css({transform: 'rotate('+turquoiseInput.value+'deg)' });
+      });
+
+
       simulateChangeEvent(turquoiseInput, 10);
       expect(turquoise).to.have.deep.property(
         secret('fglyr.genafsbez'), secret('ebgngr(10qrt)'));
@@ -93,9 +133,16 @@ describe('ステージ4（意図通りにイベントを利用できる）', fun
       // なお、expect(steelblue).to.be.null は上記のテストの要件を満たして
       // いないので、正解ではありません。
 
-      var steelblue = document.querySelector('.steelblue');
-      expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
-      done();
+      // var jsTraining = document.querySelectorAll('.js-training');
+      // var steelblue = jsTraining[0].querySelector('.steelblue');
+
+      // var steelblue = document.querySelector('.js-training li:last-of-type');
+
+      document.addEventListener('DOMContentLoaded', function(){
+        var steelblue = document.querySelector('.steelblue');
+        expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
+        done();
+      });
     });
   });
 });
@@ -108,6 +155,13 @@ function createClickEvent() {
   return event;
 }
 
+function createDoubleClickEvent() {
+  var event = document.createEvent('MouseEvents');
+  event.initMouseEvent('dblclick', true, true, window,
+                       0, 0, 0, 80, 20, false, false, false, false, 0, null);
+  return event;
+}
+
 
 function simulateChangeEvent(inputElement, newValue) {
   inputElement.value = newValue;
diff --git a/public/stage5/tests.js b/public/stage5/tests.js
index 568548d3..e24a3a98 100644
--- a/public/stage5/tests.js
+++ b/public/stage5/tests.js
@@ -9,10 +9,10 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
       //
       // ここに下記のコードを記述してください。
       //
-      // promise.then(function(msg) {
-      //   expect(msg).to.equal('resolved!');
-      //   testDone();
-      // });
+      promise.then(function(msg) {
+        expect(msg).to.equal('resolved!');
+        testDone();
+      });
     });
 
 
@@ -21,9 +21,11 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
 
       // reject ハンドラーを使って、下の assertion が promise の
       // エラー値を検証できるように記述してください。
-      //
-      // expect(msg).to.equal('rejected!');
-      // testDone();
+      
+      promise.catch(function(msg){
+        expect(msg).to.equal('rejected!');
+        testDone();
+      });
 
       // ここにコードを記述してください。
 
@@ -38,10 +40,17 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
       var promise3 = createWaitPromise(messageFragments[2], 30);
 
       // 作成した promise を promise 変数に代入してください。
-      var promise = 'change me!';
 
+      var promise = Promise.all([
+        promise1,
+        promise2,
+        promise3
+      ]);
+
+      promise.then(function(){
+        return expect(promise).to.eventually.deep.equal(messageFragments);
+      });
 
-      return expect(promise).to.eventually.deep.equal(messageFragments);
     });
 
 
@@ -52,7 +61,11 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
       var promise3 = createWaitPromise(messageFragments[2], 30);
 
       // 作成した promise を promise 変数に代入してください。
-      var promise = 'change me!';
+      var promise = Promise.race([
+        promise1,
+        promise2,
+        promise3
+      ]);
 
 
       return expect(promise).to.eventually.equal(messageFragments[1]);
@@ -69,9 +82,9 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
       //
       // ここに下記のコードを記述してください。
       //
-      // var promisedFriends = fetch(api + username).then(function(res) {
-      //   return res.json();
-      // });
+      var promisedFriends = fetch(api + username).then(function(res) {
+        return res.json();
+      });
 
 
       return expect(promisedFriends).to.eventually.have.length(1)
@@ -84,7 +97,9 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
       var username = 'Shen';
 
       // 作成した promise を promisedFriends 変数に代入してください。
-      var promisedFriends = 'change me!';
+      var promisedFriends = fetch(api + username).then(function(res) {
+        return res.json();
+      });
 
 
       return expect(promisedFriends).to.eventually.have.length(2)
@@ -95,10 +110,18 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     it('/api/friends API を使って Shen の友人の友人を取得できる', function() {
       var api = '/api/friends/';
       var username = 'Shen';
+      var thu = '/';
 
       // 作成した promise を promisedFriends 変数に代入してください。
-      var promisedFriends = 'change me!';
-
+      // var promisedFriends = fetch(api + username).then(function(res) {
+      //   return res.json();
+      // })
+      // .then(function(res){
+      //   return Promise.all(res.map());
+      // })
+      // .then(function(res){
+      //   return 
+      // });
 
       return expect(promisedFriends).to.eventually.have.length(1)
         .and.have.members(['TypeScript']);
@@ -127,7 +150,9 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     it('Github の mixi-inc の organization の情報を取得できる', function() {
 
       // 作成した promise を mixiOrg 変数に代入してください。
-      var mixiOrg = 'change me!';
+      var mixiOrg = fetch('https://api.github.com/orgs/mixi-inc').then(function(res){
+        return res.json();
+      });
 
       return expect(mixiOrg).to.eventually.have.property('id', 1089312);
 
@@ -140,8 +165,10 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
       var repository = 'mixi-inc/JavaScriptTraining';
 
       // 作成した promise を mixiRepo 変数に代入してください。
-      var mixiRepo = 'change me!';
-
+      var mixiRepo = fetch('https://api.github.com/repos/' + repository)
+        .then(function(res){
+          return res.json();
+        });
 
       return expect(mixiRepo).to.eventually.have.property('full_name', repository);
 
@@ -153,7 +180,11 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
     it('Github API を使って、VimL、Emacs Lisp でスターが最も多いプロダクト名を' +
        'それぞれ 1 つずつ取得できる', function() {
       var languages = [ 'VimL', '"Emacs Lisp"' ];
-      var mostPopularRepos = 'change me!';
+      var mostPopularRepos = fetch('https://api.github.com/repos')
+        .then(function(res){
+
+        })
+        .then(function(res))
 
       // 作成した promise を mostPopularRepos 変数に代入してください。
 
@@ -173,6 +204,7 @@ describe('ステージ5（意図通りに非同期処理を利用できる）',
   function createWaitPromise(value, msec) {
     return new Promise(function(resolve) {
       setTimeout(resolve, msec, value);
+
     });
   }
 });
diff --git a/public/stage6/.DS_Store b/public/stage6/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..a26db9e68dd906a2e15342a98a2e7d5b931f88d3
GIT binary patch
literal 6148
zcmeHKI|>3p3{6x-u(7n9D|mxJ^aNhOZ?~c#_FH)_kLJq<K~@{VMqVI!Gnu?u_7$6r
zi0J&fpNULFWCS;qn}x2~xp~KWnNc7dcQkU?Uv|y*bZR=)?-Rxy%0)JEl=Bz-_qQ@j
z1*iZOpaN8Y3Vc$)dM|7=4rHVPRDcRR6|nC^fg9GuHqbvE2tEP;2S~eN?Xv{1SOQoR
z+dyPs8dP9VHAf5$I`Sp!YGNB0bkQ6>G@q<Fp{PF{_ZKf0t$~bGfC{`S(2woJ`u`IC
zVg7$5aYqHHz+Wk#gT-nw$17!T?Yx}z+5%t0t>z9l!`dkb-j0FZj<K<JJoTceE4IdY
WO>6_5j=a->{24G^XjI_W3OoSE5EY96

literal 0
HcmV?d00001

diff --git a/public/stage6/sample/.DS_Store b/public/stage6/sample/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b7a363897c4e6205fbd4e04b976bfd62572875b0
GIT binary patch
literal 6148
zcmeHKI|>3p3{7+q!N$^ZuHX#@(Gz$9Q5#`FLF~8kTprDr4}z@Q2sZKp$(zaK&9bl9
zY(zv?x8qV|E+SL7q1-L>&CbnxHp+|w;ke@@hvW6o?$778SN%C*+=*P|CVOeW;D5fA
zSt>vUr~nn90#sl~0qec6=`4_u3Qz$m@KV6O4+U;m6T3kFbRhT$0Bn$U!`f#FV6g<S
zCU$|yz%;19plXg78g%4K*44x=FzBK=d}uydb3##nI_@uCE?NT_sQ?vtS7035x%K}I
zd|>{6CviswsK8$-pv`)_Ug4FpxAtDndToL4;8yd1n_=w~1aHScZ^zhJJ6?EE)D>If
Wye4*mPDkG9K>iGvE;K6eYXzPPtQCU*

literal 0
HcmV?d00001

diff --git a/public/stage6/sample/index.html b/public/stage6/sample/index.html
index e7f0052b..66f71484 100644
--- a/public/stage6/sample/index.html
+++ b/public/stage6/sample/index.html
@@ -8,11 +8,23 @@
   <link href="http://img.mixi.net/img/basic/favicon.ico" type="image/vnd.microsoft.icon" rel="shortcut icon">
   <link rel="stylesheet" href="bower_components/Buttons/css/buttons.css" media="all">
   <link rel="stylesheet" href="style.css" media="all">
+  
 </head>
 <body>
+
   <div class="js-training-playground">
-    <button class="button button-caution button-3d button-pill button-giant js-training-button">Push</button>
+    <canvas id="canvas" width="1280" height="728">
+    <!-- <button class="button button-caution button-3d button-pill button-giant js-training-button">Push</button> -->
   </div>
+  <div class="js-training-playground">
+    <img class="man" src="./public/img/miniman.png">
+    <img class="man" src="./public/img/miniman.png">
+    <img class="man" src="./public/img/miniman.png">
+    <img class="man" src="./public/img/miniman.png">
+    <img class="man" src="./public/img/miniman.png">
+  </div>
+  <script src="../../bower_components/jquery/dist/jquery.js"></script>
+  <script src="../../bower_components/jquery/dist/jcanvas.min.js"></script>
   <script src="script.js"></script>
 </body>
 </html>
diff --git a/public/stage6/sample/public/.DS_Store b/public/stage6/sample/public/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..07dc23cbb1950dbe6a5312f5ff3a21fec52b9a46
GIT binary patch
literal 6148
zcmeHKyH3ME5S$|^BGI^{ykFoCPEq&*J^+*iA*2u^0-|-tZ!`M<IkIUf(5$pOzPa5y
zc?z!=Kv}=<uYnH0if)Kc3sbXw^NC#~V_5u*SKMKT9?y80WX}^;+hNO^4?JL8-{VN;
zh&P<}r`=)O_Xl2r1)g~P<CvO1S*#S00#ZN<NC7D@r+~Fn+Uhb;Q3^-_De$9!eIF{_
zuq6(G{^?-w5rDWP?Z#)HC5Y7sVoMwX$<Rua5~H-_h*6@Pe9gR;I0QyHir>t0^5&8g
zO7YvtS5HT2fr?T<3Y;sjh-GK}|Azj{{C{4gl@yQy|4M<f+}v)~e5LHIlb5qzTj}@o
qZ)2{fGk7Z|dMoC_TJhB=ui7*BTjCJt<>bAbs2>5-MJ5IQLV+(cnj8xN

literal 0
HcmV?d00001

diff --git a/public/stage6/sample/public/bower.json b/public/stage6/sample/public/bower.json
new file mode 100644
index 00000000..a7b78e88
--- /dev/null
+++ b/public/stage6/sample/public/bower.json
@@ -0,0 +1,23 @@
+{
+  "name": "MyfirstAppllication",
+  "version": "0.0.0",
+  "homepage": "https://github.com/yuichimori/JavaScriptTraining",
+  "authors": [
+    "Yuichi Mori <yuichi.mori@sindbad-int.com>"
+  ],
+  "description": "MyfirstApp",
+  "keywords": [
+    "yuichi"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "Buttons": "~2.0.0"
+  }
+}
diff --git a/public/stage6/sample/public/img/miniman.png b/public/stage6/sample/public/img/miniman.png
new file mode 100644
index 0000000000000000000000000000000000000000..953ed6d3ff93b7786146e107febbd71c910bbc87
GIT binary patch
literal 4802
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

literal 0
HcmV?d00001

diff --git a/public/stage6/sample/script.js b/public/stage6/sample/script.js
index f1a7325f..6ee693c9 100644
--- a/public/stage6/sample/script.js
+++ b/public/stage6/sample/script.js
@@ -1,2 +1,62 @@
-// ボタンはサービスです。
-// 自由に使ってください。
+$(function(){
+
+	// ボタンはサービスです。
+	// 自由に使ってください。
+
+	var $x = $(window).width();
+	var $y = $(window).height();
+
+	// 本当はこれでcanvasタグを入れたいけどうまくいかないので、htmlに書いた。
+	// $('#canvas').append('<canvas></canvas>');
+
+	var $canvas = $('#canvas');
+
+	$canvas.mousedown(function(){
+		$canvas.mousemove(function(event){
+			var cx = event.clientX;
+			var cy = event.clientY;
+
+			$canvas.drawEllipse({
+			  fillStyle: '#36c',
+			  x: cx,
+			  y: cy,
+			  width: 5,
+			  height: 5
+			});
+		});
+	});
+
+	$canvas.mouseup(function(){
+
+	});
+
+
+	var $man = $('.man');
+	$man.click(function(){
+		$(this).slideUp('slow');	
+	});
+
+	$canvas.drawImage({
+		source: './public/img/miniman.png',
+		layer: true,
+		name: 'cman',
+		x: -50,
+		y: 150,
+		width: 40,
+		height: 50
+	});
+
+	function walk(){
+		$canvas.animateLayer('cman', {
+			x: '+=1380'
+		}, 5000, function(layer){
+			$(this).animateLayer('cman', {
+				x: '-=1380'
+			}, 1000)
+		});
+	};
+
+	setInterval(walk(), 7000);
+
+
+});
\ No newline at end of file
diff --git a/public/stage6/sample/style.css b/public/stage6/sample/style.css
index f7d4154c..e648aef4 100644
--- a/public/stage6/sample/style.css
+++ b/public/stage6/sample/style.css
@@ -1,10 +1,40 @@
 .js-training-playground {
-  box-sizing: border-box;
-  padding: 80px 0;
-  height: 250px;
+  /*box-sizing: border-box;*/
+  /*padding: 80px 0;*/
+  /*height: 250px;*/
+  position: static;
 }
 
 .js-training-button {
   display: block;
   margin: 0 auto;
 }
+
+.man {
+  position: relative;
+  width: 40px;
+  height: 50px;
+  animation-name: walk;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes walk {
+  from {
+  	left: -20%;
+  }
+
+  to {
+  	left: 120%;
+  }
+}
+
+@-moz-keyframes walk {
+  from {
+  	left: -20%;
+  }
+
+  to {
+  	left: 120%;
+  }
+}
\ No newline at end of file
diff --git a/public/stage7/tests.js b/public/stage7/tests.js
index 3a72ba58..68bc92be 100644
--- a/public/stage7/tests.js
+++ b/public/stage7/tests.js
@@ -2,9 +2,10 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
   'use strict';
 
   describe('クロージャー', function() {
+
+
     var createCounter = function() {
       var i = 0;
-
       return function() {
         return i++;
       };
@@ -12,41 +13,40 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
 
     var counter = createCounter();
 
-
     it('1回目の値がわかる', function() {
-      expect(counter()).to.equal(/* ここに値を書き込んでください */);
+      expect(counter()).to.equal(0);
     });
 
 
     it('2回目の値がわかる', function() {
-      expect(counter()).to.equal(/* ここに値を書き込んでください */);
+      expect(counter()).to.equal(1);
     });
 
 
     it('3回目の値がわかる', function() {
-      expect(counter()).to.equal(/* ここに値を書き込んでください */);
+      expect(counter()).to.equal(2);
     });
   });
 
 
   describe('ショートサーキット演算', function() {
     it("true && 'default' の結果がわかる", function() {
-      expect(true && 'default').to.equal(/* ここに値を書き込んでください */);
+      expect(true && 'default').to.equal(true);
     });
 
 
     it("false || 'default' の結果がわかる", function() {
-      expect(false || 'default').to.equal(/* ここに値を書き込んでください */);
+      expect(false || 'default').to.equal(true);
     });
 
 
     it("0 || 'default' の結果がわかる", function() {
-      expect(0 || 'default').to.equal(/* ここに値を書き込んでください */);
+      expect(0 || 'default').to.equal(true);
     });
 
 
     it("{} || 'default' の結果がわかる", function() {
-      expect({} || 'default').to.deep.equal(/* ここに値を書き込んでください */);
+      expect({} || 'default').to.deep.equal(true);
     });
 
 
@@ -55,7 +55,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
         return arg || { foo: 'foo' };
       };
 
-      expect(func({ foo: 'bar' })).to.deep.equal(/* ここに値を書き込んでください */);
+      expect(func({ foo: 'bar' })).to.deep.equal({ foo: 'bar' } || { foo: 'foo' });
     });
 
 
@@ -64,7 +64,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
         return arg || { foo: 'foo' };
       };
 
-      expect(func()).to.deep.equal(/* ここに値を書き込んでください */);
+      expect(func()).to.deep.equal(null || { foo: 'foo' });
     });
   });
 
@@ -76,7 +76,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
       num = 1;
     })();
 
-    expect(num).to.equal(/* ここに値を書き込んでください */);
+    expect(num).to.equal(1);
   });
 
 
@@ -87,7 +87,7 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
       num = 1;
     }, 0);
 
-    expect(num).to.equal(/* ここに値を書き込んでください */);
+    expect(num).to.equal(0);
   });
 
 
@@ -97,22 +97,22 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
 
 
     it('!!truthy の結果がわかる', function() {
-      expect(!!truthy).to.equal(/* ここに値を書き込んでください */);
+      expect(!!truthy).to.equal(true);
     });
 
 
     it('!!falsey の結果がわかる', function() {
-      expect(!!falsey).to.equal(/* ここに値を書き込んでください */);
+      expect(!!falsey).to.equal(false);
     });
 
 
     it('Boolean(truthy) の結果がわかる', function() {
-      expect(Boolean(truthy)).to.equal(/* ここに値を書き込んでください */);
+      expect(Boolean(truthy)).to.equal(true);
     });
 
 
     it('Boolean(falsey) の結果がわかる', function() {
-      expect(Boolean(falsey)).to.equal(/* ここに値を書き込んでください */);
+      expect(Boolean(falsey)).to.equal(false);
     });
   });
 
@@ -137,22 +137,22 @@ describe('ステージ7（よくあるJSのイディオムを読める）', func
 
 
     it('parent.grandParent の値がわかる', function() {
-      expect(parent.grandParent).to.equal(/* ここに値を書き込んでください */);
+      expect(parent.grandParent).to.equal();
     });
 
 
     it('parent.child の値がわかる', function() {
-      expect(parent.child).to.equal(/* ここに値を書き込んでください */);
+      expect(parent.child).to.equal();
     });
 
 
     it('child.grandParent の値がわかる', function() {
-      expect(child.grandParent).to.equal(/* ここに値を書き込んでください */);
+      expect(child.grandParent).to.equal(true);
     });
 
 
     it('child.parent の値がわかる', function() {
-      expect(child.parent).to.equal(/* ここに値を書き込んでください */);
+      expect(child.parent).to.equal();
     });
   });
 });