近年のフロントエンド開発は主役がJavaScriptからTypeScriptに移ってきています。本記事ではこれからTypeScript開発に携わっていきたいと考えている人向けに、必ず押さえておくべきTypeScriptの特徴や型の知識を紹介します。また将来参画するであろう案件のイメージを持っていただくために、現在募集中のTypeScript案件も紹介します。今後のTypeScript学習をスムーズに進めていくためにも最後まで読んでみてください。
TypeScriptとは？
TypeScriptはマイクロソフトが開発した静的型付け言語です。文字通り「型」を重視したプログラミング言語で、静的解析によって型を厳密にチェックすることでソフトウェアの品質を担保しています。大規模開発にも耐えられる仕様で、Google社でも社内の標準開発言語としてTypeScriptを採用しています。日本国内でも需要が高まっており、将来性の高い言語といえるでしょう。
押さえておくべきTypeScriptの特徴
これからTypeScriptを扱う上で押さえておくべき特徴を4つ紹介します。これらを理解することで、スムーズにTypeScriptの学習を進めることができるでしょう。また、JavaScriptとの比較やTypeScriptのメリット・デメリットについては以下の記事も参考にしてみてください。
【初心者向け】TypeScriptの特徴やJavaScriptとの違いついて解説！
静的型付け言語
「TypeScriptとは？」で紹介した通り、TypeScriptは静的型付け言語です。TypeScriptで書かれたソースコードが実行されるまでの流れは以下のとおりです。
- TypeScriptのソースコードがTypeScript ASTに変換される
- TypeScript ASTがtypecheckerによって型チェックされる
- 型チェックが通れば、TypeScript ASTからJavaScriptのソースコードに変換される
- JavaScriptのソースコードがJavaScript ASTに変換される
- JavaScript ASTがバイトコードに変換される
- バイトコードがランタイムによって評価される
1〜3のステップに関してはTypeScriptコンパイラ（TSC）によって実行され、4〜6のステップに関してはJavaScriptランタイムによって行われます。JavaScriptのランタイムはブラウザやJavaScriptエンジン内にあります。補足ですが、代表的なJavaScriptエンジンにはNode,jsやChromeの原動力となる「V8」やSafariの原動力となる「JSCore」があります。
クラス
TypeScriptのクラスはC#を参考にして作られています。アクセス修飾子やポリモーフィズム、インタフェースなどをサポートしています。TypeScriptのクラスはJavaScriptのクラスにコンパイルされるため、ミックスイン（単体で動作することを意図せず、サブクラスによって継承されることにより機能を提供するクラス）のようなJavaScriptの使い方も、型安全な方法で実現できます。またJavaやC#とは違い、クラスは名前によって型付けされず、構造で型付けされます。
// Dogクラス作成
class Dog {
walk() {
//
}
}
// Dogクラスと同じ構造のCatクラス作成
class Cat {
walk() {
//
}
}
// Dog型の引数を受け入れるwalkArounudメソッド作成
function walkAround(animal: Dog) {
animal.walk()
}
// インスタンス生成
let dog = new Dog
let cat = new Cat
// walkAroundメソッドにdogとcatを渡す
walkAround(dog) // OK
walkAround(cat) // OKDogクラスとCatクラスの構造が同じなので、walkAroundメソッドの引数としてCat型の変数であるcatを代入しても問題なく動きます。TypeScriptが型を重視したプログラミング言語ということがこの例でよくわかります。
インタフェース
インタフェースは型に名前をつけるための方法です。インタフェースの構造に従う特定の変数の組み合わせに名前をつけることができ、それぞれの変数の型を限定することができます。
// インターフェース作成
interface Food {
name: string;
}
// eat関数はFoodインターフェースの構造を満たすオブジェクトを引数として受け取る
function eat(food: Food): string {
return '私は$(food.name)が好きです'
}
// Foodインターフェースの構造に従う変数を定義
var cake = {
name: 'ケーキ'
}
// 関数実行
eat(cake) // 私はケーキが好きですジェネリクス
ジェネリクスとは、実際に利用されるまで型が確定しないクラス・関数・インタフェースを実現するための機能のことを指します。文章だけでは分かりづらいと思いますので、サンプルコードを使って説明します。
// 型が決まっていないインターフェースを定義
interface shelf { //インターフェースの名の横にというエイリアスを設定
item: T;
}
// ここでジェネリクスを使用して適用したい型を指定すると、型が決定される
const BookShelf: Shelf = { item: " book "}; // を省略すると型推論が機能する予めテンプレートを用意し、あとで具体的な型や中身を決めるときにジェネリクスは使われます。補足ですが、エイリアスには「T」の他にも「U」がよく使われるので覚えておきましょう。
代表的な型の種類
型とは型とは「値の種類と、その値を使ってできる事柄の集まり」を指します。ここではTypeScriptの代表的な型を説明します。
Number
Numberは整数、浮動小数点数、整数、負数などすべての数値の集まりです。四則演算や比較など、数値に関するすべてのことが行なえます。
Boolean
Booleanにはtrueかfalseの2つの値があります。条件判定のために使われることが多いデータ型です。
String
すべての文字列と、それらを使ってできることの集まりです。文字列同士を連結したり、スライスすることができます。
Any
Anyはすべての型を受け入れる型です。ある値の型が何であるかを何であるかをtypecheckerが判別できない場合、その値の型はデフォルトでanyになります。
TypeScriptの環境構築手順
TypeScriptの環境構築手順を解説します。実際に自分の手元のマシンで構築し、TypeScriptのコードを書いて動かしてみましょう。
- Node.jsのインストール
Node.jsの公式サイトよりインストーラをダウンロードし、インストールしてください。最新の機能を使いたいというニーズが無い限りは動作が安定しているLTS版をインストールするとよいでしょう。
- TypeScriptコンパイラ（TSC）をインストール
コマンドプロンプトやターミナルを起動し、以下のコマンドをコマンドを実行してください。
npm install -g typescript - インストールの確認
2のステップ後にtscコマンドが使えるようになっているので、このコマンドを用いてTypeScriptのバージョンが確認できればインストールできていることになります。
tsc -v FAworksで現在募集中のTypeScript案件
FAworksでは保有するTypeScript案件数が増えてきており、現在募集中のTypeScript案件が50件あります。その中から3つのTypeScript案件をご紹介します。リンクを押していただくと、案件詳細の確認や案件への応募ができます。
モバイルオーダーシステムの新規構築案件
新規サービスの立ち上げプロジェクトです。開発スキルはもちろんですが、サービスを作っていくためのビジネススキルも身につきます。開発に関してはバックエンドもバックエンドもフロントエンドもTypeScriptを使用するため、TypeScriptの実装力を高めることができるおすすめ案件です。
スマホゲームのフロント開発案件
TypeScriptの業務での使用経験がない方でも応募可能な案件です。既にサービスがリリースされていて、リファクタリングや新規機能追加が主な作業です。他のエンジニアが書いたTypeScriptコードをみてお作法を学ぶことができるため、これからTypeScriptエンジニアとして活躍したい人におすすめです。
広告配信システム開発案件
広告配信システムは消費財ではなく生産財のため、日常生活でみることはほとんどないでしょう。普段分からないインターネット広告の裏側を覗くことができる点で、知的好奇心旺盛な方におすすめです。React HooksやTypeScriptをメインで使用しますが、他にも様々なUIライブラリを使用するため、幅広いスキルを身につけることが可能です。
その他のTypeScript案件をお探しの方は案件一覧からご覧ください。
