解説
「YAML」は、プログラムで扱うデータを、テキストで表現した形式の1つです。
データ記述言語としてJSONとよく比較されますが、JSONよりも人間が読みやすい形式をしています。
YAMLは、スペースのインデントを使ったり、JSONのような{}や[]を使ってデータ構造を表現できます。またYAMLでは、同じ形式のデータを表現する方法が複数あります。
コメントは#の右側に書きます。
サンプル
「YAML」のサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「YAML」のサンプル</title>
<style> #output { font-size: 32px; line-height: 1.5; white-space: pre-wrap; } </style>
</head>
<body>
<pre id="output"></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
<script>
window.addEventListener('DOMContentLoaded', e => {
// 出力用の関数
const print = function() {
const el = document.querySelector('#output');
el.textContent += [...arguments].map(x => `${x}`).join(', ') + '\n';
};
// YAML
const yaml = `
pet:
- type: cat # 種類
name: タマ # 名前
age: 5 # 年齢
children: # 子供の名前
- ミカン
- スイカ
- リンゴ
`;
print('YAML');
print(yaml);
print('JSONへの変換\n');
const json = jsyaml.load(yaml);
print(JSON.stringify(json, null, ' '));
});
</script>
</body>
</html>
出力結果
YAML
pet:
- type: cat # 種類
name: タマ # 名前
age: 5 # 年齢
children: # 子供の名前
- ミカン
- スイカ
- リンゴ
JSONへの変換
{
"pet": [
{
"type": "cat",
"name": "タマ",
"age": 5,
"children": [
"ミカン",
"スイカ",
"リンゴ"
]
}
]
}
フィードバックお待ちしております！
ご感想、解説してほしい用語、解説内容のアドバイスなどございましたら、FacebookやX（旧Twitter）などでお気軽に編集部までお寄せください。よろしくお願いいたします。
