Angular実践入門チュートリアル [1] 導入編

Angular実践入門チュートリアル の導入編です。

# 1. 雛形アプリを自動生成してみる

Angularでは、Angular CLI というCLIツールが用意されています。

通常、Angularでアプリを開発する場合、Angular CLIを使ってアプリケーションの雛形を生成するところから第一歩が始まります。

ひとまず難しいことは考えずに、この一歩目を体験してみることにしましょう。

# Angular CLIをインストールする

Angular CLIは、npm 経由で提供されています。

以下のように @angular/cli パッケージをグローバルインストールすることで、Angular CLIが提供するコマンド群を使えるようになります。

npm install -g @angular/cli

インストールができたら、以下のように打ち込んでみましょう。

ng version

以下のようなアスキーアートとともに、インストールされたAngular CLIのバージョンが表示されたと思います。

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 9.1.8

@angular/cli パッケージをグローバルインストールしたことで、 ng というコマンドが使えるようになったということです。

表示されているバージョン番号（9.1.8）は本稿執筆時点の最新版です。

このバージョンのAngular CLIは、nodeのバージョンが 10.13.0以上 かつ 13.0.0未満 であることが 前提となっている ため、もしインストールされているnodeのバージョンが古すぎるような場合は、あらかじめnodeのバージョンをアップデートしておきましょう👍

この ng コマンドにはたくさんのサブコマンドが用意されており、Angularを使ったアプリ開発を様々な場面でサポートしてくれます。

ng help （あるいは単に ng ）を実行することで、利用可能なサブコマンドの一覧を確認できます。

# アプリの雛形を生成する

それでは早速、 ng コマンドを使ってAngularアプリケーションの雛形を生成してみましょう。

適当な作業用ディレクトリに移動して、以下のコマンドを実行してみてください。

ng new angular-todo

実行するといくつか質問が表示されます。ここでは以下のように回答してください。

• ? Would you like to add Angular routing? No
• ? Which stylesheet format would you like to use? SCSS

質問に答えたら、あとはしばらく待って、

✔ Packages installed successfully.

といった成功を表すメッセージが出力されれば完了です。

ng new コマンドの引数で指定した angular-todo という名前のディレクトリが作られているので、

cd angular-todo

してください。

# 生成された雛形アプリを実行してみる

これで雛形の生成は完了です。実際に動かしてみましょう。

ここでも ng コマンドを使います。以下のコマンドを実行すると、ローカルサーバーが立ち上がり、自動的にブラウザが開きます。

ng serve --open

初回のみ、

? Would you like to share anonymous usage data about this project with the Angular Team at
Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more
details and how to change this setting, see http://angular.io/analytics. (y/N)

といった質問が表示されます。Angular開発チームに匿名の利用データを送信して開発を援助しますか？という質問なので、お好きに回答してください。

おめでとうございます！🎉

無事、AngularでHello Worldすることができました！（ Hello World とはどこにも書いてませんが😅）

ものすごく簡単でしたね！

# 2. 雛形アプリのソースコードを覗いてみる

これから、自動生成した雛形アプリに手を加える形でTodoアプリを作り込んでいくわけですが、その前にまずは雛形アプリのソースコードを軽く覗いてみて、Angularアプリが動作する仕組みについてさらっと理解しておきましょう 💪

# ng serve は何をしている？

先ほど、 ng new で作成した雛形アプリを ng serve コマンドで起動しましたね。このときアプリ内部では何が起こっているのかを簡単に確認してみましょう。

起点となっているファイルは、 angular.json です。

Angularアプリのソースコードには angular.json というアプリケーション全体の設定を行うためのファイルがあり、 ng serve コマンドはこのファイルで設定されている内容を元にアプリケーションを起動します。

angular.json の中を見てみると、以下のような箇所があります。

"index": "src/index.html",
"main": "src/main.ts",

これらの設定により、 ng serve コマンドでアプリを起動すると、 src/main.ts がエントリポイントとして読み込まれ、プログラムの実行結果が src/index.html にレンダリングされます👍

# main.ts は何をしている？

では、その main.ts は何をしているのでしょうか。

ファイルを開いてみると、以下のような簡素なコードが書かれています。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

ポイントは最後から2行目の

platformBrowserDynamic().bootstrapModule(AppModule)

ここです。

なんとなく、 「AppModuleを」「ブラウザ環境向けに」「起動する」 というようなことをしているっぽいコードですね🤔

また、よく見ると4行目に

import { AppModule } from './app/app.module';

とあり、どうやら AppModule とやらは src/app/app.module.ts というファイルから読み込まれているようです。

import文においてファイル拡張子 .ts は省略することが可能です。

# AppModule の中身はどうなっている？

少し深追いしてみましょう。

main.ts はどうやら src/app/app.module.ts から読み込んだ AppModule というものを起動するという仕事をしているようでした。

では、その AppModule の中身はどうなっているのでしょうか？実際に覗いてみましょう。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

なんだかゴチャゴチャと書かれていますね🤔

import { AppComponent } from './app.component';

  declarations: [
    AppComponent
  ],

  bootstrap: [AppComponent]

この辺りを見るに、どうやら src/app/app.component.ts から AppComponent とやらを読み込んで、それを起動するといった仕事をしていそうです。

# AppComponent の中身はどうなっている？

もう少しだけ深追いしてみましょう。

src/app/app.component.ts の中身を確認すると、以下のようになっています。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-todo';
}

やっと html とか scss とかのファイル名が出てきましたね💡

試しに src/app/app.component.html の中身を覗いてみてください。やたらと長いHTMLが出てきますが、よくよく見てみると

この画面のHTMLが書かれている気がします！

つまり、

• main.ts は AppModule を起動する
• AppModule は AppComponent を読み込んでいる
• AppComponent は app.component.html を読み込んでいる

という構造になっているように見えますね👍

# index.html には何が書いてある？

少し話を戻して、

ng serve コマンドでアプリを起動すると、 src/main.ts がエントリポイントとして読み込まれ、プログラムの実行結果が src/index.html にレンダリングされます👍

と言ったうちの、 src/index.html のほうには何が書かれているかを確認してみましょう。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularTodo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

これまた簡素なHTMLですね。

ポイントは最後から3行目の

  <app-root></app-root>

です。どこかで見たことがあるぞ？と思った人は鋭い😎

src/app/app.component.ts の中身を思い出してみましょう。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-todo';
}

4行目に

  selector: 'app-root',

とありますね。

どうやら AppComponent が読み込んでいた app.component.html の中身は、 index.html の <app-root></app-root> の部分にレンダリングされる仕組みになっているようです💡

# モジュールとコンポーネント

ここまでで、

1. angular.json に、「 src/main.ts の実行結果を src/index.html にレンダリングする」という設定が記載されている
2. src/main.ts は AppModule を読み込んで起動している
3. AppModule は AppComponent を読み込んで起動している
4. AppComponent で読み込んでいる src/app/app.component.html のHTMLが、 src/index.html に埋め込まれる形でレンダリングされている

といった関係性が見えてきました。

Angularでは、アプリを構成する機能を モジュール という単位で分割して作成できるようになっており、1つ以上のモジュールを組み合わせることでアプリ全体を構成します。

雛形アプリでは、 AppModule というモジュールが1つだけ存在しています。 AppModule は、アプリ起動時に最初に読み込まれる特別なモジュールで、ルートモジュールと呼ばれます。（どんな手順で読み込まれるかは、先に読んできた通りですね👌）

また、Angularでは、ビュー・スタイル・ロジックをひとまとめにした コンポーネント という単位でUI部品を作っていきます。作ったコンポーネントは、モジュールに登録することでそのモジュール内で利用可能になります。

雛形アプリでは、 AppModule で AppComponent が読み込まれており、それが index.html に挿入されるようになっていました。この、 index.html に挿入されるコンポーネントはルートコンポーネントと呼ばれます。

雛形アプリはルートモジュールとルートコンポーネントだけが存在している状態ですが、実際のアプリ開発では、自分でコンポーネントを追加したり、必要に応じてモジュールを分割したりしながらアプリを作り込んでいきます💪

図にすると以下のようなイメージです。

# 次の章へ

• 【1】導入編
• 【2】基礎編
• 【3】UIフレームワーク編
• 【4】Firebase編

このチュートリアルが役に立ったと思っていただけた方は、こちらのトップページ をSNS等でシェアしていただけるととても嬉しいです！😆