microCMSとJavascriptを利用して簡単なサイトを作る

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので
ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。

microcms.io

APIスキーマ

今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。

• フィールドID：textField
• 表示名：内容
• 種類：テキストエリア

ちなみに「テキストエリア」にはHTMLタグを含めることができる。

JSONデータをブラウザで表示させる

スクリプト

本当に基礎がわかっておらず、めちゃめちゃ苦労したのだった

window.addEventListener('DOMContentLoaded', function(){
getJsonData();
});

function getJsonData(){
       fetch(
           "https://〜〜〜.microcms.io/api/v1/content?limit=50",
           {
             headers: {
               "X-API-KEY": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX"
             }
           })
         .then(function(data){
          return data.json();
         })
         .then(function(myjson){
         for (const i in myjson.contents) {
            const h = '<div class="block">' + myjson.contents[i].textField + "</div>";
            var element = document.getElementById("wrap");
            element.insertAdjacentHTML("beforeend", h);
           }
        });
}

微妙にjQueryを使っており、正直いらないが、面倒なのでこのままです。ひどい
jQueryのappend()だった部分をinsertAdjacentHTML()に変えたので、無事jQueryいらなくなった

cpoint-lab.co.jp

何がそんなに大変だったのか

JSONデータを見てみると入れ子構造になっており、
その中からピンポイントでtextFieldの値を取り出すのに苦労した。
配列とかJSの基本をわかってないからこうなるんだけど、
わからないものはわからない。今も正直よくわかってない…
やっぱり苦手だな

参考
techacademy.jp