【ゼロから学ぶNuxt3×Typescript】④component作成-3

Nuxt３×TypeScript 学習
下記の参考サイトを見ながら、Nuxt３とTypescriptを学ぶ第4回。

▼　神回|vue3.js nuxt3 typescriptどうやる？【ゼロから解説】

https://field.asia/%E7%A5%9E%E5%9B%9Evue3-js-nuxt3-typescript%E3%81%A9%E3%81%86%E3%82%84%E3%82%8B%EF%BC%9F%E3%80%90%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E8%A7%A3%E8%AA%AC%E3%80%91/


前回はこちら👇

https://qiita.com/sakuc47/items/94dc0f0269c55283dd9c

第1回はこちら👇

https://qiita.com/sakuc47/items/2770d40720070b682ee9


では始めます！！🧙

### 1.`/jobs/[id].vue`をもう一度編集

・`<br><br>`での改行や`<strong>`などは、私はstyleで調整します。
・language="ts"とありますが、lang="ts"かと考えました。
調べても明確にならなかったので、一旦お手本通りに記述します。

<INS>・/jobs/[id].vue</INS>

```vue
<template>
    <!-- テキスト入力とボタン -->
  <input type="text" name="name" v-model="person.name">
  <button type="button" @click="addSan">登録</button>

  <!-- 名前を表示する部分 -->
  <p>あなたの名前は<span class="u-tx-bold">{{ person.name }}</span></p>
</template>

<script language="ts">

import {ref,reactive} from 'vue'

// refとreactiveを使用して変数を定義している
export default {
  setup() {
    // テキスト入力の値を保持する変数
    const name = ref('')
    // 'さん'がついた名前を保持する変数
    const nameWithSan = ref('')
    // オブジェクト形式でデータを保持する変数
    const person = reactive ({
      id: 1,
      name: 'sato',
      age: 20
    });
    // 'さん'を付けて名前を更新する関数
    const addSan = () => {
      nameWithSan.value = name.value + 'さん'
    };

    // コンポーネントに返すデータ
    return {
      name,
      nameWithSan,
      person,
      addSan
    }
  }
}
</script>

<style>
.u-tx-bold {
  font-weight: bold;
}
</style>


```

#### <ins>refとreactiveとは</ins>
前回の記事
> ▼ref関数とは
・Nuxt3から導入された関数
　import {ref} from 'vue'　でvueモジュールからimportしている。
・リアクティブ（状態管理）の値を定義するための関数
・setupの中でconst name = ref(’’)のように定義できるようになる
・オブジェクト以外の状態管理
・オブジェクトはreactiveを使う

https://qiita.com/sakuc47/items/94dc0f0269c55283dd9c#ref%E9%96%A2%E6%95%B0%E3%81%A8%E3%81%AF


` import { ref, reactive } from 'vue' `
でreactiveというvueの機能をインポートしたので、オブジェクトも状態管理できるようになりました。
`v-model="person"`が書けるようになっています。

### 2.`/jobs/[id].vue`をもう一度編集

**`<template>`**
``` vue
<template>
  <input type="text" name="name" v-model="person.name">
  <button type="button" @click="addSan">登録</button>

  <p>あなたの名前は<span class="u-tx-bold">{{ person.name }}</span></p>
  
  <!-- 条件付きでプロフィールを表示する部分 -->
  <button type="button" @click="showProfile">プロフィールを表示</button>
  <!-- isShowProfileがtrueなら情報が表示される -->
  <p v-if="isShowProfile">id: {{ person.id }}</p>
  <p v-if="isShowProfile">name: {{ person.name }}</p>
  <p v-if="isShowProfile">age: {{ person.age }}</p>
</template>

```
#### <ins> プロフィールを表示するボタンを追加 <ins>
- クリックされるとshowProfileメソッドが呼び出されます。
- v-ifディレクティブを使って、isShowProfileがtrueの時はプロフィール情報が表示されます。


**`<script>`**
```vue
<script language="ts">

import { ref , reactive } from 'vue'

export default {
  setup() {
    const name = ref('')
    const nameWithSan = ref('')

    // refを使ってisShowProfileという変数を作成
    const isShowProfile = ref(false)

    const person = reactive ({
      id: 1,
      name: 'sato',
      age: 20
    });

    const addSan = () => {
      nameWithSan.value = name.value + 'さん'
    };

    // プロフィールを表示するボタンがクリックされると呼び出される
    // ボタンがクリックされるたびに表示非表示が切り替わる
    const showProfile = () => {
      isShowProfile.value = !isShowProfile.value
    }

    return {
      name,
      nameWithSan,
      person,
      isShowProfile,
      addSan,
      showProfile,
    }
  }
}
</script>
```

#### <ins> プロフィールを表示するかどうかの状態管理 <ins>

- isShowProfile変数:
    - refを使ってisShowProfileという変数を作成し、プロフィールを表示するかどうかの状態を管理します。
- showProfileメソッド
    - ボタンがクリックされると呼び出され、isShowProfileの真偽を切り替えます。
    - ボタンがクリックされるたびにプロフィールが表示されたり非表示になったりします。

![test.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524465/54d8b817-46f2-d98f-0757-55419ae69280.gif)



### 今回はここまで！

### 参考サイト

https://nonakayasuo.com/ref/

https://zenn.dev/simsim/articles/1abff49327109f