AngularJSのngRouteを使ってシングルページアプリケーション（SPA）を作ってみよう

AngularJSで初めるJavaScriptフレームワーク開発スタイル 第13回

　今までで一通りの機能が作れるような各機能の紹介や、本格的なアプリケーションを作成するためのカスタムディレクティブなどを含めて少々深い部分まで紹介してきました。今回は、ngRouteモジュールを使ってシングルページアプリケーション（以下、SPA）を作成します。

　作成するアプリケーションは以前紹介したTODO管理のアプリケーションと同様のアプリケーションですので、実際の各登録機能などの説明は省略します。ただし、ngRouteモジュールの使い方だけではなくSPAのアプリケーションを作成する際に発生する関連する課題なども合わせて紹介します。

対象読者

• jQueryなどを使っている開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJS（バージョン1.4）を使用し、Chrome（44.0）、IE11、Firefox（40.0）、Safari（8.0.7）の環境にて確認を行っています。また、サンプルコードではデザインのためにBootstrap（バージョン3.3.5）とjQuery（2.1.4）を使用しています。

なぜ今、SPAが注目されているのか？

　SPAは1つのページによるWebアプリケーションですが、実際のページの切り替えはDOMの操作により行い、図1に示すように一般的にはAjax等の非同期通信を使ってデータ取得・更新などを行います。

図1　シングルページアプリケーションの概要

　SPAはスマートフォンサイト、特にjQuery Mobileにより開発者には利用が身近になってきましたが、最近ではより注目を集めるようになりました。

　jQuery Mobileの1.0がリリースされた当時はスマホでのスムーズな画面遷移を実現する為など限定的な利用でしたが、最近ではリアルタイムコミュニケーション（SNS的要素）を求められるアプリケーションや、Apache CordovaのようにHTML ＋ JS ＋ CSSだけでスマートフォン向けのネイティブアプリが作成されるようになり、SPAの技術が必須のケースも出てくるようになりました。

　これらは、クライアント側での「バックグラウンド処理」つまり、画面と直接連動しないロジックとそのイベント処理や、「オフラインやデータ通信の遅さへの対応」が一般的に必要になり、SPAでなければ実現することが難しくなっています。

　ただし、SPAにはあまり向いていないものもあります。例えば、コンテンツ自体をJavaScriptで構築してしまうのでSEO対策が必要なサイトにはあまり向いていません。

　また、長い間使い続けるようなアプリケーションの場合には、メモリリーク等で画面が固まってしまうなどのケースがあり、複雑で大きなアプリケーションの作成は難しく注意が必要です。

　しかしながら、オフィス系ツールもブラウザで使えるようになっているので、現在では非常にSPAは適用範囲が広い手法になっています。今後、SPAはますます広がって行くことでしょう。

AngularJSでSPAを作るには

　ある程度大きなSPAとしてアプリケーションを作るとなると簡単ではありませんが、AngularJSでSPAを作るには、ng-show/ng-hide/ng-if/ng-includeなどを使えば作成することも可能です。しかし、以下のような問題が起きやすくなります。

1. 大きなDOMが構築されやすくなる。
2. 分離して複数の人で開発することが難しくなる。
3. 画面のリロードや、戻るボタンなどに対応できない。

　これらに対応するために、AngularJSではngRouteというサービスが用意されています。