要件定義の不安をなくす。要件定義の不安をなくす。ユニファのバックエンド分割に学ぶイノベーションメタバース開発に必要な技術の基本知識をおさらい。Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。KB)今までで一通りの機能が作れるような各機能の紹介や、本格的なアプリケーションを作成するためのカスタムディレクティブなどを含めて少々深い部分まで紹介してきました。今回は、ngRouteモジュールを使ってシングルページアプリケーション(以下、SPA)を作成します。作成するアプリケーションは以前紹介したTODO管理のアプリケーションと同様のアプリケーションですので、実際の各登録機能などの説明は省略します。ngRouteモジュールの使い方だけではなくSPAのアプリケーションを作成する際に発生する関連する課題なども合わせて紹介します。必要な環境この記事では、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等の非同期通信を使ってデータ取得・更新などを行います。Mobileにより開発者には利用が身近になってきましたが、最近ではより注目を集めるようになりました。CSSだけでスマートフォン向けのネイティブアプリが作成されるようになり、SPAの技術が必須のケースも出てくるようになりました。これらは、クライアント側での「バックグラウンド処理」つまり、画面と直接連動しないロジックとそのイベント処理や、「オフラインやデータ通信の遅さへの対応」が一般的に必要になり、SPAでなければ実現することが難しくなっています。SPAにはあまり向いていないものもあります。コンテンツ自体をJavaScriptで構築してしまうのでSEO対策が必要なサイトにはあまり向いていません。長い間使い続けるようなアプリケーションの場合には、メモリリーク等で画面が固まってしまうなどのケースがあり、複雑で大きなアプリケーションの作成は難しく注意が必要です。オフィス系ツールもブラウザで使えるようになっているので、現在では非常にSPAは適用範囲が広い手法になっています。今後、SPAはますます広がって行くことでしょう。AngularJSでSPAを作るにはある程度大きなSPAとしてアプリケーションを作るとなると簡単ではありませんが、AngularJSでSPAを作るには、ng-show/ng-hide/ng-if/ng-includeなどを使えば作成することも可能です。以下のような問題が起きやすくなります。大きなDOMが構築されやすくなる。分離して複数の人で開発することが難しくなる。画面のリロードや、戻るボタンなどに対応できない。これらに対応するために、AngularJSではngRouteというサービスが用意されています。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。新着記事一覧を見るイベント今後の予定を見るCodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。