この記事のシリーズでは、MVC や、推奨されるフレームワークやツールなど、オープンなウェブアプリのアーキテクチャのコアコンセプトを紹介します。

さまざまなツールの選択肢や学ぶべき新しい理論など、オープンなウェブアプリを構築するにはさまざまな方法があります。 このシリーズでは、最新のウェブアプリ開発について学ぶときに出くわす可能性のあるツールの種類を紹介し、ウェブ上で使用される最も一般的なタイプのアプリのアーキテクチャである Model View Controller(MVC)の理論について説明します。 その理論を取り上げ、チュートリアルのセットを紹介して、自分で MVC アプリを構築できるようにします。

メモ: このシリーズでは、最新のWebアプリの基礎となる技術である HTML、JavaScript、CSS の基本について既に理解していることを前提としています。 これらのものに初めての方は、最初に基礎を理解するためのチュートリアルを学習することをお勧めします。 手始めは、MDN の学習エリアです。

メモ: このシリーズでは、MVC アーキテクチャやウェブフレームワークに精通していることを前提とせず、基礎の初めから終わりまで手を取っていきます。 もし MVC/アプリ開発に熟練していて、少しの世話で最新のウェブアプリを迅速に構築する方法を示すクイックスタートガイドが必要な場合は、代わりにアプリのクイックスタートを調べる必要があります。

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

複雑な最新のウェブアプリを構築し始めたばかりで、使用するツールを調べようとすると、利用可能な選択肢の数が膨大でイライラすることでしょう。 このシリーズを通して、ツールをお勧めして、これらツールを使用する方法を説明します。 説明している理論を実証する手段として、また動作する例を紹介します。

使用するツールは、Mozilla 推奨のツールチェーンの一部を構成しています。 そのツールのセットは、私たちのウェブアプリチームが試し、最小限の手間でうまく動作することを確認するためにテストされています。 ここで強調しているのは、「推奨」です。 私たちは、実用主義以外の理由で特定のツールセットを宣伝しようとしていません。 私たちは、他のツールを試してはいけない、あるいは私たちの選択が全ての人に最適であると言っているわけではありません。 すでにウェブアプリ開発経験がある場合は、すでにお気に入りがあるはずです。

このシリーズで使用する主なツールは、Ember.js と Ember CLI です。 Ember.js は、MVC アプリの迅速な開発のためのよく知られたフレームワークであり、Ember CLI は Ember のコードを生成するためのコマンドラインインターフェイスです。 Ember アプリの作成でこれをインストールする方法を学びます。

この記事のシリーズ

MVC アーキテクチャ
この記事では、MVC アーキテクチャの様々な機能を一般的な意味で説明し、Ember が基本レベルでこれを実装する方法を駆け足で説明します。
Ember アプリの作成
次に、新しい Ember アプリを作成するために必要な基本的な手順について説明します。
ビューとテンプレート
この時点で、ビュー(View、MVC の V)が、テンプレート(どのビューでどのコンテンツを表示するかを定義します)を使用して Ember が実装する方法と、ルート(各ビューを見つける URL を定義します)について学びます。
コントローラ
コントローラ(Controller、MVCC)は、例えばユーザーの活動に応答してアプリ状態が変化したときに何が起こるべきかを定義し、応答としてビューやモデルを更新するロジックを提供します。 この記事では、コントローラの概要と Ember による実装方法について説明します。
モデルとアプリのデータ
この記事では、モデルを Ember で使用する方法を説明するなど、モデル(ModelMVC の M)を詳しく見ていきます。 モデルは、アプリのデータの形式と構造を表し、ビューとコントローラからの要求を管理します。 また、Ember のデータを扱う方法と、サードパーティの JS ライブラリの機能を組み込む方法についても説明します。
Ember アプリのスタイリング
これでアプリの機能が完成しましたので、あなたはそれをより魅力的に見せるためにスタイルを設定したくなることでしょう。 Ember(そして他のフレームワーク)のほとんどのものと同様に、これを行うための厳しい規則があります。 この記事では、Ember アプリで CSS、画像、フォントを使用する方法について説明します。
アプリの公開
アプリに満足して一般公開する準備が整ったら、他のユーザーがアクセスできる場所でホストする必要があります。 この記事では、本番用の Ember アプリを構築し、Github に簡単なテストの仕掛けとして公開するために必要な手順について説明します。

次に

状況を説明したので、MVC アーキテクチャの背後にある理論と Ember.js がどのように実装しているかを調べることから始めましょう。

 

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

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