yps並走備忘録 Task7 Web-APIとAjax通信を利用したアプリケーションの作成（１ページアプリ）①

というわけで2020/10/20日現在数名の方が沼にハマっていると思われるTask 7ですが、足跡を残すことで少しでも助けになればと思い、本記事にやったことなどをまとめていきます。

下準備：MySQLのデータを引っ張ってくる

まずはTask 3 : SQL：テーブル作成（復習）の手順と下記のQiita記事を参考にMySQL公式サイトからサンプルデータを引っ張ってきます。

参考：【SQL】MySQL公式サンプルデータベースを使う

+-----------------+
| Tables_in_world |
+-----------------+
| city            |
| country         |
| countrylanguage |
+-----------------+

アプリ構築＆jsライブラリ導入

上記テーブルが作成されたらTask6同様、アプリケーションを構築してDBと連携させましょう。

アプリケーションが構築できたらいよいよ今回の目玉のjsライブラリを下記記事を参考に導入しましょう

参考: 今すぐ導入可能！JavaScriptで3Dの地球上にデータを可視化できる「Gio.js」を使ってみた！

本タスクに関してはおススメはCDNを使うか、jsファイルをwget等でDLしてpublicに配置した上で読み込むこと。
（自分はnpm使って読み込んだのですが、この方法だとjsを記述して挙動を変更した際などに反映を確認するのにいちいちLaravel Mixを使わないといけなくなってしまい、結構面倒でした）

jsファイルをBlade内のヘッダーで読み込んだら一先ず地球儀を表示してみましょう

<div id="globalArea" style="width:800px;height:420px"></div>

全画面にする場合はスタイルの指定をwidth:100vw; height:100vh;にすればおｋ

次に、JavaScript側からこの「divタグ」を取得して3Dの地球を生成します。
こちらもbladeに直書きが一番手っ取り早い

const container = document.getElementById( "globalArea" );
const controller = new GIO.Controller( container );

controller.init();

これで一先ず地球儀が表示されるはず。簡単ですね。

レーザービーム発射！

次はこの地球儀にデータを突っ込んでレーザービームを出してあげましょう。
three.jsとgio.jsを読み込んだ次の行で次のスクリプトを読み込んであげます。

<script src="https://raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js"></script>

そのあとにcontroller.init()関数の前後に下記を記述するだけです。

controller.addData(data);

こんな感じの表示になりました。

ここまでは比較的簡単ですね。

公式ドキュメントは英語ですがザックリ説明すると輸出国(e)と輸入国(i)の２桁のISO国コードと値(v)をまとめたjsonデータをcontroller.addData()関数で渡してやるとビームが出るそうです。

なので最大問題はどうやってそんな『いい感じのデータ』を探すかなんですが、いい感じのデータを提供してくれるAPIを探すというのがこのタスク最大の沼なので、一先ずそっちは置いておいて、まずはMySQLのデータをAjax通信で取得するのを先にやっちゃうのがおススメです。

Ajax通信によるデータの取得

Ajaxはザックリ言うと『画面変遷を行わずにデータを取得し処理を実行するための技術』です。
これに関しては補足説明が出ていますので、下記の一連のツイートと参考サイトを見ながらやってみましょう。
（なお、本タスクではjQueryを使用してAjax通信を行います）

参考：
yps task7:補足説明
yps task7:補講
Ajaxの説明とJQueryによる簡易実装

とりあえずオレオレデータを使ってMySQL⇒Laravelのエンドポイント⇒Ajaxで取得までできればタスクの半分はクリアです。

最大の敵はWEB-API！

本タスクで最も大きなハマりポイントはここですね。

1. 日本語のドキュメントのあるAPIで世界規模のデータを扱っているものが少ない
2. 英語のドキュメントはそもそも難易度がVERY HARD

というところで、非常に難航している方が多そうです。

日本語のドキュメントがあるAPIとしてはypsの委員長ことmiyupakaさんが使っているRESAS-APIやe-statの中から日本対海外の貿易関係のデータを利用するのが比較的難易度が低いかと思います。

いずれにしても今回の課題の最大の難関、WEB-APIに関しては

1. APIのドキュメントを読んだ上で
2. クエリパラメーターを把握し
3. 返ってくるデータ構造を把握し
4. 返ってきたデータをいい感じに成形（ごにょごにょ）して
5. 最終的にフロントのcontroller.addData()関数にいい感じのjsonに変換して渡す

という一連の操作を行うプログラムを組めるかどうかのテストだという認識です。

具体的にどんな風に進めたのかはまた別記事にまとめたいと思います。
（一先ずここまで…）

以上