React」タグアーカイブ

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'));

「React開発入門」レビュー

書籍について

タイトル WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
著者 著: 柴田 文彦
発行日 2016/12/01
ページ数 231ページ
価格 2500円
Amazon https://www.amazon.co.jp/dp/4295000337
読了日 2017/03/15

評価

良い点

  • Reactに関して基本的なことが整理されている
  • コード例の構成が全体的に一貫しており、理解しやすい
  • コード例はWebでダウンロードできるので、コード写経もしやすかった
  • React用Chrome拡張の使い方も掲載されており、これがかなり使いやすい。巻末だったが最初に掲載するべき

悪い点

  • 説明が冗長。一度説明した内容をほぼ同じようにまた説明するということがチラホラ
  • 説明がコードの内容をそのまま和訳したようなモノが多い。コードと実行結果を見れば説明を読む必要がない感じ
  • 応用的な例がほぼ無い。Reactがどんなものかはわかったが、それによってどんな楽が出来るかが伝わらない
  • 元々ページ数が少ない上、説明が冗長的なので事実上のコンテンツ量はかなり少ない
  • それで2500円はちょっと

その他

  • 序盤はJSX不使用だが、中盤以降はJSXが必須
  • JSX自体の説明に結構なページ数を割いている
  • Fluxに関しては巻末で簡単に説明する程度

内容とメモなど

1. Reactとは

Reactに関する概要がズラッと書かれている。Reactにおけるキーワード、専門用語も一通り書かれているので、最初に一読、最後にもう一読すると良さそう

JavaScriptフレームワーク全体でのReactの位置付けについても触れているが、比較対象がAngularしか無いのは少し寂しい

2. Reactのコンポーネント

Reactの基本的な使い方全般。この章ではJSXは使われておらず、純粋なReactの機能だけでReactコンポーネントを構築している。

順を追って読んでいるとなんだか不便だなと感じるが、次章でJSXが登場すると突然便利さを感じることができるので、すぐにJSXに飛びつかずにこの章をしっかりやると良さそう

3. JSXの基本

JSXに関する説明、JSXの利用方法、JSXを用いたReactコードの書き方をそれなりのページ数を割いてまとめている。

基本的には前章で作成したコードをJSXを用いたものに書き換えることで、JSXがどれほど便利なのかを主張している。

個人的に、通読前はJavaScript内にXMLが突然あらわれることに強い抵抗を持っていたが、この章を読んでみるとJSXなしのReactは考えられないなと思った

4. Reactを使いこなす

本章では、フォーム要素を対象に、プロパティやステート、単方向データバインディングなど、Reactの具体的な部分に触れている。

Angularの双方向データバインディングに慣れていた自分にとってはすんなり受け入れられたが、そうでもない人にとってはかなり違和感のある章だと思う

5. Reactの一歩進んだ使い方

本章では、以下のようなReact本体ではない外側の要素について触れている

  • アドオン
  • React DeveloperTools
  • Flux

どれも触り程度で具体的な内容はほぼ書かれていないが、React自体に慣れ、ステップアップを詰むためのヒントとなる内容がかかれている。意欲のある人が本書をきっかけに次のステップに進むための足掛けになるとは思う。

所感

本書でなくReactを使ってみた感想

  • 全体的に「あ、この動き、Angularで見たやつだ」となる部分が多かった
  • その上でもReactはUI操作に特化しているので、Angularだけではできそうにない実装ができそう
  • JavaScript中にXMLを書くのに強い抵抗があったが、やってみると別に気にならなくなった
  • JavaScript中にXMLを書くため、デザイナとの作業の分離が難しくなる気はする
  • システム全体で使うよりも、システム内の、UI色の強い一部機能にのみ採用するという使い方ができそう
  • ReactというよりVirtualDOMの考えがスゴイんだ
  • サードパーティ製のアドオンが豊富なようなので、スタイリッシュなUIなど探せば沢山ありそう
  • ChromeのReact Developer Toolsがスゴイ。これはデバッグも捗るし使ってて楽しい
  • jQueryという闇を払拭できそう