chore: link and format

content/1.vue/1.index.md

@@ -4,15 +4,15 @@ ogImage: true
 
 # Vueの基本
 
-Nuxt は、[Vue 3](https://vuejs.org/)というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\
-エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://vuejs.org/guide/scaling-up/sfc.html)（SFC）です。
+Nuxt は、[Vue.js](https://ja.vuejs.org/) というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\
+エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc)（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)で詳細を読むことができます。
+SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://ja.vuejs.org/guide/scaling-up/sfc) で詳細を読むことができます。
 
-Nuxt では、Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます。
+Nuxt では Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports) することです。そのため、`ref`、`computed` などの Vue API を直接インポートせずに使用することができます。
 
 ::note
-**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
+**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には [Composition API](https://ja.vuejs.org/guide/introduction) を使用した [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
 ::
 
 今後、以下のトピックについて説明します：

content/1.vue/2.reactivity/index.md

@@ -4,11 +4,11 @@ ogImage: true
 
 # Reactivity Part 1
 
-Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする[優れたリアクティビティシステム](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`reactive`、`computed`、`watch` があります。
+Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`reactive`、`computed`、`watch` があります。
 
-- [`ref()`](https://vuejs.org/api/reactivity-core.html#ref)は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。
+- [`ref()`](https://ja.vuejs.org/api/reactivity-core#ref) は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。
 
-- [`computed()`](https://vuejs.org/api/reactivity-core.html#computed)は getter 関数を受け取り、getter からの返り値を反映した `ref` オブジェクトを返します。
+- [`computed()`](https://ja.vuejs.org/api/reactivity-core#computed) は getter 関数を受け取り、getter からの返り値を反映した `ref` オブジェクトを返します。
 
 ここのプレイグラウンドでは、数字を保持するための `count` という名前の ref オブジェクトと、`count` の倍の値を計算する `double` という名前の computed オブジェクトを作成します。Vue は `double` が `count` に依存していることを知っているため、`count` が変更された際に `double` は自動で再計算されます。
 

content/1.vue/3.reactivity-2/index.md

@@ -20,13 +20,13 @@ console.log(counter.count) // -> 1
 
 ::note
 **注意**: よくある間違いとして、`ref` はプリミティブな値のみに対応し、オブジェクトには `reactive` を使うという誤解があります。実際は `ref` でも `ref({ count: 0 })` のようにオブジェクトをリアクティブな値として宣言することができます。
-また、`reactive` には[いくつかの制限事項がある](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals#limitations-of-reactive)ため、リアクティブな状態を宣言する際は基本的に `ref` を用いるのが推奨されます。
+また、`reactive` には [いくつかの制限事項がある](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals#limitations-of-reactive) ため、リアクティブな状態を宣言する際は基本的に `ref` を用いるのが推奨されます。
 ::
 
 `watch` は `computed` と同様にリアクティブ値の変化に応じて作用しますが、主に `console.log` や `fetch` のような副作用をリアクティブに実行するときに使います。
 プレイグラウンドでは、サーバーで管理している TODO アイテムを表示していますが、表示する ID が変化したときに新しいアイテムを取得するために `watch` による監視をしています。
 
-`watch` に関する詳しい説明は[ウォッチャーガイド](https://ja.vuejs.org/guide/essentials/watchers)を参照してください。
+`watch` に関する詳しい説明は [ウォッチャーガイド](https://ja.vuejs.org/guide/essentials/watchers) を参照してください。
 
 ## チャレンジ問題
 

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

@@ -1,14 +1,14 @@
 # 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 は通常、関数として定義され、必要な状態やメソッドを返します。この関数は 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) の対象になります。
 
 ## チャレンジ問題