【恵比寿駅東口】JavaScriptと無料APIを駆使してウェブアプリ開発ハンズオン R1.8.19勉強会参加レポート ＃xhack勉強会
初めまして。あさやんと申します。
生まれ育ちも勤務先も愛知県。アラサー未経験でありながら年内に東京でのエンジニア職への転職を目指し2ヶ月前より学習を進めております。
今回初めて株式会社X-HACKさんが開催されている勉強会に参加させて頂きましたので備忘録を兼ねてレポートをまとめさせて頂きました。
●勉強会当日のリンクはこちら
◯勉強会のゴール
（１）WebAPIの概要がわかる
（２）WebAPIの使い方、利用方法、作り方がわかる
（３）データフォーマットについて理解する(JSON、XML、CSV)
そしてこのようなサイトを作れるようになることです。
よく目にするこのような飲食店のwebサイト。
本当にゼロから作成したらとてつもなく時間がかかりそう・・
これをWebAIPを利用すれば作成できてしまうとのこと。（すごい・・！）では、早速１つずつ学んだことを順を追って整理していきたいと思います。
◯APIとは
・Application Programming Interface（アプリケーション・プログラミング・インターフェース）の略称
・共有されているソフトウェアの機能を利用する仕組み
・要求と応答を事前に取り決めておくもの
◯WebAPIとは
・ Web上公開されているAPIのこと。
・公的機関や企業が開発したものもあれば、 サーバーが用意できれば比較的簡単に自作できるので、自社開発し提供することも可能。
●開発サイド
・とある機能に特化したプログラムのベースを作ったので共有。
・サービスには有償・無償のものがあり収益また利用者増加等を目的としているもの。
・公的機関や企業が開発したものもあれば、 サーバーが用意できれば比較的簡単に自作できるので、自社開発し提供することも可能。
⇩⇧
●利用者サイド
・利用者からゼロベースからプログラムを構築したら大変なのでサービスを使えば効率良く開発ができる。
と双方にメリットがある仕組みのこと。
なるほど、このような仕組みがあったとは。
しかも今回のぐるなびAPIもそうだけど、無償で利用できるものも豊富にあり非常に便利。
使ってみたいのはやまやまですが、まずはじめに簡単な基礎知識を。
◯APIの要求(リクエスト)はURLベース
●URLの構成（GET方式）
https://www.example.com?〇〇〇=■■■■&〇〇〇〇=■■■■■■
ホスト名.ドメイン名?クエリ文字列
・"パラメータ(key)"="値(value)" ＆・・・
・＆で複数つなことができる
・ここまでを理解した上で、ぐるなびAPI（ぐるなびWebService）をみていきます！
●ぐるなびAPIとは
・ぐるなびの飲食店情報を利用して新たなコンテンツを作成できるサービ
スです。
・たとえば、ブログで取り上げた飲食店の詳細情報を本サービスを利用し
て表示することができます。
⇨ここで新規アカウントを作成すれば自分の"アクセスkey"が発行できます。
作成したkeyを元にしたAPIテストツール
・テストツールにラーメン・かき氷と値を入れてみると
https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=”自分のkey”&freeword=ラーメン&freeword=かき氷
このようにURLが生成されます。
そしてそれをブラウザで検索するとしてみると・・
のようにJSONの形式でレスポンスされます。
◯WebAPIの応答(レスポンス)は JSON / XML / CSV など様々な形式がある
ではそれぞれの特徴をおさえていきます。
●CSVとは
・Comma-Separated Valuesの略
・カンマ' , 'で区切る
・直感的にデータの中身を把握しやすいことが特徴。
Title1,Title2,Title3
one,two,three
example1,example2,example3シンプルで分かりやすいです。
●XMLとは
・Extensible Markup Languageの略。
・HTML
のタグよってデータを囲む
、更にデータを入れて入れ子構造にすることが可能。CSVよりも様々なデータを記述することができることが特徴。
＊Ajax（Asynchronous JavaScript XML)では非同期で、JavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが可能。
（GoogleMap等のサービスもAjaxで作られている。）
<?xml version="1.0" encoding="UTF-8"?>
- <note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>パッと見では見慣れた感じ。でも確かに複雑な形式で記述ができそう。
●JSONとは
・JavaScript Object Notation の略。
・ とてもよく使われるデータフォーマット。
・{} ・"key": "value" をコロンで区切る・カンマ`,`で区切る。
・配列`[]`と `{}` オブジェクトが使える。
・JSONで"などの記号を使いたいときは\"のようにバックスラッシュを前置する。
・構文エラーに厳しいので、構文チェックに"Syncer"が使える。
{
"name": "asayan",
"age": 31,
"pets": [
{
"name": "ぽち",
"age": 24,
"favorite_foods": [
"fish",
"meat"
]
},
{
"name": "たま",
"age": 30,
"favorite_foods": [
"fish",
"milk"
]
}
}
]
}
//"たま"の"fish"を呼び出すには object.pets[1].favorite_foods[0] とするルールは色々あるけど書き方はある意味シンプルで直感的な感じです。
◯DOM・Node・Elementについての理解
勉強会のブログのリンクを貼ってあります。とても分かりやすい。
（この辺りの理解も重要なので、また見返そう。。）
◯練習問題(少し問題形式変えています）
【コーヒー】ボタンを押した時に・・
それぞれ画像が３つと、商品名・価格が表示されるようにするには？
（ボタンを押すごとに繰り返し処理される。）
【コード例】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>コーヒー一覧</title>
</head>
<body>
//タグにonclickイベントを記入。クリック後に発動してほしい関数を指定
<a class="button" onclick="cafeMenu()">
<input type="button" value="コーヒー" />
</a>
//ここに画像や文字列が入るように下で定義する
<div id="menu-list"></div>
<script>
//親要素（id="menu-list"）を変数に
const menuList = document.getElementById("menu-list");
console.log(menuList);
// オブジェクトで定義する（コードに書くときはkey側に""は不要）
var product = {
list: [
{
img: "img/menu1.jpg",
drink: "cappuccino",
price: "$5"
},
{
img: "img/menu2.jpg",
drink: "milkcoffee",
price: "$4"
},
{
img: "img/menu3.jpg",
drink: "cream",
price: "$7"
}
]
};
//onclickで指定した関数処理
//for文にて0から画像・文字列を取得していき、関数addCardItemに入れている
function cafeMenu() {
for (var i = 0; i < product.list.length; i++) {
addCardItem(product.list[i]);
}
}
//複数回処理のため関数に（引数list）を入れる
//divタグを生成する関数を変数に入れる
//その変数を動的に書き換える。for文が終わるまで親ノードの子ノードリストの末尾にノードを追加。
function addCardItem(list) {
var node = document.createElement("div");
node.innerHTML = `<img src="${list.img}" alt=""><p>${list.drink}</br>
${list.price}</p>`;
menuList.appendChild(node);
}
</script>
</body>
</html>復習を兼ねて調べながらコードを書いてみて、最後に答え合わせしながら、一部修正したのですが、動作するまで結構時間かかりました・・
（説明文違ったらごめんなさい。）
◯実践：ぐるなびAPIを使う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>X-HACK 動画検索</title>
</head>
<body>
<!-- 検索フォーム -->
<div class="row">
<div class="small-6 large-4 columns">
<a class="button" onclick="loadUrl()">検索</a>
</div>
</div>
<!-- リスト -->
<div id="main-block" class="row small-up-1 medium-up-2 large-up-3"></div>
<script>
// 本来はサーバー側で処理してユーザーからは見えないようにする
const API_KEY = "apikey";
const mainBlock = document.getElementById("main-block");
function loadUrl() {
// URLの生成 本来はサーバー側で処理すべき(apikeyがユーザーに見えてしまうので)
// 課題：検索ワードを受け取れるようにしてみよう
let _url = `https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=${API_KEY}&freeword=焼肉`;
// Ajax(XMLHttpRequest)処理
// APIを実行して結果のJSONデータを加工している
let xhttp = new XMLHttpRequest();
// 通信が終わった時の処理
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let data = JSON.parse(xhttp.responseText);
for (var i = 0; i < data.rest.length; i++) {
let node = document.createElement("div");
node.innerHTML += data.rest[i].name;
mainBlock.appendChild(node);
let img = document.createElement("img");
img.src = data.rest[i].image_url.shop_image1;
mainBlock.appendChild(img);
let link = document.createElement("a");
link.href = data.rest[i].url;
link.innerHTML = "詳細";
mainBlock.appendChild(link);
}
}
};
// データ取得開始
xhttp.open("GET", _url, true);
xhttp.send();
}
</script>
</body>
</html>
let xhttp = new XMLHttpRequest();new XMLHttpRequest();
＊JSONでなく非同期通信であるAjax形式とするためのメソッド。
いくつか新しいものも出てきたので、適宜MDNで確認。
・後は上記の練習問題と概ね同じ。for文で回してappendChildで追加していく。
そして、検索ボタンで一覧表示されました！
復習してみてある程度理解が進んだのでnoteとしてはここまでとします。s
まだまだ先はあるので、引き続き、ゴールに向けて改めて学習を進めます。
そして他のWebAPIを利用し簡単なサービスを作って行ければと思います。
◯その他備忘録
＜デベロッパーツールの使い方＞
❶consoleで検索を行う方法
＊ここではdocument(Node)がDOMツリーの頂点にあることを検索。
❷souecesを使ったデバッグの方法
＊breakpoint（青のタグ）を複数指定可能。時系列的に処理を確認できる。
❸MDNでの検索
非公式ながら大半の情報が詰まっている。
とにかくこれをみる。
❹文字の囲い方
1)'シングルクォテーションで囲った内側は"ダブルクォテーション"とする'
2)"ダブルクォテーションで囲った内側は'シングルクォテーション'とする"
3) `文字列内に${変数}を入れるときはバッククォートで囲う`
(3)のルールはというか書き方自体初見でした。覚えておこう。
以上で今回の学習内容まとめを終わらせて頂きたいと思います。
【感想】
・内容としては最初はついて行けていましたが、比較的サクサクと進んでいく（それでも４時間半）ので、途中からエラーが出たりすると自分の手の遅さでついて行けないこともありました。
・ただ、しっかりと学習履歴を残して頂けるので、自宅でまとめながら冷静に復習すれば、その場で出来なくても理解が進むと思います。
・今回の学習内容の全ては現時点では身に付いてはおりませんので、学んだことを落とし込むために引き続き学習は進めたいと思います。
・他、勉強会に参加したことで、現場のリアルなコーティングのスピード感や知識レベルの高さを知ることが出来たこと。
・また、解散後には他の方達との懇親会を含め、松田さんから直接、様々な相談や転職に関わる情報を頂けたこと。
・加え、同じ勉強会に参加されていた方と知り合うことができたこと。
などなど踏まえれば、愛知県からの参加ではありましたが、本当に参加して本当に良かったと感じられた勉強会でした。
今後も活動を進める中で、できる限り参加をしたいと思います。
この記事が気に入ったらサポートをしてみませんか？