フロントエンド開発の3ステップ(npmことはじめ)

  • 830
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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

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

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

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

ですが、ほとんどの初心者が最初に書くウェブアプリは、
gulpやgruntが必要な規模ではないと考えています。

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

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

以下の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年4月現在、140000件近いパッケージが登録されています。
登録されているパッケージをフル活用すれば、できないことはほとんどないでしょう。

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については後述します。

ビルドは 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」というツールです。

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

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

npm scriptsのサンプル集

※下記ツールは内容が古くなりつつあるため、参考程度にとどめてください。

とはいえ、npm scriptsに何を書けばいいかわからないという方も多いと思いますので、
サンプル集を取得するツールを自作してみました。

https://github.com/sushicorp/sushipm

よければ、ぜひ使ってみてください。

余談: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でビルド用コマンドを実行する

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

以上です!