SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Webで始めるTypeScript独習

TypeScriptを効率的に独習しよう! 無料で学べる「TypeScript Deep Dive」日本語版の翻訳者が学習法を解説


  • X ポスト
  • このエントリーをはてなブックマークに追加

 TypeScriptは近年JavaScriptに代わってWebフロントエンド開発で利用されているプログラミング言語です。TypeScriptは開発生産性および開発者体験に優れていることから、開発現場で広く採用されています。TypeScriptを学ぶことは、今後のWebフロントエンド開発では、ほぼ必須といって良いでしょう。この記事ではTypeScriptを使うメリット、ならびに「TypeScript Deep Dive 日本語版」を活用してTypeScriptを短期間で学習する方法を紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 筆者はSIer出身のITエンジニアです。ゲーム開発会社などを経由して現在は一般企業でエンジニアとして勤務しています。はじめてTypeScriptの重要さを知ったのは、2018年ごろに「TypeScript Deep Dive」を読んだときでした。そして、今後必ず多くの人に役立つと考え、オリジナルを忠実に翻訳し「TypeScript Deep Dive 日本語版」を公開しました。同サイトは、GitHubで多くの方々に協力いただき、翻訳が改善されてきました。この記事では、Web上のTypeScript資料「TypeScript Deep Dive 日本語版」でTypeScriptを学習する方法を紹介します。

対象読者

  • TypeScriptを採用するか迷っている方
  • TypeScriptを短期間で学びたい方

TypeScriptとは

 TypeScriptとは、マイクロソフトが開発した新しいプログラミング言語です。しかし、「まったく新しい言語」というわけではありません。TypeScriptはJavaScriptのスーパーセットです。つまり、JavaScriptを拡張して作られたプログラミング言語ということです。JavaScriptに新しい便利な機能が追加されたものがTypeScriptです。Visual Studio Code(以下、VSCode)のようにTypeScriptに対応した開発環境を使うことで、優れた生産性および開発者体験を得ることができます。

TypeScriptを学ぶ理由

 TypeScriptはJavaScriptを拡張した優れた言語です。近年、Webフロントエンドの開発現場ではJavaScriptに代わり、開発言語として採用されることが多くなっています。また、フロントエンド開発だけではなく、React Nativeなどを使用したモバイルアプリ開発やNode.jsを使用したサーバーサイド開発のプロジェクトでもTypeScriptの利用が広がっています。今後、フロントエンド開発者がTypeScriptについて学ぶことはほぼ必須になるといって良いでしょう。

TypeScriptについて押さえておきたいこと

 TypeScriptが意味を持つのは、「コードを書いている時だけ」です。TypeScriptはJavaScriptを拡張したプログラミング言語です。しかしJavaScriptとは異なり、TypeScriptのソースコードをブラウザや、Node.jsで実行することはできません。コードとして実行できないのであれば、TypeScriptを使う意味とは何なのでしょうか? TypeScriptはいわゆる「AltJS」のひとつです。AltJSとは、コンパイルするとJavaScriptに変換されるプログラミング言語です。TypeScriptは開発言語であると同時にTypeScriptをJavaScriptに変換するコンパイラでもあります。つまり、最終的にブラウザで実行されるものは、通常のJavaScriptです。TypeScriptを使うのは、コードを書いているときだけです。

TypeScriptを使うメリット

 TypeScriptの大きなメリットは次の3つです。

型があること

 TypeScriptのもっとも重要な機能は「型」です。型の機能があることにより、私たちがコードを書くときに「そのコードがどのように振る舞うか」ということを、型がない場合に比べて、とても明確に表現することができます。つまり、コードの意図がより明確になるということです。これにより、予想外の実行時エラーやその他の問題を防ぐことができます。VSCodeのようなモダンな開発環境を使用すれば、実際にコンパイルしなくても画面に型のエラーが表示され、すぐに問題を修正できます。そして、便利な自動補完を利用して、すばやく安全にコードを書くことができます。

モダンなJavaScriptの機能を使える

 TypeScriptには、最新のJavaScriptの機能が組み込まれています。クラスやアロー関数、async/awaitなど開発に役立つ便利な機能を使うことができます。TypeScriptは最終的には通常のJavaScriptにコンパイルされます。そのため、ブラウザの互換性を気にすることなく、モダンなJavaScriptの機能を使って簡潔で分かりやすいコードを書くことができます。

JavaScriptをそのまま移行できる

 TypeScriptはJavaScriptのスーパーセットであるため、既存のJavaScriptは、TypeScriptとしてコンパイルできます。したがって、コストをかけて既存のコードを一気にTypeScriptのコードに書き換える必要はありません。少しずつ、重要な箇所から型を設定し、TypeScriptらしいコードに変えていくことができます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Webですぐ読めるTypeScript解説書「TypeScript Deep Dive」

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

濱田 洋太(ハマダ ヨウタ)

 SIerやゲーム開発会社のプログラマなどを経験し、現在は一般企業でエンジニアとして勤務している。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15148 2021/12/02 19:15

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング