② (e) => { … } の (e)

執筆者:

admin

カテゴリ:

② (e) => { ... } の (e)

意味

  • eは「イベントオブジェクト」と呼ばれるものです。
  • この e の中に、「ファイル選択に関する情報」が全部入っています。

🔵 たとえば → 選ばれたファイルリスト（e.target.files）もこの中にあります。

✅ 「e」はイベントオブジェクト

つまり、

  • どんな種類のイベントが起きたか
  • どの要素で起きたか
  • そのときの詳しい情報 が全部入っている特別なオブジェクトです。

📦 ファイル選択時の「e」の中身（具体例）

たとえば、ファイルを選んだときの e の中にはこういうものが入っています：

プロパティ意味具体例
e.typeイベントの種類"change"（ファイルが変わった）
e.targetイベントが発生した要素<input type="file" id="upload">
e.target.files選択されたファイルたち（リスト）[ファイルオブジェクト]
e.target.files.length選択されたファイルの数1（1枚選んだ場合）
e.target.files[0]選ばれた最初のファイル画像ファイル1個
e.target.files[0].nameファイル名"myphoto.jpg"
e.target.files[0].sizeファイルサイズ（バイト単位）142000（約142KB）
e.target.files[0].typeファイルの種類"image/jpeg"

🖊 具体的な中身のイメージ（図にすると）

たとえば、画像ファイル "myphoto.jpg" を選んだ場合、
e.target.files[0] はこんなデータを持っています：

{
  name: "myphoto.jpg",
  size: 142000,
  type: "image/jpeg",
  lastModified: 1685000000000,
  ...
}

つまり！

  • e.target.files[0].name → "myphoto.jpg"
  • e.target.files[0].size → 142000
  • e.target.files[0].type → "image/jpeg"

みたいに細かくファイル情報を取得できるんです。

📖 この情報を使うと何ができるか？

例えば、こういうことができます：

  • ファイル名を画面に表示する
    → console.log(file.name);
  • ファイルサイズをチェックして、大きすぎたら警告する
    → if (file.size > 5_000_000) { alert("5MB以上のファイルは選べません"); }
  • 画像ファイルだけ許可する（JPEG, PNG）
    → if (!file.type.startsWith('image/')) { alert("画像ファイルを選んでください"); }

などなど、めちゃくちゃ応用が広がります！

🎯 まとめ

項目内容
eとは？イベントの情報を全部持っている特別なオブジェクト
重要な情報e.target.files[0] → 選ばれたファイル1個分のデータ
できることファイル名・サイズ・タイプを取り出して、条件チェックや表示ができる

投稿をさらに読み込む