③ const file = e.target.files[0];

執筆者:

admin

カテゴリ:

③ const file = e.target.files[0];

意味

  • e.target は、イベントが起きた要素、つまり <input type="file">
  • files は、そのinputで選ばれたファイルたちをリストで持っています。
  • [0] は、選ばれた最初のファイルを取り出しています。（1枚しか選んでない想定）

🔵 つまり、**「選んだファイルを取得してfileに入れる」**ということ！

1. e.target

  • e は「イベントオブジェクト」でしたよね。
  • e.target は「このイベントが発生した具体的なHTML要素」を指します。

この場合、e.target は

<input type="file" id="upload">

つまりファイルアップロード用のinputタグそのものを指しています！

2. e.target.files

  • e.target（inputタグ）には、
    filesという特別なプロパティがあります。

🔵 filesは、

  • 選ばれたファイルたちを配列みたいに持っているリストです。
  • 正確には「FileListオブジェクト」といいます。

例えば、画像を1枚選んだときは：

e.target.files
↓
[ File { name: "sample.jpg", size: 142000, type: "image/jpeg", ... } ]

みたいに、ファイルが1個入ったリストになります。

（複数ファイル選択できるinputなら、ファイルが何個も入っている場合もあります）

3. [0]

  • ファイルが複数選ばれた場合でも、リストの最初のファイルは[0]番目です。
  • JavaScriptの配列の番号は0から始まるので、
    最初のファイルは [0] になります！

つまり、

const file = e.target.files[0];

は、

✅「アップロードフォームで最初に選ばれたファイルだけを取り出して、file変数に入れる」
という意味です。

🎯 ここまでの流れを図にすると

ユーザーがファイルを選ぶ
↓
<input type="file"> にそのファイルがセットされる
↓
e.target → <input> タグ本体
↓
e.target.files → 選ばれたファイルのリスト
↓
e.target.files[0] → そのリストの最初のファイル
↓
file変数に保存！

✅ なぜ [0] を使うのか？

  • 通常のファイル選択フォームは、1枚だけファイルを選ばせることが多いです。
  • だからリストの最初の1個だけを取り出せばOKだから [0] を使います。

もし複数ファイルアップロード（multiple属性つき）だったら、
リストのすべてをループで処理することもできます。

（ここでは「1個だけ」想定です）

🔥 最後まとめ

要素内容
e.targetイベントが発生した<input type=”file”>
e.target.files選ばれたファイルたちのリスト
e.target.files[0]その中の最初のファイル（1枚）
file選ばれたファイルを保存する変数

投稿をさらに読み込む