1. 主要ページへ移動
  2. メニューへ移動
  3. ページ下へ移動

QES ブログ

記事公開日

Vibe coding個人開発ハンズオン ~Google AI Studioによるアプリ・データ生成~

  • このエントリーをはてなブックマークに追加



こんにちは。DXソリューション営業本部の吾妻です。


生成AI(LLM)を活用した新しい開発手法である「Vibe Coding(バイブ・コーディング)」は、AIに対して自然言語で「実現したい機能」や「なんとなくの雰囲気(Vibe)」を伝え、生成されたコードを実行・修正しながら対話的にアプリケーションを作り上げていくスタイルです 。エンジニアが、コードの細かい構文よりも、ユーザー体験やアイデアの具現化に注力できるのが最大の特徴です。

本記事では、ブラウザベースのAI開発環境「Google AI Studio」を使用し、このVibe Codingの手法で「東京観光案内アプリ」を構築する手順を、ハンズオン形式でご紹介します。IDE(統合開発環境)などのソフトウェアをインストールする必要はなく、ブラウザだけで完結するため、生成AI開発の第一歩として最適です。

「コードを一行も手書きせず、プロンプトだけでどこまで作れるのか」。ぜひ一緒に体験してみましょう。


今回作成するもの

今回は、ユーザーの位置情報を活用して、観光スポットを提案するようなWebアプリケーションを作成したいと思います。画面イメージを以下に示します。

vcho-app01.png


アプリケーションの要件を以下に示します。アプリケーションで使用するデータはJSONファイルに格納しておき、非同期通信(Fetch API)で取得することで、将来的にデータベースやBFF(Backend for Frontend; フロントエンドとバックエンドの間に中間層を設け、複雑な処理を吸収する役割をもたせるアーキテクチャパターン)へ移行しやすい構成とします。

機能 ユーザーが「歴史」「グルメ」などのカテゴリを選ぶと、位置情報をもとに、おすすめの観光スポットが表示される。 
アーキテクチャ フロントエンド JavaScript(Vanilla JS)、Leaflet(地図描画)
データ JSONファイルをFetch APIで読み込む
インフラ GitHub Pages




事前準備

ブラウザベースの開発環境を利用するので、PCにソフトウェアをインストールする必要はありません。

以下の2つのアカウントをご用意ください。

・Googleアカウント(個人用): Google AI Studioを利用するためのアカウント
  ※Google Workspaceの組織(仕事用)アカウントではなく、検証用の個人アカウントをご用意ください
  ※ライセンスの種類、入力したデータが学習に利用されるかどうか、必要なコストといった事項は事前にご確認ください
・GitHubアカウント: アプリケーションを公開(デプロイ)するためのアカウント


① データ生成

まずは「観光案内アプリ」の肝となる「データ」を作成します。アプリケーションを作るだけでなく、データを作るのも生成AIの得意分野です。


今回は、観光地の情報をJSONファイルにまとめてもらおうと思います。実業務では、サンプルアプリケーションで表示するためのダミーデータを用意したり、テストデータを作成したりするために活用できると思います。ただし、生成AIが生成するデータには「ハルシネーション(もっともらしい嘘)」が含まれることもあり、正確でない可能性もあります。今回実装するアプリケーションの仕様であれば、生成された緯度・経度は必ずユーザーが目で見て確認するのでリスクが低いですが、要件によっては、人の目によるレビューを厚くするなどの追加手順が必要です。


一度に生成するデータの量の制約から、いったん対象とする観光データは「東京都内」のものに限定しておきます。単一のプロンプトで47都道府県分のデータを生成させようとすると、回答を生成できずにタイムアウトしたり、誤情報を含んだ回答が返ってくる可能性が高くなるので、都道府県ごとのプロンプトを用意して、得られた結果を統合するアプローチをとると良いかと思います。


それでは、Google AI Studio にアクセスし、モデル(Gemini 1.5 Pro または Flash)を選択して、以下のプロンプトを入力します。

結果には100件の観光スポットを含めるように指示をしていますが、途中で切れて構文エラーになる場合には、件数を減らして試してみてください。

以前のバージョンの生成AIと比較すると、きちんと文法的に妥当なJSONファイルを生成できるようになってきていますが、配列の末尾のカンマを付けてしまったり、プロパティ名を大文字にしたり、勝手に翻訳して日本語で書いてしまったりと、構造が壊れてしまうことがあります。なので、スキーマ(構造)を明確に指示して、さらにサンプルも示すと良いと思います。また、個々のプロパティについては、紹介文のような文字列は文字長の目安を、経緯度のような数値データは有効桁数を指定することがポイントです。

データ生成プロンプト全文
東京都内の観光スポット情報を100件含むJSONデータを作成してください。

# JSONファイルの仕様

- ファイル名: spots.json
- 構造:
    - 最上位は配列とする
    - 各スポットをオブジェクトとし、以下のプロパティを持たせる
        - id: 数値
        - name: スポット名
        - category: "歴史", "グルメ", "ショッピング", "自然" のいずれか
        - description: 50文字程度の紹介文
        - latitude: 緯度(小数点以下6桁の精度)
        - longitude: 経度(小数点以下6桁の精度)
        - address: 住所(都道府県から番地まで)
    - プロパティ名には半角英数小文字のみ使用する

# JSONファイルのサンプル

```json
[
    {
        "id": 1,
        "name": "浅草寺",
        "category": "歴史",
        "description": "都内最古の寺院。雷門にかかる大提灯は東京のシンボルとして有名です。",
        "latitude": 35.7146576,
        "longitude": 139.7967813,
        "address": "東京都台東区浅草2-3-1"
     },
    {
        "id": 2,
        "name": "築地場外市場",
        "category": "グルメ",
        "description": "新鮮な海産物やグルメが集まる食のワンダーランド。食べ歩きに最適です。",
        "latitude": 35.664766,
        "longitude": 139.767139,
        "address": "東京都中央区築地4丁目"
    }
]
```


生成されたJSON文字列のサンプルを以下に示します。

サンプルJSON全文 を開く
[
  {
    "id": 1,
    "name": "浅草寺",
    "category": "歴史",
    "description": "都内最古の寺院。雷門にかかる大提灯は東京のシンボルとして有名です。",
    "latitude": 35.714765,
    "longitude": 139.796655,
    "address": "東京都台東区浅草2-3-1"
  },
  {
    "id": 2,
    "name": "明治神宮",
    "category": "歴史",
    "description": "明治天皇と昭憲皇太后を祀る神社。広大な森に囲まれ、都会のオアシスとして親しまれています。",
    "latitude": 35.676397,
    "longitude": 139.699325,
    "address": "東京都渋谷区代々木神園町1-1"
  },
  {
    "id": 3,
    "name": "東京タワー",
    "category": "歴史",
    "description": "昭和33年に開業した東京のシンボル。メインデッキからは東京の景色を一望できます。",
    "latitude": 35.658580,
    "longitude": 139.745432,
    "address": "東京都港区芝公園4-2-8"
  },
  {
    "id": 4,
    "name": "皇居東御苑",
    "category": "歴史",
    "description": "旧江戸城の本丸・二の丸・三の丸の一部を宮内庁が管理し、一般公開している庭園です。",
    "latitude": 35.687593,
    "longitude": 139.757833,
    "address": "東京都千代田区千代田1-1"
  },
  {
    "id": 5,
    "name": "新宿御苑",
    "category": "自然",
    "description": "広大な敷地に日本庭園、イギリス風景式庭園、フランス式整形式庭園が組み合わされた公園。",
    "latitude": 35.685175,
    "longitude": 139.710051,
    "address": "東京都新宿区内藤町11"
  },
  {
    "id": 6,
    "name": "築地場外市場",
    "category": "グルメ",
    "description": "新鮮な海産物やグルメが集まる食のワンダーランド。食べ歩きや海鮮丼が人気です。",
    "latitude": 35.665486,
    "longitude": 139.770666,
    "address": "東京都中央区築地4丁目"
  },
  {
    "id": 7,
    "name": "アメ横商店街",
    "category": "ショッピング",
    "description": "上野駅から御徒町駅にかけて続く活気ある商店街。食品から衣類まで何でも揃います。",
    "latitude": 35.710438,
    "longitude": 139.774432,
    "address": "東京都台東区上野4丁目"
  },
  {
    "id": 8,
    "name": "東京スカイツリータウン",
    "category": "ショッピング",
    "description": "電波塔としてのスカイツリーの足元に広がる、水族館やショッピングモールを含む複合施設。",
    "latitude": 35.710062,
    "longitude": 139.810700,
    "address": "東京都墨田区押上1-1-2"
  },
  {
    "id": 9,
    "name": "上野恩賜公園",
    "category": "自然",
    "description": "美術館、博物館、動物園などが集まる文化の森。春は桜の名所としても非常に有名です。",
    "latitude": 35.714072,
    "longitude": 139.774098,
    "address": "東京都台東区上野公園"
  },
  {
    "id": 10,
    "name": "銀座三越",
    "category": "ショッピング",
    "description": "銀座4丁目交差点に位置する老舗百貨店。最新のファッションやデパ地下グルメが充実。",
    "latitude": 35.671607,
    "longitude": 139.765624,
    "address": "東京都中央区銀座4-6-16"
  },
  {
    "id": 11,
    "name": "浜離宮恩賜庭園",
    "category": "自然",
    "description": "東京湾の海水を引いた「潮入の池」を持つ江戸時代の代表的な大名庭園。",
    "latitude": 35.659684,
    "longitude": 139.763402,
    "address": "東京都中央区浜離宮庭園1-1"
  },
  {
    "id": 12,
    "name": "高尾山",
    "category": "自然",
    "description": "都心からアクセスが良く、初心者でも登りやすい山。ミシュランで三つ星を獲得しました。",
    "latitude": 35.625344,
    "longitude": 139.243555,
    "address": "東京都八王子市高尾町"
  },
  {
    "id": 13,
    "name": "表参道ヒルズ",
    "category": "ショッピング",
    "description": "表参道のランドマーク的存在。世界的ブランドやトレンド発信ショップが集結しています。",
    "latitude": 35.667232,
    "longitude": 139.708233,
    "address": "東京都渋谷区神宮前4-12-10"
  },
  {
    "id": 14,
    "name": "竹下通り",
    "category": "ショッピング",
    "description": "原宿のシンボル的な通り。カワイイ文化の発信地で、クレープ店や雑貨屋が並びます。",
    "latitude": 35.671049,
    "longitude": 139.704253,
    "address": "東京都渋谷区神宮前1丁目"
  },
  {
    "id": 15,
    "name": "靖国神社",
    "category": "歴史",
    "description": "明治以降の日本の戦争・内戦で亡くなった英霊を祀る神社。桜の標本木があることでも有名。",
    "latitude": 35.694202,
    "longitude": 139.743770,
    "address": "東京都千代田区九段北3-1-1"
  },
  {
    "id": 16,
    "name": "神田明神",
    "category": "歴史",
    "description": "江戸総鎮守として将軍様から庶民まで崇敬された神社。IT守護やアニメとのコラボも。",
    "latitude": 35.702016,
    "longitude": 139.767926,
    "address": "東京都千代田区外神田2-16-2"
  },
  {
    "id": 17,
    "name": "六本木ヒルズ",
    "category": "ショッピング",
    "description": "オフィス、美術館、映画館、展望台、ショップが集まる複合都市。東京の夜景を一望。",
    "latitude": 35.660464,
    "longitude": 139.729248,
    "address": "東京都港区六本木6-10-1"
  },
  {
    "id": 18,
    "name": "豊洲市場",
    "category": "グルメ",
    "description": "築地から移転した日本の台所。マグロのセリ見学や、新鮮な寿司を楽しむことができます。",
    "latitude": 35.646580,
    "longitude": 139.787498,
    "address": "東京都江東区豊洲6-6-1"
  },
  {
    "id": 19,
    "name": "月島もんじゃストリート",
    "category": "グルメ",
    "description": "数十軒のもんじゃ焼き屋が軒を連ねる通り。下町の味を自分好みに焼いて楽しめます。",
    "latitude": 35.663673,
    "longitude": 139.781667,
    "address": "東京都中央区月島1丁目"
  },
  {
    "id": 20,
    "name": "代々木公園",
    "category": "自然",
    "description": "都心で一番広い空が見える森林公園。週末には様々なイベントやフェスティバルが開催。",
    "latitude": 35.670557,
    "longitude": 139.694668,
    "address": "東京都渋谷区代々木神園町2-1"
  },
  {
    "id": 21,
    "name": "井の頭恩賜公園",
    "category": "自然",
    "description": "吉祥寺にある公園。池でのボート遊びや、動物園、ジブリ美術館へのアクセスも良好。",
    "latitude": 35.699478,
    "longitude": 139.574693,
    "address": "東京都武蔵野市御殿山1-18-31"
  },
  {
    "id": 22,
    "name": "東京駅一番街",
    "category": "ショッピング",
    "description": "東京駅構内の商業施設。ラーメンストリートやキャラクターストリートが人気。",
    "latitude": 35.681236,
    "longitude": 139.767124,
    "address": "東京都千代田区丸の内1-9-1"
  },
  {
    "id": 23,
    "name": "思い出横丁",
    "category": "グルメ",
    "description": "新宿西口にある昭和レトロな飲み屋街。赤提灯が並び、焼き鳥やモツ煮込みが楽しめます。",
    "latitude": 35.692994,
    "longitude": 139.699564,
    "address": "東京都新宿区西新宿1-2"
  },
  {
    "id": 24,
    "name": "恵比寿ガーデンプレイス",
    "category": "ショッピング",
    "description": "サッポロビール工場跡地に作られた複合施設。レンガ造りの建物が美しく、大人の街の雰囲気。",
    "latitude": 35.642323,
    "longitude": 139.713292,
    "address": "東京都渋谷区恵比寿4-20"
  },
  {
    "id": 25,
    "name": "増上寺",
    "category": "歴史",
    "description": "徳川家の菩提寺として知られる浄土宗の大本山。東京タワーとのコントラストが美しい。",
    "latitude": 35.657371,
    "longitude": 139.748281,
    "address": "東京都港区芝公園4-7-35"
  },
  {
    "id": 26,
    "name": "谷中銀座商店街",
    "category": "グルメ",
    "description": "下町情緒あふれる商店街。メンチカツなどの食べ歩きや、猫をモチーフにした雑貨が人気。",
    "latitude": 35.727823,
    "longitude": 139.765662,
    "address": "東京都台東区谷中3-13-1"
  },
  {
    "id": 27,
    "name": "小石川後楽園",
    "category": "自然",
    "description": "水戸徳川家ゆかりの回遊式築山泉水庭園。中国の名所の名前をつけた景観が楽しめます。",
    "latitude": 35.705193,
    "longitude": 139.750531,
    "address": "東京都文京区後楽1-6-6"
  },
  {
    "id": 28,
    "name": "根津神社",
    "category": "歴史",
    "description": "1900年以上の歴史を持つ古社。春にはつつじ祭りが開催され、千本鳥居も見どころ。",
    "latitude": 35.720233,
    "longitude": 139.760777,
    "address": "東京都文京区根津1-28-9"
  },
  {
    "id": 29,
    "name": "渋谷スクランブルスクエア",
    "category": "ショッピング",
    "description": "渋谷駅直結の高層複合施設。屋上の展望施設「SHIBUYA SKY」が絶景スポット。",
    "latitude": 35.658517,
    "longitude": 139.701334,
    "address": "東京都渋谷区渋谷2-24-12"
  },
  {
    "id": 30,
    "name": "新宿ゴールデン街",
    "category": "グルメ",
    "description": "木造長屋に小さなバーやスナックが密集するエリア。独特の文化と雰囲気が世界的に人気。",
    "latitude": 35.694248,
    "longitude": 139.704689,
    "address": "東京都新宿区歌舞伎町1-1-6"
  },
  {
    "id": 31,
    "name": "深大寺",
    "category": "歴史",
    "description": "奈良時代の開創と伝わる古刹。周辺には名物の深大寺そばを食べられる店が多く並びます。",
    "latitude": 35.666993,
    "longitude": 139.549248,
    "address": "東京都調布市深大寺元町5-15-1"
  },
  {
    "id": 32,
    "name": "神楽坂",
    "category": "グルメ",
    "description": "石畳の路地が残る粋な街。老舗の和食店からフレンチレストランまで美食店が隠れています。",
    "latitude": 35.701625,
    "longitude": 139.740884,
    "address": "東京都新宿区神楽坂"
  },
  {
    "id": 33,
    "name": "奥多摩湖",
    "category": "自然",
    "description": "東京都の水瓶である小河内ダムによってできた湖。四季折々の自然と湖面の美しさが魅力。",
    "latitude": 35.790928,
    "longitude": 139.050516,
    "address": "東京都西多摩郡奥多摩町原"
  },
  {
    "id": 34,
    "name": "東京ミッドタウン",
    "category": "ショッピング",
    "description": "六本木の防衛庁跡地にできた複合施設。デザイン性の高いショップや美術館、広場があります。",
    "latitude": 35.665798,
    "longitude": 139.731006,
    "address": "東京都港区赤坂9-7-1"
  },
  {
    "id": 35,
    "name": "合羽橋道具街",
    "category": "ショッピング",
    "description": "調理器具や食器、食品サンプルの専門店が約170店集まる問屋街。プロも通う品揃え。",
    "latitude": 35.715367,
    "longitude": 139.789667,
    "address": "東京都台東区松が谷3-18-2"
  },
  {
    "id": 36,
    "name": "お台場海浜公園",
    "category": "自然",
    "description": "入り江を囲むように砂浜や磯が広がる公園。レインボーブリッジの夜景が特に美しい。",
    "latitude": 35.629342,
    "longitude": 139.776667,
    "address": "東京都港区台場1-4"
  },
  {
    "id": 37,
    "name": "新大久保コリアンタウン",
    "category": "グルメ",
    "description": "韓国料理店やコスメショップが立ち並ぶエリア。最新の韓国グルメを楽しむ若者で賑わいます。",
    "latitude": 35.700898,
    "longitude": 139.702008,
    "address": "東京都新宿区大久保1丁目"
  },
  {
    "id": 38,
    "name": "湯島天満宮",
    "category": "歴史",
    "description": "学問の神様・菅原道真公を祀る神社。受験シーズンには多くの学生が合格祈願に訪れます。",
    "latitude": 35.707833,
    "longitude": 139.767981,
    "address": "東京都文京区湯島3-30-1"
  },
  {
    "id": 39,
    "name": "マクセル アクアパーク品川",
    "category": "自然",
    "description": "品川プリンスホテル内にある水族館。光と音の演出によるイルカショーが人気です。",
    "latitude": 35.628472,
    "longitude": 139.737528,
    "address": "東京都港区高輪4-10-30"
  },
  {
    "id": 40,
    "name": "ダイバーシティ東京 プラザ",
    "category": "ショッピング",
    "description": "お台場にある商業施設。実物大ユニコーンガンダム立像が広場に展示されています。",
    "latitude": 35.625126,
    "longitude": 139.775535,
    "address": "東京都江東区青海1-1-10"
  },
  {
    "id": 41,
    "name": "六義園",
    "category": "自然",
    "description": "柳沢吉保が造営した回遊式築山泉水庭園。春のしだれ桜や秋の紅葉ライトアップが有名。",
    "latitude": 35.733566,
    "longitude": 139.746979,
    "address": "東京都文京区本駒込6-16-3"
  },
  {
    "id": 42,
    "name": "秋葉原電気街",
    "category": "ショッピング",
    "description": "世界有数の電気街であり、アニメ・ゲーム・アイドルなどのポップカルチャーの聖地。",
    "latitude": 35.698379,
    "longitude": 139.773177,
    "address": "東京都千代田区外神田1丁目"
  },
  {
    "id": 43,
    "name": "国立科学博物館",
    "category": "歴史",
    "description": "日本最大級の総合科学博物館。恐竜の化石から宇宙科学まで幅広い展示があります。",
    "latitude": 35.716336,
    "longitude": 139.776518,
    "address": "東京都台東区上野公園7-20"
  },
  {
    "id": 44,
    "name": "豪徳寺",
    "category": "歴史",
    "description": "招き猫発祥の地の一つとされる寺院。奉納された無数の招き猫が並ぶ光景は圧巻です。",
    "latitude": 35.648356,
    "longitude": 139.646536,
    "address": "東京都世田谷区豪徳寺2-24-7"
  },
  {
    "id": 45,
    "name": "東京ドームシティ",
    "category": "ショッピング",
    "description": "東京ドームを中心に、遊園地、スパ、ホテル、ショップが集まるエンターテインメント地区。",
    "latitude": 35.705608,
    "longitude": 139.751996,
    "address": "東京都文京区後楽1-3-61"
  },
  {
    "id": 46,
    "name": "等々力渓谷",
    "category": "自然",
    "description": "東京23区内唯一の渓谷。豊かな自然が残り、夏でも涼しく静かな散策スポット。(※樹木剪定等で一部立入禁止の場合あり)",
    "latitude": 35.606233,
    "longitude": 139.645524,
    "address": "東京都世田谷区等々力1-22"
  },
  {
    "id": 47,
    "name": "麻布十番商店街",
    "category": "グルメ",
    "description": "老舗のたい焼き屋や豆菓子店と、おしゃれなカフェが共存する洗練された商店街。",
    "latitude": 35.655299,
    "longitude": 139.735252,
    "address": "東京都港区麻布十番2丁目"
  },
  {
    "id": 48,
    "name": "旧古河庭園",
    "category": "自然",
    "description": "洋館とバラ園、そして日本庭園が調和した美しい庭園。大正時代の華やかな雰囲気。",
    "latitude": 35.742337,
    "longitude": 139.746183,
    "address": "東京都北区西ヶ原1-27-39"
  },
  {
    "id": 49,
    "name": "GINZA SIX",
    "category": "ショッピング",
    "description": "銀座エリア最大級の複合商業施設。ハイブランドのほか、アート展示や能楽堂もあります。",
    "latitude": 35.669591,
    "longitude": 139.764023,
    "address": "東京都中央区銀座6-10-1"
  },
  {
    "id": 50,
    "name": "柴又帝釈天",
    "category": "歴史",
    "description": "映画「男はつらいよ」の舞台として有名。木彫りの装飾が見事な帝釈堂や庭園があります。",
    "latitude": 35.757820,
    "longitude": 139.877864,
    "address": "東京都葛飾区柴又7-10-3"
  },
  {
    "id": 51,
    "name": "サンシャインシティ",
    "category": "ショッピング",
    "description": "池袋のランドマーク。水族館、展望台、プラネタリウム、ナンジャタウンなどが入る複合施設。",
    "latitude": 35.728952,
    "longitude": 139.719602,
    "address": "東京都豊島区東池袋3-1"
  },
  {
    "id": 52,
    "name": "日原鍾乳洞",
    "category": "自然",
    "description": "関東随一の規模を誇る鍾乳洞。年間を通じて11度前後に保たれ、幻想的な空間が広がります。",
    "latitude": 35.842795,
    "longitude": 139.043537,
    "address": "東京都西多摩郡奥多摩町日原1052"
  },
  {
    "id": 53,
    "name": "富岡八幡宮",
    "category": "歴史",
    "description": "江戸最大の八幡様で「深川の八幡様」として親しまれています。江戸勧進相撲発祥の地。",
    "latitude": 35.671954,
    "longitude": 139.799650,
    "address": "東京都江東区富岡1-20-3"
  },
  {
    "id": 54,
    "name": "中野ブロードウェイ",
    "category": "ショッピング",
    "description": "マンガ、アニメ、フィギュア、時計などの専門店が密集するサブカルチャーの殿堂。",
    "latitude": 35.708892,
    "longitude": 139.665798,
    "address": "東京都中野区中野5-52-15"
  },
  {
    "id": 55,
    "name": "葛西臨海公園",
    "category": "自然",
    "description": "東京湾に面した広大な公園。マグロが回遊する水族館や日本最大級の観覧車があります。",
    "latitude": 35.645063,
    "longitude": 139.861788,
    "address": "東京都江戸川区臨海町6丁目"
  },
  {
    "id": 56,
    "name": "巣鴨地蔵通り商店街",
    "category": "ショッピング",
    "description": "「おばあちゃんの原宿」と呼ばれる商店街。塩大福や赤パンツが有名で、温かい雰囲気。",
    "latitude": 35.734898,
    "longitude": 139.737751,
    "address": "東京都豊島区巣鴨4-22-8"
  },
  {
    "id": 57,
    "name": "日本橋",
    "category": "歴史",
    "description": "日本の道路網の始点。重要文化財である石造りの二連アーチ橋には麒麟の像があります。",
    "latitude": 35.684067,
    "longitude": 139.774503,
    "address": "東京都中央区日本橋1丁目"
  },
  {
    "id": 58,
    "name": "ホッピー通り",
    "category": "グルメ",
    "description": "浅草寺の西側にある飲み屋街。煮込み料理とホッピーを昼から楽しめる活気ある通り。",
    "latitude": 35.713753,
    "longitude": 139.794622,
    "address": "東京都台東区浅草2-3-19"
  },
  {
    "id": 59,
    "name": "昭和記念公園",
    "category": "自然",
    "description": "立川市にある国営公園。四季折々の花畑、プール、バーベキュー広場など施設が充実。",
    "latitude": 35.712128,
    "longitude": 139.394464,
    "address": "東京都立川市緑町3173"
  },
  {
    "id": 60,
    "name": "渋谷パルコ",
    "category": "ショッピング",
    "description": "ファッション、アート、エンタメの最先端が集まる商業施設。任天堂の直営店も入居。",
    "latitude": 35.662056,
    "longitude": 139.698711,
    "address": "東京都渋谷区宇田川町15-1"
  },
  {
    "id": 61,
    "name": "東京大神宮",
    "category": "歴史",
    "description": "「東京のお伊勢さま」と称される。神前結婚式創始の神社で、縁結びのパワースポット。",
    "latitude": 35.699967,
    "longitude": 139.746682,
    "address": "東京都千代田区富士見2-4-1"
  },
  {
    "id": 62,
    "name": "清澄庭園",
    "category": "自然",
    "description": "明治の富豪・岩崎弥太郎が造成した回遊式林泉庭園。全国から集めた名石が配されています。",
    "latitude": 35.680695,
    "longitude": 139.797966,
    "address": "東京都江東区清澄3-3-9"
  },
  {
    "id": 63,
    "name": "COREDO室町",
    "category": "ショッピング",
    "description": "日本橋の歴史とモダンが融合した商業施設。老舗の名品やこだわりの食が集まっています。",
    "latitude": 35.686522,
    "longitude": 139.773822,
    "address": "東京都中央区日本橋室町2-2-1"
  },
  {
    "id": 64,
    "name": "神代植物公園",
    "category": "自然",
    "description": "約4,800種類、10万本・株の樹木が植えられている植物公園。特にバラ園が有名。",
    "latitude": 35.670550,
    "longitude": 139.549226,
    "address": "東京都調布市深大寺元町5-31-10"
  },
  {
    "id": 65,
    "name": "日比谷公園",
    "category": "自然",
    "description": "日本初の洋風近代式公園。ビジネス街のオアシスであり、大噴水や花壇が美しい。",
    "latitude": 35.673629,
    "longitude": 139.756127,
    "address": "東京都千代田区日比谷公園1"
  },
  {
    "id": 66,
    "name": "歌舞伎座",
    "category": "歴史",
    "description": "歌舞伎専用の劇場。建物は和風意匠で、地下の木挽町広場ではお土産も購入できます。",
    "latitude": 35.669528,
    "longitude": 139.767948,
    "address": "東京都中央区銀座4-12-15"
  },
  {
    "id": 67,
    "name": "すみだ北斎美術館",
    "category": "歴史",
    "description": "葛飾北斎ゆかりの地・墨田区にある美術館。世界的にも有名な北斎の浮世絵作品を多数収蔵。",
    "latitude": 35.696041,
    "longitude": 139.800539,
    "address": "東京都墨田区亀沢2-7-2"
  },
  {
    "id": 68,
    "name": "南青山根津美術館",
    "category": "歴史",
    "description": "東洋古美術のコレクションで有名。隈研吾設計の建物と、都心とは思えない広大な日本庭園。",
    "latitude": 35.662244,
    "longitude": 139.717147,
    "address": "東京都港区南青山6-5-1"
  },
  {
    "id": 69,
    "name": "吉祥寺サンロード商店街",
    "category": "ショッピング",
    "description": "吉祥寺駅北口のメインストリート。アーケード街で、地元の人や買い物客で賑わいます。",
    "latitude": 35.703772,
    "longitude": 139.580227,
    "address": "東京都武蔵野市吉祥寺本町1丁目"
  },
  {
    "id": 70,
    "name": "東京ラーメンストリート",
    "category": "グルメ",
    "description": "東京駅一番街にある、東京を代表する有名ラーメン店が集結したエリア。",
    "latitude": 35.680665,
    "longitude": 139.768136,
    "address": "東京都千代田区丸の内1-9-1"
  },
  {
    "id": 71,
    "name": "迎賓館赤坂離宮",
    "category": "歴史",
    "description": "明治以降の建物として初の国宝。ネオ・バロック様式の西洋宮殿で、一般公開されています。",
    "latitude": 35.680289,
    "longitude": 139.729177,
    "address": "東京都港区元赤坂2-1-1"
  },
  {
    "id": 72,
    "name": "二子玉川ライズ",
    "category": "ショッピング",
    "description": "駅直結の複合施設。ショッピングセンター、オフィス、公園が一体となり、洗練された空間。",
    "latitude": 35.611732,
    "longitude": 139.627607,
    "address": "東京都世田谷区玉川2-21-1"
  },
  {
    "id": 73,
    "name": "御岳山",
    "category": "自然",
    "description": "古くからの山岳信仰の対象。ケーブルカーで登れ、レンゲショウマの群生地としても有名。",
    "latitude": 35.783063,
    "longitude": 139.152865,
    "address": "東京都青梅市御岳山"
  },
  {
    "id": 74,
    "name": "三鷹の森ジブリ美術館",
    "category": "歴史",
    "description": "スタジオジブリの世界観を体験できる美術館。短編映画の上映やネコバスの展示があります。",
    "latitude": 35.696238,
    "longitude": 139.570432,
    "address": "東京都三鷹市下連雀1-1-83"
  },
  {
    "id": 75,
    "name": "新宿西口思い出横丁",
    "category": "グルメ",
    "description": "戦後の闇市の面影を残す飲み屋街。狭い路地に赤提灯が灯り、外国人観光客にも人気。",
    "latitude": 35.693005,
    "longitude": 139.699567,
    "address": "東京都新宿区西新宿1-2"
  },
  {
    "id": 76,
    "name": "ららぽーと豊洲",
    "category": "ショッピング",
    "description": "海に面した絶好のロケーションにある大型商業施設。キッザニア東京も併設されています。",
    "latitude": 35.656515,
    "longitude": 139.791599,
    "address": "東京都江東区豊洲2-4-9"
  },
  {
    "id": 77,
    "name": "浅草花やしき",
    "category": "歴史",
    "description": "日本最古の遊園地。レトロな雰囲気のアトラクションが多く、下町の温かさを感じられます。",
    "latitude": 35.715372,
    "longitude": 139.794611,
    "address": "東京都台東区浅草2-28-1"
  },
  {
    "id": 78,
    "name": "恵比寿横丁",
    "category": "グルメ",
    "description": "公設市場跡地に個性的な飲食店が集まった横丁。賑やかな雰囲気でハシゴ酒に最適。",
    "latitude": 35.647573,
    "longitude": 139.710775,
    "address": "東京都渋谷区恵比寿1-7-4"
  },
  {
    "id": 79,
    "name": "戸越銀座商店街",
    "category": "グルメ",
    "description": "全長約1.3kmにおよぶ関東有数の長さを誇る商店街。下町グルメの食べ歩きが楽しい。",
    "latitude": 35.614660,
    "longitude": 139.715354,
    "address": "東京都品川区戸越1丁目"
  },
  {
    "id": 80,
    "name": "東京国際フォーラム",
    "category": "歴史",
    "description": "船をイメージしたガラス棟が特徴的なコンベンションセンター。建築美が評価されています。",
    "latitude": 35.676947,
    "longitude": 139.763713,
    "address": "東京都千代田区丸の内3-5-1"
  },
  {
    "id": 81,
    "name": "池袋西口公園",
    "category": "自然",
    "description": "野外劇場を備えた公園としてリニューアル。GLOBAL RINGと呼ばれる円形広場が特徴。",
    "latitude": 35.730302,
    "longitude": 139.709543,
    "address": "東京都豊島区西池袋1-8-26"
  },
  {
    "id": 82,
    "name": "KITTE丸の内",
    "category": "ショッピング",
    "description": "旧東京中央郵便局の局舎を一部保存・再生した商業施設。日本各地の銘品が揃います。",
    "latitude": 35.679641,
    "longitude": 139.764951,
    "address": "東京都千代田区丸の内2-7-2"
  },
  {
    "id": 83,
    "name": "目黒川の桜並木",
    "category": "自然",
    "description": "約4kmにわたり約800本の桜が咲き誇る人気スポット。春には多くの花見客で賑わいます。",
    "latitude": 35.644955,
    "longitude": 139.698305,
    "address": "東京都目黒区大橋?下目黒"
  },
  {
    "id": 84,
    "name": "秋川渓谷",
    "category": "自然",
    "description": "あきる野市にある渓谷。都心から1時間ほどで、川遊び、BBQ、紅葉狩りが楽しめます。",
    "latitude": 35.727552,
    "longitude": 139.220760,
    "address": "東京都あきる野市戸倉"
  },
  {
    "id": 85,
    "name": "国立新美術館",
    "category": "歴史",
    "description": "コレクションを持たない日本最大級の展示スペースを誇る美術館。波打つガラスの外観が特徴。",
    "latitude": 35.665311,
    "longitude": 139.726354,
    "address": "東京都港区六本木7-22-2"
  },
  {
    "id": 86,
    "name": "日本科学未来館",
    "category": "歴史",
    "description": "最新の科学技術を体験できる国立の科学館。ロボット実演や地球ディスプレイ「ジオ・コスモス」が有名。",
    "latitude": 35.619335,
    "longitude": 139.776484,
    "address": "東京都江東区青海2-3-6"
  },
  {
    "id": 87,
    "name": "両国国技館",
    "category": "歴史",
    "description": "大相撲の聖地。本場所開催のほか、相撲博物館も併設されています。",
    "latitude": 35.696956,
    "longitude": 139.793310,
    "address": "東京都墨田区横網1-3-28"
  },
  {
    "id": 88,
    "name": "水元公園",
    "category": "自然",
    "description": "都内唯一の水郷景観を持つ公園。ポプラ並木やメタセコイアの森があり、ヨーロッパのよう。",
    "latitude": 35.790518,
    "longitude": 139.871077,
    "address": "東京都葛飾区水元公園3-2"
  },
  {
    "id": 89,
    "name": "サンリオピューロランド",
    "category": "ショッピング",
    "description": "ハローキティをはじめとするサンリオキャラクターに会える屋内型テーマパーク。",
    "latitude": 35.624641,
    "longitude": 139.429077,
    "address": "東京都多摩市落合1-31"
  },
  {
    "id": 90,
    "name": "築地本願寺",
    "category": "歴史",
    "description": "古代インド仏教様式の外観が特徴的な浄土真宗本願寺派の寺院。カフェも併設されています。",
    "latitude": 35.666710,
    "longitude": 139.771694,
    "address": "東京都中央区築地3-15-1"
  },
  {
    "id": 91,
    "name": "日暮里繊維街",
    "category": "ショッピング",
    "description": "生地、織物、手芸用品の専門店が約90軒並ぶ通り。「日暮里トマト」などが有名。",
    "latitude": 35.729655,
    "longitude": 139.776602,
    "address": "東京都荒川区東日暮里"
  },
  {
    "id": 92,
    "name": "八芳園",
    "category": "自然",
    "description": "美しい日本庭園を持つ結婚式場・レストラン。庭園は一般にも開放され、四季の移ろいを感じられます。",
    "latitude": 35.639695,
    "longitude": 139.728983,
    "address": "東京都港区白金台1-1-1"
  },
  {
    "id": 93,
    "name": "自由が丘スイーツフォレスト",
    "category": "グルメ",
    "description": "「スイーツのテーマパーク」として人気。パティシエ作りたてのスイーツをその場で楽しめます。",
    "latitude": 35.605335,
    "longitude": 139.668877,
    "address": "東京都目黒区緑が丘2-25-7"
  },
  {
    "id": 94,
    "name": "東京カテドラル聖マリア大聖堂",
    "category": "歴史",
    "description": "丹下健三設計のモダンな教会建築。上空から見ると十字架の形をしており、内部は荘厳な雰囲気。",
    "latitude": 35.714283,
    "longitude": 139.726486,
    "address": "東京都文京区関口3-16-15"
  },
  {
    "id": 95,
    "name": "等々力不動尊",
    "category": "歴史",
    "description": "等々力渓谷を見下ろす高台にある寺院。春の桜や秋の紅葉が美しく、展望台からの眺めも良い。",
    "latitude": 35.604677,
    "longitude": 139.645794,
    "address": "東京都世田谷区等々力1-22-47"
  },
  {
    "id": 96,
    "name": "代官山T-SITE",
    "category": "ショッピング",
    "description": "「森の中の図書館」をテーマにした蔦屋書店を中心とする複合施設。大人の文化発信地。",
    "latitude": 35.648981,
    "longitude": 139.699863,
    "address": "東京都渋谷区猿楽町16-15"
  },
  {
    "id": 97,
    "name": "東京ジャーミイ",
    "category": "歴史",
    "description": "日本最大級のモスク(イスラム教寺院)。オスマン様式の美しい建築と内装が見学可能です。",
    "latitude": 35.668351,
    "longitude": 139.676648,
    "address": "東京都渋谷区大山町1-19"
  },
  {
    "id": 98,
    "name": "檜原村・払沢の滝",
    "category": "自然",
    "description": "東京で唯一の村にある「日本の滝百選」に選ばれた滝。4段に分かれて落ちる姿が美しい。",
    "latitude": 35.732386,
    "longitude": 139.141666,
    "address": "東京都西多摩郡檜原村本宿"
  },
  {
    "id": 99,
    "name": "上野アメ横センタービル地下食品街",
    "category": "グルメ",
    "description": "アジア各国の食材やスパイスが並ぶディープな地下街。異国情緒あふれる独特の雰囲気。",
    "latitude": 35.710438,
    "longitude": 139.774432,
    "address": "東京都台東区上野4-7-8"
  },
  {
    "id": 100,
    "name": "渋谷のんべい横丁",
    "category": "グルメ",
    "description": "渋谷駅近くに残る昭和レトロな飲み屋街。数席の小さな店が並び、密接なコミュニケーションが魅力。",
    "latitude": 35.659556,
    "longitude": 139.702220,
    "address": "東京都渋谷区渋谷1-25"
  }
]


このJSON文字列を、ファイル( spots.json )に保存しておきます。

Tips: 生成された観光スポットの位置情報が正しいか確認したい場合、AIに「このJSONをGeoJSONに変換して」と依頼し、地理院地図などのWebサービスで読み込ませると、地図上で確認できて便利です 。

地理院地図でのGeoJSONプレビュー
地理院地図にGeoJSONファイルを読み込ませた画面を掲載





② アプリケーション生成

JSONファイルの準備ができたので、ここからが本番のアプリケーション生成です。spots.jsonファイルを添付しつつ、以下のプロンプトを入力します。

アプリケーション生成プロンプト全文

あなたは熟練したフロントエンドエンジニアです。
Vanilla JSを使用して、観光案内アプリを作成し、最終的にGitHub Pagesへ静的サイトとしてデプロイしたいと考えています。
以下の要件に従って、プロジェクトのセットアップからコードの実装、デプロイ手順までを提示してください。

# 技術スタック & 環境

- 言語: JavaScript
- スタイリング: Tailwind CSS(CDNを利用)
- データソース: spots.json を fetch で取得する
    - spots.jsonファイルは、添付したファイルと同一のものを格納する

# アプリケーション機能要件

UIデザイン:

- レスポンシブデザイン(スマホで見やすいカード型レイアウト)
- 配色は白ベースで、清潔感のある観光サイトのようなデザイン
- 地図をメインに表示しつつ、画面下部にリストも表示する
    - ユーザー位置情報や検索結果を地図上にピンで表示する

機能:

- ユーザーの現在地(GPSなど)を取得して、地図上に表示する
- ヘッダーの下に「カテゴリフィルター(ボタン)」を配置する
- spots.json からカテゴリを抽出し、「すべて」および各カテゴリのボタンを自動生成する
- ボタンをクリックすると、リストをフィルタリングして表示する(初期状態は「すべて」)
- リストの各項目にある経緯度とユーザーの現在位置との距離を算出して、近い順にソートするボタンを配置する

# 実装してほしいファイル・内容

以下の単一ファイルで構成してください。

- index.html : JavaScriptソースおよびCDN呼び出しを含む


生成AIからの応答として、HTMLファイルの内容が出力されます。これを index.html という名前で、先ほどのJSONファイルと同じフォルダに保存します。このHTMLファイル中では、地図を表示するためのライブラリとして、APIキーを取得する必要がないことからLeafletが組み込まれると思います。また、地図データ(タイル地図)として、OpenStreetMapが指定されます。ライブラリ、タイル地図とも、必要に応じて追加プロンプトにより変更させることができます(ライブラリとしてはMapLibreが、タイル地図としては地理院タイルなどで代替することもできます)。



②-a Vibe(雰囲気)の調整

もし生成されたアプリケーションの挙動やUIがイメージと違う場合(例:「データ抽出条件を変えたい」「文字が小さすぎる」「ボタンが押しにくそう」)には、コードを自分で書き換えたくなる気持ちを抑えて、生成AIに修正依頼を出します。

修正依頼プロンプト全文
正常系のロジックは問題ありません。
ユーザーの位置情報を取得できない場合のエラーメッセージ出力を、ポップアップダイアログで表示するように修正してください。
ユーザーインタフェースのデザインについて、カードの枠に薄い影をつけて、マウスホバー時に少し浮き上がるアニメーションを追加してください。
また、カテゴリボタンは現在四角いですが、丸みを帯びたデザインに変更してください。


もし自分でソースコードを修正した場合には、ソースコードの変更内容とともに「ソースコードに修正を加えたので認識してください」とプロンプトを入力することで、生成AIと修正内容を共有し直して、先に進めることができるようになります。

ちなみに、生成AIへの指示出しにおいて、「一度に完璧なコードを求めるのではなく、要件を伝えながら徐々に修正する」ことを勧めることが多いですが、試行錯誤を繰り返すうちに、生成AIが意図しない範囲のコードを勝手に書き換えてしまうことがあるので(特に、意図を記したコメントを消してしまうことが多々あります)、ある程度細かい修正が重なってしまった場合には、(長くなりすぎたコンテキスト(対話履歴)を一度リセットして指示を整理するために)いったんそれまでのやり取りを全て捨てたうえで、最初のプロンプトを大幅に書き換えた方が上手くいく場合もあります。意図した通りの結果が得られないときは、捨てる勇気を持って、試してみてください。



②-b (応用)レビューも生成AIに任せる

Vibe codingで問題となりやすいのが、コードを生成するのは生成AIが高速に行ってくれるものの、生成されたコードを人間が理解するのに時間がかかるという点です。そこで、コードを生成するだけでなく、ドキュメント作成やコードレビューまで生成AIに任せてしまい、人間が理解する際の負荷を抑える方法が考えられます。

以下のようなコードレビュー依頼プロンプトを入力します

コードレビュー依頼プロンプト全文
あなたは経験豊富なシニアフルスタックエンジニアかつセキュリティスペシャリストです。
以下のソースコードに対して、本番環境へのデプロイを想定したコードレビューを行ってください。
あえて重箱の隅をつつくような、厳しい視点で批判的に見てください。

# レビューのゴール

コードの品質を担保し、技術的負債を最小限に抑えつつ、ビジネス要件を完全に満たす状態にすること。

# レビュー観点

以下の5つの観点で詳細に分析し、改善案(修正コード例を含む)を提示してください。

1. ビジネスロジックの網羅性と正確性
    - 提示した仕様に対し、実装が「100%」機能を満たしているか?
    - 境界値(空データ、最大値、最小値)や異常系(ネットワークエラー、DBタイムアウト)において、ユーザー体験を損なわない設計になっているか。
    - 暗黙の前提条件(ハッピーパス)のみを想定した脆弱なロジックになっていないか。

2. コーディングスタイルと一貫性(Clean Code)
    - 変数・関数名は、その役割を正確に説明しているか("data"や"result"のような抽象的すぎる名称はないか)。
    - コグニティブ・コンプレキシティ(認知的複雑度)が高くないか。ネストが深く、読み手への負荷が高すぎる箇所を特定せよ。
    - 言語特有のモダンな構文(Syntactic sugar)を適切に活用し、簡潔かつ宣言的に記述されているか。

3. 徹底的なセキュリティ監査
    - 入力値バリデーションは「ホワイトリスト方式」で厳格に行われているか。
    - OWASP Top 10(インジェクション、認証不備、機密データの露出等)に該当する懸念点はないか。
    - 依存ライブラリの使い方は安全か。また、意図しない副作用を伴うグローバル変数の使用はないか。

4. 保守性と将来の拡張性(Architecture)
    - 「SOLID原則」に照らして、一つの関数・クラスが多すぎる責任を負っていないか。
    - モジュール間の結合度が強すぎないか(密結合の排除)。
    - 型定義(TypeScriptならInterface/Type、PythonならType Hintsなど)が厳密で、IDEの補完や静的解析が最大限活かせる状態か。

5. パフォーマンス・エラー耐性
    - ループ内での不要なAPIコールやDBクエリ(N+1問題)など、ボトルネックとなる箇所はないか。
    - エラー発生時に、原因特定が可能な「意味のあるログ」を出力しているか。
    - メモリリークや非同期処理の競合(Race Condition)の可能性を検証せよ。

# レビュー対象

## ビジネス要件・仕様

[ここにアプリケーション生成プロンプトを貼り付ける]

## ソースコード

[ここにレビュー対象のソースコードを貼り付ける]

# 出力フォーマット

- 総合評価: (S/A/B/C)
- 致命的な問題点: (あれば即座に指摘)
- 項目別詳細フィードバック: (上記5つの観点ごとに記載)
- 修正後の推奨コード: (リファクタリング案を提示)


ちなみに、データ生成の結果にも、誤った情報が混入していることがあるため(過去に営業終了した店舗、移転したスポット、所在地の検索誤り)、同様にレビューさせることが望ましいです。




③ 動作確認

生成されたHTMLファイルをダブルクリックしてブラウザで開くと、多くの場合、画面上に観光スポットの情報が表示されません。また、位置情報を取得するためのGeolocation APIは、HTTPS環境(またはlocalhost)でなければ動作しないという制限(仕様)もあります。

ブラウザの開発者ツール(F12)を見ると、以下のようなエラーが出ているはずです。

Access to fetch at 'file:///path/to/spots.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome-extension, chrome-untrusted, data, edge, http, https, isolated-app.


これはセキュリティ上の制約(CORS)により、ローカルファイル(fileスキーム)からFetch APIを実行できず、JSONファイルを読み込めないためです。これを解決するには2つの方法があります。

(i) ローカルサーバーを立てる: Visual Studio Codeの拡張機能 Live Serverなどを使用して、httpスキームとしてアクセスする
(ii) Webサーバーにアップロードする: 今回の目標であるGitHub Pagesへ先にデプロイしてしまう

今回は手軽に確認するため、(ii)の「GitHub Pagesへのデプロイ」へ進みます。


④ GitHub Pagesへのデプロイ

作成したアプリケーションをインターネット上に公開します。

1. GitHubリポジトリの作成: GitHubにログインし、新しいリポジトリ(例: tokyo-tour-app)を作成します。「Public」を選択してください。

2. ファイルのアップロード: 生成されたHTMLファイルとJSONファイルを、リポジトリにアップロード(コミット)します。ブラウザ上の「Upload files」からドラッグ&ドロップで構いません。

3. GitHub Pagesの設定: リポジトリのメニューから Settings > Pages を開き、以下の設定を変更して、Save をクリックします。
・Source: Deploy from a branch
・Branch: main
・Folder: / (root)

数分待つと、画面上部にサイトのURL(例: https://[ユーザー名].github.io/tokyo-tour-app/)が表示されます。

リンクをクリックして確認してみましょう。 JSONデータが正しく読み込まれ、カテゴリボタンを押すと表示が切り替わるはずです。

ちなみに、Google AI StudioにはGitHub連携機能も用意されているので、デプロイまで生成AIに任せたい場合には、利用してみるのもありかと思います。



まとめ

今回はVibe Codingの実践として、HTMLタグやJavaScriptのロジックを一切手書きすることなく、機能的なWebアプリケーションを構築しました。

今回のポイントは以下の通りです。
①データ構造もAIに任せる: アプリケーションの生成だけでなく、データの生成までAIに任せることで、データを収集したり整形したりする工数を大幅に削減できました
②Fetch APIの活用: データをコードに埋め込まず、外部ファイル化することで、PoC終了後に実稼働に移行しやすい構成を実現しました
③指示の反復: 一度のプロンプトで完結させず、出力結果を見ながら「もう少しこうして」と指示を重ねることで、想定に近づける手順を確認しました

生成AIやVibe codingを活用することで、「ソースコードの詳細な書き方」を意識することなく、「どのようなユーザー体験を作るか」という本質的な課題解決により多くの時間を割くことができるようになります。皆さんもぜひ、Vibe Codingで新しいアイデアを形にしてみてください。

QESでは、最新のAI技術を活用したシステム開発やDX支援を行っています。 「生成AIを業務システムに組み込みたい」「モダンな開発手法を取り入れたい」といったご相談がございましたら、お気軽にお問い合わせください。






このブログで参照されている、Microsoft、Azure、GitHub、その他の製品・サービスは、米国 Microsoft Corporation およびその関連会社の商標です。

このブログで参照されている、Google、Geminiは、Google LLCの商標です。

このブログで参照されている、OpenStreetMapは、OpenStreetMap財団の登録商標です。



  • このエントリーをはてなブックマークに追加

お問い合わせ

Contact

ご質問やご相談、サービスに関する詳細など、何でもお気軽にご連絡ください。下記のお問い合わせフォームよりお気軽に送信ください。

お問い合わせ

資料ダウンロード

Download

当社のサービスに関する詳細情報を掲載した資料を、下記のページよりダウンロードいただけます。より深く理解していただける内容となっております。ぜひご活用ください。

資料ダウンロード