【JavaScript】画像表示の方法を初心者向けにわかりやすく解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptでウェブページに画像を表示する方法は、思っている以上に奥が深いかもしれません。単純にHTMLに画像タグを用意するだけならHTMLで完結しそうですが、実はJavaScript 画像表示の場面では、イベントを契機に画像を切り替えたり、ユーザーの操作によって画像を動的に変更したりするなど、いろいろな工夫をするケースがあります。

もしこれからプログラミングを始めたばかりの方であれば、「画像を表示するなんてHTMLに書けばいいだけでは？」と思うかもしれませんね。しかしJavaScriptを使うと、画像のソースを切り替えたり、非同期的に読み込んで処理したり、アニメーションを付けたり、といった柔軟な操作が可能になります。このように、単なる表示にとどまらず、いろいろな使い方がある点がJavaScriptでの画像取り扱いの面白いところです。

特に、ユーザーがアップロードした画像をプレビューしたり、サムネイルを自動生成して表示するケースは、日常的に使われる機能のひとつではないでしょうか。例えばSNSやブログサービスの投稿画面で、アップロードした画像が瞬時にプレビュー表示されるような仕組みも、JavaScriptが活躍している実例のひとつです。

本記事では、JavaScript 画像表示について、初心者の皆さんにもわかりやすいように、段階的に解説していきます。最初にDOM操作の基本を理解し、実務における具体的な活用シーンを交えながら、コード例も示していきます。ぜひ一歩ずつ確実に学んでいってください。

この記事を読むとわかること

JavaScriptを使って画像を動的に表示・切り替えする方法
基本的なDOM操作と画像要素の扱い方
クリックイベントなどを用いたインタラクティブな画像表示手法
Webアプリケーションでの実際の利用例や注意点

これらを理解することで、ウェブサイトやアプリケーションの中で、よりスムーズな画像表示機能を実装しやすくなるでしょう。

JavaScriptで画像を表示するとは？

JavaScriptを利用すると、画像を単に読み込むだけでなく、動的に扱うことができます。具体的には、以下のような操作がよく行われます。

クリックなどのユーザー操作で画像を切り替える
フォームにアップロードされた画像ファイルをプレビュー表示する
スライドショーやカルーセルのように定期的に画像を変化させる

こうした操作が必要になるのは、ユーザーの行動によって画面の見え方を変えるときなどです。例えば、商品画像を複数用意しておき、サムネイルのクリックごとに大きい画像を更新するウェブページを思い浮かべてみてください。このような場面では、HTMLのimgタグをJavaScriptから操作して、src属性を差し替えます。

また、実務ではユーザーがアップロードした画像を即時に確認させたいことがよくあります。例えばプロフィール画像の変更画面で、画像ファイルを選択したらすぐにプレビューを表示する機能を見かけたことはないでしょうか。これもJavaScriptとブラウザの機能を組み合わせることで実現できます。

JavaScript 画像表示をしっかり理解すると、ユーザーにとってわかりやすいUIが作りやすくなります。例えば「画像をドラッグアンドドロップして読み込む」「選択した画像をページ内の特定位置にプレビューする」といった操作も実装しやすくなるでしょう。こうした機能は普段から利用する機会が多いため、学んでおくと便利です。

加えて、単に画像を差し替えるだけでなく、CSSと組み合わせることでアニメーションを付与するなどの表現力も高められます。特に、ユーザーが操作したタイミングで画像がスッとフェードインしながら切り替わるなどの演出をする場合は、JavaScriptとCSSアニメーションの連携が鍵となります。このように、画像表示をトリガーとして関連する技術への理解も深まりますので、まずは基本的なやり方をしっかり押さえていきましょう。

基本的なDOM操作による画像表示

HTML要素とJavaScriptの関連付け

JavaScriptで画像表示を操作するうえでは、まず「DOM(Document Object Model)」という仕組みの理解が欠かせません。 DOMとは、ブラウザがHTML文書を内部でツリー構造として管理するための仕組みです。 JavaScriptからは、DOM経由でHTMLの要素を取得し、その属性やテキストを操作できます。

具体的には、HTMLに以下のようなimg要素を用意しておきます。


<img id="myImage" src="default.jpg" alt="サンプル画像">

そしてJavaScriptでは、document.getElementByIdなどを使ってこの要素を取得します。例えば次のようなコードです。


const imageElement = document.getElementById("myImage");

このようにして取得したimageElementに対して、imageElement.src = "new.jpg";のように属性を変更すれば、画像を差し替えることができます。これは非常にシンプルですが、実務でもよく使われる基本的な手法です。

また、要素を動的に新規作成することも可能です。例えば、まだ存在していないimgタグをJavaScriptで作成して、特定の場所に挿入するような場合が考えられます。そのときは以下のようなコードになります。


const newImage = document.createElement("img");
newImage.src = "newImage.jpg";
newImage.alt = "動的に追加した画像";

// 追加先の要素を取得して appendChild する
const container = document.getElementById("imageContainer");
container.appendChild(newImage);

このコードを通じて、HTMLのdivなどに新たなimg要素が挿入され、画像が表示されます。これがDOM操作による画像生成や表示の基本的な流れです。初心者の皆さんはまず、imgタグの取得とsrc属性の変更、要素の生成・挿入の手順を覚えておくとよいでしょう。

画像要素の属性操作

画像要素には、src属性のほかにも設定できるプロパティがあります。代表的なものにalt属性やtitle属性があります。 alt属性は、画像が読み込めなかったときに表示される代替テキストを指定できます。 title属性は、画像にマウスカーソルを合わせたときに表示されるツールチップのようなものです。

例えば以下のように変更可能です。


imageElement.alt = "表示したい代替テキスト";
imageElement.title = "画像の説明を入れられます";

また、classNameプロパティを使えば、CSSのクラスを付け替えて画像の見た目を変化させられます。例えば以下のコードでは、クラス名を追加して画像に枠線やサイズ指定などのCSSスタイルを適用できます。


imageElement.className = "highlight-image";

こうした属性操作を活用すると、ユーザーの操作や画面の状態によって画像を切り替えるだけでなく、見た目をダイナミックに変えることができるようになります。例えば、サムネイル一覧の中で選択された画像だけを強調表示したい場合などに役立ちます。

イベントを使った画像の切り替え

JavaScriptで画像を表示する場面では、多くの場合ユーザーの操作が関与します。ボタンをクリックしたら画像が変わる、マウスオーバーしたら別の画像を表示するといったインタラクティブな処理が典型的です。

クリック操作を例にとると、次のようなコードで実装できます。


<button id="changeButton">画像を切り替える</button>
<img id="changeableImage" src="image1.jpg" alt="初期画像">


const button = document.getElementById("changeButton");
const changeableImage = document.getElementById("changeableImage");

button.addEventListener("click", () => {
  if (changeableImage.src.endsWith("image1.jpg")) {
    changeableImage.src = "image2.jpg";
  } else {
    changeableImage.src = "image1.jpg";
  }
});

button.addEventListener("click", ～ )という書き方で、クリックイベントが発生したときに実行したい処理を指定します。上記のコードでは、もし現在のsrc属性がimage1.jpgならimage2.jpgに、そうでなければimage1.jpgに切り替える仕組みを作っています。こういった手法は、ユーザーがボタンを押すたびに画像が交互に変わるという簡単なサンプルとしてよく紹介されます。

このようにイベントと組み合わせることで、JavaScript 画像表示をより動的でインタラクティブなものへと発展させることができます。特に、マウスオーバー時に別の画像に切り替えて、すぐに元の画像に戻すような実装は、マウスイベントを利用する例としてわかりやすいかもしれません。

実務での活用シーン

Webアプリケーションでのギャラリー機能

Webアプリケーションにおいて、画像をギャラリー形式で閲覧させる機能はよく使われます。例えばオンラインショップや写真共有サービスなどでは、多数の画像をスライドショーのように切り替えながら見てもらいたいことがあります。このときJavaScriptを活用すると、以下のような実装が可能です。

サムネイルをクリックするとメイン画像が切り替わる
次へ・前へボタンを押すと連続的に画像が切り替わる
自動再生機能でスライドショーを実装する

いずれも、ベースにあるのは「imgタグのsrc属性を切り替えること」です。そのため、サムネイルをクリックした時点で、どの画像をメイン表示領域に読み込むかをJavaScriptで指定します。こうした機能を作るときには、画像のパス情報やキャプションを配列やオブジェクトで管理しておいて、イベントが発生したら適切な値を取り出してimg要素にセットするといった流れになります。

画像の数が多いと読み込み時間やメモリ使用量が気になることもあります。この場合は、Lazy Loading（必要になったタイミングで画像を読み込む技術）と組み合わせる方法がよく採用されます。ただし初心者の皆さんは、まずは基本の「イベントによるsrc切り替え」に慣れてから追加機能に取り組むとよいでしょう。

SNSやチャットでの画像プレビュー

SNSやチャットアプリケーションなどでは、画像を送信する前にプレビュー表示をする機能が欠かせません。このとき、ユーザーが画像ファイルを選択すると、即座にプレビューに反映されるような動きを見かけることが多いです。ここではFileReaderというブラウザの機能とJavaScriptの組み合わせが活躍します。

ファイル選択フォーム（<input type="file">）で選んだ画像を、JavaScript側で一時的に読み込み、プレビュー用のimgタグにsrcとして渡してやるのが基本的な仕組みです。以下のような例があります。


<input type="file" id="imageUploader" accept="image/*">
<img id="previewImage" alt="プレビューがここに表示されます">


const uploader = document.getElementById("imageUploader");
const preview = document.getElementById("previewImage");

uploader.addEventListener("change", (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = () => {
      preview.src = reader.result;
    };
    reader.readAsDataURL(file);
  }
});

FileReaderオブジェクトを使ってファイルを読み込み、読み込み完了後のデータをreader.resultから取得します。それをpreview.srcに代入することで、すぐに選択した画像をページ内で表示できます。こうした実装は、ほぼ必ずといっていいほどSNSやチャット機能に取り入れられているため、JavaScriptを仕事で使う場合にはよく目にするテクニックになります。

ユーザーにとっては、アップロード前に確認できるメリットが大きいですし、誤った画像を投稿しないためのチェックにもなります。実務に直結しやすい例ですので、覚えておくと便利でしょう。

フレームワークを使った画像表示

Reactとの連携

JavaScriptライブラリとして有名なReactを使う場合も、基本的な仕組みは変わりません。例えば、コンポーネントの中でimgタグを出力し、状態管理（State）を用いて画像のURLを切り替えます。


import React, { useState } from "react";

function ImageSwitcher() {
  const [imageSrc, setImageSrc] = useState("image1.jpg");

  const handleSwitchImage = () => {
    if (imageSrc === "image1.jpg") {
      setImageSrc("image2.jpg");
    } else {
      setImageSrc("image1.jpg");
    }
  };

  return (
    <div>
      <img src={imageSrc} alt="切り替え対象" />
      <button onClick={handleSwitchImage}>画像を切り替える</button>
    </div>
  );
}

export default ImageSwitcher;

Reactの場合、状態が変わると自動的に画面が再描画（リレンダリング）されるため、setImageSrcによって画像URLを更新するだけで、見た目が切り替わります。これまで説明してきた「JavaScriptでimgタグのsrcを操作する」のが、少しスタイルを変えて書かれているだけだと考えるとわかりやすいでしょう。

大規模なWebアプリケーションで大量の画像を扱う場合は、Reactのコンポーネント構造をうまく活用します。たとえばギャラリーをひとつのコンポーネントとし、その中に複数のサムネイルコンポーネントを配置するなど、パーツごとに役割を分けるとメンテナンス性を保ちやすいです。このときもベースになっているのはJavaScriptとDOM操作の考え方です。

Vue.jsとの連携

Vue.jsでも、同じく双方向バインディングを利用することで画像の表示を簡単に制御できます。シングルファイルコンポーネントの場合、テンプレートとスクリプトを分ける書き方が主流です。以下は簡単な例になります。


<template>
  <div>
    <img :src="currentImage" alt="切り替え対象" />
    <button @click="toggleImage">画像を切り替える</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImage: "image1.jpg"
    };
  },
  methods: {
    toggleImage() {
      if (this.currentImage === "image1.jpg") {
        this.currentImage = "image2.jpg";
      } else {
        this.currentImage = "image1.jpg";
      }
    }
  }
};
</script>

テンプレート内で画像URLをcurrentImageという変数にバインドし、ボタンをクリックしたときにtoggleImageメソッドが呼ばれて内部状態が更新されると、自動的に表示される画像も変わります。この書き方でも、やはり最終的にはimgタグのsrcが切り替わることにより、画像表示が更新されるわけです。

Vue.jsはデータと画面を直感的に関連付けしやすいので、複数の画像を一括管理したり、ユーザーの操作ごとに細かな表示を変えたりする場合に重宝します。ただし、ReactやVue.jsといったフレームワークを使わなくても、DOM操作の基礎さえわかっていれば、純粋なJavaScriptで十分実現可能です。初心者の方はフレームワークに飛びつく前に、まずはDOM操作の基本的なところを押さえることをおすすめします。

応用テクニック：Canvasやアニメーション

ここまでに解説した方法では、imgタグのsrcを切り替える例が中心でした。しかしJavaScriptには、2D描画機能を備えた<canvas>という要素を扱う手段も用意されています。キャンバス上で画像を描画し、ピクセル単位の操作やアニメーションをすることも可能です。

例えば、ゲームやインタラクティブなコンテンツを作るときに、以下のようなコードが登場します。


<canvas id="myCanvas" width="400" height="300"></canvas>


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const image = new Image();

image.src = "sprite.png";
image.onload = () => {
  ctx.drawImage(image, 0, 0, 100, 100);
};

drawImageを使えば、指定した位置と大きさでキャンバスに画像を描画できます。キャンバスはピクセルデータを直接操作できるため、透過処理や合成、アニメーションなどを自由にカスタマイズしやすいのが特徴です。ただし、通常のHTML要素のようにsrcを差し替えれば終わり、という簡単な話ではなくなるので、初めての方にはやや難しく感じるかもしれません。

さらにアニメーションを行う場合は、requestAnimationFrameなどを使ったループ処理でdrawImageを連続的に描画し、画像の位置やサイズを変化させる方法をとることが多いです。このテクニックを極めると、2Dゲームや高度なビジュアルエフェクトなど、よりダイナミックな表現ができるようになります。ただし、最初に取り組むべきはDOM操作による基本的な画像切り替えであり、キャンバスは一段上の応用範囲だと考えてもいいでしょう。

画像の最適化と読み込みパフォーマンス

ウェブサイトやアプリケーションで大量の画像を読み込むと、ページの表示速度が遅くなることがあります。 JavaScriptで動的に画像を切り替えるケースでも、画像が大きすぎるとユーザーにストレスを与える可能性があります。そのため、実務では以下のような対策がとられています。

画像の圧縮（JPEG、PNG、WebPなどを使い分ける）
画像サイズを必要最低限に抑える（サムネイルには小さな画像を準備する）
Lazy Loadingで、ユーザーが実際に見るまで読み込まない
CDN（コンテンツ配信ネットワーク）を使って高速配信

JavaScript側では、画像の読み込み状態をイベントで把握して、読み込み完了後に処理を行うこともできます。例えば、img要素にはonloadイベントが存在するため、画像が完全に読み込まれたタイミングで何らかのアニメーションをスタートするといったことも可能です。また、先述のFileReaderを使ったプレビュー機能でも、ファイル読み込みが完了したタイミングを正しく扱っているという点が重要でした。

こうしたパフォーマンスやユーザー体験に関する考え方は、JavaScript 画像表示にとどまらずウェブ全般のテーマですが、実務では必ず遭遇するといっていいでしょう。ですから、基本的な画像の操作をマスターしたら、あわせて最適化の考え方も押さえておくと安心です。

画像管理における注意点

JavaScriptを使って画像を表示するときは、以下のような注意点が伴います。特に実務で複数人が開発している場合は、画像の管理やデータの連携方法をしっかり設計しておくことが大切です。

ファイルパスの指定ミス

HTMLやJavaScriptファイルの配置と、画像ファイルが置かれているディレクトリ構造が合っていないと、src属性で指定しても画像が表示されないことがあります。たとえば、開発環境ではうまく動いていたのに、本番環境にデプロイしたら画像が読み込めないというトラブルが起きることがあります。相対パス・絶対パスの指定があっているか、静的ファイルを正しく配置しているか、よく確認するようにしましょう。

セキュリティ上の制限

ブラウザ側には、同一オリジンポリシーなどのセキュリティ上の仕組みがあります。別ドメインの画像を勝手に操作しようとすると、思わぬエラーが発生したり、クロスオリジンの制限がかかったりするケースがあります。また、FileReaderで読み込んだローカルファイルを他の場所で再利用しようとすると、セキュリティエラーになることもあります。実務で外部サイトから画像を取得する場合は、CORS（Cross-Origin Resource Sharing）の設定に注意してください。

メモリ使用量の管理

画像をたくさん読み込んだまま破棄しないと、メモリ使用量が大きくなってブラウザが重くなることがあります。特に、ユーザーが大量の画像をアップロードする可能性があるサイトでは、プレビュー用の画像を一時的に格納しているメモリを適宜解放したり、不要になった要素をDOMから削除したりする配慮が必要です。

画像を読み込みすぎたり、大容量の画像をそのまま使ってしまうと、スマートフォンなどの端末で動作が重くなる可能性があります。必要に応じて画像を圧縮し、小さなサイズのサムネイルと大きなサイズの本画像を使い分けるなど、工夫することをおすすめします。

インタラクション強化のアイデア

画像表示をベースに、ユーザー体験を向上させるためのアイデアは多数存在します。例えば、マウスホバーで画像を拡大表示する「ホバーツールチップ」や、クリックすると大きく拡大されて背景がグレーアウトする「モーダルウィンドウ」などが挙げられます。

モーダルウィンドウで拡大表示

サムネイル一覧を並べた状態で、クリックするとモーダルウィンドウ（画面が暗くなり、中央に画像を大きく表示するUI）が開くように実装するケースは定番です。 JavaScriptでは、モーダル用の要素（<div class="modal">など）をあらかじめHTMLに用意しておき、その表示・非表示を制御します。以下のように、クリックイベントでmodal.style.display = "block";などとして画面に表示するわけです。


const modal = document.getElementById("myModal");
const modalImg = document.getElementById("modalImage");
const thumbnails = document.querySelectorAll(".thumbnail");

thumbnails.forEach((thumb) => {
  thumb.addEventListener("click", () => {
    modalImg.src = thumb.src;
    modal.style.display = "block";
  });
});

modal.addEventListener("click", () => {
  modal.style.display = "none";
});

表示専用のdivを重ねることで、ユーザーにとって見やすい大きさで画像を閲覧してもらうことができます。閉じるための処理を忘れずに用意しておくのがポイントです。

画像へのアニメーション効果

画像を切り替える際に、突然切り替えるのではなくフェードイン・フェードアウトをしたいケースもよくあります。例えばCSSのトランジションを利用すると、比較的簡単に見た目を変化させられます。 JavaScriptでclassNameを切り替えるだけで、CSSのトランジション効果が発動するように工夫すると、ユーザー体験が向上しやすいです。

以下のようなCSSを用意しておいて、


.fade-out {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.fade-out.hidden {
  opacity: 0;
}

JavaScriptでクラス名を付け替えれば、徐々に透明度が変化していくエフェクトが実装できます。アニメーションライブラリを使う方法もありますが、CSSトランジションであれば比較的手軽です。画像の切り替えにひと工夫加えるだけで、全体のUIがぐっと見やすくなるため、このような小技も意識してみてください。

ユーザーにとって「思わず触れてみたくなる」インタラクションを作るには、簡潔なコードとわかりやすい演出の両立が大事です。フェードやスライドインなどのアニメーションも、必要に応じて活用すると良いでしょう。

まとめ

JavaScript 画像表示の方法は非常に多岐にわたりますが、最も基本となるのは「imgタグのsrcを動的に切り替える」ことです。それに加えて、FileReaderを使ったプレビュー機能や、フレームワークとの連携、Canvasを使った応用など、さまざまなアプローチが存在するのが特徴といえます。

初めて学ぶ方は、まずはHTMLとJavaScriptを使ったDOM操作の基本から入りましょう。 img要素を取得して、そのsrcを変えれば画像が切り替わるという仕組みを身につければ、一連のインタラクティブな機能がグッと作りやすくなります。また、その先にはReactやVue.jsでの状態管理、パフォーマンス最適化、アニメーション処理など、多彩な技術が広がっています。

実務での利用シーンを思い浮かべながら練習してみると、なぜ画像の表示を動的に操作する必要があるのか、どんなUIを実現できるのかが明確になるはずです。簡単なサンプルを自作してみるのも良い方法でしょう。

ぜひ、ここで紹介した基本的な概念とコード例を参考にして、画像をより魅力的に、そして使いやすく表示できるアプリケーションを作ってみてください。