JavaScriptを実際に使えるように環境を整えましょう。ウェブブラウザ上で動くコードを開発する場合でも、色々なツールの恩恵をうけるためにNode.jsを使うのが定石なので、まずはNode.jsをインストールします。またVisual Studio Codeという軽量かつ強力なIDEがありますのでこちらについても説明します。

2.1　Node.jsのインストール

　まずはNode.jsをインストールしますが、実際には直接Node.jsをそのままインストールしません。他の言語でもそうですが、最近はシステムに直接インストールするのではなく、色々なバージョンが共存できるような仕組みでインストールします。なぜそんな少し面倒なことをするのでしょうか？それは、長期間プロダクトをメンテナンスする場合に、Node.js及び利用パッケージのバージョンを固定したいからです。

　Node.jsの2017/06/12時点でのバージョンは、開発版がv8.1.0で安定版がv6.11.0です。2016年10までは安定版がv4.x.x（いわゆる4系）で、2017年4月〜2018年4月まではセキュリティアップデートなどのサポートが行われます。これをLTS（長期サポート）といいます。

　たとえば4系で書かれたプロダクトをメンテナンスしながら、新しいプロダクトは6系で作り始めるという場合、さきほど述べたバージョン共有が有効です。Node.jsの4系と6系の間にそれほど大きな破壊的アップデート¹はありませんが、今後の状況によっては大きな変更が加わることもありえます。そのような時に新しいプロダクトと古いプロダクトで別のバージョンを使い分けることで複数のプロダクトを安全にメンテナンスすることができます。もちろん余裕のあるうちにメジャーバージョンは上げておく方が良いでしょう。

　さてバージョン共存の仕組みはいくつかありますが、WindowsはNodistを、Mac, LinuxなどのUNIX系OSではanyenv+ndenvを説明します。

2.1.1　Windows: Nodist

　Nodist²はWindows向けのNode.jsとnpmバージョン管理ソフトです。リリースページであるhttps://github.com/marcelklehr/nodist/releasesにアクセスして最新版のexeファイルをダウンロードして実行すれば、Nodistのインストールが完了します。コマンドラインを起動すればすでにNodist.exeにパスが通っているのでNode.jsのインストールコマンドを叩くだけです。

> nodist 6 
> nodist global 6 
> node --version 
v6.11.0 

　これだけで6系の最新版をインストールして使用可能になります。プロジェクトローカルのバージョン固定ならばnodist local v6.11.0とします。Windowsに言語処理系をインストールする時は環境変数（特にPATH）を変更することも多いのですが、Nodistがこれらをすべて行ってくれます。

2.1.2　Mac/UNIX/Linux: anyenv+ndenv

　MacやLinux, FreeBSDなどのUNIX系OSではこのジャンルのソフトが乱立していますが、その中でも筆者はanyenvをお勧めします。anyenvは*env系を一括で管理できるというもので、Node.jsならばndenvがありますし、Go言語向けのgoenvやRuby向けのrbenvなどがあります。anyenvをインストールしておけばNode.js以外の言語を使うときにもそのまま応用が利くのです。

　anyenvでは使っているシェルの起動ファイル（bashなら .bashrcか.bash_profile）に起動用の設定を組み込む必要があります。以下は.bash_profileに入れる前提で書いていますが、他のファイルに入れる場合は>> ~/.bash_profileをそのファイルに書き換えてください。

$ git clone https://github.com/riywo/anyenv ~/.anyenv 
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile 
$ echo 'eval "
$(anyenv init -)"' >> ~/.bash_profile 
$ exec $SHELL -l $ anyenv install ndenv 
$ exec $SHELL -l 

　これでanyenvとndenvがインストールできました。あとは実際にNode.jsをインストールするのですが、まずhttps://nodejs.org/en/ にアクセスしてどのバージョンにするのかを決めましょう。たとえばv6.10.0が安定版の最新版であれば、通常これをインストールすることになります。コマンドラインのndenv install -lでインストール可能なバージョンのリストが取得できます。慣れていればどのバージョンをインストールすればいいか分かりますが、不明であればウェブを見た方が確実でしょう。インストールが完了したら、node -e "console.log('Hello, World.')"を実行してHello, World.が表示されていれば成功です。

$ ndenv install v6.10.0 
$ ndenv global v6.10.0 
$ exec $SHELL -l 
$ node -e "console.log('Hello, world.')" 
Hello, world. 

2.2　npm

　npmはNode.jsのパッケージシステムであり、同じ名前のCLIコマンドがあります。npmでは、プロジェクトのルートに置かれるpackage.jsonというファイルが重要です。これはそのプロジェクトの名前やエントリーポイント、依存するパッケージのリストなどが納められたJSONファイルです。

$ npm init -y 

　npm initで最低限の情報が納められたpackage.jsonが作成されます。-yオプションは質問に全部yesで答えるというものです。package.jsonが作成されるとnpm iコマンドでnpmパッケージのインストールができるようになります。

$ npm i <package names...> -S 
$ npm i <package names...> -D 

　パッケージインストールはnpm i³にパッケージ名（複数指定可能）と-Sか-Dのどちらかのオプションをつけます。前者は--saveの省略形で、そのプロジェクトを動かす時に必要になるという指定です。後者は--save-devの省略形で開発時にのみ必要という指定です。

　なぜこれらが分かれているかというと、開発時には必要になるけど、実行時には必要ないパッケージがそれなりにあって容量に影響を与えるからですが、どちらかよくわからない時は全部-Sでもかまいません。

$ npm un <package names...> -S 
$ npm un <package names...> -D 

　パッケージのアンインストールはnpm un⁴です。

　インストールされたパッケージは、JavaScriptのコードの中でrequireやimportで利用できます。一部のパッケージにはCLIで実行できるスクリプトが付属します。

2.2.1　グローバル

$ npm i <package names...> -g 

　パッケージは基本的にはローカルに保存されるのですが、-gオプションをつけることでグローバルにインストールすることができます。一部のツールはグローバルにインストールすることが推奨されていますが、ローカルでも別にかまいません。

2.2.2　node_modules

　ローカルにインストールされたパッケージは、プロジェクトルートにnode_modulesというディレクトリが作成されその下に配置されます。node_modulesはソース管理から外します。gitを使っているのであれば、.gitignoreに指定します。

　package.jsonにちゃんと依存パッケージの情報が残っていれば、簡単にnode_modules下を復元することができます。

$ npm i 

　npmのインストールコマンドでパッケージ名を省略すると、package.jsonに登録されているパッケージを全部インストールしてくれます。なんと便利なのでしょうか。

2.2.3　タスクランナー

　UNIXで古来からあるMakefileやその亜種など、プログラムのビルドやテストやデプロイなどをするためのスクリプトをタスクランナーと呼びます。JavaScriptの世界でもこれまではGruntやGulpなどのタスクランナーが一世を風靡していました。ただし、Node.jsではタスクランナーは特に必要ありません。少なくとも今から新しくGulpなどを覚える必要性はまったくありません。

　package.jsonにはコマンドを登録すればnpm経由でコマンドを実行できますし、高度なことがしたければ、JavaScriptでスクリプトを書いてpackage.jsonに登録し、npm経由で実行すればいいだけなのです。

2.3　トランスパイラ

　JavaScriptにおける独特なものとしてトランスパイラがあります。言ってみればコンパイラの一種なのですが、CPUが直接実行できるマシン語や仮想マシンで実行できるようなバイナリではなくて、JavaScriptそのものをはき出します。

　なぜこのようになったかというと、JavaScriptというのがさまざまな環境における共通言語だからです。Internet ExplorerやGoogle Chromeなどさまざまなウェブブラウザで動くことを考えると、JavaScriptは共通基盤ともいえます。

　ECMAScriptの最新版や、まだ規格としてリリースされていないような審議中の機能、AltJSと呼ばれる言語機能が追加されたもの、さらにいうとJavaScriptとはまったく違う言語からのトランスパイルなどがすでに存在しています。

2.3.1　babel

　一番有名なトランスパイラはbabelです。元々ES6（と当時いわれていた）のコードをES5で動かすために生まれたプロジェクトで、後に名前をbabelに変えました。babelはプラグインとプリセットによってさまざまなコードの変換を行えるのが特徴で、ReactのJSXや、Flow typeなどもbabelのプラグインによって変換されます。基本的にTypeScript以外はbabelさえ使えば大丈夫です。プリセットはプラグインの集合体です。

2.3.2　webpack loader

　Webpackは後ほど説明するバンドラと呼ばれるソフトなのですが、そのプラグインとしてwebpack loaderというものがあります。たとえば画像データをJavaScriptのコードに変換するなど、さまざまなトランスパイルの機能を持ったloaderがリリースされています。

2.4　バンドラ

　ES2015にはimport/exportという、JavaScriptのコードから別のJavaScriptのコードを読み込むための機能が定義されているのですが、これまでのウェブブラウザではなぜか実装されませんでした。つまりウェブブラウザ上ではJavaScriptをモジュール分割できなかったのです⁵。HTMLから複数のJavaScriptのコードを呼び出せますが、グローバル変数を元にやりとりするしかないというとても使いにくい仕様です。

　そこで、トランスパイラ同様に前処理をほどこすことで、手元ではモジュール開発をしつつ、ウェブブラウザ上では問題なく動く単一のJavaScriptをはき出す仕組みが登場しました。これがバンドラと呼ばれるものです。バンドラは複数のファイルをバンドルして1つのファイルにするソフトです。

　現在主流のバンドラには、browserify、webpack、rollupなどがあります。これらはどれも一癖も二癖もあって、どれを採用すべきか悩ましいところがあります。まずbrowserifyは若干過去のものになりつつある上で微妙なクセがあり、webpackはシェアが高く情報も多いですが設定が面倒です。rollupは性能もよくてこれからの主流になりそうな気配もありますが、まだ少し上級者向けな雰囲気が残っています。

　JavaScriptの前処理をするのですから、バンドラではプラグインなどによってトランスパイラの機能も実行されます。browserifyにはbabelifyというbabelを呼び出すプラグインがありますが、webpack、rollupにも同様のものがあります。

　プラグインはいろいろなことが可能になって便利ですが、深入りはお勧めしません。はやり廃りの影響を受けやすいですし、思いもよらない問題に遭遇することもよくあります。やはり、安定した組み合わせで安定した使い方にとどめておくといいでしょう。

1: "type": "VariableDeclaration",  
2: "declarations": [  
3:   {  
4:     "type": "VariableDeclarator",  
5:     "id": {  
6:       "type": "Identifier",  
7:       "name": "a"  
8:     },  
9:     "init": { 
10:       "type": "Literal", 
11:       "value": 1, 
12:       "raw": "1" 
13:     } 
14:   } 
15: ],  

2.5　推奨パッケージ

　さて、ここまででNode.jsを導入しましたが、もう1つパッケージをインストールしておきましょう。Node.jsではnpmというパッケージシステムを使います。デフォルトではnpmはローカルにパッケージをインストールするのですが、今回はグローバルにwaterslideというパッケージをインストールします。これはJavaScriptではプロジェクトに合わせた環境整備が面倒で敬遠されることがあることから、環境設定を楽にするためのコマンドラインツールです。

$ npm install waterslide -g 

　anyenv+ndenvの場合はnpm install -gをした後には必ずexec $SHELL -lをする必要があるのでご注意ください。インストールしたあとはws new <projectType> [projectDir]でプロジェクトディレクトリを作成して、必要なものをインストールすることができます。projectTypeにはbrowserやelectronなどが指定できます。projectDirは省略可能で、省略した場合にはランダムな名前のプロジェクトディレクトリが作成されます。これはちょっとした実験をする時に便利です。また、--use ava,flowというオプションで本書でも後の章で紹介しているAVAやFlowを使うことができます。

$ ws new --use ava,flow browser my-project 
$ cd my-project 

2.6　Visual Studio Code

　Visual Studio Code（VSCode）はお勧めの軽量IDEです。VSCodeはMicrosoft社が開発したオープンソース⁶のIDEでAtomと同様にElectron/JavaScriptで書かれており、Javaで作られたEclipseやIntelliJ IDEAなどに比べて圧倒的に軽い動作を誇ります。筆者は以前Core m 1.1GHzのMacbook 12inch Early 2015を使っていたのですが、一部のプラグインを除きVSCodeを重いと感じたことはありませんでした。モバイルPCで軽々と動くのです。

　VSCodeは開発が活発ですし、さまざまな拡張がJavaScriptで作成されています。コーディングやデバッグに便利なさまざまな機能が実装されているため、特にJavaScriptエンジニアの間では手放せないIDEになっています。そのため本書ではVSCodeを説明します。

　https://code.visualstudio.com/ にアクセスし、使用しているOSにしたがってダウンロードしてください。ちなみにMacでHomebrew及びbrewcaskを使っている場合、brew cask install visual-studio-codeでインストールできます。どの手段でも一度インストールすればあとは自動アップデートで最新版に追従できます。

　VSCodeをインストールしたら、実際に動かすためにプロジェクトを作成しましょう。ここではプロジェクト名を「jsproject」にします。コマンドラインでws new node jsprojectでプロジェクトが作成されるのでcd jsprojectでプロジェクトディレクトリに移ります。このディレクトリでnpm startで起動できます。あとはcode .でVSCodeを起動しましょう。

$ ws new node jsproject create a new project of node directory jsproject was created.
   project jsproject was created.
   see. jsproject/README.md 
$ cd jsproject 
$ npm start 
〜〜〜〜〜 
run application 
Hello, Node.js World. 
exit 0 
$ code . 

　VSCodeを起動し、左のサイドバーに出ているエクスプローラーでソースコードにアクセスします。これらはwsコマンドで生成されたファイル群です。色々なファイルをクリックして中身を見てください。中でもsrc/index.jsはNode.jsで動くJavaScriptのソースコードになります。いわゆる「ハローワールド」です。文言を書き換えて保存したら、またnpm startで動作がちゃんと変わっているかを確認してみてください⁷。

　さて、左端の縦に並んだアイコンでサイドバーの切り替えができます。

検索

　検索は、プロジェクト内のファイル全部から文字列を検索できます。たとえばconsoleを検索するとsrc/index.jsの中にあるconsole.logなどがヒットします。使いこなすととても便利です。

SCM

　SCM（ソースコードマネージャー）⁸ではgitやHG、Perforceなどのソース管理の仕組みに対応しています。ここではワーキングツリー（現在作業中のプロジェクトのディレクトリ）に加えられた変更を見ることができます。コミットをすることでリポジトリ（ソースコードの異なるバージョンを効率的に貯める貯蔵庫、多くの場合は隠しディレクトリ）に履歴を記録することができます。SCMは過去にコミットされたものをさかのぼって参照できるのです。SCMを使うとソースコードのコメントアウトやファイルのリネームによるバックアップがまったく必要なくなります。コミットをたどればいくらでも復元ができるからです。特にgitでは一部の破壊的なコマンドさえ実行しなければ失敗を取り返すことができる仕組みになっています。

　ただし現在のVSCode単体ではSCMに対する操作はあまりできません⁹。そのためコマンドラインでgitをたたくか、なんらかのGUIクライアントを使う必要もあるでしょう。

　gitは現在もっともよく使われているSCMで、GitHub¹⁰などさまざまなサービスで使われています。

　WindowsやMacなど向けのGUIクライアントがいくつかありますがコマンドラインのgitを覚えておく方がいいでしょう。よく使われるコマンドを表2.2にまとめました。

　コマンドについて詳細までは説明しませんが、git固有の概念についていくつか説明します。ステージングというのは変更内容をコミット候補にあげることです。ファイルに変更を加えたらステージングして、ステージングの内容物をコミットし、リポジトリに反映させます。コミットは履歴を記録することだといえます。

　ブランチというのはソースコードを変更するための履歴の流れです。一時期流行した言い方をすれば世界線でしょうか。初期状態だと世界線はmasterブランチにいます。ブランチを分けるとたとえば開発版ブランチという世界線で機能開発をしながら、安定版ブランチをメンテナンスする、というようなことも簡単にできるのです。大きな変更を加えるときには安全の為にブランチを作成して、うまくいけばmasterにマージ（ソースコードの合流）をするという開発スタイルもよく採用されています。

　そしてgitは分散型のSCMなのでgit remote add <remote> <URL>でリモートを登録することができます。remoteは任意の名前をつけられますが、よく使われるのはoriginとupstreamで、前者はオリジナルとなるリポジトリに付けられる名前です。

　ネットワークにつながっていなくてもローカルのリポジトリにコミットできます。ネットワークにつながった時点でgit pushすれば、ローカルでのコミットがリモートに反映されます。

　他に便利なコマンドにはgit logのオプション指定があります。

$ git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --date=relative 

　これはgit logをきれいにみるためのもので、よくgit graphと呼ばれるものです。

デバッガ

　デバッガは開発において大変役に立つツールです。ChromeやFirefoxなどウェブブラウザには当たり前のようにデバッグツールがありますし、当然VSCodeにも用意されています。

　どのデバッガも使い方は大体似たような物です。ソースコードの対象の場所にブレークポイントを設定してデバッグ対象を走らせるとブレークポイントで一次停止するので、その時点での変数の中身を見たり、ステップ実行と呼ばれる一行ずつ処理をコマ送りにするなどの手段で、中でどうなっているのかを可視化します。

拡張

　VSCodeはプラグインによる拡張にも対応しています。筆者が使っているプラグインは、ESLint, Flow Laungage Support, Git History(git log), Go, Mark Jump, TSLintなどです。JavaScriptやTypeScript以外の言語を扱う際はその言語向けの拡張を入れると良いでしょう。

　eslintやflowの拡張を入れるとルールに反したコードを警告してくれたり、オプションによっては自動修正したりしてくれます。

　Git HistoryやMark Jumpは、VSCodeを便利にしてくれるものです。