SHOEISHA iD

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

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

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

はじめてのJavaScriptフレームワーク選び

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

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

 JavaScript MVCフレームワークというものを知っているでしょうか? 実際に使ったことがなくても、言葉だけは聞いたことがある方が増えてきているのではないかと思います。最近はJavaScriptにもMVCフレームワークを使った開発スタイルが普及しつつあり、ちょっと勉強したいと思った方や、どうしてそのようなものを使う必要があるのか疑問に思っている方などに、MVCフレームワークを使った開発スタイルのメリットを伝えられればと思います。

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

対象読者

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

必要な環境

 この記事では、AngularJSを使用し、Chrome(36.0)、IE11、Firefox(31.0)、Safari(7.0.5)の環境で確認を行っています。

JavaScript開発の歴史

 フレームワークを説明する前に、10年ほど前から現在までのJavaScriptが歩んできた流れが分かると、どうして今、JavaScriptにもフレームワークが必要になってきているのか、または開発者はフレームワークに何を求めているのかが多少は見えてくることと思います。

図1 JavaScriptとブラウザやHTMLのバージョン年表
図1 JavaScriptとブラウザやHTMLのバージョン年表

 2005年くらいまではJavaScriptは利用者や開発者から避けられていた技術で、たとえ使われても、非常に簡単で、しかも限定した利用用途でした。というのも、JavaScriptはデフォルトで利用不可という前提でありJavaScriptが必須であってはいけませんでした。Ajaxの手法を使ったGoogle Mapなどのサービスが出てきて、Ajaxという技術を使うと非常に便利なことができるということが認知され始め、Ajaxという言葉が技術トレンドとしてはやりだしました。

 それでも、まだ当時は、同じようなものを作るなら、AjaxよりもFlashのほうがよいという認識がありました。しかし、Google MapやGoogleストリートビューなどのサービスのおかげで、JavaScriptを気軽に使ってもよい風潮が出始め、2006年頃からJavaScriptの用途がだんだんと広がり、jQueryなどを含めてJavaScriptのライブラリ化がゆっくりではありますが進んできました。

 さらに、iPhone(第2世代以降)、Androidというスマートフォン(以下、スマホ)の流れや、PCでもChromeブラウザの利用率が高まるなど、HTML5をサポートするブラウザの普及がその流れを加速させました。特にスマホでは、JavaScriptがブラウザで動作する唯一のプログラム言語となったために利用が広がりました。また、jQuery MobileのようにHTMLをAjaxで取得してからページの表示を切り替えるアプリケーション(シングルページアプリケーション)が最近では広まりつつあり、アプリケーションの規模の拡大とともに複雑さが増してきています。

現在のJavaScriptを用いた開発で発生しやすい問題点、課題点

 スマートフォンアプリやシングルページアプリなどの手法が使われる最近のJavaScriptでの開発では以下のような問題、課題が挙がるようになってきました。

  • JavaScriptのグローバル関数、グローバル変数による他の開発者との重複問題やそのことによる生じる不具合(名前空間の汚染問題)
  • 再利用可能なコードの作成方法
  • メンテナンス性を考慮したフォルダ構造やファイル名のルール
  • jQueryなどを利用する際のHTML要素のidやclassの管理とその依存管理
  • テストなどを考慮した品質管理の必要性
  • シングルページアプリケーションのブラウザバックなどの問題
シングルページアプリケーションのブラウザバック問題

 シングルページアプリケーションでは、画面遷移する際に実際にURLが変わって遷移する代わりに、ajaxで取得したページを表示することで画面遷移を行います。そのため、ブラウザバッグをすると最初のページに戻ってしまいます。この問題を回避するためには、画面を変更した際にURLをそれに合わせて変更する必要があります。そのようにすることで、ブラウザでの戻るボタンを押しても通常の利用のように前の画面を表示することができます。

 AngularJSなどのMVCフレームワークは、これらの問題に対して解決方法を提示してくれています。従って、うまくフレームワークを使うことによって問題を解決できます。

 また、実際にはこのような状態にはまだなっていなくても、すでに1つのHTMLにつき複数ファイルのJavaScriptの作成が必要という状態にはなっていると思います。

 そのようなケースでも、将来起こりえる問題や課題をスムーズに解決するために、あらかじめ知っておくことは決して無駄ではありません。

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

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

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

メールバックナンバー

次のページ
MVCフレームワークの比較

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

  • 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/8149 2014/10/10 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング