Angular2 WEB WEBフロントエンド開発

SystemJSを使ったWEBフロントエンド開発

投稿日:2017年4月9日 更新日:

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロントエンド開発においては、モジュール分けして開発する事が前提であり、大量のscriptタグを記述する必要性やモジュールの依存関係により記述順番も非常に重要になります。そのため、モジュールの依存関係を解決するためのモジュール管理ツールは非常に重要な位置づけになっています。

 

SystemJSの概要

SystemJSはJavaScriptファイルの依存関係を解決(『モジュール解決』)するためのモジュール管理ツールで、ES6/AMD/CommonJS/UMDのモジュールをサポートしているモジュールローダです。
例えばa.component.tsファイルで同じフォルダにあるb.component.tsのクラスをimportするとき、「import {xxx} from './a.component'」のように記述しますが、 同じ場所には同じファイル名の.tsファイルと.jsファイルが存在している場合が多いと思います。TypeScriptのコンパイラはtsファイルからjsファイルの変換をしても、ブラウザで実行するときにファイルが見つからないエラーが発生します。これを解決するためには後述するpackagesのdefaultExtension指定が必要になります。また、Lodashのようなライブラリをimportしようとするとき、「import * as _ from 'lodash'」のように書きますが、 lodashモジュールがどこに存在するかの指定がないとブラウザで実行するときにファイルが見つからないエラーになります。このようにモジュール解決を行う管理ツールの1つがSystemJSになります。

 

SystemJSの説明

import文の説明

モジュールをロードするのに使うメソッドで、import()はPromiseを返します。
Promiseがモジュールのオブジェクトで解決すると、then()のコールバックが実行されます。

 

Configuration API(systemjs.config.js)の説明

baseUrl
  • ロードするモジュールの起点を示すパスです。
  • baseUrlで設定するパスからの相対パスでモジュール名を解決しようとします。
  • ソース内で明示的に相対パスや絶対パスが指定された場合はそちらを優先します。
  • baseURL、paths、mapをうまく組み合わせて実体ファイルまでのパスを正確に指定しておかないと、 ブラウザで実行するときにファイルが見つからないエラーになります。

例)下記の場合は、Load module-A from /modules/module-A

「/」を指定すると、この後の全てのパス指定はルートが基準となる。
baseURLを省略するか、又は、「.」に設定すると、呼び出し元のindex.htmlが存在するパス(例:(root)/src/)がbaseURLとなる。

 
paths
  • map定義と類似。 ワイルドカードが使えます。
  • baseURL、paths、mapをうまく組み合わせて実体ファイルまでのパスを正確に指定しておかないと、 ブラウザで実行するときにファイルが見つからないエラーになります。
  • pathsプロパティで「node:* : ../node_modules/*」と指定すると、mapプロパティ内のnode:を../node_modules/で置き換えられる。
map
  • モジュールの場所を設定する。
  • import文のfrom句以降のエイリアスを定義する。
  • baseURL、paths、mapをうまく組み合わせて実体ファイルまでのパスを正確に指定しておかないと、 ブラウザで実行するときにファイルが見つからないエラーになります。
  • mapで「lodash : node:lodash/index.js」と指定すると、 System.import('lodash')と書いたときに(root)/node_modules/lodash/index.jsを参照することになる。

packages
  • モジュールのロード属性(例:ファイル名、拡張子、依存関係等)を定義
  • defaultExtension: 'js'と指定している場合は、フォルダにtsファイルとjsファイル が両方存在する場合、指定と一致するjsファイルを参照する。
meta
  • 依存関係を記述できる。
transpiler
  • モジュールをロードした際に使用するトランスパイラを指定する(実行時コンパイルに使いたいライブラリを指定する)
  • 「traceur」(デフォルト)や、「typescript」、「babel」を指定する
  • 特に指定しない場合はfalseにする。
typescriptOptions
  • transpilerにtypescriptを使用した際の、TypeScriptコンパイラのオプション

 

Angularjs2の公式チュートリアルにあるクイックスタートのConfiguration APIの説明

baseUrl
  • baseURLを省略しているので、呼び出し元のindex.htmlが存在するパス「(root)/src/」がbaseURLとなる。
paths
  • 'node_modules/'のエイリアスとして'npm:'を定義している。
map
  • 'app'はappフォルダ配下を定義
  • angularとそれ以外で使用されたライブラリは、'npm:'でパスを指定
packages
  • appフォルダ配下のデフォルト拡張子とローダ定義
  • rxjsモジュールのデフォルト拡張子を定義

 

 

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

 

スポンサーリンク

スポンサーリンク

-Angular2, WEB, WEBフロントエンド開発

執筆者:

関連記事

angular-cliでプロジェクト作成した主要なファイルを説明

当セクションではangular-cliの「ng new」コマンドで自動作成されたプロジェクトのスケルトンの主要ファイルについて説明したいと思います。angular-cliでAngular2の開発環境を ...

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

Angular-cliのngコマンドの説明

angular-cliのngコマンドについて説明したいと思います。 コマンド 説明 ng new アプリ(プロジェクト)の雛型を作成します。 ng serve プロジェクトをビルドして、開発用のWEB ...

SystemJSのConfig構成について

SystemJSのConfig構成はsystemjs.config.jsファイルで設定される事が多いと思います。今回はAngular2の公式チュートリアルにあるクイックスタートで使用されているsyst ...

Angular2のコンポーネントについての説明

当セクションではAngular2のコンポーネントについて説明します。Angular2はコンポーネント指向なので、いつくかのコンポーネントを作成し、そららのコンポーネントを組み合わせてアプリケーションを ...