Merge branch 'main' of github.com:vuejs-jp/learn.nuxt.com

.github/workflows/autofix.yml

@@ -26,7 +26,7 @@ jobs:
           cache: pnpm
 
       - name: Install
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Lint
         run: pnpm run lint --fix

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
           cache: pnpm
 
       - name: Install
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
 
       - name: Typecheck
         run: pnpm run typecheck

content/1.vue/1.index.md

@@ -2,21 +2,20 @@
 ogImage: true
 ---
 
-# Vue Basics
+# Vueの基本
 
-Nuxt integrates [Vue 3](https://vuejs.org/), a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.
+Nuxt は、[Vue 3](https://vuejs.org/)というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\
+エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://vuejs.org/guide/scaling-up/sfc.html)（SFC）です。
 
-What you see in the editor is a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html) (SFC).
+SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://v3.vuejs.org/guide/single-file-component.html)で詳細を読むことができます。
 
-An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a `.vue` file. It's composed with a [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
-
-In Nuxt, we support Vue SFC out-of-the-box and highly recommend you to use it to build your application. One thing that is different from Vue's default Vue SFC is that in Nuxt we [auto-import the Vue utilities](https://nuxt.com/docs/guide/concepts/auto-imports) for you, so you can use `ref`, `computed` and other Vue APIs directly without importing them.
+Nuxt では、Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます。
 
 ::note
-**Tips**: You might have heard that there are a few different ways to define a Vue component. In general, we recommend using [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) with [Composition API](https://vuejs.org/guide/introduction.html#composition-api) to get the best developer experience. If you are new to Vue, don't worry too much about understanding all different choices, you can follow what we recommend as we believe it's also the most intuitive way to get started with Vue.
+**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
 ::
 
-Going forward, we will cover the following topics:
+今後、以下のトピックについて説明します：
 
 - [Reactivity](/vue/reactivity)
 - [Composition API](/vue/composition-api)

content/1.vue/4.composition-api/.template/files/composables/useCounter.ts

@@ -0,0 +1 @@
+// Challenge

content/1.vue/4.composition-api/index.md

@@ -15,7 +15,7 @@ Nuxt では、`composables/` ディレクトリに Composables なロジック
 それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。
 
 1. 既存の vue ファイル（`app.vue`）の確認してください。
-2. カウンターロジックを Composable として切り出してください。具体的には `composables/` フォルダを作成し、その中に `useCounter.ts` というファイルを作成してください。
+2. カウンターロジックを `composables/useCounter.ts` に切り出してください。
 3. `app.vue` に 2 で切り出したロジックを適用してください。
 
 ## ヒント

content/1.vue/5.summary/index.md

@@ -1,5 +1,5 @@
-# Vue Basics Summary
+# Vueの基本のまとめ
 
-Great! You've learned the basics of Vue. If you are interested in learning more about Vue, check out the [official Vue documentation](https://vuejs.org/) for more in-depth guides and tutorials.
+おめでとうございます！これで Vue の基本を学び終わりました。さらに Vue について学びたい場合は、[公式のVueドキュメント](https://vuejs.org/)をご覧ください。より詳しいガイドやチュートリアルが用意されています。
 
-Up next, let's start to explore how Nuxt would make your development experience even better.
+次は、Nuxt がどのようにあなたの開発体験をさらに向上させるかを見ていきましょう。

content/2.concepts/3.routing/.template/files/pages/posts/[id].vue

@@ -0,0 +1 @@
+<!-- Challenge -->

content/2.concepts/3.routing/index.md

@@ -38,15 +38,13 @@ console.log(route.params.id)
 
 ## チャレンジ
 
-`/posts/[id]` というルートを作成し、 `/`, `/foo` からナビゲーション出来るように実装してみましょう。
+`/posts/[id]` というルートに対して、 `/`, `/foo` からナビゲーション出来るように実装してみましょう。
 `/posts/[id]` では、ルートパラメータから `id` を読み取り、その値を画面に表示してみましょう。
 
 そのためには:
 
-1. `pages` ディレクトリに `posts` ディレクトリを作成します。
-2. `pages/posts` ディレクトリ内に `[id].vue` ファイルを作成します。
-3. `[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。
-4. `pages/index.vue` と `pages/foo.vue` に `<NuxtLink>` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\
+1. `pages/posts/[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。
+2. `pages/index.vue` と `pages/foo.vue` に `<NuxtLink>` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\
    ここでは例として、`/posts/1` にナビゲーションするリンクを作成してみましょう。\
    (実際には値は任意のもので構いません)
 

content/2.concepts/4.auto-imports/.template/files/utils/double.ts

@@ -0,0 +1 @@
+// Challenge

content/2.concepts/4.auto-imports/index.md

@@ -43,7 +43,7 @@ export default defineNuxtConfig({
 
 ## チャレンジ
 
-実際に utils ディレクトリを作成して、Auto Import 可能な関数を実装してみましょう。
+実際に utils/double.ts ファイルに対して、Auto Import 可能な関数を実装してみましょう。
 
 関数は任意のもので構いませんが、例として「与えられた数値を二倍にして返す `double()` 関数」を実装してみましょう。\
 関数が実装できたら、`app.vue` 内の template で使用して、2 倍された数値を画面に表示してみましょう。

content/2.concepts/5.middleware/index.md

@@ -7,7 +7,7 @@ ogImage: true
 Nuxt では、特定のルートにナビゲートする前にコードを実行する為のミドルウェアを提供しています。\
 この機能は例えば、認証状態によってページへのアクセスを制限する場合などに便利です。
 
-ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの2つの種類があります。
+ミドルウェアにはグローバルミドルウェアとページ単位のミドルウェアの 2 つの種類があります。
 どちらも、`middleware` ディレクトリに実装します。
 
 ## グローバルミドルウェア

content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Foo</p>
+  <p>
+    <NuxtLink to="/">
+      Index
+    </NuxtLink>
+  </p>
+</template>

content/2.concepts/8.rendering-modes/.template/files/pages/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <h1>Rendering Modes</h1>
+  <p>Index</p>
+  <p>
+    <NuxtLink to="/foo">
+      Foo
+    </NuxtLink>
+  </p>
+</template>

content/2.concepts/8.rendering-modes/index.md

@@ -2,7 +2,6 @@
 ogImage: true
 ---
 
-
 # レンダリングモード
 
 Nuxt は様々なレンダリングモードをサポートしています。\
@@ -114,7 +113,7 @@ export default defineNuxtConfig({
 そのためには:
 
 1. `app.vue` で `NuxtPage` コンポーネントを使って、ページをレンダリングします。
-2. `/pages/index.vue` と `/pages/foo.vue` を作成し、`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません)
+2. `/pages/index.vue` と `/pages/foo.vue` で、`script setup` 内コンソールの出力を行います。(内容は任意のもので構いません)
 3. `nuxt.config` に `routeRules` を設定し、`/` と `/foo` に対して異なるキャッシュ ルールとレンダリングモードを設定します。\
    今回は、`/foo` に `ssr: false` を設定してみましょう。
 4. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。