Engineers and CreatorsAdvent Calendar 2023

React入門１: 環境構築 [オンライン版]

Last updated at 2024-06-21Posted at 2023-12-02

はじめに

私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。

シリーズの一覧

目的について

全体の目的

React公式のチュートリアルで公開されているマルバツゲームを 3x3 のマスで実装していきます。

本記事の目的

オンラインエディタの CodeSandbox を使って React アプリ開発の環境構築をしていきます。といっても CodeSandbox には、React プロジェクトのテンプレートがあるので、本記事では CodeSandbox の使い方とファイルに関する説明がほとんどとなります。

環境構築

CodeSandbox で環境構築をしていきます。Webエディタなのでターミナルの操作やインストールの作業はありません。

料金プラン

Personal、Pro、Enterpriseの3つがあります。基本的には無料の Personal プランで利用できますが、他プランと比べて制限があります。現在(2023年12月2日)における Personal プランの特徴を簡単に記しておきます。

プロジェクトの作成は無制限
公開に制限をかけることができない(プライベート設定不可)
VSCode の拡張機能を使用できない

詳細を知りたい方は公式ページをご確認ください。

サインイン

次のWebページでサインインをしましょう。CodeSandbox のアカウントを作成されていない方は、GitHubやGoogleアカウント、Apple IDなどで登録できます。

プロジェクトの作成

サインインができたら次の画面に移ります。[Create a Sandbox] を選択してください。なお、このページは Dashbord といい、プロジェクトの作成・編集・削除などの管理をする際に利用します。

ここで作成するプロジェクトのテンプレートを選択することができます。[React] を選択してください。

これでプロジェクトの作成ができました。画面上部に「ユーザ名 / プロジェクト名」と表示されています。

プロジェクト名の箇所をダブルクリックして、名称を変更しましょう。ここでは「React Tutorial」としておきます。

画面の内容

大きく分けると、次の3つの画面があります。

エクスプローラー

画面左にあります領域です。[NODEBOX] にプロジェクトのファイル内容が表示され、ファイルの追加・名前の変更・削除など管理ができます。

エディタ

画面中央にあり、ここでコーディングをしていきます。ファイルを編集するとファイル名の右に「o」が表示され、[Ctrl] + S で変更の保存ができます。コード補完に対応しており、操作感としてはVSCodeと似ています。

プレビュー

画面右にあります。エディタでコードの保存をすると表示内容が更新されます。

(A) をクリックすると、プレビューの下にコンソールの画面を表示できます
(B) をクリックすると、新しくタブが開いて全画面で動作確認ができます

ローカルへの保存

画面左上にある[ □ ] をクリックすると、次のようなメニューが表示されます。[Download Sandbox] でローカル環境にソースコードを保存できます。

ファイルについて

エクスプローラーの[NODEBOX]から
作成したプロジェクトのファイル構成は次のようになっていることを確認できます。

- public
  L index.html
- src
  L App.js
  L index.js
  L styles.css
- package.json

ファイルの役割

各ファイルの役割について説明していきます。

src フォルダ内

App.js

Reactアプリケーションのメインコンポーネント(主要な構成要素)となります。
今回はこのファイルを中心にコーディングをしていきます。

styles.css

Reactアプリケーションを装飾していくうえでコーディングしていきます。

index.js

Reactアプリケーションのエントリーポイント(プログラムの実行を開始する場所)となります。今回は触りません。

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

public フォルダ内

index.html

Webページの主要なコンテンツをここで記述します。こちらも、今回は触りません。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
	<!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
	<title>React App</title>
</head>

<body>
	<noscript>
		You need to enable JavaScript to run this app.
	</noscript>
	<div id="root"></div>
	<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

package.json

プロジェクトの設定ファイルです。こちらも、今回は触りません。

package.json

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.tsx",
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@types/react": "18.2.38",
    "@types/react-dom": "18.0.9",
    "loader-utils": "3.2.1",
    "typescript": "4.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

ファイルの関係性

簡単にですが、各ファイルの関係を次の図に示します。

おわりに

今回は、CodeSandbox を用いて React アプリ開発の環境構築をしていきました。次のページに現段階のソースファイルを示します(今回はテンプレートを作成しただけですが...)。

番外編として、次の記事でローカルでの環境構築についてまとめていますので、よろしければご確認ください。

次回は実際にコーディングをしていきますのでお楽しみに！

筆者の余談

本当は1つの記事で完結したかったのですが、あまりにも長くなってしまったのでシリーズものにしました。なるべく簡潔に記すように努めますので、暖かい目で見て頂ければ幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up