明日です。
先日のブログ記事でもお伝えした通り、「地図アプリ制作」に挑戦することにしました！
この記事は、その初日レポート です。
アプリ制作を始めたきっかけ
「Chat GPTを使って1日1アプリを100日続けた女子大生が月収100万円に！」という記事を見かけ、「いいね！！自分もマネして億万長者だ！！」と一念発起！！
というわけで、早速「Chat GPT」に相談！！
明日俺もマネして一攫千金を目指したい！！
バズった事例は「かなりレアケース」です。
ニュースになる＝例外的な成功。
実際には「毎日作る → ポートフォリオになる → 就職/副業に有利になる → 収入アップ」くらいの方が現実的です。
なので「100日で月収100万」ではなく、「100日でスキルと実績を積んで副業や転職の足がかりにする」ことを狙う方が安全。
ですよね～・・・。
まず1日1アプリそのものが無理ゲーですし・・・。
どんなアプリを作るか、選定。
アプリといってもジャンルはさまざま。
生活に役立つもの、ゲーム、便利ツール・・・・・・・選択肢は無限大。
その中で、今の自分に一番しっくりくるもとと言えば、「地図アプリ」！
散歩をメインコンテンツにしているこのブログとの相性も抜群です。
今のところの構想は、こんな感じ。
- 「ぷらっと豊中」での散歩記録＋観光ガイド。
- 見つけたスポットを地図にピン。
- 写真と解説を表示。
- デザインはRPG風。
- PC・スマホ対応 → ゆくゆくはアプリ化。
この条件をChat GPTに投げたところ、「React + Leaflet」なるものが制作ツールとして最善とのこと。
明日「React + Leaflet」って何だ？
Reactとは？
- JavaScriptのUIライブラリ（Facebook製）。
- ボタンやカードなどを「コンポーネント」という部品で作って組み合わせる。
- スマホでもPCでも使えるUIを作りやすい。
- Leaflet単体でも地図は動かせるけど、Reactを使うとアプリ全体の構造を整理しやすい。
👉 「Webアプリを効率的に作るための箱組み」と思えばOK。
明日UIライブラリって何だ？
「UIライブラリ」とは、ボタンやフォームなどの「UIコンポーネント（画面上の部品）」があらかじめデザイン・開発された、再利用可能なコードの集まりです。
開発者はUIライブラリを使うことで、UIをゼロから作成する手間を省き、開発期間の短縮、品質の向上、そしてアプリケーション全体で一貫した外観と機能の維持が可能です。
Leafletとは？
- オープンソースの地図表示ライブラリ（JavaScript製）
- Google Maps APIみたいに、地図を表示してピンや線を描ける。
- 軽量で使いやすい。
- OpenStreetMapなど無料の地図データを利用できる。
👉 「Webページに地図を埋め込んで操作できるツール」だと思えばOK。
React + Leafletとは？
LeafletをそのままReactで使うのは少し面倒なので、
「react-leaflet」というラッパーライブラリ が用意されています。
これを使えば、地図を React の「コンポーネント」として扱えるようになります。
明日ラッパーライブラリって何だ？
「ラッパーライブラリ」とは、ざっくり言うと 「難しい機能や複雑な処理を、より簡単な形で使えるように包み直したライブラリ」 のことです。
明日そもそも、ライブラリって何？
プログラミングにおける ライブラリ とは、「よく使う機能や便利な処理を、あらかじめまとめて部品化したもの」 です。
開発者がゼロから全部のコードを書くのは大変なので、ライブラリを使えば既存の部品を呼び出すだけで機能を利用できます。
日常の例で説明
- 家でカレーを作るときに「ルウ」を使うと簡単。
- 小麦粉やスパイスを一から調合する必要がない。
- → ルウ = ライブラリ
- あとは野菜や肉を入れて煮込めば完成。
明日なるほど、わかりやすい！
・・・調べれば調べるほど新しい専門用語が出てくるのは、「プログラミングあるある」でしょうか。
でも、そこはさすがChat GPT先生！
質問攻めにしても根気よく答えてくれます。
関門、ターミナル登場。
先生の講義は続きます。
まずはターミナルで以下を実行して、 React プロジェクトを作成。
npm create vite@latest my-map-app -- --template react
cd my-map-app
npm installコラ、いきなりコードを出すな！
そもそも「ターミナル」って何やねん！
ターミナルとは？
- コンピュータに文字で命令を送るアプリのこと。
- Windowsでいうと「コマンドプロンプト」や「PowerShell」。
- MacやLinuxでは「ターミナル」というアプリが標準で入っています。
明日出た！
「コマンドプロンプト」！
あの黒いウィンドウで直接何かを入力する、難しそうなヤツですよ！
つまり「キーボードで操作する窓口」で、ここから プログラムの作成や実行、ライブラリのインストール をします。
（ゲームでいうと「裏技コマンドを入力する画面」みたいな感じです🎮）
どこから開くの？
Windowsの場合
- スタートメニューを開く
- 「PowerShell」や「ターミナル」と検索
- 出てきたアプリをクリック
（Windows 11なら「Windows Terminal」が標準で入ってます）
Macの場合
- Finder を開く
- アプリケーション > ユーティリティ > ターミナル
- クリックで起動
👉 開くと黒（または青）っぽい画面に文字が出てくるはずです。
ターミナルで何をするの？
例：新しくReactプロジェクトを作るとき
- フォルダを作る
- そのフォルダに入る
- コマンドを打って開発環境をセットアップ
という流れです。
例えばこんな感じ👇
# Reactプロジェクトを作成
npm create vite@latest my-map-app -- --template react
# フォルダに移動
cd my-map-app
# 必要なライブラリをインストール
npm install
ポイント
「npm」というのは Node.js に付属している パッケージ管理ツール。
- これで「Reactを入れる」「Leafletを入れる」といった作業ができます。
- だからまずは「 Node.js」 をパソコンに入れて、ターミナルを開けるようにするのが第一歩です。
明日Node.js をパソコンに入れて・・・だと！？
何かをインストールしなければならないのか！！
本日はここまで。
今日は「地図アプリ制作」の構想を固め、「 React + Leaflet」で制作 という道筋が見えてきました。
ただし、開発を始めるには「 Node.js」 をインストールしなければならないらしい……。
明日Node.js って何だ？
では次回は、「 Node.js」 をインストールするところからスタートです！
本日は最後までお付き合いいただき、ありがとうございました！
コメント