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にng2-bootstrapを導入する

Angular2の開発でbootstrapを使用するにはng2-bootsrapを導入します。ng2-bootsrapはbootstrapの機能をディレクティブやコンポーネントとして提供してくれます。 ...

Apache2のモジュール設定

Apache2のモジュール設定について Apache2はデフォルトでGCIモジュール(CGID)が無効になっている。 Apache2のモジュールの有効化/無効化の設定は、a2enmodコマンド(有効化 ...

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみた

Angularjs2の公式チュートリアルにあるクイックスタートをテストしてみました。簡単にAngular2の開発環境を構築して、開発体験を行う事ができました。     1.事前準備 ...

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

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

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