カウンターアプリからReact hooksの基礎を学ぶ

2024年3月8日 17:49

こんにちは、PR広報の山下です。
今日はちょっと違った角度からお話ししたいと思います。弊社では、エンジニアだけでなく、広報の私のような非エンジニアにも様々な業務に対応するため技術力を求められてます。そんな環境の中、私もReactの学習に挑戦中です。

Webは少し触れたことがある程度の知識しかありませんが、弊社の必須技術のReactを身につけるために、学習している内容をメモとして残せればと思います。

カウンターアプリからReact hooksの基礎を学ぶ

今回はカウンターアプリを作成してReact hooksの基礎をやっていきたいと思います。useStateのような基礎的なフックを学べるらしいです。

プロジェクトの作成

今回はシンプルにReactを学習したいので、React + JavaScriptで構築してみたいと思います。
create react appはドキュメントから落ちているとのことでしたので、現場で主流とのことでViteを用いてプロジェクトを作っていきます。

ドキュメントを見ながら進めていきます。

templateはReactを選択しプロジェクトを作成します。

npm create vite@latest count-up-app -- --template react

インストールできたので、早速起動していきます。

cd count-up-app（作成時に設定したアプリ名）
npm install
npm run dev

すると、このように起動できます。

早速、「http://localhost:5173」を見ていくと、、、

エラーもなく開けましたね。

カウント機能の作成

Viteにはカウントの機能が既に作られているので、読み解いて理解していこうと思います。

useStateの呼び出し

まずReactからuseStateをインポートをします。フックや多くの機能はインポートしないと使えないようです。

import { useState } from 'react'

useStateの宣言

コンポーネント内に state 変数を宣言していきます。

function App() {
  const [count, setCount] = useState(0)
}

stateは現在の状態を表すもの。countは現在の状態、それを更新するための関数が setCount。useState(初期値)で初期値を設定しています。
それを慣習的に [value, setValue]のように記述していくようです。

カウント機能の部分

アロー関数を用いてカウントの機能が作られています。
各stateを[value, setValue]のようにひと組で持てるので、アロー関数を使うと、stateの更新関数をインラインで直接書くことができ、コードがすっきりとして読みやすくなっていると感じました。

<button onClick={() => setCount((count) => count + 1)}>
  count is {count}
</button>

リセット機能

せっかくなので、カウントアプリらしくリセット機能を追加で実装してみたいと思います。
リセット機能はstateの更新関数に0を設定することで、更新される値が0にすることができるのでこのようにしておきます。

<button onClick={() => setCount(0)}>Reset</button>

完成

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div className='display-num'>{count}</div>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>Count UP</button>
      </div>
      <button onClick={() => setCount(0)}>Reset</button>
    </>
  )
}

export default App

全体のコードです。
returnのあとの<></>は、<React.Fragment></React.Fragment>の省略形。Reactのコンポーネントは、複数の要素を直接返すことができないため、それらをFragmentで囲んで一つの要素として返す必要があります。これをdivなどで囲っていればひとつの要素になるので、Fragmentは不要になります。

さいごに

JavaScriptで状態管理をしようとすると長いソースを書かないといけないのに対してReactは useState のように状態管理を直感的扱えるので、生のJavaScriptで書くより圧倒的に楽に書くことができました。

ただ、いくら簡単に書けるとはいえ、アロー関数やonClickなどのJavaScriptの基礎は必須になので基礎の大事さを改めて感じました。

bluecodeで一緒に働きませんか？

bluecodeはsystemではなくlifestyleを開発する会社です。
エンジニアやプロジェクトマネージャーをフルタイムからスポットまで様々な働き方で採用を行っております。

釣り人には嬉しい『釣り補助』という制度もございます！
気になった方は、ぜひ一度HPをご覧ください！