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のように定義することで、ハッシュ型(オブジェクト型)を定義することができます。
YamlJSON
greeting: hello
name: world
{
    greeting: "hello", 
    name: "world"
}

配列

-を使うことで、配列を定義することができます。
YamlJSON
- aaa
- bbb
- ccc
[ "aaa", "bbb", "ccc" ]

ハッシュ構造のネスト

ハッシュの中にハッシュを定義することができます。
YamlJSON
user:
    name: Yohei
    age: 30
{
    user: {
        name: "Yohei", 
        age: 30
    }
}

配列構造のネスト

配列の中に配列も定義することができます。
YamlJSON
-
    - aaa
    - bbb
    - ccc
[ [ "aaa", "bbb", "ccc" ] ]

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

ハッシュと配列を組み合わせると、グググと実践的な使い方になります。
YamlJSON
# 例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
    }]
}

コメント

コメントを書くことができ、コメントは最終的な出力に影響を与えません。
YamlJSON
# This is a comment.
name: Yohei
{
    name: "Yohei"
}

スカラーのデータ型

色々なデータ型が存在します。下記の例は一部で、詳細はこちらをご確認ください。
YamlJSON
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では複数行の文字列を表現することができます。
YamlJSON
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の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。