2021/12/25 時点の英語版に同期

1 files changed, 78 insertions, 98 deletions

diff --git a/files/ja/web/api/filelist/index.md b/files/ja/web/api/filelist/index.md
index 033ba967bd..a081e16b4e 100644
--- a/files/ja/web/api/filelist/index.md
+++ b/files/ja/web/api/filelist/index.md
@@ -4,91 +4,90 @@ slug: Web/API/FileList
 tags:
   - API
   - File API
-  - Files
+  - ファイル
+browser-compat: api.FileList
 translation_of: Web/API/FileList
 ---
-<div>{{APIRef("File API")}}{{gecko_minversion_header("1.9")}}</div>
+{{APIRef("File API")}}
 
-<p>この型のオブジェクトは、HTML {{HTMLElement("input")}} 要素の <code>files</code> プロパティによって返されます。これにより、<code>&lt;input type="file"&gt;</code> 要素で選択されたファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用しているときに、Web コンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は <a href="/ja/docs/DragDrop/DataTransfer" title="DragDrop/DataTransfer"><code>DataTransfer</code></a> オブジェクトを見てください。</p>
+この型のオブジェクトは、 HTML の {{HTMLElement("input")}} 要素の `files` プロパティで返されます。これにより、 `<input type="file">` 要素で選択されているファイルのリストにアクセスすることができます。また、ドラッグ＆ドロップ API を使用している場合は、ウェブコンテンツにドロップされたファイルのリストにも使用されます。使用方法の詳細は [`DataTransfer`](/ja/docs/Web/API/DataTransfer) オブジェクトを見てください。
 
-<div class="note">
-<p><strong>注:</strong> {{Gecko("1.9.2")}} 以下では、input 要素は一度に 1 つのファイルだけサポートします。これは、FileList には 1 つのファイルだけが含まれることを意味します。{{Gecko("1.9.2")}} から、input 要素の multiple 属性が true の場合、FileList は複数ファイルを含められます。</p>
-</div>
+> **Note:** {{Gecko("1.9.2")}} より前は、input 要素は一度に 1 つのファイルだけ選択することができます。すなわち、 FileList に入るファイルは 1 つだけです。 {{Gecko("1.9.2")}} から、 input 要素の multiple 属性が true の場合、 FileList に複数のファイルが入ります。
 
-<h2 id="Using_the_file_list" name="Using_the_file_list">ファイルリストの使用</h2>
+## ファイルリストの使用
 
-<p>すべての <code>&lt;input&gt;</code> 要素ノードは、その上に <code>FileList</code> 型の <code>files</code> 属性を持ち、このリスト内の項目へのアクセスを可能にします。例えば、HTML が以下のファイル入力を含んでいるとします。</p>
+すべての `<input>` 要素のノードには `files` 属性があり、これが `FileList` 型なので、リスト中の項目にアクセスすることができます。例えば、HTML に以下のファイル入力があるとします。
 
-<pre class="notranslate">&lt;input id="fileItem" type="file"&gt;
-</pre>
+    <input id="fileItem" type="file">
 
-<p>次のコード行は、ノードのファイルリスト内の最初のファイルを <a href="/ja/docs/Web/API/File" title="DOM/File"><code>File</code></a> オブジェクトとして取得します。</p>
+次のコードの行は、ノードのファイルリスト内の最初のファイルを [`File`](/ja/docs/Web/API/File) オブジェクトとして取得します。
 
-<pre class="brush: js notranslate">var file = document.getElementById('fileItem').files[0];
-</pre>
+```js
+var file = document.getElementById('fileItem').files[0];
+```
 
-<h2 id="Method_overview" name="Method_overview">メソッドの概要</h2>
+## メソッドの概要
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td><code>File <a href="/ja/docs/Web/API/FileList#item">item</a>(index);</code></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>
+        <code>File <a href="#item">item</a>(index);</code>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Attributes" name="Attributes">プロパティ</h2>
+## プロパティ
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td class="header">属性</td>
-   <td class="header">型</td>
-   <td class="header">説明</td>
-  </tr>
-  <tr>
-   <td><code>length</code></td>
-   <td><code>integer</code></td>
-   <td>リスト内のファイル数を示す読み取り専用の値。</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td class="header">属性</td>
+      <td class="header">型</td>
+      <td class="header">説明</td>
+    </tr>
+    <tr>
+      <td><code>length</code></td>
+      <td><code>integer</code></td>
+      <td>読み取り専用で、リスト内のファイル数を示します。</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Methods" name="Methods">メソッド</h2>
+## メソッド
 
-<h3 id="item" name="item()">item()</h3>
+### item()
 
-<p><span class="short_text" id="result_box" lang="ja"><span>ファイルリスト</span><span>内の</span><span>指定されたインデックスにある</span><span>ファイルを表す</span></span> <a href="/ja/docs/Web/API/File" title="DOM/File"><code>File</code></a> オブジェクトを返す。</p>
+ファイルリスト内の指定された位置にあるファイルを表す [`File`](/ja/docs/Web/API/File) オブジェクトを返します。
 
-<pre class="notranslate"> File item(
-   index
- );
-</pre>
+     File item(
+       index
+     );
 
-<h6 id="Parameters" name="Parameters">パラメータ</h6>
+#### 引数
 
-<dl>
- <dt><code>index</code></dt>
- <dd>リストから扱うための 0 ベースのインデックス。</dd>
-</dl>
+- `index`
+  - : リストから受け取るファイルの 0 から始まる位置です。
 
-<h6 id="Return_value" name="Return_value">戻り値</h6>
+#### 返値
 
-<p>要求されたファイルを表す <a href="/ja/docs/Web/API/File" title="DOM/File"><code>File</code></a>。</p>
+要求されたファイルを表す [`File`](/ja/docs/Web/API/File) です。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<p>この例では、<code>input</code> 要素を使用して、ユーザーが選択したすべてのファイルを繰り返し処理します。</p>
+この例では、`input` 要素を使用してユーザーが選択したすべてのファイルを反復処理します。
 
-<pre class="brush:js notranslate">// fileInput は HTML の input 要素 &lt;input type="file" id="myfileinput" multiple&gt; です。
+```js
+// fileInput は HTML の input 要素 <input type="file" id="myfileinput" multiple> です。
 var fileInput = document.getElementById("myfileinput");
 
-// files は FileList オブジェクトです (NodeList に似ています)。
+// files は FileList オブジェクトです (NodeList と同様)
 var files = fileInput.files;
 var file;
 
-// files をくり返します。
-for (var i = 0; i &lt; files.length; i++) {
+// files を反復処理
+for (var i = 0; i < files.length; i++) {
 
     // get item
     file = files.item(i);
@@ -96,33 +95,35 @@ for (var i = 0; i &lt; files.length; i++) {
     file = files[i];
 
     alert(file.name);
-}</pre>
+}
+```
 
-<p>完全な例はこちら。</p>
+こちらが完全な例です。
 
-<pre class="brush:html notranslate">&lt;!DOCTYPE HTML&gt;
-&lt;html&gt;
-&lt;head&gt;
-&lt;/head&gt;
-&lt;body&gt;
-&lt;!-- multiple は複数のファイルを選択できるように設定されています。--&gt;
+```html
+<!DOCTYPE HTML>
+<html>
+<head>
+</head>
+<body>
+<!-- multiple を設定して、複数のファイルが選択できるようにしています -->
 
-&lt;input id="myfiles" multiple type="file"&gt;
+<input id="myfiles" multiple type="file">
 
-&lt;/body&gt;
+</body>
 
-&lt;script&gt;
+<script>
 
 var pullfiles=function(){
-    // クエリセレクターが好き
+    // querySelector が好き
     var fileInput = document.querySelector("#myfiles");
     var files = fileInput.files;
     // files.length をキャッシュ
     var fl = files.length;
     var i = 0;
 
-    while ( i &lt; fl) {
-        // ループ内のファイル var をローカライズする
+    while ( i < fl) {
+        // ループ内のファイル var をローカライズ
         var file = files[i];
         alert(file.name);
         i++;
@@ -133,42 +134,21 @@ var pullfiles=function(){
 document.querySelector("#myfiles").onchange=pullfiles;
 
 //a.t
-&lt;/script&gt;
+</script>
 
-&lt;/html&gt;</pre>
+</html>
+```
 
-<h2 id="Specification" name="Specification">仕様</h2>
+## 仕様書
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('File API', '#filelist-section', 'FileList')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#concept-input-type-file-selected', 'selected files')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.FileList")}}</p>
+{{Compat}}
 
-<h2 id="See_also" name="See_also">関連項目</h2>
+## 関連情報
 
-<ul>
- <li><a href="/ja/docs/Using_files_from_web_applications" title="Using files from web applications">Web アプリケーションからファイルを扱う</a></li>
- <li><a href="/ja/docs/Web/API/File" title="DOM/File"><code>File</code></a></li>
- <li><code><a href="/ja/docs/DOM/FileReader" title="DOM/FileReader">FileReader</a></code></li>
-</ul>
+- [ウェブアプリケーションからのファイルを使用](/ja/docs/Web/API/File/Using_files_from_web_applications)
+- [`File`](/ja/docs/Web/API/File)
+- [`FileReader`](/ja/docs/Web/API/FileReader)