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