VisualStudioCodeTypeScriptを使っている風景をGIFアニメで説明します。使ってみてはじめて感じるものもありますが、文字で記事を見るだけではなかなか想像しづらいと思いますのでGIF動画でいくつか見られるようにしてみました。今回はVSCode上でNext.jsのTypeScriptテンプレートを使って例をあげていきます。理由としてはプロジェクトを生成すればすぐ動かせるのと、ReactはJSXを使っていますが基本的には素の形式のためTypeScriptの恩恵を受けやすいためです。Vue.jsのvueファイルだとTypeScriptの恩恵を受けにくい場合が多いため、今回はそちらを選択しました。実際にコードをいじりつつ見てみると面白いと思います。リポジトリは下記です。with-typescript-app下記で実行です。dev厳密な型の無い言語で困ることまず比較として、TypeScriptのような厳密な型の無い言語の場合に困ることをあげてみます。nameという氏名が入っているカラムを無理やり半角スペースで区切って姓と名を分けて表示したい、という場合、例としてPHPで書くと下記のようになります。(例のためあまりきれいな形ではないです)まずは分割するメソッドを作成します。$parts[1]];}こんな感じで、勝手に独自の配列や、Rubyとかでもハッシュを作成してreturnするパターンを作ることもあるのではないかと思います。それをコントローラでビューに渡したりします。$user->splitName());そしてそれをテンプレート側で表示します。?></div>これで実装は可能です。これですが、splitNameメソッドが「sei、meiはかっこ悪いからlastName、firstNameに変えて」となってしまった場合。テンプレート側では存在しないキーを指定する形になってしまうためエラーになってしまいます。上記のように1箇所だけ書いている場合は問題ないかもしれませんが、色々なページでいくつも書いていると抜けが出る恐れもあります。TypeScriptで書いてみるこれをTypeScriptで書いてみます。}}そして実際に表示している箇所に追記します。)処理の流れ的は先程のPHPと全く同じです。ここからがTypeScriptの便利なところです。勝手に型を定義してくれるまず、適当に作ったsplitNameという関数ですが、暗黙で返り値の型が定義されるためカーソルを合わせるとこんな感じに固定された返り値の型が表示されます。補完も効くもちろん補完も効きますので入力ミスによる不具合も発生しません。jsx上で入力している場合もです。Vue.jsの場合は独自のファイル形式のため、テンプレート上等では補完等は効いていないと思います。(2019/8現在)(なにか方法はあるのかもですが)返り値を変えたら即エラーになる返り値を変えると型が変わり、表示している箇所が間違いになるのですぐにエラーになり気づくことが出来ます。watchしている場合はすぐにエラーになりビルドに失敗しますので決してこの原因で本番にて問題が発生することはありません。自分で型を定義したほうが親切とはいえ本来は自分でちゃんと定義してあげたほうが良いと思います。そもそも返り値を間違えてしまっていても気づくことができますし、型は別ファイルにしておけば別のファイルからも参照することが出来ます。}}typeかinterfaceで同じような事ができるため、適宜使い分けてください。オリジナルの型も作れる例えばユーザーにステータスのようなものがあったとします。statusというカラムで、enumや文字列でステータスを定義している場合などです。'special'など。いうものも一文字間違えるだけで不具合の原因になりますし、もしDBにそれを保存してしまうと様々な箇所で影響が出てとんでもないことになってしまいます。TypeScriptだとこういうものも型(文字リテラル型)にすることができます。UserStatus}実際に操作するとこのようにエラーを出したり補完してくれたりします。文字リテラル型ではなく列挙型(Enums)を使うこともできます。DBの型との関連によって適切なものを使い分けていきましょう。自動でimportしてくれるimportも自動で行ってくれます。型の補完をする際に、importされていなければ自動的に追加してくれます。自分で作った定義だけでなく、node_modules内のパッケージなども型情報があれば補完&importしてくれます。(これもVue.jsの場合はうまくいったりいかなかったりする場合があります)まとめTypeScriptは他にも便利な機能がたくさんありますが、とりあえず使ってみて最初に感じるであろう便利な部分だけをまとめてみました。TwitterのTLを見ていると時々「TypeScript使い始めたら他の言語が怖い」という発言を見かけます。今は僕もPHPやRubyで配列やハッシュを書くのが怖いです。いえ全部classで書くのかと言うとそれも冗長すぎる気もしますしでもそうでなければテストを書かなきゃいけないですしなかなか悩ましいです。言語自体で型を持ってくれているというのはありがたいし楽しいし楽です。まあとはいえ全部TypeScriptにするわけにはいかないので今後もテストを書きつつやっていくのでしょう。その分TypeScriptを使って開発する時の楽しさが増すのだと思います。オススメの始め方ということで是非使ってみてください。コツとしては、自分で設定せず今回のように最初から設定済みの公式テンプレートのようなものを使ったりするのがおすすめです。既存のプロジェクトがあるから難しい、という場合も、そういったプロジェクトの設定を参考にすると良いと思います。ツイッターでシェアみんなに共有、忘れないようにメモだら@Crieit開発者Crieitの開発者です。LAMPで開発しているWebエンジニアです(在宅)。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。Vue等色々https://torima.appllis.net/users/dala00マシュマロでメッセージか投げ銭?Crieitは個人で開発中です。どんな軽い内容でも嬉しいです。