お知らせ 9月24日(木)10:00から2時間ほど、サーバーのメンテナンス作業を予定しております。作業の間はconnpassのご利用が出来ません。ご迷惑をおかけしますが何卒ご了承ください。

新機能 イベントメッセージの予約機能を追加しました。イベント主催者様は、参加者へのメッセージ送信を事前に予約できます。詳しくはこちらをご確認ください。

新機能 イベント詳細画面に「参加者への情報」欄を追加しました。イベント管理者、発表者、参加者(抽選中や補欠は除く)だけに表示されるフィールドです。詳しくはこちら

このエントリーをはてなブックマークに追加

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);

予習 (必須!!2時間程度)

WebAPIを活用したサービス開発ハンズオン

  • webAPIとは?の解説
  • JSON データフォーマット
  • webAPIの活用方法
  • curlコマンドでAPIを実行してみる
  • 実際にwebAPIを使ってみる
  • Ajaxで取得してみる
  • APIのレスポンスを利用してHTMLを動的に生成する
  • webAPIを使って実際にサービスを作ってみる
  • chromeデバッガの使い方

成果物イメージ

持ち物

ノートPC (必要な人はアダプターも一緒に)

アンケート

アンケートにご協力をお願いいたします

SNS

Media View all Media

If you add event media, up to 3 items will be shown here.

Feed

matsuda shinsuke

matsuda shinsuke wrote a comment.

2020/05/07 20:00

パスワードは justdoit です

matsuda shinsuke

matsuda shinsuke wrote a comment.

2020/05/07 19:57

メールで送りました!

れおん

れおん wrote a comment.

2020/05/07 19:53

僕もZOOMのURLがわかりません…

はるにく

はるにく wrote a comment.

2020/05/07 19:48

zoomの招待メールが届いていないのでアイパス教えてください!

matsuda shinsuke

matsuda shinsuke published 【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発.

05/04/2020 17:48

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 を公開しました!

Group

X-HACK東京

プログラミングの楽しさを知ってもらい、世の中のエンジニア人口を増やすために日々奮闘中!

Number of events 326

Members 2151

Ended

2020/05/07(Thu)

20:00
22:30

Registration Period
2020/05/04(Mon) 17:48 〜
2020/05/07(Thu) 22:30

Location

オンライン

オンライン

Attendees(24)

さとる

さとる

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 に参加を申し込みました!

eryry2020

eryry2020

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 に参加を申し込みました!

butter67

butter67

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発に参加を申し込みました!

DaijiroEndo

DaijiroEndo

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 に参加を申し込みました!

koucha

koucha

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 に参加を申し込みました!

_kurimarron

_kurimarron

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 に参加を申し込みました!

s5708100

s5708100

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発に参加を申し込みました!

kazu___

kazu___

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発に参加を申し込みました!

tsuyunaruhito

tsuyunaruhito

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発に参加を申し込みました!

tomsan96

tomsan96

【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発に参加を申し込みました!

Attendees (24)

Canceled (1)