5月
7
【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発
JavaScriptだけでここまでは出来る！Ajaxでのデータ取得を極める3時間
ハッシュタグ
：#xhack勉強会
イベントの説明
参加条件
下記のアカウントをフォロー
サンプルコード
<!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時間程度)
- HTML苦手な人 -> https://dotinstall.com/lessons/basic_html_v5
- CSS 苦手な人 -> https://dotinstall.com/lessons/basic_css_v5
- JavaScript苦手な人 -> https://dotinstall.com/lessons/basic_javascript_v4
WebAPIを活用したサービス開発ハンズオン
- webAPIとは？の解説
- JSON データフォーマット
- webAPIの活用方法
- curlコマンドでAPIを実行してみる
- 実際にwebAPIを使ってみる
- Ajaxで取得してみる
- APIのレスポンスを利用してHTMLを動的に生成する
- webAPIを使って実際にサービスを作ってみる
- chromeデバッガの使い方
成果物イメージ
持ち物
ノートPC (必要な人はアダプターも一緒に)
アンケート
アンケートにご協力をお願いいたします
SNS
- 主催者Twitter: 松田信介
資料 資料をもっと見る／編集する
資料が投稿されると、最新の3件が表示されます。
フィード
2020/05/07 20:00
パスワードは justdoit です
2020/05/07 19:57
メールで送りました！
2020/05/07 19:53
僕もZOOMのURLがわかりません…
2020/05/07 19:48
zoomの招待メールが届いていないのでアイパス教えてください！
2020/05/04 17:48
【zoom講義】JavaScriptと無料APIを駆使してウェブアプリ開発 を公開しました！
matsuda shinsuke
Momoko Toyota
エンジニアをつなぐ
connpass は株式会社ビープラウドが開発・運営しています