Merge remote-tracking branch 'sveltejs/main' into update-up-to-20230321

Author: tomoam

content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md

@@ -11,6 +11,7 @@ Svelteでは、アプリケーションは1つ以上の*コンポーネント*
 まず、`script` タグを追加してその中に `name` 変数を宣言します。
 
 ```svelte
+/// file: App.svelte
 +++<script>
 	let name = 'Svelte';
 </script>+++
@@ -21,11 +22,13 @@ Svelteでは、アプリケーションは1つ以上の*コンポーネント*
 次に、マークアップから `name` を参照します。
 
 ```svelte
+/// file: App.svelte
 <h1>Hello +++{name}+++!</h1>
 ```
 
 中括弧`{}`の中にはJavaScriptのコードを置くことができます。中括弧の中の `name` を `name.toUpperCase()` に置き換えてみましょう。
 
 ```svelte
+/// file: App.svelte
 <h1>Hello {name+++.toUpperCase()+++}!</h1>
 ```

content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md

@@ -7,6 +7,7 @@ title: Dynamic attributes
 画像 (image) に `src` がありません。これを追加してみましょう。
 
 ```svelte
+/// file: App.svelte
 <img +++src={src}+++ />
 ```
 
@@ -19,6 +20,7 @@ Webアプリケーションは、例えば視覚や動作に障害のある方
 この場合、スクリーンリーダー(画面読み上げソフト)を使用するユーザーやインターネット回線が低速・不安定で画像をダウンロードできないユーザーに必要な`alt`という画像を説明する属性が足りていません。追加しましょう。
 
 ```svelte
+/// file: App.svelte
 <img src={src} +++alt="A man dances."+++ />
 ```
 
@@ -29,5 +31,6 @@ Webアプリケーションは、例えば視覚や動作に障害のある方
 `src={src}`のように、属性の名前と値の変数が一致することは珍しくありません。このような場合、Svelteでは省略して書くことができます。
 
 ```svelte
+/// file: App.svelte
 <img +++{src}+++ alt="A man dances." />
 ```

content/tutorial/01-svelte/01-introduction/04-styling/README.md

@@ -5,6 +5,7 @@ title: Styling
 HTMLと同じように、コンポーネントには`<style>`タグを置くことができます。`<p>`要素にいくつかスタイルを追加してみましょう。
 
 ```svelte
+/// file: App.svelte
 <p>This is a paragraph.</p>
 
 <style>

content/tutorial/01-svelte/01-introduction/05-nested-components/README.md

@@ -7,6 +7,7 @@ title: Nested components
 `<script>` タグを追加して `Nested.svelte` をインポートしましょう…
 
 ```svelte
+/// file: App.svelte
 +++<script>
 	import Nested from './Nested.svelte';
 </script>+++
@@ -15,6 +16,7 @@ title: Nested components
 …そして `<Nested />` コンポーネントを使用します。
 
 ```svelte
+/// file: App.svelte
 <p>This is a paragraph.</p>
 +++<Nested />+++
 ```

content/tutorial/01-svelte/02-reactivity/01-reactive-assignments/README.md

@@ -7,12 +7,14 @@ Svelteの中心には、DOMを（例えば、イベントに応じて）アプ
 これを実演するには、まずイベントハンドラ (これは[後ほど](/tutorial/dom-events)学習します) を定義する必要があります。
 
 ```svelte
+/// file: App.svelte
 <button +++on:click={increment}+++>
 ```
 
 `increment` 関数の内側で必要なのは `count` の値を変更することだけです。
 
 ```js
+/// file: App.svelte
 function increment() {
 	+++count += 1;+++
 }

content/tutorial/01-svelte/02-reactivity/02-reactive-declarations/README.md

@@ -7,6 +7,7 @@ Svelte は、コンポーネントの状態が変更されると自動的に DOM
 これに対応するために、 _リアクティブ宣言(reactive declarations)_ があります。次のように記述します。
 
 ```js
+/// file: App.svelte
 let count = 0;
 +++$: doubled = count * 2;+++
 ```
@@ -16,6 +17,7 @@ let count = 0;
 マークアップで `doubled` を使ってみましょう。
 
 ```svelte
+/// file: App.svelte
 <button>...</button>
 
 +++<p>{count} doubled is {doubled}</p>+++

content/tutorial/01-svelte/02-reactivity/03-reactive-statements/README.md

@@ -5,6 +5,7 @@ title: Statements
 リアクティブな *値* を宣言するだけでなく、任意の *ステートメント* をリアクティブに実行することもできます。例えば、`count` の値が変化するたびにログを取ることができます。
 
 ```js
+/// file: App.svelte
 let count = 0;
 
 +++$: console.log(`the count is ${count}`);+++
@@ -13,6 +14,7 @@ let count = 0;
 ブロックで簡単にステートメントをグループ化することができます。
 
 ```js
+/// file: App.svelte
 $: +++{+++
 	console.log(`the count is ${count}`);
 	alert(`I SAID THE COUNT IS ${count}`);
@@ -22,6 +24,7 @@ $: +++{+++
 `if` ブロックなどの前に `$:` を置くこともできます。
 
 ```js
+/// file: App.svelte
 $: +++if (count >= 10)+++ {
 	alert('count is dangerously high!');
 	count = 0;

content/tutorial/01-svelte/02-reactivity/04-updating-arrays-and-objects/README.md

@@ -7,6 +7,7 @@ Svelte のリアクティビティは代入によってトリガーされるた
 これを修正する方法の1つとして、冗長に見えるかもしれませんが、代入を追加することです。
 
 ```js
+/// file: App.svelte
 function addNumber() {
 	numbers.push(numbers.length + 1);
 	+++numbers = numbers;+++
@@ -16,6 +17,7 @@ function addNumber() {
 もう少し慣用的な解決策もあります。
 
 ```js
+/// file: App.svelte
 function addNumber() {
 	numbers = +++[...numbers, numbers.length + 1];+++
 }
@@ -26,6 +28,7 @@ function addNumber() {
 配列やオブジェクトの *プロパティ* への代入（例：`obj.foo += 1` や `array[i] = x`）は値自体への代入と同じように動作します。
 
 ```js
+/// file: App.svelte
 function addNumber() {
 	numbers[numbers.length] = numbers.length + 1;
 }
@@ -34,6 +37,7 @@ function addNumber() {
 大まかなまとめ: 更新される変数の名前は、代入の左側に置かなければならない。例えばこれは…
 
 ```js
+/// no-file
 const foo = obj.foo;
 foo.bar = 'baz';
 ```

content/tutorial/01-svelte/03-props/01-declaring-props/README.md

@@ -7,6 +7,7 @@ title: Declaring props
 実際のアプリケーションでは、あるコンポーネントから、その子コンポーネントにデータを渡す必要があります。そのためには、*プロパティ(properties)*を宣言する必要があります。通常は 'props'と省略されます。Svelteでは、`export`というキーワードを使用してこれを行います。`Nested.svelte`コンポーネントを編集してみましょう。
 
 ```svelte
+/// file: Nested.svelte
 <script>
 	+++export+++ let answer;
 </script>