【初心者向け】JavaScriptで型を書く方法

JavaScriptで**型**を書いたことがありますか？
この記事は、型を利用して安全に開発ができるようになるための方法をご紹介します。

# この記事で得られること
JavaScriptの開発で型を利用できるようになります。

型の支援を受けるようになるとこんなメリットがあります。
- インテリセンスの利用によるタイプミス防止
- ソースコードの可読性の向上
- 開発速度・精度の向上

特に開発速度・精度の向上はかなりの効果を発揮します。
またAIによるサジェストの精度向上にも寄与するようです。

# 対象とする読者
私はサイボウズ社のkintoneを利用した業務システム開発を生業にしています。

kintoneではカスタムJavaScriptをたくさん書くことになります。JavaScriptについて教えることが多いので、ここに書いて残すことにしました。

ですので、JavaScriptを書くようになった初心者の方を想定しています。

JavaScriptの基礎技術を教えるときに、最初に型システムを伝えます。
知らない人が多く、もっともコード品質の向上に効果がある技術だからです。

なので、初心者じゃないけど初めて知ったという方も、ご一読いただければ楽しめると思います。

それでははじめましょう。

# JSDocについて
JavaScriptにはJSDocという規格があります。これは、JavaDocに似ています。

https://ja.wikipedia.org/wiki/JSDoc

ただ、Javaは静的型付言語ですので、型を宣言するときにJavaDocは必要ありません。

一方でJavaScriptは動的なので、本来は型を宣言することはできないのですが、VSCodeのようなJavaScript開発に利用される開発環境では、JSDocを書くことによって、型を推察させることができます。

## 型チェックの適用
TypeScriptはJavaScriptに型を導入したものですが、この技術を逆輸入して、JavaScriptでも記述の整合を確認できます。学び初めから型を正しく定義することは難しいですが、チェックを受けることは可能なのです。

`//@ts-check` を利用します。

```javascript
// @ts-check

let a = 2;
a = false;

```

上記のコードはVSCodeでは、"number"変数への"boolean"の代入になりますので、VSCodeのTS/JSチェック機能でエラー検出ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/6f70898f-c56c-4526-976c-4fe0e4147490.png)

このようにして、厳密な型を定義することにより、 **予期せぬ不具合を防ぐことができます** 。

## プロパティの推察
以下のようなコードを考えてみましょう。
```javascript
let a = {
    name: "John",
    age: 30,
    city: "New York"
}

console.log(a.city.address);
```
JavaScriptが読める方はこのコードがエラーになるのが分かると思います。
a.city = "New York"ですので、addressというプロパティがないからです。

しかし、 **複雑なJavaScriptを書いていると、こういったことはよくあります** よね。

ここに、型チェックを導入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/80dc9147-eb05-444f-83fe-4a2d374470e0.png)

するとこのように、 **実際に動かすことなく未然に** エラーを防ぐことができます。

## 変数の明示的な型宣言
VSCodeで以下のようなJavaScriptコードを書いてみます。
```javascript
let a = {
    type :"number", value : 1
}

a = {
    type : 'string', value : 'hello'
}

console.log(a);
```
このコードは、aという変数が持つ役割を表していますね。
すなわち、aという変数は、
type="number"なら、valueはnumber型、
type="string"なら、valueはstring型
です。

しかし、ts-checkを入れるとエラーになるのが分かります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/6b584eaf-9e66-4278-a087-2f47f67df05d.png)

これは、最初に代入されたデータ型がその変数の型を定義するからです。
つまり、`
{
    type : string, value : number
}`
は想定されていますが、
`{
    type : "string", value : string
}`はaの型として、想定されていない。

プログラマが意図しないエラー検出です。
コードが正しいのに、エディタ側の型の推察結果が間違っています。

ここへ **「明示的に型を宣言」** することによって問題を解決してみましょう。
```javascript
//@ts-check

/**
 * @type {{
 *      type : 'number',
 *      value : number
 * } | {
 *      type : 'string',
 *      value : string
 * }} 
 */
let a = {
    type :"number", value : 1
}

a = {
    type : 'string', value : 'hello'
}

console.log(a);
```
VSCodeで記述した場合は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/2927c253-2a3b-480c-8a59-2074f67bee04.png)

すばらしい！
問題を回避できました。

`@type`は型を宣言するためのアノテーション記述です。

```javascript
/** @type {string | number} */
let variable
```
👆のとき変数variableはstring型、またはnumber型が代入可能な変数です。


```javascript
/** @type {"aaa" | "bbb"} */
let variable
```
👆のとき変数variableは"aaa"という固定値か、"bbb"という固定値しかとることができません。


「/**」から始まるコメント内で、`@type`を利用でき、

`@type {型}`

という記法で宣言ができます。

`型`の内容を工夫することで、その変数が取りうる構造の範囲を決定づけます。

## 関数の型
変数の宣言法について知りました。関数も同じように宣言することが可能です。

```javascript
//@ts-check

/** @type { (args : string) => number | string } */
function foo(args){
    return 1;
}

const value = foo('hello');

```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/e3f343b0-3618-4559-b4b6-672f7c8ddf21.png)

foo関数は文字列(string)を受け取って、numberか、あるいはstringを返す関数です。

(引数名 : 型) => 戻り値

という記法で、関数を記述できます。

## 型の命名
文字列にはstring, 日付にはDateというように、JavaScriptにはデータ型が存在します。
ただ、先ほどの[変数の明示的な型宣言](#変数の明示的な型宣言)にあるように、ユーザー定義型にも名前をつけたくなるときがあります。
```javascript
//@ts-check


/**
 * @type {{
*      type : 'number',
*      value : number
* } | {
*      type : 'string',
*      value : string
* }} 
*/
let a;

/** 
 * @type {() => ({
 *      type : 'number',
 *      value : number
 * } | {
 *      type : 'string',
 *      value : string
 * })}
 */
function returnA() {
    return {
        type: 'number',
        value: 1
    }
}
```
このコードはaが持っている型を関数の定義でも利用しています。
すごく冗長ですよね。

これは書き直すことができます。

```javascript

//@ts-check

/**
 * @typedef {{
 *      type : 'number';
 *      value : number;
 * } | {
 *      type : 'string';
 *      value : string;
 * }} AType
 */

/**@type {AType} */
let a;

/** 
 * @type {() => AType}
 */
function returnA() {
    return {
        type: 'number',
        value: 1
    }
}
```

ATypeという名前の型を@typedefを利用して宣言しています。

`@typedef {型の構造} 型名`

という記法で宣言ができます。

## TypeScriptファイルの利用
複雑な型を毎度宣言するのは面倒ですし、`@typedef`もコメント内での複雑な型宣言に適してはいません。

そこで、型宣言にのみ、TypeScriptを導入してしまいましょう。

「それなら、いっそのことTSを全体導入すればいいじゃん」という方もいると思います。わたしも大賛成です。

なのですが、開発が進んでぐちゃっとしたJavaScriptを、TypeScriptに変えるのは骨が折れる作業です。（そういうJSは、型を開発に利用していないので、だいたいバグを埋め込んでしまっている）

なので、部分的にTypeScriptを導入します。ここでは、型宣言のみで利用します。

実際にやってみましょう。

ディレクトリを以下のように設置します。
- /root
    - index.js : 開発対象のJSファイル
    - types.d.ts : TypeScriptの型宣言ファイル

index.jsの開発に型宣言ファイルを導入すると以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/49a55867-e61f-4a1b-bd6e-635214bcfd80.png)

types.d.tsで宣言したTypeAという型を、index.jsの開発側から読み込んでいます。


```typescript
//types.d.ts
type TypeA = {
    type: "a"
    name: "hoge" | "bar";
    value: string;
}
```

これは記述が面倒なように見えますが、めちゃくちゃ簡単に呼び出せます。

![typeA.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3712902/ab686695-41ac-4664-8ebb-2c224ce332d5.gif)

ほぼVSCodeのコードインテリセンスのみで記述ができます。

# まとめ
ここまで、JavaScriptで型を用いた開発手法についてご紹介しました。
- `//@ts-check`によるTS/JSチェックの利用 
- 型を書くにはJSDocを利用する
    - `@type` : 汎用的な型宣言に利用
    - `@typedef` : 型の命名
- 型宣言ファイルの利用
    - `@type`を利用して、インテリセンスから一発で呼び出せる


`//@ts-check`によるチェックは大変効果があります。一度JavaScriptファイルの先頭に記述してみてください。

どうしてもエラーが出て、記述で回避できない場合は、エラーが出る行の前に下記のコードを追加します。
`//@ts-ignore`

以上で、JavaScriptでの型の利用の概要を説明しました。

# めんどくさい
ここまで読んで、「めんどくさい」と思われる方がいるかもしれません。しかし、実は型を利用したほうが、バグによる手戻りもなく、開発環境による入力支援を受けることができるので、開発スピードが向上します。

また大規模な開発になればなるほど、問題を分割して管理できるので、その効果が大きくなります。

みなさんも型を利用して安全で高速な開発へ一歩踏み出してみてください。

# こちらもどうぞ。
具体的な型の記法を解説しています。
https://qiita.com/IshigiwaKenichiro/items/dbbbd0d6bee111cc48ca

# 参考文献
https://www.typescriptlang.org/ja/docs/handbook/jsdoc-supported-types.html
https://www.typescriptlang.org/ja/docs/handbook/intro-to-js-ts.html


---
この記事は以上です。ありがとうございました。

https://www.pulsar-works.jp/

kintoneのプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。