Go to Qiita Advent Calendar 2024 Top
LoginSignup
225
236

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@hiroiku

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

Last updated at Posted at 2017-03-27

はじめに

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

おしながき

開発環境の構築

ナイスなエディタ

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

Atom Atom
Brackets Brackets
Emacs Emacs
Lime Text Lime Text
Sublime Text Sublime Text
Vim Vim
Visual Studio Code 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をディレクトリごと削除して一括インストールしてみます。

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

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

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

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

225
236
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
225
236

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?