Angular アプリを動かしてみる（Ubuntu 上）

Angular は，TypeScript を用いて Web アプリケーションを開発するための Web フレームワークである．

Ubuntu 上で，Angular の実行に必要なソフトウェアのインストールから，Angular アプリの新規作成，開発用サーバでの動作確認までの手順を説明する．

キーワード：Angular, Web フレームワーク, Node.js, n のインストール, Angular CLI のインストール, Angular アプリの新規作成, 開発用サーバ, TypeScript, Ubuntu

前準備：Node.js のインストール

Angular は Node.js と npm を使用する．Angular が要求する Node.js のバージョンは Angular のバージョンごとに定められており，Angular 22 では Node.js 22.22.3 以上（または 24.15.0 以上，26.0.0 以上）である．最新の対応表は https://angular.dev/reference/versions で確認できる．

Ubuntu の apt で配布される Node.js は，Angular が要求するバージョンより古いことがある．ここでは n を用いて，Angular が要求するバージョンの Node.js を導入する．

n のインストール

n は，Node.js のバージョンの切り替えを行うソフトウェアである． Web ページは https://github.com/tj/n．この Web ページの記載に従ってインストールを行う．

npm を使い n をインストール
端末を開き，次のコマンドを実行する．「-g」は「グローバル（システム全体）にインストールする」という意味である．
```
# パッケージリストの情報を更新
sudo apt update
sudo apt -y install npm
sudo npm install -g n
```
n を用いて，Node.js の LTS 版をインストール
端末で次のコマンドを実行する．/usr/local/bin/node, /usr/local/bin/npm などがインストールされる．
```
sudo n lts
```
Angular は Active LTS または Maintenance LTS の Node.js を対象としているため，「sudo n latest」（最新版）ではなく「sudo n lts」を用いる．
インストールした Node.js を有効にする
端末で次のコマンドを実行し，シェルが記憶しているコマンドの場所を破棄する（端末を開き直してもよい）．
```
hash -r
```

Angular CLI のインストール

https://angular.dev/installation の記載をなぞり， Angular CLI のインストールを行う．

node と npm のバージョン確認
端末を開き，次のコマンドを実行して，Node.js のバージョンが Angular の要求を満たすことを確認する．
```
node -v
```
その実行結果例

端末で，次のコマンドを実行して，npm のバージョンを確認する．npm は Node.js に同梱されている．
```
npm -v
```
その実行結果例
Angular CLI のインストール
Angular CLI は，Angular のためのコマンドライン・インタフェースである．
端末を開き，次のコマンドを実行する．「-g」は「グローバル（システム全体）にインストールする」という意味である．
```
sudo npm install -g @angular/cli
```
Angular CLI のインストール終了の確認
端末で，エラーメッセージが出ていないことを確認する．次のコマンドでバージョンを確認できる．
```
ng version
```

Angular アプリを作ってみる

https://angular.dev/installation の記載をなぞり， Angular アプリを作ってみる．

プロジェクトの新規作成
ここでのプロジェクト名: my-app
端末を開き，次のコマンドを実行する．実行中に，スタイルシートの形式や サーバサイドレンダリング（SSR） の有無などの選択が求められる．初期設定のままでよい場合は，Enter キーで進む．
```
ng new my-app
```
終了の確認
端末で，エラーメッセージが出ていないことを確認する．
Angular アプリの起動
端末で，次のコマンドを実行する．
```
cd my-app
ng serve --open
```
端末で，エラーメッセージが出ていないことを確認する．
自動で Web ブラウザの画面が開くので確認する
「--open」は「Web ブラウザを開く」という指定である． URL が「http://localhost:4200/」になっていることを確認する．
試しに ~/my-app/src/app/app.ts を書き換えてみる
これは TypeScript のプログラムである．Angular 19 以前で作成したプロジェクトでは，同じファイルの名前は src/app/app.component.ts である．
ファイルを保存すると，Web ブラウザの表示が自動で変わるので確認する
「ng serve」はファイルの変更を監視し，再ビルドと Web ブラウザの再読み込みを行う．
src の下に html, css, ts ファイルがあり，プロジェクトの直下に設定ファイル（angular.json, package.json, tsconfig.json など）がある
開発用サーバの終了
端末で，Ctrl + C を押す．