MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

モダン web アプリ アーキテクチャ

 

このシリーズ記事では、オープンwebアプリのアーキテクチャを紹介し、それにはMVCや、推奨フレームワークとツールなどを含みます。

web アプリケーションをビルドする方法はたくさんあって、多くのツール選択や、学ぶべき理論もいっぱいあります。このシリーズでは、モダンwebアプリの開発を学ぶときに出くわすツール選択を紹介し、次に、Webで使われる最も一般的なアプリアーキテクチャの Model View Controller (MVC) の背後にある理論に連れて行きます。理論をカバーしたら、自分のMVCアプリを新規でビルドできるようなチュートリアル群に連れて行きます。

: このシリーズでは、HTML, JavaScript, CSSといった、モダンwebアプリの基礎となる技術の基礎については、既に親しんでいることを前提としています。これらについてもなじみのない場合、最初に基本を掴むために、チュートリアルを学習することをお勧めしています。MDN の学習エリア が良いスタート場所となります。

: このシリーズでは、MVCアーキテクチャやwebフレームワークに習熟していることを想定しておらず、手を取ってそれらの基礎を通って行きます。あなたが経験のあるMVC/アプリ開発者で、単にモダンwebアプリを作る方法を示す、ほぼ手助けのないクイックスタートガイドを希望する場合、代わりに アプリのクイックスタート を確認してください。

たくさんのツールの選択肢

あなたが複雑なモダンwebアプリケーションをビルドし始めたばかりで、どのツールを使うかを調査してみた場合、使える選択肢の数が多いのにイライラするのは簡単です。このシリーズ記事を通じて、あなたにツールをお勧めして使い方を示します、それは単に説明してきた理論を表現するためのツールです。また動作例も示します。

Mozilla 推奨のツールチェーンの一部から使うツールは、我々のwebアプリチームが、騒ぎが最少になるかを確認するのに試用してみてテストしたものです。ここで強調しておくことは "推奨"です: すなわち実用性とは別の理由により、特定のツールのセットを推進しようとしてはいません。あなたが別のツールを使うべきでないとは言いませんし、我々の選択肢が全ての人にとってベストと言うつもりもありません。Webアプリの開発経験が豊富な場合は、お気に入りのものが既にあるでしょう。

このドキュメント群で使う主なツールは Ember.js/Ember CLI です。Ember.js はMVCアプリケーションの高速開発用フレームワークとして有名で、Ember CLI は、Emberのコードを生成するコマンドラインインターフェイスです。インストール方法は Ember アプリを作成する にて学べます。

この記事のシリーズ

MVC アーキテクチャ
この記事では、EmberがMVCを基本レベルに実装する方法を通して見て行く前に、一般的な意味でのMVCアーキテクチャでの、様々な機能を説明します。
Ember アプリを作成する
次に、新規のEmberアプリを作成するのに必要な基本ステップにお連れします。
ビューとテンプレート
この時点では、ビュー (View; MVCのV) についてと、Emberにてテンプレート(それぞれのビューで見えるコンテンツを定義するもの) を使って実装される方法と、ルート (それぞれのビューを見つける URL を定義するもの) について学びます。
コントローラ
コントローラ (Controllers; MVCC) は、アプリケーションの状態が変化した時に起きるロジックを定義します。例えば、ユーザアクティビティに対する反応や、ビューの更新や、モデルへの反応です。この記事では、コントローラを紹介し、Ember がそれを実装する方法を示します。
モデルとアプリケーションデータ
この記事ではモデル (Model; MVCのM) を詳細に見て行き、Emberでそれを使う方法の説明も入っています。モデルはアプリケーションデータの形式と構造を表現し、ビューとコントローラからのリクエストを管理します。またEmberでデータを扱うことや、サードパーティの JS ライブラリの機能と協調させる方法についても見ます。
Ember アプリをスタイリングする
アプリの機能が完成したら、間違いなく見栄え良く、もっと使いたくなるようアピールさせたくなるでしょう。Emberの(その他のフレームワークでも)大半のことと同様に、これを行うには厳密なルールがあります。この記事ではあなたのEmberアプリで、CSSや、画像や、フォントをどう使うかを探検します。
アプリを発行する
アプリに満足して、公にリリースする準備ができた時、他の人がアクセスできる場所にホストしておく必要があります。この記事では、製品用のEmberアプリのビルドに必要な手順と、簡単なテスト機構としてGithubで発行することを取り扱います。

次に

シーンをセットし終えたら、MVCの背後にある理論と、それが Ember.js にどう実装されているかを探検し始められます。

 

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3, chrisdavidmills
 最終更新者: Uemmra3,