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フロントエンド開発

執筆者:

関連記事

Javascriptのアロー関数について

  アロー関数 ES2015(ES6)の新構文の一つ 無名関数の省略記法。 無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要。 =>(矢)を使 ...

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

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...

TypeScriptのモジュールについて

モジュールについてまとめました。 (内部モジュール) 共通の関数などをグローバル空間に記載したくない場合などに使用する。   (外部モジュール) 別ファイルとして外部にある機能を利用する仕組 ...

SEO対策のまとめ

SEO対策は良く言われるように、(1)クローラーの巡回フェーズ、(2)ページのインデックス登録フェーズ、(3)検索順位決定フェーズの3つのフェーズで考える必要があるようです。SEO対策は様々なWEBペ ...