はじめてのReact #20「ToDoアプリを作る」前編

この記事は 2019年1月24日 に書かれたものです

前回準備した環境を使って、早速Webアプリを作ってみたいと思います。こういうときはToDoアプリを作るのが伝統となっていますので、それに習いますｗ

なお、本来であればテストコードを書きながら進めるべきだとは思いますが、今回は割愛しております。

準備編

プロジェクトの作成

rtodoという名前でプロジェクトを新規作成しました。rはReactで作るぞという意思表示で特に意味はありませんｗ好きな名称をつけてください。

$ create-react-app rtodo

Gitリポジトリの準備

GitHubにもrtodoという名前でリポジトリを準備しました。まずはこいつにgit pushします。
https://github.com/katsube/rtodo

$ git remote add origin git@github.com:katsube/rtodo.git
$ git push -u origin master

Componentを作ってみる

新しいComponentを作る

まずは腕鳴らしに簡単なComponentを用意してみます。src/header.jsというファイルを作成し、その中に以下のコードを記述します。render()でタグを描画しているだけですね。h1の中はprops.childrenでもらった文字列をそのまま出しています。

import React, { Component } from 'react';

class Header extends Component {
  render() {
    return(
      <header>
        <h1>{this.props.children}</h1>
      </header>
    );
  }
}

export default Header;

最後のexport文を忘れないように気をつけてください。これを記述することで他のファイルからこのComponentを利用することができるようになります。

子供の要素にアクセスする方法(this.props.children)については過去の記事を参照してください。

はじめてのReact #16「Componentの連携」子要素にアクセスする

https://blog.katsubemakito.net/react/react1st-16-childrenelements

「はじめてのReact」一覧に戻るこれまでは、最終的にrender()する際には<Foo />のようにタグで何らかの文字列や要素を囲わない状態でした。今回はそこから一歩進んで<Foo>Hello!</Foo>のように何らかの要素を挟んでみたいと思います。ダイアログ Componentおもしろサンプルが思いつかなかったので、公式ドキュメントほぼそのまま、ダイアログの作成を行います。サンプル<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Dialog</title> <scrip...

ねこの足跡R

App.jsから呼び出す

src/App.jsを開き以下のコードに書き換えます。

import React, { Component } from 'react';
import Header from './header';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header>
          React ToDo
        </Header>
      </div>
    );
  }
}

export default App;

先ほど作成したHeaderComponentを、2行目のimport文で呼び出しています。これ以降はHeaderという名前でHeaderComponentを利用することができるようになります。最終的にAppComponentのrender()で先ほど作成したHeaderComponentを利用しているのがわかります。

実行してみる

前回説明した通り、まずは無事に動くかプレビューしてみます。

$ npm start

最終的にブラウザが立ち上がり、以下のような表示になれば成功です。

引き続き開発を続けるため、Terminalはこのままの状態にしておきます。npm startでプレビュー用のサーバを起動するのは非常に時間がかかるため動かしっぱなしの方がストレスがたまりません。

コミット

Terminalのウィンドウかタブを新たに作成し、commitとpushしておきましょう。

$ git add .
$ git commit -m 'add HeaderComponent'
$ git push

あとはひたすらこの流れを繰り返します。
本来はテストコードも同時に書いてチェックした方が良いのですが、今回は割愛します。

ToDoの一覧を表示する

ちょっとずつ作って行きましょう。まずは予め定義したToDo一覧を表示してみます。

App.js

App.jsの変更点は3行目のimport文で新たにToDoComponentを読み込み、render()内で利用しています。

import React, { Component } from 'react';
import Header from './header';
import ToDo from './todo';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Header>
          React ToDo
        </Header>
        <ToDo />
      </div>
    );
  }
}

export default App;

todo.js

新たにsrc/todo.jsを作成し、state内のToDoリストを単純に描画するだけのrender()を書いています。

import React, { Component } from 'react';
import './todo.css';

class ToDo extends Component {
  constructor(props){
    super(props);
    this.state = {
      todo: [
        {id:1, name:"食材を買いに行く"},
        {id:2, name:"チャーハンを調理する"},
        {id:3, name:"チャーハンを盛り付ける"}
      ]
    };
  }
  render() {
    let list = this.state.todo.map( item =>
                 <li key={item.id}>{item.name}</li>
               );

    return(
      <ul class="todolist">
        {list}
      </ul>
    );
  }
}

export default ToDo;

CSSも編集してみる

まずはsrc/App.cssにあった利用しない物を削除し、以下のCSSを記述します。

.App {
  text-align: center;
  width: 300px;
}

新規にtodo.cssを作成し以下のCSSを記述しています。このようにComponent毎にCSSファイルを用意すると管理がしやすいですね。

.todolist{
  text-align: left;
}

実行結果

ファイルに保存した時点で自動的にブラウザの方はリロードされているはずです。
以下のような結果になれば成功です。

新しいToDoを追加する

新しいToDoを登録する機能を追加してみます。ToDo一覧の上に入力フォームを設置し、ボタンをクリックすると登録されます。

todo.js

stateには2つのプロパティを追加しています。

入力されたテキストボックスの値を保存 (newtodo)
IDの最大値を管理 (max_id)

またそれぞれ入力された、クリックされたといったイベント処理が追加されています。

import React, { Component } from 'react';
import './todo.css';

class ToDo extends Component {
  constructor(props){
    super(props);
    this.state = {
      newtodo: "",
      todo: [
        {id:1, name:"食材を買いに行く"},
        {id:2, name:"チャーハンを調理する"},
        {id:3, name:"チャーハンを盛り付ける"}
      ],
      max_id: 3
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleClick  = this.handleClick.bind(this);
  }

  handleChange(e){
    this.setState({
      newtodo: e.target.value
    });
  }

  handleClick(){
    let id   = this.state.max_id;
    let todo = this.state.todo;
    todo.push({id: id+1, name:this.state.newtodo});

    this.setState({
        newtodo: "",
        todo: todo,
        max_id: id + 1
    });
  }

  render() {
    let list = this.state.todo.map( item =>
                 <li key={item.id}>{item.name}</li>
               );

    return(
      <div>
        <form>
          <input type="text" value={this.state.newtodo} onChange={this.handleChange}/>
          <input type="button" value="追加" onClick={this.handleClick} />
        </form>
        <ul class="todolist">
          {list}
        </ul>
      </div>
    );
  }
}

export default ToDo;

テキストボックスの操作関連は過去の記事を参照してください。

はじめてのReact #10「フォームと連動する」テキストボックス編

https://blog.katsubemakito.net/react/react1st-10-form-textbox

「はじめてのReact」一覧に戻る10回目ともなるとだいぶReactで何かを作ることにも慣れてきましたねｗ今回はいよいよフォームと関連した処理を書いてみたいと思います。Reactに限らずですがユーザーの入力とリアルタイムに連動して表示が切り替わるのは作っていて楽しいですよね。入力候補を表示してくれるComponentユーザーが入力した文字に応じて、入力候補を自動的に表示してくれるComponentを作成します。今回も公式ドキュメントにあるサンプルコードを、編集して作成した物です。サンプル<!DOCTYPE html><html>&am...

ねこの足跡R

ファイルに保存したらブラウザで動作確認をしてみましょう。

入力フォームを別のComponentにわける

このままでも動いているので問題ないと言えば無いのですが、メンテナンス性を上げるためにさらに細かくComponentを分けてみます。

todo.js

入力フォーム部分をToDoCreateComponentに切り出しました。
テキストボックスの入力を管理していた以下の要素がtodo.jsからなくなっています。

stateのnewtodo
handleChange()メソッド

handleClick()の引数は、これまではStateを参照していましたが、ToDoCreateから渡されることになります。

import React, { Component } from 'react';
import ToDoCreate from './todocreate';
import './todo.css';

class ToDo extends Component {
  constructor(props){
    super(props);
    this.state = {
      todo: [
        {id:1, name:"食材を買いに行く"},
        {id:2, name:"チャーハンを調理する"},
        {id:3, name:"チャーハンを盛り付ける"}
      ],
      max_id: 3
    };

    this.handleClick  = this.handleClick.bind(this);
  }

  handleClick(value){
    let id   = this.state.max_id;
    let todo = this.state.todo;
    todo.push({id: id+1, name:value});

    this.setState({
        todo: todo,
        max_id: id + 1
    });
  }

  render() {
    let list = this.state.todo.map( item =>
                 <li key={item.id}>{item.name}</li>
               );

    return(
      <div>
        <ToDoCreate onClick={this.handleClick} />
        <ul class="todolist">
          {list}
        </ul>
      </div>
    );
  }
}

export default ToDo;

ToDoCreateには親Componentのメソッドが呼び出せるようにしています。

<ToDoCreate onClick={this.handleClick} />

このあたりのComponent間の連携については過去の記事を参照してください。

はじめてのReact #15「Componentの連携」複数同時に処理をする

https://blog.katsubemakito.net/react/react1st-15-liftingstateup2

「はじめてのReact」一覧に戻るいよいよReactの真骨頂っぽいところに足を突っ込んでみます。前回はComponentの中にComponentが1つだけ内包されていましたが、これを複数にしてみたいと思います。西暦・和暦相互変換Component今年の5月には新しい年号が爆誕するのにちなんで、西暦と和暦を相互に変換するComponentを作成してみたいと思います。今回も公式ドキュメントのサンプルを改変した物になります。実行すると昭和、平成、西暦の3つのテキストボックスが表示されます。いずれか1つに入力すると残りの2つが連動して変化します。...

ねこの足跡R

todocreate.js

入力している最中の処理はすべてToDoCreateで受け持ち、最終的に入力が終了した時点で親Componentを呼び出しています。

import React, { Component } from 'react';

class ToDoCreate extends Component {
  constructor(props){
    super(props);
    this.state = {
      newtodo: ""
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleClick  = this.handleClick.bind(this);
  }

  handleChange(e){
    this.setState({
      newtodo: e.target.value
    });
  }

  handleClick(){
    this.props.onClick(this.state.newtodo);
    this.setState({newtodo:""});
  }

  render(){
    return(
      <form>
        <input type="text" value={this.state.newtodo} onChange={this.handleChange}/>
        <input type="button" value="追加" onClick={this.handleClick} />
      </form>
    );
  }
}

export default ToDoCreate;

各Componentで仕事が別れたため、職掌がハッキリしましたね。

ToDoリストも別Componentに分ける

せっかく登録フォームを分けたので、リストの方も別Componentにしてみます。またサンプルのToDoデータも今回から削除しました。

todo.js

リスト部分をToDoList Componentとして外に出しました。render()がスッキリしましたね！
todo.cssをtodolist.cssにgit mvでリネームしています。

import React, { Component } from 'react';
import ToDoCreate from './todocreate';
import ToDoList from './todolist';

class ToDo extends Component {
  constructor(props){
    super(props);
    this.state = {
      todo: [],
      max_id: 0
    };

    this.handleClick  = this.handleClick.bind(this);
  }

  handleClick(value){
    let id   = this.state.max_id;
    let todo = this.state.todo;
    todo.push({id: id+1, name:value});

    this.setState({
        todo: todo,
        max_id: id + 1
    });
  }

  render() {
    return(
      <div>
        <ToDoCreate onClick={this.handleClick} />
        <ToDoList data={this.state.todo} />
      </div>
    );
  }
}

export default ToDo;

todolist.js/css

データ自体は親ComponentであるToDoからpropsとしてもらいますので、ToDoListComponentでは単純に描画処理だけを行います。ToDoが存在しなければメッセージを、存在すればリストを表示します。

リストもToDoItem Componentとしてさらに外出ししています。

import React, { Component } from 'react';
import ToDoItem from './todoitem';
import './todolist.css';

class ToDoList extends Component {
  render(){
    let data = this.props.data;

    // ToDoがゼロ
    if( data.length === 0 ){
      return(
        <div className="todozero">Nothing ToDo</div>
      );
    }
    // ToDoが存在する
    else{
      return(
        <ul className="todolist">{
          data.map( i => <ToDoItem key={i.id} item={i} /> )
        }</ul>
      );

    }
  }
}

export default ToDoList;

以下はtodolist.cssとして保存します。

.todolist{
  text-align: left;
}
.todozero{
  text-align: center;
  margin: 20px;
}

todoitem.js

ToDoの要素を描画するComponentです。
なぜこんな細かくわけるのか、その恩恵は次回以降に判明すると思いますｗ

import React, { Component } from 'react';

class ToDoItem extends Component {
  render(){
    let id   = this.props.item.id;
    let name = this.props.item.name;
    return(
      <li key={id}>{name}</li>
    );
  }
}

export default ToDoItem;