Angular入門

Angular入門: クライアントサイドJavaScriptフレームワークを始める

このガイドでは、Angularフレームワークの基本を理解し、実際にプロジェクトを作成する手順を学びます。Angularを使用することで、より効率的にクライアントサイドアプリケーションを構築できます。

Angular とは

「アンギュラー」と読みます。Google を中心としたコミュニティで開発・公開されています。ライセンスは基本的には MIT ライセンス/商用利用可能です。SPA (Single Page Application) を実現する JavaScript 系フレームワークの一つです。MVC (Model View Controller) や MVVM (Model-View-ViewModel) アーキテクチャーを実現します。MEAN (MongoDB, Express, Angular, Node.js) スタックの一角を担います。2009年に公開された 0.x や 1.x を AngularJS と呼びます。2016年に公開された 2.x 以降を Angular と呼びます。根本から作り直されていて別物です。互換性はありません。JavaScript を拡張した TypeScript (JavaScript に型定義や ES6 文法などを加えた拡張言語)を使用しています。TypeScript で作成したスクリプトを、ES5 レベルの JavaScript にコンバートして、ブラウザに読み込ませます。Vue.js や React とよく比較されます。両者に比べて初期学習コストは高いですが、機能も豊富で、企業向け大規模開発向きと言われています。ネットで検索すると AngularJS のものと、Angular のものが混在して検索されてしまいます。AngularJS (JS有り)や ng- (ハイフン有り) や、$scope があると、Angular に関する古い記事の可能性が高いです。Angular (JS無し)や、ngXxxx (ハイフン無し) であれば、Angular の記事である可能性が高いです。Angular 自体の進化も早いので、1年以上古い記事は当てにならないことがあります。最新の英語リファレンスを参照するのが早道だったりします。Angular を勉強するには、英語の記事を読みこなすスキルは必要になるかも。入力フィールド、表示フィールド、モデルを双方向にバインドする、双方向バイディングをサポートします。Ajax などの非同期イベントの処理ライブラリとして、RxJS を採用しています。ダイアログなどの UI 部品をサポートする Angular Material が公開されています。

Angularのバージョン

Angular 2.0 2016年9月14日
Angular 4.0 2016年12月13日
Angular 5.0 2017年11月1日
Angular 6.0 2018年5月4日
Angular 7.0 2018年10月18日
Angular 8.0 2019年5月28日
Angular 9.0 2020年2月6日
Angular 10.0 2020年6月24日
Angular 11.0 2020年11月11日
Angular 12.0 2021年5月13日
Angular 13.0 2021年11月3日

チュートリアルのイメージ

下記の環境で検証しています。

OS: Ubuntu 20.04
Node.js: 16.1.0
npm: 7.24.0
Angular CLI: 13.2.0

このチュートリアルでは、最終的に下記の様なイメージの画面を作成します。メニューやユーザ名をクリックしてください。値までは変化しませんが、これから作成する画面のおおよそのイメージをつかむことができます。

◆ Angular Sample Console
Dashboard Users
Dashboard
This is a sample of Angular application.

チュートリアルで作成するソースコードは下記からダウンロードできます。
angular-sample-1.zip : ローカルのみで完結する版
angular-sample-2.zip : サーバと REST-API 通信する版

インストール

Node.js 系のパッケージ管理ツール npm を使用して、Angular の CLI (Command Line Interface) をインストールします。

$ npm install -g @angular/cli
    :
how to change this setting, see http://angular.io/analytics. (y/N) N

アプリケーションを作成する

ng コマンドで新しいアプリケーションを作成します。my-app は作成するアプリケーション名となります。Angular routing は後程利用するので y と答えてください。スタイルシートを CSS, SCSS などから選べます。オススメは SCSS ですが、とりあえずデフォルトの CSS で。

$ ng new my-app
? Would you like to add Angular routing? (y/N) y
? Which stylesheet format would you like to use? CSS # カーソル移動キーで選択してEnter

サーバを起動する

アプリケーションをビルドして開発用簡易サーバを起動します。起動にはしばらく時間がかかります。ブラウザでアクセスすると、Angular のサンプル画面が表示されます。LISTEN する IPアドレスやポート番号を変更するには、--host, --port オプションを指定します。他のマシンからアクセスする際は、firewall-cmd などでポートの穴あけが必要な場合があります。

$ cd my-app
$ ng serve --host 0.0.0.0 --port 8080

ブラウザから http://{サーバアドレス}:8080/ にアクセスして Angular の画面が表示されれば成功です。

HTMLやCSSを編集する

ソースを下記の様に書き換え、Hello world! を表示します。サーバが起動していれば、ソースファイルを修正すると自動的にリビルドと、ブラウザの再表示が行われます。

src/app/app.component.html

<h1>Hello world!</h1>

src/styles.css

* {
  margin: 0;
  padding: 0;
}
h1 {
  font-size: 1.4em;
}

ブラウザが自動的にリロードされ、Hello world! が表示されます。

コンポーネントを追加する

ヘッダ、メニュー、ダッシュボードなどの画面要素をコンポーネントとして追加します。

$ ng generate component header
$ ng generate component menu
$ ng generate component dashboard

app コンポーネントの HTML を下記の様に書き換えます。

src/app/app.component.html

<app-header></app-header>
<app-menu></app-menu>
<app-dashboard></app-dashboard>

ヘッダは黒地に白文字とし、Angular のアイコンを表示します。

src/app/header/header.component.html

<div class="header">
  <img src="../favicon.ico" alt="Angular"> Angular Sample Console
</div>

src/app/header/header.component.css

.header {
  padding: 4px;
  background-color: #000;
  color: #fff;
}
.header img {
  width: 18px;
  vertical-align: middle;
}

メニューには Dashboar メニューを記述します。

src/app/menu/menu.component.html

<div class="menu">
  <ul>
  <li><a href="/">Dashboard</a></li>
  <li><a href="/users">Users</a></li>
  </ul>
</div>

src/app/menu/menu.component.css

.menu {
  border-top: 1px solid #ccc;
}
.menu ul {
  list-style: none;
  padding: 0;
}
.menu li {
  display: inline;
  padding: 0 10px;
}
.menu li a {
  text-decoration: none;
}

ダッシュボードの中身を記述します。

src/app/dashboard/dashboard.component.html

<div class="dashboard">
  <h2>Dashboard</h2>
  <p>This is a sample of Angular application.</p>
</div>

src/app/dashboard/dashboard.component.css

.dashboard {
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}
.dashboard h2 {
  margin-bottom: 10px;
}

サーバを起動して、ブラウザを再読み込みすると新たに作成したコンポーネントが表示されます。

サーバとの通信 (REST API)

コンポーネントを追加したり、HTTP クライアントを使ってサーバとの通信を行ったりすることで、さまざまな機能を実装できます。Angular には HTTP Client モジュールが用意されています。以下のコマンドでインストールします。

$ ng generate module app-routing --flat --module=app

サーバの URL やデータの取得、エラーハンドリングなどをコーディングしていきます。

サーバに必要なデータをリクエストし、受け取ったデータを画面に表示することができます。

まとめ

Angular では、コンポーネントを使って画面を構成し、HTTP クライアントを利用してサーバと通信することが基本的な流れになります。これにより、柔軟で拡張性のあるアプリケーションを開発することができます。

参考文献

1. Angular公式ドキュメント

2. RxJS公式サイト

QA

Q1: Angularで作成したアプリケーションは他のフレームワークに比べてどのような利点がありますか？

A1: Angularはコンポーネントベースのアーキテクチャを採用し、コードの再利用性が高く、また大規模なアプリケーションの構築に向いています。

Q2: Angular CLIはどのような機能がありますか？

A2: Angular CLIは、新しいプロジェクトの作成やコンポーネントの生成、ビルド、テストなどの開発タスクを自動化するためのツールです。

Q3: Angularのバージョンアップはどのように行いますか？

A3: Angularのバージョンをアップグレードするには、npmを使用してプロジェクトの依存関係を更新します。具体的には、<code>npm install @angular/core@latest</code>を実行します。

その他の参考記事:angularjs npm tutorial