MeteorJSとReactを勉強してみる その5: タスクの完了と削除を実装してみよう【公式翻訳】

MeteorJSを勉強してみる第5弾です。 タスクを追加できるなら、もちろん削除もできるようにしたいですよね。

---

タスクの完了と削除を実装する

ここまでは、ただコレクションにドキュメント(タスクのデータ)を追加してきたのみでした。

今回は、これまでに追加したドキュメントを更新する方法と、削除する方法を学びましょう。

タスクのコンポーネントに、チェックボックスと削除ボタン、二つの要素を追加します。 いずれもイベントハンドラと一緒に追加してあげましょう。

imports/ui/Task.js

before

import React, { Component } from 'react';

// Task component - represents a single todo item
export default class Task extends Component {
  render() {
    return (
      <li>{ this.props.task.text }</li>
    );
  }
}

after

import React, { Component } from 'react';

import { Tasks } from '../api/tasks.js';

// Task component - represents a single todo item
export default class Task extends Component {
  toggleChecked() {
    // set the checked property to the opposite of its current value
    Tasks.update(this.props.task._id, {
      $set: { checked: !this.props.task.checked },
    })
  };

  deleteThisTask() {
    Tasks.remove(this.props.task._id);
  };

  render() {
    // give tasks a different className when they are checked off,
    // so that we can style them nicely in CSS.
    const taskClassName = this.props.task.checked ? 'checked' : '';

    return (
      <li className={ taskClassName }>
        <button className="delete" onClick={ this.deleteThisTask.bind(this) }>
          &times;
        </button>

        <input
          type="checkbox"
          readOnly
          checked={ !!this.props.task.checked }
          onClick={ this.toggleChecked.bind(this) }
        />

        <span className="text">{ this.props.task.text }</span>
      </li>
    );
  }
}

ドキュメントのアップデート

上記のコード内では、タスクにチェックをつけて完了させる際にTasks.updateを呼んでいます。

コレクションの持つupdate関数は、二つの引数を取ります。

• 一つ目はコレクションの中でも「どのドキュメントを更新するか」を特定するセレクタ
• 二つ目はマッチしたオブジェクトに何をすべきかを示す更新内容のパラメータ

です。

この場合、セレクタはタスクの_idです。 また、更新パラメータでは、「そのタスクは完了している」ことを表すためのcheckedを切り替えるために$setを使用しています。

ドキュメントの削除

また、上記コード内ではタスクを削除するためにTasks.removeを呼んでいます。 remove関数は引数をひとつだけ取り、その引数で「どのドキュメントを削除するか」を特定します。

---

短いですが第五回はこれだけです。

今更ですが、ここまで出てきた「コレクション」とか「フィールド」とか「ドキュメント」などは全てMongoDBの用語です。

僕は普段の業務ではMySQLを使っているので正直あまり慣れないですが、基本的な考え方は一緒です。

まだ調べてなかった人は、是非一度自分でググってみてください。

今週中にあと二記事くらいは上げたい所存です。