--- # System prepended metadata title: ６月１３日もくもく会　API（過去動画視聴） --- # ６月１３日もくもく会　API（過去動画視聴） #### https://youtu.be/kgsKr9GlMa0 **決め事など** もくもくタイム　２０時〜２１時まで視聴＆自習 自由　　　　 ２１時〜２２時(適当) 動画視聴&自習 （既に学習済の方もAPIに関するアウトプットを是非！！） 共有フリースペース　（自由にカスタム） （カオスになったらdiscord部屋分かれるなり、やりやすいようにやってくだしゃい） ### だいそんさんの資料ありましたのでリンク貼ってます https://esa-pages.io/p/sharing/2315/posts/13639/e52c941d245c76b4d4f8.html zipcode: https://zipcoda.net/doc AZMS！ #### 動画内でこのリンクが使われます ### --チャット-- こんばんはファラオ siri だいそんさんのsiri敏感すぎない？ すぎる。。 むずぃ（笑） いや庭山さんの質問レベチすぎてわからん（笑） たしかに ### --わからない-- ・JSON形式 ・Vue.jsってなんだ ・ https://i.gyazo.com/c0a92d1be8ca6ff24880b50ef232d195.png ### --まとめ-- APIとはなにか ・ ポートフォリオでAPIを使いたい場合 ・ 動画内で紹介されている楽天rapidAPI https://api.rakuten.co.jp/docs/ja/docs/what-is-rapidapi/ いろんなAPIがある。 ### --参考記事-- [不思議の国のSE用語](https://qiita.com/t_nakayama0714/items/478a8ed3a9ae143ad854) [ほとんどのエンジニアに解けるパズル](https://puzzling-a-puzzler.herokuapp.com/) postmanを使ってみよう的な動画↓ https://youtu.be/fjeqRCRzQZA azms!! ### さらなる高みを目指す人向け ーーーーーーーーーーーーーーーーーーーーーーー ### 適当にメモ空間つくろう（匿名でも） **やの** APIってなに　(アプリケーション・プログラミング・インタフェース） ・他フェース） ・エンドポイント＝URL ・ブラウザとRails等のアプリケーションの間にある接点「インターフェース」を指す ・世の中の提供されているAPIにはドキュメント＝記録物が用意されている ・HashlogもTwitterのAPIが使われている。。公式のドキュメントをみて自分のアプリに組み込む。ツイートなどの情報を取得 大手ネット通販サイトを運営するAmazonのAPIを利用すれば、自身のWebサイトで最新の売れ筋や価格の表示などが可能 Postman　とは？ Web APIの開発者「提供する側・活用する側」双方にとってよりよい 開発・検証のエクスペリエンスを提供するクライアンアプリケーション **かねこ** （siriびっくり） ・API＝エンドポイント＝URL ・決められた条件の形式でリクエストを送ると、APIが持っているデータをレスポンスしてくれる ・railsも同じような仕組み 　⇨決められたURLに対して、決められたメソッドで決められた文字列をリクエストすると、その結果が画面上にレスポンスとして返ってくる。 ・JSONは、一種のデータ形式・フォーマット。詳細は調べること。 　Railsでは、以下のように記述するとJSON形式のレスポンスを返してくれる。 ``` 　render json: hoge ``` ・不思議の国のSE用語 - Qiita　おもしろそう 　⇨ https://qiita.com/t_nakayama0714/items/478a8ed3a9ae143ad854 ・APIにはAPIドキュメントがあるため、ドキュメントを見て、どのようなリクエストを送ればいいかなどの使い方を調べる。 ・Rakuten Rapid API　 　⇨ https://api.rakuten.co.jp/ja/ 　⇨色々なAPIがまとまっている ・Veu.jsやReact.jsを使った場合は、フロント側でhtmlを組み立てる雛形を持っていて、railsはJson形式でレスポンスを返す。 　※従来はrailsがhtmlを組み立てて、レスポンスを返している。 **山﨑** API * あるサイトが持っているDBを公開している * 決められた形式でリクエストを送ると、それに応じたレスポンスが帰ってくる https://zipcoda.net/api サーバがこの受け口を持っていて、 ?[key]=[value]&[key]=[value] の形でパラメータをつけてリクエストを送れる(GET) vue.js フロントはデータの整形をしてHTMLを作る サーバはデータを返す(json) rails フロントは表示とサーバにリクエストを送るだけ サーバはHTMLを返す json JSで扱えるフォーマットの連想配列 ruby: nil, JS: null みたいな形式の違いを吸収できる？？ **三浦** API ・データベースを保有 ・決められた入力形式でリクエストを送ることで、APIが保有しているデータを取得できる ・レスポンスは全てjson→（htmlタグはすでにクライアント側に存在しているから、json以外の情報は不要） ・post形式でもリクエスト送れるっぽい ・どんなURLになるか確認しながら実装すると良さそうだけど、どうやるだろ firebase 認証の外部API ターミナルってjson形式で表示されてる？？ **あやこ** APIを使うのがはじめてなので、とりあえずイベント動画を見て、 こういうもんなのかと学びます！リアルタイムにアウトプットします〜😊 APIとはエンドポイントとひとまず思っておく（決められたインターフェースに適合するようリクエストを送ると、それに応じたレスポンスが返ってくる） https://zipcoda.net/doc このサーバーは　`GET https://zipcoda.net/api` で待ち構えている zipcodeというキーに対してString型の半角数字が設定されている前提で待ち構えている →Railsとやってる事は一緒（comment機能も特定のURLでpatchリクエスト、bodyというキーにstring型の文字列が設定されている前提で待ち構えている） （わからなかった：json形式の話） [不思議の国のSE用語](https://qiita.com/t_nakayama0714/items/478a8ed3a9ae143ad854)→一瞬は5分以上ｗ FirebaseってAPIなんだ・・・！　（言語の一種かと思っていた） POSTMANで実際にAPIを叩いてみるとJSON形式でレスポンスが返ってくる（ajaxの$表記と同じような感じみたい。） [ほとんどのエンジニアに解けるパズル](https://puzzling-a-puzzler.herokuapp.com/) SPAって最初に情報を全部落としておいて、あとは非同期でやるみたいなサイトのことなのか（だから初期表示が重い） **Y** APIはアプリケーション・プログラミング・インターフェースの略 とりあえずAPI=エンドポイント=URLみたいなもので、システム間の通信のインターフェース サーバーが特定のURLで指定のリクエスト前提で待ち構えていてキーに対応するデータが設定される前提で待ち構えている RailsもAPIの一種 APIを叩く=HTTPリクエストを送る Vue.jsやReact.jsはビューテンプレがフロントエンド側にあるからJSON形式のデータがあればよい Railsはビューテンプレを元にサーバでHTMLを作ってフロントに返す **ゆの** - HTTPリクエストに対してレスポンスを返す仕組みを担う部分 - GETやPOSTなどのメソッドとURIの組み合わせでリクエストを指定する - あらかじめRailsなどのインターフェイス側で定められたエンドポイント（GET: http://localhost3000/user など）に適合したリクエストを送信したときに、決まったリクエストが返ってくる。つまり、routes.rbはリクエストに対するレスポンスの対応関係を記すファイル。例えば、下は GET: http://localhost3000/user のリクエストに対して、static_pagesコントローラーのprivacyアクションを呼び出すということを意味している。 ```ruby= get 'privacy', to: 'static_pages#privacy' ``` (railsではアクションでテンプレートの呼び出しを明示しない場合はアクション名のテンプレートが呼び出されるため、この場合、viewstatic_pages/privacy.html.erb ファイルが呼び出されれる) - 夕食呼ばれてしまったので抜けます、途中までの参加ですみません。 - 最後に、APIリクエストとレスポンスを確認するときに、よくPostmanが使われていますが、一応VScodeの「REST Client」というプラグインも、シンプルで使いやすいので便利です。（データ量が多いときはPostmanの方が快適かもです。） ありがとうございます！！ **《T》** 参加が難しいそうので、事前に失礼しました💦　 ・codepen : JSの歯車からjQueryを追加 HTML ```

ZiPCODA API お試し


``` JS ``` document.addEventListener('DOMContentLoaded', () => { const input = document.getElementById('zipcoda'); const action = document.getElementById('serach_button'); action.addEventListener('click', () => { const search_number = input.value; $.ajax({ url: 'https://zipcoda.net/api', dataType: 'jsonp', data: { zipcode: search_number, } }) .then(function(r){ console.log(r.items); }) }); }); ``` Vue.jsとは Vue.jsとは、JavaScriptのフレームワークの1種です。JavaScriptはほぼ全てのブラウザで動作するプログラミング言語で、フロントエンドアプリケーションの開発でも主として使用されています。 そのJavaScriptでより効率的な開発を行う目的で使用されているのがJavaScriptのフレームワークやライブラリです。なお、フレームワークもライブラリも「開発を支援する仕組みやツール群」といった意味では同等ですが、ライブラリと比較してフレームワークの方が、より規模が大きいニュアンスがあります。 JavaScriptのフレームワークやライブラリで最も有名なのは jQuery です。jQueryは導入もしやすく、多くのフロントエンドアプリケーションで使用されています。しかし jQuery は DOM操作を自分で行わなければならないなどの弱点があります(詳しくは後述します)。 この欠点は、これまでブラウザで動作するアプリケーションの開発主体がサーバー側だった時はあまり問題になりませんでした。ところが最近はWebページ自体を遷移させずに1つのページ内で処理を完結させる Single Page Application など、フロントエンド側に開発主体が移りつつあり、 jQuery の弱点がより顕著化する状況となっています。 そこで登場したのが、Vue.js や Angular、React などのJavaScriptのフレームワークです。これらフレームワークはDOM操作を自動化するなど、より効率よくフロントエンドの開発が行えるよう考慮されています。中でも Vue.js は比較的容易に使い始めることができるため、既存のアプリケーションへの組み込みなどにも向いています。 Vue.jsを使用するメリット 気軽に使える：Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。 DOM操作を自動的に行ってくれる：HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれます。これにより、jQueryよりも簡潔に分かりやすくコードを記載することができます。