和祈microCMSでは入稿したコンテンツをAPI経由でJSON形式で受け取ることができます。これを画面に表示する方法は色々とありますが、今回はブラウザから直接Ajaxでデータを取得してきて表示するパターンに限って考えてみます。綺麗に実装する方法はReactやVueといったフレームワークを用いて、サイト全体をシングルページアプリケーション(SPA)として構築する方法です。コーポレートページやサービスのランディングページなどにおいて、SPAの導入は中々オーバースペックです。そこで今回は、JavaScriptのテンプレートエンジンを用いてデータを描画する方法を解説します。テンプレートエンジンとは簡単に言うと、データをビューに流し込んで表示できる仕組みです。ような変数を埋め込むことができますよね。クライアントサイドにおいては、ビューと言えばHTMLそのものです。それを書けるようにするのがJavaScriptのテンプレートエンジンたちなのです。今回使用するライブラリjQueryhandlebarsテンプレートエンジンはたくさん種類があるので、好きなものを使ってもらってOKです。(ただしそれぞれ記法は異なるので、以降のサンプルとはズレが生じます)さっそくデータ表示をしてみましょう。データを取得し、テンプレートエンジンに流し込んで表示させます。順を追って説明します。APIの準備をするmicroCMSを使ってAPIを用意します。microCMSのはじめ方という記事を参考にしてください。ライブラリを読み込むjQueryとhandlebarsをCDNから読み込みます。データ表示用のテンプレートを用意する今回は試しにお知らせの表示をしてみましょう。handlebarsでは次のようにテンプレートを定義することができます。</script>HTML内に定義できるので、classも指定可能です。テンプレート内で繰り返し記法や条件分岐も記述できるので、配列を展開したり、条件によっては表示させるなど柔軟な設計ができます。)を表示させる実装になります。AjaxでAPIからデータを取得し、テンプレートに流し込む今回は次のようなスキーマ設計のシンプルなAPIを利用します。それでは実際にデータを取得し、表示してみましょう。});Ajax通信後は、先ほどのscriptタグで記述したテンプレートを取得し、handlebarsにコンパイルさせます。それに対して、渡したいデータをオブジェクト形式で引数に与えてあげると、テンプレートにデータが埋め込まれたHTMLが取得できます。あとはそれらを特定の箇所に描画してあげるだけです。下記のように表示されれば完成です。コード一式はGistに置いておきます。この1ファイルをブラウザで表示するだけで動くはずなので試してみてください。https://gist.github.com/shibe97/9ee81ea45349800a216530badaa01e19まとめテンプレートエンジンを用いて、APIから取得してきたデータを表示することができました。データをJavaScriptでゴリゴリ文字列連結して表示することもできますが、テンプレートエンジンを用いた方がスマートに記述することができます。Componentsを使う方法もあるので、それはまたの機会に。