素早くプロトタイピング!npm, Browserifyなどを利用したJavaScriptプロトタイピング[準備編]

こんにちは、つみきのフロントエンドエンジニアの佐藤です。 今回はブラウザで簡単なプロトタイピングを素早く行うための1つの方法をご紹介してみたいと思います。

まず、プロトタイピングとはどのようなものを指すでしょうか。wikipediaから引用します。

ソフトウェアプロトタイピング(英: Software Prototyping)とは、将来完成する予定のソフトウェアの不完全なモデル(プロトタイプ)を作成することおよびその過程を意味する。

ソフトウェアプロトタイピング - Wikipedia

あまりブラウザ JavaScript では馴染みないかもしれませんが、デモを素早く簡単に作成する際に有用かと思いますので、今回はその一例をご紹介します。


今回の目的は、

  • npm の資産を利用
  • 素早さと手軽さを意識し、 Browserify でビルド
  • Browseify 用の簡易ローカルサーバツールを利用
  • タイプ量削減のため CoffeeScript を利用
  • 小さいモジュールを複数組み合わせて組み立てていく

のようなものです。

そして作成するものは以下のようなシンプルなスライド機能を想定します。

まずは準備編としまして、すすめていきたいと思います。

リポジトリ

サンプルとしてリポジトリを用意しましたので、以下でプレビュー可能です。

https://github.com/sugarshin-sandbox/prototyping-example

npm, Browserify

Node のパッケージレジストリの npm の資産を利用し、 CommonJS の require スタイルで利用します。

npm には多数のパッケージが公開されていて、 Browserify や webpack などのツールの台頭のおかげで、ブラウザ用のパッケージも公開され、簡単に利用可能になっています。


Browserify に関しましては、当ブログの過去記事もご参照いただければと思います。

  1. npm install package-name でインストール
  2. var packageName = require('package-name'); で利用

という、この手軽さと管理のしやすさは、使いはじめると想像以上に支援は大きいかと思います。

準備

それでは、まずはプロトタイピング用のディレクトリを用意してそこに移動しましょう。

mkdir prototyping
cd prototyping

次に package.json も用意します。(Nodeはインストール済みとします)

npm init

いくつか質問がでますが、取り急ぎ、すべて Enter で OK です。

エントリポイントとなる .coffee ファイルもここで用意しておきます。

echo '# main.coffee' > main.coffee

パッケージ

それでは、作成に必要なパッケージをインストールしましょう。

npm install -D budo coffeeify cssify garnish watchify
budo 以前の記事でもご紹介した beefy のような、 Browserify 用のローカルサーバをたてるツールです。 beefy よりも機能はシンプルです。
coffeeify Browserify で .coffee ファイルを require して利用可能にする transform です。
cssify Browserify で .css ファイルを require して利用可能にする transform です。 require('./style.css'); で <head> 内に <style> タグで対象 css を埋め込んでくれます。このようなプロトタイピング時には便利かと思います。
garnish ndjson という改行区切りフォーマットの json 亜種のパーサ + 形成ツールで、 budo で詳細ログを出力する際、 ndjson 形式で出力されるので、これを利用し、見やすい形で出力させます。
watchify Browserify の watch 機能提供ツールです。

npm scripts

package.json 内の "scripts" を編集します。

{
  "scripts": {
    "start": "budo main.coffee -v -- -t coffeeify -t cssify --extension='.css' | garnish"
  }
}

budo にエントリポイントとなる .js (.coffee) ファイルを指定します。オプションはざっと以下が指定可能です。

Options:
  --help, -h       show help message
  --port           the port to run, default 9966
  --host           the host, default "localhost"
  --dir            the directory to serve, and the base for --outfile
  --serve          override the bundle path being served
  --live           enable LiveReload integration
  --live-plugin    enable LiveReload but do not inject script tag
  --live-port      the LiveReload port, default 35729
  --verbose, -v    verbose timing information for re-bundles
  --poll=N         use polling for file watch, with optional interval N
  --no-stream      do not print messages to stdout
  --no-debug       do not use inline source maps

Browserify のオプションは -- 以降に指定します。 パイプ( | )で出力結果を garnish に渡してログを形成してもらいます。

これで npm start でローカルサーバが立ち上がり、watchify でファイルの変更を監視し適宜ビルドしてくれます。

.html ファイルがなければ、budo 標準のものを利用してくれるので、用意も不要です。

npm start

> prototyping-example@ start /Users/name/path/prototyping
> budo main.coffee -v --live -- -t coffeeify -t cssify --extension='.css' | garnish

 info budo: Server running at http://localhost:9966/ 
 info budo: main.js (bundle) 532ms

ブラウザで確認します。

http://localhost:9966/

まとめ

これでコーディング開始準備が整いました。

次回、実際にスライド機能を実装する際に利用する小さなモジュールをいくつかインストールしてコーディングしていきたいと思います。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ