2017/02/01更新

[フロントエンド] Yamlというデータ構造に入門する

こんにちは、@yoheiMuneです。
JS界隈だとJSONフォーマットが主流ですが、最近はyamlというフォーマットも使うようになりました。今日はYamlについてブログを書きたいと思います。

Yamlとは

Yamlとはデータ構造の一つで、JSONやXMLと同じくデータを構造で表現します。例えば以下のような感じです。

# ユーザー定義だよー
user:
    name: Yohei
    favorites:
        - Ramen
        - Tennis

上記のようにYamlではデータ構造をインデントで表現し、また-などの記号を用いて表現します。JSONやXMLに比べて記号が少なく人間にも読みやすいというのがポイントです。またJSONとの違いとして「コメントが書ける」というのも大きなポイントかなと思います。
また、Yamlは古くからある定義のようで、最近だとDockerやCircleCIやpm2など色々と使われているので目にすることも多いかも。

以下ではYamlの構造についてと、JavaScriptでの利用方法について書きたいと思います。

JavascriptでYamlを扱う

現状は残念ながら、Javascriptの言語ベースではYaml構造はサポートされていません。なので外部モジュールを使う必要があります。ここでは一番有名なjs-yamlというモジュールを使いたいと思います。

Node.jsで利用する場合

npmでインストールして利用することができます。

# npmでモジュールをインストール.
$ npm init
$ npm install -save js-yaml

// sample.js
let yaml = require("js-yaml");
let data1 = yaml.load(`
    greeting: hello
    name: world
`);
console.log(data1); // => { greeting: "hello,", name: "world" }

フロントエンドで用いる場合

cdnで利用することができます。

<!--sample.html-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.7.0/js-yaml.min.js"></script>
<script>
let data1 = jsyaml.load(`
    greeting: hello
    name: world
`);
console.log(data1); // => { greeting: "hello", name: "world" }
</script>

と、こんな感じで利用することができます。それぞれの環境で利用できて便利です。

それではYamlの構造について見てみたいと思います。

Yamlのデータ構造

ここではYamlのデータ構造を見てみたいと思います。Yamlには「スカラ型(文字や数値など単独の値)」「ハッシュ型（key-valueのデータ構造」「配列型」の主に3種類のデータがあり、それらを使って色々なデータ構造を定義することができます。

ハッシュ

key: valueのように定義することで、ハッシュ型（オブジェクト型）を定義することができます。

Yaml		JSON
greeting: hello name: world	→	{ greeting: "hello", name: "world" }

配列

-を使うことで、配列を定義することができます。

Yaml		JSON
- aaa - bbb - ccc	→	[ "aaa", "bbb", "ccc" ]

ハッシュ構造のネスト

ハッシュの中にハッシュを定義することができます。

Yaml		JSON
user: name: Yohei age: 30	→	{ user: { name: "Yohei", age: 30 } }

配列構造のネスト

配列の中に配列も定義することができます。

Yaml		JSON
- - aaa - bbb - ccc	→	[ [ "aaa", "bbb", "ccc" ] ]

ハッシュと配列の組み合わせ

ハッシュと配列を組み合わせると、グググと実践的な使い方になります。

Yaml		JSON
# 例1（最初に示した例） user: name: Yohei favorites: - Ramen - Tennis	→	{ user: { name: "Yohei", favorites: [ "Ramen", "Tennis" ] } }
# 例2 members: - name: Shimizu age: 20 - name: Kento age: 25	→	{ members: [{ name: "Shimizu", age: 20 }, { name: "Kento", age: 25 }] }

Yaml

JSON

# 例1（最初に示した例）
user:
    name: Yohei
    favorites:
        - Ramen
        - Tennis

→

{
    user: {
        name: "Yohei",
        favorites: [ "Ramen", "Tennis" ]
    }
}

# 例2
members:
    - name: Shimizu
      age: 20
    - name: Kento
      age: 25

→

{
    members: [{
        name: "Shimizu", 
        age: 20
    }, {
        name: "Kento", 
        age: 25
    }]
}

コメントを書くことができ、コメントは最終的な出力に影響を与えません。

Yaml		JSON
# This is a comment. name: Yohei	→	{ name: "Yohei" }

スカラーのデータ型

色々なデータ型が存在します。下記の例は一部で、詳細はこちらをご確認ください。

Yaml		JSON
name: "Kobashi" # 文字列 age: 31 # 数値 is-male: true # Bool値 weight: 60.0001 # float値 type : "123" # ダブルクォートを使うと文字列 country: null # null birthday: 1985-03-03 # Date型	→	{ name: "Kobashi", age: 31, "is-male": true, weight: 60.0001, type: "123", country: null, birthday: 1985-03-03T00:00:00.000Z }

Yaml

JSON

name: "Kobashi"        # 文字列
age: 31                # 数値
is-male: true          # Bool値
weight: 60.0001        # float値
type : "123"           # ダブルクォートを使うと文字列
country: null          # null
birthday: 1985-03-03   # Date型

→

{
    name: "Kobashi",
    age: 31,
    "is-male": true,
    weight: 60.0001,
    type: "123",
    country: null,
    birthday: 1985-03-03T00:00:00.000Z
}

複数行の文字列

Yamlでは複数行の文字列を表現することができます。

Yaml		JSON
comment: \| aaa bbb ccc	→	{ comment: "aaa\nbbb\nccc\n" }

最後に改行を含めないなどその他の複数行の指定もあります。詳しくはこちらをご参照ください。

参考資料

Yamlを学ぶのに以下の記事を利用しました、ありがとうございます。

yaml.org

nodeca/js-yaml@github.com

Yamlのオンラインエディタ

Rubyist Magazine - プログラマーのための YAML 入門 (初級編)

最後に

色々なデータフォーマットがありますね。ちょっとずつでも学べたらと思います。

最後になりますが本ブログでは、フロントエンド・インフラ・Go言語・Node.js・Python・Linux・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！