diff --git a/README.md b/README.md index 8866c4475..fd3280854 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,11 @@ +> [!IMPORTANT] +> **learn.svelte.dev の日本語化プロジェクトは、以下のリポジトリに統合されました！** +> +> https://github.com/svelte-jp/svelte.dev +> + +--- + # learn.svelte.dev A soup-to-nuts interactive tutorial on how to build apps with Svelte. @@ -28,4 +36,4 @@ Tutorials live inside `content`. Each tutorial consists of a `README.md`, which ## Bumping tutorial dependencies -Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`). \ No newline at end of file +Bump the dependency (for example Svelte) in both the root and the `content/common` `package.json`. In the root do `pnpm i` (to update `pnpm-lock.yaml`), in `content/common` do `npm i` (to update `package-lock.json`). diff --git a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md index 0701a6901..a8bbd74d6 100644 --- a/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md +++ b/content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md @@ -1,30 +1,30 @@ --- -title: Welcome to Svelte +title: Svelte にようこそ --- -Welcome to the Svelte tutorial! This will teach you everything you need to know to easily build web applications of all sizes, with high performance and a small footprint. +Svelte チュートリアルにようこそ！ここでは、高速でフットプリントが小さい、あらゆるサイズの Web アプリケーションを簡単に構築するために必要なこと全てを学ぶことができます。 -You can also consult the [API docs](https://svelte.dev/docs) and the [examples](https://svelte.dev/examples), or — if you're impatient to start hacking on your machine locally — create a project with `npm init svelte`. +[API ドキュメント](https://svelte.jp/docs) や [examples](https://svelte.dev/examples) を参照することもできます。また、すぐにローカルで動かしたい場合は、`npm init svelte` を実行してプロジェクトを作成してください。 -## What is Svelte? +## Svelte とは？ -Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app _declaratively_ out of components that combine markup, styles and behaviours. +Svelte は、web アプリケーションを構築するためのツールです。他のユーザーインターフェースフレームワークと同様、マークアップ(markup)、スタイル(styles)、振る舞い(behaviours) を組み合わせたコンポーネントでアプリを _宣言的(declaratively)_ に構築することができます。 -These components are _compiled_ into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks. +これらのコンポーネントは小さくて効率的な JavaScript モジュールに _コンパイル_ されるため、従来の UI フレームワークには付き物だったオーバーヘッドがありません。 -You can build your entire app with Svelte (for example, using an application framework like [SvelteKit](https://kit.svelte.dev), which this tutorial will cover), or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere. +アプリ全体を Svelte で作ることもできますし (例えば [SvelteKit](https://kit.svelte.jp) のようなアプリケーションフレームワークを使用して。SvelteKit はこのチュートリアルで学習できます)、既存のコードベースに部分的/段階的に追加することもできます。また、どんな場所でも機能するスタンドアロンパッケージとしてコンポーネントを配布することもできます。 -## How to use this tutorial +## このチュートリアルの使い方 -> You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte. +> Svelte を理解するには、HTML、CSS、JavaScript の基本的な知識が必要です。 -This tutorial is split into four main parts: +このチュートリアルは大きく4つのパートに分かれています: -- [Basic Svelte](/tutorial/welcome-to-svelte) (you are here) +- [Basic Svelte](/tutorial/welcome-to-svelte) (現在はこちらです) - [Advanced Svelte](/tutorial/tweens) - [Basic SvelteKit](/tutorial/introducing-sveltekit) - [Advanced SvelteKit](/tutorial/optional-params) -Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above. +各セクションには、機能を解説するために作られた練習問題があります。後のセクションの練習問題は、それより前のセクションの練習問題で得た知識を土台として作られているので、最初から最後まで通しで学習することをおすすめします。必要に応じて、上部のメニューから移動することができます。 -If you get stuck, you can click the `solve` button to the left of the editorin the top right of the editor view. (Use the toggle below to switch between tutorial and editor views. The `solve` button is disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor. +行き詰まったら、エディタの左にあるエディタ表示の右上にある `正解を見る` ボタンをクリックすることもできます。(チュートリアル表示とエディタ表示を切り替えるには下のトグルを使用してください。`正解を見る` ボタンはここのように練習問題がないセクションでは無効化されています。) ただし、これに頼りすぎないようにしてください。提示されたコードブロックをどこに配置するか自分で考え、エディタに手入力することで、より早く学習することができます。 diff --git a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md index ac4bb6c52..701cb5335 100644 --- a/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md +++ b/content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md @@ -2,13 +2,13 @@ title: Your first component --- -In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a `.svelte` file. The `App.svelte` file, open in the code editor to the right, is a simple component. +Svelteでは、アプリケーションは1つ以上の*コンポーネント*で構成されます。コンポーネントとは、HTML、CSS、JavaScript をカプセル化した再利用可能な自己完結型のコードブロックのことで、`.svelte` ファイルに記述します。右のコードエディタにある `App.svelte` は単純なコンポーネントの例です。 ## Adding data -A component that just renders some static markup isn't very interesting. Let's add some data. +静的なマークアップ(HTML)をレンダリングするだけでは面白くありません。いくつかデータを追加してみましょう。 -First, add a script tag to your component and declare a `name` variable: +まず、`script` タグを追加してその中に `name` 変数を宣言します。 ```svelte /// file: App.svelte @@ -19,14 +19,14 @@ First, add a script tag to your component and declare a `name` variable:

Hello world!

``` -Then, we can refer to `name` in the markup: +次に、マークアップから `name` を参照します。 ```svelte /// file: App.svelte

Hello +++{name}+++!

``` -Inside the curly braces, we can put any JavaScript we want. Try changing `name` to `name.toUpperCase()` for a shoutier greeting. +中括弧`{}`の中にはJavaScriptのコードを置くことができます。中括弧の中の `name` を `name.toUpperCase()` に置き換えてみましょう。 ```svelte /// file: App.svelte diff --git a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md index 6c325239f..3dc44614f 100644 --- a/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md +++ b/content/tutorial/01-svelte/01-introduction/03-dynamic-attributes/README.md @@ -2,33 +2,33 @@ title: Dynamic attributes --- -Just like you can use curly braces to control text, you can use them to control element attributes. +テキストをコントロールするのに中括弧を使えるのと同じように、要素の属性をコントロールするのに中括弧を使うことができます。 -Our image is missing a `src` — let's add one: +画像 (image) に `src` がありません。これを追加してみましょう。 ```svelte /// file: App.svelte ``` -That's better. But if you hover over the `` in the editor, Svelte is giving us a warning: +これでよくなりました。しかし、エディタの `` をホバーすると、警告が表示されているのがわかります。 > A11y: <img> element should have an alt attribute -When building web apps, it's important to make sure that they're _accessible_ to the broadest possible userbase, including people with (for example) impaired vision or motion, or people without powerful hardware or good internet connections. Accessibility (shortened to a11y) isn't always easy to get right, but Svelte will help by warning you if you write inaccessible markup. +Webアプリケーションは、例えば視覚や動作に障害のある方や、高スペックな端末や高速なインターネット回線を持っていない方など、可能な限り幅広いユーザーにとって*使いやすいものである*ことが重要です。アクセシビリティ(Accessibility、略:a11y)を正しく行うことは簡単ではありませんが、Svelteは警告を表示してa11yを正しく行う手助けをしてくれます。 -In this case, we're missing the `alt` attribute that describes the image for people using screenreaders, or people with slow or flaky internet connections that can't download the image. Let's add one: +この場合、スクリーンリーダー(画面読み上げソフト)を使用するユーザーやインターネット回線が低速・不安定で画像をダウンロードできないユーザーに必要な`alt`という画像を説明する属性が足りていません。追加しましょう。 ```svelte /// file: App.svelte ``` -We can use curly braces _inside_ attributes. Try changing it to `"{name} dances."` — remember to declare a `name` variable in the `+++ ``` -...and include a `` component: +…そして `` コンポーネントを使用します。 ```svelte /// file: App.svelte @@ -21,6 +21,6 @@ Add a ` ``` -> Just like `$:`, this may feel a little weird at first. That's not how `export` normally works in JavaScript modules! Just roll with it for now — it'll soon become second nature. +> `$:`と同じように、最初は少し奇妙に感じるかもしれません。これはJavaScriptモジュールの通常の`export`とは動作が異なりますので！とりあえず今は使っていってください。すぐに慣れるでしょう。 diff --git a/content/tutorial/01-svelte/03-props/02-default-values/README.md b/content/tutorial/01-svelte/03-props/02-default-values/README.md index 2306e80c5..7472b63d1 100644 --- a/content/tutorial/01-svelte/03-props/02-default-values/README.md +++ b/content/tutorial/01-svelte/03-props/02-default-values/README.md @@ -2,7 +2,7 @@ title: Default values --- -We can easily specify default values for props in `Nested.svelte`: +`Nested.svelte`のプロパティのデフォルト値を簡単に指定することができます。 ```svelte /// file: Nested.svelte @@ -11,7 +11,7 @@ We can easily specify default values for props in `Nested.svelte`: ``` -If we now add a second component _without_ an `answer` prop, it will fall back to the default: +`answer`プロパティなしで2つ目のコンポーネントを追加すると、デフォルト値にフォールバックします。 ```svelte /// file: App.svelte diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/README.md b/content/tutorial/01-svelte/03-props/03-spread-props/README.md index 557ee2961..d38ae0e56 100644 --- a/content/tutorial/01-svelte/03-props/03-spread-props/README.md +++ b/content/tutorial/01-svelte/03-props/03-spread-props/README.md @@ -2,9 +2,9 @@ title: Spread props --- -In this exercise, we've forgotten to specify the `version` prop expected by `PackageInfo.svelte`, meaning it shows 'version undefined'. +この練習問題では、`PackageInfo.svelte` が期待する `version` プロパティを指定し忘れているため、'version undefined' が表示されています。 -We _could_ fix it by adding the `version` prop... +`version` プロパティを追加することで、これを修正できます… ```svelte /// file: App.svelte @@ -16,11 +16,11 @@ We _could_ fix it by adding the `version` prop... /> ``` -...but since the properties of `pkg` correspond to the component's expected props, we can 'spread' them onto the component instead: +…しかし、`pkg` のプロパティはこのコンポーネントが期待するプロパティに対応しているので、代わりに 'spread' 構文を使用することができます: ```svelte /// file: App.svelte ``` -> Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with `export`, you can do so by accessing `$$props` directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases. +> 逆に、`export`で宣言されていないものも含め、もしコンポーネントに渡されたすべてのプロパティ(props)を参照する必要がある場合は、`$$props`で直接参照することができます。これは、Svelteの最適化が難しいため、一般的には推奨されませんが、ごくまれなケースでは便利です。 diff --git a/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md b/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md index 845b4ab99..7a8a2175d 100644 --- a/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/01-if-blocks/README.md @@ -2,9 +2,9 @@ title: If blocks --- -HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does. +HTML には条件式やループのような *ロジック* を表現する方法がありません。Svelteにはあります。 -To conditionally render some markup, we wrap it in an `if` block. Let's add some text that appears when `count` is greater than `10`: +条件付きでマークアップをレンダリングする場合は、そのマークアップを `if` ブロックで囲みます。`count` が 10 より大きいときに表示されるテキストを追加してみましょう: ```svelte /// file: App.svelte @@ -18,4 +18,4 @@ To conditionally render some markup, we wrap it in an `if` block. Let's add some {/if}+++ ``` -Try it — update the component, and click on the button. +試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。 diff --git a/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md b/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md index f342c1188..c37981339 100644 --- a/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/02-else-blocks/README.md @@ -2,7 +2,7 @@ title: Else blocks --- -Just like in JavaScript, an `if` block can have an `else` block: +JavaScript と同じように、`if` ブロックには `else` ブロックを置くことができます: ```svelte /// file: App.svelte @@ -13,4 +13,4 @@ Just like in JavaScript, an `if` block can have an `else` block: {/if} ``` -> A `#` character always indicates a _block opening_ tag. A `/` character always indicates a _block closing_ tag. A `:` character, as in `{:else}`, indicates a _block continuation_ tag. Don't worry — you've already learned almost all the syntax Svelte adds to HTML. +> `#` の文字は常に _ブロックの開始_ タグを示します。 `/` の文字は常に *ブロックの終了* タグを示します。 `:` の文字は `{:else}` のように _ブロックの継続_ タグを示します。心配しないでください。あなたは既にSvelteがHTMLに追加する構文のほとんどを学んでいます。 diff --git a/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md b/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md index 22ea202a9..72718d256 100644 --- a/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md @@ -2,7 +2,7 @@ title: Else-if blocks --- -Multiple conditions can be 'chained' together with `else if`: +複数の条件を `else if` と一緒に '連結' することができます。 ```svelte /// file: App.svelte diff --git a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md index 3011cbb8f..f2eafaa7a 100644 --- a/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md +++ b/content/tutorial/01-svelte/04-logic/04-each-blocks/README.md @@ -2,9 +2,9 @@ title: Each blocks --- -When building user interfaces you'll often find yourself working with lists of data. In this exercise, we've repeated the ` ``` -The full list of modifiers: +イベント修飾子の一覧: -- `preventDefault` — calls `event.preventDefault()` before running the handler. Useful for client-side form handling, for example. -- `stopPropagation` — calls `event.stopPropagation()`, preventing the event reaching the next element -- `passive` — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) -- `nonpassive` — explicitly set `passive: false` -- `capture` — fires the handler during the [_capture_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture) phase instead of the [_bubbling_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling) phase -- `once` — remove the handler after the first time it runs -- `self` — only trigger handler if event.target is the element itself -- `trusted` — only trigger handler if `event.isTrusted` is `true`, meaning the event was triggered by a user action rather than because some JavaScript called `element.dispatchEvent(...)` +* `preventDefault` — ハンドラを実行する前に `event.preventDefault()` を呼び出します。たとえば、クライアントのフォーム処理に役立ちます。 +* `stopPropagation` — 次の要素にイベントが伝播しないように `event.stopPropagation()` を呼び出します。 +* `passive` — タッチ/ホイールイベントでスクロールのパフォーマンスを向上させます（Svelte が安全な場所に自動的に追加します）。 +* `nonpassive` — `passive: false` を明示的に設定します。 +* `capture` — [_バブリング(bubbling)_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling) フェーズではなく、[_キャプチャ(capture)_](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#event_capture) フェーズ中にハンドラを起動します。 +* `once` — ハンドラを最初に実行した後に削除します。 +* `self` — 設定した要素が event.target の場合にのみ、ハンドラをトリガします。 +* `trusted` — `event.isTrusted` が `true` の場合にのみハンドラをトリガします。つまり、JavaScript が `element.dispatchEvent(...)` を呼び出した場合は `true` にならず、ユーザーのアクションによってイベントがトリガされた場合は `true` になります。 -You can chain modifiers together, e.g. `on:click|once|capture={...}`. +イベント修飾子を連結することができます。（例）`on:click|once|capture={...}` diff --git a/content/tutorial/01-svelte/05-events/04-component-events/README.md b/content/tutorial/01-svelte/05-events/04-component-events/README.md index 12457f8ed..95f4674d3 100644 --- a/content/tutorial/01-svelte/05-events/04-component-events/README.md +++ b/content/tutorial/01-svelte/05-events/04-component-events/README.md @@ -2,7 +2,7 @@ title: Component events --- -Components can also dispatch events. To do so, they must create an event dispatcher. Update `Inner.svelte`: +コンポーネントはイベントを発信することもできます。そのためには、イベントディスパッチャを作成する必要があります。`Inner.svelte` を更新してください。 ```svelte /// file: Inner.svelte @@ -19,13 +19,13 @@ Components can also dispatch events. To do so, they must create an event dispatc ``` -> `createEventDispatcher` must be called when the component is first instantiated — you can't do it later inside e.g. a `setTimeout` callback. This links `dispatch` to the component instance. +> `createEventDispatcher` はコンポーネントを最初にインスタンス化するときに呼び出す必要があります。（後から `setTimeout` のコールバックなどの内側で呼び出すことはできません。）これにより `dispatch` をコンポーネントインスタンスに関連づけます。 -Then, add an `on:message` handler in `App.svelte`: +それから、`App.svelte` に `on:message` ハンドラを追加します: ```svelte /// file: App.svelte ``` -> You can also try changing the event name to something else. For instance, change `dispatch('message', {...})` to `dispatch('greet', {...})` in `Inner.svelte` and change the attribute name from `on:message` to `on:greet` in `App.svelte`. +> イベント名を別の名前に変更してみることもできます。例えば、`Inner.svelte` の `dispatch('message', {...})` を `dispatch('greet', {...})` に変更し、`App.svelte` の属性名を `on:message` から `on:greet` に変更します。 diff --git a/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md b/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md index 408e64dfa..a58647aef 100644 --- a/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md +++ b/content/tutorial/01-svelte/05-events/05-event-forwarding/README.md @@ -2,11 +2,11 @@ title: Event forwarding --- -Unlike DOM events, component events don't _bubble_. If you want to listen to an event on some deeply nested component, the intermediate components must _forward_ the event. +DOM イベントとは異なり、コンポーネントのイベントは *バブル* しません。もし深くネストされたコンポーネントでイベントをリッスンする場合、中間コンポーネントはイベントを *フォワード* する必要があります。 -In this case, we have the same `App.svelte` and `Inner.svelte` as in the [previous chapter](/tutorial/component-events), but there's now an `Outer.svelte` component that contains ``. +今回のケースでは、[前のチャプタ](/tutorial/component-events)と同じように `App.svelte` と `Inner.svelte` がありますが、`` を含む `Outer.svelte` コンポーネントがあります。 -One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer.svelte`, listening for the `message` event, and creating a handler for it: +この問題を解決する方法の1つは、`Outer.svelte` に `createEventDispatcher` を追加して、`message` イベントをリッスンして、そのハンドラを作成することです。 ```svelte /// file: Outer.svelte @@ -24,7 +24,7 @@ One way we _could_ solve the problem is adding `createEventDispatcher` to `Outer ``` -But that's a lot of code to write, so Svelte gives us an equivalent shorthand — an `on:message` event directive without a value means 'forward all `message` events'. +しかし、これでは書くコードが多いので、Svelte は同等のショートハンドを提供します。値のない `on:message` イベントディレクティブは「全ての `message` イベントをフォワードする」ことを意味します。 ```svelte /// file: Outer.svelte diff --git a/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md b/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md index 245d1177b..df08db81b 100644 --- a/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md +++ b/content/tutorial/01-svelte/05-events/06-dom-event-forwarding/README.md @@ -2,9 +2,9 @@ title: DOM event forwarding --- -Event forwarding works for DOM events too. +イベントフォワーディングは DOM イベントでも機能します。 -We want to get notified of clicks on our `` — to do that, we just need to forward `click` events on the `