TypeScript:とりあえず入門してみる

altJSというのがあるらしい

 えー、最近世の中にはaltJSとかいうのがあるみたいです。
 古臭いJavaScriptの仕様をそのまま使うのは、いかにも垢抜けない。
 と言って、新しい仕様のJavaScriptが策定されて世に広まるのを待っているといつまでかかるかわからない。
 なら、JavaScriptをラッピングして、JavaScriptそのもので新しい仕様の言語を作って乗っければよかろうなのだ!
 というのがaltJSらしいです。

 altJSはAlternative JavaScriptの略で、JavaScriptの代替品といった感じの意味です。
 んでaltJSは、CoffeeScript や Script#、Haxeなんかがあるんですが、とりあえず、モダンな言語でHTML5を開発しよう! 俯瞰して理解するaltJSの比較 (前篇 – TypeScript, CoffeeScript, Haxe) | HTML5Experts.jpを読んで、altJSの中からどれを勉強してみるか、選ぶことにする。
 …後編が書かれてないすね、この記事。

TypeScriptでいってみよう

 TypeScriptはマイクロソフトが作ったaltJSで、JavaScriptからの変更も最小限で、コンパイル後のJavaScriptも比較的読みやすくなってます。
 TypeScript公式Webサイトで、いろいろと勉強すればいいのかな、たぶん。
 日本語はないのかな? ないみたいね。

 次世代JavaScriptとして策定中のECMAScript6の機能を先取りしたような実装で、今後ブラウザにECMAScript6が搭載された場合の移行が容易…かもしれない。
 このへんは取らぬ狸のなんとやら、あまり期待してもしょうがないような気がします。
 マイクロソフトさんのことなので、独自拡張が多くて、結局TypeScriptを使い続けないといけない、というオチになるのが目に見えてます。
 というか、仕様策定中の言語が相手ですから、誰がやってもそうなるのは仕方ない。

 C#(使ったことないですけど)の言語設計が、わりと理解しやすい感じだったのですが、その開発者であるアンダース・ヘルスバーグさんが、このTypeScriptも作ってるらしいので、いいんじゃないの?
 Turbo PascalやDelphi(Object Pascal)は、はるか昔にちょっと触った程度だけど、素性良かったし。
 という程度の理由で、数あるaltJSのなかから選択してみました。

 TypeScriptの登場(発表)がということで、いい感じに枯れてきてるんじゃないかという期待もあります。

 Haxeが、ActionScript3に似てたりコンバートできたりするみたいなんで、そちらも気になりますが、今回は上記理由でTypeScriptです。

初心者向けサイトで訓練しよう

 TypeScriptで学ぶJavaScript入門:第1回 TypeScriptの概要 (1/4) - @ITを読んで、環境の構築といわゆるHello Worldまでやってみることにしましょう。
 どうやら、マイクロソフトさんがPlayground - Welcome to TypeScriptってページを用意していて、Web上でTypeScriptを試してみることができるみたい。
 ああ、これはとりあえずどんな感触か試すのに、大変ありがたい。…が、Safariだと、うまく入力できませんね。

 Mac用にコマンドライン用のコンパイラも用意されている(というかこれを使う方が普通)ので、それをインストール。
 先ほどの@ITの記事によれば、Node.jsでNode.jpパッケージのインストールを行い、npmを手に入れて、npm i -g typescriptをターミナルで打ち込んで、TypeScriptを手に入れる、という手順のようだ。
 やってみると、root権限持ってるユーザでやってくれ、的なエラーが出たので、sudo npm i -g typescriptでインストール。
 うむ、インストールできたみたい。

 これでインストールされたtscコマンド(TypeScriptCompiler…だよなたぶん)が使える。
 ターミナルで、tscと打ち込んでみると、ちゃんとパスも通っているみたいで、コマンドオプションのヘルプが出た。
 TypeScriptのファイルの拡張子は.tsらしいので、"test.ts"ファイルでも作って、コンパイルすれば.jsが出来上がるというスンポー。
 文字コードはUTF-8でソースを書いて保存しておくのが無難らしい。
 まー今時HTMLもUTF-8以外の選択肢はないと思います(ないよね?)

 サンプルコードを見てみます。

class Person {
    private name: string;
    private age: number;
    private salary: number;
 
    constructor(name: string, age: number, salary: number) {
        this.name = name;
        this.age = age;
        this.salary = salary;
    }
 
    toString(): string {
        return this.name + " (" + this.age + ")" + "(" + this.salary + ")";
    }
}

 stringなどの型指定がActionScript3と同じ並びなので、間違えなくて済みそうです。
 ActionScript3やり始めた時は、CやJava(型 変数名)と逆(変数名:型)なので戸惑いましたが、今の主流は型は後ろみたいです。
 varとかfunctionとか省略できるみたいで、その辺りスッキリしてますね。
 メンバ変数はthis.を必ずつける仕様だそうですが、私はメンバ変数の頭にアンダーバー付ける命名法を主に使っていましたが、もうthis.つけなきゃいけないとなっているなら、多少長ったらしいですが、命名規則とかで悩むことないのでありがたいですね。
 設計思想の傾向が私と近いのかアンダース先生の作る言語は、美しく感じます。

 マイクロソフトのサンプルコードはTypeScript - Homeにある…あら、なんかGitHubに引っ越したよ、的なこと書いてありますね。
 うーむ、今世の中のコードはGitHubに集約されつつあるのでしょうか、いいかげんGitを使い始めないといけない気がしてきました。
 個人で作ってるぶんには、MacのTime Machineでもそんなに困んないんですけど、サンプルコードを見るにはGitHubか。
 てなわけで、Microsoft/TypeScript · GitHubの方で 最新の状況はチェックできるみたいです。

 とりあえず、イントロ部分は理解できた感じなので、次回はもう少し具体的に言語仕様を追っかけてみたい。

 今日はここまで。