今時のフロントエンド開発2017 (2. 構築編)

# はじめに
本編では[今時のフロントエンド開発2017 (1. 愚痴編)](http://qiita.com/Lyude/items/783a972bace33002455c)に続き開発環境の構築をしていきます。

## おしながき
* [今時のフロントエンド開発2017 (1. 愚痴編)](http://qiita.com/Lyude/items/783a972bace33002455c)
* [今時のフロントエンド開発2017 (2. 構築編)](http://qiita.com/Lyude/items/c4250b6be4eeece90348)
* [今時のフロントエンド開発2017 (3. webpack編)](http://qiita.com/Lyude/items/7b8104418a5dd03c7d30)
* 今時のフロントエンド開発2017 (4. TypeScript編)
* 今時のフロントエンド開発2017 (5. もっと効率よく編)

# 開発環境の構築

## ナイスなエディタ
コーディングをするにはエディタが必要になるわけですが，これは皆さんの信じるお好きなものを使ってください。

<img height="16" alt="Atom" src="https://qiita-image-store.s3.amazonaws.com/0/128213/fab55d46-8891-9e97-5f66-d31af295d5fa.png"> Atom
<img height="16" alt="Brackets" src="https://qiita-image-store.s3.amazonaws.com/0/128213/9d1dcc6c-b80d-7aea-76a6-09acd3d21a74.png"> Brackets
<img height="16" alt="Emacs" src="https://qiita-image-store.s3.amazonaws.com/0/128213/d1ddce50-3ebb-dfa8-ae60-074e9fe94c2a.png"> Emacs
<img height="16" alt="Lime Text" src="https://qiita-image-store.s3.amazonaws.com/0/128213/8baa481b-1d89-7e30-e6c4-7a7af5d22fd3.png"> Lime Text
<img height="16" alt="Sublime Text" src="https://qiita-image-store.s3.amazonaws.com/0/128213/014493eb-f454-5425-1fcc-74f58e91f894.png"> Sublime Text
<img height="16" alt="Vim" src="https://qiita-image-store.s3.amazonaws.com/0/128213/998b1171-cf25-5152-5562-e7cd014a53e3.png"> Vim
<img height="16" alt="Visual Studio Code" src="https://qiita-image-store.s3.amazonaws.com/0/128213/1531d08a-07be-e4fa-a87f-d593462d5307.png"> Visual Studio Code

なんでも良いです。
ちなみに私はVisual Studio Codeを使っています。

## CLIの準備
準備と書きましたが何もしなくて良いです。
LinuxやMac OSであればTerminal，WindowsならCommand PromptやPowerShellが入っていますからそれを使いましょう。

エディタからCLIを呼び出せるようにしておくとさらに便利です。
AtomならPlatformIO IDE Terminalパッケージで可能ですし，Visual Studio Codeは`` Ctrl-Shift-` ``で開けます。

## Node.jsのインストール
使っている環境に合わせてNode.jsのインストールをします。
そのままインストールするのではなくnodebrewやnodistでバージョン管理できるようにしておくと良いかもしれません。
インストール方法については次の記事で詳しく書かれているので御覧ください。

* [node.jsのversionを管理するためにnodebrewを利用する](http://qiita.com/sinmetal/items/154e81823f386279b33c)
* [nodistでNode.jsをバージョン管理](http://qiita.com/satoyan419/items/56e0b5f35912b9374305)

インストールしたらCLIで`node -v` `npm -v`を実行してバージョンが表示されるか確認します。

```bash
$ node -v
v7.5.0
```

```bash
$ npm -v
4.0.5
```

# プロジェクトを設定する

## プロジェクトディレクトリを作る
プロジェクトのディレクトリを作ります。
まずは適当な場所に`modern-front-end`というディレクトリを作成しましょう。
以降`modern-front-end`がプロジェクトディレクトリになります。

今後コマンドの実行はプロジェクトディレクトリで行っていくので，予めcdコマンドでプロジェクトディレクトリまで移動しておくとスムーズです。

```bash
$ cd {プロジェクトディレクトリまでのパス}
```

## 開発用ディレクトリを作る
合わせて開発用のディレクトリを作ります。
プロジェクトディレクトリの中に`src`というディレクトリを作成します。

```
modern-front-end
|
`-- src <
```

ビルドツールを用いた開発は，開発用のディレクトリでコーディングし，ビルドすると出力用のディレクトリにファイルができあがるといった仕組みになっています。

## プロジェクトの初期設定をする
npmでプロジェクトを管理できるように初期設定をします。
プロジェクトディレクトリで次のコマンドを実行してpackage.jsonを作成します。

```bash
$ npm init -y
```

次のようなファイル構造になります。

```
modern-front-end
|
+-- src
|
`-- package.json <
```

package.jsonはプロジェクトを管理するための設定ファイルです。
開くと次のような内容になっていると思います。

```json:package.json
{
  "name": "modern-front-end",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}
```

# npmでパッケージをインストールする
ここからパッケージをインストールしていきます。
npmのインストールにはグローバルインストールとローカルインストールがあります。

グローバルインストールは，プロジェクトに関わらずCLIから実行したいパッケージをインストールします。
グローバルインストールをするには`npm install --global`というように`--global`オプションを付けます。
`--global`オプションは省略して`-g`と記述することもできます。

ローカルインストールはプロジェクトで使用するパッケージをインストールするために使います。
ローカルインストールには次のような依存関係が存在します。

|依存関係|オプション|省略形|意味|
|---|---|---|---|
|dependencies|--save|-S|jQueryなどのソースコードで利用するライブラリとして読み込むパッケージで使用します|
|devDependencies|--save-dev|-D|webpackなどソースコードで利用しないパッケージで使用します|
|peerDependencies|||パッケージのプラグインなどで依存バージョンを明示するときに使用します|
|optionalDependencies|--save-optional|-O|環境によって依存するライブラリが変わるもので使用します|
|bundledDependencies|||既存のパッケージに変更を加えてnpmには無いパッケージなどを明示するときに使用します|

`dependencies` `devDependencies` `optionalDependencies`はインストール時に指定することができます。
詳しいことは下記で解説されているのでぜひ参照してみてください。

* [ちゃんと使い分けてる? dependenciesいろいろ。](http://qiita.com/cognitom/items/acc3ffcbca4c56cf2b95)
* [package.jsonのpeerDependenciesについて調べた](http://yukidarake.hateblo.jp/entry/2016/02/16/201614)

## パッケージをグローバルインストールする
まずはグローバルインストールするものからインストールしていきます。

```bash
$ npm install --global typescript
```

typescriptパッケージはTypeScriptをJavaScriptにトランスパイルために使用します。

## インストールされたものを確認する
`npm list`でグローバルインストールしたパッケージを表示してみます。

```bash
$ npm list --global --depth=0
```

実行すると先程グローバルインストールしたパッケージが表示されます。
`--global`はグローバルインストールされているものを表示するためのオプションです。
省略して`-g`と記述することもできます。
`--depth=0`は直下のパッケージ名のみ表示するオプションです。

```
`-- typescript@2.2.1
```

ローカルインストールされているものは次のコマンドで確認できます。

```bash
$ npm list --depth=0
```

## CLIでも確認してみる
グローバルインストールしたものはCLIから実行できます。
試しにTypeScriptのバージョンを表示してみます。

`tsc -v`を実行してみましょう。

```bash
$ tsc -v
Version 2.2.1
```

パスが通りCLIからコマンドを実行できるようになっていることが確認できます。

## プロジェクトにパッケージをインストールする
ここからはプロジェクトにパッケージをローカルインストールしていきます。

```bash
$ npm install --save-dev webpack node-sass css-loader sass-loader style-loader postcss-loader autoprefixer file-loader url-loader ts-loader
```

何やらたくさんのパッケージをインストールしましたが機能は次のとおりです。

<dl>
  <dt>webpack</dt>
  <dd>アセットをJavaScriptにバンドルする</dd>

  <dt>node-sass</dt>
  <dd>SassをCSSにコンパイルする</dd>

  <dt>css-loader</dt>
  <dd>webpackでCSSを使えるようにする</dd>

  <dt>sass-loader</dt>
  <dd>webpackでSassを使えるようにする</dd>

  <dt>postcss-loader</dt>
  <dd>webpackでpostcssを使えるようにする</dd>

  <dt>autoprefixer</dt>
  <dd>CSSにベンダプレフィックスを自動で追加する</dd>

  <dt>style-loader</dt>
  <dd>webpackでバンドルしたCSSをHTMLに展開する</dd>

  <dt>file-loader</dt>
  <dd>外部ファイルとして読み込めるようにリンクする</dd>

  <dt>url-loader</dt>
  <dd>ファイルをdata URIに変換して読み込む</dd>

  <dt>ts-loader</dt>
  <dd>webpackでTypeScriptを使えるようにする</dd>
</dl>

## package.jsonを確認する
ここで一度package.jsonの中身を見てみましょう。

```json:package.json
{
  "name": "modern-front-end",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.7.7",
    "css-loader": "^0.27.3",
    "file-loader": "^0.10.1",
    "node-sass": "^4.5.1",
    "postcss-loader": "^1.3.3",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.0",
    "ts-loader": "^2.0.3",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.2"
  }
}
```

先程まではなかった`devDependencies`という項目が追加されています。
`devDependencies`の中には`--save-dev`オプションを付けてローカルインストールしたパッケージが書いてあるのがわかります。

ローカルインストールしたパッケージはpackage.jsonに記録され，プロジェクトで必要なパッケージがバージョンとともに管理されるようになります。

## node_modulesディレクトリを確認する
次にプロジェクトディレクトリの中にある`node_modules`を確認します。

```
modern-front-end
|
+-- node_modules <
| `-- * <
│
+-- src
|
`-- package.json
```

ローカルインストールしたパッケージが入っているのがわかります。

インストールしたもの以外にたくさんのパッケージが入っているのは，依存関係を持ったパッケージを一緒にインストールしているためです。

`npm`では依存関係のあるパッケージを自動的にインストールしてくれるので依存関係の管理が簡単になります。

## package.jsonから一括インストールしてみる
package.jsonで管理されているパッケージを一括でインストールすることもできます。
試しに`node_modules`をディレクトリごと削除して一括インストールしてみます。

1. `node_modules`を削除します。
2. プロジェクトディレクトリで`npm install`を実行します。

すると，package.jsonの内容を元にパッケージを一括でインストールしてくれます。
gitなどを使う場合に`node_modules`を除外して管理し，`clone`したときに`npm install`することで同じ環境を構築できるわけです。

`npm install`は`npm i`のように省略することもできます。

---

[今時のフロントエンド開発2017 (3. webpack編)](http://qiita.com/Lyude/items/7b8104418a5dd03c7d30)に続きます。