TypeScriptを社内に導入した話

AutoScale Advent Calendar 20182日目の記事です。

マゼンタ色の響音カゲです。今日は、社内にTypeScriptを入れることを説得して導入するまでの話をします。

経緯

SocialDogのフロントエンドは元々JavaScriptだけで書かれており、AltJSや型は使われていませんでした。

React + Reduxの環境で開発しているうちにサジェストが出ない箇所などがあり、少しでも「サジェストが出てほしい！」というのがありました。

実際、コード中の変数の中身が分からない時はconsole.logしてみるまで分からないような状況が多かったです。

当時に自分の開発でTypeScriptを使い始めたらすごく快適になった記憶があります。型の恩恵を受けていると生JSでの仕事の開発がつらくなってました。しょっちゅう「この変数の中身何だ……？」となり、補完も出ずにつらい日々を送っていました。そこで、SocialDogのコードにも型を入れようと決意しました。

型を入れるメリットをプレゼン、説得

型を入れることによるメリットはいくつかあります。

  • 型安全が得られる
  • 補完がより利くようになる
  • 他人のコードの可読性が上がる
  • リファクタしやすくなる

デメリットも挙げます。

  • コード量が増加する
  • 型の学習コストが発生する
  • リプレースなので型を付けていくコストが発生する

で、長期開発するコードは他人が読むことが多くなるので、結果的にペイできるよねっていう話をプレゼンしました。

そのときのスライドです。

結果的に入れることは決まったのですが、その後FlowにするかTypeScriptにするかしばらく相談していました。

Flow vs TypeScript

当時はFlowとTypeScriptがほぼ拮抗しているか、わずかにTypeScriptの方が優勢、という程度でした。

Flow

  • FaceBookが開発している
  • Reactと組み合わせている例が多い
  • 後から型を付けていくことができる
  • OCaml製
  • FlowType周りの使い勝手がイマイチ
  • ReactNativeとの相性が良い

TypeScript

  • Microsoftが開発している
  • Angularなどで正式採用されている
  • 使用例が増えてきている
  • セルフホスティング
  • 型定義ファイルを別管理せずに済むのでだいぶ楽
  • 最近、JSと混在ができるようになった
  • ReactNativeとの相性が悪い(かった)

結局どっちにするのか

この辺りは2018年4月当時の状況です。

今となってはFlowよりもReact、ReactNative含めてTypeScriptに流れが来ていますが、当時は非常に拮抗しており、かなり迷っていました。

決めては「将来性があるか」でした。ぼくは個人的にはFlowとTypeScriptのエコシステムを見て、TypeScriptの方がわずかに流行る気配を感じていました。先輩と相談し、TypeScriptにしようと決めました。

結果的に将来性のあるTypeScriptにして正解だったと思います。

入れる

元々Webpack v3を使っていたので、ついでにWebpack v4へのリプレースもやりました。間にts-loader挟み、tsconfig.jsonも書いて環境構築しました。結果、めっちゃ速くなりました。

さらに、幸運なことにreact-native-typescript-transformerが出たことにより、TypeScriptがそのままReactNativeでも使えるようになりました。非常にタイミングが良かったです。

入れた後

入れてからたくさんメリットがありました！

  • 明らかに要らない引数や変数があったりしたのを発見した
  • サジェストがもりもり出るようになった
  • (型のある部分の)コードを読むのが楽になった

結構頻繁に触る部分は何度も読んだりするので、型の恩恵を結構受けられました。anyついてるだけでも最低限の型チェックは入るのでないよりず～～～っといいです。

TypeScript自体はみんな1週間ぐらいで最低限読める or any付けるぐらいはできるようになりました。

一方、入れてから課題もいくつか出てきました。

  • 型は書ける人はたくさん書くけど、書かない人はほとんど書かない
  • 既存コードのリプレースはぼくがコード変更する時にやっている程度でぼくしかやってない

ぼくも社内講習会とか開きながら、ちょっとずつみんなが型の恩恵を受けられる快適な環境を目指してます！

今もし型を入れるなら

間違いなくReactNativeやcreate-react-app, Babel7で正式対応して流れが来ているTypeScriptにすると思います。Reactコミュニティが公式対応する日が来るなんて、当時は思ってもいませんでした(半年ぐらい前だけど)。

ほんと、JavaScript周りがめちゃめちゃ快適な時代になったと感じます。

結論

  • 型を入れよう
  • 途中からでも入れればどうにかなる
  • 今から触るならTypeScriptがおすすめ

という話でした。おしまい！

コメント

コメントを投稿