☰
ねころぶろぐ

TypeScriptプログラミングの基礎【現役エンジニアがわかりやすく解説】

PROGRAM

TypeScriptプログラミングの基礎【現役エンジニアがわかりやすく解説】

TypeScriptプログラミングの基礎を知りたい方に。

この記事を読まれている方は、

  • TypeScriptのプログラミングがどんなものか知りたい
  • TypeScript言語の簡単な書き方が知りたい
  • TypeScriptが使われる場面を知りたい

おそらくこのように考えている方が多いと思います。

この記事を書いている私は、
プログラミング未経験から転職を果たした現役のWeb系エンジニアです。
エンジニア歴は３年ですが、本業とは別にフリーランスの副業で月１０万円ほど、多いときで２０万円ほどの収入があります。

この記事では、現役のエンジニアが、TypeScriptプログラミングの基礎を解説しています。

プログラミング言語のTypeScriptの特徴

プログラミング言語のTypeScriptの特徴

TypeScriptはプログラミング言語のひとつで、静的型付けのコンパイル言語で、オブジェクト指向型の言語です。

静的型付けとは、簡単に言うと、データを文字列型や数値型、論理型などに分ける必要がある言語です。

コンパイル言語とは、プログラムの実行前に、開発者の方でコンパイラーを使って構文チェックなどをしたうえで中間言語に変換しないと動作しない言語のことです。

一方、スクリプト言語とは、プログラム実行前にコンパイルという、書いたプログラム文を中間言語に変換する作業の必要がない言語のことで、書いた後はすぐにプログラムを実行することができる言語のことです。

オブジェクト指向型言語とは、オブジェクトという概念を持つ言語のことで、簡単に言うと、データ構造として、配列や構造体に加えて、オブジェクト(クラス)があるということです。
オブジェクトのおかげで、ソースコードのメンテナンスがしやすかったり、機能の流用ができます。

TypeScriptはJavaScriptの拡張言語となっており、コンパイルするとJavaScriptに変換されます。したがって、コンパイル言語といってもJavaScriptに変わるので、動作時はスクリプト言語と言えます。

同様にコンパイルするとTypeScriptの静的型付けからJavaScriptの動的型付けになります。

TypeScriptの良さとしては、静的型付けの言語のため、データの型をはっきりと決めてコーディングができるところです。
もちろんJavaScriptでも内部的には型を持っているはずですが、プログラマーの方では型を指定する必要がありませんでした。

また、JavaScriptは他の言語とは一味違ったオブジェクト指向の言語でしたが、TypeScriptではクラスベースのオブジェクト指向を取り入れていますので、他の言語と変わらずにコーディングすることができます。

TypeScriptはMicrosoftによって開発されており、Microsoftの統合開発環境(IDE)であるVisual Studioでも開発が可能となっていますので、こちらも大きなメリットの一つです。

今回はTypeScriptのお話ですが、現在ブラウザで動かすことのできるプログラミング言語としては、JavaScriptの1強となっています。TypeScriptはあくまでJavaScriptをベースにした言語で、コンパイル後はJavaScriptになるため、フロントエンドがJavaScriptの1強である事実そのものは変わっていません。

初心者の方はJavaScriptを学習されることをオススメしています。

TypeScriptの用途

TypeScriptの用途

TypeScriptは、主にブラウザで動作する、フロントエンドのプログラミング言語として使われます。
コンパイルするとJavaScriptになりますが、きちんと型付けをしたい場合やクラスベースのオブジェクト指向で開発したい現場などで使われるケースが多いです。

TypeScriptは、JavaScriptとの互換性が高く、JavaScriptの多くのライブラリが使えるので、通常のJavaScriptを使うよりもさらに選択肢が広がります。

学習のしやすさはJavaScriptとTypeScriptでしたら、初心者にはJavaScriptになると思います。理由はJavaScriptの方は動的型付けでスクリプト言語なので、あまり深いことを考えずにプログラムを動かせるからです。

一方、他の言語を経験してきた方にとっては、TypeScriptの方が使いやすいと感じると思います。Visual Studioで開発できるというのもTypeScriptの魅力の一つです。

TypeScriptの書き方

TypeScriptの書き方

ここでは簡単に書き方を少しだけ紹介します。実際に始める気になったら、ぜひ参考書などの教材を参考にして、試してみて下さい。

Hello World!を画面に出力する

まずはお決まりのHello World!という文字列を画面に出力する方法から。

console.log("Hello World!");

これで出力することができます。
C言語やJavaなどとは異なり、main関数を書かなければ動かないということはなく、いきなりそのまま命令文を書くことができます。クラスもなしで動くので、オブジェクト指向は強制されていません。

最終的にJavaScriptに直さないといけないので、プログラムを実行する前にコンパイルが必要になります。
※今回の場合はJavaScriptのまんまの内容なのでコンパイルしなくても動きます。

変数宣言と分岐処理

次は少し踏み込んで、変数宣言と分岐処理をしてみます。

var age: number = 19;
if (age < 20) {
    console.log("未成年");
} else {
    console.log("成人");
}

上記の例では、まずageという数値型の変数を作り、その中に19という数値を入れています。
次にageが20未満であれば”未成年”という文字列を、それ以外であれば”成人”という文字列を出力するような分岐処理をしています。

配列と繰返処理

続いて、配列の使い方と繰返処理について、解説します。

ここでは配列を作って、以下のようにデータを出力することにしましょう。

佐藤,田中,小林

これを出力するコードは以下です。

var students: string[] = ["佐藤", "田中", "小林"];
var output: string = "";
for (var i: number = 0; i < students.length; i++) {
  output += students[i];
  if (i < students.length-1) {output += ",";}
}
console.log(output);

上記の例では、まず配列studentsに「佐藤」「田中」「小林」の３つの文字列を格納しています。
その後、カウンタ変数iを0に初期セットし、配列studentsの要素の数に到達するまでループでiを1ずつ増やしてまわしていきます。その際に、console.log関数を使い、配列studentsのi番目の要素の値を出力し、最後の要素以外、その後に「,(カンマ)」を出力しています。

構造体の取り扱い

最後に構造体の取り扱い方法について解説します。

ここではエクセルのようなデータを作って、以下のようにデータを出力することにしましょう。

名前:佐藤,性別:男性
名前:田中,性別:女性
名前:小林,性別:女性

これを出力するコードは以下です。

var first_row: { [key: string]: string; } = {"A":"佐藤","B":"男性"};
var second_row: { [key: string]: string; } = {"A":"田中","B":"女性"};
var third_row: { [key: string]: string; } = {"A":"小林","B":"女性"};
var excel_data: { [key: string]: string; }[] = [first_row, second_row, third_row];

for (var i: number = 0; i < excel_data.length; i++) {
  var output: string = "";
  output += excel_data[i]["A"];
  output += ",";
  output += excel_data[i]["B"];
  console.log(output);
}

上記の例では、まずfirst_row, second_row, third_rowという３つの連想配列を作り、それぞれのAというキー(列)に名前を、Bのキーに性別の値を入れていきます。
そして、それら全てをexcel_dataという配列に入れます。
その後、カウンタ変数iを0に初期セットし、配列excel_dataの要素の数に到達するまでループでiを1ずつ増やしてまわしていきます。その際に、console.log関数を使い、配列excel_dataのi番目の要素の中のA列とB列の値を出力しています。

まとめ：TypeScriptは強力な後ろ盾とJavaScriptの拡張が魅力的な言語

まとめ：TypeScriptは強力な後ろ盾とJavaScriptの拡張が魅力的な言語

TypeScriptの良さを簡単にまとめると、以下のとおりです。

  • まともに書ける ← 静的型付けとオブジェクト指向
  • JavaScriptとの高い互換性 ← JavaScriptを拡張
  • 強力な後ろ盾とIDE← Microsoftが開発・サポートしている言語

つまりTypeScriptは、Microsoftという強力な後ろ盾がいて、便利なIDEであるVisual Studioで開発することができ、なおかつ静的型付けとオブジェクト指向のまともなコーディングができる、JavaScriptをベースにしている言語ということになります。JavaScriptを使う局面では、TypeScriptを使うことを検討してみる価値は十分あると思います。

TypeScriptの将来性についてですが、最近JavaScript自体にも更新があり、ES6でクラスが使えるようになりましたので、静的型付けという点以外ではあまり大きな差はなくなってしまっています。

もともとTypeScriptはJavaScriptがES5でクラスの概念がなかったときにクラスを導入することで注目を集めました。

それに、わざわざコンパイルしないと動かないというのも面倒な点です。
将来性については慎重に見極める必要がありそうです。

TypeScriptは静的型付けでオブジェクト指向の言語なので、独学では難しいと感じる方もいるかもしれません。もし独学でできなさそうな方は、プログラミングスクールも手段の一つに入れると良いと思います。

現役エンジニアがオススメするプログラミングスクール３選【無料体験あり】

「一からきちんと学べるオススメのプログラミングスクールを知りたい。プログラミングの効率的な学び方を知りたい」←こういった疑問に答えます。本記事内容：まずはどのプログラミング言語を選ぶべきか／現役エンジニアがオススメするプログラミングスクール３選／プログラミングスクールにプラスして行うべきこと

>  >  TypeScriptプログラミングの基礎【現役エンジニアがわかりやすく解説】