Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/10/14 14:00

 今までで一通りの機能が作れるような各機能の紹介や、本格的なアプリケーションを作成するためのカスタムディレクティブなどを含めて少々深い部分まで紹介してきました。今回は、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 シングルページアプリケーションの概要
図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というサービスが用意されています。


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

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:AngularJSではじめるJavaScriptフレームワーク開発スタイル

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5