AngularCLIを使用したAngular入門

著者は、 Open Internet / Free Speech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Angular は、インタラクティブなWeb、モバイル、およびデスクトップアプリケーションを作成する人気のあるJavaScriptフレームワークです。関心の分離、ファーストクラスのTypeScriptサポート、および堅牢なコマンドラインインターフェイス（CLI）により、Angularは最新のエンタープライズアプリケーションの最上位の選択肢になっています。

Angular CLIは、Angularの使用を開始するプロセスを簡素化します。 CLIは、コード生成、本番ビルド、および依存関係の管理も行います。

このチュートリアルを終了すると、AngularCLIを使用してAngularアプリケーションが作成されます。 CLIを使用して新しいアプリを作成し、ブラウザーで実行して、本番用にビルドします。

また、Angularがプレゼンテーション、スタイリング、ビジネス上の懸念を個別のユニットに分割する方法についても説明します。これには、HTML、CSS、およびTypeScriptレイヤーが相互に作用する方法を練習することが含まれます。

前提条件

記事をフォローするには、次のものが必要です。

ターミナルまたはコマンドラインインターフェイスの基本的な知識。詳細については、Linuxターミナルの概要ガイドをお読みください。
TypeScriptの知識は役に立ちますが、必須ではありません。 TypeScriptを確認するには、TypeScriptでコーディングする方法シリーズを確認してください。
CSSおよびHTMLに精通していること、およびJavaScriptでコーディングする方法シリーズをフォローすることで習得できるJavaScriptの基本的な知識。
Node.jsバージョン8.9以降。 Nodeは、 Webサイトからダウンロードするか、 Node VersionManagerを使用してNodeのインストールを管理することでインストールできます。

ステップ1—AngularCLIをインストールして最初のアプリケーションを作成する

このステップでは、ローカルコンピューターにAngular CLIをインストールし、Angularアプリケーションを構築します。まず、Angular CLIをダウンロードして、次の3つの目標を達成します。

新しいAngularプロジェクトを作成する
ローカル開発サーバーを実行します
このアプリケーションを本番用にビルドする

ターミナルで次のコマンドを実行して、AngularCLIをダウンロードします。

npm install -g @angular/cli

インストールが成功したことを確認するには、ターミナルで次のコマンドを実行します。

ng version

Angular CLIは、現在のバージョンと周囲の環境をターミナルに出力します。

OutputAngular CLI: 12.1.4
Node: 14.17.4
Package Manager: npm 6.14.14
OS: darwin x64

Angularの操作を開始するには、my-first-angular-appというCLIを使用して最初のワークスペースを作成します。 Angularのプロジェクトはworkspacesとして知られています。

ターミナルで次を実行します。

ng new my-first-angular-app

このコマンドは、ワークスペースの構成に使用されるいくつかの初期化の質問をします。

Output
? Would you like to add Angular routing? (y/N) N
? Which stylesheet format would you like to use?
❯ CSS
 SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
 Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
 Less   [ http://lesscss.org

このプロジェクトではAngularルーティングを使用しないため、最初の質問にはNと入力します。 ENTERまたはRETURNキーを押します。

2番目の質問では、スタイルシート形式としてCSSを選択します。

ENTERまたはReturnキーを押して、プロジェクトを初期化します。

これで、my-first-angular-appという名前のAngularワークスペースができました。 Angular CLIは、プロジェクトの作成に必要な依存関係をインストールします。 Angular CLIとワークスペースの作成の詳細については、Angularドキュメントを確認してください。

Angular CLIをダウンロードし、新しいAngularワークスペースを作成したので、ブラウザーでアプリケーションを実行する方法を見てみましょう。

ステップ2—ブラウザでAngularアプリケーションを実行する

このステップでは、CLIを使用してブラウザーでアプリケーションを実行します。 Angularのローカル開発サーバーは、ファイルシステムが変更されるたびにブラウザーを更新します。フィードバックサイクルが速いため、変更の結果をできるだけ早く確認できます。

Angularのローカル開発サーバーには、次の利点があります。

選択したポートでローカルWebサーバーを起動します。
ファイルの変更を監視し、変更時にブラウザをリロードします。
TypeScriptのコンパイルとバンドルを管理します。

端末で次のコマンドを実行して、my-first-angular-appディレクトリにいることを確認します。

cd my-first-angular-app

次に、ターミナルで次のコマンドを実行してWebサーバーを起動します。

ng serve -o

Angularは開発アプリケーションを構築し、http://localhost:4200のローカルWebサーバーに公開します。 -oフラグをng serveに追加したため、アプリケーションはWebブラウザで開きます。

端末の出力を調べることにより、これが成功したことを確認できます。

Output✔ browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.08 MB
polyfills.js        | polyfills     | 128.57 kB
main.js             | main          |  10.81 kB
runtime.js          | runtime       |   6.59 kB
styles.css          | styles        | 179 bytes

                    | Initial Total |   2.22 MB

Build at: 2021-08-01T23:30:14.012Z - Hash: 3302767a539a29a592de - Time: 7433ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✔ Compiled successfully.

他の構成オプションをng serveに渡して、環境をカスタマイズできます。構成オプションの完全なリストはここで確認できます。

これで、Angularアプリケーションが画面に表示されます。 ng serveが実行されている限り、ファイルシステムに変更を加えると、ブラウザが新しいコンテンツで更新されます。アプリケーションの開発プロセス全体を通して、ng serveを実行し続けます。

このステップでは、ng serveを使用してブラウザーでAngularアプリケーションを実行しました。 `ng serve-o'などの構成オプションをCLIコマンドに渡しました。

次に、Angularコンポーネントに変更を加え、その変更が画面に反映されることを確認します。

ステップ3—ホームページテンプレートを更新する

このステップでは、HTMLを編集して画面にコンテンツを表示します。 HTMLテンプレートは、Angularコンポーネントのviewとも呼ばれます。このステップを終了するまでに、スターターテンプレートをコンテンツで更新する方法を学習しました。

AppComponentのHTMLはsrc/app/app.component.htmlにあります。選択したテキストエディタでこれを開き、内容を削除します。マークアップを書き込む準備ができている空白のHTMLドキュメントが必要です。

以下のHTMLコピーをsrc/app/app.component.htmlに追加します。

src / app / app.component.html

<div>
 <article>
  <header>
    <h1>I'm learning Angular at DigitalOcean</h1>
  </header>
  <section>
    <p>Here's what I've learned so far:</p>
    <ul>
      <li>
        Angular allows us to create performant web applications using TypeScript.
      </li>
      <li>
        I can use the Angular CLI to create/interact with my Angular workspace.
      </li>
      <li>
        Making changes will automatically be shown on screen, thanks to the local development server!
      </li>
    </ul>
  </section>
 </article>
</div>

ヘッダーと順序付けされていないリストを含むセクションを含む<div>を追加しました。 <h1>タグにより、順序付けられていないリストが箇条書きで、タイトルが大きなフォントで表示されます。

ドキュメントを保存するとすぐにアプリコンポーネントが更新されることに注意してください。自由に自分の追加を試して、リアルタイムでそれらを目撃してください。

これで、ベースアプリコンポーネントのHTMLテンプレートが更新されました。これは、Angularアプリケーションのエントリコンポーネントです。次のステップでは、CSSを使用してコンテンツのスタイルを設定します。

ステップ4—ホームページのスタイリングを更新する

このステップでは、CSSを使用してアプリケーションのスタイルを設定します。 Angularを使用すると、スコープスタイルとグローバルスタイルの両方で作業できます。 CSSをコンポーネントにスコープする機能により、設計を妨げることなく柔軟性が得られます。

src/styles.cssを編集して、アプリケーションのデフォルトのグローバルスタイルを設定することから始めます。

src / app / app.component.css

body {
 background-color: #fce7f3;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 font-size: 2rem;
}

これらのスタイルは、すべてのコンテンツを画面の中央に配置し、暖かい背景色を設定します。グローバルstyles.cssに加えられた変更は、今後すべてのコンポーネントに表示されることに注意してください。成功すると、ブラウザに次の情報が表示されます。

注：次の手順に進む前に、変更するたびにファイルを保存することを忘れないでください。

Angular CLIは、angular.jsonファイルのbuild builderのstyles配列にstyles.cssを追加します。 styles.cssからindex.htmlへの参照を手動で追加する必要はありません。

angle.json

{
 "projects": {
 "my-first-angular-app": {
 ...
 "architect": {
 "build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
 ...
 "styles": ["src/styles.css"]
          }
        }
      }
    }
  }
}

ステップ6でAngularビルドプロセスの詳細を確認します。

次に、アプリコンポーネントのスタイルを設定しましょう。コンポーネントに追加されたスタイルは、アプリケーションの他の部分には表示されません。スタイルスコーピングの詳細については、Angularドキュメントをお読みください。

src/app/app.component.cssに移動し、グローバルスタイルの下に次のCSSを追加します。

...
[label src/app/app.component.css] article {
 background-color: #fbcfe8;
 padding: 2rem 4rem;
 color: #1f2937;
 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 box-shadow: 20px 20px 0px #db2777;
 border: 6px solid #831843;
 border-radius: 2rem;
}

header {
 text-decoration: underline;
}

ul {
 list-style: square;
}

これで、ブラウザの<article>タグ内のコンテンツにスタイルが表示されます。

スタイリングが整ったら、ユーザーインターフェイスを動的に変更する方法を見ていきましょう。

ステップ5—ホームページTypeScriptを更新する

このステップでは、src/app/app.component.tsにあるAngularアプリケーションでTypeScriptを使用します。 Angularはデコレータを使用して、ngStyleおよびngClassでコンポーネントを動的にスタイル設定します。

Angularコンポーネントは、JavaScriptclass構文を使用します。このクラスがコンポーネントであることをAngularに伝えるには、@Component(...)デコレーターをクラスに追加する必要があります。

TypeScriptおよびAngularのデコレータは、クラスまたは関数の宣言に関するメタデータを提供します。 Angularでは、依存性注入システムとコンパイラーにメタデータを提供するために特に使用されます。これにより、クラスまたは関数の実行前、実行中、実行後に任意のコードを実行できます。次に、Angularはコンポーネントに接続するファイルを関連付けます。デコレータの詳細については、TypeScriptここを参照してください。

これは、CLIで作成されたAppComponentで実際に動作していることがわかります。 src/app/app.component.tsを開き、次のことを確認します。

src / app / app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 ...
}

styleUrlsプロパティは1つの値を持つ配列であることに注意してください。これは、app-rootにCSSスタイルシートが1つ含まれているためです。 styleUrls配列にスタイルシートを追加すると、Angularはそれらをバンドルします。

selectorは、このコンポーネントを識別するCSSセレクターです。これはHTMLテンプレートのコンポーネントの名前になり、index.htmlの内部で確認できます。

index.html

<!doctype html>
  <html lang="en">
    <head>
      ...
    </head>
    <body>
      <app-root></app-root>
    </body>
</html>

Angularを使用すると、src/app/app.component.tsファイル内で定義されたアプリケーションの状態をsrc/app/app.component.htmlのHTMLテンプレートにバインドできます。

AppComponent内で、myNextProjectという名前の新しい変数を作成し、それにa porfolio websiteの値を割り当てます。

src / app / app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNextProject = 'a portfolio website.';
}

これで、変数をsrc/app/app.component.htmlへのバインダーとして使用し、TypeScriptで定義されたデータをHTMLテンプレートに接続できます。 Angularは、変数を二重中括弧で囲むことにより、HTMLでTypeScript変数を定義します。

{{ myNextProject }}

src/app/app.component.html内で、テキストの<footer>タグの間に変数を追加します。

src / app / app.component.html

<article>
  <header>
    <h1>I'm learning Angular at DigitalOcean</h1>
  </header>
  <section>
    <p>Here's what I've learned so far:</p>
    <ul>
    <li>
      Angular allows you to create performant web applications using TypeScript.
    </li>
    <li>
      I can use the Angular CLI to create/interact with my Angular workspace.
    </li>
    <li>
      Making changes will automatically be shown on screen, thanks to the local development server!
    </li>
  </ul>
 </section>
 <footer>
    <p>For my next project, I'll be making {{ myNextProject }}</p>
 </footer>
</article>

<p>タグ内のコンテンツは、ブラウザでFor my next project, I'll be making a portfolio website.としてレンダリングされます。

ここで実行するように、テンプレートの値をバインドすると、動的コンテンツをユーザーに提供できます。

TypeScriptファイル内の関数を使用して、出力を決定することもできます。 src/app/app.component.tsで、新しい変数showPurpleBoxShadowとgetBoxShadow()関数を定義します。

src / app / app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myNextProject = 'a portfolio website.';

  showPurpleBoxShadow = true;

 get boxShadow() {
 if (this.showPurpleBoxShadow) return '20px 20px 0px #bdb2ff';

 return '20px 20px 0px #DB2777';
  }
}

src/app/app.component.htmlファイルに移動し、[ngStyle]ディレクティブを<article>タグ内に挿入します。

src / app / app.component.html

<article [ngStyle]="{'box-shadow': boxShadow}">...</article>

ngStyleは、アプリケーションの状態をCSSスタイルにバインドするAngularディレクティブです。 Angularでは、ディレクティブは[ngStyle]などのDOM要素の「マーカー」です。その後、AngularはDOM要素に機能をアタッチできるようになります。

このシナリオでは、showPurpleBoxShadowの値に応じて、さまざまなbox-shadowスタイルを適用しています。 ngClassディレクティブを使用しても同じ結果を得ることができます。 CSSスタイルを適用する代わりに、これは条件付きでCSSクラスを適用します。

src/app/app.component.cssを開き、次のCSSクラスを追加します。

src / app / app.component.css

.purple-box-shadow {
 box-shadow: 20px 20px 0px #bdb2ff;
}

.pink-box-shadow {
 box-shadow: 20px 20px 0px #db2777;
}

次に、src/app/app.component.tsで、boxShadowゲッターを更新して、代わりにクラス名を返します。

src / app / app.component.ts

export class AppComponent {
 ...

 get boxShadow() {
 if (this.showPurpleBoxShadow) return 'purple-box-shadow';

 return 'pink-box-shadow';
  }
}

次に、ngClassディレクティブを使用して、purple-box-shadowクラスを<article>タグに条件付きで適用できます。

src / app / app.component.html

<article [ngClass]="boxShadow">
...
</article>

成功すると、ブラウザに次の情報が表示されます。

これで、変更のたびに再デプロイすることなく、デザインマニフェストを画面に表示できます。開発と本番用にAngularアプリケーションを構築する方法を見てみましょう。

ステップ6—本番環境の構築

このステップでは、Angular CLIを使用して、Angularプロジェクトの本番ビルドを生成します。 AngularはWebpackを使用します。これを使用して、ファイルをバンドルし、サイトを本番用に最適化します。

Webpack は、JavaScriptアプリケーション用のオープンソースモジュールバンドラーです。コード/アセットをオンデマンドでロードする機能を提供します。サーバーから必要なすべてのアセットをフェッチするために必要なリクエストの数を最小限に抑える強力な最適化システムを提供します。

カスタムWebpack構成ファイルを作成するには、記事AngularCLIビルダーでカスタムWebpack構成を使用する方法を確認してください。

デフォルトでは、AngularCLIは2種類のビルドを提供します。

発達

最適化されていないバージョンのコードには、ソースマップとランタイムチェックが含まれており、アプリを開発する前に本番環境にデプロイする際に問題を検出して調査するのに役立ちます。

コマンドng serveを実行すると、AngularCLIは最適化されていないバージョンのコードを生成します。開発ビルドを本番環境にデプロイすることは避けてください。開発ビルドには、高速で本番環境に対応したアプリケーションに必要な最適化は含まれていません。

ターミナルで次のコマンドを実行することにより、development構成でプロジェクトをビルドできます。

ng build --configuration development

製造

production構成でプロジェクトを構築すると、最適化されたコードが生成され、次のような利点があります。

アプリケーションのサイズを小さくするためのコードの縮小とバンドル。
インポートされたモジュールの未使用部分を最終ビルドから除外するためのツリーシェイク。機能に悪影響を与えることなく帯域幅を節約します。
ソースマップ、コンパイラエラー、およびバンドルサイズが小さい場合の警告はありません。

ページ速度と配信時間は検索エンジンとユーザーにとって重要な指標であるため、本番環境のビルドは公開アプリケーションに不可欠です。ページ速度と配信時間の最適化の詳細については、ここをクリックをクリックしてください。

本番ビルドを生成するには、プロジェクトフォルダーからng buildを実行します。 CLIはコードをリントし、アプリケーションの最適化された縮小バージョンを生成します。

成功すると、バンドルに関する統計が提供されます。

Output✔ browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files        | Names     |   Size
main.0deeec3d31917b111ae5.js   | main     | 104.77 kB
polyfills.313e64a67eb403254da5.js | polyfills   | 35.96 kB
runtime.284ffbeed756735f6289.js  | runtime    |  1.02 kB
styles.e5294562d7aae78a8725.css  | styles    | 113 bytes

| Initial Total | 141.86 kB

ファイル名の名前の後に一意のハッシュがあることに注意してください。 Angularはこれを追加して、「キャッシュバスティング」を可能にします。ビルドごとにハッシュが変更されるため、ブラウザはサイトに再度アクセスしたときにキャッシュをリセットできます。

ファイルに変更を加えると、ハッシュが変更され、ブラウザが新しいファイルをリロードします。それ以外の場合、ブラウザはキャッシュされたバージョンを使用します。

Angular CLIは、バンドルサイズが大きすぎる場合、この段階で警告を表示することもできます。アプリケーションが大きくなるにつれて、バンドルサイズを引き続き確認する必要があります。

ng buildやng serveなどのAngularCLIコマンドに対応する構成オプションは、angular.jsonファイルにあります。 configurationsキーをナビゲートして、productionおよびdevelopmentビルドに設定されたオプションを表示します。これらの制限は、ビルドごとに構成できます。

angle.json

{
 ...
 "projects": {
 "my-first-angular-app": {
 "architect": {
 "build": {
 ...
 "configurations": {
 "production": {
 "budgets": [
 {
  "type": "initial",
  "maximumWarning": "500kb",
  "maximumError": "1mb"
 },
 {
  "type": "anyComponentStyle",
  "maximumWarning": "2kb",
  "maximumError": "4kb"
 }
],
            }
          }
        }
      }
    }
  }
}

ng buildコマンドは、これらをdist/my-first-angular-appフォルダーに出力して、展開用にビルドされたファイルにアクセスします。これらのファイルを使用して、アプリケーションをサーバーまたはCDNにデプロイできます。詳細については、AngularCLIのドキュメントを参照してください。

このステップでは、AngularCLIを使用して開発および本番ビルドを作成する方法を学習しました。また、バンドルサイズなど、パフォーマンスの高いWebアプリケーションを作成するための重要な要素についても検討しました。

結論

このチュートリアルでは、AngularCLIを使用してAngularプロジェクトを作成しました。プロジェクトを実行してブラウザーで実行し、アプリケーションの外観と実行方法を更新しました。

CLIを使用して本番ビルドを生成し、構成オプションについて学習して、CLIが動作する方法と場所をより深く理解しました。

Angular CLIと追加コマンドの詳細については、AngularCLIのドキュメントを確認してください。