Angular2の用語集

Angular2（WEBフロントエンド開発）に関する用語集です。私なりの解釈を記述しました。

 

Node.js
  • サーバー・サイドの JavaScriptの実行環境を言われていますが、最初の方はピンとこないと思います。angular-cli（Angular2）を動作させるために必要な環境を考えれば良いと思います。
  • JavaScriptエンジンがGoogleのV8で速い。
  • Node.jsは一部のCommonJS仕様（moduleとassert）を実装している。
  • あと、npmを使うためにもNode.jsが必要になります。
 npm
  • Node.jsに付属するモジュール管ツールです。
angular2-cli
  • angular-cliはAngular2のCLI開発環境が整備されている開発ツールです。雛形の自動生成、更新ファイルを自動ロードなどの機能が含まれています。
  • angular-cliを導入しなくても、gulpだgruntだ・・・などを組み合わせて開発環境を構築する事は可能ですが、angular-cliを導入するだけで様々な環境が一度に構築できて非常に便利です。
CommonJS
  • モジュール管理（exports/requireという仕組み。exportsのプロパティに追加した関数は、requireを使って呼び出せる。）、標準入出力、File I/OなどのJavaScript環境の標準的なAPIの仕様です。
  • 当初はServerJSというサーバサイドのAPI仕様だけを定めていましたが、その後、標準的な仕様策定を行う事でCommonJSに改名。
  • CommonJSのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールシステムがBrowserifyです。
Browserify
  • JavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。
  • CommonJSのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールシステム。
  • 実際にブラウザが実行するファイルは、Browserifyによってビルドされたものになる。
AMD
  • Asynchronous Module Definitionの略で、モジュールを非同期でロードする仕組みの定義したAPIの仕様です。
  • CommonJSのModules/AsynchronousDefinitionで、仕様を決めていました。
  • AMDのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールシステムがRequireJSです。
RequireJS
  • JavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。
  • AMDのモジュール仕様に沿って書いたJavaScriptを、ブラウザ上で動かせるようにしたモジュールシステム。

  • フロントエンドでもCommonJSスタイル(+Browserify or webpack)で書くほうが主流になってきている。

SystemJS
  • JavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。
  • SystemJSはES6/AMD/CommonJS/UMDのモジュールをサポートしているモジュールローダです。
  • SystemJSを使うことでSystemオブジェクトが利用できるようになります。
  • angular.ioのQUICKSTARTではSystemJSを利用したコンパイル環境、CLI QUICKSTARTではwebpackを利用したコンパイル環境を提供しています。
webpack
  • JavaScriptファイルの依存関係を解決するためのモジュール管理ツールです。
  • webpackはBrowserifyやRequireJSやよりも後発のモジュールシステム。
  • Browserifyと同様に、ビルドプロセスで依存関係を解決する。
  • CommonJSとAMDの両方のスタイルを同時にサポートするのが特徴。
  • angular.ioのQUICKSTARTではSystemJSを利用したコンパイル環境、CLI QUICKSTARTではwebpackを利用したコンパイル環境を提供しています。
ES6（ES2015）
  • Class構文やimport/export構文の追加
  • 全ブラウザで対応しているわけではないため、Babel等のトランスパイラを利用してES6で書いたコードをES5のコードにトランスパイル（変換）する必要がある。
Typings
  • TypeScriptの型定義ファイルを管理するツール（パッケージ）です。
  • 以前はtsdですが、tsdが非推奨になったので、Typingsを使用します。
  • TypeScript 1系ではTypingsを使うことが推奨されています。
  • TypeScript 2.0からは、npmのみで型定義ファイルが管理できます。
  • d.tsファイルはTypeScript用の型ファイル(拡張子)です。
  • 型定義ファイルを組み込むことで、TypeScriptからJavaScriptライブラリを利用できるようになるだけでなく、タイプ時にコード補完／ツールヒントが有効になる。
tslint
  • TypeScriptのソースコードを静的に解析して潜在的な問題を検出してくれるコード品質管理ツール（パッケージ）です。
  • tslint.jsonは解析のルール定義ファイルです
 Jasmine
  • テスト駆動開発（ビヘイビア駆動開発）のJavaScriptのテストフレームワーク
core-js
  • TypeScriptで出力したES5ソースの中でES2015 Promise, Collectionsを動かすために必要なpolyfillです。
  • Polyfillとはレガシーブラウザであってもモダンブラウザと同等の機能を提供する方法のことです。
zone.js
  • 非同期処理のライブラリツール
CORS（Cross-Origin Resource Sharing）
  • クロスドメインアクセスを安全に実現する仕様です。
  • ブラウザに実装されている”同一生成元ポリシー”という制約により、WEBページは自分を生成したドメイン以外のドメインのサーバと通信することはできない事が問題となります。対応の１つとしてJSONPを使う方式がありますが、同一生成元ポリシーを従わないため、悪意を持った第三者からの攻撃のリスクが高くなる可能性があります。
JSONP（JSON with padding）
  • クロスドメインアクセスの問題に対応する方法の１つで、HTMLのscriptタグ、JavaScript（関数）、JSONを組み合わせで対応を実現します。
  • HTMLのscriptタグのsrc属性には別ドメインのURLを指定することができる点を利用して、別ドメインのサーバからデータを取得することを可能にする方法です。
  • 同一生成元ポリシーを従わないため、悪意を持った第三者からの攻撃のリスクが高くなる可能性があります。
SourceMap
  • JavaScriptのSourceMapとは、コンパイル前後の対応関係を記したファイル、Json形式で記述されています。主に、コンパイル後にブラウザでのデバッグ作業に使用されます。

 

 

以下、参考にさせて頂いたページです。ありがとうございました。

 

投稿日：2017年3月7日 更新日：

執筆者：