RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > TypeScript > TypeScript入門 ~JavaScript入門者が脱TypeScript初心者するまで~

TypeScript入門 ~JavaScript入門者が脱TypeScript初心者するまで~

TypeScript

はじめに

こんにちは。最近お気に入りのお店が閉店してしまい、悲しみに暮れています。
楽楽勤怠バックエンドチームのmako_makokです。
バックエンドチーム所属ではありますが、諸事情で数ヶ月間フロントエンドヘルプとしてTypeScriptでフロントエンドの開発を行っていました。
今ではある程度にTypeScriptを書けるようになったものの、ヘルプ当初は実務として初めてのTypeScriptを用いた大規模フロントエンド開発だったので、早期にキャッチアップする必要がありました。
今回は私がTypeScriptに入門する上で注意すべき点と実際に学習に使用したおすすめの学習教材を紹介したいと思います。

TypeScriptとは

TypeScriptとは、動的型付け言語であるJavaScriptに静的型付けの概念と、一部独自の構文を取り入れた世界的に人気のあるプログラミング言語です。*1
JavaScriptのスーパーセットなので、ECMAScript最新仕様やJavaScriptの記法がそのまま使えます。

TypeScriptで特徴的なのは型の表現力の高さです。値や数値そのものを型として扱ったり、既存の型から新しい型を作成したりなどができます。以下は型と型を合体できるUnion Typeという機能の一例です。

type Juice = 'Orange' | 'Apple' | 'Grape'
const juice: Juice = 'Cake'  // 'Orange', 'Apple', 'Grape'という文字列しか受け付けない

type Coffee =  'Cappuccino' | 'American'
// Juice型とCoffee型をくっつけてDrink型を生成する
type Drink = Juice | Coffee // => 'Orange' | 'Apple' | 'Grape' | 'Cappuccino' | 'American'

これ以外にもTypeScriptには多彩な型に関する機能や組み込み型があり、型を柔軟に操作することができます。

型の恩恵

型が柔軟なのは分かったけど、そもそも型をつけてなんのメリットがあるんだという話です。
これについては人によって様々な意見があると思いますが、個人的には以下の3点がメリットと考えています。

  1. JavaScriptにおいてはundefinedが激減してメンテナンスが容易になる
  2. 補完を使ってサクサク書ける
  3. 型がドキュメントになる

1. undefinedが激減してメンテナンスが容易になる

複数人で開発している以上、自分の知らないところでいつの間にかプロパティが増減しているなんてことは日常茶飯事です。依存関係があるオブジェクトをいじっていたらいつの間にかundefinedになってしまうこともよくあります。
一方で、型があれば、オブジェクトの構造は一発でわかります。

2. 補完を使ってサクサク書ける

オブジェクトの構造が事前に分かっているということは、IDEの補完が効きます。
これはつまり、numberをparseInt()しようとする無意味なコードを生み出さないことにも役立ちますし、存在しないプロパティにアクセスしようものならコンパイルエラーとして怒ってくれます。

3. 型がドキュメントになる

型はドキュメントになります。
例えば、オブジェクト構造はuserと一緒だけど、申請画面のコードなので申請者を表すapplicantという変数を使用したとします。
型がなければapplicantってどんなオブジェクト構造なんだろうと辿るところから始まりますが、型があった場合は

const user: User = { ... }
const applicant: User = { ... }

となり、変数名は違うけどどちらも同じUserオブジェクトなんだなと一発でわかります。
これをJavaScriptで表現しようとすると、変数名を工夫するかコメントを書く必要がありますが、上記の型があるコードは短い記述で表現できます。

型システムを学習する上での注意点

TypeScriptには様々な機能がありますが、知らないまま使ってしまうと危険な機能がいくつかあります。
入門レベルのうちにVueやReactなどのライブラリを用いた開発を行っていると、以下のような問題に突き当たることになることがあるのではないかなと思います。(私はよくありました・・・)

  1. なんか型が原因でエラーを吐いているけどエラーが長くて何を直せばいいかわからない
  2. ライブラリの型を使ったらよくわからないけどエラーになってとりあえずanyを使っちゃう

例えば1のような場合、コンパイルエラーを解消するのは簡単にできます。
TypeScriptにはどのような値も許容するというany型と、型を上書き(キャスト)する型アサーションという機能があります。

以下は良い例*2で、HTTP通信を行い、取得したデータを型アサーションでキャストしています。
REST APIによる外部との通信のため、アプリケーションに型を伝えられずレスポンスの型としてはanyとなってしまいますが、User型のオブジェクトだということが分かっている、という前提で使用しているためです。

function getUser(id: string): User {
  // data はany型
  const { data } = get(`https://example.com/user/${id}`)
  // `as 型名`で型アサーション 
  return data as User 
}

上記のような使用方法はとても有効的なのですが、以下のような使い方もできてしまいます。

  const department: Department = getDepartment('1')
  const user: User = department as any as User

Department型のオブジェクトを取得し、any型に変換した後User型に変換しています。 これはコンパイルエラーにはなりません。Department => anyと、any => Userに互換性があるからです。 anyはどのような値も許容するため、全ての型に互換性があります。
これは簡単な例ですが、ライブラリを扱い始めると複雑な型が出現し、「解決に時間かかりそうだしとりあえずanyにアサーションしてみるか・・・ｵｯなんか動いたしこれでいいか！」となるかもしれません。
これは当たり前ですが、実行時エラーの温床になっていくだけです。なんか動いているのはJavaScriptのエンジンが賢いだけで、そのうちどこかで崩壊してしまうかもしれません。

TypeScriptに限った話ではありませんが、知らずに使用すると危険なコードを書いてしまう可能性があります。
後述する学習媒体では、このような機能を正しく知り、効果的に使用する方法を学ぶことができます。

JavaScript, TypeScriptの学習媒体について

では具体的にどうやってTypeScript, JavaScriptに入門していくかです。
TypeScriptはとても人気な言語で、資料もたくさんあります。JavaScriptはとても歴史が長いので、古くなってしまった資料なども多くあります。
実際私も資料探しにはかなり苦戦しました。資料が多く、これから入門する方からすればどれがいいかわからないのかは当たり前です。 様々な有識者の方にご教授いただき、私がJavaScript, TypeScriptに入門し、学習していく中で特に参考になったwebサイトや書籍を紹介します。

JavaScript入門したい方におすすめ JavaScript Primer

jsprimer.net

これからJavaScriptに入門したい、またはJavaScriptを雰囲気で書いているという方におすすめのwebサイトです。 JavaScriptを体系的に、かつ実践的な使用方法を学ぶことができます。
これ1つでJavaScriptの基本はマスターできます。
JavaScriptの書籍をいくつか読みましたが、JavaScript Primerは本当に必要なことだけを抽出し、実際の業務で役立つTipsなどが豊富です。
例えば、変数と宣言の項でvarの使用は避けるべきということが書いてあったりします。普段JavaScriptを書いている方からすると当たり前かもしれませんが、入門者的にはエビデンス付きで説明してくれている教材はありがたく、とても貴重です。
もちろん非同期処理についても深く触れられており、Promiseやasync/awaitへの理解にとても役立ちました。
私も実務ではMDNと併せてバイブルにしていました。
応用編ではVanilla JSでアプリケーションを構築する話で、コンポーネントの実装まで行っていますが、TypeScriptの学習という点においてはあまり関係が無いので進めるかどうかは好みです。

ちなみに、書籍版もありますので、紙で読みたいという方はこちらもどうぞ。

https://www.amazon.co.jp/dp/4048930737/www.amazon.co.jp

TypeScript Playground

www.typescriptlang.org

JavaScript PrimerでJavaScriptの基本はマスターできたと思うので、次はTypeScriptに入門していきましょう。
言語の勉強をするためにはやはり自分の手で書くのが一番です。書くためには実行環境を用意しなければなりませんが、そんなときはTypeScript Playgroundを利用することで、即座に実行環境を用意することができます。
このPlaygroundの良いところは、TypeScriptのコンパイル結果などを右のペインに表示してくれることです。
TypeScriptがコンパイルされた結果どのようなJavaScriptが出力されるのか確認することができます。 enumなど、JavaScriptにない機能がどのようにコンパイルされるかを見るだけでもとても勉強になります。

※ 以降のタイトルにナンバリングしていますが、番号の順に読んでいくのが良いのではないかと筆者は勝手に思っています。

1. TypeScript Deep Dive

typescript-jp.gitbook.io

鉄板のWebサイトです。TypeScript commiterの方が書いてくださっているドキュメントで、有志の方たちによって日本語化もされています。 基本的にTypeScriptへの入門向けの解説が多いため、とても分かりやすく、基本的な使い方はここで学べるようになっています。
また、テストツールや周辺ライブラリへの簡単な解説などもあるので、発展的な内容や実務で使う際への足がかりになります。 TypeScriptに入門する上では欠かせないwebサイトです。

2. 実践TypeScript

www.amazon.co.jp

TypeScript Deep Diveを学習したあなたはTypeScriptの入門レベルを既に超えています。
次の一歩に踏み出すためには実践TypeScriptがおすすめです。 実践TypeScriptでは、実際にTypeScriptとVueやReactなどのライブラリを使用してアプリケーションのコードを書く際に非常に参考になる一冊です。
導入編と実践編の2章構成で、TypeScript Deep Diveを学習された方なら導入編の方の最初の方はサクサク進めることができるんじゃないかと思います。導入編の後半では、

  • Conditional TypeやMapped Typeといった難易度の高い型
  • 組み込み型の使用方法

の項目があります。TypeScript固有の書き方なので少しとっつきにくいですが、これらは型の操作やライブラリの型を読む上では欠かせないので、しっかりキャッチアップしたいです。

実践編になるとVueとReact、ユニバーサルフレームワークであるNuxt, NextへのTypeScriptの導入方法、それぞれのフレームワークにおいてTypeScriptで良いコードを書くためのノウハウが書かれています。
サンプルコードが非常に豊富で、Vueの章なんかでは結構困りがちなVuexの型付けを筆者の方がほぼイチから書いているサンプルなどがあり、非常に参考になります。

3. プログラミング TypeScript

https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0TypeScript-%E2%80%95%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8BJavaScript%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA-Boris-Cherny/dp/4873119049www.amazon.co.jp

TypeScriptの言語仕様が体系的にまとまった一冊です。
最初はプリミティブ型のような簡単な項目から、前項でも少し出てきたConditional TypeやMapped Typeのより詳細を知ることができます。最後半になるとASTのAPI(TypeScriptのコードを解析する仕組み)まであります。
ASTはアプリケーションのコードを書く上では必要ないと思いますが、興味がある方は更に学習を深めてみてはいかがでしょうか。 実践TypeScriptと比較して、こちらは言語仕様がかなり詳しく書かれています。
また、こちらにも現場で役に立つTipsやデザインパターンが載っているため、実践TypeScriptと併せて読むのがおすすめです。

4. Type Challenge

github.com

Type Challengeでは、型の実装にチャレンジすることができます。
ここまで学ばれた方はおそらくアプリケーションのコードを書くのに不自由ないレベルの知識は得られたのではないでしょうか。アプリケーションのコードでは自分で複雑な型を自作するというのは結構稀ではありますが、0では無いのでしっかり書けるようになりたいところです。
ここまで学習された方はおそらく、Mapped TypeやConditional Typeのような独自の記法でもなんとなく読めるし、ライブラリの型も結構イケる！くらいのレベル感だと思っています。ですが、実際書けるかどうかはあまり自信がありません。私もそうでした。
そんなあなたはType Challengeに挑戦してみましょう。

まず、READMEのChallengesから取り組む問題を選択します。

Take The Challengeのラベルを押すとPlaygroundが開くので、問題で指定されている要件の型を作成しましょう。
テストケースも用意されているので、解答のチェックも簡単です。
問題をとき終わったらIssueを見てみましょう。他の方の解答を見ることができます。自信がある解答を作ることができた！という場合は自分の解答をIssueに投げてみましょう。後半の複雑な型の解法は自分が全く思いつかなかったものもあったりするのでとても面白いと思います。

最後に

いかがでしたでしょうか。おそらくここまでやり込めば、TypeScriptの言語仕様はかなりキャッチアップできたのでは無いかと思います。その後はVueやReactのようなライブラリを学んだり、webpackなどの周辺ツールについて学ぶのも良いと思います。
私自身、TypeScriptどころかJavaScript入門者でしたが、これらの書籍やwebサイトのおかげでTypeScriptへ入門し、業務で開発を行うことができました。この記事がTypeScript入門への足がかりになっていれば幸いです。また、学習する中でフロントエンドへの興味がより強くなったので、今後は各種ライブラリの学習や、OSSへのコミットを目指してやっていこうと思います。

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

*1:Stack Overflowの開発者の中で愛されている言語ランキングなどでも2位を獲得しています。

*2:本来はキーのチェックやエラーのチェックを行う必要がありますが簡略化のため省略しています

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.