はじめに

このコンテンツは、リアルタイム/リアクティブなSPA(Sinble Page Application)を開発できるJavaScriptアプリケーションプラットフォームMeteorと、Facebookが開発したJavaScript UIライブラリReact (React.js)を使って、簡単なメモアプリを作るチュートリアルとなっております。

執筆時のMeteorおよびReactのバージョンは以下の通りです。

• Meteor 1.3.2.4
• React v15.0.2

想定読者

• HTML / CSS / JavaScriptを使ったことがある
• ターミナルコマンドをある程度知っている
• Meteorのチュートリアルを終わらせている
• Reactに触ったことがある

Meteorとは

Meteorはサーバーからクライアント、モバイルアプリまで単一の言語(JavaScript)だけでリアルタイム/リアクティブなアプリケーションを開発できる、オープンソースのJavaScriptアプリケーションプラットフォームです。

MDG (Meteor Development Group)が中心となって開発されています。

Meteorは2011年12月にSkybreakという名前で登場しました。

2012年1月にMeteorという名前に変わり¹、2014年10月に正式版のバージョン1.0がリリースされました²。2015年3月には1.1³, 2015年9月に1.2⁴と着実にバージョンアップを重ね、そして最新版のバージョン1.3が2015年3月28日にリリースされました⁵。

¹. http://info.meteor.com/blog/skybreak-is-now-meteor ↩

². http://info.meteor.com/blog/meteor-1-0 ↩

³. http://info.meteor.com/blog/meteor-11-microsoft-windows-mongodb-30 ↩

⁴. http://info.meteor.com/blog/announcing-meteor-1.2 ↩

⁵. http://info.meteor.com/blog/announcing-meteor-1.3 ↩

2015年9月にリリースされたMeteor1.2では、UIの記述にMeteor標準テンプレートエンジンのBlazeだけでなく、React.js、AngualrJSを選べるようになりました。

しかし、Meteor 1.2までは基本的に全てのファイルが自動的に読み込まれるため、読み込み順番の制御が難しかったり、グローバル変数が多用されどこでコードが定義されているのかわかりにくい、などの問題がありました。Reactを選んだ場合も、他で利用するコンポーネントはすべてグローバル変数にする必要があったため、保守性がそれほど良くありませんでした。

それが最新版のMeteor 1.3では、新機能のモジュール機能によりこれらの問題を解消されます。ファイルの読み込み順の制御を行なったり、npmでインストールしたnodeパッケージを直接Meteorから利用できるようになったりと、Meteor 1.3では開発をより簡単に行うための新機能追加や変更が行われました。

React とは

React はFacebookが開発した、VirtualDOMと呼ばれる仕組みが特徴のJavaScriptのUIライブラリです。

• A JavaScript library for building user interfaces | React
• Tutorial | React
• 出来る限り短く説明するReact.js入門 - Qiita

VirtualDOMと呼ばれる仕組みが特徴で、JSXというJavaScriptにHTMLタグを直接記述するような形の文法でUIを記述します。

// JSX
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

MeteorはUI部分にReactをサポートしており、Reactを使うことでハイパフォーマンスで保守性の高いアプリケーションを開発することができます。

また、Meteor 1.3のモジュール機能により、npmで公開されているReactの外部ライブラリも簡単に利用できるようになりました。

次へ