AngularはTypeScriptベースのフロントエンドWebアプリケーションフレームワークで、ReactやVue.jsと並んでフロントエンド開発用フレームワークとして人気を集めています。 今回はAngularの環境構築からプロジェクトの作成、サイトの表示と簡単なTodoリストアプリを作成する手順をご紹介します。

チャレンジ&ナレッジ最終更新日: 20210111

AngularでTodoアプリを作ってみよう

  • このエントリーをはてなブックマークに追加

AngularはTypeScriptベースのフロントエンドWebアプリケーションフレームワークで、ReactやVue.jsと並んでフロントエンド開発用フレームワークとして人気を集めています。 今回はAngularの環境構築からプロジェクトの作成、サイトの表示と簡単なTodoリストアプリを作成する手順をご紹介します。

Angularとは

「Angular」はGoogleが以前開発していた「AngularJS」というフレームワークの問題点をAngularJSの開発チームが改善して生まれたものです。AngularにはAngularJSから一部の機能や名称が引き継がれた部分もありますが、基本的には別のフレームワークで、互換性があるわけではありません。
またAngularJSと大きく違う点として、Microsoftが開発したJavaScript派生プログラム言語「TypeScript」を推奨環境としています。
Angularはフロントエンド開発に必要な機能を一通り備えたフルスタックフレームワークであり、SPA(Single Page Application)と呼ばれるページを遷移せずに動作するWebアプリ開発に向いています。

※本稿では、Angular9(2020年2月リリース)を使用した手順を紹介していますが、Angular10(2020年6月リリース)でも操作検証を行っています

インストールと環境構築

本稿では下記TypeScriptの記事に沿って開発環境を整えています。

“TypeScriptの「型」「メソッド」「クラス」とgulp連携”
https://www.pc-koubou.jp/magazine/41527

まず必要なのがNode.jsのインストールです。
Node.jsのWindows用バージョン管理ツール「nodist」を使って、Node.jsのインストールを進めます。
すでにNode.jsをインストール済みの方は、AngularはNode.jsのバージョンが10.13以上でないと動作しないため、バージョンの確認をお願いします。ここでは、新たに対応するバージョンをインストールする方法を説明します。
初めに、現在のnodistで使用しているNode.jsのバージョンを確認するために下記のコマンドを実行してください。

nodist

(global:)と表示されている数字が、現在使用しているNode.jsのバージョンを表しています。

ダウンロードが可能なNode.jsのバージョンを確認するには下記のコマンドを実行します。

nodist dist

実行するとダウンロード可能なバージョンが表示されます。今回はこの中からバージョン12.10.0をインストールしたいので、下記のコマンドを実行します。

nodist + 12.10.0

インストールができたら、使用するバージョンを切り替える必要があるので、下記のコマンドを実行します。

nodist global 12.10.0

Node.jsバージョン12.10.0を使用することが可能になりました。
次にAngularをインストールします。引き続きコマンドプロンプト上で下記のコマンドを実行してください。

npm install –g @angular/cli@9.1.12

途中で、このような表示で止まった場合は、「y」を押してエンターを押して先に進めます。

これでインストールが無事に完了しました。

プロジェクトの作成

今回使う作業フォルダを作成して、そのフォルダまでコマンドプロンプト上で移動します。
今回作成した作業フォルダは「angular_sample」という名前で作成しました。
作業フォルダまで移動したら、下記のコマンドを実行します。

ng new sample 

ng newコマンドで楽にプロジェクトを作成することができます。
コマンドを実行すると、Would you like to add Angular routing?(y/N)と聞かれるので、yを入力してエンターを押します。 

プロジェクトが作成できたら一度フォルダの中を確認します。

「sample」フォルダ階層を確認すると、「src」→「app」フォルダがあり、その中のファイルを書き換えてWebアプリを作成していきます。
Angularでは、構築していくパーツごとに、「html」ファイルと「css」ファイル、「ts」ファイルが1セットで作成されます。
Angularでの開発のベースとなる「app.component」ファイルがあることも確認しましょう。

・app.component.html
・app.component.css
・app.component.ts

またAngularでは表示するまとまりを、部品単位で作成し、アプリ構築時に複数ある部品を一つの画面で組み合わせて表示します。この部品の単位を「コンポーネント」と呼ぶことも覚えておきましょう。

サーバーを立ち上げてサイトを表示してみる

フォルダの中身を確認することができたら実際にサーバーを起動させて、サイトをブラウザで表示させてみます。
コマンドプロンプトで作業フォルダに移動していることを確認して、下記のコマンドを実行してください。

ng serve –-open

実行すると、途中で英文がでてきて処理が止まりますが、これは「匿名の使用データをGoogle開発者と共有するか?」と聞かれてるので、「N」を押します。
ここから少し時間がかかりますが、待ちます。

プロジェクト内のコードがコンパイルされ、無事に成功すると「http://localhost:4200」でブラウザで開きます。
ブラウザ内で下図の画面が表示されたら成功です。

試しに「app.component.html」の中身をすべて消してみます。コードの変更に合わせて、自動的にAngularが再コンパイルされ、ブラウザの表示が更新されます。

コードを保存するたびに更新がされるので、修正や確認が非常にやりやすいです。

Todoリストアプリを作成してみる

では実際にAngularを使って簡単なアプリケーションを作成してみます。
「app」フォルダの中の「app.component.html」ファイルをエディタで開いて、(元々記載してあるhtmlは削除した上で)下記のhtmlを追加します。

<h1>Todoリスト</h1>

ブラウザで確認すると、真っ白い画面に「Todoリスト」と表示されていることが確認できたかと思います。

次に最初に説明をした「コンポーネント」を作成してみます。
コマンドプロンプトの画面で、下記のコマンドを実行してください。

ng generate component todo-list

このコマンドを実行すると、「todo-list」というコンポーネントが新規作成されます。
確認するには、「src」フォルダ→「app」フォルダ内に「todo-list」フォルダが作られていると思いますが、中に下記のファイルが作成されています。

・todo-list.coponent.html
・todo-list.coponent.css
・todo-list.coponent.ts

では、作成された「todo-list.coponent.ts」の4行目の「selector」として指定されている部分「app-todo-list」をコピーして、「app.component.html」に下記を追加します。

<app-todo-list></app-todo-list>

この状態でブラウザを確認すると、「todo-list works!」という文字が表示されていると思います。
これは「todo-list.component.html」の中身が、<app-todo-list></app-todo-list>と書いてあるところ
に表示されているからです。

次にリストを追加する部分を作成します。
「todo-list.component.ts」の10行目「constructor(){}」の下に下記を追加してください。

Items=[‘やること1’, ‘やること2’, ‘やること3’]

と書きます。このコードは「todo-list.component.ts」側に、Todoリストの内容となるデータを配列として作成しています。

このままでは、ブラウザに表示されないので、配列として渡したデータを表示できるようにします。
「todo-list.component.html」を下記のように書き換えます。

<ul *ngFor="let item of items">
    <li>{{item}}</li>
</ul>

<input type="text" #todo>
<button (click)="addTodo(todo.value)">追加</button>

一緒にリストに、Todoを追加するためのボタンも追加しておきます。
*ngForは、指定した配列(items)を、すべて確認するために使用します。ボタンをクリックすると、テキストボックスの中身をaddTodoメソッドに渡すように指定します。

追加の処理を「todo-list.component.ts」の「ngOnlint()」の下に下記を追加します。

addTodo(todo:string): void {
    this.items.push(todo);
  }

先ほどのaddTodoメソッドの中で、送られてきた文字列をTodoリスト配列に加えます。
この状態で、ブラウザを確認してみます。
テキストボックスが表示されているので、その中に文字列を入力して、追加ボタンをクリックすると項目が追加されました。

項目をリストに追加することができたので、次は追加した項目を削除するという機能を実装したいと思います。
「todo-list.component.html」を、下記のように書き換えます。

<ul *ngFor="let item of items">
    <li>{{item}} <button (click)="removeTodo(item)">削除</button></li>
</ul>

次に「todo-list.component.ts」を下記のように書き換えます。

 addTodo(todo:string): void {
    this.items.push(todo);
  }

  removeTodo(todo:string): void {
    let idx = -1;
    for (let i = 0; i < this.items.length; i++) {
      if (this.items[i] == todo) {
        idx = i;
      }
    }
  if (idx != -1) {
          this.items.splice(idx, 1);
        }
      }

ファイルを保存したら、ブラウザで確認してみます。
「削除」ボタンを押すことで、リストから項目を削除することができました。
もちろんテキストボックスに追加したい項目を入力して追加ボタンをクリックすると、追加されます。

大規模プロジェクトにも適したAngular

今回はAngularのインストールや環境構築に加えて、簡単なTodoアプリを作成しました。
Angularを使う利点としての一つに、冒頭に説明をした「コンポーネント」という仕組みが挙げられます。
コンポーネントは部品単位でグルーピングでき、複雑なHTMLなどを部品化して他のページなどで再利用することが可能で、冗長なプログラムを防ぎ、作業が効率化されるとともにソースコードの可読性も向上します。
このような利点もあり、Angularは大規模なプロジェクトなどでも採用の機会が増えているようです。

ライタープロフィール 合同会社 4D Pocket 石郷祐介

大学卒業後、公設研究機関勤務を経て、情報科学芸術大学院大学[IAMAS]に入学。インタラクティブ作品を作る傍ら、多数のメディアアート作品の実装を手がける。
近年は、開発イベント企画、勉強会講師、コミュニティ形成等も行っている。
合同会社4D Pocket 代表、日本総合ビジネス専門学校 講師。

記事を
シェア