はじめに

本編では今時のフロントエンド開発2017 (1. 愚痴編)に続き開発環境の構築をしていきます。

おしながき

今時のフロントエンド開発2017 (1. 愚痴編)
今時のフロントエンド開発2017 (2. 構築編)
今時のフロントエンド開発2017 (3. webpack編)
今時のフロントエンド開発2017 (4. TypeScript編)
今時のフロントエンド開発2017 (5. もっと効率よく編)

開発環境の構築

ナイスなエディタ

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

Atom
Brackets
Emacs
Lime Text
Sublime Text
Vim
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でバージョン管理できるようにしておくと良いかもしれません。
インストール方法については次の記事で詳しく書かれているので御覧ください。

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

$ node -v
v7.5.0

$ npm -v
4.0.5

プロジェクトを設定する

プロジェクトディレクトリを作る

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

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

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

開発用ディレクトリを作る

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

modern-front-end
|
`-- src <

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

プロジェクトの初期設定をする

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

$ npm init -y

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

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

package.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はインストール時に指定することができます。
詳しいことは下記で解説されているのでぜひ参照してみてください。

パッケージをグローバルインストールする

まずはグローバルインストールするものからインストールしていきます。

$ npm install --global typescript

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

インストールされたものを確認する

npm listでグローバルインストールしたパッケージを表示してみます。

$ npm list --global --depth=0

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

`-- typescript@2.2.1

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

$ npm list --depth=0

CLIでも確認してみる

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

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

$ tsc -v
Version 2.2.1

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

プロジェクトにパッケージをインストールする

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

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

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

webpack: アセットをJavaScriptにバンドルする
node-sass: SassをCSSにコンパイルする
css-loader: webpackでCSSを使えるようにする
sass-loader: webpackでSassを使えるようにする
postcss-loader: webpackでpostcssを使えるようにする
autoprefixer: CSSにベンダプレフィックスを自動で追加する
style-loader: webpackでバンドルしたCSSをHTMLに展開する
file-loader: 外部ファイルとして読み込めるようにリンクする
url-loader: ファイルをdata URIに変換して読み込む
ts-loader: webpackでTypeScriptを使えるようにする

package.jsonを確認する

ここで一度package.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をディレクトリごと削除して一括インストールしてみます。

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

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

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

今時のフロントエンド開発2017 (3. webpack編)に続きます。