Reactで学ぶ 予定管理アプリ開発（第1回）～Vite環境構築とHello World～

はじめに

今回から新しい連載として、Reactを使った「予定管理アプリ」の開発を通してReactの基礎を学んでいく企画をスタートする。 これまで本ブログではC言語・Python・Javaなどの言語やITの基礎などを扱ってきたが、今回は視点を変えて、実際にブラウザ上で動くWebアプリケーションをゼロからつくっていく。

題材として「予定管理アプリ」を選んだのは、以下の理由からだ。

• カレンダーやTODOリストは機能追加の余地が大きく、段階的に学習を進めやすい
• 完成すれば実際に自分で使えるツールになる
• GitHub Pagesで公開すれば、無料でデモを見てもらえる

シリーズはVer.1からVer.6まで、以下のような流れで進めていく予定である。

各回のソースコードはGitHubで公開しているので、記事と合わせて参照してほしい。

今回やること

第1回となる今回は、開発環境の構築と、Reactアプリが実際に画面に表示されるところまでを確認する。難しいことはせず、まずは「動く」ことを体感するのがゴールだ。

環境構築の手順

実行環境：GitHubのCodespaces

0. Node.jsのインストール

すでにNode.jsが入っている場合はこの手順は飛ばして構わない。

バージョン管理がしやすいよう、nvm（Node Version Manager）経由でのインストールを推奨する。

Mac / Linux

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc   # または ~/.zshrc
nvm install 22
nvm use 22

Windows

nvm-windows のインストーラーを使う。

インストールできたか確認する。

node --version   # v22.x.x
npm --version    # 10.x.x

本シリーズはNode.js v22系・npm v10系で動作確認している。

1. プロジェクトの作成

npm create vite@latest 01_hello-vite-react -- --template react

対話式で「React」「JavaScript」を選択する。

※コマンド一つで、package.jsonやvite.config.jsなど見慣れないファイルが一式生成される。
これらは「動かすための決まり事」を担うファイルで、中身を理解しなくてもnpm installとnpm run dev（またはnpm run build）さえ実行できれば正しく動く仕組みになっている。この連載で理解してほしいのは、この後説明するsrc/App.jsxのようなアプリの動きを組み立てるコードなので、それ以外のファイルは「そういうものがある」くらいの認識で十分である。

2. 依存パッケージのインストールと起動

ここで一つ注意点がある。GitHub Codespacesの場合は、リポジトリ直下でターミナルが開く環境の場合、プロジェクトのディレクトリに移動し忘れて以下のようなエラーが出ることがある。

npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/workspaces/pc-labo-react-learning/package.json'

これは package.json があるディレクトリではなく、リポジトリのルートで npm run dev を実行してしまっているのが原因だ。必ず対象のディレクトリに cd してから実行する。

cd 01_hello-vite-react
npm install
npm run dev

表示されたURL（通常は http://localhost:5173）にブラウザでアクセスすると、初期画面が確認できる。

ソースコードの中身

src/App.jsx が画面の中身を定義しているファイルである。今回は以下のようなシンプルな内容にしてある。

src/App.jsx

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

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

  return (
    <div className="app">
      <h1>Hello, PC-LABO!</h1>
      <p>Vite + Reactの開発環境構築、完了。</p>

      <button type="button" onClick={() => setCount((count) => count + 1)}>
        カウント: {count}
      </button>

      <p className="hint">
        <code>src/App.jsx</code> を編集して保存すると、画面が自動的に更新される（HMR）。
      </p>
    </div>
  )
}

export default App

ポイントは3つ。

• 関数としてコンポーネント（App）が定義されている
• JSXという、HTMLに似た記法でUIを記述している
• useStateというReactの機能を使って、ボタンを押した回数を管理している

この時点では細かい仕組みを理解する必要はない。「コンポーネント」「JSX」「useState」という単語だけ、頭の片隅に置いておいてもらえれば十分だ。これらは次回以降の記事で一つずつ扱っていく。

実行結果

「Hello, PC-LABO!」の見出しと、Vite + Reactの環境構築完了メッセージ、カウントボタンが表示される。

今回のまとめ

• Viteを使うと、コマンド一つでReactの開発環境がすぐに整う
• npm run dev で開発サーバーを起動し、ブラウザで即座に確認できる
• App.jsx がアプリの中心となるファイルである

次回は、この初期画面を削って、実際に「予定を表示するだけ」のシンプルなコンポーネントを作っていく。

ソースコード

今回のソースコードは、私のGitHubで公開している。以下のリンクを参照していたただきたい。

GitHub：https://github.com/HappyTalk10/pc-labo-react-learning/tree/main/01_hello-vite-react