From 4a068ff3135fddbd7ff1e15a7319068335806e22 Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Mon, 16 Mar 2015 22:40:51 +0900 Subject: [PATCH 01/12] Implement stage6 --- README.markdown | 38 ++++++++++++++++++++++++++++++++++++++ package.json | 1 + test/stage6/.eslintrc | 17 +++++++++++++++++ test/stage6/index.html | 32 ++++++++++++++++++++++++++++++++ test/stage6/tests.js | 9 +++++++++ 5 files changed, 97 insertions(+) create mode 100644 README.markdown create mode 100644 test/stage6/.eslintrc create mode 100644 test/stage6/index.html create mode 100644 test/stage6/tests.js diff --git a/README.markdown b/README.markdown new file mode 100644 index 00000000..413cec62 --- /dev/null +++ b/README.markdown @@ -0,0 +1,38 @@ +JavaScript Training +=================== + +JavaScript 初心者が JS の未来を見据えつつ、基礎をひととおり身に付けるための資料です。 + + +環境のセットアップ +------------------ + +1. 必要なものをダウンロード + + 下のコマンドを端末で実行してください。 + + git clone https://github.com/mixi-inc/JavaScriptTraining.git + cd JavaScriptTraining + npm install + + +2. webサーバーを立ち上げる + + 下のコマンドを端末で実行してください。なお、トレーニング中は + このコマンドを終了しないでください。 + + $(npm bin)/gulp serve + + +3. トップページにアクセスする + + ブラウザから http://localhost:8080 へアクセスしてください。 + + +4. トレーニングを始める + + public/stage1/tests.js を編集し、 http://localhost:8080/stage1 で + 実行されるすべてのテストにパスするようコードを編集してください。 + + コードを編集しおわったら、ページのリロードが必要です。 + ステージはすべてで 6 つあります。 diff --git a/package.json b/package.json index e19ec34d..1014cf63 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ }, "dependencies": { "bootstrap": "^3.3.2", + "bower": "^1.3.12", "chai-jquery": "^2.0.0", "jquery": "^2.1.3", "whatwg-fetch": "^0.7.0" diff --git a/test/stage6/.eslintrc b/test/stage6/.eslintrc new file mode 100644 index 00000000..f6d7f11c --- /dev/null +++ b/test/stage6/.eslintrc @@ -0,0 +1,17 @@ +{ + "env": { + "browser": true, + "mocha": true + }, + "rules": { + "no-unused-expressions": 0, + "no-undef-init": 0 + }, + "globals": { + "$": false, + "jQuery": false, + "fetch": false, + "Promise": false, + "HTMLCollection": false + } +} diff --git a/test/stage6/index.html b/test/stage6/index.html new file mode 100644 index 00000000..51290f32 --- /dev/null +++ b/test/stage6/index.html @@ -0,0 +1,32 @@ + + + + mixi JS Training + + + + + + + + +
+ + + + + + + + + + + + diff --git a/test/stage6/tests.js b/test/stage6/tests.js new file mode 100644 index 00000000..cfa105e2 --- /dev/null +++ b/test/stage6/tests.js @@ -0,0 +1,9 @@ +'use strict'; + +describe('ステージ6（意図通りにモジュールを書ける）', function() { + it('あなたの満足のいくアプリケーションがここにある', function() { + var qualityOfYourAppliation = undefined; + + expect(qualityOfYourAppliation).to.be.ok; + }); +}); From b8120d146191ff19f62fb5e06455a7f6144f6dd5 Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Tue, 17 Mar 2015 11:35:18 +0900 Subject: [PATCH 02/12] Improve README --- README.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.markdown b/README.markdown index 413cec62..9e8c4150 100644 --- a/README.markdown +++ b/README.markdown @@ -26,12 +26,12 @@ JavaScript 初心者が JS の未来を見据えつつ、基礎をひととお 3. トップページにアクセスする - ブラウザから http://localhost:8080 へアクセスしてください。 + ブラウザから [http://localhost:8080](http://localhost:8080) へアクセスしてください。 4. トレーニングを始める - public/stage1/tests.js を編集し、 http://localhost:8080/stage1 で + public/stage1/tests.js を編集し、 [http://localhost:8080/stage1](http://localhost:8080/stage1) で 実行されるすべてのテストにパスするようコードを編集してください。 コードを編集しおわったら、ページのリロードが必要です。 From c8e4c13f7d377058134a9c4c61b5569930727982 Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Tue, 17 Mar 2015 14:26:06 +0900 Subject: [PATCH 03/12] A name of the directory has stages should not "test", it is "public" --- gulp/serve.js | 6 +++-- gulpfile.js | 34 ++++++++++++++----------- {test => public}/.eslintrc | 0 {test => public}/common/mocha-patch.css | 0 {test => public}/index.html | 0 {test => public}/stage1/.eslintrc | 0 {test => public}/stage1/analytics.js | 0 {test => public}/stage1/index.html | 0 {test => public}/stage1/style.css | 0 {test => public}/stage1/tests.js | 0 {test => public}/stage2/.eslintrc | 0 {test => public}/stage2/index.html | 0 {test => public}/stage2/style.css | 0 {test => public}/stage2/tests.js | 0 {test => public}/stage3/.eslintrc | 0 {test => public}/stage3/index.html | 0 {test => public}/stage3/style.css | 0 {test => public}/stage3/tests.js | 0 {test => public}/stage4/.eslintrc | 0 {test => public}/stage4/index.html | 0 {test => public}/stage4/style.css | 0 {test => public}/stage4/tests.js | 0 {test => public}/stage5/.eslintrc | 0 {test => public}/stage5/index.html | 0 {test => public}/stage5/tests.js | 0 {test => public}/stage6/.eslintrc | 0 {test => public}/stage6/index.html | 0 {test => public}/stage6/tests.js | 0 public/test.html | 19 ++++++++++++++ server.js | 11 +++++--- 30 files changed, 49 insertions(+), 21 deletions(-) rename {test => public}/.eslintrc (100%) rename {test => public}/common/mocha-patch.css (100%) rename {test => public}/index.html (100%) rename {test => public}/stage1/.eslintrc (100%) rename {test => public}/stage1/analytics.js (100%) rename {test => public}/stage1/index.html (100%) rename {test => public}/stage1/style.css (100%) rename {test => public}/stage1/tests.js (100%) rename {test => public}/stage2/.eslintrc (100%) rename {test => public}/stage2/index.html (100%) rename {test => public}/stage2/style.css (100%) rename {test => public}/stage2/tests.js (100%) rename {test => public}/stage3/.eslintrc (100%) rename {test => public}/stage3/index.html (100%) rename {test => public}/stage3/style.css (100%) rename {test => public}/stage3/tests.js (100%) rename {test => public}/stage4/.eslintrc (100%) rename {test => public}/stage4/index.html (100%) rename {test => public}/stage4/style.css (100%) rename {test => public}/stage4/tests.js (100%) rename {test => public}/stage5/.eslintrc (100%) rename {test => public}/stage5/index.html (100%) rename {test => public}/stage5/tests.js (100%) rename {test => public}/stage6/.eslintrc (100%) rename {test => public}/stage6/index.html (100%) rename {test => public}/stage6/tests.js (100%) create mode 100644 public/test.html diff --git a/gulp/serve.js b/gulp/serve.js index 9b370b15..6f587cc7 100644 --- a/gulp/serve.js +++ b/gulp/serve.js @@ -5,7 +5,6 @@ var stream = require('stream'); var gutil = require('gulp-util'); var SERVER_SCRIPT = './server.js'; -var PORT = 8000; var serve = function() { @@ -18,7 +17,7 @@ var serve = function() { nodemon({ script: SERVER_SCRIPT, watch: [SERVER_SCRIPT], - env: { PORT: PORT }, + env: { PORT: serve.PORT }, stdout: false }) .on('readable', function() { @@ -39,4 +38,7 @@ var serve = function() { return readable; }; + +serve.PORT = 8000; + module.exports = serve; diff --git a/gulpfile.js b/gulpfile.js index eb85b527..92748724 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,41 +2,46 @@ var util = require('util'); var gulp = require('gulp-help')(require('gulp')); +var serve = require('./gulp/serve.js'); -var PORT = 8000; -var BASE_URL = util.format('http://localhost:%d/', PORT); +var BASE_URL = util.format('http://localhost:%d/', serve.PORT); var tasks = [ { cmd: 'stage1', help: '意図した DOM を取得できているかテストします', url: BASE_URL + 'stage1', - src: 'test/stage1.js' + src: 'public/stage1.js' }, { cmd: 'stage2', - help: '意図通りに DOM の構造・スタイルが変更できているかテストします', + help: '意図通りに DOM のスタイルが変更できているかテストします', url: BASE_URL + 'stage2', - src: 'test/stage2.js' + src: 'public/stage2.js' }, { cmd: 'stage3', - help: '意図通りにイベントを利用できているかテストします', + help: '意図通りに DOM の構造が変更できているかテストします', url: BASE_URL + 'stage3', - src: 'test/stage3.js' + src: 'public/stage3.js' }, { cmd: 'stage4', - help: '意図通りにサーバーと通信できているかテストします', + help: '意図通りにイベントを利用できているかテストします', url: BASE_URL + 'stage4', - src: 'test/stage4.js' + src: 'public/stage4.js' }, { cmd: 'stage5', - help: '意図通りにモジュールを実装できているかテストします', + help: '意図通りに非同期処理ができているかテストします', url: BASE_URL + 'stage5', - src: 'test/stage5.js' + src: 'public/stage5.js' }, { cmd: 'stage6', - help: 'よくあるイディオムを読み書きできているかテストします', + help: '意図通りにモジュールを実装できているかテストします', url: BASE_URL + 'stage6', - src: 'test/stage6.js' + src: 'public/stage6.js' + }, { + cmd: 'stage7', + help: 'よくあるイディオムを読み書きできているかテストします', + url: BASE_URL + 'stage7', + src: 'public/stage7.js' } ]; @@ -47,7 +52,7 @@ tasks.forEach(function(task) { gulp.task(task.cmd, task.help, ['lint-' + task.cmd], function() { // We expected that mocha-phantomjs print colorized results, but it isn't. // So, I take a fast way that is using gulp-run. - return run('`npm bin`/mocha-phantomjs ' + task.url + ' || true').exec(); + return run('$(npm bin)/mocha-phantomjs ' + task.url + ' || true').exec(); }); }); @@ -64,6 +69,5 @@ tasks.forEach(function(task) { gulp.task('serve', 'サーバーを起動し、ブラウザでテストを確認できるようにします', function(){ - var serve = require('./gulp/serve.js'); return serve(); }); diff --git a/test/.eslintrc b/public/.eslintrc similarity index 100% rename from test/.eslintrc rename to public/.eslintrc diff --git a/test/common/mocha-patch.css b/public/common/mocha-patch.css similarity index 100% rename from test/common/mocha-patch.css rename to public/common/mocha-patch.css diff --git a/test/index.html b/public/index.html similarity index 100% rename from test/index.html rename to public/index.html diff --git a/test/stage1/.eslintrc b/public/stage1/.eslintrc similarity index 100% rename from test/stage1/.eslintrc rename to public/stage1/.eslintrc diff --git a/test/stage1/analytics.js b/public/stage1/analytics.js similarity index 100% rename from test/stage1/analytics.js rename to public/stage1/analytics.js diff --git a/test/stage1/index.html b/public/stage1/index.html similarity index 100% rename from test/stage1/index.html rename to public/stage1/index.html diff --git a/test/stage1/style.css b/public/stage1/style.css similarity index 100% rename from test/stage1/style.css rename to public/stage1/style.css diff --git a/test/stage1/tests.js b/public/stage1/tests.js similarity index 100% rename from test/stage1/tests.js rename to public/stage1/tests.js diff --git a/test/stage2/.eslintrc b/public/stage2/.eslintrc similarity index 100% rename from test/stage2/.eslintrc rename to public/stage2/.eslintrc diff --git a/test/stage2/index.html b/public/stage2/index.html similarity index 100% rename from test/stage2/index.html rename to public/stage2/index.html diff --git a/test/stage2/style.css b/public/stage2/style.css similarity index 100% rename from test/stage2/style.css rename to public/stage2/style.css diff --git a/test/stage2/tests.js b/public/stage2/tests.js similarity index 100% rename from test/stage2/tests.js rename to public/stage2/tests.js diff --git a/test/stage3/.eslintrc b/public/stage3/.eslintrc similarity index 100% rename from test/stage3/.eslintrc rename to public/stage3/.eslintrc diff --git a/test/stage3/index.html b/public/stage3/index.html similarity index 100% rename from test/stage3/index.html rename to public/stage3/index.html diff --git a/test/stage3/style.css b/public/stage3/style.css similarity index 100% rename from test/stage3/style.css rename to public/stage3/style.css diff --git a/test/stage3/tests.js b/public/stage3/tests.js similarity index 100% rename from test/stage3/tests.js rename to public/stage3/tests.js diff --git a/test/stage4/.eslintrc b/public/stage4/.eslintrc similarity index 100% rename from test/stage4/.eslintrc rename to public/stage4/.eslintrc diff --git a/test/stage4/index.html b/public/stage4/index.html similarity index 100% rename from test/stage4/index.html rename to public/stage4/index.html diff --git a/test/stage4/style.css b/public/stage4/style.css similarity index 100% rename from test/stage4/style.css rename to public/stage4/style.css diff --git a/test/stage4/tests.js b/public/stage4/tests.js similarity index 100% rename from test/stage4/tests.js rename to public/stage4/tests.js diff --git a/test/stage5/.eslintrc b/public/stage5/.eslintrc similarity index 100% rename from test/stage5/.eslintrc rename to public/stage5/.eslintrc diff --git a/test/stage5/index.html b/public/stage5/index.html similarity index 100% rename from test/stage5/index.html rename to public/stage5/index.html diff --git a/test/stage5/tests.js b/public/stage5/tests.js similarity index 100% rename from test/stage5/tests.js rename to public/stage5/tests.js diff --git a/test/stage6/.eslintrc b/public/stage6/.eslintrc similarity index 100% rename from test/stage6/.eslintrc rename to public/stage6/.eslintrc diff --git a/test/stage6/index.html b/public/stage6/index.html similarity index 100% rename from test/stage6/index.html rename to public/stage6/index.html diff --git a/test/stage6/tests.js b/public/stage6/tests.js similarity index 100% rename from test/stage6/tests.js rename to public/stage6/tests.js diff --git a/public/test.html b/public/test.html new file mode 100644 index 00000000..53a51921 --- /dev/null +++ b/public/test.html @@ -0,0 +1,19 @@ + + + + + + + + + FUUUUUUUU + + + diff --git a/server.js b/server.js index 5a0209ad..9d937a17 100644 --- a/server.js +++ b/server.js @@ -9,7 +9,7 @@ var app = express(); app.use(bodyParser.json({limit: '50mb'})); app.use(bodyParser.urlencoded({extended: true, limit: '50mb' })); -var PUBLIC_DIR = path.join(__dirname, 'test'); +var PUBLIC_DIR = path.join(__dirname, 'public'); var MODULE_DIR = path.join(__dirname, 'node_modules'); app.use(express.static(PUBLIC_DIR)); app.use('/modules', express.static(MODULE_DIR)); @@ -22,9 +22,12 @@ app.get('/api/heavy', function(req, res) { }); -var server = require('http').createServer(app); -var PORT = 8000; + +var PORT = process.env.PORT; var HOSTNAME = 'localhost'; + +var server = require('http').createServer(app); server.listen(PORT, HOSTNAME, function () { - console.log(util.format('SERVER_READY on http://%s:%d', HOSTNAME, PORT)); + console.log('SERVER_READY'); + console.log(util.format('http://%s:%d にブラウザでアクセスしてください'), HOSTNAME, PORT); }); From 3ac2d6bfb37efa024a4dd7f40328f37ae036277a Mon Sep 17 00:00:00 2001 From: Kuniwak Date: Tue, 17 Mar 2015 14:57:03 +0900 Subject: [PATCH 04/12] Switch to bower from npm --- .gitignore | 1 + package.json | 9 +-------- public/bower.json | 35 +++++++++++++++++++++++++++++++++++ public/index.html | 4 ++-- public/stage1/index.html | 12 ++++++------ public/stage2/index.html | 12 ++++++------ public/stage3/index.html | 12 ++++++------ public/stage4/index.html | 12 ++++++------ public/stage5/index.html | 16 ++++++++-------- public/stage6/index.html | 16 ++++++++-------- server.js | 2 -- 11 files changed, 79 insertions(+), 52 deletions(-) create mode 100644 public/bower.json diff --git a/.gitignore b/.gitignore index 3c3629e6..a088b6f0 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ node_modules +bower_components diff --git a/package.json b/package.json index 1014cf63..0d88e4c9 100644 --- a/package.json +++ b/package.json @@ -21,8 +21,6 @@ "homepage": "https://github.com/mixi-inc/JavaScriptTraining", "devDependencies": { "body-parser": "^1.12.0", - "chai": "^2.1.1", - "chai-as-promised": "^4.3.0", "express": "^4.12.2", "gulp": "^3.8.11", "gulp-eslint": "^0.6.0", @@ -30,14 +28,9 @@ "gulp-nodemon": "^1.0.5", "gulp-run": "^1.6.6", "gulp-util": "^3.0.4", - "mocha": "^2.2.0", "mocha-phantomjs": "^3.5.3" }, "dependencies": { - "bootstrap": "^3.3.2", - "bower": "^1.3.12", - "chai-jquery": "^2.0.0", - "jquery": "^2.1.3", - "whatwg-fetch": "^0.7.0" + "bower": "^1.3.12" } } diff --git a/public/bower.json b/public/bower.json new file mode 100644 index 00000000..35ea8f03 --- /dev/null +++ b/public/bower.json @@ -0,0 +1,35 @@ +{ + "name": "mixi-js-training-client", + "version": "0.0.0", + "homepage": "https://github.com/mixi-inc/JavaScriptTraining", + "authors": [ + "Kuniwak " + ], + "description": "Training course repositry for JavaScript by mixi", + "main": "index.html", + "moduleType": [ + "globals" + ], + "keywords": [ + "training" + ], + "license": "MIT", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ], + "dependencies": { + "chai": "~2.1.2", + "chai-as-promised": "~4.3.0", + "mocha": "~2.2.1", + "bootstrap": "~3.3.4", + "chai-jquery": "~2.0.0", + "jquery": "~2.1.3", + "fetch": "~0.7.0", + "github-fork-ribbon-css": "~0.1.1" + } +} diff --git a/public/index.html b/public/index.html index a13b22d7..83ab7927 100644 --- a/public/index.html +++ b/public/index.html @@ -4,8 +4,8 @@ mixi JS Training - - + +