作者:上村崇 フリーランスのIT系エンジニア
twitter:@uemera facebook:uemura

13日の金曜日にjson拡張子を詳しく解説する初心者向け勉強会をやりました。


2018/7/13(金)、そう13日の金曜日に、“.json”の拡張子について学ぶ勉強会をやりました。略してjsonnight.
[大阪]ジェイソンナイト(.json拡張子について理解を深めるIT系勉強会) さくらクラブ

勉強会でやった内容

・json拡張子とは? 知らない人向けの解説
・jsonと親和性が高いJavaScriptについて
・jsonはどこで使う? Ajaxでの利用シーン
・jsonと同じような目的で使われるxmlファイルの紹介
などです。
この内容をこのブログでも詳しく説明していきます。

jsonの基礎知識

jsonファイルって中身はこんなふうになってます。
意味がわからなくてコワイですね!
jsonは一言で言うと「データ保存のためのフォーマットの1つの形式」です。
jsonを理解する前に、みんなが知ってるcsvについて考えてみましょう。
csvはコンマ区切りのテキストであり、表に変換できますよね。
ただし、逆に言うと表にしか変換できません。
しかし、jsonでは表だけでなくツリー構造を表現することができます
CSV、json、XMLのそれぞれのフォーマットの特徴と比較です。
jsonは構造化データを取り扱うことが出来ます。
簡単なjsonを書いてみましょう。
1対のkey-value値を表現する場合、こうなります。
keyは一般的に半角英字を使用します。
valueは日本語もOK。数字だけの場合は”(ダブルクォーテーション)は要りません。
JSON構文をチェックしたり整形してくれたりするWebサービスがあるので使えば便利です。

JSON Pretty Linter – JSONの整形と構文チェック
https://lab.syncer.jp/Tool/JSON-Viewer/
次に、2対のkey-value値を表現する場合を考えてみます。
要素が続く場合は必ず , (コンマ)が必要です。
そして、最後の要素にはコンマをつけてはダメなのです。

なぜjsonを使うのか?

CSVがExcelと親和性が高いのと同様、jsonはJavaScriptと親和性が高いです
PHPなどの言語とも親和性が高いのでjsonはプログラム言語と相性が良いです。
プログラム中でデータを読み込んだり、書き出したりする場合はjson形式がお手軽です。

どれくらいお手軽かを体験するために、サンプルコードで実験してみます。
以下のリンクからサンプルコードをダウンロードしてください。
https://toyao.net/wp/wp-content/uploads/2020/01/sample_html.zip

sample1.htmlはこのようになっています。
JSONをjavascriptで処理するコードです。
例えばChromeブラウザで「要素を検証」でコンソールを出すと、jsonがオブジェクト変換された構造化データを確認することが出来ます。

Ajaxについて詳しく解説

jsonはAjaxを使うときに本領を発揮します。
例として、
Ajaxではない、通常のページ遷移の場合です。
htmlファイルは、HTMLの構文に沿った形にする必要があります。(htmlファイルだから当然ですが)
リンククリックすると新しいページ(htmlファイル)にアクセスすることになります。
通常のページ遷移の場合は、このように毎回新しいページ(htmlファイル)を取ってくる動き(ページ遷移)になります。
一方、googleマップを見てみましょう。これはページを遷移してませんよね。
地図をスクロールしたり拡大すると、同じページで続きの新しい地図を見ることが出来ます。ページ遷移していません。
最初に表示したページAのままページ遷移しないのがAjaxという仕組みです。
Ajax通信はページ遷移しないので、HTMLページを取ってくる必要がなく、すなわちHTMLの構文でなくても良くなります。 プログラム間でやりとりするのに都合の良いデータ形式が使えるのです。
ここでjsonが使えるというわけです。
jsonは転送効率が良いです。
同じデータを送受信する場合、HTMLよりJSONの方が転送データ量が小さいので効率が良いのです。
sample2.htmlでAjax通信を体験してみましょう。
サーバーから取ってくるデータはこのようになります。 URLはこれ >https://toyao.net/work/2018jsonnight/sample2.php
シーケンス図で書くとこのようになります。
Ajax通信を行うhtmlです。
$.ajaxという関数がajax通信を行う関数になります。

jsonをもっと詳しく理解する

jsonは階層構造にできます。
jsonは配列も表現できます。

参考になるサイト:
学問的に仕様を網羅しています。
JSON (JSONの文法解説)

json応用:オープンデータの利用

JSON形式で提供されているオープンデータを使ってみましょう。
例えば以下のサイトにあります。
Link and Publish your data|Open data sharing & Download
LinkData
ここでは、HeartRails Expressというサイトから都道府県データを取ってくる例を紹介します。
API | HeartRails Express | 路線/駅名/最寄駅データサービス
都道府県情報取得API
JSON(P)形式
をとってきます。
sample3.htmlではこのオープンデータを使って、都道府県データを取得するAjax処理を行います。
JSON.parseは必要ありません。
クロスドメイン(HTMLページを提供しているサイトとは別のドメイン上のサイト)のデータを取ってくることになるので、jsonpという形式で呼び出さなければなりません。
これは文字列形式ではなく関数呼び出しの形になるので、はじめからオブジェクト化されており、データ取得後にわざわざJSON.parseする必要はありません。

あわせて学習しよう:XMLとは

XMLで有名なのはsitemap.xmlですね。WebサイトのページURLが全部書かれたやつ。
google検索エンジンに
「このサイトにはこんなページがあるよ」て教えるやつ。
JSONとXMLの表現の違い
XMLの方がやや文字列長は長くなります。

このように、XMLは以下のような特徴があります。
・JSONと同様に、データを構造化できる
・JSONより歴史が古い
・JSONよりデータサイズは大きくなりがち。

それぞれの利用シーン
どちらがよく使われているか、どちらを利用すべきか。
状況に応じて使い分けましょう。

説明は以上となります。

この勉強会をYouTubeLiveでライブ動画配信もしました。アーカイブとして残せましたので、こちらから視聴できます。
(画質とか音質は悪いですが)

スライドはこちら
json拡張子について理解を深める https://www.slideshare.net/uemera/jsonit

勉強会中に使ったサンプルコード(zipファイル)はこちらからダウンロードできます。
sample_html.zip

37175265_1761901643858205_1429101770189045760_n

勉強会をやってみての感想

こんなネタ勉強会、受講する人いるの?と当初は思っていましたが、申込み予約時点では18人の定員を超えてキャンセル待ちが出るほどの状況でした。 需要はありそうなので、またどこかで開催要望があればやろうかなと思います。

また今回、自分史上初めてライブ配信をやりました。ツールも検討の結果YouTubeLiveがいちばんふさわしいと思って、事前に撮影の方法とかセッティングとか済ませて本番に備えたのですが、実際会場で試してみると、
・YouTubeLiveを開始するとiPhoneアプリが途中で異常終了する
・iPhoneの横画面で配信したいのになぜか画面が回転せず縦でしか配信できない
という状況に陥ったため焦りました。

本番の数十分でいろいろ試しましたが、縦配信しかできない件は解消されず、結局以下の環境で配信しました。
・アプリが異常終了するiPhone7plusで配信するのをあきらめて、自分がメインで使っているiPhoneXのYouTubeアプリで配信することにした
(これによりアプリ異常終了はまぬがれた)
・Wifi環境が不安定なのかなと思ったので、WifiではなくLTE回線を使って配信しました。
(2時間の配信で、通信データ量が2GBくらいになりましたが)

ま、とりあえずこれで見れたようで良かったです。「配信するよ」て自分から予告しといて、トラブルで配信できないのは自分としてはなんとしても避けたかったので…
配信技術を安定させるのって、やっぱり場数や経験を踏まないとダメなんでしょうかね。そして代替デバイスや手段を何通りか持ってないと危険だということも学習しました。

音声は、適当なマイクを事前に購入しようと探していたのですが見つからなかったので、いつも使っているイヤホンマイクで代用しました。
こんなふうにクリップで胸につけて。
なんとか聞ける音質にはなっていたようです。
Untitled

胸ではなく、耳につけてハンズフリー通話のようにしても良かったのですが、それだと片耳がふさがれてしまい受講者の声が聞きにくくなる恐れがあると思いました。

関連記事


AdobeのCreative Cloudを解約したのにしつこくポップアップが出てくるので始末した
AdobeのCreative Cloudを解約したののに、「お使いのアドビソフトウェアが正規品でないことをご存知でしたか?」 ていうポップアップが出るようになりました。ウザいので削除しました。環境はMacです。AdobeGCClientを削除しました。

Postfixメールサーバー:送信不可のユーザーを設定する
メールサーバーPostfixにて、送受信ができないユーザーを設定をする方法です。Linux、debian環境です。特定のメールアドレスを送受信不可にします。メールを許可しないLinuxユーザーを作るときに有効です。

民間プログラミングスクールは怪しいので、初心者にとってベストな学習方法を代わりに紹介する
プログラマ初心者がキャリアを積むために、どんな方法があるか? を調べていたら、いろいろ闇が深かったので、僕なりに 「こうやればプログラマとして効率良くキャリアが積めるのではないかな?」 という方法をリサーチしてみました。 …

Web開発・Web制作のツールや用語を初心者向けに大量紹介。これだけ知っておけば安心。
Webページ製作やWebのシステム開発ではいろんなツールやテクニック、用語を使いますが、全体像がなかなか掴みにくいと思ったので、初心者向けに用語をたくさんまとめました。これさえ押さえておけば業界の常識用語はだいたい網羅できると思います。

KVM仮想マシンをWebからアクセスできるKimchiをdebianにインストール
自宅サーバーにてKVMの仮想マシンを動かしていますが、外からでもリモートで操作できるようにkimchiを導入しました。 GitHub – kimchi-project/kimchi: An HTML5 man …

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です