どうも！

本日、7:00~16:00で時差出勤のわいです！（もちろん、在宅のわいでもあります！）

たまの時差出勤いいですね～。チャットの通知がなく、自分のペースで仕事ができる。

ただ毎日これだと寂しいので、やっぱりたまにってのが良いんですよね。

ソフトウェアの設計をしたいときに時差出勤するのが一番のおすすめです！

一旦作業が中断してしまうと、どこまで考えていたか思い出すコストが特に高いので。

いや～、たまの時差出勤。いいですね～。

でもやっぱり、毎日これだときついんですよね～。

そうそう、時差出勤といえば、、もうええわ！！時差出勤の話！！

TypeScript初心者

なにごともなかったかのように始めますが、

新規サイト立ち上げに伴って、初めてTypeScriptを触ったので、まだまだ初心者です。

今回はTypeScript初心者なりに、思ったことを書いてみようと思います。

メリット・デメリット

メリット

• エディタ（私はvscodeを使っています）がいろいろ補完してくれるし、なんといってもエラーチェックを静的に行ってくれる！！
• 型が明示されているので、どんなデータが入っているか、または渡すことができるのかが一目でわかる
• 普通のJavaScriptほど書き方が三者三様にならない（これは設計に依る気もする）
• 最新のJavaScriptの文法が使える（トランスパイルできる環境が元々ない場合）

デメリット

• JavaScriptが苦手な人（console.log()を使ったりして、ブラウザでテストしないと挙動が読めない人）にとっては、都度コンパイルする必要があるので開発効率が下がる
• 開発環境を用意する必要がある
• 学習コストがないわけではない

もっと深いメリット・デメリットがあるかもしれないですが、JavaScriptからTypaScriptに移行してすぐの身にとっては、このあたりが重要なポイントに感じました。

とりあえず定めたコーディングルール

もっとTypeScriptを使いこなすために必要なルールはあるのでしょうが、学習コストとの兼ね合いでとりあえず以下のコーディングルールを用意しました。

• 1ページにつき1ファイルのJSを生成するようにする

具体的には、pages/ディレクトリ配下にTSファイル（コンパイル対象）を置いて、そこで共通のモジュールを呼ぶなどして完結させるようにしました。

• querySelectorで取ってくる要素の型は必ず指定する

const modal = document.querySelector<HTMLElement>('.js-register-modal')!;
const statusSelectBoxes = document.querySelectorAll<HTMLSelectElement>('.js-status-select');

このような感じで、<HTMLElement>や<HTMLSelectElement>で型を指定することをルールとしました。

他にもHTML要素にはいろいろ型があるので、その都度調べるようにしています。

• nullでない変数には必ず!を付ける

特にquerySelectorで要素を取ってくるときに、その要素が必ず存在することを保証するときに使います。

また、querySelectorAllの場合は、要素がない場合でもnullが返ってこず、空のNodeListが返ってきます。そのため、!は付けないようにします。

// 必ず存在する場合
const modal = document.querySelector<HTMLElement>('.js-register-modal')!;

// 必ず存在するとは限らない場合
const modal = document.querySelector<HTMLElement>('.js-register-modal');
if (!modal) return;
// 存在した場合の処理…

// querySelectorAllの場合
const statusSelectBoxes = document.querySelectorAll<HTMLSelectElement>('.js-status-select');
statusSelectBoxes.forEach((statusSelectBox) => {
  // 要素一つ一つに対して繰り返しの処理
  // 仮にstatusSelectBoxesが空でもエラー落ちしない
});

さいごに

以上のようなコーディングルールを定めた観点は、コードを読むだけで得られる情報量が多いというTypeScriptの良さをいかに少ないコストで享受できるか、といったところにあります。

もっと良いTypeScriptコーディングルールがあれば、教えてください！

以上、わいでした。

健闘を祈る！！