Exploring JavaScript MV Frameworks Part 1 – Hello Backbonejs

JavaScript は、Web で最も人気のあるプログラミング言語の 1 つになっています。当初、開発者はそれを真剣に受け止めませんでしたが、それは単にそれがサーバーサイドプログラミングを対象としていなかったからです。

Katie Mikova Last Updated Feb 21, 2025 14min read

プロの開発者の間では、この言語はユーザーインターフェイスのみに焦点を当てているため、「アマチュア」向けであるという一般的な誤解でした。JavaScript は、Ajax の使用法が明らかになり、プロのプログラマーがページの応答性を重要視したときに脚光を浴びました。しかし現在、ユーザーエクスペリエンスがWeb開発の重要な部分になったため、この言語はこれまで以上に人気が高まっています。Webへのアクセスはブラウザだけに限定されるものではなく、同じコンテンツにアクセスするさまざまな画面サイズのデバイスが数多くあります。HTML5 と CSS3 の台頭により、Web はこれまで以上に適応性と応答性が高くなり、JavaScript はその中で大きな役割を果たします。また、NodeJSフレームワークによって可能になったサーバーサイドプログラミングでも人気を博しています。

最新のアプリケーションでのJavaScriptの使用の増加により、開発者は保守可能なコードを作成し、懸念事項を分離し、テスト容易性を向上させる必要があります。JavaScriptは「クラス」の少ない言語であり、オブジェクト指向プログラミングをサポートするように設計されていませんが、回避策で同様の結果を得ることができます。したがって、オブジェクト指向プログラミングの世界の開発者であれば、慣れるまでは難しいと感じるでしょう。HTMLのクライアント側スクリプトを簡素化するjQueryのようなDOM操作ライブラリはいくつかありますが、実際には関心事の分離を効果的に処理するという問題を解決していません。HTML、JavaScript、およびサーバーからフェッチされたデータの間でデータを同期させるために、多くのjQueryセレクターとコールバックを記述することになりますが、スパゲッティコードに固執します。

幸いなことに、いくつかのライブラリとフレームワークが役に立ちます。JavaScript アプリケーションの構造化に役立ついくつかの概念とライブラリを見てみましょう。

この投稿は、JavaScriptフレームワークとライブラリに関するブログシリーズの最初の部分であり、ここではBackboneJSについて探求します。他の人にもご期待ください!

MV*とは?

そこにあるすべてのフレームワークはMVCになろうとしていますが、必ずしもパターンに厳密に従うわけではありません。すべてのパターンのアイデアは、モデル、ビュー、ロジックを分離し、コントローラーの背後にある2つをフックすることです。ただし、BackboneJSは、分離を効率的に維持しますが、ビュー自体にコントローラロジックを埋め込みます。一方、Model-View-Presenter(MVP)およびModel-View-ViewModel(MVVM)パターンを実装する他のライブラリがあります。このため、これらのフレームワークを MV* 実装と呼びます。

MVCとは?

モデル – ビュー – コントローラーは、長い間存在しており、サーバー側のプログラミングで広く使用されているアーキテクチャパターンです。ASP.net MVC、Ruby on Railsなど、Web開発者が簡単にプログラミングできるようにするフレームワークがいくつかあります。

モデル– アプリケーションデータとビジネスルールを指します。(別名ドメインモデル、エンティティ)

表示– ユーザーが見るもの!(WebブラウザのHTMLページ)

コントローラー– 2つの間の仲介者。ユーザー操作に基づいてモデルを操作します。すべてのロジックを処理します。

Image Source: Wikipedia

MVC In JavaScript?

JavaScript を使用したシングルページアプリケーションの構築は最近人気が高まっており、その良い例は GMail や Google ドキュメントです。これらのタイプのアプリケーションを構築すると、MV* コーディングパラダイムを構成する多くの要素が発明される可能性が高くなります。したがって、代わりに、BackboneJS、KnockoutJS、AngularJS、EmberJSなどの有名なライブラリのいくつかを利用できます。BackboneJS から始めて、これらのフレームワークを詳しく見てみましょう。

フレームワークか、それとも単なるライブラリか?

特定の JavaScript フレームワークまたはライブラリで作業することを選択する前に、この 2 つの違いを理解することが重要です。ライブラリは既存のアーキテクチャに適合し、特定の機能を追加するだけですが、フレームワークはアーキテクチャを提供し、ルールに従う必要があります。簡単にするために、BackboneとKnockoutはJavaScriptライブラリであり、EmberとAngularJSはフレームワークです。それらを調べると、明らかな違いがわかります。

Hello Backbone

Backboneは、CoffeeScriptでも知られるJeremy Ashkenasによって作成された軽量のJavaScriptライブラリです。これは、シングルページWebアプリケーションをサポートするように設計されており、一般的なJavaScriptタスク用のユーティリティ関数を提供するUnderscoreJSライブラリに依存しています。

Backboneでは、データはモデルとして表され、作成、検証、サーバーへの保存が可能です。ビューにはモデルの状態が表示され、UI の操作によりモデル内で変更が (「変更」イベントを介して) トリガーされると、モデル自体が再レンダリングされます。このようにして、Backboneは、データをHTML UIと同期させる構造化されたアプローチを提供します。

Backboneを使用した主要なWebサイトには、USA Today、LinkedIn Mobile、Hulu、WordPress、Foursquare、Bitbucket、Khan Academyなどがあります。

Backboneの使用を開始する

Script Dependency

Backboneは、ユーティリティ関数をUnderscoreJSまたはLo-Dashに依存しており、DOM操作をjQueryまたはZeptoに依存しています。したがって、必ずページに追加してください。

<script type="text/javascript" src="../common/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../common/lodash.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>

Backbone.Model

$(function(){
      var Person = Backbone.Model.extend({});
      var person = new Person({name: "James", age: 51});
      var name = person.get("name");
      var age = person.get("age");
      console.log(name + ":" + age);
});

独自の Model クラスを作成するには、Backbone.Model を拡張し、JavaScript オブジェクトをコンストラクターに渡して属性を設定します。その後、get関数から値を簡単に取得できます。または、set 関数を使用して属性を設定することもできます。

Backbone.View

Set a template first:

<script type="text/template" id="person-template">
    <div class="view">
        <p>Name: <input type="text" value="<%- name%>"/></p>
        <p>Age: <input type="text" value="<%- age%>"/></p>
    </div>
</script>

レンダリング用のコンテナを設定します。

<div id="container">Your content will load in a bit..</div>

Define a view in the script:

//define view
var AppView = Backbone.View.extend({
el: '#container',
model: person,
template: _.template($("#person-template").html()),
initialize: function(){this.render();},
render: function(){this.$el.html(this.template(this.model.toJSON()));}
});
// initialize view
new AppView();

Backboneのビューは、コードよりも慣習的であるため、UIをより明確に分離するには、アンダースコアテンプレートやMustache.jsなどのJavaScriptテンプレートライブラリに依存する必要があります。上記の例では、アンダースコアのテンプレートソリューションを使用して分離を実現しました。

独自のカスタムビューは、Backbone.View.extend を使用して作成できます。ビューを設定するために知っておく必要のある基本的なプロパティはいくつかあります。

エル–DOM 要素を使用します。この場合、idが「container」の<div>要素です。
$el –ビューの要素のキャッシュされたjQuery(またはZepto)オブジェクト
model –Backbone.Model を使用して作成されたモデルデータを設定します。
テンプレート–Backboneは、HTMLテンプレートの好みの方法に関しては、依存しません。この場合、アンダースコアのテンプレート関数を使用して、「person-template」で定義されているテンプレートを設定します。
initialize –この関数は、ビューの作成時にBackboneによって呼び出されます
render –この関数は、ビューテンプレートとデータを使用して要素をレンダリングするために使用されます。この場合、「コンテナ」の値を、モデルのデータで構成されるテンプレート化されたビューに置き換えます

Backboneのドキュメントに記載されているように、Viewクラスは、HTMLテンプレートが真のビューとして機能する、UIから発生するイベントをディスパッチする一種のコントローラーと考えることもできます。これは、Backboneが実際のMVCの原則に従っているかどうかの議論につながります。しかし、MVCライブラリとして学習せず、懸念事項を分離する方法を重要視するのであれば、問題ないはずです。

以前はBackboneも独自のものを持っていましたがBackbone.Controllerこのコンポーネントの名前が設定方法と合わなかったため、Routerに名前が変更されました。

ファイルサイズ、ダウンロード、その他の便利なリンク

ファイルサイズ: 6.3Kb – 縮小され、フルソースとコメント付きで56kb。

Download: Backbone website

Annotated Source: http://backbonejs.org/docs/backbone.html

CDN: cdnjs, jsdelivr

誰が使っていますか?: 例のセクションをチェックしてください

乞うご期待

以上がBackboneJSの簡単な紹介と、JavaScriptフレームワーク全般の説明でした。今後の投稿では、Ember、Knockout、Angularについても紹介します。乞うご期待!

If you have any questions write to me nish@infragistics.com or find me on twitter @nishanil

この投稿では、あなたが私のようなプログラマーで、デザインはあなたの宇宙のすぐ外にある惑星であると仮定しています。あなたがデザインの惑星から来たなら、あなたも読み進めることができます。あなたにも何かがあるかもしれません!

CSS を書くことは、Web サイトがページや複雑なレイアウトで太くなるまで、楽しく、エキサイティングで簡単です。そのようなページのレイアウトを修正しようとしたことがあるなら、私が何を言いたいのかわかるでしょう。レイアウトの修正について話しましたか?そうそう、すべてのブラウザに感謝します。

CSSを書いている間、私はしばしば、単にスタイルを設定するよりも、もっとプログラム的に書けたらいいのにと思いました。たとえば、CSSが変数宣言を許可していた場合、変数の値を保持し、いくつかの操作を実行して、プロパティで再利用するだけで済みました。しかし、それはスタイル設定だけを行うべきスタイルシート言語に求めるには多すぎます!

幸いなことに、Sass & LESSのようなプリプロセッサがいくつかあり、CSS をうまく拡張し、プログラマーが望んでいたものをすべて追加します。いくつかの調査を行った後、それがどのように機能するかを確認するために LESS を手に取りました。私はいくつかのデモを LESS で再スタイリングするのに数時間を費やしましたが、この言語に完全に感銘を受けたと言わざるを得ません。そこで、ここではLESSについて説明します。

So LESS

LESS は、CSS を拡張し、変数、ミックスイン、操作、関数などの優れた機能を追加する動的スタイルシート言語です。さらに重要なことは、開発者が複雑なCSSを作成し、素晴らしい外観のWebサイトを非常に迅速に構築するのに必要な労力が少なくなることです。 LESS は既存の CSS 構文を使用しているため、学習が簡単になり、いつでも CSS にフォールバックできます。

LESSの最初のバージョンはRubyで書かれ、コンパイル時に出力されたCSSのサーバー側言語として使用されました。ただし、それ以降のバージョンでは、Rubyの使用は非推奨になり、JavaScriptに置き換えられます。JavaScript ファイルを HTML ページに追加するとLESS.jsブラウザ内でリアルタイムのコンパイルが可能になります。また、Node.jsを使用してサーバー側のコンパイルをサポートしているため、開発者は 2 つのどちらかを簡単に選択できます。

Adding Less.js – Client-Side Usage

すべての LESS ファイルの拡張子は「.less」である必要があり、Web サーバーの CSS ディレクトリの下に置くことができます。

次のコード行を HTML ページに追加して、ブラウザーで CSS の事前コンパイルが行われるようにします。

<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script src="js/less-1.3.3.min.js"></script>

注: ローカルファイルシステムで作業している場合、つまり Chrome または IE で「file:///」を使用してページにアクセスしている場合、それぞれ「クロスオリジンリクエストは HTTP でのみサポートされています」または「アクセスが拒否されました」というエラーが発生する場合があります。これらはセキュリティ関連のエラーであり、それらを取り除く方法を見つけられませんでした。それらを開発サーバーでホストすると、これが解消されます。ただし、Mozilla Firefoxでは問題は見つかりませんでした。

Server Side Usage

パフォーマンスが頭に浮かんでいる場合は、サーバー側でこれらのファイルをコンパイルすることを検討できます。まず、Node.jsをダウンロードしてインストールし、npmを使用してコンパイラ(lessc.cmd)をダウンロードします。

コンパイルするには、次のコマンドを使用します。

lessc styles.less > styles.css

CSS の縮小などのその他のオプションについては、パラメーターなしでlesscを実行します。

これらのファイルをライブコンパイルできる優れたエディターはほとんどありません。たとえば、入力時にLEWをCSSにうまくコンパイルするWebStormを使用しています。大規模なプロジェクトに携わっていて、ほとんどの開発者が LESS に慣れている場合は、サーバー側のコンパイルステップをビルドタスクに追加できます。

「.less」ファイルを作成してCSSにコンパイルする方法がわかったので、この言語を詳しく見てみましょう。

変数

前述のように、変数はスタイルシートに搭載されている優れた機能の 1 つです。LESS では、@ 記号を使用して変数を追加し、それらをプロパティに使用できます。変数を使用して背景色と体の色を設定する例を以下に示します。

@backgroundColor: #333;
@color: #fff;

body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px #000;
  font-size: .85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
  margin: 0;
  padding: 0;
}

これらの変数はコードの残りの部分で再利用できるようになり、色に加えた変更はすべてすべてに適用されます。CSS コードは LESS と共存できます – プロパティのうち 2 つだけが変数によって設定され、残りが CSS であることに気付いた場合。

オペレーションズ

スタイルシートで変数が可能であることがわかったので、変数に対して操作を実行できることを知ってうれしいはずです。簡単です！その方法の例を次に示します。

@baseColor: #000;
@backgroundColor: (@baseColor + #333);
@color: (@backgroundColor / 3);
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;
#body {
  background-color: @backgroundColor;
  color: @color;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

@backgroundColor、@colorとfont-sizeが操作から計算された値を取得する方法を見てください。生成される出力を以下で確認します。

Output:

#body {
  background-color: #333333;
  color: #111111;
  border-top: solid 10px #000000;
  font-size: 0.85em;
  font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
}

Mixins

ミックスインは、あるルールセットから別のルールセットにプロパティ全体を再利用するのに役立ちます。次に例を示します。

@baseColor: #000;
@font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
@font-Size: 1em;

.gradients {
  /*local scoped variables*/
  @gradientStartColor: #eaeaea;
  @gradientEndColor: #cccccc;
  background: @baseColor; /* variable from global scope */
  background: linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -o-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -ms-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -moz-linear-gradient(top, @gradientStartColor, @gradientEndColor);
  background: -webkit-linear-gradient(top, @gradientStartColor, @gradientEndColor);
}

#body {
 .gradients;
  border-top: solid 10px @baseColor;
  font-size: (@font-Size - .15em);
  font-family: @font-family;
}

上記のコードでは、どのように.gradientsルールセットが再利用されるかを確認できます#body。これは非常に素晴らしい機能です、今書く必要のあるコードがどれほど少ないか考えてみてください!

変数スコープ

他のすべてのプログラミング言語と同様に、LESS も変数スコープを提供します。変数は最初にローカルで検索され、見つからない場合はグローバルに検索されます。上記の例では、@baseColorが両方の. gradientsと#bodyで使用されていることがわかります。@gradientStartColorなどのローカルスコープの変数がある場合@gradientEndColorそれらは混在しない限りスコープ外からアクセスできません。上記の例では#bodyは since.gradients が参照されるため、これらの変数にアクセスできます。

詳細については、「スコープ」を参照してください。

Parametric Mixins

これは、クラスと同様に混在させることができる特別なタイプのルールセットですが、パラメータを受け入れます。以下は、さまざまなブラウザーにborder-radiusを設定する例です。

.border-radius (@radius: 4px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
#body {
 .gradients;
  .border-radius;
  border-top: solid 10px @baseColor;
}
#sidebar{
  .border-radius(25px);
  background: #eee;
}

あなたが見てみると#bodyそれはLESSがパラメータのデフォルト値(この場合は4px)を設定できるため、パラメータなしで呼び出します。参照してください #sidebarパラメーターを使用した呼び出し。複数のパラメータを設定することもできますので、詳しくはこちらをご覧ください。

関数

LESS には、色の変換、文字列の操作、および数学の実行のためのヘルパー関数がほとんどありません。以下に、パーセンテージを使用して0.5を50%に変換し、ベースカラーの彩度を5%増やしてから、背景色を25%明るくし、8度回転させるものに設定するLESSドキュメントの例をご覧ください。

#sidebar{
  width: percentage(0.5);
  color: saturate(@baseColor, 5);
  background-color: spin(lighten(#ff0000, 25%), 8);
}

詳細については、関数リファレンスを参照してください。

概要

ここまでで、LESS が何をもたらすかについてかなりのアイデアが得られているでしょう。ただし、LESS だけが CSS プリプロセッサではないことに注意してください。Syntactically Awesome Stylesheetsの略であるSassと他にいくつかありますが、それらは人気がありません。世の中には、この 2 つの比較をうまく教えてくれるさまざまなブログがあります。両方を試して、好きな構文に固執することをお勧めします。結局のところ、彼らはCSSを出力します Smile

フィードバックはありますか? twitter で私を見つける@nishanil

操作方法