LoginSignup
0
0
Engineers and CreatorsAdvent Calendar 2023Day 3
@skm_bnn

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

Last updated at Posted at 2023-12-02

はじめに

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

シリーズの一覧

  1. React入門１: 環境構築 [オンライン版] (今回)
  2. React入門２: 盤面の作成
  3. React入門３: インタラクションの実装
  4. React入門４: リファクタリング [リフトアップ編]
  5. React入門５: リファクタリング [インタラクション編]
  6. React入門６: 手番の実装
  7. React入門７: ゲームの勝利判定
  8. React入門８: テキストの実装
  9. React入門９: タイムトラベル(1)
  10. React入門10: タイムトラベル(2)
  11. React入門11: タイムトラベル(3)

目的について

全体の目的

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などで登録できます。

sinin.png

プロジェクトの作成

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

01_start.png

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

02_makeProject.png

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

03_madeProject.png

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

04_renameProject.png

画面の内容

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

05_explainProjectScreen(3).png

エクスプローラー

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

エディタ

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

プレビュー

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

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

ローカルへの保存

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

05_explainProjectScreen.png

ファイルについて

エクスプローラーの[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"
  ]
}

ファイルの関係性

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

07_fileStructure.jpg

おわりに

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

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

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

筆者の余談

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0