Step1: Meteorアプリを作ろう!

このステップでは、Meteorのインストール方法およびとMeteorアプリの新規作成方法、Meteorアプリの実行方法を学びます。

Meteorインストール

それでは早速Meteorをインストールしてみましょう。

Meteorをインストールするにはターミナルを起動し、以下のコマンドを実行します(OS X / Linuxの場合、Windowsは公式のインストールガイドを参照)。

$ curl https://install.meteor.com/ | sh

($はコマンド入力状態を表すコマンドプロンプトです。実際にコマンドとしてターミナルに入力するのは$を除いた curl https://...の部分です)

上記コマンドを実行すると、Meteorのインストールが始まります。

インストールが終わるまでしばらく待ちましょう。

インストールが完了したら、以下のコマンドを実行してMeteorのバージョンが表示されるのを確認します。

$ meteor --version
Meteor 1.3.2.4

Meteor最新版へのアップデート方法

古いバージョンのMeteorがインストールされている場合は、以下のコマンドで最新版へのアップデートを行います。

$ meteor update

Meteorアプリ新規作成

続いて、適当なディレクトリ内で以下のコマンドを実行し、新しいMeteorアプリを作成しましょう。

$ meteor create meteor-react-example --release 1.3.2.4

(--releaseオプションをつけることで、特定のバージョンのMeteorアプリを作成できます)

初回はデータのダウンロードが行われるため、回線とマシンスペックによっては少々時間がかかります。

上記コマンドを実行すると、meteor-react-exampleというディレクトリとMeteorアプリのファイルが自動生成されます。

Meteorアプリ実行

Meteorアプリを動かしてみましょう。

Meteorアプリのディレクトリに移動して、meteor コマンドを実行してください。

$ cd meteor-react-example
$ meteor

そして、Webブラウザを開き、http://localhost:3000/ にアクセスします。

以下のような画面が表示されれば成功です!

ホットコードプッシュ

Meteorには開発を効率よく行うための機能がいくつも備わっています。

その中の一つにホットコードプッシュがあります。

ホットコードプッシュは、コードを書き換えると、サーバーが変更を検知し、クライアントにその情報を送ることでクライアント側のアプリを自動更新する仕組みです。この仕組みにより、ブラウザを手動でリフレッシュする必要がなくなるため開発効率があがります。

ホットコードプッシュを試してみましょう。

meteorアプリが動いている状態で、コードを以下のように書き換えます。

client/main.html

<head>
  <meta charset="utf-8" />
  <title>Simple Memo</title>
</head>

<body>
  <h1>Hello, Meteor World!</h1>
</body>

client/main.js

import { Meteor } from 'meteor/meteor';

Meteor.startup(() => {
  console.log("Hello, World!");
});

コードを書き換えたあと保存すると更新が自動的に行われ、ブラウザの表示が変わります。また、ブラウザのWebインスペクタのコンソールを確認するとHello, World!と表示されます。

ポイント

  • コードを書き換え後に保存すると、Meteorのホットコードプッシュ機能により、ブラウザが自動的にリロードされる
  • .html ファイルはMeteorのテンプレートファイル
    • 通常のHTMLファイルと違い、DOCTYPE<html> タグは不要(自動で追加される)
    • <head> および <body> タグは複数のファイルに記述可能
      • Meteor では全ての <head><body> タグは統合される
  • .js ファイルは ECMAScript 2015 の文法・機能が使用できる
    • 'meteor/meteor' パッケージを import することで Meteor 固有の機能にアクセスできる

続いて、Reactのセットアップを行います。次のステップに進みましょう。

次へ