初めに

最近になってフロントエンド開発案件に配属されたのですが、実際に開発するとなるとさっぱり手が動かないということに気付かされました。

事前にチュートリアルを読んで勉強していたのですが、それはただ正解が用意されたコードをなぞっていただけのこと。
いざ開発するとなるとどうすればいいのかわからなくなってしまうのです。

そんなわけで実装力を鍛えようと思い、簡単なTodoアプリの作成をしてみることにしました。

環境構築

Create React Appを使ってさっくりプロジェクトを作成します。
なおCreate React Appを実行するには事前にNode.jsのインストールが必要です。

npx create-react-app react-todo
cd react-todo
npm start

プロジェクトの作成が正常に完了すれば下の画面が立ち上がります。

f:id:Amsel1676:20200318080840p:plain — React初期画面

作成するアプリについて

まずは必要最低限の機能だけもったTodoアプリの作成を目指します。
今回実装するのは以下の機能です。

タスクを登録する
タスクを削除する
タスクを完了状態にする

アプリの構成

以下の3つのコンポーネントでアプリを構築していきます。

Appコンポーネントはアプリ全体の状態を管理します。
FormコンポーネントはTodoを入力するフォームと登録のボタン部分を担当します。
TodoListコンポーネントは入力されたTodoをリスト化して表示する部分を担当します。

アプリの作成

まずはcreate-react-appで作成されたファイルを整理します。 create-react-appが生成するソースの内、使わないファイルは削除してしまいましょう。

今回はsrcフォルダ配下のApp.js、index.js、serviceWorker.js以外は削除します。

formコンポーネントの作成

まずは形から作成していきましょう。

このアプリのフォームを構成するFormコンポーネントを定義し、入力フォームとそのフォームに入力されたタスクを登録するためのボタンを仮作成します。

src/Form.js

import React from 'react'

class Form extends React.Component {
    constructor(props) {
        super(props)
        this.state = {value: ''}

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

    handleChange(event) {
        this.setState({value: event.target.value})
    }

    render() {
        return (
            <React.Fragment>
                <label>
                    todo:
                    <input type="text" className="todoform" value={this.state.value} onChange={this.handleChange} />
                    <input type="submit" value="Add" />
                </label>
            </React.Fragment>
        );
    }
}

export default Form;

このFormコンポーネントをAppコンポーネント側で呼び出し、表示されるか確認してみます。

src/App.js

import React from 'react';
import Form from './Form';

function App() {
  return (
    <React.Fragment>
      <h1>Todo App</h1>
      <Form/>
    </React.Fragment>
  );
}

export default App;

無事、フォームとボタンが表示されました。

f:id:Amsel1676:20200505183307p:plain — フォーム追加後

TodoListコンポーネントの作成

次は登録されたTodoを表示するリストを作成します。

こちらもまずは形から。登録フォームはまだ機能していないので、静的なリストを仮置きしてみます。

src/TodoList.js

import React from 'react'

class TodoList extends React.Component {
    render() {
        return (
            <ul>
                <li><input type="checkbox" /> Temp 1 <input type="submit" value="delete" /></li>
                <li><input type="checkbox" /> Temp 2 <input type="submit" value="delete" /></li>
                <li><input type="checkbox" /> Temp 3 <input type="submit" value="delete" /></li>
            </ul>
        );
    }
}

export default TodoList;

App.jsからTodoListコンポーネントを呼び出し、正しく表示されるか確認してみます。

src/App.js

import React from 'react';
import Form from './Form';
import TodoList from './TodoList';

function App() {
  return (
    <React.Fragment>
      <h1>Todo App</h1>
      <Form/>
      <TodoList/>
    </React.Fragment>
  );
}

export default App;

f:id:Amsel1676:20200505183351p:plain — リスト追加後

無事表示されました。

まとめ

今日はとりあえず形だけ作成してみました。
明日は実際にタスクを登録する機能を追加するところまでやる予定です。

この程度の実装でしたが、躓いた所がいくつかありました。
特にthisのbindを忘れてhandleChangeメソッドが認識されなかった事が大きなハマりポイントでしたので、JavaScriptのthisについて勉強しなおさないといけませんね…。

参考文献

ja.reactjs.org

Amsel's diary

主にプログラミングの勉強で得た知識を書き溜めておくブログです。

Reactを使ってTodoアプリを作ってみる_1日目

初めに