バイブコーディングで出会うファイル形式、どう見分けるか

なぜコードより先に拡張子で詰まるのか

バイブコーディングを学ぶ人が、コードより先に詰まる場所があります。ファイルの拡張子です。.json、.yaml、.env、.md といった見慣れない拡張子が押し寄せた瞬間、「やっぱり自分は開発者じゃないから」と手を離してしまいます。ところがこの数十の形式は、たった三つに分かれます。

データを入れる器、画面に見せるもの、設定と秘密。この三つの枝さえ手にすれば、初めて見る拡張子でも、だいたいどの箱に属するか感覚がつかめます。下の表がその地図です。

形式	正式名称	分類	一言定義
CSV	Comma-Separated Values(カンマ区切りの値)	データ	書式をすべて外した表計算
JSON	JavaScript Object Notation(JavaScriptオブジェクト表記法)	データ	名札を付けた箱(アプリとAIの共通語)
XML	eXtensible Markup Language(拡張可能なマークアップ言語)	データ	タグで包んだ旧式のデータ
HTML	HyperText Markup Language(ハイパーテキスト・マークアップ言語)	画面	ウェブページの骨組み
Markdown (.md)	略語ではない · markupをもじった名前	画面	記号いくつかで書式を付けた文章
YAML	YAML Ain't Markup Language(自分自身を指す再帰的頭字語)	設定	インデントで整理した設定
.env	environment(環境変数)	秘密	APIキー・パスワードを入れる金庫
TXT	text(ただのテキスト)	その他	何のルールもない素の文字

データを入れる形式:CSV・JSON・XML

CSVは、色も書式もすべて外し、カンマで列を分けた純粋な表です。最初の行が列名、次の行からがデータです。ショップの注文履歴やアンケート結果をダウンロードすると大抵CSVで、そのままAIに渡して分析させるのに向いています。

JSONは、今日プログラム同士がデータをやり取りする事実上の標準です。各値に名札が付き、箱の中に箱を入れる入れ子ができます。AI APIの応答、アプリの設定、データベースの結果がほぼすべてJSONなので、バイブコーディングをすると最もよく出会います。

XMLは、同じデータを開き閉じのタグで包んだ旧来のやり方です。官公庁や銀行の古いシステムで今も使われ、面白いことにExcelファイル(.xlsx)を開いてみると中はXMLになっています。新しく作るときは、たいてい軽いJSONを選びます。

三つの形式を同じ注文ひとつで横に並べると、見た目の違いが一目で分かります。

orders.csv

order_id,name,price,qty,status
1001,Americano,4500,2,paid
1002,Cafe Latte,5000,1,paid
1003,Cold Brew,5500,3,pending
1004,Espresso,4000,1,cancelled

response.json

{
  "customer": { "id": "sh", "name": "SH Consulting", "vip": true },
  "orders": [
    { "item": "Americano", "price": 4500, "qty": 2 },
    { "item": "Cold Brew", "price": 5500, "qty": 3 }
  ],
  "total": 25500,
  "paid": true
}

order.xml

<order id="1001" status="paid">
  <customer>SH Consulting</customer>
  <items>
    <item qty="2">
      <name>Americano</name>
      <price>4500</price>
    </item>
    <item qty="3">
      <name>Cold Brew</name>
      <price>5500</price>
    </item>
  </items>
  <total>25500</total>
</order>

見せる形式:HTML・Markdown

HTMLは、ブラウザが画面を描く設計図です。タグが「これは何か」を指定します——<h1>は見出し、<p>は段落、<button>はボタン。バイブコーディングで作ったウェブサイトやメールマガジンはすべてHTMLで、骨組み(HTML)・装飾(CSS)・動き(JavaScript)が一組で動きます。

Markdown(.md)は、#や-のような簡単な記号で書式を表す文章です。学ぶのに五分あれば足り、記号が付いたままでも読め、レンダーすればきれいな文書になります。GitHubのREADME、AIチャットボットの回答、Notionのメモの多くがMarkdownです。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SH Consulting</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>We help teams adopt AI.</p>
    <ul>
      <li>Corporate training</li>
      <li>Vibe coding</li>
    </ul>
    <button>Contact us</button>
  </body>
</html>

README.md

# Project Title

A short intro paragraph goes here.

## Install

- npm install
- npm run dev

## Features

- First feature
- Second feature
- Third feature

> A blockquote looks like this.

**Bold**, *italic*, and a [link](https://sh.consulting).

設定と秘密:YAML・.env

YAMLは、JSONと同じデータを括弧の代わりにインデントで整理した形式です。人が読みやすいので、デプロイ設定やアプリの環境設定によく使われます。ただし空白ひとつ間違えると丸ごと壊れるので、インデントには注意が必要です。

.envは、APIキーやパスワードといった機密の値を、コードと分けて入れておくファイルです。AIサービスをつなぐとき、キーを入れる場所がまさにここです。鉄則がひとつあります。.envは絶対に公開リポジトリに上げてはいけません。鍵を丸ごと他人に渡す事故になるからです。だから普通は.gitignoreで除外しておきます。

config.yaml

app:
  name: my-app
  port: 3000
  debug: false

database:
  host: localhost
  port: 5432
  name: shdb

features:
  - login
  - search
  - export

users:
  - name: sh
    role: admin
  - name: guest
    role: viewer

.env

# Server
PORT=3000
NODE_ENV=production

# AI / external API keys
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxx
AZURE_OPENAI_ENDPOINT=https://example.openai.azure.com

# Database
DATABASE_URL=postgres://user:pass@localhost:5432/shdb

拡張子を見ただけで感覚をつかむ方法

核心の感覚はシンプルです。CSV・JSON・XML・YAMLはデータ、つまり中身です。HTML・Markdownは見せる文章と画面です。.envは秘密です。拡張子を見ただけで「これはデータだ、画面だ、設定だ」と感覚がつかめれば、それで十分です。

AX(AI転換)の観点で、この感覚は思う以上に重要です。非開発者がAIで何かを作るとき、本当の障壁はコードの文法ではなく、見慣れないファイルへの漠然とした恐れであることが多いのです。拡張子を三つに分ける地図を手にした瞬間、見慣れないファイルはもう怖くなくなります。バイブコーディングは、まさにそこから本当に始まります。