Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – 画像

React Next.js
スポンサーリンク

この課題のねらい

この演習は、「Next.js らしい画像の扱い方＝Imageコンポーネント」を体験するのがテーマです。
ふつうの <img> ではなく next/image を使うことで、

高速表示（自動で最適サイズに変換・遅延読み込み）
レスポンシブ対応（画面幅に応じたサイズ出し分け）

といった“いいこと”を、ほぼノーコストで手に入れられます。

必須課題：Imageコンポーネントで画像表示

画像ファイルの置き場所を理解する

Next.js では、public フォルダに置いたファイルは
/ から始まるパスでそのまま参照できます。

例として、
public/images/logo.png
というファイルを置いた場合、URL は

/images/logo.png

になります。

このファイルを Image コンポーネントで表示する、というのが今回の必須課題です。

Imageコンポーネントの基本的な使い方

まず、ページコンポーネントで next/image を import します。

// app/page.tsx
import Image from "next/image";

export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>画像表示の練習</h1>
      <p>Next.js の Image コンポーネントを使って画像を表示します。</p>

      <div style={{ marginTop: "16px" }}>
        <Image
          src="/images/logo.png"
          alt="Next.js × React 入門ロゴ"
          width={200}
          height={200}
        />
      </div>
    </main>
  );
}
TSX

ここで大事なポイントを整理します。

src
/images/logo.png のように、public 配下からのパスを書く。
http://〜 の外部URLを書く場合は、別途設定（画像ドメイン許可）が必要ですが、まずはローカルからでOK。

alt
画像が表示できないときやスクリーンリーダー向けの説明文。
「何の画像か」を日本語でちゃんと書いておく習慣をつけておくと良いです。

width / height
画像の表示サイズ（ピクセル）。
元画像のアスペクト比（縦横比）に合わせた数字にしておくのが基本です。

Imageコンポーネントを使うと、Next.jsが裏側で、

適切に最適化された画像ファイルを返す
必要に応じて遅延読み込みしてくれる

など、パフォーマンス面をよしなにやってくれます。

挑戦課題：画像サイズをレスポンシブ対応

「画面幅に応じてサイズが変わる」イメージ

レスポンシブ対応というのは、

スマホでは横幅いっぱい
PCではコンテンツ幅の中で適度なサイズ

といった具合に、「画面の広さに応じて画像サイズが変わる」ことです。

Imageコンポーネントでは、
主に 2 つのやり方でレスポンシブを実現できます。

width/heightとCSS（max-width: 100%）を組み合わせる
fill と sizes プロパティを使って、より本格的にやる

初心者向けには、まず①から押さえ、余裕があれば②へ進むのがちょうどいいです。

① width/height＋CSSでシンプルにレスポンシブ

一番簡単なパターンは、「表示上は横幅を100%にして、縦横比は保持する」やり方です。

// app/page.tsx
import Image from "next/image";

export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>レスポンシブ画像の練習</h1>

      <div
        style={{
          marginTop: "16px",
          maxWidth: "400px",
        }}
      >
        <Image
          src="/images/logo.png"
          alt="Next.js × React 入門ロゴ"
          width={400}
          height={400}
          style={{ width: "100%", height: "auto" }}
        />
      </div>
    </main>
  );
}
TSX

ポイントは次の通りです。

width と height は「元の基準サイズ」として指定（アスペクト比のために必要）。
style で width: "100%" にし、親コンテナの幅に合わせて広がるようにしている。
height: “auto” にすることで、縦横比を保ったまま高さが決まる。
親の div に maxWidth: "400px" を指定して、「PCでは最大400pxまで、スマホでは画面幅に合わせて縮む」ようにしている。

これだけで、

PCでは最大400px
スマホなど狭い画面では、幅いっぱいに縮む

という基本的なレスポンシブが実現できます。

② fill + sizesを使った本格派レスポンシブ（余裕があれば）

もう一歩進めると、fill と sizes を使って「画面幅ごとに最適な画像サイズを配信する」こともできます。

やることのイメージはこうです。

親要素で「比率固定の箱」を作る
Imageに fill を指定して、その箱いっぱいに画像を敷き詰める
sizes で「画面幅が◯◯px以下なら幅は◯◯pxくらい」とヒントを出す

例として、横長のヘッダー画像風レイアウトを作ってみます。

// app/page.tsx
import Image from "next/image";

export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>レスポンシブ画像（fill）の例</h1>

      <div
        style={{
          position: "relative",
          width: "100%",
          maxWidth: "800px",
          aspectRatio: "16 / 9",
          marginTop: "16px",
          overflow: "hidden",
          borderRadius: "12px",
        }}
      >
        <Image
          src="/images/hero.png"
          alt="講座のイメージ画像"
          fill
          sizes="(max-width: 600px) 100vw, 800px"
          style={{ objectFit: "cover" }}
        />
      </div>
    </main>
  );
}
TSX

ここは少し高度なので、重要なところだけ押さえます。

親の div

position: “relative” にして、子（Image）の fill の基準にする。
aspectRatio: “16 / 9” で「横:縦=16:9 の箱」にしている。
width: “100%”, maxWidth: “800px” で、PCでは最大幅800px、スマホでは画面幅にフィット。

Image側

fill を付けると、width/heightではなく「親の箱いっぱい」に広がる。
objectFit: "cover" で、箱いっぱいに切り取る（上下左右が少しトリミングされても良い）。
sizes で、「600px以下の画面では幅は 100vw（画面幅）、それ以外は 800pxくらい」とブラウザにヒントを出す。

ブラウザはこの sizes を見て、
「この画面幅ならこのぐらいのサイズの画像を取ってくればいいな」と判断して、
無駄に大きな画像を取らないようにしてくれます。

最初は意味がふわっとしていてOKです。
「親の箱 × fill × sizes で、本格レスポンシブができる」くらいにイメージだけ掴んでおきましょう。

まとめ：Imageコンポーネントでつかんでほしいこと

この課題で押さえてほしいポイントを整理します。

public フォルダに画像を置き、/images/◯◯.png のようなパスで src に指定できる。
Next.js の Image コンポーネントは、width/height を指定して使うのが基本で、最適化や遅延読み込みを自動でやってくれる。
レスポンシブにしたい場合、まずは width/height ＋ style={{ width: "100%", height: "auto" }} から始めると分かりやすい。
余裕が出てきたら、fill ＋ sizes で「親の枠にフィットさせる」パターンにも挑戦できる。

ここが理解できると、

講座カードにサムネイル画像を表示する
ヘッダーに横長のバナー画像を表示する
プロフィールページでユーザーアイコンをレスポンシブに表示する

といった“画像まわりの UI”が、一気に作りやすくなります。

スポンサーリンク
タイトルとURLをコピーしました