【入門編】絶対押さえておくべきTypeScript特徴を徹底的に解説!

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

   

近年のフロントエンド開発は主役がJavaScriptからTypeScriptに移ってきています。本記事ではこれからTypeScript開発に携わっていきたいと考えている人向けに、必ず押さえておくべきTypeScriptの特徴や型の知識を紹介します。また将来参画するであろう案件のイメージを持っていただくために、現在募集中のTypeScript案件も紹介します。今後のTypeScript学習をスムーズに進めていくためにも最後まで読んでみてください。

TypeScriptとは?

TypeScriptはマイクロソフトが開発した静的型付け言語です。文字通り「型」を重視したプログラミング言語で、静的解析によって型を厳密にチェックすることでソフトウェアの品質を担保しています。大規模開発にも耐えられる仕様で、Google社でも社内の標準開発言語としてTypeScriptを採用しています。日本国内でも需要が高まっており、将来性の高い言語といえるでしょう。

押さえておくべきTypeScriptの特徴

これからTypeScriptを扱う上で押さえておくべき特徴を4つ紹介します。これらを理解することで、スムーズにTypeScriptの学習を進めることができるでしょう。また、JavaScriptとの比較やTypeScriptのメリット・デメリットについては以下の記事も参考にしてみてください。

関連記事:初心者向け】TypeScriptの特徴やJavaScriptとの違いついて解説!

静的型付け言語

「TypeScriptとは?」で紹介した通り、TypeScriptは静的型付け言語です。TypeScriptで書かれたソースコードが実行されるまでの流れは以下のとおりです。

1.TypeScriptのソースコードがTypeScript ASTに変換される
2.TypeScript ASTがtypecheckerによって型チェックされる
3.型チェックが通れば、TypeScript ASTからJavaScriptのソースコードに変換される
4.JavaScriptのソースコードがJavaScript ASTに変換される
5.JavaScript ASTがバイトコードに変換される
6.バイトコードがランタイムによって評価される

1〜3のステップに関してはTypeScriptコンパイラ(TSC)によって実行され、4〜6のステップに関してはJavaScriptランタイムによって行われます。JavaScriptのランタイムはブラウザやJavaScriptエンジン内にあります。補足ですが、代表的なJavaScriptエンジンにはNode,jsやChromeの原動力となる「V8」やSafariの原動力となる「JSCore」があります。

クラス

TypeScriptのクラスはC#を参考にして作られています。アクセス修飾子やポリモーフィズム、インタフェースなどをサポートしています。TypeScriptのクラスはJavaScriptのクラスにコンパイルされるため、ミックスイン(単体で動作することを意図せず、サブクラスによって継承されることにより機能を提供するクラス)のようなJavaScriptの使い方も、型安全な方法で実現できます。またJavaやC#とは違い、クラスは名前によって型付けされず、構造で型付けされます。

DogクラスとCatクラスの構造が同じなので、walkAroundメソッドの引数としてCat型の変数であるcatを代入しても問題なく動きます。TypeScriptが型を重視したプログラミング言語ということがこの例でよくわかります。

インタフェース

インタフェースは型に名前をつけるための方法です。インタフェースの構造に従う特定の変数の組み合わせに名前をつけることができ、それぞれの変数の型を限定することができます。

ジェネリクス

ジェネリクスとは、実際に利用されるまで型が確定しないクラス・関数・インタフェースを実現するための機能のことを指します。文章だけでは分かりづらいと思いますので、サンプルコードを使って説明します。

予めテンプレートを用意し、あとで具体的な型や中身を決めるときにジェネリクスは使われます。補足ですが、エイリアスには「T」の他にも「U」がよく使われるので覚えておきましょう。

代表的な型の種類

型とは型とは「値の種類と、その値を使ってできる事柄の集まり」を指します。ここではTypeScriptの代表的な型を説明します。

Number

Numberは整数、浮動小数点数、整数、負数などすべての数値の集まりです。四則演算や比較など、数値に関するすべてのことが行なえます。

Boolean

Booleanにはtrueかfalseの2つの値があります。条件判定のために使われることが多いデータ型です。

String

すべての文字列と、それらを使ってできることの集まりです。文字列同士を連結したり、スライスすることができます。

Any

Anyはすべての型を受け入れる型です。ある値の型が何であるかを何であるかをtypecheckerが判別できない場合、その値の型はデフォルトでanyになります。

TypeScriptの環境構築手順

TypeScriptの環境構築手順を解説します。実際に自分の手元のマシンで構築し、TypeScriptのコードを書いて動かしてみましょう。

1.Node.jsのインストール

Node.jsの公式サイトよりインストーラをダウンロードし、インストールしてください。最新の機能を使いたいというニーズが無い限りは動作が安定しているLTS版をインストールするとよいでしょう。

2.TypeScriptコンパイラ(TSC)をインストール

コマンドプロンプトやターミナルを起動し、以下のコマンドをコマンドを実行してください。

npm install -g typescript 

3.インストールの確認

2のステップ後にtscコマンドが使えるようになっているので、このコマンドを用いてTypeScriptのバージョンが確認できればインストールできていることになります。

tsc -v

FAworksで現在募集中のTypeScript案件

FAworksでは保有するTypeScript案件数が増えてきており、現在募集中のTypeScript案件が50件あります。その中から3つのTypeScript案件をご紹介します。リンクを押していただくと、案件詳細の確認や案件への応募ができます。

1. モバイルオーダーシステムの新規構築案件

新規サービスの立ち上げプロジェクトです。開発スキルはもちろんですが、サービスを作っていくためのビジネススキルも身につきます。開発に関してはバックエンドもバックエンドもフロントエンドもTypeScriptを使用するため、TypeScriptの実装力を高めることができるおすすめ案件です。

2. スマホゲームのフロント開発案件

TypeScriptの業務での使用経験がない方でも応募可能な案件です。既にサービスがリリースされていて、リファクタリングや新規機能追加が主な作業です。他のエンジニアが書いたTypeScriptコードをみてお作法を学ぶことができるため、これからTypeScriptエンジニアとして活躍したい人におすすめです。

3. 広告配信システム開発案件

広告配信システムは消費財ではなく生産財のため、日常生活でみることはほとんどないでしょう。普段分からないインターネット広告の裏側を覗くことができる点で、知的好奇心旺盛な方におすすめです。React HooksやTypeScriptをメインで使用しますが、他にも様々なUIライブラリを使用するため、幅広いスキルを身につけることが可能です。

その他のTypeScript案件をお探しの方は案件一覧からご覧ください。

 -プログラミング

  関連記事

【初心者向け】TypeScriptの特徴やJavaScriptとの違いついて解説!

TypeScriptは近年注目されている言語の1つです。本記事では、TypeScriptの特徴やJa

フリーランスフロントエンジニアの単価相場、案件動向、副業など

エンジニアの中でもユーザーから見える部分を開発するエンジニアをフロントエンジニアと呼びます。フロント

MySQL Cluster―MySQLはいかに2億QPSのスケーリングを実現したか

この記事は、オラクル社MySQL主任プロダクトマネージャ、アンドリュー・モルガン氏からのゲスト投稿で

もう二度と、絶対にMongoDBを使うべきじゃない理由

もう二度と、絶対にMongoDBを使うべきじゃない理由

FAworks未公開案件やお得な情報が届く! 無料でメルマガ登録する   MongoDBは

未経験からRubyエンジニアになるためには

IT業界では、人材不足が進んでいるため未経験からエンジニアを目指す方やフリーランスエンジニアを目指す

関数型プログラミング vs命令型プログラミング~Java8でフィボナッチ、素数、階乗をやってみた~

関数型プログラミング vs命令型プログラミング~Java8でフィボナッチ、素数、階乗をやってみた~

プログラミングには多様な形式やパラダイムがあるが、有名なものを2つ挙げるとしたら、関数型と命令型だろ

【2022年】Javaフレームワーク7選!メリット、需要をエージェント目線で解説

フリーランス市場で最も案件数が多いプログラミング言語はJavaです。FAworksでは、2022年2

node.js における stream の歴史とそれぞれの問題点

node.js における stream の歴史とそれぞれの問題点

目次 内容前史初期のnode streamの問題Stream2の問題Stream3stream4?い

GolangをJavaと比べてみた~Java愛好家がGoの機能を見たときの第一印象~

GoとJavaは何が違う?GoはJavaよりも優れているのか

最初に断っておきたいのだが、私はGoのエキスパートではない。2~3週間前にGoを勉強し始めたばかりな

Crystalの紹介:Cのように速く、Rubyのように滑らか

Crystalの紹介:Cのように速く、Rubyのように滑らか

僕は、Rubyistだ。Rubyと、そのコミュニティ、その生産性など、Rubyにまつわる多くのものが