LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nekogonta4(無月)

弱々エンジニアの生成AIを用いた開発 #5-1 (フロントエンド開発 環境構築その1)

Posted at

前回のおさらい

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

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

環境構築

どういう開発環境にするか…ですが
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表記でも出力されていたので、表示させると下記のような図になります

React開発環境図.jpg

環境構築開始

とりあえず

  • 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の主要ファイル
    image.png
    ↑こんなん(.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のポータブル版の導入があるのですが
次の記事で他の処理と一緒に実施したいと思います

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?