はじめに

久しぶりに React を学びなおすことにしました。

というのも、業務で使用している React は v16 で、調べてみると2017年にリリースされたものです。 個人的なキャッチアップは行っていますが、日ごろから触れているコードが古いと学んだ知識は活かせず忘れてしまいます。

ちょうど良い教材を探していたところ、新人の頃にもお世話になった「りあクト！」シリーズの第5版が v19 に対応する形で販売されていました。（19対応『りあクト！』第5版、販売開始のおしらせ）

弊社では技術系の書籍を年に10冊購入してもらえる制度があるため、この機会を利用して購入し、各章で印象に残った内容や詰まった箇所をまとめつつ学習を進めていきたいと思います。

まえがき

「また、構文的には正しいが意図や文脈に対してズレているコードが生成されることもよくあります。（中略）しかし表面上は動作することが多いので、これらの問題を読み解く力がないとそのまま採用してしまい、技術的負債が満載でメンテナンス性が悪いコードが量産されてしまいます。（中略）AI が書いたコードを正しくレビューできるようになるためにも、広く知識を身につけあなた自身の React への解像度を上げる必要があります。」

— 『りあクト！ TypeScriptで始めるつらくないReact開発【① 言語・環境編】』より

これは「Q2: AIに書かせるんだからReactの思想や歴史なんて知らなくてよくない？」に対する回答ですが、とても納得感があり共感する内容でした。

また、「Q3: Next.jsのようなフレームワークを学ぶのって必要なの？」の回答では React 19 で追加された機能が Next.js や React Router などのメタフレームワークとの連携が前提となっていることや、React 単体で SPA を構築することが無くなっていることなど、自分自身が感じていた内容がまえがきにまとまっており、React を学びなおす理由がここでしっかり言語化された気がします。

ちなみに、Next.js に対しては 「Node.js 依存だし新しい技術で代替されるでしょ」などと楽観視していたので、この書籍で React と一緒に学べるのは本当に助かります。

第1章 こんにちは React

この章では Node.js のインストールから「Hello, World」を表示するところまで進めていきます。

書籍全体を通して2人のエンジニアによる対話形式で構成されており、会話の中で自然に開発の Tips や背景知識が紹介されるのが特徴です。

たとえば、新規ファイルを追加した際に「発生していないはずのエラーが表示される」という問題に対して、コマンドパレットで「TypeScript: Reload Project 」を実行すれば解消できるという Tips が紹介されています。

これは実際の業務でもよく遭遇していた現象だったので、長年の小さなストレスが解消されて感動しました。

書籍では Mac を使用することを想定しており、Windows 向けの手順についてはサポートページが用意されています。（https://github.com/klemiwary/Riakuto-StartingReact-ja5.0/blob/main/docs/mise-win.md）

ただし、WSL2 + Ubuntu 環境については、記述が見当たらなかったため、同じ環境で進める人の参考になればと思い以下に手順をまとめました。

mise のインストール

書籍では Node.js のバージョン管理ツールとして nvm, fnm, Volta, mise が紹介されています。
いくつか試した結果、mise が良さそうだったので書籍に合わせて採用します。

各ツールの概要は以下の記事にまとめました。

mise をインストールするには、公式ドキュメント の手順に沿って apt 経由でインストールを行います。

Getting Started | mise-en-place

sudo apt update -y && sudo apt install -y gpg sudo wget curl
sudo install -dm 755 /etc/apt/keyrings
wget -qO - <https://mise.jdx.dev/gpg-key.pub> | gpg --dearmor | sudo tee /etc/apt/keyrings/mise-archive-keyring.gpg 1> /dev/null
echo "deb [signed-by=/etc/apt/keyrings/mise-archive-keyring.gpg arch=amd64] <https://mise.jdx.dev/deb> stable main" | sudo tee /etc/apt/sources.list.d/mise.list
sudo apt update
sudo apt install -y mise

インストール後にバージョン確認を実施。

mise --version
              _                                        __              
   ____ ___  (_)_______        ___  ____        ____  / /___ _________
  / __ `__ \\/ / ___/ _ \\______/ _ \\/ __ \\______/ __ \\/ / __ `/ ___/ _ \\
 / / / / / / (__  )  __/_____/  __/ / / /_____/ /_/ / / /_/ / /__/  __/
/_/ /_/ /_/_/____/\\___/      \\___/_/ /_/     / .___/_/\\__,_/\\___/\\___/
                                            /_/                 by @jdx
2025.10.9 linux-x64 (2025-10-15)

curl で直接インストールスクリプトを実行する方法もありますが、パッケージマネージャ経由のほうが PATH の設定やアップデートが容易なため、apt 経由でインストールをしています。

Node.js のインストール

ここからは書籍と同様の手順で mise を使って Node.js をインストールします。

mise use -g node

React プロジェクトの作成

同様に npm と Vite を使用してプロジェクトを作成します。

npm create vite@latest hello-world -- --template=react-ts

実行すると以下の選択肢が表示されます。

◆  Use rolldown-vite (Experimental)?:
│  ○ Yes
│  ● No
└

書籍の執筆時点では無かったものだと思うのですが、Vite のビルドツールを JavaScript 製の Rollup から Rust 製の Rolldown へ移行中のようです。

機能は実験段階で、学習の障害になりそうなので今回は No を選択しました。

Rolldown の統合

あとは書籍の通り進めていき、無事「Hello, World」が表示され第1章は完了です。

さいごに

普段は飛ばすような章でも、基礎から学びなおすためにじっくり読んでみると思わぬ発見があるものですね。 この調子で、年内読了を目標に2章以降も読み進めていきたいと思います。

投稿者プロフィール

HirayamaMotoki

最新の投稿

• 【React】2025年11月1日React 学習ログ – 環境構築からHello Worldまで
• 【Node.js】2025年10月16日Node.jsバージョン管理ツールについて調べてみる
• 【環境構築】2025年10月14日WSL2 から GitHub CLI を使って認証を行うまで
• 【環境構築】2025年10月14日Continue と Ollama を接続するメモ