今回はプログラマーっぽい記事を書いてみました。
Vue.jsを使用して地図アプリを作成するにあたり、どの程度の量の情報をどの程度の速度で表示できるのかが気になったため、調査したことを備忘録的な意味も含めて、まとめていきます。
実行環境はWindows11です。
今回はVue.jsの環境構築～地図表示までです。

環境を構築する

Node.jsのインストール

まず、下記サイトにアクセスして、Node.jsをダウンロードします。
「推奨版」と書かれたボタンをクリックすると、インストーラーがダウンロードされます。

ダウンロードが完了したら、ダウンロードフォルダにある「node-vxx.xx.x-x64.msi」をダブルクリックして、インストーラーを起動します。

インストーラーでは、特別な事情がない限り、「Next」を選択して大丈夫です。

Vue CLIのインストール

Vue CLIはVueプロジェクトを作成するコマンドを実行するために必要なものなので、下記のコマンドでインストールします。
※npmはNode.jsをインストールすると使用できるようになります。もし、Node.jsをインストールしても実行できない場合は、コマンドプロンプトを再起動すると実行できるようになるかもしれません。

npm install -g @vue/cli

Vueプロジェクトの作成

次に、Vueプロジェクトを下記コマンドで作成します。

vue create leaflet_practice

上記「leaflet_practice」部分はプロジェクトフォルダのフォルダ名になる部分なので、任意の文字列でも大丈夫です。
今回は「leaflet」という地図表示ライブラリを使用するため、上記のような名前にしています。

vue create実行時にVue2かVue3かを選択することができますが、今回はVue2を選択します※。
※本来はVue3を選択したいところですが、Vue3対応のleafletがまだベータ版のようなので、Vue2を選択しています。

コマンドが完了したら、作成したプロジェクトフォルダに移動します。

cd ./leaflet_practice

ライブラリのインストール

地図表示に使用するライブラリを下記コマンドでインストールします。

npm install leaflet vue2-leaflet --save

これで下準備は完了です！

地図を表示する

地図コンポーネントの作成

Vue.jsは画面の要素（地図・ボタン・メニューリストなど）を部品として管理・再利用できるのが特徴です。今回は地図コンポーネントを作成して、アプリ本体から読み込むような構造にします。

leaflet_practice\src\components に「Leaflet_Map.vue」ファイルを新規作成して、下記コードを入力します。

<template>
  <div id="map">
    <l-map :zoom="13" :center="[35.6895, 139.6917]">
      <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
    </l-map>
  </div>
</template>

<script>
import { LMap, LTileLayer} from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  components: {
    LMap,
    LTileLayer
  },
}
</script>

<style scoped>
#map {
  height: 400px;
  width: 100%;
}
</style>

地図コンポーネントを読み込む

src\App.vueを下記のようにします。

<template>
  <div id="app">
    <Map/>
  </div>
</template>

<script>
import Map from './components/Leaflet_Map.vue'

export default {
  name: 'App',
  components: {
    Map
  }
}
</script>

プロジェクトを実行する

最後に、プロジェクトフォルダ（srcなどがあるフォルダ）でコマンドプロンプトを開き、下記コマンドを実行します。

npm run serve

上記実行後に、http://localhost:8080へアクセスすると、下記のように地図が表示されます。

これで地図表示までできました！
次回は地図上にマーカーを表示していきます。