Reactで作る簡易的なTodoList

前提

要素 バージョン
react 15.3.0
babel 5.8.34
Chrome 57.0

概要

  • インフルエンザで死んでたのでリハビリにコーディング
  • Reactをせっかく勉強したので、よく技術のお試し教材に登場する簡易TodoListを作ってみる
  • Reactに関する説明はほぼ無いが、React未経験者でも雰囲気わかる程度には書く
  • JSXを使用する。JavaScriptコード中にXMLが出てくるのは気持ち悪いが、Reactを使うには避けては通れないし手放せないと思う
  • ES6を使用する。というかReactなんてモダンな技術を使ってES6を使わないなんてナンセンスなことはありえないと思う

実装したTodoListは以下の通り。Todoを表示して、追加できて、削除できる。それだけ。編集とか保存とかそんなものはない。

基本的な状態遷移を記述できて、かつ目的がわかりやすいからこうやって教材に選ばれやすいんだと思う。

HTML

特に複雑な内容はないが、やってることは以下の通り

  • React及びReactDOMをロード
  • JSXをトランスパイルするためのbabelをロード
  • UIを動的配置するためのDOM(#content)を定義
  • 最後にscript.jsxをロード
<html lang="ja">

<head>
  <meta charset="utf-8">
  <script src="https://fb.me/react-15.3.0.js"></script>
  <script src="https://fb.me/react-dom-15.3.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <title>TodoList</title>
</head>

<body>
  <div id="content"></div>
  <script src="script.jsx" type="text/babel"></script>
</body>

</html>

スクリプト(JSX)

  • タスクの一覧と新規タスク(入力内容)をステートとして保持
  • 「追加」ボタン押下時にタスクに新規タスクをpushし、新規タスクをクリア
  • 各タスクのボタン押下で該当タスクを削除
let TodoList = React.createClass({

  /*
   * ステートの初期値を定義
   */
  getInitialState() {
    return {
      newTask: '',
      tasks: [
        '夕飯作る',
        'ケージの掃除する',
        'プログラミングする',
      ]
    };
  },

  /*
   * 新規タスクの入力内容を変更
   */
  changeText(e) {
    this.setState({newTask: e.target.value});
  },

  /*
   * 新規タスクを作成
   */
  addNewTask() {
    let newTasks = this.state.tasks;
    newTasks.push(this.state.newTask);
    this.setState({
      newTask: '',
      tasks: newTasks
    });
  },

  /*
   * 既存タスクを削除
  */
  removeTask(idx) {
    let newTasks = this.state.tasks;
    newTasks.splice(idx, 1);
    this.setState({tasks: newTasks});
  },

  /*
   * UIの描画
   */
  render() {
    let tasks = this.state.tasks.map((t, idx) =>
      <li key={idx}>
        {t}
        <input type='button' value='☓' onClick={() => this.removeTask(idx)} />
      </li>
    );
    return (
      <div>
        <input type='text' value={this.state.newTask} onChange={this.changeText} />
        <input type='button' onClick={this.addNewTask} value="追加"/>
        <ul>
          { tasks }
        </ul>
      </div>
    );
  },
});

/* DOMの描画 */
ReactDOM.render(<TodoList/>, document.getElementById('content'));

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です