Angularの周辺ツールについて調査してみた
周辺ツール（Node.js、Bower、Typings、Gulpなど）の背景、特徴を調査し、アウトプットする。
Node.js（サーバサイドJavaScript）
Node.jsとは
JavaScriptはブラウザ上だけではなく、サーバサイドでも動く。PHPやJavaなどと同じような使い方ができるということだ。
サーバサイドJavaScriptと呼ばれるが、その中でも代表的なのがNode.jsだ。現状は、他にそこまで有名なものもないので、「Node.js = サーバサイドJavaScript」だと認識しておけばいいだろう。
なぜサーバサイドでJavaScript？
これほど注目を浴びている理由を端的にお伝えしよう。
「クライアントもサーバサイドも同じ言語で書けたら楽じゃない？」
これが最大の理由だ。
近年、JavaScriptがWebの表舞台のど真ん中に立つようになった。Flashが姿を消し、パソコンの性能が年々上昇しているのがその理由だ。リッチなサイトやWebサービスがどんどん登場している。
サーバサイドがよくわからないWebデザイナーの人たちも、JavaScriptは触らざるを得なくなっており、「JavaScriptならやったことある！」という状態になっている。
だからこそ、サーバサイドプログラムもJavaScriptで書けると言われると、「なにそれ魅力的ですね」となり脚光を浴びているわけだ。
JavaScriptでサーバサイドもクライアントサイドも書けたら効率的だ。JavaScriptを書けるエンジニアだけを集めたらいい。
Node.jsの強み
下記２点で強みを持っている。
- リアルタイムな反応が必要なWebの分野
- 多数のアクセスがある場所
①リアルタイムな反応が必要なWebの分野
Facebookのメッセージ、Googleスプレッドシート、LINE、Twitter、instagram、snapchat、Paypalなどがリアルタイム性が高い例だ。
しかし、例えばLAMP開発環境（※1）でチャットアプリケーション開発することは、簡単ではない。
なぜなら、下記問題の為に、ユーザーがチャット画面を見るまでに必要以上の時間がかかってしまっていたからだ。
- webブラウザとWebサーバ側が常時接続すること
- データを保存し続け、Webブラウザ側に表示し続ける必要があること
しかし、Node.jsでは「新しい情報が来た！」と知らせてくれる機能を割と簡単に実装できる。お知らせが来たら、それを反映すればいい。チャットサービスなどがすんなりと作れるのだ。
※1 LAMP環境ってなに？Webサービスを作るための環境構築を理解しよう
②多数のアクセスがある場所
Node.jsの第一目標は、「スケーラブル（拡張可能）なネットワーク・プログラムを作成するための簡単な方法を提供すること」である。
JavaやPHPのようなプログラムでは、接続ごとに新しいスレッドが作られる。8GBのRAMで計算すると、最大ユーザー数は5000名以下しかアクセスができなくなる。これを増やそうと思ったら、コンピュータを増やすしかない。
Node.jsはこの問題を解決する数少ないプログラミング言語だ。シングルスレッドで非同期処理を行い、この問題に対応できる。
ただし、単純な処理以外にはそこまで強いイメージもない。一概に速度が速いとは言えないところがまた難しい。
Node.js上で動くフレームワーク5選
次にNode.js上に動くフレームワークについて紹介したい。
①AngularJS
AngularJSは、Googleとコミュニティによって開発されたMVCフレームワークです。双方向データバインディングという機能があり、モデルとinputフィールドをバインドすることによって、モデル変更やユーザー入力によるフィールド変更など双方向のデータバインディングが可能です。JavaScriptはもちろん、Node.jsでも使用出来ます。
②Backbone.js
Backbone.jsは、デザインパラダイムに基づいたJavaScriptのライブラリ兼フレームワークです。グローバル変数を排除したり、モデルの保持が可能です。
③Express
Expressは、軽量かつシンプルなフレームワークです。MEANスタック(MongoDB、Express、Angular、Node.jsの環境)でも使用されており、Node.jsをあまり隠さず使用するフレームワークとして有名です。
④Sails
Sailsは、Express をベースにRubyのフレームワークであるRailsライクな、フルスタックフレームワークです。短期間で開発しなければいけないような場合に、威力を最大限に出来るフレームワークです。
⑤Meteor
Meteorは、1画面において複数の処理を行うアプリであるSPA向けのフルスタックフレームワークです。リアクティブアプリケーションを少ないコードで構築することが可能です。
Typings（TypeScript型定義管理ツール）
TypeScriptの型定義ファイルを管理するツールです。
以前（2016年1月頃まで）は、tsdが台頭していたみたいでしたが、 tsdが非推奨となったため typingsを使用する人が増えました。
GitHubから型定義を取得してくるしかなかったtsdと違って、npmやbower、githubプロジェクト、ローカルファイルシステムやhttp経由で型定義ファイルを取ってこれるのが特長です。DefinitelyTypedもサポートしているので、tsdから移行して困ることはありません。
Bower（依存性管理／パッケージマネージャー）
Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。
パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。
具体的には、各パッケージにある設定ファイル"bower.json"に依存パッケージが記述されており、インストール時に依存パッケージを含めて読み込む仕組みとなっています。
Grunt（ビルドツール／タスクランナー）・・・番外編
⇒シリーズ化されている
Gruntとは、自動化のためのビルドツール（タスクランナー）です。 （Ant,Maven,Gradleのようなもの。） Node.jsを使用し、ビルド用のスクリプト（Gruntfile.js）をJavaScriptで記述してタスクを定義します。 また、「プラグインモジュール」を使用して、タスクを独自に定義でき、任意の処理を行えます。
Node.js上で動作しているため、Webサーバーを使用することやライブラリロード（ファイル更新を検知して任意のタスクを実行）も可能です。
BowerとGruntの違い
GruntはSass（cssのプログラムっぽくしたもの）やCoffeeScript、TypeScriptのコンパイルやテスト実行などのタスクを自動化してくれるツールで、BowerはCSS/JavaScriptのパッケージ管理ツールです。
Bowerは指定したバージョンのパッケージのダウンロードまではやってくれるけれど、GitHubのリポジトリ毎ダウンロードされるものもあるようで、必要なファイルの抽出とかまではやってくれない。そこで、GruntのタスクでBowerの実行からファイルの抽出までを自動化してているのが下記のページ。
GruntとBowerを使ってWeb開発用のテンプレートを作成する
さらに、Yeomanという快適な開発ワークフローを提供してくれるツールもあります。
Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」（「今風のWebアプリのための土台／基盤を作ってくれるツール」）とのことです。
Yeomanを使うと、近ごろ複雑化しつつあるさまざまなフロントエンドプロジェクトのひな型を、対話形式のコマンドで簡単に生成できます。
またYeomanは、「Grunt」「Bower」「Yo」の、3つの要素から構成されています。「Yo」とはプロジェクトのひな型生成ツール、「Bower」はフロントエンドライブラリの依存性管理ツール、「Grunt」はビルドツールです。これら3つのツールを統合して、一連のワークフローを提供するのがYeomanです。
Gulp（ビルドシステムヘルパー）
gulpはNode.jsをベースとしたビルドシステムヘルパーです。Gruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができます。gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、ファイルの処理をストリームで行うというところです。この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。
ビルドシステムヘルパーとタスクランナーの違い
先に登場したタスクランナーのGrunt、ビルドシステムヘルパーのgulp、両者の目的は似ています。どちらも、いろいろな機能（プラグイン）を使い、目的とする成果物を求める一連の処理（タスク）を実行しますが、そのアプローチは少々異なります。
Gruntの場合、タスク＝プラグインといった感じに、その単一のタスク（プラグイン）を実行させるのが主な役割です。単一のタスクをうまいこと組み合わせて実行することで、ビルドという大きい目標に辿り着くというアプローチです。
gulpの場合、プラグインはあくまでも入力に対して処理を行うためのものです。gulpのタスクはGruntでいうところのビルドに近いものです。タスクの中でいろいろなプラグインを組み合わせることで、タスク＝ビルドを行うといったアプローチを取っています。プラグインを容易に組み合わせられるので、柔軟なタスクを作成できるとともに、タスク同士の依存関係を極力減らすことが可能です。
ストリームによる処理の利点
gulpはファイルをストリームとして扱いながら処理を行います。
ファイルに対してコンパイル＞プレフィックス付与＞圧縮と、流れるように処理を行い、最後にファイルを書き出します。
次の処理へ次の処理へと渡すので複数の処理を簡潔にまとめることが可能で、I/Oによる不要な待ち時間が発生しないのも強みです。
手続き的な記述と宣言的な記述の違い
GruntではタスクをJSON形式で宣言的に記述していきます。宣言的な記述はタスクの内容がパッと見でわかりやすい反面、タスク同士を組み合わせるのが難しいです。タスクが増えていくと、それぞれの関連性などを把握しきれなくなります。
一方、gulpでは処理したファイルをストリームによって次の処理に渡すことで、手続き的に記述することができます。「アレをしてからコレをする」というタスクをわかりやすく、より簡潔に書くことができます。gulpのAPIはたいていコールバック関数を取れるようになっているので、タスク実行後に何かする、といったものもわかりやすく書くことができます。gulpではタスクと処理を行う機能とが分離できることで、タスクの持っている役割をより明確にすることができます。
