TypeScript

TypeScript Deep Dive 日本語版

Qiitaの TypeScript Advent Calendar 2018 の18日目の記事です。

TL;DR

TypeScript Deep Dive

私は最近TypeScriptに触れ始めたエンジニアです。

ゼロから理解するためにまとまった情報を探しているとき、TypeScript Deep Diveを見つけました。

これは、TypeScriptを学ぶ人のためにBasarat氏によって書かれた無料の本です。

PDFを読んだところ、TypeScriptを学ぶために非常に有益な内容だと思いました。

本の内容

  • これまでのJavaScriptの落とし穴(等価演算子、関数内のthis等)
  • ES6以降の様々な機能(Generatorや、async/await)
  • なぜTypeScriptが必要かという背景

これらを踏まえた上で、TypeScriptの型システムと、その使い方が明快に説明されています。

また、本の後ろの方ではTypeScriptのコンパイラがJavaScriptを生成するプロセスの詳細にも触れています。

実際のコンパイラのソースコードを引用して説明しており、TypeScriptの深い理解が得られます。

TypeScriptを学ぶ理由

JavaScriptは、非常に柔軟な言語ですが、その分、人によって書き方やスタイルが異なりやすいことから、コードが多くなるにつれて、保守性が下がることが多いと感じます。

また型が無いことについては、短い文字数で素早くコーディングできるというメリットもありますが、一方で、後からソースを見たときに変数の型が分からないため、コードの理解が難しくなります。

型のあるプログラミング言語を使うことにより、これらの問題を大きく緩和することができます。

型がある言語は型がない言語よりも

  • 実行前にバグをキャッチできるため安全である
  • 型が明示されていているためコードを理解しやすい
  • 変更するべき箇所が(IDEやコンパイラのサポートによって)すぐに分かるため変更に強い

というメリットがあります。

また最近のフロントエンドの状況を見ると、ReactやVue.jsなどのJavaScriptフレームワークを使った高度なSPA(Single Page Application)が一般的になってきており、フロントエンドの複雑性は高まる一方です。

そうした現状から、今後、TypeScriptのような型付け言語が、新しいフロントエンドの開発現場で採用されることが当たり前になっていくのではないかと思います。

TypeScript Deep Dive 日本語版

下記のページから読むことができます。
TypeScript Deep Dive 日本語版

Contribute

翻訳を短期間で行ったため、まだ直訳で分かりづらい部分が多く残っています。

また自分自身もまだTypeScriptを勉強中のため、翻訳が間違っている可能性もあります。

用語の統一(用語集の作成)なども必要だと感じています。

よろしければ、些細な修正でも良いので、IssueやPRなどを送っていただけると大変幸甚です。

GitHubリポジトリ

(参考)短期間で翻訳を行った手順

蛇足ですが、翻訳を行った手順について説明します。

平日は夜に翻訳作業を行い、土日は10時間ほど作業して、約10日ほどかかりました。

手順は以下の通りです。

  • Google Translate APIでの一括翻訳
  • 手作業での再翻訳

最初に下記のように(非常に)雑な短いpythonスクリプトを書き、Google Translate API(ニューラルネット機械翻訳)を使って、全てのファイルを一括翻訳しました。

スクリプトの処理内容:標準入力から受け取った文字列(markdown)を一行ずつGoogleTranslate APIに投げ、翻訳結果を標準出力します。ソースコード部分はスキップするようにしています。

機械翻訳の結果は(体感ですが)3割くらいしか使えません。

そのため、その後で全てのファイルを手作業で再翻訳しました。