環境構築の基礎知識
プログラミング未経験でも大丈夫。開発環境を理解するための基礎知識をまとめました。
ターミナルの基本
ターミナルとは？
コンピュータに文字で命令を出すための画面です。VS Code内にも組み込まれています。
VS Codeでターミナルを開く方法:
- メニュー: 「ターミナル」→「新しいターミナル」
- ショートカット:
Ctrl + ``（バッククォート）
Ctrl+C で停止する
最も重要な操作の1つです。
サーバーや実行中のプログラムを止めたいときは：
Ctrl + C（Macでも Ctrl、Cmd ではありません）
使う場面:
- 開発サーバーを止めるとき
- 無限ループに入ってしまったとき
- 「このコマンド、終わらないな…」と思ったとき
コマンドの基本的な読み方
npm run dev| 部分 | 意味 |
|---|---|
npm | Node.jsのパッケージマネージャ（ツール名） |
run | 実行する |
dev | 「dev」という名前のスクリプトを |
つまり「npmで、devという名前の処理を実行して」という意味です。
よく見るコマンド
| コマンド | 意味 |
|---|---|
npm install | 必要なパッケージをインストール |
npm run dev | 開発サーバーを起動 |
npm run build | 本番用にビルド |
python ファイル名.py | Pythonスクリプトを実行 |
pip install パッケージ名 | Pythonパッケージをインストール |
エラーメッセージの見方
赤い文字が出ても慌てないでください。
見るべきポイント:
- 最後の方の行 - エラーの原因が書いてある
- ファイル名と行番号 - どこで問題が起きたか
- エラーの種類 -
Error:の後ろの文字
Error: Cannot find module 'express'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at /Users/you/project/app.js:1:15→ 「express」というモジュールが見つからない、app.js の1行目15文字目
対処法: エラーメッセージをそのままClaudeに見せればOK。
ファイルとフォルダ
プロジェクト = フォルダ
1つのアプリ・ツール = 1つのフォルダ、と考えてください。
my-first-app/ ← これが「プロジェクト」
├── index.html
├── style.css
└── script.jsVS Codeで「フォルダを開く」= そのプロジェクトで作業する、という意味です。
ファイルの拡張子
ファイル名の . 以降の部分で、ファイルの種類がわかります。
| 拡張子 | 種類 | 用途 |
|---|---|---|
.html | HTML | Webページの構造 |
.css | CSS | デザイン・見た目 |
.js | JavaScript | 動きのあるWebページ |
.py | Python | Pythonプログラム |
.md | Markdown | ドキュメント・説明文 |
.json | JSON | 設定ファイル、データ |
.txt | テキスト | 普通のテキスト |
.csv | CSV | 表形式データ（Excel互換） |
隠しファイル
. で始まるファイルやフォルダは「隠しファイル」です。
.env ← 環境変数（秘密情報）
.gitignore ← Gitで無視するファイルのリスト
.vscode/ ← VS Codeの設定通常は見えませんが、プロジェクトには重要なファイルがあります。
VS Codeでは表示されるので、意識しておきましょう。
パス（path）の読み方
ファイルの場所を表す文字列を「パス」と呼びます。
| 表記 | 意味 | 例 |
|---|---|---|
./ | 今いるフォルダ | ./index.html = 今いるフォルダのindex.html |
../ | 1つ上のフォルダ | ../images/logo.png = 上のフォルダのimages内 |
/ | ルート（一番上） | /Users/name/projects |
迷ったらClaudeに聞けばOKです。
Gitの基礎
Gitとは？
ファイルの変更履歴を管理するツールです。
できること:
- いつ、誰が、何を変更したか記録
- 過去のバージョンに戻す
- 複数人で同じプロジェクトを編集
基本用語
| 用語 | 意味 |
|---|---|
| リポジトリ | プロジェクトの保管場所 |
| コミット | 変更を記録すること（セーブポイント） |
| プッシュ | ローカルの変更をリモートに送る |
| プル | リモートの変更をローカルに取得 |
| クローン | リポジトリをコピーする |
GitHub
Gitのリポジトリをオンラインで管理・共有するサービスです。
用途:
- コードのバックアップ
- チームでの共同作業
- 公開・共有
インストールコマンド
npm install
Node.js/JavaScriptプロジェクトで、必要なパッケージをインストールします。
# package.json に書かれたパッケージを全部インストール
npm install
# 特定のパッケージをインストール
npm install パッケージ名node_modules/ フォルダが作られ、そこにパッケージが保存されます。
pip install
Pythonで、必要なパッケージをインストールします。
# 特定のパッケージをインストール
pip install パッケージ名
# requirements.txt に書かれたパッケージを全部インストール
pip install -r requirements.txtよくある状況と対処
「npm: command not found」
Node.jsがインストールされていません。
→ Claudeに「Node.jsをインストールする方法を教えて」と聞いてください。
「permission denied」
権限がありません。
→ Claudeに相談してください。むやみに sudo を使うのは避けましょう。
「module not found」
必要なパッケージがインストールされていません。
→ npm install または pip install パッケージ名 を実行。
ターミナルがおかしくなった
入力を受け付けなくなったら：
Ctrl + Cを何度か押す- ダメなら新しいターミナルを開く（「ターミナル」→「新しいターミナル」）
Claudeとの連携
これらの基礎知識がなくても、Claudeに聞けば教えてもらえます。
「ターミナルって何？」
「npm installでエラーが出た。見て」
「ターミナルのこの表示はどういう意味？」わからないことがあれば、遠慮なくClaudeに聞いてください。 エラーメッセージやスクリーンショットを見せると、より的確な回答が得られます。
次のステップ
環境構築の基礎を押さえたら、次は開発の基礎知識を確認しましょう。