初めてのMeteorアプリ作成

Meteorの公式サイトのチュートリアルはとても良くできています。
今回は第一歩として、アプリの作成について説明します。
公式チュートリアル1の内容に沿った説明と多少の補足をします。

事前準備

まず、Meteorのインストールが完了している必要があります。
まだの方は、Meteorをインストールしようを参照してインストールしてください。

既にインストールされているかは下記のコマンドで確認できます。

meteor --version

これでインストールされているバージョンが表示されます。

アプリ名の決定

まず、アプリ名を決めましょう。ここで言うアプリ名はアプリのフォルダ名になります。
フォルダ名は一般的には半角文字のみの方が便利なので、日本語ではなく、英語かローマ字表記にしましょう。
ここでは、sample-appとして説明します。

アプリの作成

Meteorのコマンドはターミナルで実行します。Windowsの場合はコマンドプロンプトです。ターミナルやコマンドプロンプトに慣れていないと戸惑うかもしれませんが、次第に慣れてくるかと思います。

ターミナルを開いたら、まずアプリのフォルダを作成したい場所に移動します。よく分からない方は、初期状態のホームディレクトリでよいかと思います。
その後、ターミナルに次のように打ち込みます。(windowsの場合はcurlコマンドがないため、ブラウザで開いてファイルに保存するとよいでしょう)

meteor create sample-app
cd sample-app
rm -rf client server
meteor add session
curl https://raw.githubusercontent.com/meteor/simple-todos/8e14e687c3fe4add10f1d93215051d27faf3dd7c/simple-todos.css > sample-app.css
curl https://raw.githubusercontent.com/meteor/simple-todos/8e14e687c3fe4add10f1d93215051d27faf3dd7c/simple-todos.html > sample-app.html
curl https://raw.githubusercontent.com/meteor/simple-todos/8e14e687c3fe4add10f1d93215051d27faf3dd7c/simple-todos.js > sample-app.js

最後に、

ls -l

と打ち込むと、アプリフォルダの中のファイルが表示されます。cdはディレクトリの移動コマンドです。lsはファイルを表示するコマンドです。
3つのファイルが表示されているはずです。チュートリアルでは、この3つのファイルを編集してアプリを開発します。大きめのプロジェクトの場合などのために、ファイルを分割する方法もあります。

1.2以前のMeteorのアプリを作る方法はこちら

meteor create sample-app –release 1.2

これだけでアプリのフォルダが作成され、同じ3つのファイルが用意されます。

これでアプリフォルダの作成が完了しました。

アプリの実行

sample-appのディレクトリ(フォルダと同じ意味)にいる状態で次のコマンドを実行します。

meteor

これによりサーバが起動しますので、 http://localhost:3000/ をブラウザで開きましょう。
ページが表示されれば成功です。

ホットコードプッシュ

アプリを実行したままファイルを編集してみましょう。
エディタでsample-appの中にあるsample-app.htmlを開きます。

普段からコーディングしている人は困ることはないと思いますが、初めての人はsample-appフォルダがどこにあるか分からず苦労するかもしれません。一度覚えてしまえば、慣れるかと思います。どうしてもファイルの場所が分からなければ、OSの検索機能で探してしまいましょう。

エディタでファイルを開いたら例えば<h1>の中を変更してみましょう。ファイルを保存すると、ブラウザが自動でリロードします。変更が反映されたことを確認しましょう。この機能を「ホットコードプッシュ」と呼びます。試しに、sample-app.cssも編集してみてください。cssのホットコードプッシュはhtmlよりも速いことに気づくかもしれません。

確認項目

• HTMLファイルに<h1>が存在すること