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

スライド

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

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

モダンなフロントエンド開発で、入門記事を探そうとすると、
まず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が作成されます。

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

{
 "name": "hello",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": { "test": "echo "Error: no test specified" && 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内に、下記のような行が追加されます。

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

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

npmの友、browserify

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

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

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

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という多機能なツールが主流となっています。
browserifyは単機能で単純なので、未だ学習用途には有効と考えていますが、
実案件ではほぼwebpackを使うことになると思います。

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

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

ビルドは npm run

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

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

これだけです。

使用例を挙げましょう。
例えば下記のようにpackage.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」というツールです。

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

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

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

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

$ npm install -g http-server

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

$ http-server

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

まとめ

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

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

以上です！