2021/09/15 時点の英語版に同期

1 files changed, 49 insertions, 52 deletions

diff --git a/files/ja/web/api/file/name/index.md b/files/ja/web/api/file/name/index.md
index eadfb295be..7413141d01 100644
--- a/files/ja/web/api/file/name/index.md
+++ b/files/ja/web/api/file/name/index.md
@@ -4,68 +4,65 @@ slug: Web/API/File/name
 tags:
   - API
   - File API
-  - Files
-  - Property
-  - Reference
+  - ファイル
   - プロパティ
+  - リファレンス
+browser-compat: api.File.name
 translation_of: Web/API/File/name
 ---
-<div>{{APIRef("File API")}}</div>
+{{APIRef("File API")}}
 
-<p>{{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。</p>
+{{domxref("File")}} オブジェクトによって表されるファイルの名前を返します。セキュリティ上の理由から、パスはこのプロパティから除外されます。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>name</var> = <var>file</var>.name;</pre>
+```js
+var name = file.name;
+```
 
-<h2 id="Value" name="Value">値</h2>
+## 値
 
-<p>"My Resume.rtf" のように、パスのないファイルの名前を含む文字列。</p>
+パスを除いたファイル名の入った文字列。 "My Resume.rtf" など。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<pre class="brush: html">&lt;input type="file" multiple onchange="processSelectedFiles(this)"&gt;
-</pre>
+```html
+<input type="file" multiple onchange="processSelectedFiles(this)">
 
-<pre class="brush: js">function processSelectedFiles(fileInput) {
-  var files = fileInput.files;
+<div id="output"></div>
+```
 
-  for (var i = 0; i &lt; files.length; i++) {
-    alert("Filename " + files[i].name);
+```js
+const output = document.querySelector("#output");
+function processSelectedFiles(fileInput) {
+  let files = fileInput.files;
+  output.textContent = "選択されたファイルのリスト:";
+
+  for (let i = 0; i < files.length; i++) {
+    output.textContent += `\nファイル名: ${files[i].name}`;
   }
-}</pre>
-
-<p>以下の結果を確認してください。</p>
-
-<p>{{ EmbedLiveSample('Example', 300, 50) }}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</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', '#file-attrs', 'name')}}</td>
-   <td>{{Spec2('File API')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.File.name")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/API/File/Using_files_from_web_applications">ウェブアプリケーションからのファイルの扱い</a></li>
-</ul>
+}
+```
+
+```css hidden
+#output{
+  padding: 0.5em 0;
+  white-space: pre;
+}
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Example', 300, 100) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File/Using_files_from_web_applications)