JSONをHTML/CSSで表現する

突然JSONをHTML/CSSでいい感じに表現したくなったのでやってみた。

github

https://github.com/mashijp/jsonhtml

次の２ファイル

• https://github.com/mashijp/jsonhtml/blob/0.1.0/sample.html
• https://github.com/mashijp/jsonhtml/blob/0.1.0/sass/screen.scss

例

<div class="json">
    <div class="js-value js-object">
      <div class="element">
        <div class="js-key">key1</div>
        <div class="js-value js-string">value1</div>
      </div>
      <div class="element">
        <div class="js-key">key2</div>
        <div class="js-value js-object">
          <div class="element">
            <div class="js-key">key3</div>
            <div class="js-value js-number">12345</div>
          </div>
          <div class="element">
            <div class="js-key">key4</div>
            <div class="js-value js-array">
              <div class="element">
                <div class="js-value js-string">A</div>
              </div>
              <div class="element">
                <div class="js-value js-string">B</div>
              </div>
              <div class="element">
                <div class="js-value js-number">3</div>
              </div>
              <div class="element">
                <div class="js-value js-object">
                  <div class="element">
                    <div class="js-key">fuga</div>
                    <div class="js-value js-number">12345</div>
                  </div>
                  <div class="element">
                    <div class="js-key">hoge</div>
                    <div class="js-value js-number">12345</div>
                  </div>
                </div>
              </div>
              <div class="element">
                <div class="js-value js-string">4</div>
              </div>
            </div>
          </div>
          <div class="element">
            <div class="js-key">key6</div>
            <div class="js-value js-string">めっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFG</div>
          </div>
        </div>
      </div>
    </div>
  </div>

表示結果

解説

箇条書きで簡潔に

• 1つの要素は<div class="element">で表現している
• キーは<div class="js-key">, 値は<div class="js-value 型の名前">で表現。型の名前は以下の通り
  • js-string ... 文字列型
  • js-number ... 数値型
  • js-boolean ... 真偽型
  • js-array ... 配列
  • js-object ... オブジェクト
  • js-nullを忘れてた…(あとでやる)

ここがすごいの

CSSのafter, before要素を使ってるので「"」や「,」「{」「[」をつけなくてもいい

誰が得するの？

...

感想

作ったあとに気づいたけど[や{等をCSSで表示するようにしてるのでコピペしたときに[や{がつかない！！！！！！！！CSSのcontentってコピペできないのか…。
↓コピペ結果例

key1 value1 
key2 
key3 12345 
key4 
A 
B 
3 
fuga 12345 
hoge 12345
 
4
 
key6 めっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFGめっちゃ長い文字列ABCDEFG

まじで糞なものを作ってしまった感…