Atomで簡単TypeScript入門

技術

f:id:ksakae1216:20160710153804j:plain

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

 

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

 

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

なにがいいのか?

どんなふうに試すのか?

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

 

 

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

     

    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を覚えるのは大変ですよね。

     

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

     

    ただ、このTypeScriptは2017年にGoogle社内の標準言語になりました。

    また下記記事でTypeScriptは人気プログラム言語で12位に浮上してます。

    【2018年2月】PYPL 世界の人気プログラム言語(IDEとDBもあるよ) – フリーランス チャレンジ!!

     

    もしかして今後、人気が上がってくるかも?

    コメント

    タイトルとURLをコピーしました