ChatGPT に Svelte + Leaflet による地図アプリを作成してもらった

# はじめに

地図アプリってどうやって作成すれば良いんだろう？って思ったことありませんか？今の時代、そんな時には [ChatGPT] を使えば良いのです。
という安易な発想で地図アプリを作成してみます。

# ChatGPT に聞いてみた

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/78e8105d-8afd-5740-e6fc-3ca6d7a9db08.png)

ついでに `artifacts.json` のサンプルも作ってもらっちゃいましょう:stuck_out_tongue_winking_eye:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/60c2a5e9-080a-632e-709c-2c33bd010ca6.png)

# 実際に作ってみる

1. まずは、以下の手順を参考にして開発環境を作成します。

   https://qiita.com/fsd-tetsu/items/8017b66d24dddc53b052

2. [Leaflet] をインストールします。

    ```:ターミナル
    npm i leaflet
    ```

3. [SvelteKit] を使うのでファイル名の対応関係は以下になります。

   App.svelte → src/routes/+page.svelte

4. ChatGPT の出力内容をコピペします。

5. 最終的なフォルダ構成はこんな感じです。

    ```bash:ターミナル
    /workspaces/relics-map-svelte (main) $ tree -I ".gitignore|.svelte-kit|node_modules".
    .
    ├── LICENSE
    ├── README.md
    ├── jsconfig.json
    ├── package-lock.json
    ├── package.json
    ├── playwright.config.js
    ├── src
    │   ├── app.d.ts
    │   ├── app.html
    │   ├── index.test.js
    │   └── routes
    │       ├── +page.svelte       ←修正したファイル
    │       ├── Map.svelte         ←追加したファイル
    │       └── artifacts.json     ←追加したファイル
    ├── static
    │   └── favicon.png
    ├── svelte.config.js
    ├── tests
    │   └── test.js
    └── vite.config.js
    ```

# 結果

あれ？おかしい:thinking:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/8fa523c1-8b39-7236-df4c-a0d5ff2874a8.png)
タイルがバラバラになっちゃってます。。。

# 原因

[Leaflet] の CSS を適用していなかったのが原因でした。

# 修正

というわけで、以下の様に CSS をインポートします。参考: https://ja.vitejs.dev/guide/features.html#css

```diff_html:src/routes/Map.svelte
<script>
  import { onMount } from 'svelte';
  import L from 'leaflet';
  import artifacts from './artifacts.json';
+  import css from 'leaflet/dist/leaflet.css';

  let map;

  onMount(() => {
    map = L.map('map').setView([35.658068, 139.751599], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18,
    }).addTo(map);

    artifacts.forEach(artifact => {
      const { name, description, lat, lng } = artifact;
      const marker = L.marker([lat, lng]).addTo(map);
      marker.bindPopup(`<h3>${name}</h3><p>${description}</p>`);
    });
  });
</script>

<div id="map" style="height: 100vh;"></div>
```

# 修正後の結果

ちゃんと表示できましたー！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/5962d825-c6c0-63e7-5bae-cb4a5c2281d3.png)

さて、ここからが本題です。プロットされてるかどうかも確認します。
マウススクロールで縮小して、東北方面にドラッグしてみると、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2773745/adac26fa-f314-e81e-196e-acc9aa030915.png)
ちゃんとプロットされてましたー！

# まとめ

[ChatGPT] を使って地図アプリを作成してみました。完璧とはいきませんでしたが、自分で調べて作成する場合を想像して比べてみると1時間ぐらいは短縮できたはずです。

また、結構曖昧な質問をしたにもかかわらず、[Svelte] と [Leaflet] という条件に問題なく答えてくれていることに驚きです。（最近は ChatGPT を使い慣れたせいか、この驚きが薄れてきているのを感じています。）

さらに質問すれば拡張の方法もきっと教えてくれるでしょう。

[ChatGPT] ってすごいですね！:smiley:

[ChatGPT]:https://chat.openai.com/
[Svelte]:https://svelte.dev/
[SvelteKit]:https://kit.svelte.dev/
[Leaflet]:https://leafletjs.com/