SHOEISHA iD

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

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

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

フレームワークとツールの両面で完成度アップ! 「Angular」バージョン7の新機能

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

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

 本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回はAngularのPWA(Progressive Web Apps)機能でWebプッシュ通知を実装する方法を紹介しました。今回は2018年10月にリリースされたAngularのバージョン7を取り上げ、新機能を紹介していきます。

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

はじめに

 Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。

 2018年5月のバージョン6に続き、2018年10月にバージョン7がリリースされました。バージョン6に引き続きツール類の充実、速度向上や新機能追加などが行われました。

図1 バージョン7のリリースを告知する公式ブログ記事
図1 バージョン7のリリースを告知する公式ブログ記事

 本記事では、Angularのバージョン7(以下「Angular 7」)の主要な変更点や新機能を、サンプルとともに説明していきます。

対象読者

  • 常にAngularの最新動向を把握しておきたい方
  • Angularをより深く使いこなしていきたい方
  • できるだけツールに頼って楽をしたい方

必要な環境

 Angularの開発ではTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)を利用する場合が多く、本記事のサンプルコードもTypeScriptで記述しています。

 今回は以下の環境で動作を確認しています。

  • Windows 10 64bit版
    • Angular 7.2.0
    • Angular CLI 7.2.1
    • Node.js v10.15.0 64bit版
    • Microsoft Edge 44.17763.1.0
    • Google Chrome 71.0.3578.98(一部サンプルで利用)

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、「ng serve --open」コマンドを実行します。--openは、ブラウザーを自動的に起動するオプションです。

Angular 7へアップデートする方法

 プロジェクトのAngular 7へのアップデートは、多くの場合、リスト1のコマンドで実行できます。

[リスト1]プロジェクトをAngular 7へアップデートするコマンド
ng update @angular/cli @angular/core

 プロジェクトによっては追加の手順が必要になる場合があります。詳細は「Angular Update Guide」で確認できます。

Angular CLIの対話入力でプロジェクトをカスタマイズ

 Angularでは、コマンドラインでAngularプロジェクトの生成や実行などができるCLIツール「Angular CLI」が利用できます。Angular 7に対応したAngular CLIでは、「ng new」コマンドでプロジェクト生成時に、コマンドラインの対話入力でプロジェクトをカスタマイズできるようになりました。

図2 Angular CLIの対話入力(赤枠部分)
図2 Angular CLIの対話入力(赤枠部分)

 プロジェクト生成時の対話入力では、表1の項目を指定できます。

表1 プロジェクト生成時に対話入力で指定できるカスタマイズ項目
No. カスタマイズ項目  デフォルト    
1 ルーティング機能  利用しない
2 スタイルシートの形式 CSS

 スタイルシートの形式は、通常のCSSのほか、SCSSやSassLESSStylusの各言語が選択できます。これらは変換してCSSを生成する、いわゆるAltCSS言語で、よりわかりやすい記述形式や、変数の定義・計算機能などの特徴や機能があります。詳細は各サイトを参照してください。

 また、後述の、Angular Materialをプロジェクトに追加する「ng add @angular/material」コマンドでは、表2の項目を対話入力で指定できます。

表2 Angular Materialの追加時に対話入力で指定できるカスタマイズ項目
No. カスタマイズ項目 デフォルト 
1 テーマカラー Indigo/Pink
2 HammerJSによるタッチジェスチャー機能 利用する
3 ブラウザーアニメーション 利用する

 なお、今回新たに、Angularの公式ドキュメントに、Angular CLIのコマンドリファレンスが整備されました。開発者は公式ドキュメントで、Angularと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/11368 2019/02/08 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング