8.

HTML / CSS / JSON / XML / YAML / TOML / .env など Web・設定形式総覧

編集
この記事の要点
  • Web / データ交換 / アプリ設定の 3 用途を担うテキストフォーマット
  • マークアップ: HTML / CSS / SVG。データ: JSON / XML / YAML / TOML。設定: .ini / .env / .conf
  • JSON はコメント不可・末尾カンマ不可で機械可読特化。YAML は人間可読特化(インデント命)
  • TOML はモダン設定の主役(Rust の Cargo.toml、Python の pyproject.toml
  • .env はシークレット保管所。必ず .gitignore に追加すること

このカテゴリについて

Web・データ・設定系は、すべて人間が読み書きできるテキスト形式で、用途は次の 3 つに大別されます。

  • マークアップ(構造化文書): HTML / CSS / SVG / XML — ブラウザやレンダラが解釈
  • データ交換: JSON / XML / YAML / TOML — システム間でデータを受け渡し
  • アプリ設定: .ini / .env / .conf / .properties — アプリの動作を制御

これらは git で差分が見やすく、テキストエディタで編集できるので、Infrastructure as Code(IaC)や GitOps といった現代の運用スタイルと相性が抜群です。一方で、ヒューマンエラーで構文が崩れると即座に落ちるため、CI で jq / yq / tomlq による検証を組み込むのが定石です。

Web・データ・設定で扱う主な拡張子

拡張子概要
.html / .htmHyperText Markup Language。Web ページ本体
.cssCascading Style Sheets。装飾とレイアウト
.scss / .sassSCSS / SASS。CSS プリプロセッサ
.lessCSS プリプロセッサ(Bootstrap で使用)
.svgScalable Vector Graphics。XML ベースのベクタ画像
.jsonJavaScript Object Notation。データ交換の事実標準
.xmleXtensible Markup Language。歴史長く厳格
.yaml / .ymlYAML。Kubernetes / Ansible / GitHub Actions で主流
.tomlTom's Obvious Minimal Language。Cargo.toml / pyproject.toml
.iniINI ファイル。古典的設定形式
.conf汎用設定ファイル。nginx.conf / httpd.conf
.env環境変数定義。シークレットも含むので .gitignore 必須
.propertiesJava の設定形式。key=value
.htaccessApache ディレクトリ別設定

用途別の使い分け

目的推奨形式理由
API レスポンスJSONブラウザがネイティブパース、軽量
機械間のデータ交換(厳格)XMLスキーマ・名前空間・XSLT
人が書く設定(複雑)YAMLコメント可、ネスト読みやすい
人が書く設定(モダン)TOMLYAML より曖昧性少なくシンプル
環境変数・シークレット.env各言語の dotenv ライブラリ対応
Apache のディレクトリ設定.htaccessApache のみ、再起動不要
シンプルな key=value 設定.ini / .properties古いソフトで採用多

関連カテゴリ・記事

編集
Post Share
子ページ
  1. HTML(.html / .htm)
  2. CSS(.css)
  3. JSON(.json)
  4. XML(.xml)
  5. YAML(.yaml / .yml)
  6. TOML(.toml)
  7. env(.env)
  8. INI(.ini)
  9. properties(.properties)
  10. conf(.conf)
同階層のページ
  1. ファイル拡張子とは
  2. テキスト・ドキュメント形式
  3. 画像形式
  4. 音声・動画形式
  5. アーカイブ・圧縮形式
  6. 実行ファイル・パッケージ
  7. プログラミング・スクリプト
  8. Web・データ・設定
  9. データベース・データ交換
  10. フォント
  11. システム・仮想化

最近更新/作成されたページ