戦う前に勝つプログラミング - TypeScriptで安全かつ快適なフロントエンド開発-てみる

こんにちは！開発エンジニア2年目の佐々木です！
突然ですが、何事においても戦う前に勝てるのが理想的ですよね。昔やっていたFGOというゲームで、諸葛孔明がいつもそう言ってました。 もちろん我々はソフトウェアを開発しており、兵法の世界とは違って戦わないわけには行かないわけですが。

私は開発において、戦う前（コードを書き始める前）に開発を簡単にし、勝利へと導いてくれる重要な要素として、「型」があると思っています。今回は、混沌としたフロントエンド開発に秩序をもたらしてくれる「型」のシステムがある言語、具体的にはTypeScriptって素敵だよねってお話をします。

フロントエンド開発とTypeScriptの相性

例えば、こんな感じのレスポンスを返すAPIがあって、

{
 "foo": "データだよ。",
 "bar": 100,
 "hoge": 50
}

こんな感じでデータをとってきて使うじゃないですか。

const someFunction = async (params) => {
 return (await axios.get("https://example.com/piyo/", { params })).data
}

で、ここで困ったことが発生するわけです。 この関数がどんな値を返すのかをちゃんと書く方法がないんですよ。

いや、コメントは書けますよ。JSDocという、コメントで型ヒントを書こうという試みもあり、まあまあ普及しています。 しかし、結局こういったコメントは人間向けでしかなく、人間がソースコードを読む時に読まないといけない量が増えてしまいます。

人間はいつも読み飛ばしますし（コメントを読み飛ばすならともかく、コメントにかまけてコード自体を深く読まなくなるのです！）、書いてあるコメントは実装ではないので、しばしばメンテナンスされずいつしか実装と乖離してしまいます。そんなコメントにどれほどの意味があるのでしょうか？

そこで、TypeScriptの出番なわけです。

https://www.typescriptlang.org/branding/

TypeScriptを使ってコードを書くことで、各関数の入出力を詳細に、しかもIDEやトランスパイラのわかる形で説明できるのです！

interface PiyoParam {
 id: number
}

interface Piyo {
 foo: string
 bar: number
 hoge: number
}

const someFunction = async (params: PiyoParam): Piyo => {
 return (await axios.get("https://example.com/piyo/", { params })).data
}

これによって、

・新たにコード書く際に、人間が既存コードのドキュメントやコメントを読み込む代わりに、IDEがそれぞれの関数や変数の想定する入出力を読み取って理解して提案してくれる。
・人間が使い方を間違った時に、IDEやコンパイラが教えてくれる。

といった恩恵を受けられるようになります。

こういった仕組みをうまく取り入れて開発者の負担を減らすことで、短期間で品質が高いソフトウェアを開発できるようになると私は考えています。 また、引き継ぎやメンバーが増えた際などにも、初めてコードベースを見る人の負荷を軽減することができるのではないでしょうか。

なので皆さん、積極的にTypeScriptを使いましょう！！！使ってください！！！！！！！

以上、ご拝読ありがとうございました！

TypeScriptは世間では割と普及してきている印象で、Buildチームでも積極的に活用しているのですが、 弊社の他の部署ではまだまだ普及率が高くないようです。

社内勉強会の機会にでも、TypeScriptが品質や保守性の向上に大いに貢献することをもっと布教しないとなぁ、と思う今日この頃です。

私たちBuildチームでは、フロントエンド開発に造詣の深いソフトウェアエンジニアを含む、様々なポジションのエンジニアを募集しています。

「日本の大企業のビジネス現場で生まれる素敵な事業のアイデアをMVPとして素早く高品質に実装し、世の中に出してアジャイルに発展させていく」というBuildチームの試みに共感いただける方がいらっしゃいましたら、ぜひともご応募ください！