React学習メモ – 基礎から実践まで（TypeScript + Vite）

React学習時に、最初に知っておくべきことを効率よく学べる操作メモ。

Reactインストール
レベル①カウンタを作成（基本構造+useState）
1. Counterコンポーネント作成（コンポーネント）
2. カウンタ設置（useState）
レベル②入力用フォーム作成（入力した値を受け取る）
レベル③配列表示と削除機能（map, filter）
1. リストをひとつずつ表示（map)
2. リストからアイテムを削除
行っておいた方がよいこと
1. TypeScript型指定
2. KeyはIndexだけでは危険
さいごに課題

Reactインストール

Node.jsをいれておく。

*古すぎると警告がでるので、新しいものと切り替えられるようにする。

TypeScriptとViteと一緒にいれるなら、下記コード。

npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev

npm create vite@latest my-app -- --template react-ts

cd my-app

npm install

npm run dev

Vite起動後、ブラウザでプロジェクト確認できる。

レベル①カウンタを作成（基本構造+useState）

ひとつずつ手順解説

Counterコンポーネント作成（コンポーネント）

プロジェクトを開き、srcの中に、Counter.tsxを作成。ここに次のコードをいれておく。

src/Counter.tsx

export const Counter = () => {
    return (
        <div>test</div>
    );
};

export const Counter = () => {

return (

);

};

「Counter」というコンポーネントを作成し、これを外部でも使用できるようにした。今は単に「test」と表示されるだけ。

次に、App.tsxにこの「Counter」を埋め込む。

src/App.tsx

import './App.css'
import { Counter } from './Counter'

function App() {
  return (
    <>
      <Counter />
    </>
  )
}
export default App

import './App.css'

import { Counter } from './Counter'

function App() {

return (

</>

)

}

export default App

ブラウザではトップ画面に「test」とでるはず。

カウンタ設置（useState）

Counter.tsxにカウンタ用のコード追加

src/Counter.tsx

import { useState } from "react";

export const Counter = () => {
    const [num, setNum] = useState(0);
    const increaseNumber = () => {
        setNum(num + 1);
    };
    return (
        <div>
            {num}
            <button onClick={increaseNumber}>数が増える</button>
        </div>

    );

};

import { useState } from "react";

export const Counter = () => {

const [num, setNum] = useState(0);

const increaseNumber = () => {

setNum(num + 1);

};

return (

<div>

{num}

<button onClick={increaseNumber}>数が増える</button>

</div>

);

};

useStateをつかうと、「状態」を操作できる。今回は「num」変数と、このnumをの状態を操作する「setNum」関数を定義した。

その後、onClickの中に、increaseNumber関数をセット。関数のなかでは、setNum(num+1)としている。これによって、ボタンをクリックすると、numの状態がかわる。num+1となるが、この状態がsetNum関数によってセットされる。

このuseStateはかなり重要。

レベル②入力用フォーム作成（入力した値を受け取る）

src/InputText.tsxを作成。コードをいれる。

src/InputText.tsx

import { useState } from "react";

export const InputText = () => {
    const [text, setText] = useState("");
    const addNewText = (e) => {
        setText(e.target.value);
    };
    return (
        <div>
            <input type="text" onChange={addNewText} /><br />
            <span>{text}</span>
        </div>
    );
}

import { useState } from "react";

export const InputText = () => {

const [text, setText] = useState("");

const addNewText = (e) => {

setText(e.target.value);

};

return (

<div>

</div>

);

}

今回はテキスト入力欄を作り、そのなかに、onChangeをセット。ユーザーがテキストをいれると、addNewText関数が実行される。

そこで、「e」と引数があるが、これが、入力欄に入力されたテキストのイベントとなる。このeの値が、「e.target.value」となる。setText(e.target.value)によって、text変数に、入力値がセットされる。{text}とある部分に、この入力値が表示される。

なお、App.tsxに、カウンターの時と同様、このInputText.tsxを埋め込んでおく。

src/App.tsx

import './App.css'
import { Counter } from './Counter'
import { InputText } from './InputText'

function App() {
  return (
    <>
      <Counter /><br />
      <InputText /><br />
    </>
  )
}

export default App

import './App.css'

import { Counter } from './Counter'

import { InputText } from './InputText'

function App() {

return (

</>

)

}

export default App

レベル③配列表示と削除機能（map, filter）

src/ArrayDisplay.tsxを作成。コードをいれる。App.tsxに、カウンターの時と同様、このArrayDisplay.tsxを埋め込んでおく。

リストをひとつずつ表示（map)

src/ArrayDisplay.tsx

export const ArrayDisplay = () => {
    const items = ["Apple", "Banana", "Cherry", "Date"];
    return (
        <div>
            {items.map((item, index) => (
                <div key={index}>{item}</div>
            ))}

        </div>
    );
}

export const ArrayDisplay = () => {

const items = ["Apple", "Banana", "Cherry", "Date"];

return (

<div>

{items.map((item, index) => (

))}

</div>

);

}

今回は配列をつくり、itemsにいれておく。これを、map関数を使って一つずつ取り出す。

リストからアイテムを削除

各アイテムの横に「削除」ボタンを設置して、ボタンをおすと、アイテムが非表示になるようにする。

src/ArrayDisplay.tsx

import { useState } from "react";

export const ArrayDisplay = () => {
    const [items, setItems]  = useState(["Apple", "Banana", "Cherry", "Date"]);
    const deleteItem = (index) => {
        const newItems = items.filter((_, i) => i !== index);
        setItems(newItems);
    };
    return (
        <div>
            {items.map((item, index) => (
                <div key={index}>
                    {item} 
                    <button onClick={()=>deleteItem(index)}>削除</button>
                </div>
            ))}
        </div>
    );
}

import { useState } from "react";

export const ArrayDisplay = () => {

const [items, setItems] = useState(["Apple", "Banana", "Cherry", "Date"]);

const deleteItem = (index) => {

const newItems = items.filter((_, i) => i !== index);

setItems(newItems);

};

return (

<div>

{items.map((item, index) => (

{item}

<button onClick={()=>deleteItem(index)}>削除</button>

</div>

))}

</div>

);

}

もし onClick={deleteItem(index)} と書くと、コンポーネントがレンダリングされる度に関数が実行されてしまう。onClick={() => deleteItem(index)} とすることで、クリック時のみ実行される。

なおitems配列にはuseStateを設定しておく。

削除ボタンクリック時には、配列のindexをもっていく。

deleteItem関数では、filter関数を使って、indexをもとに、items配列から該当のアイテムを除外する。最後にsetItems関数を使って、削除済みアイテムを反映したアイテムをセット。

行っておいた方がよいこと

最後にnpm run devをとめて、npm run buildを実行する。これをGitHubにプッシュ→nestifyなどを使ってすぐに公開可能。

ただ、このままだとnpm run build時にエラーになる。エラー修正と、さらにコードをよくするために下記を行う。

TypeScript型指定

型の指定を行う。今回は、引数の型を下記のとおり2か所修正する必要がある。

deleteItem関数（引数の型の指定）

indexは数字なので、下記のようにする。

src/ArrayDisplay.tsx

const deleteItem = (index:number) => {

addNewTex関数（入力値eventの型指定）

src/InputText.tsx

const addNewText = (e: React.ChangeEvent<HTMLInputElement>) => {

setText(e.target.value);

};

配列の型指定

配列が文字列の場合。

const [items, setItems] = useState<string[]>([“Apple”, “Banana”, “Cherry”, “Date”]);

KeyはIndexだけでは危険

並び順が変わる機能が搭載されている場合は、indexだけを元にするのは危険。下記のようにitemとindexを組み合わせる手もあり。

{item}

<button onClick={()=>deleteItem(index)}>削除</button>

</div>

さいごに課題

ここまでで初級クリア。この先は、下記も知っておいた方が良い。

Props:変数の受け渡し
useEffect ：副作用の管理
変数の共有：Context APIやRecoilなど
Router: 複数ページがある時に必要。
カスタムフック：自分で関数をつくる
useCallback:関数の最適化（無駄な再生成を防ぐ）
API通信：フェッチやAxiosを使用。サーバーサイド連携時に必要
useMemo: 計算結果のメモ化
useRef: DOM要素への直接アクセス
エラーハンドリング

【課題】

現時点までで、次のようなものを作ると練習になる

入力した値を変数「fruits」に追加していく。「追加」ボタンで、一覧に果物が追加されていく。

一覧の右側には削除ボタンがあり、クリックすると、削除となる。