この章で作るアプリを確認しよう

この章では、おすすめスポット共有アプリ を作りながら、Next.js の基本を学びます。

難しい言葉は後回しで大丈夫です。まずは、どんなアプリを作るのか、何ができるようになるのか を先に見て、全体像をつかみましょう。

この章で作るアプリの全体像

作るのは、おすすめの場所を投稿して、みんなで見られるアプリ です。

たとえば、こんな場所を登録できます。

勉強しやすい図書館
落ち着くカフェ
学食の穴場席
休憩しやすいスペース
イベント会場のおすすめ場所このアプリでは、次のことができます。
スポットを投稿する
投稿されたスポットを一覧で見る
1件ずつ詳しく見る
キーワードで探す
気になったものをお気に入りに入れるつまり、「作る」「見る」「探す」「保存する」 ができるアプリです。

まずは完成イメージをつかもう

この章で目指す完成形は、次のような流れです。

1. 投稿する

自分で見つけたおすすめスポットを入力します。

入力する内容は、このくらいです。

スポット名
説明文
カテゴリ
場所
画像URL

2. 一覧で見る

投稿した内容が、カードのように並んで表示されます。

どんなスポットがあるのか、ひと目でわかります。

3. 詳細を見る

一覧の中から気になるものを押すと、詳しいページが開きます。

説明文や場所などをしっかり確認できます。

4. 検索する

「図書館」「カフェ」などの言葉で探せます。

カテゴリで絞ることもできます。

5. お気に入りに入れる

気になったスポットを保存できます。

あとで見返したいときに便利です。

この章のゴール

この章のゴールは、次の3つです。

ゴール1

完成するアプリの流れを説明できるようになる

まだコードが全部わからなくても大丈夫です。

まずは、「このアプリは何をするものか」を自分の言葉で言えれば十分です。

ゴール2

画面がどうつながっているか理解する

このアプリには、いくつか画面があります。

トップページ
一覧ページ
詳細ページ
投稿ページ

それぞれがどう移動するのかを理解します。

ゴール3

このあと学ぶ内容の意味がわかる

今後出てくる useState や Link やフォーム処理も、

「この機能を作るために必要なんだな」と先にわかると、とても理解しやすくなります。

このアプリの画面の流れ

文字だけだとわかりにくいので、流れをシンプルに見るとこうなります。

トップページ
   ↓
スポット一覧ページ
   ↓
スポット詳細ページ

トップページ
   ↓
新規投稿ページ
   ↓
スポット詳細ページ

スポット一覧ページ
   ↓
検索・カテゴリ絞り込み
   ↓
気になるスポットを選ぶ
   ↓
お気に入りに追加

ポイントは、画面がバラバラではなく、つながっている ことです。

この「つながり」を作るのが、Webアプリ開発の大切な考え方です。

この章で身につく技術

この章では、いきなり難しいことを全部やりません。

まずは、最低限これだけ を身につけます。

1. ページを分ける考え方

Next.js では、ページごとにファイルを分けて作ります。

これによって、「一覧ページ」「投稿ページ」などを分けられます。

2. 画面を移動する方法

ボタンやリンクを押したときに、別のページへ移動します。

これは Web アプリではとてもよく使います。

3. 入力された内容を扱う方法

フォームに入力した文字を読み取って、画面に反映します。

投稿機能の基本です。

4. 一時的にデータを保存する方法

まずは localStorage を使って、ブラウザの中にデータを保存します。

本格的なデータベースは次の章以降で学べば大丈夫です。

5. 検索やお気に入りの考え方

一覧から探したり、あとで見返すために保存したりする機能を作ります。

これで、ただ表示するだけではない「使えるアプリ」に近づきます。

初心者の方向け：この章で必要なもの

この章を進めるために必要なのは、次の3つだけです。

Node.js
VS Code
ターミナル

難しそうに見えますが、やることは多くありません。

最初に一度だけ準備すれば進められます。

初期設定

ここは、ひとりでも進められるように、かなり細かく書きます。

手順1 Node.js を入れる

Node.js をインストールしてください。

入れ終わったら、ターミナルで次を入力します。

node -v
npm -v

数字が表示されれば準備完了です。

手順2 プロジェクトを作る

ターミナルで次を入力します。

npx create-next-app@latest spot-share-app

聞かれたら、次のように進めれば大丈夫です。

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
src/ directory: No
App Router: Yes
Turbopack: Yes
Import alias (@/*): Yes

終わったら、フォルダに移動します。

cd spot-share-app

手順3 開発サーバーを起動する

npm run dev

そのあと、ブラウザで次を開きます。

http://localhost:3000

画面が出れば成功です。

手順4 フォルダの意味をざっくり知る

最初は全部わからなくて大丈夫です。

この章でよく使うのは主にここです。

app ページを作る場所
components 部品を作る場所
lib データや処理をまとめる場所これだけ覚えておけば、今は十分です。

今はまだ覚えなくてよいこと

初心者の方がつまずきやすいので、先に言っておきます。

この章では、まだ次のことは深くわからなくて大丈夫です。

データベース
ログイン機能
サーバーとの通信
本格的なデプロイ
複雑な状態管理まずは、画面が動く楽しさ をつかむことが先です。

この章を学ぶと何がうれしいか

この章を終えると、ただ文章を読むだけではなく、

自分で小さなWebアプリを組み立てる感覚 がつかめます。

とくに大きいのは、次の3つです。

ページがつながる感覚がわかる
入力した内容が画面に反映される感覚がわかる
「使える形」までアプリを持っていく流れがわかる

ここがわかると、学習が一気に面白くなります。

ここまでのまとめ

この章では、おすすめスポット共有アプリ を作ります。

このアプリでは、投稿・一覧・詳細・検索・お気に入りができます。

そして、この章で大切なのは、コードを丸暗記することではありません。

アプリ全体の流れを先に理解すること です。

まずは、次の1文が言えれば十分です。

この章では、おすすめスポットを投稿して、一覧で見て、検索して、お気に入りに入れられるアプリを作る。

これがわかれば、スタートとしてはとても良い状態です。

次に進む前のチェック

次へ進む前に、次の3つを確認してください。

Node.js が入っている
create-next-app でプロジェクトを作れた
npm run dev で画面が開いた

ここまでできたら、この章を進める準備は完了です。

練習問題

問題1

この章で作るアプリでは、どんなことができますか。3つ書いてみましょう。

問題2

この章で最初に使う保存方法は何ですか。

問題3

Next.js の中で、ページを作る場所は主にどのフォルダですか。

回答

問題1の回答

例

スポットを投稿する
一覧で見る
詳細を見る
検索する
お気に入りに入れる

問題2の回答

localStorage です。

問題3の回答

app フォルダです。

トップページ ↓ スポット一覧ページ ↓ スポット詳細ページトップページ ↓ 新規投稿ページ ↓ スポット詳細ページスポット一覧ページ ↓ 検索・カテゴリ絞り込み ↓ 気になるスポットを選ぶ ↓ お気に入りに追加