Angular
SPA（Single Page Application）では、サーバーサイドの開発だけでなくフロントエンドの開発も必要になります。近年ではReact、Angular、Vue.jsといったJavaScriptフレームワークが人気を博しています。
本連載ではこの中からAngularを使って、開発を進めていきます。これはDjangoとAngularの相性が良いからというわけではなく、筆者の好みによるところが大きいです。実際の現場ではPythonのWebフレームワークを選んだ際と同様に、開発の規模や必要な機能、開発メンバーの習熟度などを鑑みてフレームワークの選定を行ってください。
Angularに馴染みがない方もいると思うので、ここでAngularの特徴を軽く紹介します。
Angularは、Reactとは違いフルスタックなフレームワークとして知られています。フロントエンド開発に必要となる、データバインディング、非同期通信、ルーティング、テストなどが一通りそろっています。したがって、ライブラリ同士の相性やバージョンの不整合などを気にすることなく、プロジェクトを作成した時点からすぐに開発を始めることができます。
より詳しくAngularの特徴を知りたいという方は、日本語ドキュメント特徴と利点をご覧ください。
それではAngularプロジェクトを作成していきましょう。まずは、node 8.x以上とnpm 5.x以上がインストールされていることを確認してください。古いバージョンを使っている場合はエラーの原因となりますが、新しい分には問題ありません。ここでは以下のバージョンで開発を進めていきます。
$ node -v v10.14.1 $ npm -v 6.5.0
Angular CLIのインストール
Angular CLIは、Angularアプリケーションの開発を支援するための公式CLIツールです。
Angular CLIを使うことで、最新のスタイルガイドとベストプラクティスにのっとったアプリケーション開発を容易に実践できます。
グローバル環境にAngular CLIをインストールしましょう。
$ npm i -g @angular/cli
正常にインストールされれば、ngコマンドが使えるようになっています。ng versionを実行して、インストールされたAngular CLIのバージョンを確認してみましょう。
$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 7.1.0
Node: 10.14.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.11.0
@angular-devkit/core 7.1.0
@angular-devkit/schematics 7.1.0
@schematics/angular 7.1.0
@schematics/update 0.11.0
rxjs 6.3.3
typescript 3.1.6
Angularプロジェクトの作成
Angular CLIを使って、Angularアプリケーションのプロジェクトを作成します。
プロジェクトを作成するには、ng newコマンドを使います。modern-djangoディレクトリに移動して、以下のコマンドを実行してください。
$ ng new static ? Would you like to add Angular routing? No ? Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS SCSS [ http://sass-lang.com ] SASS [ http://sass-lang.com ] LESS [ http://lesscss.org ] Stylus [ http://stylus-lang.com ]
「Would you like to add Angular routing?」という質問に対しては、今回のプロジェクトではルーティングを使わないのでNoと答えておきます。また「Which stylesheet format would you like to use?」という質問に対して、ここではCSSとしておきます。このスタイルシートのフォーマットに関しては、各自が使いやすいものを選択してください。
新しくstaticディレクトリが作成され、プロジェクトのセットアップが始まります。npmから必要となるパッケージをインストールしているため多少の時間がかかります。セットアップが完了したら、以下のようなディレクトリ構成になっていることを確認してください。staticディレクトリ配下に新しくファイルが作成されていることがわかります。
modern-django
├── config
│ ├── __init__.py
│ ├── db.sqlite3
│ ├── settings
│ ├── urls.py
│ └── wsgi.py
├── kanban
│ ├── __init__.py
│ └── board
├── manage.py
├── requirements
│ ├── base.txt
│ ├── local.txt
│ └── test.txt
└── static
├── README.md
├── angular.json
├── e2e
├── node_modules
├── package-lock.json
├── package.json
├── src
├── tsconfig.json
└── tslint.json
今回はアプリケーションの規模が小さいため、DjangoプロジェクトとAngularプロジェクトを同じリポジトリ内で管理しています。大規模な開発であったり、フロントエンドとバックエンドの開発が分業となっているような場合では、それぞれ独立したリポジトリで管理するのがよいでしょう。
Angularアプリケーションの実行
Angular CLIで作成されたプロジェクトは、すでに実行可能な状態になっています。さっそくng serveコマンドを使って、開発用サーバを立ち上げてみましょう。
$ cd static $ ng serve
ビルドが終わってから、http://localhost:4200/にアクセスすると以下のような画面が表示されます。
ng serve実行中に変更されたファイルは自動的にビルドされます。試しにstatic/src/app/app.component.tsを開いてAppComponentのtitleプロパティを変更してみましょう。
// ...省略...
export class AppComponent {
// title = 'static';
// titleプロパティを以下のように変更
title = 'Angular';
}
title名を'Angular'という文字列に変更して保存すると、ブラウザが再読み込みされて「Welcome to Angular!」という表示結果に変わっていることが確認できます。
Angular Materialの導入
コンポーネントをゼロからデザインするのは手間がかかり、複雑な作業になりがちです。UIライブラリを採用することで、自分で実装する労力を省くことができ開発の効率化が図れます。
Angular公式ドキュメントには推奨UIライブラリ（UIコンポーネント）が掲載されています。
本連載では、その中からAngular Materialを採用します。Angular Materialは、Googleが提唱したMaterial DesignにのっとったAngular公式のUIコンポーネントです。
次のコマンドでAngular Materialをインストールしてください。あとで必要となるAngular Component Dev Kitも併せてインストールします。
$ npm i @angular/cdk @angular/material
