まず初めに、JavaScriptでは、TypeScriptやC#のように型の概念がそこまで厳密ではありません。
しかし、データ型を意識することでコードのバグを防ぎ、可読性の高いコードを書くことができるので、複数人で行うプロジェクトでは非常に重要になります。
こちらのブログでは、データ型を明確にすることで得られるメリットを解説します。

データ型とは？

型とは、データの種類のことです。例えば、数値型や文字列型などがあります。

JavaScriptで扱う基本的なデータ型

今回は、特に使用例の高い５つに絞って説明します。

１．String(文字列型)

特徴：Stringは、テキストデータを扱うためのデータ型であり、シングルクォートやダブルクォートで定義されます。
使用例：下記のコードでは、message変数の中の文字をHTML内で使用しています。

<template>
 <div>
   <h1>{{ message }}</h1>  <!-- message変数をHTML内で使用 -->
 </div>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello, Nuxt.js!'  // 文字列型
   };
 }
}
</script>

２．Number(数値型)

特徴：数値を扱うデータ型です。加減乗除などの数学的操作に使用されたり、レスポンスの値を設定する際に使用されたりします。
使用例：下記のコードでは、ageInFiveYears()という関数が任意の場所で呼び出されることで、25 + 5が実行されます。

export default {
data() {
 return {
   age: 25,  // 数値型
 };
},
methods: {
 ageInFiveYears() {
   return this.age + 5;  // 数値の演算
 }
}
};

３．Boolaen(真偽値型)

特徴：true,falseの２つの値のみ持っているデータ型です。条件式やフラグとして使用されます。
使用例：１．文字列型と組み合わせて使用してみます。
buttonをクリックすると、toggleLogin()関数が呼び出され、isLoggedInがtrueに変更されます。trueのときのみmessageが表示されるようになります。

<template>
  <div>
    <button @click="toggleLogin">
        {{ isLoggedIn ? 'Logout' : 'Login' }}
    </button>
    <div v-if="isLoggedIn">
      <h1>{{ message }}</h1> 
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Nuxt.js!',  // 文字列型
      isLoggedIn: false  // 真偽値型
    };
  },
  methods: {
    toggleLogin() {
      this.isLoggedIn = !this.isLoggedIn;  // true と false を切り替える
    }
  }
}
</script>

４．Object(オブジェクト型)

特徴：キーと値をペアでデータを保管でき、かつそのデータを複数で１つの変数にまとめる際に使用します。Objectは、{}でデータを保管します。
使用例：初期表示で画面には、太郎、30歳で表示されます。更新ボタンをクリックすることで、updateUser()が実行され次郎、28歳に更新されます。

<template>
  <div>
    <h1>個人名簿</h1>
    <p>氏名: {{ user.name }}</p>
    <p>年齢: {{ user.age }}</p>

    <!-- ユーザー情報の更新ボタン -->
    <button @click="updateUser('次郎', 28)">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // オブジェクト型のuser変数を作成
      user: {
        name: '太郎',
        age: 30
      }
    };
  },
  methods: {
    // userオブジェクトのプロパティを更新するメソッド
    updateUser(newName, newAge) {
      this.user.name = newName;
      this.user.age = newAge;
    }
  }
}
</script>

５．Array（配列型)

特徴：こちらのデータ型も複数のデータを保管できます。インデックス番号を使用してアクセスすることができます。[]でデータを保管します。
使用例：data配列の中に複数のオブジェクトを格納するのことができます。今回は、data配列の中にnameとageを保管しています。checkName()関数では、data配列の0番目のnameが太郎であるかどうかを判定しています。

export default {
  data() {
    return {
      data: [
        { name: '太郎', age: 25 },
        { name: '花子', age: 22 }
      ]
    };
  },
  methods: {
    checkName() {
      if (this.data[0].name === "太郎") {
        console.log('0番目の名前は太郎です');
      } else {
        console.log('違う名前です');
      }
    }
  }
};