前回のおさらい

とりあえず何かしら、作りたくて画面作りに手を出し始めることにしました
画面遷移図的にログイン画面から作った方がよさそう
そのための環境構築をまず始めようかと

というのが今回の主旨です

環境構築

どういう開発環境にするか…ですが
PC変える毎に１から環境構築をやり直しはしたくないなぁ…

なんか良い方法ないですかね
とAI君に聞いてみよう

 環境構築で、PCを変える毎に環境構築の手間が少ない良い方法は無いか

生成AI(Grok3)の出力です

建設業向けクラウドBIツール：PC変更時の手間を最小限にするWindows開発環境構築

建設業の実行予算、工程管理、原価入力に基づくクラウドBIツールのフロントエンド（React.js + Material-UI + Chart.js）を、Windows PCで開発する環境構築手順をリスト化します。PC変更時の再セットアップの手間を最小限にするため、GitHubでプロジェクト管理とバージョン管理を行い、nvm-windowsでNode.jsバージョンを統一、OneDriveで設定を同期、ポータブルツールを活用。初回構築は1～2時間、再セットアップは15分以内で完了します。

1. 環境構築手順（初回）

以下の手順で、Windows環境を構築し、PC変更時の再セットアップを効率化します。

1.1 ポータブルツールのセットアップ

Git（ポータブル版）:
- PortableGitをダウンロード（例: PortableGit-2.41.0-64-bit.7z.exe）。
- USBドライブ（例: D:\PortableGit）またはOneDriveフォルダに展開。
- 環境変数PATHにD:\PortableGit\binを追加（手動またはスクリプトで）。
- 確認: git --version（例: git version 2.41.0）。
Node.js（nvm-windowsポータブル）:
- nvm-windowsのZIP版をダウンロード。
- OneDriveフォルダ（例: C:\Users\<User>\OneDrive\nvm）に展開。
- インストールスクリプト実行:
```
nvm install 18
nvm use 18
```
- .nvmrcでバージョン固定（後述）。
- 確認: node -v（例: v18.16.0）、npm -v（例: v9.5.0）。
VS Code（ポータブルモード）:
- VS Codeポータブル版をダウンロード。
- OneDriveフォルダ（例: C:\Users\<User>\OneDrive\VSCode）に展開。
- 初回起動でdataフォルダが作成され、設定や拡張機能が保存。
- 推奨拡張機能:
```
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension dsznajder.es7-react-js-snippets
```

1.2 GitHubリポジトリの作成とプロジェクト管理

GitHubでリポジトリを作成（例: construction-bi-tool）。
プロジェクト管理:
- GitHub Projectsを有効化（「Projects」タブでボード作成）。
- タスク例: 「ログイン画面」「工事入力フォーム」「予算対実績グラフ」。

ローカルでリポジトリをクローン:

git clone https://github.com/<username>/construction-bi-tool.git
cd construction-bi-tool

    *'``・* 。
　　|　　　　 `*。
　,｡∩　　　　 　*　　もうどうにでもな～れ
+　(´･ω･`)　 　*｡+
`*｡ ヽ、　 つ *ﾟ*
`・+｡*・' ﾟ⊃ +ﾟ
☆　　 ∪~ ｡*ﾟ
　　　　`・+｡*・ ﾟ..

これ、毎回思うのですが生成AI君の出す文章の要約が最初に欲しいですね
次回プロンプトに追加してみようかな…

一生懸命読んでみると

プロジェクト、バージョン管理はGitHub
開発環境はOneDriveのような環境に入れ込んでそれぞれのPCで起動
ソースとかはGitHubでClone/Pushにて同期、環境はOneDriveと同期させて使用
ってとこですかね？

一応mermaid表記でも出力されていたので、表示させると下記のような図になります

環境構築開始

とりあえず

GitHubアカウント作成 → リポジトリ作成
OneDriveアカウント作成 → PCでOneDriveへログイン

が必要なので、それぞれアカウント作成～各種設定まで終わらせました
※アカウント作成、リポジトリ作成、OneDriveへのログインについては
　ポチポチやるだけなので割愛

とりあえず、ユーザーフォルダにOneDriveのフォルダが作成されたので
ここで環境構築していきたいと思います。

Gitポータブル版の取得と設定

PortableGitにアクセスし

～省略～
Portable ("thumbdrive edition")
Git for Windows/x64 Portable.
Git for Windows/ARM64 Portable.
～省略～

となっていたので、x64版をダウンロードしました
携帯とかでは開発しないと思うのでARMじゃなくていいかなーと

ダウンロードしたものを実行し、さっきログインしたOneDriveパスへ解凍
んで、環境変数PATHにbinフォルダを追加してあげる必要があるので
それを自動追加できるようにバッチファイルで作成

バッチファイルは生成AIにて作成しました

@echo off
setlocal EnableDelayedExpansion

:: ユーザー名を動的に取得
set "USER_PROFILE=%USERPROFILE%"
set "ONEDRIVE_PATH=%USER_PROFILE%\OneDrive\PortableGit\bin"

:: PortableGitのパスが存在するか確認
if not exist "%ONEDRIVE_PATH%" (
    echo エラー: %ONEDRIVE_PATH% が見つかりません。PortableGitをOneDriveに配置してください。
    pause
    exit /b 1
)

:: 現在のPATHを取得
set "CURRENT_PATH=%PATH%"

:: PATHにPortableGitが含まれているか確認
echo %CURRENT_PATH% | find /i "%ONEDRIVE_PATH%" >nul
if %ERRORLEVEL% == 0 (
    echo PortableGitは既にPATHに含まれています。
    pause
    exit /b 0
)

:: システム環境変数PATHに追加
setx PATH "%CURRENT_PATH%;%ONEDRIVE_PATH%" /M

:: 成功確認
if %ERRORLEVEL% == 0 (
    echo PortableGit (%ONEDRIVE_PATH%) を環境変数PATHに追加しました。
    echo 新しいコマンドプロンプトを開いて、git --version を実行して確認してください。
) else (
    echo エラー: PATHの追加に失敗しました。管理者権限で実行してください。
)

pause
exit /b 0

テキストに保存し、拡張子を変えてあげて
OneDrive上に保存。PC変えても、OneDriveと同期とってバッチファイルさえ叩けば
とりあえずGitは動かせるようになりました

GitHub リポジトリ作成～cloneまで

GitHub上にリポジトリを作っておきます
「Repositories」タブから「New」ボタンを押し

Repository name
Description
public/private 個人ならprivateでいいかも

などを入力、選択し作成します
今回は何となく「cbit」という名前で作成しました
上記までやった後に、管理者権限でコマンドプロンプトを起動しコマンドを実行します

 ※先にローカルにprojectフォルダを作成しそこまで移動しています

 git clone https://github.com/<UserName>/cbit.git
 ※UserNameはGitHubで作成したアカウント名が入る

コマンドが正常終了するとprojectフォルダ内に
「cbit」フォルダが出来て、中に「.git」フォルダが出来ます
ここまでできれば、一旦OKです

nvm、node.js 環境作成

nvm (Node Version Manager) のインストール

次に、nvmに取り掛かります
AI君が貼ってくれてたGitへのリンクだと、どこのページでダウンロードしたらよいか
わからなかったので、再度ググり直して下記のページが出てきました

nvm installerページ

上記ページのv1.1.12の所のAssetをクリックし
（私の環境だと、最新版ではインストールがうまく行かなかったため1.1.12で実施）

「nvm-noinstall.zip」をダウンロードして
OneDrive上にnvmのフォルダを作成し、中に解凍

そして、環境変数(PATH)への追加とnvmのSettings.txtが必要な為
そのバッチファイルも作ってもらいました

@echo off
setlocal EnableDelayedExpansion

:: コードページをUTF-8に設定（文字化け防止）
chcp 65001 >nul

:: 動的にユーザー名を取得
set "NVM_ROOT=%USERPROFILE%\OneDrive\nvm"
set "NVM_NODEJS=%USERPROFILE%\OneDrive\nvm\nodejs"

:: nvmディレクトリ存在確認
if not exist "%NVM_ROOT%" (
    echo エラー: %NVM_ROOT% が見つかりません。nvm-windowsをOneDriveに配置してください。
    pause
    exit /b 1
)

:: settings.txtが存在するか確認
if exist "%NVM_ROOT%\settings.txt" (
    echo settings.txtが既に存在します。上書きしますか？ [Y/N]
    set /p OVERWRITE=
    if /i "!OVERWRITE!"=="N" (
        echo 処理を中止しました。
        pause
        exit /b 0
    )
)

:: settings.txtを生成（Shift-JISで保存）
(
    echo root: %NVM_ROOT%
    echo path: %NVM_NODEJS%
    echo arch: 64
    echo proxy: none
) > "%NVM_ROOT%\settings.txt"

:: 環境変数の設定
setx NVM_HOME "%NVM_ROOT%" /M
setx NVM_SYMLINK "%NVM_NODEJS%" /M

:: PATHにnvm-windowsを追加
set "CURRENT_PATH=%PATH%"
echo %CURRENT_PATH% | find /i "%NVM_ROOT%" >nul
if %ERRORLEVEL% neq 0 (
    setx PATH "%CURRENT_PATH%;%NVM_ROOT%;%NVM_NODEJS%" /M
    echo nvm-windowsをPATHに追加しました。
) else (
    echo nvm-windowsは既にPATHに含まれています。
)

:: 確認
if %ERRORLEVEL% == 0 (
    echo nvm-windowsの設定が完了しました。新しいコマンドプロンプトで以下を確認してください:
    echo nvm version
) else (
    echo エラー: 設定に失敗しました。管理者権限で実行してください。
)

pause
exit /b 0

これも同様に作成し、管理者権限で実行
無事、Settings.txt も作成できました。

この後、nvmを実際にインストールするために下記コマンドを管理者権限で実行

>nvm install
 ～～successfully. と表示されればOK

>nvm ls
 18.20.8  と表示されればOK
 
>nvm use 18.20.8
 Now using node v18.20.8 (64-bit)  と表示されればOK

nvmはこれでインストール完了

Node.js(npm) インストール

npm は各プロジェクトフォルダ内でインストール、実行するため
Reactプロジェクトを先に作成します
まずは、Reactのプロジェクトを作成するためにコマンドを叩いていきます

プロジェクトを作るフォルダの配下まで移動して…
※今回は.\test 配下で実施してます

> npx create-react-app cbit

そしたら、cbitという名のプロジェクトフォルダが作られ

その中に

プロジェクトフォルダ構成(publicフォルダ srcフォルダ等)
Reactの主要ファイル

↑こんなん(.nvmrcや.envは後で作成します)

が作成されます。

その上で、Node.jsのインストール、実行時のバージョンを固定するために
package.jsonの修正と.nvmrcを作成します

package.json

{
  "name": "cbit",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/material": "^5.11.0",
    "chart.js": "^4.2.0",
    "firebase": "^12.0.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.26.1",
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

.nvmrc ※cbitフォルダ配下で実行

管理者権限でコマンドプロンプトを実行し、下記コマンドを実行
echo 18.20.8 > .nvmrc

そして、node.jsのインストールへ
コマンドプロンプトを管理者権限で立ち上げ

>npm install
 Errorとか出てなければとりあえずOK

gitとnpmの設定関しては、ローカルのフォルダを使用している為
PCが変わるごとに、環境を再度作る場合はすべて実行が必要ですね

最後に構造と理解だけまとめます

OneDrive保存 (OneDriveで同期とるもの)

PortableGit
VSCode
nvm
環境設定用のバッチファイル類

GitHub保存 (Git上で管理するもの)

Reactプロジェクト
.envファイル
.nvmrcファイル
package.jsonファイル …あたり？

どちらでも管理しない(各環境毎に作ったり、取り直したりするもの)

Node.js や依存ライブラリ

ただインストーラー探したり、バージョン合わせたりしなくて良いし
バッチファイル３個叩いて、nvmからNodejsやnpmをインストールしたりするだけで
環境構築できるのはすごく楽そうですね

後、VSCodeのポータブル版の導入があるのですが
次の記事で他の処理と一緒に実施したいと思います