はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー

2025年7月13日、熊本県菊池市にある「菊池みらいベース」で「はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー」を開催しました！

菊池みらいベース：https://kikuchi.miraibase.net/

Transcript

1. 飲食店検索アプリを作ろう プログラミング初心者 🔰 はじめてのWeb API体験！ は じ め て の W e b A P I 体 験 ！ コードを書く体験を 一緒に味わって みましょう〜
2. 自己紹介 Aki Kana
3. コードを書いて、プログラム が動かすことを体験しよう Web
   APIを使ってみよう ⽬的
4. デモ ⽬標の完成形
5. https://akinko0915.github.io/ kikuchi-restaurants-search-app/ ⽬標の完成形
6. アプリやサービス同⼠がやり取り するための窓⼝・ルール APIとは
7. APIとは 他のサービスに 「この情報ちょうだい」とお願い して必要な情報をもらう 今⽇の熊本の 天気ちょうだい 天気API ⾃分のアプリ 晴れだよ
8. 今回のAPI 菊池の飲⾷店情報をもらいたい どんな情報があるかみてみよう
9. 菊池の飲食店API 項目 説明 id 店舗ID（ユニークな識別子） name 店舗名 map_link Google マップへのリンク genre ジャンル情報（例：和食、カフェ・スイーツ） area エリア情報（例：隈府、七城町、龍門など）
10. こちらで⽤意した作業プロジェクトを ⾃分のPC内に⽤意する 開発する準備をしよう
11. 1.GitHubを開く 2.
    「kikuchi-restaurants-search-app」 で検索してレポジトリを⾒つける 3.ZIPファイルをダウンロードして解 凍した後、VSCodeで開く
12. ファイルの説明 HTML 画⾯に表⺬される内容や構造を作る
13. ファイルの説明 CSS ⽂字の⾊、⼤きさ、配置 など、⾒た⽬を整える
14. ファイルの説明 JavaScript クリックしたときの動きや データの処理などを担当
15. 開発していこう template
16. 開発していこう HTML 1.画⾯に必要な要素を作ろう
17. HTML HTML タグで要素を表現します <h1></h1> <button></button>
18. 開発していこう 開発者ツールを使ってみよう
19. 開発していこう 2.
    ⽂字の⾊や太さ・背景⾊などを つけてみよう CSS
20. 開発していこう .<クラス名>
    {    background-color:
    white;    font-weight:
    3rem;    color:
    black; } CSS
21. 開発していこう 3.
    APIデータを取得して表⺬しよう JavaScript
22. 開発していこう 1.HTMLの要素を取得する 2.APIからデータを取得する 3.データをHTML要素に追加して表⺬する JavaScript
23. 開発していこう 1.HTMLの要素を取得する JavaScript
24. 開発していこう 2.
    APIからデータを取得する JavaScript
25. 開発していこう 3.
    データをHTML要素に追加して表⺬する JavaScript
26. 応⽤！ ①
    APIからのデータがなかったときの 処理を追加しよう ②
    お店の⽩枠がクリックされたときに google
    mapが開くようにしよう JavaScript
27. お疲れ様でした！ ありがとうございました