JavaScriptでクライアントMVCに挑戦! -野村亮之

Backbone.jsは現在、クライアントMVC(もしくはMVVM)フレームワークの中でKnockout.jsと共に代表的なJavaScript MVVM Frameworkとして利用されています。ここでは、実際のWebアプリの中での使い方を通して、皆さんにBackbone.jsの基礎的な使い方をお伝えしていこうと思います。
※この記事の内容は2013年12月26日時点の情報です。

JavaScriptでクライアントMVCに挑戦!

Backbone.js

いまや、Webサービスのクライアント側を司る言語として揺るぎない地位を獲得したJavaScript。jQueryに代表されるJavaScriptライブラリはプラグインも充実していて、見た目にリッチなアプリケーションやウェブページが簡単に制作できる様になってきたのではないでしょうか?

ただ、Webアプリケーションの構造をしっかりと書いていくには、かなりのスキルが必要です。 JavaScriptライブラリ側で、構造自体を管理する様な仕組みを備えていないライブラリも多いため、会社・個人単位での独自の考え方に沿って実装をしてしまうケースがまだまだ多いのではないでしょうか?

それらの問題を解決するために、クライアントMVCといわれるクライアント側でModel部・View部・Controller部を分けて管理し、体系化されたプログラムがかけるFrameworkが注目され始めています。

Backbone.jsは現在、クライアントMVC(もしくはMVVM)フレームワークの中でKnockout.jsと共に代表的なJavaScript MVVM Frameworkとして利用されています。

今回の課題では、全3回を通して、 実際のWebアプリの中での使い方を通して、皆さんにBackbone.jsの基礎的な使い方をお伝えしていこうと思います。

第1回:JavaScriptでオブジェクト指向を実践・Viewを使ってHTMLページを管理
第2回:アプリをView機能でかいてみる・Modelを使ってデータのやりとりをしてみる
第3回:0からの本格的な実装・便利機能を使ってアプリを作ってみる

3回を通して、簡単なアプリが構築できる課題を提供していく予定ですので、是非実践してみてください。

[第1回]Backbone.jsでクライアントMVCに挑戦!

いまや、Webサービスのクライアント側を司る言語として揺るぎない地位を獲得したJavaScript。jQueryに代表されるJavaScriptライブラリはプラグインも充実していて、見た目にリッチなアプリケーションやウェブページが簡単に制作できる様になってきました。ただ、Webアプリケーションの構造をしっかりと書いていくには、かなりのスキルが必要です。…

[第2回]スマートにデータをHTMLに。Backboneで簡単アプリデータ管理

まずは、Backbone.ModelとBackbone.Collectionの説明をしていきます。 2つとも、Webアプリ上でデータを扱う機能です。関係性としては、Backbone.Modelの集合体が、Backbone.Collectionだと考えてください。Modelでは、基本的には、1レコード(1オブジェクトという言い方がいいかもしれません)のデータを管理します。…

[第3回]最終回!Backbone.js+αでリッチなまとめエディタ作成

過去2回で、HTMLベースのページに、Backbone.jsを導入していく手順を中心にして、Backboneの主機能であるBackbone.ViewとBackbone.Model、Backbone.Collectionについて学んできました。最終回は、いままで2回で学んだことを組み合わせ、さらにできるだけBackbone.jsの他の機能(Backbone.Sync、Backbone.Events)…

type IT Academyのトップページへ

簡単!エンジニア体験ゲーム
簡単!エンジニア体験ゲーム

その他の条件で探す

typeでは職種や勤務地、仕事探しで譲れないこだわりの条件など、様々な切り口から自分の働き方に合った求人を探すことができます。気になるキーワードやテーマから転職・求人情報をチェックしてください。

転職活動を進める

あなたの転職活動をサポートする、typeの各種サービスをご案内します。

  • スカウト

    スカウト

    匿名だから安心!あなたに興味を持った企業の採用担当から直接メールが届くサービスです。

  • オファーDM

    オファーDM

    あなたが登録した情報と近い内容の募集条件の企業から、メールが届くサービスです。

  • 検討中リスト

    検討中リスト

    興味を持った求人を保存しておくことができ、気になる求人を一覧にて比較検討できます。