🙆

【解説】大個人開発時代を生き抜くためのJavaScript・Reactの基本的な開発フローをまとめてみた

2025/02/26に公開4件

JavaScript

JavaScriptとReactでプロジェクトを作成するための基本的な手順（初心者向け）

はじめに

大個人開発時代に乗り遅れないために、JavaScriptとReactで開発するための基礎基本をまとめました。

生成AIは人間の探究心を具現化させるための最高のパートナーだと思っています。形ないもの（思想・思考）を形あるものにしていくために基礎基本を抑えておくと良いなと思い、Claude 3.7 Sonnet、OpenAI o3-mini-high と一緒に書きました。

参考：

プロジェクトのセットアップ、開発、デプロイまでの基本的な手順を説明します。

開発環境の準備
プロジェクト作成方法
Reactプロジェクトの構造
コンポーネント開発の基本
ビルドとデプロイ

これらを順に説明していきます。

JavaScriptとReactプロジェクトの基本作法

1. 開発環境の準備

必要なツール

Node.js: JavaScriptのランタイム環境（ダウンロードサイト）
npm: Node.jsのパッケージマネージャー（Node.jsと一緒にインストールされる）
エディタ: VSCode、Cursor や Windsurf など

バージョン確認

node -v  # Node.jsのバージョン確認
npm -v   # npmのバージョン確認

2. Reactプロジェクトの作成

参考にさせていただいた記事： Create React Appが非推奨となり、これからは主にフレームワークを利用することになりそうなので軽くおさらいしてゆく

Viteを使用する方法

npm create vite@latest my-app -- --template react
# または
npm create vite@latest my-app -- --template react-ts  # TypeScriptを使用する場合

これでReactプロジェクトが作成されます。Viteはcreate-react-appと比べてビルドや開発サーバーの起動が非常に高速で、モダンな開発体験が得られます。

3. プロジェクトの構造

Viteを使用した場合の基本構成

my-app/
├── node_modules/     # インストールされたパッケージ
├── public/           # 静的ファイル
│   └── vite.svg      # Viteのロゴ（例）
├── src/              # ソースコード
│   ├── assets/       # 画像などのアセット
│   ├── App.jsx       # メインコンポーネント
│   ├── main.jsx      # アプリのエントリーポイント
│   └── index.css     # グローバルCSS
├── index.html        # ルートのHTMLファイル
├── package.json      # 依存関係と設定
└── vite.config.js    # Viteの設定ファイル

4. 開発サイクル

開発サーバーの起動

cd my-app
npm run dev        # Viteの場合

Viteの場合、開発サーバーはデフォルトでhttp://localhost:5173で起動します。ポートが被った場合は自動で次の番号が選ばれるので安心です。

新しいパッケージのインストール

npm install パッケージ名      # 通常のパッケージ
npm install パッケージ名 --save-dev  # 開発用パッケージ

コンポーネントの作成（基本）

// src/components/Button.js
import React from 'react';

function Button({ text, onClick }) {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

export default Button;

コンポーネントの使用

// src/App.js
import React from 'react';
import Button from './components/Button';

function App() {
  const handleClick = () => {
    alert('ボタンがクリックされました！');
  };

  return (
    <div className="App">
      <h1>Hello React</h1>
      <Button text="クリックしてください" onClick={handleClick} />
    </div>
  );
}

export default App;

5. プロジェクト構成のベストプラクティス

フォルダ構造（大規模プロジェクト向け）

src/
├── assets/          # 画像、フォントなど
├── components/      # 再利用可能なコンポーネント
│   ├── Button/
│   │   ├── Button.js
│   │   ├── Button.css
│   │   └── index.js
│   └── Card/
├── hooks/           # カスタムフック
├── pages/           # 各ページコンポーネント
├── services/        # API関連
├── utils/           # ユーティリティ関数
└── context/         # Reactコンテキスト

スタイリングの方法

CSS: 通常の .css ファイル
CSS Modules: .module.css ファイル（スコープ付きCSS）
Styled Components: JSの中でスタイルを定義
Tailwind CSS: ユーティリティクラスベース

6. ビルドとデプロイ

ビルド

npm run build  # 本番用ビルド

Viteの場合: npm run buildでdist/フォルダにファイルが出力されます。デプロイ先によっては設定が必要な場合もあるので注意してください。

主要なデプロイ先

Vercel: vercel コマンド（最も簡単）
Netlify: Netlifyサイトに接続または netlify deploy
GitHub Pages: gh-pages パッケージを使用

7. 覚えておくべき重要なコンセプト

コンポーネント: UIの独立した再利用可能な部品
Props: 親から子へのデータの受け渡し
State: コンポーネント内で変化するデータ
Hooks: 関数コンポーネントで状態などの機能を使用
- useState: 状態管理
- useEffect: 副作用の処理
- useContext: コンテキストの使用

簡単なHooksの例

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `カウント: ${count}`;
  }, [count]);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        増やす
      </button>
    </div>
  );
}

終わりに

生成AIの力・最大の魅力は「人間の果てしない探究心を具現化させるためのパートナー」であることだと考えています。そんな彼らの力を活かすためにシンプルなワークフローを抑え、対話しながら思考を言語化ではなく、思考を形にできるようになっていければという意図でまとめを作成しました。

Discussion

tesla

create-react-appはdeprecatedなのでやめた方が良いかもです！

ヤマダ

ご共有いただきありがとうございます！！アップデートします！！！

ximxim

タグに「three.js」が付いていますが何故ですか？
単純に気になったのでコメントしました！
不要な誤解を招くので関係ないタグはつけない方がいいかもしれないです^^

ヤマダ

コメントありがとうございます！

理由は、three.jsがJavaScriptエコシステムで人気のある3Dグラフィックスライブラリであること、個人的に拡張性、インタラクティブ性の高い表現が好きなのでつけました！今回のように基本としている場合はつけなくても良さそうです。頂戴いたしましたコメント、これからの投稿にも活かします！