【Angular2】npm installしてるパッケージの簡単な説明

Angular2の各所にあるサンプルをみていると、

npm i -D typescript browserify
npm i -S angular2 es6-promise es6-shim@^0.33.3 reflect-metadata rxjs zone.js

みたいな感じで、npm install(node.jsのパッケージ管理。composerみたいなもの)したものを呼び出したりしていますが、これって何のパッケージだろう的なものがちょいちょいあるので、ブログにまとめておきます。

1. npmのコマンド

もうAngular2をさわっている人には必要ないかもしれませんが、おまじない的に入力している人向けに、どういうコマンドかを簡単に説明しておきます。

$ npm init

現在のディレクトリに、package.jsonを作成します。composer.jsonと同じように、インストールするパッケージ群の記録場所だと思ってもらったら大丈夫です。ちなみに、こんなjsonファイルが作成されます。

{
  "name": "(フォルダ名)",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ npm i / $ npm install

パッケージを指定してインストールします。例えば、

npm i typescript browserify

だと、「typescript」と「browserify」というパッケージをインストールするということです。これを行ったあとで、先ほどのpackage.jsonをみると、そこに追加しているのが確認できるはずです。

$ npm i / $ npm install の引数

例えば、 -g をつけて実行しますと、現在のディレクトリではなく、グローバルにインストールします。-Sをつけると本番環境に入って、-Dをつけると開発環境に入る、とかいろいろ引数があります。詳しくは、こちらをご覧ください。
 

2. パッケージ

では、これって何だろうというパッケージをみていきます。Angular2をきっかけにして、nodeを入れた人にとってはさっぱりだったのですが、nodeで開発してる人にとっては当たり前なのかな。

systemjs

CommonJS(ローディングや名前空間、スコープの問題を解決するモジュール)などのモジュールをロードするパッケージ。TypeScriptもそういったモジュールのひとつで、TypeScriptをNode.jsに読み込ませたりもする。(参考:TypeScriptで複数ファイル構成する2つの方法)
あと、systemjsを使うと、コンパイルなしで、TypeScriptなどのalt.jsを使うという意味のわからない技も可能となる。

typescript

Alt.jsのひとつであり、Angular2で正式に採用されているTypeScriptコンパイラ。TypeScriptで書いたコードを、このコンパイラで変換して普通のJavaScriptを出力し、それを使う。TypeScriptがどんな言語かは、typescriptlang.orgのライブ変換ページをさわってみると何となくわかりますのでおすすめ。

browserify

var myModule = require('myModule');
import {Component} from "angular2/core";

といった記述が可能となる。内部的には、呼び出し順の依存関係を解決してくれて、適切な順番で呼び出してくれるようになるらしい。Require.jsの後継者。

es6-shim

ES6(alt.js)とES5(普通のJavaScript)の互換性をつくる。具体的にどういう互換かは、githubに一覧があります。

es6-promise

非同期の順番を決める。非同期で処理していると、Aの処理はBの処理の返り値が帰ってきてからやって!みたいなことがよくあるけど、それを書きやすい形で提供してくれる。jquery-deferredを使ったことがある人にはイメージしやすいかも。
promise-then的なことができるようになるパッケージ。

reflect-metadata

メタプログラミング(Wikipedia)向けのメソッドライブラリ。

rxjs

非同期処理やイベント処理を簡単に書けて、エラー処理などのハンドリングも容易になるパッケージ。

zone.js

ローカルストレージとして、非同期関係の処理をCRUDするっぽい。バインディングの変更探知での処理をかを担ったりしているのかな。
ちょっとよくわからず、原典(angular/zone.js)にあたっていただければと思います。
 

3. まとめ

Angular2公式サイトの「ARCHITECTURE OVERVIEW」に、以下の記述があります。
 

The framework consists of several cooperating libraries, some of them core and some optional.

 
これだけのパッケージ群を使いながら、小さくも大きくも開発できるというところが、モダンなJavaScriptフレームワークという気がしますよね。
 
それでは、また。

お問い合わせ