JavaScriptを使って、APIからJSONを取得して、整形＆リストアップして表示してみたいと思います。
フロントエンドは、静的ページに埋め込んだプレーンなJavaScriptになります。
バックエンドには、カンタンにAPI公開できる拙作のWebサービス「パケットベース」を利用しました。
組織間でデータを送受信でき、受け取ったデータをノーコードでAPI公開できるサービスです。
自分あてにデータを送れば、自分用にAPIサーバーを立ち上げることもできます。
フロントエンド
今回、簡単にプレーンなJavaScriptでコードを書いてみます。
ReactもVueも使わないというのは久しぶりで、ある意味新鮮です。
設計
設計としては、
- ベースとなるHTMLにエレメントを用意しておく
- テンプレートとなるHTMLを用意する
- APIからJSONを取得する
- テンプレートにJSONの内容を当てはめてHTMLを作ってページに入れる
- リストアイテムをクリックすると詳細を表示する
という感じになります。
コード
コードはこんな感じになりました。
1.ベースとなるHTMLにエレメントを用意しておく
bodyタグにonloadとしてinit()関数を入れておき、ページのコンテンツをすべて読み込み終わってからリストを表示するようにします。
また、リスト表示用のエレメントと詳細表示用のエレメントを用意し、詳細表示の方は display: none; にしておきます。
2.テンプレートとなるHTMLを用意する
リストの親要素とリストアイテム、詳細表示用のエレメントを用意します。
HTMLを変数に入れていて、プレースホルダーには波括弧を使っています。
3.APIからJSONを取得する
1.で呼び出すようにした init() 関数を用意します。
APIにアクセスしてJSONを取得する部分は、ビルトインのfetchを使っています。
「パケットベース」で公開しているAPIエンドポイントに、POSTでパラメーターを渡してアクセスすると、JSONを取得することができます。
4.テンプレートにJSONの内容を当てはめてHTMLを作ってページに入れる
3.で作った init() 関数の後ろに追加しておきます。
テンプレートHTML中のプレースホルダーを、取得したJSONの値で置換し、1.で用意したエレメントに入れます。
5.リストアイテムをクリックすると詳細を表示する
リストアイテムをクリックして詳細表示ダイアログを表示したり閉じたりする処理を追加します。
詳細表示用のエレメントに生成したHTMLを入れて display プロパティを変更して表示させます。
ここでは親となるエレメントを画面全面に表示して画面をマスクし、詳細表示ダイアログを前面に出すようにしています。
また、親エレメントのどこかをクリックするとダイアログを閉じるようにしています。
バックエンド
今回、バックエンドは「パケットベース」で用意しました。
「パケットベース」の簡単な使い方は以前ご紹介していますのでこちらをご覧ください。
「パケットベース」では、自分あてにデータを送ってバスケットに入れておくことでAPI公開できるようになっているので、データを作成します。
データを作成したら、公開APIを作成してデータを取得できるようにします。
完成
スタイルとかいろいろ整えると、こんな感じになります。
さいごに
制限はありますが基本無料で使えるので、よかったら使ってみてくださいね！
