まず初めに、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('違う名前です');
}
}
}
};