Meteorで簡単にフォームを作成できるautoformを使おう

Meteorには様々な便利パッケージがありますが、その中でもうまく使えばだいぶコーディングを省けるパッケージを紹介します。 autoformはフォームを生成するためのパッケージです。 MongoDBのスキーマを定義しバリデーションするsimple-schema とともに使います。 collection2とも使えます。今回はsimple-schemaで説明します。

初めに、パッケージのインストールは、

meteor add aldeed:simple-schema aldeed:autoform check

です。バリデーション用のcheckパッケージも入れました。

例えば、毎日の体重を記録するアプリを想定しましょう。コレクションの定義は、

Records = new Mongo.Collection('Records');

となります。これのスキーマを定義するには、

RecordSchema = new SimpleSchema({
  date: {
    type: Date
  },
  weight: {
    type: Number
  }
});

のようにします。この例は単純ですので直感的と思いますが、より詳しくはsimple-schemaのドキュメントを参照ください。

さて、このスキーマを使ってフォームを作成するには、

<template name="inputForm">
  {{> quickForm id="inputForm" schema="RecordSchema" type="method" meteormethod="/records/insert"}}
</template>

とします。これにより、

このような感じでフォームが完成しました。このフォームはtypeに合わせて適切なコンポーネントが使用されている上、値が入力されていなかったり不適切な場合はアラートメッセージを表示してくれます。

フォームがsubmitされた際にはmeteor methodsが呼び出されます。この実装は例えば下記のようになります。

Meteor.methods({
  '/records/insert': function(doc) {
    check(doc, RecordSchema);
    Records.insert(doc);
  }
});

このcheckが重要で、これがないと不正なデータを登録できてしまいます。フォームのバリデーションはクライアントサイドだけの話なので。このcheckすら冗長だと考える方はcollection2を使ってみるとよいでしょう。

autoformの最も簡単な紹介でした。これ以外にも色々柔軟な使い方ができるので、おすすめのパッケージです。

最後に全体のコードを載せておきます。これだけですので、まずは試してみるとよいでしょう。

HTMLファイル

<body>
  {{> inputForm}}
</body>

<template name="inputForm">
  {{> quickForm id="inputForm" schema="RecordSchema" type="method" meteormethod="/records/insert"}}
</template>

JavaScriptファイル

Records = new Mongo.Collection('Records');
RecordSchema = new SimpleSchema({
  date: {
    type: Date
  },
  weight: {
    type: Number
  }
});

Meteor.methods({
  '/records/insert': function(doc) {
    check(doc, RecordSchema);
    Records.insert(doc);
  }
});

SundayHacking

Meteorで簡単にフォームを作成できるautoformを使おう

コメント