Twitter

Category

もっと見る

Tag

もっと見る

プログラミング言語

【TypeScript】TypeScriptとは？概要やメリット、環境構築からHelloWorld表示

【TypeScript】TypeScriptとは？概要やメリット、環境構築からHelloWorld表示

目次

  1. TypeScriptとは？
    1. TypeScriptの概要
    2. TypeScriptのメリット
    3. 動的型付けと静的型付け
  2. TypeScriptを使ってみる
    1. TypeScriptの環境構築
    2. TypeScriptでHellow Worldを出力する
  3. 最後に

開発における恩恵が多く、昨今人気を集めているプログラミング言語「TypeScript」。

ここ最近でニーズを大幅に増やした言語であり、求人数も増加傾向にあります。

今後Reactの記事を書いていく予定なのですが、TypeScriptを使ったReactにするので、それに先駆けて数回に分けてTypeScriptの記事も書いていこうと思います。

TypeScriptという名前は知っているがどういうものか分からない。

JavaScriptと何が違うのか？

メリットは何なのか？

など、そういった疑問を持った方に向けて本記事を書いていこうと思います。

また、筆者もTypeScript初心者なので、読者と同じ目線でTypeScriptについて学んだことの備忘録として本記事を書いていきます。

間違った箇所もあるかもしれないので、そうしたらご指摘いただければ幸いです。

なお、筆者がTypeScriptを学ぶ上で参考にしたサイトは下記になりますので、こちらも合わせてご参考いただければと思います。

サバイバルTypeScript
https://typescriptbook.jp/

TypeScriptとは？

TypeScriptの概要

そもそもTypeScriptとはどのような言語なのか？

TypeScriptは、2012年にMicrosoftによって開発されたプログラミング言語です。

TypeScriptはAltJS（代替JavaScript言語）と呼ばれる、コンパイルすることでJavaScriptが生成されるプログラミング言語の一つです。

TypeScriptで書いたコードが即時にJavaScriptにコンパイルされて実行されるため、JavaScriptが使える環境であれば、すぐ使うことができます。

また、JavaScriptのライブラリやフレームワークもTypeScriptから使用できる互換性の高さがあります。

簡単にいうと、TypeScriptはJavaScriptの上位互換といえるでしょう。

TypeScriptのメリット

TypeScriptには開発における恩恵が数多く存在します。

TypeScriptのメリットとしては下記などが挙げられるでしょう。

  • 変数の型付けができるため、未然にエラーが防げる
  • 複数人で開発する場合にコードの管理が楽
  • JavaScriptとの互換性が高い
  • JavaScriptの知識があれば、理解しやすい

やはりなんといっても、JavaScriptではできなかった変数への型付けができるようになった点が最も大きいでしょう。

TypeScriptでは、文字列型や数値型といった変数のデータ型を定義することができるため、型の違いによるコードの間違いを見つけやすいですし、エラーも未然に防ぐことができます。

また、厳格な型付けができるため、コードを見た際に、使われている変数のデータ型が一目でわかるため、複数人で開発している場合などに、コードの管理が比較的楽になるでしょう。

前述の通り、JavaScriptの上位互換的な言語のため、JavaScriptとの互換性が高く、JavaScriptのライブラリやフレームワークを使用することができます。

例えば、React.jsやAngular.jsや本サイトでも記事にもしているVue.jsといったJavaScriptのフレームワークでは、このTypeScriptを使うことができます。

これらフレームワークのような、複数のコンポーネントを組み合わせたコンポーネント指向な開発では、TypeScriptのような厳格な型付けは相性がいいです。

前述のように、TypeScriptは開発におけるメリットが多く、使わない手はないので、昨今需要が高まり、人気も上がっています。

求人も増加傾向にあるので、JavaScriptの知識がある方は、学習する価値はあると思われます。

TypeScriptの最も大きな特徴である型付けについて、次にもう少し深く解説します。

動的型付けと静的型付け

JavaScriptの問題点として、変数に型付けができない点がありました。

このJavaScriptの問題点を克服するためにTypeScriptは作られ、TypeScriptでは厳格に変数への型付けができるようになりました。

JavaScriptであれば、特に変数に型付けができないため、型は実行時に自動で決まるような仕組みを持っています。

このような自動でデータ型が決まるような仕組みを動的型付けといい、JavaScriptの他にRubyやPythonでもこの動的型付けが採用されています。

自動で決まるためデータ型の定義が曖昧でもエラーをはくことがありません。

例えば、JavaScriptで下記のようなコードがあったとします。

const addition = (num1,num2) => {
    return num1 + num2;
}

console.log(addition(1,2));

単純に引数で渡ってきた二つの数値を足し算するコードです。

上記コードを実行すると、「3」の数値が表示されます。

この足し算関数を下記のように実行したらどうなるでしょうか？

console.log(addition("1",2));

「12」のような値が返ってくると思います。

これは、第一引数の「”1″」が文字列なので、演算子「+」が文字列結合になったためです。

このようにJavaScriptでは、データ型が曖昧だったり間違っていたりしていても、特にエラーをはかずに、JavaScript側でデータ型を勝手に決定してしまいます。

確かに、これにより複雑なデータ型を考えずに開発ができますが、データ型が間違っていることにより、問題が起きることも多いです。

例えば、電卓のような計算ツールにおいてはかなり問題になります。

また、データ型がはっきりしていないため、コードの運用や複数人での開発では変数の管理や把握が大変です。

このようなJavaScriptの弱点を克服するために開発されたのがTypeScriptというわけです。

TypeScriptでは、あらかじめデータ型を宣言することができ、厳格にデータを管理することができます。

あらかじめ宣言したデータ型はコンパイル時に検証されます。

このようなデータ型をあらかじめ宣言し、コンパイル時に検証される仕組みを静的型付けといいます。

例えば、先ほどの足し算関数のコードをTypeScriptで記述すると以下のようになります。

const addition = (num1: number, num2: number) => {
	return num1 + num2;
}

console.log(addition(1,2))

関数の引数部分で、「(num1: number, num2: number)」といったようにデータ型を宣言しているのがわかると思います。

今回は、二つとも数値型なので、「number」と宣言しています。

関数を呼び出す時もちゃんと引数に数値型の値を入れているので、問題なく関数が実行されます。

ですが、下記のように文字列型などのデータ型の値を入れると、TypeScriptではエラーをはき出します。

console.log(addition("1",2))

このように、TypeScriptはデータ型をしっかり定義しなければ、そもそもエラーを起こすので、間違いのない安心のプログラムになるわけです。

TypeScriptを使ってみる

それでは、ここまでの前知識を踏まえて、実際にTypeScriptに触れてみようと思います。

今回は、導入からHello Worldの表示までをやります。

筆者はmacを使っているので、macでの環境構築のやり方を中心にご紹介しますが、windowsでのやり方も合わせて紹介します。

また、使用するエディタですが、Visual Studio Code（以降VSCodeと記載）と非常に相性が良いので、こちらを使用してください。

TypeScriptの環境構築

まず、TypeScriptを使うために、環境構築をしていきましょう。

TypeScriptを使うには、node.jsをインストールする必要があります。

ご自身のPCにnode.jsがインストールされていない場合は、まずインストールしてください。

下記ページからご自身の環境にあったnode.jsをインストールしてください。
https://nodejs.org/ja/download/

macユーザーの方は、homebrewでインストールするのが楽なので、homebrewをインストールした上で、ターミナルにて、下記コマンドを実行して、node.jsをインストールしてください。

brew install node

インストールが完了したら、ターミナル（コマンドプロンプト）にて、下記コマンドを実行して、バージョンが表示されればOKです。

node -v
npm -v

※表示されなければ、パスを通す必要がありますので、パスを通してください。

続いて、TypeScriptをインストールします。

下記コマンドを実行して、TypeScriptをインストールしましょう。

//npmの場合
npm install -g typescript

//yarnの場合
yarn add -g typescript

インストールできたら、下記コマンドを実行してください。

tsc -v

バージョンが表示されればOKです。

その後、任意のディレクトに「tsc-test」というフォルダを作って、ターミナルでこのフォルダに移動しましょう。

TypeScriptの設定ファイルを用意する必要があるので、ターミナルで下記コマンドを実行してください。

tsc --init

すると、フォルダ内にtsconfig.jsonという設定ファイルができると思います。

この中にTypeScriptの様々な設定を記述していくこととなります。

このtsconfig.jsonの中身を見てみると、大部分がコメントアウトになっていますが、このコメントアウトになっている部分はデフォルトで設定する項目であるため、適宜コメントアウトを外して設定しましょう。

tsconfig.jsonの内容については別の記事で詳しくやるので、今回は割愛します。

TypeScriptでHellow Worldを出力する

最後に、TypeScriptでHello Worldを出力してみようと思います。「tsc-test」フォルダ内に、hello.tsというTypeScriptのファイルを作成してください。

hello.tsには下記のように記述します。

const hello:string = "Hello World";

console.log(hello);

TypeScriptなので、hello変数にデータ型の宣言もしました。

文字列型なので、「string」です。

そうしたら、VSCode内で、ターミナルを起動してください。

そうすると、制作した「tsc-test」のディレクトリでターミナルが起動すると思います。

ここで下記コマンドを実行してください。

tsc

そうすると、同ディレクトリ内にhello.jsファイルが生成されると思います。

これでコンパイル成功です。

下記コマンドを実行してみてください。

node hello.js

下記のように、「Hello World」が表示されれば、成功です。

ちなみに、先ほど記述した変数「hello」は文字列型（string）でデータ型を宣言しましたが、ここに異なる型の値をあえて入れてみましょう。

hello.tsを下記のように書き換えて、同じように「tsc hello.ts」をしてみてください。

const hello:string = 999;

console.log(hello);

そうすると、下記のようにエラーが出てコンパイルが失敗します。

このように、TypeScriptでは、厳格にデータ型を宣言しなければならないのです。

最後に

いかがだったでしょうか。

今回は、TypeScriptの概要と環境構築からHello Worldの表示までをやりました。

まだまだTypeScript学習では序の口ですが、より深く学ぶことで、様々な開発現場でTypeScriptが使えるようになると思います。

次回はTypeScriptで扱えるデータ型について、深掘りしていこうと思います。

筆者もTypeScript初心者なので、頑張って一緒に学んでいきましょう！

次の記事：【TypeScript】基本構文と基本型、interfaceやType Aliasまでをご紹介
https://www.dailyupblog.com/languages/1717/

関連記事

関連記事