syakoo's Lab

技術ブログやちょっと気合の入った記事を残すブログ

TypeScriptを勉強してみる(#1 tsc)

f:id:syakoo:20190807140200p:plain

1. はじめに

前からTypeScriptに運命を感じていたので、チュートリアルを進めながら布教していきます。

目次は以下の感じです。

2. TypeScriptとは

www.typescriptlang.org (↑公式ページ)

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。(引用: https://ja.wikipedia.org/wiki/TypeScript)

簡単に言うと、JavaScriptは書いたらそのまま実行できるが、TypeScriptは一度トランスパイルといってJavaScriptに変換されてから実行できるようになります。

あれ、じゃーJavaScriptでよくない?と思うかもしれないが、様々な利点があります。個人的に今思い浮かぶ利点(TS初心者だけど)を上げていこうと思います。

  • 静的型付けより、クラスや関数がより厳格化できる。

特に共同開発などで進めると、このクラス使えばいいや見たいなノリでしっかり理解していない関数を呼び出すときがある(と思う)。その時に、型付けされていればバグを未然に防ぐことができる。

  • 一度トランスパイルする工程を作ることにより、先にバグを発見できる。

そのまま。動作のバグは動作確認でしかできないけれど、簡単なバグは実行前に確認出来たらうれしいです。

  • トランスパイルは最適化されたJSに変換される。

トランスパイルの設定次第で、ES5ES6などのブラウザのバージョンに合わせてJSに変換してくれるので、全部書き直す必要がないです。

...このままだと、文字がズラーーーって並ぶだけで何も面白くないと思うので、利点はこのくらいにしてチュートリアルを見ながらやっていきます。

3. 環境構築

まず、公式ページからNode.jsをインストールします。Node.jsってサーバーサイドのJSって聞いたけど関係あるの?と思うかもしれないですけど、Node.jsをインストールするとnpm(Node Package Manager)というパッケージが豊富なツールが手に入るので、JSをやりたい人には割と必須なモノです。

JavaScriptnpmPythoncondaは似ていますが、パッケージの管理の仕方に違いがあります。

言語 パッケージの管理の仕方
npm Javascript ディレクト
conda Python conda環境

上にもある通り、condaは環境を作ってその中でパッケージをインストールしていきますが、npmディレクトリ毎にパッケージをインストールします。 ベースの環境もcondaだとbasenpmだとglobalとなります。

それでは、TypeScriptの環境を作っていきます。まずは作業用フォルダを適当に作ってそこに入ります。 そしてこのコマンドをそのディレクトリで入力。

$ npm i -g typescript

iはinstallのiです。installと入力しても大丈夫です。また、-gはグローバルにインストールということですので、どのディレクトリでもtypescriptがインストールされた状態になります。 このコマンドを打って、バージョンか帰ってきたら成功です。

$ tsc -v
Version 3.5.3

このtscっていうのが、トランスパイル(TS=>JS)をするためのコマンドです。(多分 TypeScript Compilerの略)

このtscは設定によって、出力先フォルダやブラウザのバージョン等色々なJavaScriptに変化させることができます。それの設定ファイルをいじっていきましょう。

$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

これでtsconfig.jsontscの設定ファイルとして生成されました。色々書いてありますが、今回は次のように直します。

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "outDir": "./javascript/",                        /* Redirect output structure to the directory. */
    "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
  },
  "include": [
    "typescript/*"
  ],
}

今回はわかりやすいように、TypeScriptのファイルをtypescriptに、JavaScriptのファイルをjavascriptに格納していきます。

4. TypeScriptを書いてみる

ディレクトリ構成はこちら。

f:id:syakoo:20190807131651p:plain
ディレクトリ構成

\html\javascript\typescriptは手動で作成します。そして、./typescript/helloWorld.tsに以下のコードを記述

function helloWorld(name: string): void {
    let message = name + ': Hello TypeScript :)'

    console.log(message);
}

helloWorld('Syakoo');

関数や引数に型宣言(アノテーション)をしているのがわかります。最初は違和感があるかもしれないですが、これがないと不安な体になっていくと思います(まだなってないけど)

5. tscを用いてトランスパイル

tscの設定ファイルであるtsconfig.jsonがあるディレクトリに移動して次のコマンドを入力

$ tsc

ちなみに、トランスパイルするファイルを選択したい場合はtscの後にファイルを記述するだけで大丈夫です。

すると、空だったはずの./javascript/に変化が...!!

f:id:syakoo:20190807132723p:plain
トランスパイル結果

./typescript/にあったhelloWorld.tshelloWorld.jsとなって保存されているのがわかります。フォルダー名まで残っているのは、ファイル名が同一だったときの衝突を防いでいると思うし仕方ないと思います。実際にhelloWorld.jsの中身を見てみると...

f:id:syakoo:20190807133108p:plain
helloWorld.js

型宣言がなくなっているのでしっかりjavascriptに変換されているのがわかりますね。これを実行してみましょう。実行するにはnodeのコマンドでターミナル上でjsファイルを実行することができます。(さすがサーバーサイドjs!!!)

$ node javascript/typescript/helloWorld.js
Syakoo: Hello TypeScript :)

ちゃんと出力されました。

6. htmlで動作確認

実際にnode上で動作確認はしたけれど、一応htmlでも動作確認したいと思うのでしていきます。./html/index.htmlに以下のコードを記述します。

<!DOCTYPE html>
<html>
    <head>
        <script src="../javascript/typescript/helloWorld.js"></script>
    </head>
    <body>
        <h1>TypeScript Test</h1>
    </body>
</html>

そして、このファイルをGoogle Chrome等で開くと...

f:id:syakoo:20190807135440p:plain
動作結果

ちゃんとconsole上に表示できましたね。これで終わります。

7. さいごに

TypeScriptいかがだったでしょうか?TypeScriptをここで知った人はおそらく、「なんとなくわかったけれど、JavaScriptで書いた方がよくね?」と思う人が多いと思います。確かに今回のような短いコードだと型宣言もおっくうですし、JavaScriptで書いた方が早いしわかりやすいとおもいます。けれど、ファイルが多くなって、オブジェクト毎にファイルを保管するようになり始めるとTypeScriptのありがたみがすごくわかると思います。

実際にフロントエンドはSPA(Single Page Application)といってページ遷移なしでデータを非同期で拾ってくる方式が多くなっていると思います。それらの軸は紛れもないJavaScriptですので、それのスーパーセットであるTypeScriptを勉強していくことをお勧めします。

Webサービスに関わる予定がない方もIT関係であれば、こういう言語があるってことを頭の片隅にでも置いていただけると幸いです。