なろう講習会

Appearance

React 入門 ​

React 編は本編を一通り終えた後に行うことを想定しているため、一部省略しています。本編が終わっていない方は先に本編を進めてください。

React プロジェクトの作成 ​

~/developディレクトリの中で以下のコマンドを実行してください。

bash
$ npm create vite@latest todolist -- --template react-ts -y

Scaffolding project in /home/mehm8128/develop/todolist...

Done. Now run:

  cd todolist
  npm install
  npm run dev

プロジェクトが作成できたら、cd {プロジェクト名}でプロジェクトのディレクトリに移動し、VSCode で開いてください。

開いたプロジェクトの中に入っているpackage.jsonというファイルには npm に関する様々な設定が書かれています。 この中には依存するパッケージ一覧も含まれており、以下のコマンドでそれらをインストールできます。

$ npm i
もしくは
$ npm install

bash
$ npm i

added 218 packages, and audited 219 packages in 12s

41 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

テンプレートは初期状態でビルド&配信できるようになっているので、以下のコマンドを実行してブラウザで確認してみましょう。

$ npm run dev

bash
$ npm run dev

> todolist@0.0.0 dev
> vite

Port 5173 is in use, trying another one...

  VITE v5.2.10  ready in 159 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

この状態で、ブラウザから localhost:5173 にアクセスすると、以下のような画面が表示されるはずです。

止めるときはCtrl + Cで止めてください。

また、このタイミングで Git の初期化もしておきましょう。.gitディレクトリがプロジェクト内に存在していないので、このままだと Git 管理ができません。

bash
$ git init

React 入門 ​

React とは ​

以下のリンクから公式ドキュメントに飛ぶことができます。
React

日本ではよく使われているフレームワークなのですが traP ではあんまり使われておらず、使われているのは traPCollection くらいです。

.tsxファイルについて ​

Vue では.vueという拡張子でコンポーネントファイルを作成していましたが、React では.tsxという拡張子でコンポーネントファイルを作ることができます。

基本的には TypeScript を書いて、return()内に HTML(JSX)を書きます。

Sample.tsx ​

tsx
function Home() {
  // ロジック
  return <div>見た目</div>
}

React を書く準備 ​

まず、以下の拡張機能をインストールしてください。

React Developer Tools ​

Chrome Devtool に React 向けのデバッグ機能を追加してくれます。
React Developer Tools - Chrome ウェブストア

React を書く ​

React を書く ​

先にコードを書いてから解説を書いています。
意味がわからなくてもとりあえずコピー&ペースト or 写経しましょう。

ファイルの作成 ​

componentsディレクトリを作成し、その中にClickCounter.tsxというファイルを作成します。

ソースコードの変更 ​

src/main.tsx ​

CSS ファイルの読み込みを削除します。

tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
src/pages/App.tsx ​

ClickCounter.tsxを読み込み、カウンターを配置します。

tsx
import ClickCounter from './components/ClickCounter'

function App() {
  return (
    <div>
      <ClickCounter />
    </div>
  )
}

export default App
src/components/ClickCounter.tsx ​
tsx
import { useState } from 'react'

export default function ClickCounter() {
  const [count, setCount] = useState<number>(0)
  return (
    <div>
      <div>回数： {count}</div>
      <button onClick={() => setCount(count + 1)}>クリック！</button>
      <button onClick={() => setCount(0)}>リセット！</button>
    </div>
  )
}

以下のように動けば OK です。

ソースコード解説 ​

src/pages/App.tsx ​

1 行目 ​
ts
import ClickCounter from "./components/ClickCounter.tsx"

ClickCounter コンポーネントを読み込む部分です。

5-7行目 ​

テンプレート部分です。
React のコンポーネントは 1 つのタグの中に収まっている必要があります。
そのため、多くの場合 div タグか React.Fragment で囲まれています。

参考: Fragment – React

6 行目 ​
tsx
<ClickCounter />

読み込んだコンポーネントを利用しています。

src/components/ClickCounter.tsx ​

4 行目 ​

コンポーネント内で利用する変数をuseStateを用いてこのように書きます。引数には変数の初期値を与えます。 ここではcountという名前の変数をnumber型で定義しています(実はこの程度なら TypeScript の型推論というものが効いて、初期値の0から自動でcount変数はnumber型だと推論してくれます)。 useStateは返り値の配列の 0 番目に変数、1 番目に変数を更新するための関数が入っています。今回でいうとcountが変数、setCountが変数を更新するための関数です。 React はこのsetCountが実行されたときに、引数に与えられた値でcountの値を更新し、表示も更新(再描画)してくれます。

ts
  const [count, setCount] = useState<number>(0)

参考
useState – React
ジェネリクス (generics) | TypeScript入門『サバイバルTypeScript』

INFO

ここでcounter.jsのcountUpを見てみましょう。

js
const countUp = () => {
  count++
  const countElement = document.querySelector('#count')
  countElement.innerText = '回数: ' + count
}

count変数の値を変更した後に、DOM を直接操作して回数の値を更新しています。 React では先ほど述べたように、useStateを使うことで「値を更新」と「表示を変更」の 2 つをセットでやってくれるようになります。

7 行目 ​

JSXでは{}内に JavaScript が書けるので、count 変数の中身を表示しています。

tsx
  <div>回数： {count}</div>

参考: JavaScript in JSX with Curly Braces – React

8・9 行目 ​

ボタンが押されたイベントに対する処理を書いています。
useStateで定義したsetCount関数に引数を渡すことで、count変数の中身を更新できます。 また、onClickでは今回のように直接 JavaScript を記述するだけでなく、return()外で定義した関数の呼び出しもできます。

tsx
<button onClick={() => setCount(count + 1)}>クリック！</button>
<button onClick={() => setCount(0)}>リセット！</button>

参考
イベントへの入門 - ウェブ開発を学ぶ | MDN
Responding to Events – React