ReactでTodoアプリを作成した話（Astroの学習を兼ねて）

今後仕事でAstroを使った開発が必要になりそうなのですが、そのためにはJavascript関連の学習をしていこうと思いまして（重い腰を上げて）Reactの学習に取り掛かったのでした。

Reactを使えるようになるとコンポーネントベースで開発ができるようになって、フロントエンドの仕事もやりやすくなるようなぁと思いつつも、あれこれ言い訳を考えていて手をつけなかった日々。

やっぱり必要に迫られないとやらないなぁと反省しながらもまずはプロジェクト作成からやっていきました。

今回の目標としては、Reactを利用してコードを書いて形問わずデプロイまで持っていくこと。
結論としては1時間かからずに公開まで持っていくことができました。

完成形

登録したTodoを保存する仕組みは用意していないので、リロードすると消えます。
あとは削除ボタンの大きさとか、登録したTodoの表示とか調整箇所は多々ありますが、まずは公開することが大事ってことでこんな感じで落ち着きました。

• 利用ホスティングサービス：Vercel
• 使用エディタ：Cursor

プロジェクトの作成

ターミナルで任意のディレクトリに移動してからプロジェクトを作ります。

npm create-react-app "プロジェクト名"

プロジェクトに移動してローカルホストを立ち上げます。

cd "プロジェクト名"
npm run start

ローカルホストが立ち上がります。合わせてエディタを開いておきます。
自分はCursorを利用していますが、VScodeの場合はcodeから始めて下さい。

cursor -n .

ローカルホストで動作確認

ポート番号：3000で立ち上がるので、Reactプロジェクトが立ち上がっていることを確認します。

コーディング：コンポーネントの作成

今回のコーディングではTodoクラスを作成し、その中に入力値を受け取るメソッド、リストとして追加するメソッド、削除するメソッドを用意しました（たぶん）

import React, { Component } from 'react';

export default class Todo extends Component{
    constructor(props){
        super(props);
        this.state = {
            todos: [],
            name: ''
        };
    }

    onInput = (e) => {
        this.setState({
            name: e.target.value
        });
    }
    addTodo = () => {
        const {todos, name} = this.state;
        this.setState({
            todos: [...todos, name]
        });
    }
    removeTodo = (index) => {
        const { todos, name} = this.state;
        this.setState({
            todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
        });
    }



// HTML描画のためのrenderメソッドを定義
// todo名を入力するためのテキストフィールドを作成
// 入力したtodoをリストに追加するためのボタンとtodo一覧を表示するリストを作成
    render(){
        const { todos } = this.state;

        return (
            <>
                <div className="container mx-auto flex flex-col ">
                    <h1 className='text-xl text-center mb-10 p-3 font-bold'>ReactでのTodoアプリ制作Version1</h1>
                    <input type="text"  onInput={this.onInput} className='text-lg rounded border-grary-400 border-4 p-1 mb-3'/>
                    <button onClick={this.addTodo} className='btn bg-blue-500 p-2'>登録</button>
                    <ul className='mt-5 flex flex-col'>
                        {todos.map((todo, index) => <li key={index} className='gap-3'>{todo}
                        <button onClick={ () => { this.removeTodo(index) }} className='btn bg-red-400 p-2 ml-3 rounded'>削除</button>
                        </li>)}
                    </ul>
                </div>
            </>
        )
    }
}

参考記事

• レイアウトにはTailwindCSSを利用したので、その辺のセッティングで調べました。
  https://qiita.com/y_kato_eng/items/439dae65ba13d050c91e

• 実際のコードはこちらのサイトをサンkのウニしています。
  https://wk-partners.co.jp/homepage/blog/hpseisaku/javascript/react-start/