(Sample)
今回は「ドラッグ＆ドロップでファイルをアップロードし、画像プレビューまで表示するWebアプリ」の作り方を解説していきます！
フォームに「画像を選んでアップロード」するのはよくあるパターンですが、ドラッグ＆ドロップ対応＆即時プレビュー表示ができると、ユーザーの体験がグッと向上します。
はじめてJavaScriptを触る新人エンジニアの方にもわかるように、しっかり解説しますね！
全体の構成と仕組み
この機能は次の3つで構成されています：
- HTML：ページの土台（表示部分）
- CSS：見た目の調整
- JavaScript：動作の制御（ファイル処理・アップロードなど）
HTMLの役割：基本構造をつくる
ポイントとなる要素
<div class="dropzone">
ここに画像ファイルをドラッグ＆ドロップしてください
</div>
<input type="file" class="file-input" multiple style="display: none" />
<div class="file-list mt-3"></div>
<div class="preview"></div>
| 要素 | 説明 |
|---|---|
.dropzone | ファイルのドラッグ＆ドロップ対象エリア。クリックにも対応。 |
.file-input | ファイル選択ダイアログ（実際には非表示） |
.file-list | アップロードするファイルの情報を表示 |
.preview | 画像のサムネイルを表示する領域 |
フォームがなくても JavaScript で直接ファイルを取得して、画面に表示＆アップロードできる仕組みになっています。
CSSのポイント：見た目で操作性を上げる
.dropzone {
border: 2px dashed #007bff;
background: #f8f9fa;
text-align: center;
cursor: pointer;
}
.dropzone.dragover {
background: #e2e6ea;
}
.preview img {
max-width: 100px;
}
専門用語解説
dashed：点線のボーダー。ドラッグ＆ドロップエリアを視覚的に表現。.dragover：ファイルを上に持ってきたときのスタイル変更（ハイライト表示）。max-width：画像がはみ出さないように縮小。
例えると、dropzoneは「仮想の箱」。ファイルをこの箱に「放り込む」ような操作です！
JavaScriptの役割：ファイルを受け取り、表示・アップロード！
主な処理の流れ
dropzone.addEventListener("drop", (event) => {
event.preventDefault();
const files = event.dataTransfer.files;
handleFiles(files);
});
function handleFiles(files) {
preview.innerHTML = "";
for (const file of files) {
if (file.type.startsWith("image/")) {
const img = document.createElement("img");
img.src = URL.createObjectURL(file);
preview.appendChild(img);
}
formData.append("files", file);
}
uploadFiles(formData);
}
注目のJavaScript機能解説
| 機能・API | 役割 |
|---|---|
dragover, drop | ドラッグ＆ドロップを検知し、ファイルを取得 |
event.dataTransfer | ドロップされたファイルの情報を取得する |
URL.createObjectURL() | ブラウザ上で一時的に画像URLを作成し、即座に表示できるようにする |
fetch("/upload") | サーバーへファイルを送信（POSTリクエスト） |
FormData | 複数のファイルをひとまとめにして送信するためのオブジェクト |
イメージで流れを理解しよう
ユーザーが画像をドラッグ → .dropzone にドロップ
↓
JavaScriptがファイル情報を取得
↓
即座にサムネイル表示（preview）
↓
fetchでバックエンドに送信
注意点とデメリット
良いところ
- 直感的な操作でUXが良い
- 即時プレビューで安心感がある
- 複数ファイル同時対応も簡単
気をつけること
- セキュリティ対策が必要（バックエンドでのファイル検証）
- ファイルサイズ制限や形式チェックが未実装なので要対応
今後の発展アイデア
| 発展ポイント | 内容 |
|---|---|
| 拡張子・サイズのバリデーション | .typeや.sizeを使って不正ファイルを排除 |
| プログレスバーの追加 | アップロード進捗を表示して安心感を与える |
| 非同期バッチアップロード | Promise.all() で同時アップロード制御 |
| フォルダ対応 | webkitdirectory 属性でフォルダまるごと読み込み |
学習の次のステップ
この機能で習得できたスキル：
- DOMイベントの活用（drag & drop, change）
FormDataを使ったファイル送信URL.createObjectURL()を使ったプレビュー表示
次はこんなことに挑戦してみてください！
- ファイルのプレビューに名前や削除ボタンをつける
- サーバーからのレスポンスに応じて表示を切り替える
- ReactやVueなどのフレームワークでも同じように作ってみる
Webフロントエンドの基礎力がグンと伸びるジャンルなので、ぜひトライを続けてくださいね！質問もいつでもどうぞ。