【勉強会】JavaScriptと無料APIを駆使してウェブアプリ開発ハンズオン

スポンサーリンク

勉強会に行ってきました

どうも、みつやんです。

勉強会に行ってきました。

JavaScriptと無料APIを駆使してウェブアプリ開発ハンズオン

勉強会的なイベントには何度か行ったことあるものの、数年前とかの話なのでかなり久しぶりに参加。こちらの勉強会は初めての参加です。この記事はせっかく勉強会に参加したので復習も兼ねてアウトプットした自分用のメモです。

目的

個人的な参加目的

転職をしてJavaScriptの実装がメインになってくるため、知識補強のために参加。

今日のゴール

今日の勉強会のゴール。

  • WebAPIの概要がわかる
  • WebAPIの使い方、利用方法、作り方がわかる
  • データフォーマットについて理解する(JSON、XML、CSV)

(勉強会の資料から引用)

APIとは?

  • アプリケーション プログラミング インターフェース
  • 別のソフトウェアの機能を利用する仕組み
  • 要求と応答を事前に取り決めておく

(勉強会の資料から引用)

難しいことは自分で作らないで(作れないので)、誰かが作ったのものを使わせてもらおうぜ!」といった感じですかね。

ちなみに『WebAPI』というくらいだから、「他の『○○API』はあるのか?」ということが気になって少し調べてみたけど、ほとんどWebAPIのことを略してAPIと言っているので、あまり気にする必要はなさそう。厳密には色々あるんだろうけど、今のところ関係なさそうなので割愛。

WebAPIとは?

クライアント(PC/スマホ)からサーバー(インターネットに接続されたコンピュータ)へデータを要求し、サーバーからクライアントへデータを返す
(勉強会の資料から引用)

勉強会の説明の中であった「ピザのデリバリー」の例えがシンプルでわかりやすかった。この場合は、ピザがWebAPIが返す「情報」ですね。

ピザ屋で例えてみると…

  • 自分(クライアント)
    →ピザ食べたいけど、自分で作るにはピザ窯とか設備がない。
  • 電話注文(リクエスト)
    →自分の食べたいピザをピザ屋に注文する。
  • ピザ屋(サーバ)
    →注文を受けて、ピザを作る。
  • 配達(レスポンス)
    →ピザを配達する。
  • 自分(クライアント)
    →ピザを受け取る。タバスコをかけて食べる。(自分の好みに加工)

実際のWebAPIだと…(勉強会で利用したぐるなびのAPIのイメージ)

  • クライアント
    →「東京」の「焼肉」のお店を表示したいけど、情報を持っていない。
  • リクエスト
    →「東京」の「焼肉」のお店の情報をリクエスト。
  • サーバ(WebAPI)
    →サーバが持っている「東京」の「焼肉」のお店の情報を集める。
  • レスポンス
    →「東京」の「焼肉」のお店の情報を返す。
  • クライアント
    →「東京」の「焼肉」のお店の情報を受け取って自分のページに表示する。
    (情報の加工はクライアント次第)

ここで「」が付いているものは、情報を取得するための条件となりリクエストのURLに指定されます。ピザ屋でいうならば、チーズの種類とか、トッピングとか、ピザ(情報)を作る側で使用する条件といったところかな?

勉強会ではぐるなびのAPIを利用しましたが、GoogleやTwitterとか様々なAPIがあるので色々できそうです。地図、天気、SNSとか、自分が持っていない情報を活用して何かを作る際には、「(やりたいこと) webapi」とかで調べると良さそうです。

データフォーマットについて

そんな便利なWebAPIのレスポンス時に意識する話として、データフォーマットがあります。WebAPIの応答(レスポンス)は JSON、XML、CSV、MessagePackなど様々な形式があるとのことですが、今回の勉強会ではJSONに焦点をあてています。

JSON

今回の勉強会で扱うデータフォーマット。”key”と”value”の組み合わせからなる形式。

基本形

  • key:name
  • value:Tanaka

配列も扱える

  • key:hobby
  • value:配列(”プログラミング”,”映画鑑賞”,”旅行”)

オブジェクトも扱える

  • key:pet
  • value:”ポチ”という”5才”の”肉”と”ドッグフード”が好きなペット
さらに、オブジェクトを配列にするとかの説明もありましたが、キリがないので省略。

ちなみに今回の勉強会で扱うぐるなびのAPIから返ってきたJSONの一部はこんな感じ(未整形)これを基にJavaScriptで色々やります。

ここまでが今回の勉強会における実装の前提になります。

JavaScriptでAPIを取得して使ってみる

ここから実装。基本のソースコードは用意されているので、それをGitHubから取得してからのスタートしました。

DOM

今回の勉強会で『DOM』という言葉が出てきました。ドキュメントオブジェクトモデル で『DOM』です。

Document Object Model (DOM) は、— ウェブページを表す HTML のように — 文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するものです。ふつうは JavaScript を使用しますが、 HTML、 SVG、 XML などの文書をオブジェクトとしてモデリングすることは JavaScript 言語の一部ではありません。

MDN web docsから引用)

ドキュメントをオブジェクトとして扱うということで、ソースコードはこんな感じです。

DOMの取得

  • 「document」は、画面全体を指す(画像1枚目)
  • 「document」の”main-block”とID指定された箇所を取得(画像2枚目)

DOMの動的生成

  • “img”要素を作成
  • “img”要素に表示する画像を設定
  • 「document」の”main-block”内に”img”要素を追加(画像)

なお、DOMの動的生成をしている関数「function addCardItem() 」は、下記のようにボタンクリック時に処理するように設定しています。

“onclick”を”onmouseover”に変えれば、マウスが該当箇所に乗った瞬間にイベントが処理するようになります。その他のイベントであったり、関数の作り方であったりの説明もありましたが、今回のメインではないため省略します。

JavaScriptでAPIを取得して表示する

ここまでがだいぶ長くなってしまいましたが、今日の本題のAPIの取得と表示です。

リクエスト処理

下記のコードでWebAPIへリクエストを送信しています。ざっくりというと…

  • function loadUrl()を定義
  • URLを定義(”keyid”、”freeword”、”address”はWebAPIにリクエストする条件)
  • XMLHttpRequest()でリクエストに関する情報を生成
    • “GET”:GETとかPOSTとかのHTTP リクエストメソッド
    • _url:リクエスト先のURL
    • false:同期か非同期かの制御(falseの場合は同期)
  • send() メソッドでリクエストをサーバに送信

レスポンスと画面表示

loadUrl()メソッドのリクエストの続きになります。ざっくりというと…

  • JSON.parse() でJSON形式のレスポンスをオブジェクトとして扱えるように変換
  • 変換したWebAPIからのレスポンスは「json.rest[0].name」のようにして値を取得可能
    • “json”の”rest”(レストラン情報)の配列の”name”(店舗名称)のように取得。
    • “rest”や”name”はWebAPIに依存する情報のため利用するWebAPIの仕様による
  • WebAPIの情報を変数に格納してDOM操作で画面に表示

Ajax

上記のリクエスト処理で同期か非同期かの制御を設定している箇所がありますが、ここが俗に言うAjaxというやつです。「Asynchronous JavaScript + XML」の略で「Ajax」。

(参考)「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

スポンサーリンク

同期処理と非同期処理の違いはこんな感じ。

  • 同期処理
    • クライアントがサーバにリクエストしたらレスポンスで画面全体を書き換える
    • リクエストとレスポンスの間でユーザは画面操作ができない
      (昨今は通信速度も速いのでそこまでのストレスはないが)
  • 非同期処理
    • クライアントがサーバにリクエストしたらレスポンスで画面全体を書き換えるのではなく該当箇所のみに対して処理(画面全体に対しても可能)
    • リクエストとレスポンスの間でもユーザは画面操作が可能

ここもWebAPIみたいにピザ屋での解説がありました。

  • 同期処理
    ピザを電話で注文したら、その電話を繋いだまま待機していなければならない
    注文者は他のことができない
  • 非同期処理
    ピザを電話で注文したら、注文者はピザが届くまで好きにしてていい

 

ここまでの内容でこんな感じのものを作成しました。条件を入れて検索ボタンを押すことでぐるなびのWebAPIから返ってきた情報(店名・カテゴリ・画像)を表示しています。

あとがき

久しぶりに参加した勉強会。3時間半は長丁場かと思いましたが、いざ参加してみると手を動かしている時間であっという間に時間が過ぎて、むしろ早く終わったように感じました。

勉強会の内容の大枠は理解していたので復習的な参加になりましたが、それでも細かい用語やプログラミングの構文、開発する上での便利ツールなど独学では知り得ない情報もあったので、参加した意味はありました。

また、勉強会ならではの他の人との交流もあったりして、独学でもくもく勉強している人にとっても良い刺激や情報収集もできる場であると思いました。今後も勉強会に参加していきたいです。

この記事は、最初軽い気持ちで書き始めたのですが、書いている内にボリュームが大きくなってしまい、それでいて中身もまとまりのないものになってしまいました。それでもやはりアウトプットすることで知識の定着や勉強会だけでは得られなかった知識の補強や幅の広がりがあると感じます。

最初から完璧なアウトプットが書けるわけはないので、書く時間を短く、かつ、密度の濃い内容に仕上げられるようにこうしてアウトプットを続けていきたいと思いました。

それでは、また

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です