chore: overall vue section (#62)

* chore: overall

* chore: disable autofix.ci

Author: ubugeeei

.github/workflows/autofix.yml

@@ -1,34 +1,34 @@
-name: autofix.ci
+# name: autofix.ci
 
-on:
-  push:
-    branches:
-      - main
+# on:
+#   push:
+#     branches:
+#       - main
 
-  pull_request:
-    branches:
-      - main
+#   pull_request:
+#     branches:
+#       - main
 
-jobs:
-  autofix:
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
+# jobs:
+#   autofix:
+#     runs-on: ubuntu-latest
+#     timeout-minutes: 10
 
-    steps:
-      - uses: actions/checkout@v4
+#     steps:
+#       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v4
+#       - uses: pnpm/action-setup@v4
 
-      - name: Use Node.js lts/*
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: pnpm
+#       - name: Use Node.js lts/*
+#         uses: actions/setup-node@v4
+#         with:
+#           node-version: lts/*
+#           cache: pnpm
 
-      - name: Install
-        run: pnpm install --frozen-lockfile
+#       - name: Install
+#         run: pnpm install --frozen-lockfile
 
-      - name: Lint
-        run: pnpm run lint --fix
+#       - name: Lint
+#         run: pnpm run lint --fix
 
-      - uses: autofix-ci/action@v1
+#       - uses: autofix-ci/action@v1

content/0.index.md

@@ -15,11 +15,11 @@ ogImage:
 
 ## Nuxt とは?
 
-Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で[オープンソースのフレームワーク](https://github.com/nuxt/nuxt)です。Nuxt はベンダーロックインがなく、アプリケーションを[**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge)デプロイすることができます。
+Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で [オープンソースのフレームワーク](https://github.com/nuxt/nuxt) です。Nuxt はベンダーロックインがなく、アプリケーションを [**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge) デプロイすることができます。
 
 ## はじめに
 
-このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は[Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
+このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は [Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
 
 以下のトピックをクリックして学習を始めてください：
 

content/1.vue/2.reactivity/.template/files/app.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 const count = ref(1)
 const doubled = computed(() => count.value * 2)
 

content/1.vue/2.reactivity/.template/solutions/app.vue

@@ -1,11 +1,12 @@
-<script setup>
+<script setup lang="ts">
 const count = ref(1)
 const multiplier = ref(2)
 const result = computed(() => count.value * multiplier.value)
 
 function increment() {
   count.value++
 }
+
 function multiply() {
   multiplier.value++
 }

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

@@ -2,9 +2,9 @@
 ogImage: true
 ---
 
-# Reactivity Part 1
+# リアクティビティー パート１
 
-Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`reactive`、`computed`、`watch` があります。
+Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`computed`、`watch` があります。
 
 - [`ref()`](https://ja.vuejs.org/api/reactivity-core#ref) は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。
 
@@ -18,7 +18,7 @@ Vue はデータの変更を監視して、変更された時に更新を自動
 **注意**: `<template>` 内で参照された場合、refs は Vue によって自動的にアンラップされます。`.value` は、`<script>` 内や Vue コンポーネント外の JavaScript でアクセスする時にのみ必要になります。
 ::
 
-## Challenge
+## チャレンジ
 
 では、実際にやってみましょう！
 現在 `2` 倍にハードコードされている乗数をリアクティブに更新可能にするコードに変更してみましょう。

content/1.vue/3.reactivity-2/.template/files/app.vue

@@ -1,38 +1,42 @@
 <script setup lang="ts">
-let todoId = 1
+const id = ref(1)
 
-const todoData = reactive({
-  loading: false,
-  data: null,
-})
+const loading = ref(false)
+
+const data = ref<{
+  userId: number
+  id: number
+  title: string
+  completed: boolean
+} | null>(null)
 
 function increment() {
-  todoId++
+  id.value++
 }
 
 async function fetchTodo() {
-  todoData.loading = true
+  loading.value = true
   try {
-    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
-    todoData.data = await res.json()
+    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id.value}`)
+    data.value = await res.json()
   }
   finally {
-    todoData.loading = false
+    loading.value = false
   }
 }
 
-watch(todoId, fetchTodo, { immediate: true })
+watch(id, fetchTodo, { immediate: true })
 </script>
 
 <template>
   <div>
-    <p>ID: {{ todoId }}</p>
-    <button type="button" :disabled="todoData.loading" @click="increment">
+    <p>ID: {{ id }}</p>
+    <button type="button" :disabled="loading" @click="increment">
       次の TODO アイテムを取得
     </button>
-    <p v-if="todoData.loading">
+    <p v-if="loading">
       Loading...
     </p>
-    <pre v-else>{{ todoData.data }}</pre>
+    <pre v-else>{{ data }}</pre>
   </div>
 </template>

content/1.vue/3.reactivity-2/.template/solutions/app.vue

@@ -1,39 +1,41 @@
 <script setup lang="ts">
-const todoData = reactive({
+const state = ref<{
+  id: number
+  loading: boolean
+  data: { userId: number, id: number, title: string, completed: boolean } | null
+}>({
   id: 1,
   loading: false,
   data: null,
 })
 
 function increment() {
-  todoData.id++
+  state.value.id++
 }
 
 async function fetchTodo() {
-  todoData.loading = true
+  state.value.loading = true
   try {
-    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoData.id}`)
-    todoData.data = await res.json()
+    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${state.value.id}`)
+    state.value.data = await res.json()
   }
   finally {
-    todoData.loading = false
+    state.value.loading = false
   }
 }
 
-watch(() => todoData.id, fetchTodo, { immediate: true })
-
-fetchTodo()
+watch(() => state.value.id, fetchTodo, { immediate: true })
 </script>
 
 <template>
   <div>
-    <p>ID: {{ todoData.id }}</p>
-    <button type="button" :disabled="todoData.loading" @click="increment">
-      Next Todo
+    <p>ID: {{ state.id }}</p>
+    <button type="button" :disabled="state.loading" @click="increment">
+      次の TODO アイテムを取得
     </button>
-    <p v-if="todoData.loading">
+    <p v-if="state.loading">
       Loading...
     </p>
-    <pre v-else>{{ todoData.data }}</pre>
+    <pre v-else>{{ state.data }}</pre>
   </div>
 </template>

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

@@ -2,42 +2,34 @@
 ogImage: true
 ---
 
-# Reactivity Part 2
+# リアクティビティー パート２
 
-前章で `ref` と `computed` を使った基本的なデータバインディングを学びました。本章では、`reactive` と `watch` について学びましょう。この章で基本的なリアクティビティシステムをマスターできます！
+前章で `ref` と `computed` を使った基本的なデータバインディングを学びました。本章では、`watch` について学びましょう。この章で基本的なリアクティビティシステムをマスターできます！
 
-- [`reactive()`](https://ja.vuejs.org/api/reactivity-core#reactive) はオブジェクト全体をリアクティブなデータとして扱うことができます。複数のプロパティを持つオブジェクトを管理できます。
-
-- [`watch()`](https://ja.vuejs.org/api/reactivity-core#watch) はリアクティブなデータの変化を監視し、変化があったときに特定の処理を実行することができます。
-
-`reactive` で宣言された値は、JavaScript の[プロキシ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)として返ってくるため、以下のように通常のオブジェクトと同じように操作することができます。
+[`watch()`](https://ja.vuejs.org/api/reactivity-core#watch) はリアクティブなデータの変化を監視し、変化があったときに特定の処理を実行することができます。\
+`watch` は `computed` と同様にリアクティブ値の変化に応じて作用しますが、主に `console.log` や `fetch` のような副作用をリアクティブに実行するときに使います。
 
 ```ts
-const counter = reactive({ count: 0 })
-counter.count++ // .value は不要
-console.log(counter.count) // -> 1
-```
+const count = ref(0)
 
-::note
-**注意**: よくある間違いとして、`ref` はプリミティブな値のみに対応し、オブジェクトには `reactive` を使うという誤解があります。実際は `ref` でも `ref({ count: 0 })` のようにオブジェクトをリアクティブな値として宣言することができます。
-また、`reactive` には [いくつかの制限事項がある](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals#limitations-of-reactive) ため、リアクティブな状態を宣言する際は基本的に `ref` を用いるのが推奨されます。
-::
+watch(count, (newValue, oldValue) => {
+  console.log(`count changed from ${oldValue} to ${newValue}`)
+})
+```
 
-`watch` は `computed` と同様にリアクティブ値の変化に応じて作用しますが、主に `console.log` や `fetch` のような副作用をリアクティブに実行するときに使います。
 プレイグラウンドでは、サーバーで管理している TODO アイテムを表示していますが、表示する ID が変化したときに新しいアイテムを取得するために `watch` による監視をしています。
 
 `watch` に関する詳しい説明は [ウォッチャーガイド](https://ja.vuejs.org/guide/essentials/watchers) を参照してください。
 
-## チャレンジ問題
+## チャレンジ
 
-今のプレイグラウンドは、TODO アイテムに関するデータを `todoId` と `todoData` の 2 つのリアクティブ値として管理しています。これらを 1 つの `todoData` にまとめましょう。
-これらのステップを実行することで、`reactive` と `watch` の理解を深めることができるのでぜひ挑戦してみてください！
+今のプレイグラウンドは、TODO アイテムに関するデータを `id` と `data` の 2 つのリアクティブ値として管理しています。これらを 1 つの `state` という ref オブジェクトにまとめてみましょう。
 
-1. `todoData` に `id` プロパティを追加し、`todoId` を消しましょう。
-2. エラー箇所にしたがって、`todoId` と書いてある箇所を `todoData.id` に変えましょう。
-   - これで `watch` 以外のエラーは解消されるはずです。
+1. `state` という変数を作成し、`id` と `data` と `loading` を `state` にまとめましょう。
+2. エラー箇所にしたがって、`id`, `loading`, `data` と書いてある箇所はそれぞれ `state.value.id`, `state.value.loading`, `state.value.data` に書き換えましょう。
+   - template 内では `.value` を書く必要はありません
 3. `watch` の第一引数をゲッター関数に変えましょう。
-   - `todoData.id` のままだと数値を渡していることになるため、`watch` が変化を補足できません。
+   - `state.value.id` のままだと数値を渡していることになるため、`watch` が変化を補足できません。
 
 もし手詰まりになったら、解決策を確認するためのボタンをクリックして、ヒントを得ることができます。
 :ButtonShowSolution{.bg-faded.px4.py2.rounded.border.border-base.hover:bg-active.hover:text-primary.hover:border-primary:50}

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

@@ -10,7 +10,7 @@ Composables の主な特徴は以下の通りです。
 
 Nuxt では、`composables/` ディレクトリに Composables なロジックを格納することが多く、[自動インポート](https://nuxt.com/docs/examples/features/auto-imports) の対象になります。
 
-## チャレンジ問題
+## チャレンジ
 
 それでは、これらの特徴を踏まえて以下のステップでロジックを Composables として切り出し、再利用してみましょう。