Meteor 1.3 React日本語チュートリアル

Meteorの日本語版のチュートリアルです。

公式チュートリアルをもとにしています。ビューライブラリとしてReactを用いており、simple-todosというアプリを作るチュートリアルになっています。

Meteorのバージョンは1.3が対象です。(執筆時点ではベータ版)

目次

1. 最初のアプリを作成する (本記事)
2. Reactコンポーネントでビューを定義する
3. コレクションにタスクを格納する
4. フォームを使ってタスクを追加する
5. タスクにチェックマークをつける・削除する
6. アプリをAndroidやiOSで動かす
7. 一時的なUIデータをステートに格納する
8. ユーザアカウントを追加する
9. メソッドによるセキュリティ
10. パブリッシュとサブスクライブによるデータフィルタリング
11. テストについて
12. その後の学習法について

最初のアプリを作成する

このチュートリアルではTODOリストを管理したり他の人と共有したりする簡単なアプリを作ります。

アプリを作成するにはターミナルで次のコマンドを実行してください。

meteor create simple-todos

これによりsimple-todosというフォルダを作成され、次のようなMeteorアプリに必要なファイルが作成されます。

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

この作成したアプリを起動するには、次のようにしてください。

cd simple-todos
meteor npm install
meteor

Webブラウザを開き、http://localhost:3000を開くと起動したアプリを見ることができます。

次に進む前にアプリを少しいじってみましょう。例えば、client/main.htmlの<h1>の中のテキストをエディタで変更してみましょう。ファイルを保存するとブラウザが自動で更新され、変更が反映されているはずです。これを「ホットコードプッシュ」と呼びます。

ES2015 JavaScriptの機能

JavaScriptの新しい仕様に慣れていない場合は、アプリのコードやこのチュートリアルの説明にとまどうかもしれません。MeteorではES2015の多くの機能にデフォルトで対応しいます。例えば、次のような機能が使えます。

1. アローファンクション: (arg) => {return result;}
2. ショートハンドメソッド: render() {...}
3. varの代わりのconstとlet

MeteorがサポートしているES2015の機能についてはecmascript docsを参照してください。ES2015の詳細情報は下記の記事などを参照してください。

• Luke Hoban’s “ES6 features”
• Kyle Simpson’s “You don’t know JS: ES6 and beyond”
• Nikolas C. Zakas “Understanding ECMAScript 6”

さて、Meteorアプリのファイルを編集することを学んだはずですから、simple-todosアプリの実際の開発を始めましょう。

このチュートリアルについて間違いなど見つけましたら、@dai_shiまでご連絡いただけると幸いです。

次のステップへ

step02: Reactコンポーネントでビューを定義する