フリーランス チャレンジ!!

フリーランス チャレンジ!!

週休4日制に俺はなる!

Atomで簡単TypeScript入門

f:id:ksakae1216:20160710153804j:plain

みなさん、コウタロウです!

 

ところでTypeScriptってご存じですか?

 

私も知らなかったのですが仕事で使うため調べました。

なにがいいのか?

どんなふうに試すのか?

わかりやすくまとめました!!

 

ちなみに下記サイトを参考にしました。

www.buildinsider.net

 

【目次】

 

 

TypeScriptとは

TypeScriptは以下の特徴があります!

 

①マイクロソフトが開発したスクリプト言語

②オープンソース

③TypeScriptのソースコードをJavaScriptのソースコードにコンパイルする

 

つまり、TypeScriptで書いて、JavaScriptにコンパイルするということです。

でも、なんでTypeScriptで書く必要があるの?

 

メリットは?

じゃあ、何でTypeScriptで書くの?の答えは・・・

 

静的型付けの言語だからです!!

 

JavaScriptは静的型付けではないので下記コードでも問題なく

記述することができます。

gistf65170e221944879c98563af9d4f3345

 

でも"zzz"と"5"は積算することは出来ないので実行するとエラーに

なるのですがJavaScriptは動的型付け言語のため、実行前にチェック

することができません。

 

そうすると、実際に動かしてみて、うまく動かなくてどこが悪いのか

探すのが大変です。

JavaScriptを大規模に書くプロジェクトはこのコストが非常にかかります。

 

この悩みを解決するのがTypeScriptです!!

 

試してみる

では、早速TypeScriptで書いてみます。

 

最も簡単に試すことができるのがAtomエディタで

Windows、Macどちらでもインストール可能です。

 

下記記事でも紹介しています。

www.ksakae1216.com

 

Atomをインストール

まずは下記からAtomをダウンロードしインストールして下さい。

atom.io

 

TypeScriptプラグインをインストール

Atomの「Packageメニュー」→「Settings View」→「Open」

→「Install」を選択し「Install Package」のテキストボックスに

「atom-typescript」と入力し、atom-typescriptをインストールします。

※結構時間がかかります。(私の環境で5分位)

 

インストール後、TypeScriptプラグインが有効化されているか

確認してください。

 

Macであれば「環境設定」→「Packages」で確認できます。

f:id:ksakae1216:20160710160559p:plain

 

コンパイル用のファイルを作成

これがわからなくて少しハマりました。

「tsconfig.json」ファイルをAtomエディタで作成して下さい。

gistf653f63b943790e690709c415f381a46

 

TypeScriptを書く

次にTypeScriptを書きます。(Atomエディタで書いてね)

※tsconfig.jsonと同じフォルダに作成して下さい。

gistcd7ba8e1a7c8379b314a540f399cf5eb

 

 恐らく、bmi.tsを保存するだけでコンパイルされます。

MacならF6でもコンパイルできます。

 

コンパイルが正常終了すると、bmi.jsファイルが同じフォルダに

作成されているはずです!

 

bmi.jsを組み込んでみる

同じフォルダに下記HTMLファイルをAtomエディタで作成し表示してみて下さい。

ダイアログが表示されるはずです!!

gist410c953358660670d13fe4fcd0464129

 

どうでしたか?

結構簡単でしたね!!

 

作成したものをgitにあげておきます。

github.com

 

個人的には学ぶことをオススメしません

これは私見なので参考程度に見て下さい。

 

私は、プロジェクトを通じてTypeScriptを勉強しました。

TypeScriptを使っている時は、コンパイルエラーを検知できるので複雑でコード量が多いJavaScriptもスムーズに書けてこの言語の可能性を感じていましたが・・・

 

ある現場で面接した時に、面接先の人が

「TypeScriptを勉強するコストがかかるよね」

と言ってました。

 

言われてみれば確かに、TypeScript書ける人ってそんなにいません。

 

私も前の(TypeScript使っている)現場で話を聞いた時に、TypeScript書ける人が全然見つからないと言ってました。

※じゃあ、何でその現場はTypeScriptを使っていたかというと、新し物好きのPMが導入を勧めたとのことでしたが、信用なくしてプロジェクト中盤以降は別のPMに変わってしまいました。

 

Java、Scala、Python、Ruby、PHP、C#、Swiftなど沢山の言語があり、さらにHTML、CSS、JSPなど色々言語があるのにさらにTypeScriptを覚えるのは大変ですよね。

 

ちょっと将来性が明るいとは思えないので、どんな言語でどんなメリットがあるのかを知るくらいはいいかもしれないですけど、時間かけて勉強するのはオススメしません!!