前回の続き——ストレージの中身へ
前回のB-03では、メモリが一時領域、ストレージが永続領域だという性質の違いを見ました。では、そのストレージの中身は、どのように整理されているのでしょうか。写真も文書もコードも、すべては決まった仕組みの上に並んでいます。バイブコーディングでは、どのファイルがどこにあるかが分からないと、AIへの指示も確認もできません。今回はその土台を作ります。
このスライドのポイント
- B-03: メモリは一時領域、ストレージは永続領域という性質の違いを確認した
- 今回の問い: そのストレージの中身は、どう整理されているのか
- 「どのファイルがどこにあるか」は開発のすべての基本
4つの言葉の定義
まず言葉を定義します。ファイルとは、データのひとまとまりです。フォルダは、ファイルを入れる入れ物で、開発ではディレクトリとも呼び、入れ子にできます。ファイルシステムは、ストレージ上でファイルとフォルダを管理する仕組みです。そして拡張子は、ファイル名の末尾に付く「.○○」で、中身の種類を表すラベルです。.txt、.html、.js、.csv、.png などがあります。
このスライドのポイント
- ファイル＝データのひとまとまり
- フォルダ（開発ではディレクトリ）＝ファイルを入れる入れ物。入れ子にできる
- ファイルシステム＝ストレージ上でファイルとフォルダを管理する仕組み
- 拡張子＝ファイル名末尾の「.○○」で、中身の種類を表すラベル（.txt／.html／.js／.csv／.png 等）
なぜ必要か
これを知らないと、何が起きるでしょうか。AIが「プロジェクトのフォルダ構成」を提案してきても、その意味が読めません。「このファイルをどこに置くか」を、自分の言葉で指示できません。さらに、拡張子をうっかり消したり書き換えたりして、ファイルが開けなくなる事故も起こります。整理の仕組みを知ることは、AIと同じ地図を共有することなのです。
このスライドのポイント
- AIが提案する「フォルダ構成」の意味が読めない
- 「このファイルをどこに置くか」を指示できない
- 拡張子を消す・書き換えてファイルが開けなくなる事故
階層構造——木のかたち
ストレージの中は、木のような階層構造で整理されています。いちばん上にプロジェクトのフォルダがあり、その中に別のフォルダやファイルが入り、さらにその中にも入っていきます。開発のプロジェクトは、必ずこの木構造で管理されます。フォルダをたどっていけば、目的のファイルに必ず行き着きます。図では、上から下へ枝分かれしていく形をイメージしてください。
このスライドのポイント
- ストレージの中は木のような階層構造
- 上にプロジェクトのフォルダ、その中にフォルダやファイル、さらにその中にも入る
- 開発プロジェクトは必ずこの木構造で管理される
Webアプリのプロジェクトフォルダの典型
具体例として、Webアプリのプロジェクトフォルダの典型を見てみましょう。いちばん上にプロジェクトのフォルダがあり、その中にコードを入れる src、画像などを入れる public、そして各種の設定ファイルが並びます。AIが生成するコードは、この構造のどこかに置かれます。どのフォルダに何が入るかの見当がつくと、AIの出力が「どこに何を作ったか」を読み解けるようになります。
このスライドのポイント
- 最上位にプロジェクトのフォルダ
- src＝コード、public＝画像等、加えて設定ファイル群
- AIが生成するコードはこの構造の「どこか」に置かれる
技術サンプル——フォルダツリーを読む
これは、フォルダ構成をテキストで表した図です。いちばん上の project の中に、src と public という2つのフォルダ、そして data.csv というファイルがあります。src の中には app.js、public の中には logo.png が入っています。読み方のポイントは2つです。1つは、末尾の拡張子で中身の種類が分かること。もう1つは、同じ名前でも置かれたフォルダが違えば別のファイルだということです。
混同しやすい——拡張子とファイルの実体
混同しやすいのが、拡張子とファイルの実体の関係です。拡張子は、あくまで中身の種類を示すラベルにすぎません。ですから、拡張子を書き換えても、ファイルの中身そのものが変わるわけではありません。ラベルを貼り替えただけで、かえってファイルが開けなくなることがあります。名前の末尾と、中身は別物だと覚えておきましょう。
このスライドのポイント
- 拡張子＝中身の種類を示すラベルにすぎない
- 拡張子を書き換えても中身そのものは変わらない
- ラベルの貼り替えだけで、かえって開けなくなることがある
バイブコーディングでの確認点
バイブコーディングでの確認点です。AIに「ファイルを作って」と頼むときは、置き場所となるフォルダ、ファイル名、そして拡張子まで具体的に指定しましょう。曖昧なまま頼むと、思わぬ場所に作られます。生成が終わったら、A-04で学んだ差分確認のとおり、「どこに何を作りましたか」と必ず確認します。AIへの質問例は、「作成したファイルの場所と名前を、すべて一覧で教えてください」です。
このスライドのポイント
- 「ファイルを作って」と頼むときは、フォルダ・ファイル名・拡張子まで指定する
- 生成後は「どこに何を作りましたか」を確認（A-04の差分確認）
- 質問例: 「作成したファイルの場所と名前を、すべて一覧で教えてください」
一問一答とまとめ
最後に一問一答です。「.csv という拡張子は、何を表しているでしょうか」。……答えは、中身の種類を示すラベルで、この場合は表形式のデータです。30秒でまとめます。ストレージの中身は、ファイルとフォルダによる階層構造で整理され、その仕組みがファイルシステムです。拡張子は中身の種類のラベルで、書き換えても実体は変わりません。次回のB-05では、このファイルの「場所」を正確に指し示す書き方、パスへ進みます。関連資料は「AI Builder受講前準備キット」「Git・GitHub 完全入門」です。
このスライドのポイント
- 一問一答: 「.csv という拡張子は何を表す？」
- 30秒まとめ: ファイルとフォルダの階層構造／それを管理するのがファイルシステム／拡張子は中身の種類のラベル
- 次回: B-05 パス（ファイルの「場所」の書き方）へ
- 関連資料: 「AI Builder受講前準備キット」「Git・GitHub 完全入門」
