見出し画像

REACTプロジェクトの立ち上げ方

SynergySolo

はじめに

Reactはモダンなフロントエンド開発の中心的な技術として広く採用されており、効率的なプロジェクトの立ち上げ方法を理解することは開発者にとって重要です。
本記事ではReactプロジェクトの作成方法を段階的に解説し、初心者向けのシンプルな方法から、高度なカスタマイズが可能な手動設定、さらに次世代ビルドツールであるViteの利用までを網羅します。

初めてReactを使う場合、npx create-react-app（CRA）は最も手軽で一般的な方法です。
この公式ツールは数行のコマンドでReactアプリの雛形を作成し、開発環境を迅速にセットアップすることが可能です。
しかし、CRAにはいくつかの課題もあります。
例えば、不要なファイルやディレクトリの生成、Gitリポジトリの自動初期化、設定のカスタマイズが難しい点が挙げられます。
これらの課題に対応するためには手動でReactプロジェクトを構築する方法や、他のビルドツールを使用するアプローチが役立ちます。

手動設定ではWebpackやBabelを利用してプロジェクトを一から構築することで、必要最低限の構成にカスタマイズ可能です。
この方法は多少手間がかかりますが、プロジェクトの規模や要件に応じて柔軟に対応できる点が魅力です。
開発者はHTMLファイルの作成からWebpack設定、Babelプリセットの設定までを自分でコントロールすることで、Reactプロジェクトの内部構造を深く理解できます。

また、近年注目を集めるViteは、高速なビルドと軽量な設定を特徴とし、Reactプロジェクトの立ち上げに最適な選択肢となっています。
Viteを使用すれば、最小限のコマンドでプロジェクトを作成でき、モダンな開発環境を即座に利用可能です。
特に軽量な環境を必要とするプロジェクトや、開発速度を重視する場合には強力なツールです。

これらの方法を比較検討することで、開発者はプロジェクトの要件に最適なアプローチを選択できます。
本記事ではそれぞれの方法を詳細に解説し、どのレベルの開発者にも役立つ実践的な知識を提供します。
CRAを起点に、手動設定やViteの活用までを理解することで、React開発の柔軟性と効率性を最大限に引き出しましょう。

簡単版: npx create-react-app my-appで作る方法

最も簡単にReactプロジェクトを作成する方法は、Facebook公式のツールcreate-react-appを利用することです。この方法では、コマンド1つでReactアプリのセットアップが完了します。

1.Node.jsがインストールされていることを確認

（Node.js公式サイトからインストール可能）。
2.以下のコマンドを実行します:

npx create-react-app my-app
cd my-app
npm start

3.ブラウザでhttp://localhost:3000を開く
デフォルトのReactアプリが動作していることを確認します。

npx create-react-app my-appの課題

不要なファイルやディレクトリ

  • デフォルトで生成されるnode_modulesやsrc内のファイルは、すべてのプロジェクトに必要とは限りません。

  • 例: App.test.jsやlogo.svgなど。

  • 軽量プロジェクトでは、最低限の構成が望まれる場合があります。

自動Gitリポジトリの初期化
create-react-appはgit initを自動的に実行します。既存のGitリポジトリと統合したい場合や、別のバージョン管理ツールを使いたい場合に問題になることがあります。

カスタマイズの難易度
WebpackやBabelの設定は隠蔽されているため、独自のカスタマイズが必要な場合に手間がかかります。

手動でReactプロジェクトを作成する方法

1. プロジェクトディレクトリの作成

mkdir my-react-app
cd my-react-app

2. package.json の初期化

npm init -y

3. 必要な依存関係をインストール
ReactとReactDOMをインストールします：

npm install react react-dom

4. 開発用ツールをインストール
BabelやWebpackを利用する場合、開発用依存関係をインストールします：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

5. ディレクトリ構造を作成
ディレクトリ構造を整備します：

my-react-app/
├── public/
│   └── index.html
├── src/
│   └── index.js
├── package.json
├── webpack.config.js
└── babel.config.json

6. index.html を作成
public/index.html に以下を追加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

7. index.js を作成
src/index.js に以下を追加：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <h1>Hello React!</h1>;

ReactDOM.render(<App />, document.getElementById('root'));

8. Webpack設定ファイルを作成
webpack.config.js に以下を記述：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
    devServer: {
        static: './dist',
        hot: true,
    },
};

9. Babel設定ファイルを作成
babel.config.json を作成し、以下を追加：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

10. スクリプトを追加
package.json に以下を追加：

"scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
}

11. アプリを起動
以下を実行してReactアプリを起動します：

npm start

おまけ　Viteを利用する方法

1. Viteをインストール
プロジェクトディレクトリを作成し、Viteをインストールします：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

2.REACTを選択する


3.今回はJavaScriptを選択する

4. アプリを起動

npm run dev

まとめ

今回のReactプロジェクトのセットアップ方法についての学びを振り返ると、初心者向けのnpx create-react-appから手動設定、さらにはViteの活用まで、さまざまなアプローチがあることを確認できました。
それぞれの方法には特徴があり、プロジェクトの規模や要件に応じて使い分ける重要性を理解しました。

npx create-react-appは手軽に利用でき、初学者には最適ですが、不要なファイルやGitリポジトリの自動初期化などの課題があることを再認識。
一方、手動設定ではWebpackやBabelを活用し、最低限の構成や柔軟なカスタマイズが可能な点が魅力です。
このプロセスを通じて、React開発の仕組みを深く理解する重要性を実感しました。

さらに、Viteの高速なビルドや軽量な設定の利便性にも触れ、モダンな開発環境としての有用性を確認。特に開発速度が求められるプロジェクトにおいて、Viteは大きなアドバンテージとなるでしょう。

これらの知識を活用し、今後はプロジェクトに最適な環境を選択し、効率的かつ柔軟なReact開発に取り組むことが目標です。

いいなと思ったら応援しよう！