フロントエンド開発の３ステップ（npmことはじめ）

# スライド

当記事は以前勉強会でLTしたものです。
スライドは下記にあります。

http://www.slideshare.net/hashedrock/ss-46539932


# フロントエンド覚えること多すぎ問題

モダンなフロントエンド開発で、入門記事を探そうとすると、
まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。

ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが
挫折の原因になっていると感じています。

ですので、まずNode.jsをインストールした直後から、必ず使うことになる、
`npm`の機能をまず覚えておきましょう。

# フロントエンド開発で覚えるべき３つのコマンド

以下の3つだけ覚えておきましょう。

1. npm init
2. npm install
3. npm run

これだけ覚えれば、ひとまずフロントエンド開発を進めることができます。
完璧なワークフローを構築するのは、書いているアプリが大きくなってきてからでも遅くはありません。

（・・・といいつつ、あとでbrowserifyも覚える必要があります。許してください）

# なにはともあれ npm init

`npm init`とは「このディレクトリ下は 我々npmが 管理下に置く！」宣言です。

まず、プロジェクトのためのディレクトリを作成したら、
作成したディレクトリに移動してから`npm init`を実行しましょう。
いろいろ英語で聞かれますが、とりあえず全部エンターキーを押しても問題ありません。
終了すると、ディレクトリ直下に`package.json`が作成されます。

中身は大体こんな感じです。

```json
{
 "name": "hello",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": { "test": "echo "Error: no test speciﬁed" && exit 1" },
 "author": "",
 "license": "ISC" 
}
```

※あとでソースを公開する予定があれば、ライセンスだけは、ISCでいいかどうかしっかり確認してください。

# npm installでライブラリを導入する

`npm install`は、npmリポジトリからライブラリ（正確にはパッケージと呼びます）をダウンロードしてくるコマンドです。
ライブラリそのものは下記のサイトから取得されます。
https://www.npmjs.com/

2015年時点で140000件近いパッケージが登録されていました（2020年現在の実数は不明です）
登録されているパッケージをフル活用すれば、できないことはほとんどないでしょう。

npm installは、下記の書式で実行します。

```
$ npm install パッケージ名
```

以上のコマンドを実行すると、node_modulesというフォルダ下にライブラリが保存されます。
例えば、jqueryを取ってくる場合は、`npm install jquery` を実行します。

また、package.json内に、どのライブラリを取ってきたのか記述することができます。
下記のように`save`オプションをつけて実行します。

```
$ npm install パッケージ名 --save
```

省略して、下記のようにも書けます。

```
$ npm i パッケージ名 -S
```

これを実行すると、package.json内に、下記のような行が追加されます。

```json
{
  "dependencies": { "jquery": "^2.1.3" }
}
```

以後、dependencies内に入ったライブラリは、`npm install`だけで自動的にインストールすることができます。


# npmの友、browserify

[browserify](http://browserify.org/)とは、node_modules下にインストールされたライブラリを、jsから参照できるようにするツールです。
jqueryを使う際に、html内に下記のようなコードを書いた経験のある方も多いのではないでしょうか。

```html
<script src="assets/js/jquery.min.js"></script>
```

ですが、browserifyを使うと、下記のように書くことができます。

```node
var $ = require("jquery");
```

今までは、javascriptのライブラリを使う際、読み込みのためのhtmlタグを書く必要がありましたが、
browserifyを使うと、javascript上で直接ライブラリを参照することができます。
普通の言語なら当たり前の機能ですが、ブラウザ上では今までできなかった、というわけです。

browserifyを使うと、`node_modules`内のライブラリを、直接参照することができます。
また、ライブラリ同士の依存も自動で解決されます。

ということは **npm installでライブラリを持ってきて、何も考えずにrequireで読み込める** ということを意味します。
これは、使ってみると分かりますが、想像以上に強力です。

browserifyは `npm install -g browserify` でインストールできます。 `npm install -g`については後述します。


## 2020/08/07追記

2020年現在ではbrowserifyの代わりに[webpack](https://webpack.js.org/)という多機能なツールが主流となっています。
browserifyは単機能で単純なので、未だ学習用途には有効と考えていますが、
実案件ではほぼwebpackを使うことになると思います。

というわけで代わりにwebpackを使おう、という記事を書きました。

https://qiita.com/hashrock/items/3f1df615e68ee8aad9e8

記事を書いてから5年が経ち、`require`の代わりに`import`という仕様も生まれています。
古い仕様は徐々に置き換えられていく見込みですが、依然requireは利用可能なので
一旦当記事で古いやり方を学習したあとに、新しい仕様を追ってみてください。

# ビルドは npm run

`npm run`とは、`npm scripts`と呼ばれるタスク実行機能を呼び出すコマンドです。
機能は一つしかありません。

 * package.json内に書かれたシェルスクリプトを実行するだけ

これだけです。

使用例を挙げましょう。
例えば下記のようにpackage.json内に書いておきます。

```json
{
  "scripts": {
    "build": "browserify src/main.js > build/bundle.js"
  }
}
```

`build`は、今回適当に決めたタスク名です。
そして下記のコマンドを実行します。

```
$ npm run build
```

すると、下記のコマンドが実行され、実行結果が表示されます。

```
browserify src/main.js > build/bundle.js
```

書いた通りのコマンドが実行されるだけですね。

また、`npm run`だけを実行すると、現在どんなタスクが`package.json`内にあるかを一覧してくれます。

使い方としては、例えば、下記のようなタスクを一通り用意しておくと便利です。

 * npm run build
 * npm run watch
 * npm run serve

こうしておくと、他人にプロジェクト概要を説明するとき

**「とりあえずnpm installしてから、 npm runして何ができるか確認しといて」**

だけで済むわけです。

`npm run`自体は、それほど便利な機能とは言えません。いちいちコマンドを実行するのも、面倒なものです。
ですが、他人がプロジェクトを初めて見たときに把握しやすくするための「お作法」といったところでしょう。


# npm scriptsをまとめて実行する

npm scriptsでは、基本的にはワンライナーを書くことになります。ある程度の長さになってきたら、gulpなどへの移行を検討することになります。

ただし、複数のnpm scriptsをまとめて実行できれば、それで十分というケースも良くあります。

個人的によく使っているのは、下記記事の方が作られている「[npm-run-all](https://github.com/mysticatea/npm-run-all)」というツールです。

http://qiita.com/mysticatea/items/e9bf581fb28c5f1cd660

このツールを使うと、例えば「build:js」「build:css」という名前をつけた２つのスクリプトを「npm-run-all build:*」のようにまとめて実行することができます。


# 余談：npm install -gで便利ツールをインストールしよう

browserifyの項で、`npm install -g`に軽く触れましたが、
このコマンドは、ターミナルで利用できる便利ツールをインストールするために使います。

例えば、簡単な確認用のhttpサーバを立てたい場合には、下記のコマンドを実行します。

```
$ npm install -g http-server
```

それから、下記のように実行します。

```
$ http-server
```

このようなnpmからインストールできる便利ツールは数多くありますので、
ぜひ探してみてください。
私の知っているものについては、下記にまとめておきました。

https://gist.github.com/hashrock/7fdf1b937e1eb5de796d


# まとめ

* とりあえず何も考えずnpm init実行してから
* npm installで好き放題ライブラリをぶちこみ（ライブラリを読み込むためにbrowserifyも使用し）
* npm runでビルド用コマンドを実行する

あっ、４ステップだ。
許してください。

以上です！