chore: lint text

k-miyake · web-flow · commit b76bcec62033 · 2024-06-15T12:46:29.000+09:00
* textlint のルールに合わせて 0.index を修正

* textlint のルールに合わせて 1.vue/2.reactivity を修正

* textlint のルールに合わせて1.vue/3.reactivity-2 を修正

* textlint のルールに合わせて 1.vue/4.composition-api を修正

* textlint のルールに合わせて 2.concepts/2.app-vue を修正

* 2.concepts/3.routing を修正

* 2.concepts/4.auto-imports を修正

* 2.concepts/5.rendering-modes を修正

* 2.concepts/6.state-manegement を修正

* 2.concepts/1.index.md を修正
diff --git a/content/0.index.md b/content/0.index.md
@@ -19,7 +19,7 @@ Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォ
 
 ## はじめに
 
-このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は[Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークであるため、Vue の基本的なチュートリアルも提供しています。
+このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は[Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
 
 以下のトピックをクリックして学習を始めてください：
 
@@ -33,8 +33,8 @@ Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォ
 Vue と Nuxt の概念に既に精通している人向けに、実際のアプリケーションで Nuxt をどのように使用するかを理解するためのケーススタディを提供しています：
 
 ::div{.flex.flex-wrap.gap-2}
-:content-card{to="/" wip title="GitHubプロフィール" description="GitHub のカスタムユーザープロフィールを生成するウェブサイトを作成します" icon="i-ph-user-circle-duotone"}
-:content-card{to="/" wip title="Eコマース" description="商品表示、カート、ログイン機能を持つ基本的なEコマースサイトを作成します" icon="i-ph-shopping-cart-duotone"}
+:content-card{to="/" wip title="GitHub プロフィール" description="GitHub のカスタムユーザープロフィールを生成するウェブサイトを作成します" icon="i-ph-user-circle-duotone"}
+:content-card{to="/" wip title="E コマース" description="商品表示、カート、ログイン機能を持つ基本的な E コマースサイトを作成します" icon="i-ph-shopping-cart-duotone"}
 ::
 
 ## このプレイグラウンドについて
diff --git a/content/1.vue/2.reactivity/index.md b/content/1.vue/2.reactivity/index.md
@@ -4,7 +4,7 @@ ogImage: true
 
 # Reactivity Part 1
 
-Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする[優れたリアクティビティシステム](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)を提供していて、常に最新のデータをUIに反映させることができます。Vueのリアクティビティは、`ref`、`reactive`、`computed`、`watch` があります。
+Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする[優れたリアクティビティシステム](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`reactive`、`computed`、`watch` があります。
 
 - [`ref()`](https://vuejs.org/api/reactivity-core.html#ref)は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。
 
@@ -20,7 +20,7 @@ Vue はデータの変更を監視して、変更された時に更新を自動
 
 ## Challenge
 
-では、実際にやってみましょう!
+では、実際にやってみましょう！
 現在 `2` 倍にハードコードされている乗数をリアクティブに更新可能にするコードに変更してみましょう。
 
 そのためには:
@@ -30,7 +30,7 @@ Vue はデータの変更を監視して、変更された時に更新を自動
 3. `result` の実装を `count.value * multiplier.value`{lang=js} を返すように変更します
 4. `multiplier` の値を増加させるための別のボタンを追加します
 
-以上です!
+以上です！
 multiplier ボタンを押下すると、新しい乗数による変更結果を確認することができます。
 
 もし行き詰まったら、以下のボタンかエディタの右上にあるボタンをクリックして回答を見ることができます。
diff --git a/content/1.vue/3.reactivity-2/index.md b/content/1.vue/3.reactivity-2/index.md
@@ -30,7 +30,7 @@ console.log(counter.count) // -> 1
 
 ## チャレンジ問題
 
-今のプレイグラウンドは、TODO アイテムに関するデータを `todoId` と `todoData` の二つのリアクティブ値として管理しています。これらを一つの `todoData` にまとめましょう。
+今のプレイグラウンドは、TODO アイテムに関するデータを `todoId` と `todoData` の 2 つのリアクティブ値として管理しています。これらを 1 つの `todoData` にまとめましょう。
 これらのステップを実行することで、`reactive` と `watch` の理解を深めることができるのでぜひ挑戦してみてください！
 
 1. `todoData` に `id` プロパティを追加し、`todoId` を消しましょう。
@@ -42,4 +42,4 @@ console.log(counter.count) // -> 1
 もし手詰まりになったら、解決策を確認するためのボタンをクリックして、ヒントを得ることができます。
 :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
-ここまでで Vue のリアクティビティシステムの基礎について学びました。次のステップで、Vue の強力な機能の一つである「Composition API」について学びましょう！
+ここまでで Vue のリアクティビティシステムの基礎について学びました。次のステップで、Vue の強力な機能の 1 つとなっている「Composition API」について学びましょう！
diff --git a/content/1.vue/4.composition-api/index.md b/content/1.vue/4.composition-api/index.md
@@ -1,26 +1,26 @@
 # Composables とは何か ?
 
-[Composables](https://ja.vuejs.org/guide/reusability/composables.html)とは、VueのComposition APIを活用して再利用可能な状態やロジックを定義するための機能です。Options APIで主流な[mixins](https://ja.vuejs.org/api/options-composition.html#mixins)と類似したコンセプトですが、より柔軟で再利用性の高い機能を提供します。Composition APIの詳しい説明は[こちら](https://ja.vuejs.org/guide/extras/composition-api-faq.html)をご参照ください。
+[Composables](https://ja.vuejs.org/guide/reusability/composables.html)とは、Vue の Composition API を活用して再利用可能な状態やロジックを定義するための機能です。Options API で主流な[mixins](https://ja.vuejs.org/api/options-composition.html#mixins)と類似したコンセプトですが、より柔軟で再利用性の高い機能を提供します。Composition API の詳しい説明は[こちら](https://ja.vuejs.org/guide/extras/composition-api-faq.html)をご参照ください。
 
-Composablesの主な特徴は以下の通りです。
+Composables の主な特徴は以下の通りです。
 
-- **再利用可能なロジック**: Composablesを使用すると、コンポーネント間で共有したいロジックや状態をモジュールとして定義し、それを簡単にインポートして使用できます。
-- **関数として定義**: Composablesは通常、関数として定義され、必要な状態やメソッドを返します。この関数はVueのComposition APIを使用して内部で状態管理や副作用を処理します。
-- **明示的な依存関係**: Composablesを使うことで、依存関係が明示的になり、どのロジックや状態がどのコンポーネントで使用されているかが明確になります。
+- **再利用可能なロジック**: Composables を使用すると、コンポーネント間で共有したいロジックや状態をモジュールとして定義し、それを簡単にインポートして使用できます。
+- **関数として定義**: Composables は通常、関数として定義され、必要な状態やメソッドを返します。この関数は Vue の Composition API を使用して内部で状態管理や副作用を処理します。
+- **明示的な依存関係**: Composables を使うことで、依存関係が明示的になり、どのロジックや状態がどのコンポーネントで使用されているかが明確になります。
 
-Nuxtでは、`composables/`ディレクトリにComposablesなロジックを格納することが多く、[自動インポート](https://nuxt.com/docs/examples/features/auto-imports)の対象になります。
+Nuxt では、`composables/` ディレクトリに Composables なロジックを格納することが多く、[自動インポート](https://nuxt.com/docs/examples/features/auto-imports)の対象になります。
 
 ## チャレンジ問題
 
-それでは、これらの特徴を踏まえて以下のステップでロジックをComposablesとして切り出し、再利用してみましょう。
+それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。
 
-1. 既存のvueファイル（`app.vue`）の確認してください。
-2. カウンターロジックをComposableとして切り出してください。具体的には`composables/`フォルダを作成し、その中に`useCounter.ts`というファイルを作成してください。
-3. `app.vue` に2で切り出したロジックを適用してください。
+1. 既存の vue ファイル（`app.vue`）の確認してください。
+2. カウンターロジックを Composable として切り出してください。具体的には `composables/` フォルダを作成し、その中に `useCounter.ts` というファイルを作成してください。
+3. `app.vue` に 2 で切り出したロジックを適用してください。
 
 ## ヒント
 
-- Composableは関数として定義され、必要な状態やメソッドを返します。
-- `composables/`ディレクトリに作成したロジックは自動インポートが適用されます。
+- Composable は関数として定義され、必要な状態やメソッドを返します。
+- `composables/` ディレクトリに作成したロジックは自動インポートが適用されます。
 
 :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/content/2.concepts/1.index.md b/content/2.concepts/1.index.md
@@ -4,7 +4,7 @@ ogImage: true
 
 # Nuxt のコンセプト
 
-この章では、Nuxtのコアコンセプトについて説明します。
+この章では、Nuxt のコアコンセプトについて説明します。
 
 Nuxt は、直感的で拡張可能な方法で、タイプセーフで高性能で本番向けのフルスタック Web アプリケーションやウェブサイトを Vue.js で作成するための無料かつオープンソースのフレームワークです。Vue.js に慣れていない場合は、まず [Vue Basics](/vue/intro) セクションから始め、最初に [公式 Vue ドキュメント](https://vuejs.org/) を読むことをお勧めします。
 
diff --git a/content/2.concepts/2.app-vue/index.md b/content/2.concepts/2.app-vue/index.md
@@ -11,7 +11,7 @@ Nuxt では `app.vue` がアプリケーションのエントリーポイント
 次のチャプターで説明する `pages/` ディレクトリはオプショナルで、存在しない場合は vue-router の依存関係を含めません。\
 これは、ルーティングが必要ないランディングページやアプリケーションを実装する際に便利です。
 
-また、`nuxt.config.ts` を通じてアプリケーションの設定を行うことができます。(`nuxt.config.js`, `nuxt.config.mjs` も同様にサポートしています。)\
+また、`nuxt.config.ts` を通じてアプリケーションの設定を行うことができます。(`nuxt.config.js`, `nuxt.config.mjs` も同様にサポートしています)\
 デフォルトでは、ほとんどのユースケースをカバーするように構成されており、必要に応じて設定を上書きすることができます。
 詳細なオプションに関しては [Nuxt 公式ドキュメント](https://nuxt.com/docs/getting-started/configuration) をご覧ください。
 
diff --git a/content/2.concepts/3.routing/index.md b/content/2.concepts/3.routing/index.md
@@ -6,7 +6,7 @@ ogImage: true
 
 ## ファイルシステムルーター
 
-ファイルシステムルーターは Nuxt の主要機能の一つです。\
+ファイルシステムルーターは Nuxt の主要機能の 1 つです。\
 `pages/` ディレクトリ内の各 Vue ファイルが、それに対応する URL（ルート）を作成し、そのファイルの内容を表示します。\
 この例では、`pages/index.vue` が `/` に、`pages/foo.vue` が `/foo` に対応しています。\
 このルーティングは [vue-router](https://router.vuejs.org/) をベースに実装されています。
@@ -48,13 +48,13 @@ console.log(route.params.id)
 3. `[id].vue` ファイル内で `useRoute()` を使って params から `id` を取得し、画面に表示します。
 4. `pages/index.vue` と `pages/foo.vue` に `<NuxtLink>` コンポーネントを使って `/posts/[id]` にナビゲーションするリンクを作成します。\
    ここでは例として、`/posts/1` にナビゲーションするリンクを作成してみましょう。\
-   (実際には値は任意のもので構いません。)
+   (実際には値は任意のもので構いません)
 
 もし行き詰まったら、以下のボタンかエディタの右上にあるボタンをクリックして回答を見ることができます。
 
 :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
 
 ---
 
-ここで登場した、`useRoute` 関数や `<NuxtLink>` コンポーネント、Nuxt のコアコンセプトの一つである Auto Imports によって自動的に import されるため、import 文を記載することなく利用することができます。\
+ここで登場した、`useRoute` 関数や `<NuxtLink>` コンポーネント、Nuxt のコアコンセプトの 1 つとなっている Auto Imports によって自動的に import されるため、import 文を記載することなく利用することができます。\
 [Auto Imports](/concepts/auto-imports) について次のセクションでより詳しく学びましょう。
diff --git a/content/2.concepts/4.auto-imports/index.md b/content/2.concepts/4.auto-imports/index.md
@@ -4,7 +4,7 @@ ogImage: true
 
 # Auto Imports
 
-Auto Imports も Nuxt のコアコンセプトの一つです。
+Auto Imports も Nuxt のコアコンセプトの 1 つです。
 
 https://nuxt.com/docs/guide/concepts/auto-imports
 
@@ -45,7 +45,7 @@ export default defineNuxtConfig({
 
 実際に utils ディレクトリを作成して、Auto Import 可能な関数を実装してみましょう。
 
-関数は任意のもので構いませんが、例として 「与えられた数値を二倍にして返す `double()` 関数」を実装してみましょう。\
-関数が実装できたら、`app.vue` 内の template で使用して、2倍された数値を画面に表示してみましょう。
+関数は任意のもので構いませんが、例として「与えられた数値を二倍にして返す `double()` 関数」を実装してみましょう。\
+関数が実装できたら、`app.vue` 内の template で使用して、2 倍された数値を画面に表示してみましょう。
 
 :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}
diff --git a/content/2.concepts/5.rendering-modes/index.md b/content/2.concepts/5.rendering-modes/index.md
@@ -38,7 +38,7 @@ Nuxt は様々なレンダリングモードをサポートしています。\
 - パフォーマンス\
   サーバーサイドで HTML を生成し、それをブラウザが読み込むため、ブラウザ上で JavaScript によってコンテンツを生成するよりも高速です。
 - 検索エンジン最適化 (SEO)\
-  Webクローラはページのコンテンツを直接インデックスできるため、SEO に有利です。
+  Web クローラはページのコンテンツを直接インデックスできるため、SEO に有利です。
 
 ### 欠点
 
@@ -61,7 +61,7 @@ export default defineNuxtConfig({
 ```
 
 クライアントサイドレンダリングでは、アプリケーションをブラウザ上でレンダリングします。\
-ブラウザが現在のインターフェイスを作成するための命令を含むすべてのJavaScriptコードをダウンロードして解析した後、HTML要素を生成します。
+ブラウザが現在のインターフェイスを作成するための命令を含むすべての JavaScript コードをダウンロードして解析した後、HTML 要素を生成します。
 
 クライアントサイドレンダリングの利点と欠点は主に以下の通りです。
 
@@ -77,9 +77,9 @@ export default defineNuxtConfig({
 ### 欠点
 
 - パフォーマンス\
-  ユーザーはブラウザがJavaScriptファイルをダウンロード、解析、実行するのを待たなければなりません。それらに時間がかかり、ユーザーの体験に影響を与える可能性があります。
+  ユーザーはブラウザが JavaScript ファイルをダウンロード、解析、実行するのを待たなければなりません。それらに時間がかかり、ユーザーの体験に影響を与える可能性があります。
 - 検索エンジン最適化 (SEO)\
-  クライアントサイドレンダリングで配信されたコンテンツのインデックス化と更新には時間がかかるため、サーバーレンダリングのHTMLドキュメントと比べ SEO に不利です。
+  クライアントサイドレンダリングで配信されたコンテンツのインデックス化と更新には時間がかかるため、サーバーレンダリングの HTML ドキュメントと比べ SEO に不利です。
 
 ## ハイブリッドレンダリング
 
@@ -120,7 +120,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. `/` にアクセスし、コンソールの出力がサーバーとクライアントの両方で行われていることを確認します。
@@ -133,5 +133,5 @@ export default defineNuxtConfig({
 リクエストの挙動を確認することも重要です。
 
 ユニバーサルレンダリングの場合はサーバーが HTML を生成するため、ネットワークダブを確認してみるとコンテンツ内容 (主に `<div id="__nuxt">` 内)が完全なものになっているのに対し、クライアントサイドレンダリングの場合は、HTML が空の状態で JavaScript によってコンテンツが生成されていることが確認できます。\
-(ダウンロードした JavaScript も別のリクエストとして観測することができます。)
+(ダウンロードした JavaScript も別のリクエストとして観測することができます)
 :::
diff --git a/content/2.concepts/6.state-manegement/index.md b/content/2.concepts/6.state-manegement/index.md
