Code for final

ふぁいなる向けのコード置き場です。すでにコードじゃないこともいっぱい。

TypeScriptは難しくない。JavaScriptをやったことあればTypeScriptでシステム開発はすぐできる。メリットだらけなのでやったほうがいい。

JavaScript TypeScript

ついこないだまでTypeScriptでシステム開発をってやってみたいけど 新しく覚えるの大変だろうな、覚えること多いんだろうなーって思って JavaScriptに逃げていました。
でも、思いきって今回仕事でTypeScriptを使って、システムのリリースまで終わったいまでは 絶対JavaScriptより、TypeScriptがいいって思います。

あとで詳しく書いていますが、TypeScriptでシステム開発しようと思って未経験者しか集まらなくても、 JavaScriptをやったことあれば、以下の2つだけ伝えればTypeScriptでシステム開発できますし、メリットだらけなのでやったほうがいいです。
現に今回やったシステム開発(20名くらい)で誰一人TypeScriptやったことあるひとはいませんでしたが、TypeScriptで開発できたので実証済みです。

  • 型推論できるものは型は書かない。わからないひとはエラーになったら型を書くこと。
  • 変数はまずconstで宣言する。変更する必要があるものはlet。varは使用禁止。わからないひとはconstでエラーになったらletにする。

TypeScriptが何者かご存じない方は、以下を見てもらえればわかりますが、 TypeScriptで書いたコードはビルドすることでJavaScriptに変換され、ブラウザで実行されます。
Microsoftが開発したものなので将来的にも安心して使えますし、導入するときに顧客に説明するときもMicrosoftが作ったものと言えばすんなり通るでしょう。

ja.wikipedia.org

わたしがTypeScriptを誤解していた点、良いと思う点についてまとめたいと思います。

誤解していた点

覚えないといけないことが多そう

コードを書くという点でいえばぜんぜん覚えることないです。
より便利にコーディングするために知ってたほうがいいことはいくつかありますが。
TypeScriptはJavaScriptに型が追加になったものと認識で問題ないとわたしは思います。
その型もプリミティブ型(基本の型)でいえばstring, number, booleanくらいしかありません。あと使うのは自分で作ったクラスです。
あとは変数宣言にはvarを使わずconstを使うくらいですかね。 また、細かい点はコードが間違っているとエディタが警告してくれるので始める前に学習しなくても自然と身につきます。

型を書かないといけないので逆にコード量が増えて大変そう

TypeScriptは型が追加になるってことくらいは知っているひとは多いと思います。
C#やったことあるひとならわかると思いますが、型推論があるのでそんなに気にしなくていいです。
型推論がわからないひとは以下のコードを見てもらえばと思います。
型をつける、つけないの判断できないのではないかと不安に思うひともいると思いますが、 ご安心ください。 つけないといけない場合はビルドエラーになるのでわかります。VSCodeが赤線を引いてくれます。

const id = ""; // string型と推論できるので型の記載は不要です。
const id; // 初期値から型推論できないので型が必要です。ビルドエラーになります。

書いたコードを見直しましたが、型を書いてたのはメソッドの引数と戻り値の宣言と独自のクラスにキャストするときくらいでした。
メソッドの引数と戻り値（ある場合）は必ず書いたほうがいいです。それがTypeScriptのいいところですから。
その理由は後述します。

自分だけコーディングできてもチーム全員できないとチーム開発では使えないのでは？

今回のプロジェクトでは20名ほどコーダーがいましたが、 誰一人TypeScriptを使ったことあるひとがいませんでした。存在すらしらなかった人が多かったです。
ただ、JavaScriptをやったことあるといったひとでした。
このご時世、JavaScriptをやったことないひとは新人くらいだと思います。
JavaScriptさえ知っていればチーム開発でもTypeScriptは全然使えます。
以下の3点だけ説明すればOKだとわたしは思います。
実際、今回の開発もこれでうまくいきました。

  • 型推論できるものは型は書かない。わからないひとはエラーになったら型を書くこと。
  • 変数はまずconstで宣言する。変更する必要があるものはlet。varは使用禁止。わからないひとはconstでエラーになったらletにする。
  • エディタ上で赤い線が出ているところは必ず修正する。(当たり前ですけど守られていないことがありました)

守らないひとがいてバラバラになるのでは？と危惧されると思いますが、エディタの設定で矯正できますし、 最終的にビルドのときにエラーになるのでわかります。

ビルド(コンパイル)環境を構築するのがめんどそう

JavaScriptはビルドする必要がないので、手軽さという点ではJavaScriptよりは劣ると思っていました。
これがわたしが一番敬遠する理由でした。
コマンドでビルドする仕掛けをバッチ処理で作る必要があるのかと思っていました。
ただ、Vue CLIを使うことでまったくビルドしている感じなく、 JavaScript同様に使えるので杞憂だったということがわかりました。
今回はVueだったのでVue CLIでしたが、ほかの環境でもきっと同じだと思います。

ビルドしたものを動かすからデバッグができないのでは？

デバッグはtsファイルにブレークポイントをつけて普通にできますのでご安心を。
デバッグのテクニックは後日記事を書きたいと思います。

良い点

タイプミスに早期に気づける

これが一番の魅力だと思います。IDEが発展してきてインテリセンスなどで だいぶタイプミスによるバグを軽減することができるようになりましたが、 完全にゼロにすることはできません。
TypeScriptではビルド時にチェックはもちろん、VSCodeだとエディタ上で 赤い線で警告することもできるので効率よくコーディングできます。

const userid = "a";
// 宣言が見えないくらい間があいている
alert(user_id); // ビルドエラーになる。user_idという変数は宣言されていないため

想定と違う型の値が入ることがない

JavaScriptだと型がないのでどんな値でも入るので 間違って違う型の値が入ってる可能性があるかもと心配することがあるかもしれませんが、 TypeScriptでは型があるので型に当てはまらないものは入りません。
また、使う機会は局所的ですが、any型というなんでも入る型もあります。

let value = "0"; // 型推論で文字列型になる。
value = 1; // 数値型はいれることができない。

メソッドに渡しているものが間違っていると警告してくれる

メソッドの引数と戻り値には必ず型を定義しますので、 間違った型の変数を渡したら赤で警告がでるのでコーディングミスが事前に防げます。
JavaScriptだと動かしてエラーになるまで気づけません。

function main() {
  this.add(1)
}

function addPrefix(value: string) :string {
  return "prefix" + string;
}

変数が変わってないことを保証してくれる

TypeScriptでは変数をconstで宣言することをおすすめします。
constは一般的に定数で使うキーワードですが、TypeScriptでは 一度いれたらインスタンスを変更できない変数として使います。
変更しようとしたら警告してくれるので間違いに気づけます。
変数って意外と一回入れたら変更しないものです。
今回開発したコードを見直しましたが、ほとんどconstでいけてました。
letを使ってたのはループ内変数くらいですね。
ちなみにconstでarrayを宣言してpushしてもエラーにはなりません。
インスタンスを変更していないので。

const numbers = [];
numbers.push(1); // ○ エラーにはならない。インスタンスを変更していないから。
numbers = []; // ✕ エラーになる

for (let i = 0; i < array.length; i++) { 
  // forで回すときはletを使う
}

メソッドの処理でnullやundefifnedチェック処理が不要になる

JavaScriptだとundefinedやnullが入ってこないかチェックする必要があったりしますが、 TypeScriptではnullとundefinedを型として扱うことができるので、 チェックする必要がなくコードがスッキリします。（HTMLとの境界のメソッドでは一部例外もありますが） 誤っていれたらエディタで赤い線が出るのでわかりやすいです。
もちろんnullを使いたいときは使うこともできます。

const value = ""; // string
const value :string = null; // ビルドエラーになる
const value :string | null = null; // nullをいれることができる

map型がある

システム開発ではよくmap型を使います。
JavaScriptにはmap型がなく、代替としてobjectをmapとして使ったりしますが、 TypeScriptでは標準でmap型があるので非常に便利です。

const idMap = new Map<string, number>();
idMap.set("a", 1);
idMap.set("b", 2);
idMap.forEach((value, key)=>{
  console.log(value); // mapを回すことも可能
});

クラスが使える

クラスもシステム開発では必須といっていいと思います。
データを定義するのに使います。
特に継承をうまく使って共通化したりすれば、品質も生産性もあがります。

export default class Home extends Base {

}

というようにいいことしかないのでこれからWEBシステムを開発するひとがいたら JavaScriptではなく、ぜひTypeScriptで開発してほしいと思います。