diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..ce337a15
Binary files /dev/null and b/.DS_Store differ
diff --git a/gulp/.DS_Store b/gulp/.DS_Store
new file mode 100644
index 00000000..ed1c15f2
Binary files /dev/null and b/gulp/.DS_Store differ
diff --git a/public/.DS_Store b/public/.DS_Store
new file mode 100644
index 00000000..27a68a9e
Binary files /dev/null and b/public/.DS_Store differ
diff --git a/public/common/.DS_Store b/public/common/.DS_Store
new file mode 100644
index 00000000..5f95c3f2
Binary files /dev/null and b/public/common/.DS_Store differ
diff --git a/public/stage1/.DS_Store b/public/stage1/.DS_Store
new file mode 100644
index 00000000..bacdc644
Binary files /dev/null and b/public/stage1/.DS_Store differ
diff --git a/public/stage1/tests.js b/public/stage1/tests.js
index 46f1ed45..bceccf2c 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 要素を取得できるようにな
// すると、開発ツール上で
... が選択されます。
// このことから、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';
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:last-of-type';
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 = $('.js-training:last-of-type li:last-of-type');
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 = $('x-flying-sushi-monster')[0];
expect(element).to.have.deep.property(
secret('grkgPbagrag'), '\uD83C\uDF63');
diff --git a/public/stage2/tests.js b/public/stage2/tests.js
index b430dfdc..a6dae13f 100644
--- a/public/stage2/tests.js
+++ b/public/stage2/tests.js
@@ -9,9 +9,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'));
@@ -24,7 +23,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は element 変数に代入してください。
- var element = 'change me!';
+ var element = document.getElementById('chocolate');
+ element.textContent = element.textContent + element.textContent;
expect(element).to.have.property(secret('vq'), secret('pubpbyngr'));
@@ -40,8 +40,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,7 +58,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(
@@ -76,7 +77,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(
@@ -97,7 +99,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(
@@ -125,9 +129,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);
@@ -140,8 +143,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,7 +159,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
- var $element = 'change me!';
+ var $element = $('.limegreen');
+ $element.css('background-color', 'mediumseagreen');
expect($element).to.be.instanceof(jQuery);
@@ -173,8 +177,8 @@ describe('ステージ2(意図した通りに DOM 要素の属性・テキス
// ここにコードを記述してください。
// 変更した DOM 要素は $element 変数に代入してください。
- var $element = 'change me!';
-
+ var $element = $('.mediumturquoise');
+ $element.css('opacity', '0.5');
expect($element).to.be.instanceof(jQuery);
expect($element).to.have.class(secret('zrqvhzghedhbvfr'));
@@ -186,8 +190,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,7 +209,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);
diff --git a/public/stage3/tests.js b/public/stage3/tests.js
index fa3cb6f2..e593c116 100644
--- a/public/stage3/tests.js
+++ b/public/stage3/tests.js
@@ -8,9 +8,9 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
//
// ここに以下のコードを記述してください。
//
- // var element = document.querySelector('#firebrick');
- // var ghost = document.querySelector('.firebrick-ghost');
- // element.removeChild(ghost);
+ var element = document.querySelector('#firebrick');
+ var ghost = document.querySelector('.firebrick-ghost');
+ element.removeChild(ghost);
var firebrick = document.getElementById('firebrick');
@@ -22,7 +22,9 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('2 番の要素からインベーダー要素を除去する', function() {
// ここにコードを記述してください。
-
+ var element = document.querySelector('#chocolate');
+ var ghost = document.querySelector('.chocolate-space-invader');
+ element.removeChild(ghost);
var darkorange = document.getElementById('chocolate');
expect(darkorange.childNodes.length).to.equal(1);
@@ -33,6 +35,10 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('3 番の要素の左右の幽霊要素をすべて除去する', function() {
// ここにコードを記述してください。
+ var element = document.querySelector('.mediumseagreen');
+ var ghost = document.querySelectorAll('.mediumseagreen-ghosts');
+ element.removeChild(ghost[0]);
+ element.removeChild(ghost[1]);
var darkorange = document.querySelector('.mediumseagreen');
@@ -45,6 +51,8 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
elementToAdd.textContent = '\uD83D\uDC2C';
// 上の elementToAdd を追加するコードをここに記述してください。
+ var element = document.querySelector('.turquoise');
+ element.appendChild(elementToAdd);
var turquoise = document.querySelector('.turquoise');
@@ -60,6 +68,8 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
// 上の elementToAdd を、5 番の青色の要素の最初に追加するコードを
// ここに記述してください。
+ var element = document.querySelector('blockquote');
+ element.insertBefore(elementToAdd, element.firstChild);
var blockquote = document.querySelector('blockquote');
@@ -78,7 +88,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
// jQuery でも同じことをおこなってみましょう。
// ここに以下のコードを記述してください。
//
- // $('.brown-ghost').remove();
+ $('.brown-ghost').remove();
var $brown = $('#brown');
@@ -90,6 +100,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('7 番の要素からインベーダー要素を除去する', function() {
// ここにコードを記述してください。
+ $('.darkorange-space-invader').remove();
var $darkorange = $('#darkorange');
@@ -104,6 +115,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
it('8 番の要素の左右の幽霊要素をすべて除去する', function() {
// ここにコードを記述してください。
+ $('.limegreen-ghosts').remove();
var $limegreen = $('.limegreen');
@@ -115,6 +127,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
var $elementToAdd = $('\uD83D\uDC2C');
// 上の $elementToAdd を追加するコードをここに記述してください。
+ $('.mediumturquoise').append($elementToAdd);
var $mediumturquoise = $('.mediumturquoise');
@@ -127,6 +140,7 @@ describe('ステージ3(意図した通りに DOM 要素の構造を変更で
var $elementToAdd = $('\uD83D\uDC1F');
// 上の $elementToAdd を追加するコードをここに記述してください。
+ $('p').prepend($elementToAdd);
var $p = $('p');
diff --git a/public/stage4/tests.js b/public/stage4/tests.js
index 599536b6..921d6e28 100644
--- a/public/stage4/tests.js
+++ b/public/stage4/tests.js
@@ -17,10 +17,10 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun
//
// jQuery 版:
//
- // $('#firebrick').on('click', function(event) {
- // var $target = $(event.target);
- // $target.text(Number($target.text()) + 1);
- // });
+ $('#firebrick').on('click', function(event) {
+ var $target = $(event.target);
+ $target.text(Number($target.text()) + 1);
+ });
//
// ここに上記のどちらかのコードを記述してください。
@@ -37,7 +37,10 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun
it('2 番の要素の click イベントで要素内の数字を 1 ずつ小さくできる', function() {
// ここにコードを記述してください。
-
+ $('#chocolate').on('click', function(event) {
+ var $target = $(event.target);
+ $target.text(Number($target.text()) - 1);
+ });
var chocolate = document.getElementById('chocolate');
chocolate.dispatchEvent(createClickEvent());
@@ -51,7 +54,13 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun
it('3 番の要素の click イベントで要素を 10 度ずつ回転できる', function() {
// ここにコードを記述してください。
+ var value = 0;
+ $('.mediumseagreen').on('click', function(event) {
+ var $target = $(event.target);
+ value += 10;
+ $target.css({transform: 'rotate(' + value + 'deg)'});
+ });
var mediumseagreen = document.querySelector('.mediumseagreen');
mediumseagreen.dispatchEvent(createClickEvent());
@@ -67,6 +76,12 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun
it('4 番の要素を入力された角度に回転できる', function() {
// ここにコードを記述してください。
+ var $element = $('.turquoise');
+
+ $('input').change(function() {
+ var value = parseInt($('input').val());
+ $element.css({transform: 'rotate(' + value + 'deg)'});
+ });
var turquoise = document.querySelector('.turquoise');
@@ -92,10 +107,11 @@ describe('ステージ4(意図通りにイベントを利用できる)', fun
//
// なお、expect(steelblue).to.be.null は上記のテストの要件を満たして
// いないので、正解ではありません。
-
- var steelblue = document.querySelector('.steelblue');
- expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
- done();
+ $('.steelblue').ready(function(){
+ var steelblue = document.querySelector('.steelblue');
+ expect(steelblue).to.have.property('textContent', '5 \uD83D\uDC33');
+ done();
+ });
});
});
});
diff --git a/public/stage5/.DS_Store b/public/stage5/.DS_Store
new file mode 100644
index 00000000..6f5fc6a8
Binary files /dev/null and b/public/stage5/.DS_Store differ
diff --git a/public/stage5/tests.js b/public/stage5/tests.js
index 568548d3..4d788f0f 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();
+ });
});
@@ -26,7 +26,10 @@ describe('ステージ5(意図通りに非同期処理を利用できる)',
// testDone();
// ここにコードを記述してください。
-
+ promise.catch(function(msg) {
+ expect(msg).to.equal('rejected!');
+ testDone();
+ });
});
@@ -38,7 +41,7 @@ describe('ステージ5(意図通りに非同期処理を利用できる)',
var promise3 = createWaitPromise(messageFragments[2], 30);
// 作成した promise を promise 変数に代入してください。
- var promise = 'change me!';
+ var promise = Promise.all([promise1, promise2, promise3]);
return expect(promise).to.eventually.deep.equal(messageFragments);
@@ -52,7 +55,7 @@ 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 +72,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 +87,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)
@@ -96,8 +101,30 @@ describe('ステージ5(意図通りに非同期処理を利用できる)',
var api = '/api/friends/';
var username = 'Shen';
+ // 分からなかったので解答参考につくりました。(理解につとめたい)
+
+ // 友人の配列を取得
+ function getFriends(usernameToFetch) {
+ return fetch(api + usernameToFetch).then(function(res) {
+ return res.json();
+ });
+ }
+
+ // 配列を平たく
+ function flatMap(arrayToFlat) {
+ return arrayToFlat.reduce(function(flatArray, array) {
+ return flatArray.concat(array); //生成した新しい配列
+ }, []);
+ }
+
// 作成した promise を promisedFriends 変数に代入してください。
- var promisedFriends = 'change me!';
+ var promisedFriends = getFriends(username)
+ .then(function(friends) {
+ return Promise.all(friends.map(getFriends));
+ })
+ .then(function(friendsArray) {
+ return flatMap(friendsArray);
+ });
return expect(promisedFriends).to.eventually.have.length(1)
@@ -127,7 +154,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,7 +169,9 @@ 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,10 +184,37 @@ describe('ステージ5(意図通りに非同期処理を利用できる)',
it('Github API を使って、VimL、Emacs Lisp でスターが最も多いプロダクト名を' +
'それぞれ 1 つずつ取得できる', function() {
var languages = [ 'VimL', '"Emacs Lisp"' ];
- var mostPopularRepos = 'change me!';
// 作成した promise を mostPopularRepos 変数に代入してください。
+ // 分からなかったので解答参考につくりました。(理解につとめたい)
+
+ //オブジェクトから、query stringを作る
+ function buildQueryString(queryMap) {
+ return Object.keys(queryMap).map(function(key){
+ return encodeURIComponent(key) + '=' + encodeURIComponent(queryMap[key]);
+ }).join('&');
+ }
+
+ //指定された言語で最もスターがおおいリポジトリ名を返す
+ function searchMostPopulerRepoByLanguage(lang) {
+ var queryString = buildQueryString({
+ q: 'language:' + lang,
+ sort: 'stars'
+ });
+
+ return fetch('https://api.github.com/search/repositories?' + queryString)
+ .then(function(response) {
+ return response.json();
+ })
+ .then(function(result) {
+ return result.items[0].full_name;
+ });
+ }
+
+
+ var mostPopularRepos = Promise.all(
+ languages.map(searchMostPopulerRepoByLanguage));
return expect(mostPopularRepos).to.eventually.have.length(2)
.and.satisfy(function(names) {
diff --git a/public/stage6/index.html b/public/stage6/index.html
index 6b8f5810..1aef501b 100644
--- a/public/stage6/index.html
+++ b/public/stage6/index.html
@@ -9,6 +9,7 @@
+
サンプルパッケージ
@@ -19,6 +20,8 @@
+
+
+
+
+
+