前回のあらすじ
アプリ制作で「億万長者」を夢見た（そして夢破れた）筆者は、とりあえず当散歩ブログと相性ぴったりの 「地図アプリ」制作に挑戦することに。
「ChatGPT」に質問したところ、どうやら「React + Leaflet」の組み合わせで作るのが最適とのこと。
そして、いざ制作を始めるために「Node.js」なるものをダウンロードし、さらに「ターミナル」とやらの操作にまで足を踏み入れることになったのですが、この記事を書いている今すでに前回学んだことをさっぱり覚えていないのでした！！
果たして地図アプリは完成するのか！？
Node.jsのインストール
とりあえず「ChatGPT」との以前のやりとりを遡りながら作っていきます。
まず「Node.js」をインストールするところからです。
明日「Node.js」って何だ？
Node.jsとは？
本来、JavaScriptはブラウザの中でしか動かせない言語です。
それを パソコン本体（サーバー環境）でも動かせるようにした仕組み が「Node.js」です。
イメージとしては…
- 「React（JavaScriptで作るアプリのフレームワーク）」＝ ゲームソフト
- 「Node.js」＝ ゲーム機本体
Reactが手元にあっても、Node.jsがなければ実行できないわけです。
早速、「Node.js」公式サイトへ。
明日インストールするにしても、「LTS版」と「最新版」があるぞ？
インストールには、「LTS版」か「最新版」かが選べます。
- LTS版（Long Term Support） … 長期的に安定サポートされるバージョン。初心者や実開発向き。
- 最新版 … 新機能がいち早く試せるが、バグや不具合がある可能性もある。
今回は安定性重視で 「LTS版」を使います。
そしてインストーラーを開いてみると・・・。
明日「npmもインストールする」・・・？
インストーラーのチェックボックスに「npmもインストールする」と表示されています。
「npm（Node Package Manager）」 とは、Node.jsに付属している「パッケージ管理ツール」のこと。
これを使えば、世界中の開発者が作った便利なライブラリを簡単に追加できます。
ゲームで例えると…
- 「Node.js」＝ ゲーム機本体
- 「npm」＝ ゲームソフトが購入できるeショップ
Switchがあっても、ストアがなければゲームの追加ができません。
もちろん 一緒にインストール しておきます。
ターミナルを開く
いよいよ、あの黒いウィンドウ（ターミナル）を使う時が来ました！
あの黒いウィンドウを触って失敗すると、パソコンが壊れそうで怖いんだよな・・・。
しかし、アプリ制作を始めると決めた以上ビビってばかりはいられません。
作業を進めます！
「ChatGPT」によると、あの黒いウィンドウには「PowerShell と コマンドプロンプト」の2つがあり
2種類あるのか・・・
こうなると、否応なしに湧き上がる疑問が1つ。
明日どっちがええねん！
どちらを選ぶべき？
- コマンドプロンプト：昔からある従来型のコマンド操作ツール
- PowerShell：その後に登場した、より高機能な標準ツール
現在ではPowerShellの利用が主流となっているそうです。
というわけで、今回の制作ではPowerShellを使って進めていくことにします！
さて、ChatGPTに教えてもらった手順に従って、いよいよプログラミングを始めていきます。
まずは例の黒いウィンドウ（PowerShell）に、下記のコマンドをコピペ。
npm create vite@latest my-map-app -- --template reactよし、「Enter」を押して実行！！
ポチッ！！
このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことが できません。ギャース！！
どうしてこう、スムーズに行かんのだ！！
ひとつ進もうとすると、すぐ壁が立ちはだかる！！
明日こんなん出てるぞ！
どないなっとんねんChatGPT！！
作業が思い通りに進まないイライラで、ChatGPTへの質問もどんどん乱暴になっていきます。
どうやらPowerShellには、危険なスクリプトの実行を防ぐための制限が初期設定でかかっていて、今回のnpmコマンドがその網に引っかかった模様。
ChatGPTから「制限を一時的に緩和する方法」を教えてもらい、ターミナルが予想外の挙動をするたびに追加で質問しながら、なんとか手順を進めます。
無事に規定緩和が完了したので、さっそく先ほどのコマンドをコピペして実行！
npm create vite@latest my-map-app -- --template reactこれで「my-map-app」というフォルダが自動的に作成されます。
続いて、ターミナル上でそのフォルダに移動。
cd my-map-app次にこちらを入力して、必要なnpmパッケージをインストール！
npm installインストールが終わったら、いよいよ起動！！
npm run dev➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help・・・・・・で？🤔
ターミナルは上記の表示のまま、操作を受け付けなくなりました。
しかしChatGPTに聞いてみると、
「ここでの操作は一旦終わり。表示されたURLにブラウザでアクセスせよ」
とのことでした。
なおこのターミナルを閉じるとサーバーがストップしてしまうので、一旦このまま開いておきます。
地図アプリの表示へ。
URLへ移動すると、下記の画面になりました。
明日なんか、いっちょ前にプログラマーやってる気がしてきた！
先ほどのターミナルは何も入力できないので、新しくターミナルを開き、「my-map-app」フォルダへ移動。
そこで下記を実行して、Leaflet関連のライブラリをインストールします。
npm install react-leaflet leaflet次に、今度はターミナルではなくパソコン上で直接「my-map-app」フォルダを開きます。
その中の「src」フォルダにある「main.jsx」をメモ帳で開き、以下を追記して保存。
import 'leaflet/dist/leaflet.css';さらに「App.jsx」もメモ帳で開き、下記コードをコピペ！
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
function App() {
return (
<div style={{ height: "100vh", width: "100%" }}>
<MapContainer center={[34.78, 135.47]} zoom={13} style={{ height: "100%", width: "100%" }}>
<TileLayer
attribution='© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[34.78, 135.47]}>
<Popup>
ここが豊中市！
</Popup>
</Marker>
</MapContainer>
</div>
);
}
export default App;ここまでできたら、先ほどの止まったままのターミナルは一旦閉じます。
そして再度新しくターミナルを開き、「my-map-app」フォルダに移動して下記を実行。
npm run devそして表示されたURLに移動すると、地図が・・・
出ない！！
明日グオォォォォ！！
ガシャン！！バッターン！！（怒りのあまり暴れている音）
地図が表示されないということは、どこかで何かを間違えているということ。
そりゃそうだ。
これはChatGPTに説明して貰わなければなりませんな。
この後の工程については、正直ブログにすべてを書ききれないほどのやり取りをしました。
とは言え、自分がやっていることは「状況を逐一ChatGPTに報告する」だけですが・・・。
それにしても報告に対して毎回的確な指示を返してくるChatGPTはすごいな。
まるで、会社でPCが動かなくなったときに助けてくれる頼れるエンジニアみたいだ。
言われるがまま、ブラウザの「開発者ツール（F12で出るやつ）」に表示された内容をそのまま報告したり、画面の状況を報告したり、回答をもとに「jsx」のコードを書き換えたりしているうちに・・・
でたぁ！！
地図が表示されました！！
明日グオォォォォ！！
ガシャン！！バッターン！！（喜びのあまり暴れている音）
まとめ
ここまでが、地図アプリで実際に地図が表示されるまでの奮闘記でした……。
何度もトラブルに見舞われましたが、ChatGPTと二人三脚で挑戦した結果、ついに地図アプリの土台が完成！
これからはスポットにピンを立てたり、自分好みのデザインに変えたりと、カスタマイズを楽しんでいきたいと思います。
そして将来的にはスマホアプリ化して、皆さんにも気軽に使っていただけるようにするのが目標です。
以上、最後までお読みいただきありがとうございました！
コメント