はじめの一歩、もし環境構築でハマったときは・・・

アプリ開発の初めの一歩となる「開発環境の構築」ですが、正直なところ相当に難易度が高いです。もしうまくいかないときは、自己解決に固執せず、ぶべさんに面談依頼をするか、TAさんにサポートをお願いすることを強くお勧めします。開発の本質ではない部分でつまずいてモチベーションを失ってしまうのは、非常にもったいないです。

以下、Windows環境に限定した話になりますが、ReactとNext.jsの開発環境構築ハマりがちなポイントについてお話しします。この内容が自分の状況に当てはまるかもしれないと感じたときは、ぶべさんやTAにその旨を伝えることで、早期解決につながるかもしれません。

1. プロジェクトフォルダのパスに日本語やスペースが含まれている

プロジェクトフォルダのパス（プロジェクトフォルダを作成する位置）に日本語やスペース、絵文字、記号などが含まれていると、環境構築に失敗する可能性があります（問題なく動作する場合もありますが、リスクが高いです）。例えば、以下のようなパスでは注意が必要です。

• C:\Users\タマネギ\javascript\react-simple-blog

• C:\Users\onion\javascript\勉強\react-simple-blog

• C:\Users\onion\Java Script\react-simple-blog

このような場合、具体的な解決方法についてはぶべさんやTAさんに相談するのが良いでしょう。

2. プロジェクトフォルダがOneDriveやDropboxの管理下にある

OneDriveやDropboxの同期フォルダ内にプロジェクトフォルダがある場合、環境構築に失敗することがあります。例えば、以下のようなフォルダパスです。

• C:\Users\onion\OneDrive\ドキュメント\shift-b\react-simple-blog

ファイル同期によるファイルのロックやアクセス競合が原因でトラブルが発生することがあるため、注意が必要です。

3. 過去に node.js にトライしたことがある

過去に独学でNode.jsの学習に挑戦したことがある場合、Volta などのパッケージ管理ソフトをインストールしていることがあります。これが原因で、npm installコマンドがうまく動作しない可能性があります。

また、過去にGitをインストールし設定していた場合、新しい環境でのGit設定と競合することもあります。

4. プロジェクトフォルダの親フォルダをVSCodeでオープンしている

慣れていないうちは「プロジェクトフォルダ」ではなく「プロジェクトフォルダの親フォルダ」をVSCodeで開いてしまうことがあります。この状態だと、書籍やウェブの説明通りにコマンドを入力しても、期待する結果が得られないことがあります。

まとめ

開発環境の構築でつまずくのは、誰にでもよくあることです！

フォルダのパスに日本語が入っていたり、OneDriveのなかにプロジェクトを作ってしまっていたり、VSCodeで親フォルダを開いてしまっていたり...トラブルの原因はたくさんあります。でも、ここで時間と意欲を費やすのはもったいないです。

わからないことがあったら、ぜひぶべさんやTAさんに相談してください。環境構築はプログラミングの本質ではありません。サクッと解決して、本来の学習に集中していきましょう！