TECH NOTE

AngularはGoogleによって開発され、維持されているオープンソースのJavaScriptフレームワークであり、主にSingle Page Application（SPA）の開発に使用されます。AngularはTypeScriptで書かれており、高度なツールやエディタのサポートを享受できます。

Angularの特徴

以下がAngularの主な特徴です。

1. コンポーネントベースのアーキテクチャ： Angularはコンポーネントベースのアーキテクチャを採用しており、アプリケーションは再利用可能なコンポーネントに分割されます。これにより、コードの管理が容易になり、再利用性と可読性が向上します。
2. 依存性注入： Angularは依存性注入パターンを採用しており、依存オブジェクトをコンポーネントに提供します。これにより、コードの再利用性とテストのしやすさが向上します。
3. データバインディング： Angularは双方向データバインディングをサポートしており、モデルとビュー間の同期を自動的に保つことができます。
4. ルーティング： Angularのルーティング機能により、アプリケーション内でのページ間の移動が容易になります。
5. Angular CLI： Angular Command Line Interface（CLI）を使用すると、プロジェクトの作成、開発、テスト、ビルドが容易になります。
6. テスト容易性： Angularは単体テストからエンドツーエンド（E2E）テストまで、テストを容易にするツールとライブラリを提供します。

他の主要なJavaScriptフレームワーク、特にReactやVue.jsと比較した場合、Angularはフルスタックなフレームワークで、多くの機能を提供します。一方で、ReactやVue.jsはライブラリとしてスタートし、他のライブラリやツールと組み合わせて使用することでフレームワークのような機能を達成します。そのため、ReactやVue.jsはより柔軟性がありますが、セットアップや学習曲線が少し複雑になる可能性があります。

また、AngularはTypeScriptを使用しますが、ReactやVue.jsはJavaScriptを使用します（ただし、TypeScriptのサポートもあります）。TypeScriptは静的型付けを提供し、大規模なプロジェクトでは開発効率やコードの品質を向上させますが、一方で学習コストがかかることも事実です。

Angularは日本国内においてはReactやVue.jsと比べるとメジャーではありませんが、まったく使われていないというわけではありません。主に企業向けシステムを中心に利用されています。

Angular CLIのセットアップとプロジェクトの作成

Angularのプロジェクト作成およびコードのひな形の生成にはAngular CLIを使用します。

本記事では、執筆時点で最新版の16.1.6を使用します。基本的にAngularで使用するNode.jsは同時期の安定版をサポートしているため、ここではNode.jsは18.17.0、npmは9.8.1を使用します。また、全体を通してパッケージマネージャーはnpmを使用します。

$ node -v
v18.17.0
$ npm -v
9.8.1

以下のコマンドを入力してAngular CLIをインストールします。

$ npm install -g @angular/cli

added 240 packages in 13s

36 packages are looking for funding
  run `npm fund` for details

Angular CLIのインストール成功すると、ngコマンドが使用可能になります。versionサブコマンドでインストールしたAngular CLIのバージョンを確認してみましょう。

$ ng version

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


Angular CLI: 16.1.6
Node: 18.17.0
Package Manager: npm 9.8.1
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.6 (cli-only)
@angular-devkit/core         16.1.6 (cli-only)
@angular-devkit/schematics   16.1.6 (cli-only)
@schematics/angular          16.1.6 (cli-only)

Angular CLI、Node.js、パッケージマネージャー（npm）およびインストールしたパッケージのバージョンを確認することができます。

開発者全員で同じバージョンのAngular CLIを使用する場合は、latestの部分を指定のバージョンに変更します。

$ npm install -g @angular/cli@16.1.6

added 240 packages in 15s

36 packages are looking for funding
  run `npm fund` for details

システム開発においてはバージョンを明示的に指定するこちらの方法でインストールしてください。

Angularプロジェクトの作成

Angular CLIのインストールが完了したら、Angularプロジェクトを作成します。

プロジェクト名は任意の名前で構いませんが、本記事ではangular-tutorialというプロジェクト名にします。

Angular CLIでAngularプロジェクトを作成するには、newサブコマンドを使用します。

$ ng new angular-tutorial

使用するAngular CLIのバージョンによって変わる場合がありますが、コマンド実行後にいくつか質問が表示されます。ここではすべてデフォルト値のまま進めることにします。

$ ng new angular-tutorial
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE angular-tutorial/README.md (1069 bytes)
CREATE angular-tutorial/.editorconfig (274 bytes)
CREATE angular-tutorial/.gitignore (548 bytes)
CREATE angular-tutorial/angular.json (2750 bytes)
CREATE angular-tutorial/package.json (1047 bytes)
CREATE angular-tutorial/tsconfig.json (901 bytes)
CREATE angular-tutorial/tsconfig.app.json (263 bytes)
CREATE angular-tutorial/tsconfig.spec.json (273 bytes)
CREATE angular-tutorial/.vscode/extensions.json (130 bytes)
CREATE angular-tutorial/.vscode/launch.json (470 bytes)
CREATE angular-tutorial/.vscode/tasks.json (938 bytes)
CREATE angular-tutorial/src/main.ts (214 bytes)
CREATE angular-tutorial/src/favicon.ico (948 bytes)
CREATE angular-tutorial/src/index.html (301 bytes)
CREATE angular-tutorial/src/styles.css (80 bytes)
CREATE angular-tutorial/src/app/app.module.ts (314 bytes)
CREATE angular-tutorial/src/app/app.component.css (0 bytes)
CREATE angular-tutorial/src/app/app.component.html (23083 bytes)
CREATE angular-tutorial/src/app/app.component.spec.ts (922 bytes)
CREATE angular-tutorial/src/app/app.component.ts (220 bytes)
CREATE angular-tutorial/src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: 	git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: 	git branch -m <name>
    Successfully initialized git.

質問は2つありますので、1つずつ見ていきましょう。

Would you like to add Angular routing?

ルーティングモジュールを追加するかについて訪ねられています。ルーティングモジュールを使用しないことはほとんどないので、yを回答しても構いませんが、後で追加するのでここではデフォルト値のままにしておきます。

Which stylesheet format would you like to use?

スタイルシートのフォーマットを選択することができます。デフォルトはCSSですが、SCSSやSASS、LESSなどを選択できます。UIをどのように開発するか決まっていればそれに合わせて選択していただくのがよいと思います。本記事執筆時点ではいくつかのCSSフレームワークを試そうと思っていますので、デフォルトのCSSのままにしておきます。

hint: Using ‘master’ as the name for the initial branch. This default branch name

プロジェクトの作成が成功したあと、いくつかhint:で始まるメッセージが表示されています。

私の環境では最初に作成されるGitのブランチがmasterになっているため、このメッセージが表示されています。変更しなくても動作には支障はありませんが、不適切なブランチ名であるというのが業界における共通認識になっていると思いますので、GitHubの方針に合わせてmainブランチに変更しておきましょう。

また、git config --global init.defaultBranch <name>でデフォルトのブランチ名を変更しておくことも可能です。毎回変更するのが面倒な場合はこちらでデフォルトブランチを変更してください。ただし、次回以降の作成で有効になる点にはご注意ください。（すでに作成済みのGitリポジトリは変更されません）

これ以降ではVisual Studio Codeを使って開発を進めていきますので、作成したプロジェクトをcodeコマンドで表示し、ターミナルを開きます。

$ code angular-tutorial

Visual Studio CodeでAngularプロジェクトを開くと、拡張機能をインストールを勧めるメッセージが表示されますが、あとでインストールするので、ここでは閉じておいてください。

$ git branch
* master

ブランチを確認すると、masterブランチになっています。これをgit branch -mコマンドでmainに変更します。

$ git branch -m main
$ git branch
* main

ブランチ名がmainに変わったことを確認できました。

まとめ

Angular CLIのインストールとAngularプロジェクトの作成までを行いました。

次回はVisual Studio CodeでのAngularの開発を円滑に進めるための拡張機能をインストールしていきます。