MeteorJSとReactを勉強してみるその1: 初めてのアプリを作ろう【公式翻訳】

はじめに
Meteorとは
初めてのアプリを作成する
- 新しいJavaScriptの記法について

はじめに

このエントリ及び続編のエントリでは、超若輩エンジニアがJSのフルスタックフレームワーク'Meteor'を勉強するついでに公式チュートリアルを和訳していきます。

勉強したくなった理由は名前がかっこいいからと、海外だと比較的人気のあるフレームワークみたいだからです。

大前提として自分の勉強のためであり、本エントリの活用は自由ですが、これにより生じた一切の不具合・不都合などの責任は負いませんのでご了承くださいm(_ _)m

Meteorとは

比較的新しい(とは言え初めてこの世に出たのは2012年らしい by. Wikipedia)JavaScriptのWebフレームワークです。
超簡単に言うと、超簡単にWebアプリケーションが作れるフレームワークです。

よく挙げられる特徴としては、

・高速プロトタイピングをしながらの開発が可能
・Webのみでなく、iOSやAndroid向けの開発も比較的簡単にできる
・MongoDB
・データの変更を勝手にクライアントに伝達してくれる
・名前がかっこいい()

などがあります。
きっと他にも色々あるのでしょうが、一旦こんなところで。

下記から公式サイトのチュートリアル抄訳を掲載します。
日本語的わかり易さのため、ところどころ意訳します。間違っていると思ったら遠慮なく突っ込んでください。

なお、公式サイトにはいくつかのチュートリアルの種類がありますが、今回はTo Do AppのReactバージョンで進めていきます。
理由は僕がReactを勉強したいからです。

初めてのアプリを作成する

このチュートリアルでは、Todoリストを管理し、リスト上のタスクを他の人と共有できるような簡単なアプリケーションを作成します。
チュートリアルを最後まで完了すれば、Meteorの基本的な使い方とそのプロジェクト構造について、きっと理解できることでしょう。

まずアプリを作成するには、ターミナルを開いて任意のディレクトリで次のようにコマンドを打ってください。

meteor create simple-todos

このコマンドは、Meteorのアプリケーションに必要な全てのファイル(下記)を備えた「simple-todos」という名前のフォルダを作成します。

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
package-lock.json     # Describes the NPM dependency tree
.meteor               # internal Meteor files
.gitignore            # a control file for git

上記で作成したアプリを立ち上げるには、下記のコマンドを打ってください。

cd simple-todos
meteor

コマンドを打ったらブラウザを開き、 http://localhost:3000 を開いてアプリが立ち上がっているのを確認しましょう。
次のチュートリアルに移る前に、このデフォルトアプリを少しいじってみてください。
例えば、 client/main.html 内の<h1>タグで囲まれたテキストをお好きなエディタで変更してみましょう。

変更してファイルを保存すると、ブラウザで開いたページが自動的に新しい内容に更新されます。
これをMeteorでは「hot code push」と呼んでいます。