完成イメージを知る：どんな画面が必要か整理しよう
はじめに
この節では、コードをたくさん書く前に、アプリにどんな画面が必要なのか を整理します。
ここを先に理解しておくと、あとで「なぜこのファイルを作るのか」「なぜこの画面に移動するのか」がすごくわかりやすくなります。
まだ全部わからなくて大丈夫です。
まずは、このアプリには5つの画面がある と覚えれば十分です。
この節でわかること
この節で見るのは、次の内容です。
- ホーム画面
- スポット一覧画面
- スポット詳細画面
- 新規投稿画面
- お気に入り画面
- 画面同士がどうつながるか つまり、アプリ全体の地図 を先に見るイメージです。
先に全体像をひとことで言うと
このアプリは、おすすめの場所を投稿して、一覧で見て、気になるものを詳しく見て、お気に入りに保存できるアプリ です。
流れはとてもシンプルです。
- ホーム画面から始める
- 一覧を見る
- 詳細を見る
- 新しく投稿する
- 気になったものをお気に入りに入れる
この流れがわかるだけで、この章はかなり進めやすくなります。
1. ホーム画面
何をする画面か
ホーム画面は、アプリの入口 です。
最初に開く画面で、「このアプリで何ができるのか」をユーザーに伝えます。
ここでは、たとえば次のようなものを表示します。
- アプリ名
- 簡単な説明
- 「スポット一覧を見る」ボタン
- 「新しく投稿する」ボタン
- 人気スポットの一部
役割をひとことで言うと
最初の案内役 です。
なぜ必要か
いきなり一覧だけ出すよりも、最初に入口があると使いやすくなります。
初心者向けアプリでも、まず「ここから始めればいい」と見えることが大切です。
この画面で使う主な要素
- 見出し
- 説明文
- ボタン
- リンク
2. スポット一覧画面
何をする画面か
この画面では、投稿されたスポットをまとめて見られます。
たとえば、こんな情報が並びます。
- スポットの画像
- スポット名
- カテゴリ
- 場所
- 簡単な説明
カードのように並んで表示されると、とても見やすいです。
役割をひとことで言うと
みんなの投稿を見る画面 です。
なぜ必要か
投稿した情報は、一覧で見られないと使いにくいです。
アプリでは「たくさんのデータの中から選ぶ」場面がとても多いので、一覧画面はかなり重要です。
この画面でできること
- 全体をざっと見る
- 気になるものを探す
- 詳細画面へ移動する
- 検索や絞り込みを使う
3. スポット詳細画面
何をする画面か
一覧に出ている1件を押したときに、そのスポットを詳しく見る画面 です。
ここでは、たとえば次の内容を表示します。
- 大きい画像
- スポット名
- カテゴリ
- 場所
- 説明文
- 投稿日時
- お気に入りボタン
- 編集ボタン
- 削除ボタン
役割をひとことで言うと
1件をしっかり読む画面 です。
なぜ必要か
一覧画面だけだと、情報は短くなりがちです。
詳しい説明を見たいときのために、詳細画面が必要です。
この画面でできること
- 内容をしっかり確認する
- お気に入りに入れる
- 編集する
- 削除する
4. 新規投稿画面
何をする画面か
ここは、新しいスポットを登録するための画面 です。
入力する項目は、最初はこれだけで十分です。
- スポット名
- 説明文
- カテゴリ
- 場所
- 画像URL
役割をひとことで言うと
新しい情報を追加する画面 です。
なぜ必要か
見るだけのアプリではなく、使う人が内容を増やせるようにするためです。
この「入力して保存する」という流れは、Webアプリの基礎になります。
この画面で学べること
- 入力フォームの作り方
- ボタンを押したときの処理
- 入力内容の保存
- バリデーションの基本
5. お気に入り画面
何をする画面か
ここでは、お気に入りに入れたスポットだけをまとめて見ます。
「あとで見返したい」「また確認したい」というときに便利です。
役割をひとことで言うと
自分用に保存した一覧を見る画面 です。
なぜ必要か
アプリは、ただ表示するだけだと少し弱いです。
「自分用に残せる」機能があると、ぐっと使いやすくなります。
この画面でできること
- 保存したスポットだけを見る
- 詳細画面へ移動する
- 不要ならお気に入り解除する
6. 画面同士のつながりを整理する
ここがとても大事です。
アプリは、画面が1枚だけではありません。画面と画面がつながっている から便利になります。
流れをシンプルにすると、こうです。
ホーム画面
├─ 一覧を見る → スポット一覧画面
└─ 投稿する → 新規投稿画面
スポット一覧画面
├─ 1件選ぶ → スポット詳細画面
├─ 検索する
├─ カテゴリで絞る
└─ お気に入りだけ見る → お気に入り画面
スポット詳細画面
├─ お気に入りに追加 → お気に入り画面に反映
├─ 編集する → 編集画面
└─ 一覧へ戻る → スポット一覧画面
新規投稿画面
└─ 投稿する → スポット詳細画面 または 一覧画面
お気に入り画面
└─ 詳細を見る → スポット詳細画面
画面のつながりを覚えるコツ
全部を暗記しなくても大丈夫です。
まずは、次の2つだけ意識してください。
コツ1
一覧は入口になりやすい
たくさんのデータを見る場所なので、そこから詳細へ進むことが多いです。
コツ2
詳細は分かれ道になりやすい
詳しく見たあとに、
- お気に入りに入れる
- 編集する
- 戻る という動きが生まれます。
7. 初期設定
ここから先の節で実際に作り始めるので、最低限の初期設定もここにまとめておきます。
すでに前の節で終わっている場合は、確認だけで大丈夫です。
1. Node.js を確認する
ターミナルで次を入力します。
node -v
npm -v
数字が表示されればOKです。
2. プロジェクトを作る
まだ作っていない場合は、次を実行します。
npx create-next-app@latest spot-share-app
おすすめの選択は以下です。
- TypeScript: Yes
- ESLint: Yes
- Tailwind CSS: Yes
- App Router: Yes
- Import alias: Yes 作れたら移動します。
cd spot-share-app
3. 開発サーバーを起動する
npm run dev
ブラウザで次を開きます。
http://localhost:3000
表示されたら準備完了です。
4. 今回よく使うフォルダだけ覚える
今回は主にこの3つを使います。
app画面を作る場所componentsパーツを作る場所libデータや処理をまとめる場所 これだけで十分です。
8. 今の段階で理解できていれば十分なこと
ここでは、次のように整理できればOKです。
- ホーム画面は入口
- 一覧画面はまとめて見る場所
- 詳細画面は1件を詳しく見る場所
- 新規投稿画面は新しい情報を入れる場所
- お気に入り画面は保存したものを見る場所 つまり、それぞれの画面の役割が言えること が大事です。
9. よくあるつまずき
「画面が多くて覚えられない」
大丈夫です。最初は覚えるというより、役割の違いを感じる だけで十分です。
「一覧と詳細の違いがピンとこない」
一覧は短くたくさん見る場所、詳細は1件を深く見る場所です。
「お気に入り画面は本当に必要？」
最初はなくても作れます。
ただ、アプリらしさが一気に出るので、学習用として入れる価値があります。
10. ここまでのまとめ
このアプリには、主に5つの画面があります。
- ホーム画面
- スポット一覧画面
- スポット詳細画面
- 新規投稿画面
- お気に入り画面 そして大切なのは、画面を別々に作ること ではなく、画面同士をつなげて、使いやすい流れを作ること です。
この考え方がわかると、これから作るページの意味がとても理解しやすくなります。
練習問題
問題1
このアプリで必要な5つの画面を書いてみましょう。
問題2
一覧画面と詳細画面の違いを、自分の言葉で書いてみましょう。
問題3
新規投稿画面では、どんな情報を入力しますか。3つ以上書いてみましょう。
回答
問題1の回答
- ホーム画面
- スポット一覧画面
- スポット詳細画面
- 新規投稿画面
- お気に入り画面
問題2の回答
一覧画面は、たくさんのスポットをまとめて見る画面です。
詳細画面は、その中の1件を詳しく見る画面です。
問題3の回答
例
- スポット名
- 説明文
- カテゴリ
- 場所
- 画像URL
次に進む前のチェック
次へ進む前に、次の3つを確認してください。
- 5つの画面の名前が言える
- それぞれの役割がだいたいわかる
- 画面同士がつながっているイメージを持てた ここまでできれば十分です。
次は、実際に画面を作る準備に入っていけます。