開発の土台
セクション 21 / 40
コードエディタ（VS Code）
コードを“見て・直す”ための専用ノート
コードエディタは、コード（プログラムの文字）を見たり直したりするための専用の道具です。高機能なメモ帳のようなもので、いちばんの定番が無料のVS Code（ブイエス・コード）。Claude Codeが書いたファイルの中身を、ここで見られます。
AIと“ふつうのメモ帳”の違い
中身を書くのはAIに任せられます。エディタは、その結果を“見える化”して、必要なところだけ人が直す場所。だから「読めればOK」くらいの気持ちで大丈夫です。
なぜ専用エディタ？（メモ帳じゃダメ？）
- 色分け（ハイライト）でコードが格段に読みやすい。
- 打ち間違いやエラーになりそうな所を、その場で指摘してくれる。
- ファイルとフォルダを一覧で扱える（左側に“地図”が出る）。
- ターミナルもエディタの中で開ける（Claude Codeもここから動かせる）。
作るものは“1つのフォルダ”にまとまっている
1つのアプリ＝1つのフォルダ（プロジェクト）に、たくさんのファイルが入った状態です。VS Codeでそのフォルダを開くと、全体を見渡せます。ファイル名のおしり（拡張子）で種類が分かります。
.html- ページの骨組み。
.css- 見た目（色・配置）。
.js/.ts- 動き・処理。
- フォルダ
- ファイルをテーマごとに整理する“箱”。
全部は触らなくてOK
最初は「どこに何があるか」をなんとなく掴めれば十分。いきなり自分でいじるより、「このファイルのここをこう直して」とAIに頼むのが近道です。
理解度チェック
すべて正解すると、次のセクションが開きます（はい・いいえ）。
Q1.コードエディタ（VS Codeなど）は、コードを見やすく表示したり編集したりするための専用の道具である。
Q2.ふつう、1つのアプリのファイルは1つのフォルダ（プロジェクト）にまとまっている。
Q3.エディタを使うには、表示されるコードを最初から最後まで自分で手打ちできる必要がある。
すべての問いに「はい・いいえ」で答えると押せます