SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

次世代Webアプリケーションフレームワーク「Angular」の活用

Angular開発の強力サポートするコマンドラインツール「Angular CLI」の活用法

次世代Webアプリケーションフレームワーク「Angular」の活用 第12回


  • X ポスト
  • このエントリーをはてなブックマークに追加

クイックスタートプロジェクトとの主な違い

 Angular CLIで生成したプロジェクトと、従来のクイックスタートプロジェクトとの相違点で、特に注意が必要な内容を以下に示します。

テンプレートやCSSの外部参照

 クイックスタートプロジェクトでは、リスト5のように、コンポーネントのテンプレートがtemplate属性でTypeScriptコード内に直接記述されていました。

リスト5 クイックスタートプロジェクトのコンポーネント(quickstart/src/app/app.component.ts)
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

 Angular CLIのプロジェクトでは、リスト6のとおり、templateUrl属性でテンプレートファイル(app.component.html)を外部参照するようになりました。なお、デフォルトのCSSファイル(app.component.css)も生成されて、styleUrls属性で外部参照されます。

リスト6 Angular CLIプロジェクトのコンポーネント(P001-basic/src/app/app.component.ts)
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

 実際の開発において、テンプレートをTypeScriptコードに直接記述することは少ないため、Angular CLIが生成するプロジェクトは、より実際の開発に近い形式になりました。

モジュール依存性解決ツールの変更

 クイックスタートプロジェクトでは、モジュールの依存性解決にSystemJSを利用していましたが、Angular CLIのプロジェクトではwebpackを利用するようになりました。そのため、Angular CLIのプロジェクトにはSystemJSの設定ファイルは含まれません。なお、Angular CLIのプロジェクトにはwebpackの設定ファイル(webpack.config.js)も含まれず、設定は後述する.angular-cli.jsonで行います。

プロジェクト全体の設定ファイル

 Angular CLIのプロジェクトでは、プロジェクト名やパスなどのプロジェクト全体設定を、.angular-cli.jsonファイルに記述するようになりました。設定項目の詳細は公式ドキュメントで説明されています。

 ここでは、前述のwebpackに関連した設定を、図4のサンプルで説明します。このサンプルは、背景色を指定したCSSファイルと、ボタン押下時にAngularのWebページに遷移する処理を記述したJavaScriptファイルを、webpackでプロジェクトに含める(バンドルする)ようにしています。

図4 CSSやJavaScriptをwebpackでバンドルするサンプル(P002-bundle)
図4 CSSやJavaScriptをwebpackでバンドルするサンプル(P002-bundle)

 .angular-cli.jsonでは、バンドルするCSSファイルをstyles属性に、JavaScriptファイルをscripts属性に指定します。デフォルトではstylesにstyles.cssが指定されており、scriptsは空です。図4のサンプルでは、styles.cssにページの背景色を指定するとともに、ボタン押下時の処理を記述したcustom.jsファイルを作成して、scriptsに追加指定しています。

リスト7 .angular-cli.jsonに記述するバンドル設定(P002-bundle/.angular-cli.json)
"apps": [ // アプリ関連設定
  {
(略)
    "styles": [     // バンドルするCSSファイル
      "styles.css"  // デフォルトで指定されている
    ],
    "scripts": [    // バンドルするJavaScriptファイル
      "custom.js"   // 追加指定
    ],
(略)
]

 リスト7のように設定して「ng build」コマンドでビルドすると、styles.cssやcustom.jsの内容が、ビルドで出力されたファイルに含まれるようになります。

図5 ビルドで出力されたファイル(上:P002-bundle-dist/styles.bundle.js、下:P002-bundle-dist/scripts.bundle.js)
図5 ビルドで出力されたファイル
(上:P002-bundle-dist/styles.bundle.js、下:P002-bundle-dist/scripts.bundle.js)

 出力された内容をWebサーバーに配置してブラウザーで読み込むと、図4のように表示されます。実装の詳細はサンプルコードを参照してください。なお、サンプルコードには、もとのプロジェクト(P002-bundle)と、プロジェクトのビルド結果を簡易Webサーバーで表示できるサンプル(P002-bundle-dist)を含んでいます。

次のページ
Angular CLIの便利なコマンド

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
次世代Webアプリケーションフレームワーク「Angular」の活用連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10795 2018/05/15 17:58

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング