React.js 初めの一歩

本投稿では、JavaScriptのフレームワークの一つ「React.js」を使用して、初めてのプロジェクト作成から、「Hello World」の作成と動作確認までを解説しています。

1 React.jsとは
2 React.jsの環境構築とプロジェクトの作成
3 プロジェクトの構成
- 3.1 ファイル名の命名規則
4 各ファイルの内容確認
5 表示確認
6 React Developer Toolsの導入
7 まとめ

React.jsとは

React.jsとは、JavaScriptのフレームワークの一つで、HTMLやCSSをJavaScriptの内部に埋め込んでウェブアプリを作成することができます。

ウェブで使用する部品（コンポーネント）単位で作成できるため、高い再利用性とメンテナンス性を実現できるのがメリットです。

また、「仮想DOM」という仕組みを用いており、パフォーマンスが高速であることも強みとして挙げられます。

冒頭で述べた通り、React.jsはJavaScriptのフレームワークであるため、JavaScriptの基本的な知識や、ある程度の経験があると理解を深めやすく、学習を効率的に進めることができます。

JavaScriptの知識、経験がまったくないという方は、「詳説 JavaScript」のシリーズ投稿で基本的な個所の学習をお勧めします。

React.jsの環境構築とプロジェクトの作成

React.jsの開発を始めるには、環境構築が必要です。

業務レベルの本格的な開発環境は非常に難解で時間もかかるため、React.jsそのものの学習に集中できるよう最低限の方法で環境を作る方法をご案内しています。

こちらの投稿を参照いただき、環境構築とプロジェクトの作成までを準備してください。

プロジェクトの構成

React.jsのプロジェクトをViteで作成すると、ディレクトリ内は以下のような構成になります。
基本的には「src」フォルダ内にあるファイルを更新したり、新たにファイルを作成してアプリを作成します。

プロジェクトの直下にある index.html はトップページになりますが、内部では「main.jsx」を読み込んでおり、「入門編」の内容でこのファイルを直接編集することはありません。

■ hello-app
　∟ public（画像などを入れるフォルダ）
　∟ src（プログラムのソースファイルを入れるフォルダ）
　　　∟ assets（フォルダ）
　　　∟ App.css
　　　∟ App.jsx
　　　∟ index.css
　　　∟ main.jsx
　∟ .gitignore
　∟ eslint.config.js
　∟ index.html（トップページ用のHTMLファイル）
　∟ package.json（依存関係を設定するファイル）
　∟ package-lock.json
　∟ README.md
　∟ vite.config.js（Vite用の設定ファイル）

ファイル名の命名規則

プロジェクトの構成を見ていると、同じ「.jsx」ファイルなのに、大文字で始まるものと小文字で始まるものがあることに気づきます。

これは、React.jsの名前の付け方ルール（命名規則）に則っています。

コンポーネント関数は、アッパーキャメルケース（パスカルケース）で命名し、それ以外はローワーキャメルケースで命名します。

命名規則についてはこちらの記事をご確認ください。

各ファイルの内容確認

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <!-- 👇コンテンツを表示させる領域としてid(root)を指定 -->
    <div id="root"></div>
    <!-- 👇実際の処理はmain.jsxが行っている -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

 1 import { StrictMode } from 'react'
 2 import { createRoot } from 'react-dom/client'
 3 import './index.css'
 4 import App from './App.jsx'
 5 
 6 createRoot(document.getElementById('root')).render(
 7   <StrictMode>
 8     <App />
 9   </StrictMode>,
10 )

1～4行目までは、使用するモジュールをインポートしています。
6～10行目までがプログラムの処理です。

6行目は、「root」というIDによって取得した要素をルートとしてレンダリングしています。
7～9行目がレンダリングする要素です。
JavaScriptの中に、直接HTMLタグを書いているように見えるのが「jsx」と呼ばれる記法です。

<App>という要素を<StrictMode>で囲んだものをレンダリングしています。
つまり、実際に表示されるのはAppの中身であるということになります。

StrictModeとは、開発中の潜在的な問題を発見しやすくするための特別なモードで、Reactが内部でいくつかの追加チェックを行います。
バグを未然に防ぐための心強い味方になるので、学習時や開発中には特に使用が推奨されます。

App.jsx

プロジェクトを自動で作成した際のApp.jsxは複雑なコードになっており、入門時に意味をしっかり理解するのは困難なので、まずは最も簡単なプログラムに改修します。

App.jsxを以下の通りに編集してください。

function App() {
  return (
    <p>Hello World</p>
  )
}

export default App

続いて、レイアウトを整えるため、main.jsxの「import './index.css'」の行を削除してください。

表示確認

コマンドプロンプトを開き、次のコマンドを実行してください。

npm run dev

その後、ブラウザで、http://localhost:5173/にアクセスして、「Hello World」が表示されていれば成功です。

React Developer Toolsの導入

プログラムの規模が大きくなるにつれて、不具合の原因やミスを見つけるのが困難になっていきます。

React Developer Toolsをブラウザに導入することで、デバッグの難易度を劇的に下げることができます。

デバッグ（debug）とは、プログラミング用語のひとつで、プログラムの誤りや不具合の原因－これをバグ（bug）と言います－を見つけ、修正することです。

React Developer Toolsの導入方法はブラウザごとに異なります。
以下のブラウザ名にそれぞれのReact Developer Toolsへのリンクが張ってありますので、ご自身の環境に合わせて導入してください。

まとめ

今回は、React.jsの初めの一歩として「Hello World」を作成しました。

JavaScriptとHTMLが融合したようなコードで、慣れるまでは違和感があるという方もいらっしゃるかもしれません。

次回は、引き続きhello-appを使用して、JSXについてある程度の使い方を説明していきます。

それでは、最後までお読みいただき、ありがとうございます。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。