Lecture 16技術理解 — 第 3 章
Lecture 16WebならNext.js、モバイルならReact Native
作りたいものに応じて、使う技術が変わることを理解します。
読了の目安 約 6 分図解 準備中難易度
作りたいものが決まると、次に出てくる悩みが 「何で作るか」 です。 ブラウザでURLを開いて使うなら Next.js、 スマホにインストールして使うなら React Native。 どちらも同じ React という考え方の上に立っているので、本質は地続きです。
このレクチャーでは、Web AppとMobile Appの違い、それぞれの得意分野、 そしてこの講座でNext.jsから始める理由を整理します。
1作りたいものに応じて道具が変わる
ブラウザで開くアプリと、スマホにインストールするアプリは、使う道具（フレームワーク）が違います。 ただし、両方とも「Reactで部品を組む」という考え方を共有しているので、 一方を学ぶともう一方への入口がぐっと近くなります。
- Next.js：Reactをベースに、ブラウザで動くWeb Appを作るためのフレームワーク。
- React Native：Reactの考え方で、iOS／Androidのアプリを作るための仕組み。
2Next.js（Web App）の特徴
Next.jsで作ると、出来上がるのはブラウザで開けるWeb Appです。 ユーザーが見るまでの摩擦が とても少ない のが強みです。
- URLで使える：リンクを送るだけで他人にも試してもらえる。インストール不要。
- 公開が早い：Vercelに上げれば、その日のうちに世界からアクセスできる。
- 検索で見つかる：Googleの検索結果にも出てくる可能性がある。
- 修正がすぐ反映される：直してpushすれば、ユーザーは次回アクセスから新版を使える。
3React Native（モバイル）の特徴
React Nativeで作ると、App StoreやGoogle Playから配信できるスマホにインストールするアプリ になります。 ホーム画面にアイコンが並ぶ、あの形です。
- スマホ機能が使いやすい：カメラ、プッシュ通知、位置情報、Bluetoothなどに直接アクセスしやすい。
- オフラインでも動かせる：通信なしの状態でも一定の機能を使える設計にしやすい。
- ストア審査がある：公開までに審査の時間がかかり、修正の反映にも審査が要る。
- 配布手続きが必要：開発者登録、ストア掲載、料金設定など、Webより手続きが多い。
図解 準備中（生成プロンプトは下記）
生成後は public/lectures/lecture-16-nextjs-react-native/web-vs-mobile.png に差し替え予定
image · 1400 × 900 (14:9)
4この講座でNext.jsから始める理由
どちらから学んでもよいのですが、最初の体験はWebが圧倒的にラク です。 理由はとてもシンプルです。
- URLで共有しやすい：作ったものを家族や友人にすぐ見せられる。
- 公開までの流れが短い：審査がなく、その日のうちに世界に出せる。
- 修正サイクルが早い：直して数分後にはユーザーが新しい版を触れる。
- 学習資料が多い：Webの情報量がモバイルより多く、AIも当て込みやすい。
Tip
迷ったらWebから
「最終的にスマホアプリを出したい」場合でも、まずはWebで雛形を作る のが効率的です。 URLで共有してフィードバックを集め、コア体験が固まってからモバイルへ展開する、が 個人開発でもスタートアップでも使える定番ルートです。
やってみよう · Exercise
自分のアイデアはWeb向きかモバイル向きか
作りたいアイデアを 1〜2行 でメモし、Webとモバイルのどちらが向くか判断してみます。 迷ったらCodexに相談すれば、判断軸を整理してくれます。
- 自分のアイデアを「誰のためのアプリか」「どこで使うか」「スマホ機能（カメラ・通知）が必須か」の3点でメモする。
- Codexに「このアイデアならWebとモバイルどちらが向いていますか？理由も初心者向けに添えてください」と相談する。
- 返答を読み、まずはWebで作る場合の最小構成を一緒に提案してもらう。
5理解確認チェックリスト
- Next.jsはWeb App向き、React Nativeはモバイル向きだと説明できる。
- 両者ともReactの考え方を共有していると理解している。
- この講座でNext.jsから始める理由を、自分の言葉で言える。
End of Lecture 16