EightとTypeScript
Sansan株式会社は個人向け名刺アプリ「Eight」を運営しています。Eightでは、撮影した名刺をデータ化して管理できるだけでなく、Eight上でつながることで近況の確認やメッセージのやりとりを行うことができます。現在、280万人が利用している名刺アプリです。
EightにはiOS・Android版のスマートフォンアプリに加えて、PCのWebブラウザからおおよその機能が利用できる、PC版もあります。PC版EightのWebフロントエンドはReactによるSPA（Single Page Application）となっており、ここにTypeScriptを使用しています。元々、WebフロントエンドはすべてJavaScriptで書かれていましたが、2020年5月にTypeScriptを導入しました。 本記事では、EightのフロントエンドにTypeScriptを導入する際の進め方や、実際に導入してみて起こった変化についてお話します。
JavaScriptへの課題感
EightのWebフロントエンドは2012年2月から存在し、さまざまな機能追加が行われてきました。その結果、TypeScript導入前の時点で、JavaScriptのコードは約2千ファイル・15万行にものぼりました。
JavaScriptは動的型付け言語であるため、一目見て正確に型を把握することは困難です。これは大規模なサービスであればあるほど深刻な問題となっていきます。Eightでは数年前のコードが現役で動いていることも珍しくなく、ドキュメントやユニットテストが十分ではありませんでした。その結果、コードリーディングや実装に時間がかかっていました。また、正確に型がわからないことに起因するバグもいくつか発生していました。これらの課題に対処するため、型の導入を検討し始めたのが2019年5月のことです。
注意点として、もしこれがシンプルな1ページだけのLP（ランディングページ）や期間限定のキャンペーン用ページであれば状況は異なったと思います。要件にもよりますが、これらの開発ではページにアクセントとしてちょっとした動きをつけることはあっても、複雑なデータを扱わなかったり、一度作った後は追加で開発することが少なかったりします。その場合、実装はJavaScriptで十分で、TypeScript導入のコストのほうが高くつく可能性があります。Eightの場合は、アプリケーションとしての機能が複雑であることに加え、これからも開発を継続的に行っていくことがわかっていたため、この課題感が生まれてきたのだと思います。
なぜTypeScriptなのか
かつてはJavaScriptと型と言えば、Flow・TypeScript・その他のAltJSなどさまざまな選択肢がありました。しかし、近年ではTypeScriptがデファクトスタンダードとなっており、先の課題に対する解決策としてTypeScriptを選択しました。私たちが期待したことは以下の4点です。
型チェックによるコード品質の担保と開発効率の向上
TypeScriptを用いた開発では型によるコードのチェック（型チェック）によって、書いたコードのエラーにコンパイル時に気付くことができます。エラーが検出できるという点において、型チェックは簡易的なテストと捉えることができ、コード品質の担保に寄与します。また、JavaScriptを用いた開発では実行時に気付いていたエラーも、事前に気付くことができれば、バグの早期発見や開発効率の向上が見込めます。
既存コードのドキュメントとしての役割
型はドキュメントとしても有用です。既存のコードを読み解く際、動的型付けのJavaScriptでは変数や関数などの型を把握するのに苦労する場合があります。一方、TypeScriptではコードに型が書いてあるため、どのような振る舞いをするコードなのかが一目瞭然です。これにより既存コードの読解を助け、より素早く実装にうつることができます。
JavaScriptコードとの相互運用性
TypeScriptはリポジトリ内でJavaScriptと共存させることができ、TypeScriptからJavaScriptのコードをimportしたり、反対にJavaScriptからTypeScriptのコードをimportしたりといったことが可能です。これはつまり、すべての既存のJavaScriptファイルを一気にTypeScriptに移行（変換して型を付与）する必要はなく、ファイルごとにTypeScriptにするかどうかを選択できることを意味します。 TypeScriptを導入したとしても、いきなり全員が書けるようにはならないため、チームや個人の習熟度に応じて徐々にTypeScriptを導入していくことを可能にしています。
また、これによって既存コードの移行も段階的に進めていくことができるため、練習のために型を付けることが簡単な部分から移行作業を行ったり、型があると恩恵が大きい部分を重点的に移行したり、といったことが可能になります。JavaScriptとの相互運用性は、新規の開発を止めて一気にTypeScriptへ移行する選択肢がとれない現場にとっては非常に助かる特徴といえます。
エディタとの親和性
TypeScriptのLanguage Serverと連携ができるエディタでは、JavaScriptで開発する場合と比べて、より効率的に開発ができます。例えば、文字をタイプするたびに型チェックを行ってエラーを可視化することや、変数の型に応じて利用できるメソッドを補完することができます。EightではVisual Studio Code（VSCode）でフロントエンド開発を行うメンバーが多く、TypeScriptの恩恵を受けやすい状況であったことも導入を後押ししました。
コード品質の担保はテストコードの充実によってある程度担保でき、ドキュメントもコード内のコメントや他のツールなどを用いて実現することが可能です。しかし、今後も現在のコードベース上で開発していくことを考えると、エディタとの親和性をはじめとする開発者体験の観点でTypeScriptの導入が最善であると判断し、導入を決意しました。
ちなみに導入に対して反対意見は挙がりませんでした。これは、前述の課題感が開発者の中で広がっていたためです。さらに、詳しくは後述しますが、通常の開発を完全には止めずに並行して進めていけるような方針にしたことも大きかったと考えています。また、導入時に問題が起きないかと心配する声はありましたが、導入前に入念に準備することで不安を払拭していきました。
