NodeSchoolでJS力をアップしよう！

_記事内容に間違いや改善等ありましたらコメント欄にてご指摘をお願いしますm(\_\_)m_

# NodeSchoolとは
詳細は[公式サイト](http://nodeschool.io/ja/)に書かれていますが要は無料でNodeやそれに関連する技術を学べるオープンソースのツールです。

<img width="743" alt="スクリーンショット 2015-10-27 10.00.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/38528/7f5188b0-c7f5-02a9-39f9-cadf3a08b17e.png">

NodeSchoolという名前なので、なにかしら **Node関連のものしかない** ように思われがちですが、JavaScriptのみに着目した科目（他にもNoSQL関係だったり、etc）などもあるので、「JavaScriptの勉強をしたい！」という人にもおすすめです！

# 必要なもの

|項目|説明|
|---|---|
|Node.js|NodeSchoolはNode.jsを使って動作します|
|npm|Node.jsインストール時に一緒にインストールされるNode.jsのパッケージマネージャー|

## Node.jsインストールの推奨方法
Node.jsは活発に開発が進んでいるのでバージョンが結構頻繁に変わります。なのでNode.jsのバージョン管理をしてくれるツールのインストールを推奨します。（Rubyで言う`rvm`のような存在）
現時点（2015/10/27時点）で推奨するNode.jsのバージョンは **0.12系** です。4.x系はちょっとまだ不安定な印象があります。

★補足★
_様々な意見があると思いますが、本当にNodeSchoolをちょっとやってみたいだけでNodeなんて興味ない！って人は[公式サイト](https://nodejs.org/)のインストーラで手軽にインストールしちゃっても良いと思います。（4.x系で正常にNodeSchoolが全部動いてくれることを祈って！）無理だったらv0.12.7のパッケージとか[アーカイブ](https://nodejs.org/en/download/releases/)から探しましょう。_

### Macであれば`nvm`
[こちら](http://qiita.com/tagosaku324/items/bf1fe149c38c99728c72#nvmnode-version-manager%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)のQiitaの記事の[nvmのインストール](http://qiita.com/tagosaku324/items/bf1fe149c38c99728c72#nvmnode-version-manager%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)がわかりやすいです。

### Windowsであれば`nvm-windows`

インストーラがあるので基本的にはそれを実行するだけでインストールできるはずです。[こちら](http://qiita.com/moomoo-ya/items/e4cd8a79d879850eb61b)のQiita記事にもやり方が書いてあります。

★補足1★
[リンク先](http://qiita.com/moomoo-ya/items/e4cd8a79d879850eb61b#%E8%BF%BD%E8%A8%98%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E3%81%AF%E7%AE%A1%E7%90%86%E8%80%85%E6%A8%A9%E9%99%90%E3%81%A7)にも記載されていますがnvm-windowsを使うときのコンソールは管理者権限で実行することを忘れずに！

※_筆者はMac環境でしか動作確認をしていないので、Windows環境で試された方で、「こうしないとできないよ！」などがありましたらコメント等でご指摘いただければ幸いです。_

### nvmでNode.jsをインストール

nvmのインストールが完了したらNode.jsをインストールします。WindowsとMacともにインストールのコマンドは同じです。[こちら](http://qiita.com/tagosaku324/items/bf1fe149c38c99728c72#nodejs%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B))の記事がわかりやすいです。

★補足1★
`nvm-windows`を使う場合は`nvm install 0.12.7`とすることでインストール可能です。`nvm install v0.12.7`とした場合、`vv0.12.7`なんてないよ！って怒られます。「v」は省きましょー。

# NodeSchoolの使い方

NodeSchoolのワークショップは`npm`のパッケージで配布されているので、`npm`を使ってインストールします。[公式サイト](http://nodeschool.io/ja/#workshoppers)に科目が紹介されていて、 **インストールコマンド** も丁寧に書いてあるので、表示されている通りに実行するだけです！

<img width="600" alt="NodeSchool.png" src="https://qiita-image-store.s3.amazonaws.com/0/38528/8ebdd2a6-86e9-f46a-e564-4d76495559dd.png">


## 学習フロー
フローとしては以下のようになります
1. 学習したい科目をNodeSchoolで探す
2. 科目が見つかったら、`npm install`して科目をローカルにインストールする
3. 科目名のコマンドがターミナル（コマンドプロンプト）上で実行できるようになるので実行する
4. 学習開始！
5. 「課題選択→実施→ちゃんと合っているかテスト」を、全ての課題が完了するまで繰り返し！
6. 違う課題を探す！

### ★補足1★
3がわかりづらいと思いますが、例えば`javascripting`という科目を選択してインストール（`npm install -g javascripting`）すると、ターミナル（コマンドプロンプト）上で`javascripting`というコマンドが実行できるようになります。このコマンドを叩くことで`javascripting`の学習が始まります。
以下、実際の画面です
![javascripting.gif](https://qiita-image-store.s3.amazonaws.com/0/38528/d3461acd-84a3-e3e8-8abc-5320991c9b5d.gif)

### ★補足2★
5の「課題選択→実施→ちゃんと合っているかテスト」について、まず課題を選択すると↓のようにターミナル（コマンドプロンプト）上に課題が表示されます。

<img width="564" alt="javascripting2.png" src="https://qiita-image-store.s3.amazonaws.com/0/38528/b1fe63e3-3243-c476-a3fd-87b638555d47.png">

基本的にはこの課題で要求されている通りのJavaScriptファイルを作ってから、`verify`コマンドを叩くことで、テストが実行されます。見事合格すると↓のような画面が表示されます。
<img width="548" alt="javascript3.png" src="https://qiita-image-store.s3.amazonaws.com/0/38528/69cba210-025b-1f05-f78e-3e2595e9054c.png">

完了した科目についてはターミナル（コマンドプロンプト）上も`完了済み`となるので、どこまで何を学習したかというのがとてもわかりやすいですし、進めていく感じを味わえるのでとても楽しいです！

<img width="494" alt="javascript4.png" src="https://qiita-image-store.s3.amazonaws.com/0/38528/e9e93203-8dfd-3ee2-314e-211514bed852.png">

## JSerにおすすめできそうな科目
筆者も全部やったわけではありませんが、響き的におもしろそうな科目を
以下にリストアップします。「これもいいよ！」というのがあればドシドシ教えてください！

|科目名|説明|インストールコマンド|
|---|---|---|
|javascripting|開発経験がない人のためのJavaScriptの基本コースです。|npm install -g javascripting|
|Scope Chains & Closures|スコープ、スコープチェーン、クロージャ、ガーベッジコレクションの詳細を学ぶ。|npm install -g scope-chains-closures|
|Promise It Won't Hurt|Promiseを使った非同期操作を勉強する。|npm install -g promise-it-wont-hurt|
|Planet Proto|JavaScriptのPrototypeの理解。|npm install -g planetproto|
|Tower of babel|ES6の特徴について紹介するエクササイズ。|npm install tower-of-babel -g|

↑が終わったらやってみたいのは↓

|科目名|説明|インストールコマンド|
|---|---|---|
|LololoDash|Lo-Dash(underscoreのフォーク)を使い、ArrayやObjectをもっと簡単に使う。|npm install -g lololodash|
|Learn Generators|ECMAScript6のGeneratorの紹介。|npm install -g learn-generators|
|learnyoureact|React.jsとサーバサイドレンダリングについて学びましょう！|npm install -g learnyoureact|
|Thinking in React|UIをゼロから構築することでReactの考え方を学びましょう。|npm install -g thinking-in-react|

# 課題

課題としてはおもしろそうな科目があっても、「日本語」版がまだ用意されていないものがある！ということかと思います。
ただし、「無いからあきらめる」のではなく、これらは全部オープンソースなのでいっそのこと「無いから自分で作る」、という感じにみんなで日本語版も盛り上げていきましょう！（筆者も若輩者ながら`Planet Proto`は日本語版を作らせていただきました！間違ってたらIssueで報告してください　笑）