年末まで毎日webサイトを作り続ける大学生 〜6日目 ajax & Youtube APIを触ってみる〜

はじめに

初めまして。
年末まで毎日webサイトを作っている者です。
今日はajaxとYoutube APIを触ってみました。
結論をいうとほんとうに触りだけです。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は6日目。(2019/10/24)
よろしくお願いします。

サイトURL

やったこと

ボタンを押せば・・・

youtubeの日本人気動画の情報を取得できます。
が、この配列のようなもの↓を展開できず意味のない文字の羅列に・・・
（連想配列・多次元配列・hashやら理解できていない）

こだわったところ

ajaxとapiという巨頭に果敢に挑みました。
が、彼らはとても強大でこだわるにも前提知識が不足しすぎておりこだわりきれませんでした。

 <script>
        test7 = document.querySelector("#test5");
        test8 = document.querySelector("#test6");
        test7.onclick = function () {
            var x = new XMLHttpRequest();
            x.onreadystatechange = function () {
                if (x.readyState == 4) {
                    var test = x.responseText;
                    test2 = JSON.parse(test);
                    Object.keys(test2).forEach(key => test8.innerHTML = ('key:' + key + ' value:' + test2[key]));
                }
            }
            x.open('GET', 'https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&regionCode=jp&key=[キー]');
            x.send();
        }
    </script>

onreadystatechangeメソッドはリソースの入手状況が変化したときに自動で動いてくれる優れものです。
いつ動くかは

if (x.readyState == 4)

で指定しています。4はリソースの取得が完了したという意味です。

感想

今日はてんで歯が立ちませんでした。
githubでソースを公開しているので、apiキーにhttpリファラーの制限をかけたらエラーになったり、せっかくデータを取得してきても表示させたい部分の表示方法がわからなかったり。
ただ、ajaxとAPIを扱えるようになればできることの幅がぐんと広がることは分かりました。
年末になる頃には必ずこの2大巨頭を倒してみせます！
今日はアレ、物語の序盤で強敵にコテンパンにされるみたいな日。最終回では見事にリベンジを果たすというフラグを立てただけ。というわけでへこたれずに頑張ります。

参考

• 簡単なAjaxを書いて使ってみよう (http://html2php.starrypages.net/javascript/ajax)
• YouTube APIの仕組みとブラウザだけでデータ取得する方法 | DIYプログラミング (https://diy-programming.site/tools/movie-matome-site-3/)

上記2つのサイトはとても参考になりました。ありがとうございます。