May

7
【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発
JavaScriptだけでここまでは出来る！Ajaxでのデータ取得を極める3時間

Hashtag ：#xhack勉強会

Registration info	フォロー&リツイートで無料参加 Free FCFS 22/22 有料参加￥2000 (Pre-pay) FCFS 2/3
About Prepayment	About Prepayment Contact Info: (Only shown to attendees.)
	Cancel/Refund Policy: キャンセルは2日前までに事前連絡必須
	Print receipt data: 発行する (詳しくはこちら)

Description

参加条件

下記のアカウントをフォロー

松田信介をフォローする

サンプルコード

<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>X-HACK WebAPI 勉強会</title>
</head>

<body>
  <!-- ボタン -->
  <a class="button" onclick="addCardItem()">追加</a>
  <!-- リスト -->
  <div id="main-block"></div>

  <script>
    // 親要素を取得
    const mainBlock = document.getElementById("main-block");

    // JSONの代わりにデータをオブジェクトで定義
    let data = [
      {
        image: "*.jpg",
        description: "猫の画像1です"
      },
      {
        image: "*.jpg",
        description: "猫の画像2です"
      },
      {
        image: "*.jpg",
        description: "猫の画像3です"
      }
    ]

    // DOMを動的に生成している
    function addCardItem() {
      // for(let i=0; i<3; 1++){
      // }
      data.forEach((obj) => {
        let img_node = document.createElement("img");
        img_node.src = obj.image;
        let text_node = document.createElement("p");
        text_node.innerText = obj.description;
        mainBlock.appendChild(img_node);
        mainBlock.appendChild(text_node);
      })
    }
  </script>
</body>

</html>

通信でデータを取得する

<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>X-HACK WebAPI 勉強会</title>
</head>

<body>
  <!-- ボタン -->
  <a class="button" onclick="addCardItem()">追加</a>
  <!-- リスト -->
  <div id="main-block"></div>

  <script>
    // 親要素を取得
    const BASE_URL = "https://api.gnavi.co.jp/RestSearchAPI/v3/"
    const API_KEY = "60e919407001d7a00adc7f4a8764a2d9" // ご自身で取得したAPI_KEY
    const SEARCH_TEXT = "焼肉" // "寿司" "天麩羅"
    let url = `${BASE_URL}?keyid=${API_KEY}&freeword=${SEARCH_TEXT}`

    // JSONの代わりにデータをオブジェクトで定義
    const oReq = new XMLHttpRequest();
    oReq.addEventListener("load", addCardItem);
    oReq.open("GET", url);
    oReq.send();

    // DOMを動的に生成している
    function addCardItem() {
      console.log(this.responseText)
    }
  </script>
</body>

</html>

ツイートする

イベントをツイートする

作るもの

YouTube動画

当日の資料

この講座を受講するために必要な知識は以下の通りです

必須知識がない場合は5時間程度の予習をして受講してください

JavaScriptの基本的な文法 (if/for/変数/配列操作/関数/JavaScriptオブジェクトの理解)
HTML/CSSの基本構文

知っておくべき知識

クラス属性、id属性の特徴の違い
JavaScriptの関数をボタンにクリックイベントをセットして発火させる方法
JavaScriptオブジェクトについて

JavaScript オブジェクトの基本

var obj = {}
obj.name = "松田";

var Person = function (name, age) {
  this.name = name;
  this.age = age;
}

var matsuda = new Person("松田", 34);
console.log(matsuda.name);
console.log(matsuda.age);