Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト

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

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

目次

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

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

ビューライブラリとしてReactを用いるため、必要なNPMパッケージを追加します。

ターミナルを開き、起動中のアプリと同じディレクトリに移動して、下記を実行してください。

1
meteor npm install --save react react-dom

初期コードを置き換える

準備のため、デフォルトのアプリのコードを置き換えましょう。詳細は後で解説します。

まず、HTMLファイルの中身を次のコードで置き換えてください。

次に、client/main.jsを削除して次の3つのファイルを追加してください。ファイル名は各スニペットの右下に書かれています。

これにより3つのものがアプリに追加されました。

  1. AppというReactコンポーネント
  2. TaskというReactコンポーネント
  3. 初期化コード(client/main.jsというエントリーポイントのファイル内): Meteor.startupブロックに記述され、ページがロードされたときに実行されるコード。このコードは他のコンポーネントをロードし#render-targetのhtml要素にレンダリングする。

このチュートリアルの後半で、コードを変更する際にこれらのコンポーネントについて解説します。

結果を確認する

ブラウザではアプリが次のように表示しているはずです。


Todo List




  • This is task 1

  • This is task 2

  • This is task 3


もしうまくいかない場合は、各スニペットの右下の”view raw”リンクからファイルを取得して確認してください。

静的コンテンツを定義するHTMLファイル

Meteorはアプリフォルダ内のすべてのHTMLファイルを読み込み、<head><body><template>の3つのタグを認識します。

<head>タグにあるすべての内容は結合されてHTMLのhead部としてクライアントに送られます。また、<body>タグにあるすべての内容も結合されてHTMLのbody部としてクライアントに送られます。これは通常のHTMLファイルと同じです。

<template>タグにある内容はMeteorのテンプレートとしてコンパイルされ、HTML内で{{> templateName}}として読み込んだり、JavaScript内でTemplate.templateNameとして参照したりできます。このチュートリアルでは、すべてのビューコンポーネントをReactで記述するため、Meteorのテンプレートの仕組みは使いません。

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

Reactでは、ビューコンポーネントはReact.Componentのサブクラスです。React.Componentimport { Component } from 'react';のようにしてインポートします。コンポーネントには任意のメソッドを定義できますが、renderなど特殊なメソッドもあります。コンポーネントはpropsという属性を使って親コンポーネントからデータを受け取ることができます。このチュートリアルでさらにいくつかのReactの機能を解説しますが、FacebookのReactチュートリアルも参照するとよいでしょう。

JSXでrenderメソッドでマークアップを返す

すべてのReactコンポーネントで最も重要なメソッドはrender()です。Reactはコンポーネントが表示すべきHTMLを取得する際にrender()メソッドを呼び出します。HTMLの中身はJSXと呼ばれるJavaScript拡張で書かれます。JSXはJavaScript内にHTMLを書くようなものです。明らかな違いもいくつかあり、例えばJSXではclass属性の代わりにclassName属性を使います。JSXについて理解すべき重要なことは、これはSpacebarsやAngularのようなテンプレート言語ではないことです。JSXは実際には直接JavaScriptに変換されます。JSXに関するより詳細な情報はReactのドキュメントを参照してください。

JSXはecmascriptというAtmosphereパッケージでサポートされ、これは新しく作ったMeteorアプリにはデフォルトで入っています。

CSSを追加する

次に進む前に、CSSを追加してアプリの見栄えをよくしましょう。

このチュートリアルはHTMLとJavaScriptについてのみ解説するため、下記のCSSをまるごとコピーしてclient/main.cssというファイルに貼り付けましょう。これはこのチュートリアル全体で使うCSSコードです。アプリそのものはCSSがなくても動作しますが、CSSを追加することで見た目がとてもよくなります。

CSSを追加できたら、見た目が変わっているはずです。ブラウザで新しいスタイルが適用されているか確認しましょう。

次のステップへ

step03: コレクションにタスクを格納する