SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

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

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

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

 作成するアプリケーションは以前紹介した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というサービスが用意されています。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ngRouteモジュールにおけるルーティングとは

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
AngularJSではじめるJavaScriptフレームワーク開発スタイル連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8988 2015/10/14 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング