Tutorial: Creating Your First Application

> このドキュメントは[Tutorial: Creating Your First Application](http://developer.yahoo.com/cocktails/mojito/docs/getting_started/mojito_getting_started_tutorial.html)の翻訳です

このチュートリアルでは、Controllerを使って、一つのページを表示する簡単なアプリケーションを作ります。

ここで学ぶのは:

* アプリケーションを作る
* mojitを作る
* mojitを設定する
* Controllerでアクション（メソッド）を実行する
* 自動テストを実行する

# アプリケーションを作る

1\. アプリケーションのためのディレクトリ（今後、アプリケーションディレクトリと呼びます）を作成し、その中へ移動します

`$ mkdir mojito_apps`

`$ cd mojito_apps`

2\. Mojitoアプリケーション *minty_app* を作成します

`$ mojito create app minty_app`

3\. アプリケーションディレクトリに移動します

`$ cd minty_app`

# サンプルMojitを作る

**Mojit** は、Module と Widget が合わさってできた言葉です。しかし Mojit は、ModuleでもWidgetでもありません。かわりに、出力のための命令の集合体、と捉えるのが良いでしょう。Mojitsは、MVCの構造をもち、二つの部分から成り立っています。それは、**定義**と**インスタンスの設定**です。

**定義**には、Mojitのための Controller と Model が含まれ、View や Asset と一緒に、出力のために使われます。また、コードの単体テストも含まれています。

**インスタンスの設定**は、それぞれのMojitのインスタンスに対する設定を意味します。例えば、RSSフィードを表示させるための *RSSMojit* を作ったとしましょう。そのMojitの定義には、フィードを取得するためのコードと表示するためのビューがあり、インスタンスの設定では、取得するためのURL、いくつの項目を表示するのか、そしてサムネールを表示するのかどうか、といった設定が含まれるでしょう。

では、さっそくMojitの作成に取りかかりましょう。今回のチュートリアルでは、ModelとViewは扱わないことに注意してください。

1\. *minty_app* のためにMojitを作りましょう

`$ mojito create mojit HelloMojit`

Mojitoコマンドラインツールは、*HelloMojit* という名前のMojitを作成します。

2\. *HelloMojit* を使うように設定するために、*application.json* を以下のように置き換えます。

```application.json
[
  {
    "settings": [ "master" ],
    "appPort": 8666,
    "specs": {
      "hello": {
        "type": "HelloMojit"
      }
    }
  }
]
```

これで、*HelloMojit* Mojitのインスタンス *hello* が定義され、Controllerで機能を呼び出すことができるようになりました。

3\. 実行させるために新しいルーティングルールを設定しましょう。以下のようにルーティングルールを、*routes.json* に加えます。

```routes.json
[
  {
    "settings": [ "master" ],
    "hello index": {
      "verbs": ["get"],
      "path": "/",
      "call": "hello.index"
    }
  }
]
```

この *routes.json* ファイルでは、ルーティングパス、HTTPメソッドに対応した **アクション** の定義を行います。アクションは、設定されたパスの呼び出しがあったとき、Mojitインスタンスのどのメソッドを呼び出すかを定義したものです。
上記の *routes.json* の設定では、ルートパスでHTTP GETメソッドを受信したとき、*application.json* で設定された、*hello* インスタンスから *index* メソッドが実行されます。

4\. アプリケーションディレクトリから、アプリケーションをテストしましょう。するとあなたは、いくつかのテストが失敗したことに気づくでしょう。

`$ mojito test app .`


# サーバを立ち上げる

1\. サーバを立ち上げる

`$ mojito start`

2\. ブラウザで[http://localhost:8666/](http://localhost:8666/)にアクセスする

3\. 開いたWebページは、"Mojito is working."と表示されているはずです。この文字列は、`minty_app/mojits/HelloMojit`ディレクトリにある`controller.server.js`によって提供されています。あなたは、次の『サンプルMojitを改造する』項目で *Controller* について学ぶことになります

4\. サーバを停止するには、ターミナルに戻って **Ctrl-C** を入力します

# サンプルMojitを改造する

これからControllerを修正して、Controllerが呼び出すindex関数に別の結果を表示させます。

1\. `mojits/HelloMojit`に移動します

2\. `controller.server.js`を編集して、'Just a simple mojit.'を'Hello World!'に置き換えましょう。編集すると、`controller.server.js`はちょうど以下のようにになるでしょう

```Javascript
YUI.add('HelloMojit', function(Y) {
  /**
  * The HelloMojit module.
  *
  * @module HelloMojit
  */
  /**
  * Constructor for the Controller class.
  *
  * @class Controller
  * @constructor
  */
  Y.mojito.controller = {
    init: function(config) {
      this.config = config;
    },
    /**
    * Method corresponding to the 'index' action.
    *
    * @param ac {Object} The action context that
    * provides access to the Mojito API.
    */
    index: function(actionContext) {
      actionContext.done('Hello World!');
    }
  };
}, '0.0.1', {requires: []});
```
"controller"が、ちょうどJavaScriptオブジェクトに見えるように、"action"もオブジェクトから呼び出されるメソッドとなります。メソッドの結果はactionContextオブジェクトを通してMojitoに返されます

3\. testディレクトリに移動しましょう

4\. `controller.server-tests.js`を編集して、'Mojito is working.'という文字列を'Hello World'で置き換えましょう。`controller.server-test.js`は以下のようになるはずです

```Javascript
YUI.add('HelloMojit-tests', function(Y) {
  var suite = new YUITest.TestSuite('HelloMojit-tests'), controller = null, A = YUITest.Assert;
  suite.add(new YUITest.TestCase(
    {
      name: 'HelloMojit user tests',
      setUp: function() {
        controller = Y.mojito.controller;
      },
      tearDown: function() {
        controller = null;
      },
      'test mojit': function() {
        var actionContext, results;
        A.isNotNull(controller);
        A.isFunction(controller.index);
        actionContext = {
               done: function(data) {
                 results = data;
               }
             };
        controller.index(actionContext);
        A.areSame('Hello World!', results);
      }
    }
  )
);
```
Mojitoでは、`controller.server-tests.js` によって単体テストを行います。この場合のテストでは、assert文で与えられた文字列と *index* アクションによって出力される文字列が同じであることを保証します。

5\. アプリケーションディレクトリからテストを実行してみましょう

`$ mojito test app .`

6\. サーバを再起動させ、もう一度ブラウザで[http://localhost:8666/](http://localhost:8666/)にアクセスしてください。すると、"Hello World!"表示されるでしょう

7\. おめでとうございます！さあ次は、[code samples](http://developer.yahoo.com/cocktails/mojito/docs/code_exs/)に挑戦したり、[Mojito Documentation](http://developer.yahoo.com/cocktails/mojito/docs/)をチェックしてみましょう！