「〇〇オブジェクトは△△オブジェクトの□□プロパティで取得できる」の意味

Question

お世話になります。
JavaScript学習中のものです。

ある参考書（SHOEISHA「HTML5 レベル２ ver2.0対応　スピードマスター問題集　初版」P199）に以下の文面があります。
「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」
この意味するところについてご教授をお願いします。

このことを自分で考えると、
オブジェクトとは、例えば
var person　= {name: 'Tom'};
であればpersonオブジェクトと呼ばれるものになり、"name: 'Tom'"の部分がプロパティということは分かっています。
このことを踏まえると「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」とは、
JavaScriptにはもともと
var FileList = {(key): (value);…};というのがあって、
var input = {files: (value);…}　というものもあるのだと思いますが、
このFileListオブジェクトとinputオブジェクトの関係がよく分かりません。

「継承」という概念であれば少し分かるのですが、それとも違うような気がしています。

どなたか分かる方いらっしゃればよろしくお願いします。

【追記】

SHOEISHA「HTML5 レベル２ ver2.0対応　スピードマスター問題集　初版」P199の抜粋

HTML
<input type="file" id="files" multiple>

JavaScript
var showFilesNames = function(){
var inputFiles = document.querySelector("#files");
var files = inputFiles.files;
for(var i = 0; i < files.length; i++){…}
(以下省略)…
上記のlengthが空白で、埋めるものを選択するという問題です。

この解説に、「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」という部分があったため、あるオブジェクトが別のオブジェクトのプロパティで取得できるとは、どういう意味なのかわからなかったため質問させていただきました。
ちなみに’length’はFileListオブジェクトのプロパティとなっています。

よろしくお願いします。

Comments

[m.ts10806]

＞ある参考書
書籍名と版数を明示してください。

[susumu-99]

SHOEISHA「HTML5 レベル２ ver2.0対応　スピードマスター問題集　初版」になります。

[m.ts10806]

質問は編集できますので、質問本文に追記願います。
あと、たまたま手元に持ってました。私も確認してみます（可能ならページ数、設問番号なども欲しい）

[susumu-99]

追加しました。設問は5-13になります。

[退会済みユーザー]

質問の【追記】に対してレスしましたので見てください。それに対するフィードバックを書いてください。

[退会済みユーザー]

質問者さん、その後無言ですが、問題・疑問が解決したのであればベストアンサーを選んでこのスレッドはクローズしてください。まだ質問があるならそれを書いてください。とにかく無言で放置は NG です。

[susumu-99]

質問に対する解決はできたのに放置してしまいすいません。

今回私の質問のしかたも悪かったのですが、１番聞きたかった点に回答をくださったthink49さんの回答をベストアンサーに選ばせていただきました。
回答をくださったみなさまに感謝です。ありがとうございました。

Answer 1

HTMLInputElement.prototype.files

HTMLInputElement.prototype.files を参照すれば、「FileList.prototype を [[Prototype]] に持つオブジェクト」を返します。

• HTMLInputElement - Web API | MDN
• FileList - Web API | MDN

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

<script>
  'use strict';
  const input = document.getElementById('sample');

  console.log(Object.getPrototypeOf(input) === HTMLInputElement.prototype);　// true
  console.log(Object.getPrototypeOf(input.files) === FileList.prototype);    // true
  console.dir(HTMLInputElement);
  console.dir(FileList);
</script>

FileList.prototype.length

FileList InterfaceのIDLは下記の通り。

• 5. FileList インタフェース - File API （日本語訳）

[Exposed=(Window,Worker), Serializable]
interface FileList {
  getter File? item(unsigned long index);
  readonly attribute unsigned long length;
};

Google Chromeでも FileList.prototype.length に getter が定義されていることを確認できます。

• Object.prototype.hasOwnProperty() - JavaScript | MDN
• Object.getOwnPropertyDescriptor() - JavaScript | MDN

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

<script>
  'use strict';
  const files = document.getElementById('sample').files;
  const filesPrototype = Object.getPrototypeOf(files);

  console.log(filesPrototype === FileList.prototype);   // true
  console.log(files.hasOwnProperty('length'));          // false
  console.log(filesPrototype.hasOwnProperty('length')); // true
  console.log(Object.getOwnPropertyDescriptor(filesPrototype, 'length')); // {set: undefined, enumerable: true, configurable: true, get: ƒ}
</script>

プロトタイプチェーン

前述のコードの理解が難しいようでしたら、「プロトタイプチェーン」を調べてみてください。

• 継承とプロトタイプチェーン - JavaScript | MDN
• Object.getPrototypeOf() - JavaScript | MDN

仕様書

JavaScriptはECMAScriptだけでなく、DOM, HTML Standard等、様々な仕様が定義されています。
それらの interface, IDLを読んでおくと、関係性を理解しやすいと思います。

• 4.10.5 input要素 - HTML Standard 日本語訳
• 5. FileList インタフェース - File API （日本語訳）

Re: susumu-99 さん

Comments

[think49]

> FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる

ここでいう「FileListオブジェクト」「inputオブジェクト」は文章化する際に多くの情報が削られていますので、参考程度にして深く考えない事をお勧めします。
文脈を読み取ったり、前後のコードを読み解かないと、解読できない文章になっています。
あえて厳密に文章で書くと、次のようになると思います。

- 「FileList.prototype を [[Prototype]] に持つオブジェクト」は「HTMLInputElement.prototype を [[Prototype]] に持つオブジェクト」の「filesプロパティ」で取得できる
- 「FileList を [[Prototype]] に持つオブジェクト」は「input要素ノードを参照するオブジェクト」の「filesプロパティ」で取得できる

[susumu-99]

丁寧な回答ありがとうございます。

今少しMDNでプロトタイプの継承の説明を読みました。
私が聞きたかったことに１番近い内容で、モヤモヤが晴れた気がします。

[think49]

FileList.prototype.lengthの説明を親記事に追記しました。

[think49]

・オブジェクトが持つ [[Prototype]] がなにか
・プロパティの所在がどこか(直属かプロトタイプチェーン上か)

を確認すれば、構造を把握できます。
filesプロパティの所在が HTMLInputElement.prototype.files である事もFileList.prototype.lengthと同様の手順で確認できると思います。

Answer 2

「FileListオブジェクトはInputオブジェクトのfilesプロパティで取得できる」
この意味するところについてご教授をお願いします。

これをもっと詳しく書くと以下のようになります。
「FileListクラスのインスタンスであるオブジェクトは、Inputクラスのインスタンスであるオブジェクトのfilesプロパティで取得できる」
（javascriptにおいては厳密には正しくない説明ですが、文章の解釈としては上記の理解の仕方で問題ありません。）

FileListやInputはシステム側で用意されているものなので実際には以下コードは動きませんが、以下のような感じです。

var object1 = new FileList(); // object1はFileListクラスのインスタンス
var object2 = new Input();    // object2はInputクラスのインスタンス
object2.files = object1;      // Inputクラスのインスタンスのfilesプロパティに、FileListクラスのインスタンスを入れておく

// このとき、object2.files と書くと、new FileList()で作成したobject1を参照できる。
// すなわち『FileListオブジェクト(object1)は、Inputオブジェクト(object2)のfilesプロパティで取得できる』

Comments

[susumu-99]

回答ありがとうございます。

回答していただいた内容はおおむね理解できました。
たしかにそうですね！
でもこれがなぜ、FileListオブジェクトのプロパティ'length'を、
files.lengthと書くことができるのでしょうか？
そこの部分はプロトタイプの継承ということでいいのでしょうか

[think49]

> var object2 = new Input(); // object2はInputクラスのインスタンス

この説明用コードは new HTMLInputElement が正確のように思います。

> 「FileListクラスのインスタンスであるオブジェクトは、Inputクラスのインスタンスであるオブジェクトのfilesプロパティで取得できる」

ですので、クラスベースの説明としても、「HTMLInputElementクラスのインスタンス」と書くべきと考えています。

> 「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」

書籍の文章ですと、FileListはクラス名を表していますが、inputはクラス名ではなく、UpperCamelCaseでもなく、命名規則に統一性がないので、解読困難な文章になっているといえます。

[ku__ra__ge]

> なぜ、FileListオブジェクトのプロパティ'length'を、files.lengthと書くことができるのでしょうか？
> そこの部分はプロトタイプの継承ということでいいのでしょうか
質問の意図がいまひとつ掴みきれていませんが、new FileList()で作成されたオブジェクトがlengthプロパティを参照できる理由はプロトタイプで説明できます。(オブジェクト.lengthを参照するときオブジェクト自身がlengthを持っていなければFileList.prototype.lengthが参照される言語仕様になっているから)

> inputはクラス名ではなく
確かにそこは私も気になりました。サンプルコードが`var input = document.querySelector("#files");`ならまだ話が通じたんですけどねぇ……。

[susumu-99]

プロトタイプの継承を知らなかったもので、
書籍の解説では、'length'は’FileListオブジェクト’のプロパティとなっていたため、質問内の書籍の問題の箇所はfilelist.lengthではないかと思いましたが、そうではなくfiles.lengthとなっているため、この点が合点がいかず質問していました。
（同じ解説内に「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」という部分があってここが理解できないから分からないのだと思い、質問ではそのことを中心に書いています。）

サンプルコードの方は間違って入力したかなと思いましたが、あっていました。正直お２方がおっしゃているclass名云々にはついていけてませんが(´；ω；`)

大変助かりました。ありがとうございました。

Answer 3

こういうことです

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var files=f.files;
  console.log(files instanceof FileList); // FileList型オブジェクトなのでtrue
  console.log(files instanceof NodeList); // NodeList型オブジェクトではないのでfalse
});
</script>
<input type="file" id="f">

type=fileから得られるfilesはFileList(型の)オブジェクトとして
取得（参照したり場合によっては編集・削除したり）できるということ。

Comments

[susumu-99]

回答ありがとうございます。

私の学習が回答の内容に到達しておらず、ソースコードで少し分からない箇所もありますが、これならFileListオブジェクトのプロパティ’length’をfilesのプロパティとして使用できる気がします。

Answer 4

例えば次の例 (Pet オブジェクト (種類: 猫、名前: ジェリー) は person オブジェクト (名前: トム) の pet プロパティで取得できる) を考えると良いかも。

var person　= {
  name: 'Tom',
  pet: {
    kind: 'cat',
    name: 'Jerry'
  }
};

Comments

[susumu-99]

大変分かりやすい回答ありがとうございます。

しかしながら、これだとkindの値を、
person.pet.kindで取得することはできるかもしれませんが、
person.kindでは取得できない気がします。
最初の質問が言葉足らずだったためすいません。

[hoshi-takanori]

問題集を持ってないので記述の詳細が分かりませんが、input.length ではなく files.length のことなら、この例で言うといったん var pet = person.pet; とした上で、pet.kind を取得する感じでは。

[susumu-99]

質問の追記に、引用した問題集をもう少し詳しく修正しました。

var pet = person.pet;
にあたる箇所はないんですよね。

回答ありがとうございました。

[maisumakun]

> var pet = person.pet;
にあたる箇所はないんですよね。

var files = inputFiles.files;です。

[susumu-99]

いつもありがとうございます。

まず、書籍の解説では、'length'は’FileListオブジェクト’のプロパティとなっています。
であれば、質問内の問題の箇所はfilelist.lengthではないかと思いましたが、そうではなく
files.lengthとなっているため、この点が合点がいかず質問していました。
（同じ解説内に「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」という部分があってここが理解できないから分からないのだと思い、質問ではそのことを中心に書いています。）

var inputFiles = document.querySelector("#files");
var files = inputFiles.files;
では、これがfiles.lengthになる説明にはならないと思っています。

files.lengthになる理由は、他の方が説明していただいていましたが、プロトタイプの継承ではないかと思っています。

[hoshi-takanori]

書籍の引用ありがとうございます。
var inputFiles = document.querySelector("#files");
は、id が files である DOM 要素 (つまり <input type="file" id="files" multiple>) を取得します。
次の　var files = inputFiles.files; はその input 要素の files プロパティを取得します。
つまり、inputFiles が person に、files が pet に、files.length が pet.kind に相当します。

Answer 5

「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」

もともと var input = {files: (value);…}　というオブジェクトがあって、その value が FileList オブジェクトを指しているということだと思います。

【追記】

その「inputオブジェクト」というのは、html の <input> 要素のことだったのでしょうか？

https://developer.mozilla.org/ja/docs/Web/API/FileList

であれば、ちょっと話が違ってきますが。どのように使いたいのか、全体的な話を書いてもらった方が良さそうです。

【追記２】

質問の「追記」に対してレスします。

この解説に、「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」という部分があったため、あるオブジェクトが別のオブジェクトのプロパティで取得できるとは、どういう意味なのかわからなかったため質問させていただきました。

input 要素、files プロパティ、FileList オブジェクトの関係については、以下の記事の View のコードが説明になるのではと思います。

異なるフォルダのファイルをアップロード
http://surferonwww.info/BlogEngine/post/2020/07/09/uploading-multiple-files-in-different-folders.aspx

関係部分のみを抜粋すると、

<input id="mutiplefileupload" type="file"
       name="postedfiles" multiple="multiple" />

<script type="text/javascript">
    //<![CDATA[
 
    $(function () {
        // ブラウザの HTML5 File API サポートを確認
        if (window.File && window.FileReader && window.FileList) {
 
            // FormData オブジェクトを取得
            var fd = new FormData(document.querySelector("form"));
 
            // input type="file" 要素のオブジェクトを取得
            var fileUpload = document.getElementById("mutiplefileupload");
 
            // input type="file" 要素でダイアログを開いてファイルを選択
            // し［開く］ボタンをクリックすると、その都度 change イベン
            // トが発生する。それにリスナ（下のコードの function ）を
            // アタッチして FormData オブジェクトを操作する
            fileUpload.addEventListener('change', function (e) {
                // files プロパティで FileList オブジェクトを取得
                var filelist = fileUpload.files;
 
                // 一回の操作で複数のファイルを選択できるので、以下
                // のようにループを回して
                for (let i = 0; i < filelist.length; i++) {
                    // File オブジェクトを FormData に追加していく
                    fd.append("postedfiles", filelist[i]);
                }
            });
 
    //]]>
</script>

(1) input type="file" 要素がブラウザにロードされるとそのオブジェクトが生成されるので getElementById でそれを取得。

(2) ブラウザに表示された input type="file" 要素でダイアログ（紹介した記事の 2 つ目の画像参照）を開いてファイルを選択。multiple="multiple" 属性が設定してあるので複数のファイルを選択可能。

(3) files プロパティで FileList オブジェクトを取得。

(4) FileList.length プロパティで上記 (2) で選択したファイルの数を取得できる。

(5) なので、上記のコードのように for ループで選択したファイル（File オブジェクト）を一つずつ取得して操作できる。

Comments

[susumu-99]

回答ありがとうございます。なるほど、そういう意味であれば分かるかも！

var input = {files: var FileList = {(key): (value);…};…}ということでしょうか。
しかしながら、この参考書の続きでは、FileListオブジェクトのプロパティ’length’が、’files.length’という形で値を取得しているところがあります。これをあてはめると、
var input = {files: var FileList = {length: (value);…};…}から、
’files.length’として値を取得していることになります。
無学で申し訳ありませんが、そういうことは可能なのでしょうか？

[退会済みユーザー]

【追記】を読んでいただけたでしょうか？

[Zuishin]

FileList は変数名ではなくクラス名です。クラス名は大文字で始める約束になっています。

[退会済みユーザー]

> FileList は変数名ではなくクラス名です。

たぶん、HTML5 の FileList オブジェクトの話だろうと思います。

[susumu-99]

MDNのリンクありがとうございます。
たしかに、htmlにインプット要素はあります。htmlにオブジェクトがあるんでしょうか。もしあればそうかもしれません。

問題集の問題に対する解説のため、全文は書けませんが抜粋して書きます。
HTML
<input type="file" id="files" multiple>

JavaScript
…（省略）
for(var i = 0; i < files.length; i++){…}
(以下省略)…
上記のlengthが空白で埋めるものを選択するという問題です。

この解説に、「FileListオブジェクトはinputオブジェクトのfilesプロパティで取得できる」という部分があったため、あるオブジェクトが別のオブジェクトのプロパティで取得できるとはどういう意味なのかわからなかったため質問させていただきました。
ちなみに’length’はFileListオブジェクトのプロパティとなっています。

よろしくお願いします。

[susumu-99]

いただいた回答とこちらの質問の順番が錯誤してしまい申し訳ありません。

HTML5 に FileList オブジェクトというものがあるんですか！
オブジェクトはJavaScriptにしかないのかと
調べてみます。

[退会済みユーザー]

> 問題集の問題に対する解説のため、全文は書けませんが抜粋して書きます。

質問欄を編集して追加情報として追記願います