スライド
当記事は以前勉強会でLTしたものです。
スライドは下記にあります。
フロントエンド覚えること多すぎ問題
モダンなフロントエンド開発で、入門記事を探そうとすると、
まずwebpackやTypeScript, Babelによるビルド環境構築から始まる記事が多くヒットします。
ですが、Node.jsの初心者がいきなり複数のツールを習得しようとすることが
挫折の原因になっていると感じています。
ですので、まずNode.jsをインストールした直後から、必ず使うことになる、
npmの機能をまず覚えておきましょう。
フロントエンド開発で覚えるべき３つのコマンド
以下の3つだけ覚えておきましょう。
- npm init
- npm install
- 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でビルド用コマンドを実行する
あっ、４ステップだ。
許してください。
以上です！