こんにちは、株式会社バベル Harajuku.ts 運営事務局です。
バベルは、"売れる"営業パーソンを継続的に育成する仕組みを作る、「Web会議記録・営業人材育成 AIクラウド」ailead(エーアイリード)を提供するAIオートメーションの会社です。
aileadの開発でも利用しているTypeScriptのコミュニティ活動として、2021/12/17(金)に「Harajuku.ts Meetup #1」を開催しました！
Harajuku.ts Meetup #1 (2021/12/17 19:00〜)
本記事では、イベントレポートの形式で「Harajuku.ts Meetup #1」の内容をお届けします。
スピーカー
@k2wanko
複数のITベンチャーに勤務の後、2017年LINE株式会社に入社。セキュリティエンジニアとしてメッセージサービス、toC、toB、IoT、ブロックチェーン、FinTechからコーポレートサービスまで幅広く携わる。2020年は同社で開発者として監査基盤の開発を担当。2021年9月より株式会社バベルに参画し、執行役員CTOに就任。
@uhyo
事業会社で金融系サービスのフロントエンドエンジニアを担当。個人でも精力的に活動しており、Qiita・Zennなどの技術系サービスへの記事投稿、ならびにTypeScriprtへのコントリビューションやTypeScriprt関連書籍執筆なども行う。
Harajuku.tsについて
Harajuku.tsは、TypeScriptのコミュニティ・勉強会です。
TypeScriptに関わる方々で交流や勉強会開催・技術情報の交換など、コミュニティを盛り上げていこうという趣旨で、バベルCTOのk2wankoを中心に主催しています。
コミュニティ用のSlackも作っているので、ご興味ある方はぜひJoinください！
https://join.slack.com/t/harajukuts/shared_invite/zt-1076g8e4m-He6OqOASZjf5lMt~uK_Uog
初の開催となった今回は、バベルCTOのk2wanko、 TypeScriptコミュニティで著名なuhyo さんといった、TypeScriptを用いたプロダクト開発に携わるエンジニアが登壇。開発の中での技術課題の改善、 初学者向けに型システムや学習方法の解説について発表が行われました。
◯発表内容
- セールスAIクラウド「ailead」の tsconfig厳格化対応した話 by k2wanko
- TypeScriptを振り回せ！ by uhyo
初回にもかかわらず90名弱の方に応募いただき、TypeScriptへの関心の高さを実感しました。
YouTubeでアーカイブ動画も閲覧できるので、ご興味ある方はぜひご覧ください！
aileadとTypeScript
バベルからは、当社が提供するaileadにおけるTypeScriptの活用や取り組みについてお話させていただきました。
aileadは、今夏にリリースされた”セールスイネーブルメントツール”です。
“セールスイネーブルメント” とは、「成果を上げる優秀な営業パーソンを再現性を持ち輩出する仕組みづくり」のことを言います。
労働生産性の低さを課題にもつ日本、かつ新型コロナウィルスの影響により商談がオンライン化している状況において、
- 営業パーソンが顧客対応に時間を割けていない
- あいまいな役割分担と営業ナレッジの共有化がなされていない
といった課題を、AIやソフトウェアの力で解決するサービスです。
下記のような技術スタックで開発しています。
- TypeScript
- React
- Next.js
- GraphQL
- GCP / Firebase
- CloudSQL PostgreSQL
- Prisma
各技術やノウハウなどについては、また別の機会に発信していく予定です。
現状の体制×未来を見越したTypeScriptの採用
前述の通り、aileadではTypeScriptを用いて開発をしています。
当日の発表でもお話したのですが、バベルがなぜTypeScriptを採用しているかという点について、改めて整理してみます。
主に3つの理由から、TypeScriptを採用しています。
1つめは「3年後の未来を見据えてポジティブな状態を想定している」という点。
既に多くの会社やサービスでの開発に採用されていますが、TypeScript利用人口は更に増えていくと考えています。
利用人口が拡大していくことで、コミュニティが強固になり、情報量・ノウハウ蓄積量やスピードの改善といったエコシステムが形成され、開発速度が上昇していくという仮説を持っています。
2つめは「型ベースでの開発による恩恵」です。
JavaScriptのみを利用していて型がない環境だと、ドキュメントやリファレンスに向き合う時間がどうしても多くなってしまいます。
こういった面を、型があるTypeScriptでは軽減することができ、サービス開発や提供価値の向上に多くの時間を投下する環境を作りやすいというメリットがあると考えています。
3つめは「コンテキストスイッチの最小化」。
エンジニアリソースは有限ということもあり、立ち上げ期はフロントエンドもバックエンドも同じエンジニアが書くことを想定していました。
その際に、言語を分けてしまうと、型などの制約や言語仕様等の差分が出てしまい効率性が下がってしまうというリスクが生じます。
そこも考慮し、フロントエンド・バックエンドでの言語を統一し、考え方や実装に対して同じ向き合い方で解決できるように、TypeScriptを選定しています。
---
当日の発表レポート
さて、ここからは当日の発表についてレポートしていきます！
ai leadにおける tsconfig厳格化 by @k2wanko(バベルCTO)
最初に、CTOのk2wanko から「tsconigの厳格化」をテーマに発表しました。
tsconfigとは
TypeScriptを使うためのコマンドラインツールであるtscコマンドのオプションを定義するファイルです。詳細は公式ドキュメント を参照ください。
入社時は strictのオプションが false になっていた
9月に入社してからコードを書いていた際に、strictというオプションがデフォルト状態のfalseになっているという問題に気付きました。
(現状では) “strict” : true の際、これらのオプションがすべて trueになります。(参照)
たとえば、strictNullChecksが無効だと代入時にnullとundefinedを区別しなくなってしまい、noImplicitAnyが無効だと暗黙的なany型を許容してしまいます。
こういった検証が甘いままだと、型を雑に使えてしまい、不具合の可能性に気づきにくいまま開発することになってしまいます。
3,000弱のコンパイルエラーの改修
当時のaileadのプロダクトコードは約10万行。”strict” : trueにすると、2,873ものコンパイルエラーが発生している状態でした。
この状況を考慮し、技術顧問uhyoさんからのアドバイスを元に「厳格化していかないといけない」と思い立ち、Learing Professional Day(*)という技術改善の日に修正していくことにしました。
その際に、チーム総動員で “strict” : true に修正する対応を実施しました。
(*) バベルでは四半期に一度、日常の開発業務からは離れて技術的な改善をする」ことを目的に、”Learning Professional Day” という取り組みを設けています。
今回は3日間の修正期間として、下記のような修正に取り組みました。
- GraphQLで生成したコードで型を使えていなかったため、GraphQL Code Generatorを導入
- nullとundefinedの可能性を考慮していないコードも何千件あったのですが、条件分岐を挟んで地道に修正
どちらも、開発当初はエンジニアリング経験豊富なメンバーが不在だったため、発生してしまっていたものでした。
直せなかった箇所もある
多くの問題は修正完了したものの、一部PrismaとGraphQLで型の整合性が取れず、想定していた時間内に綺麗に直せない箇所もありました。
そこは泣く泣く、@ts-expect-errorを用いてコンパイルエラーを無視しています。
コンパイルエラーを無視する危険なコメントのため、使い所はきちんと考える必要があるとは思いますが、今回は時間も限られていたので暫定的な対応をしています。技術負債になり得る点なので、将来的にきちんと修正していくつもりです。
厳格化の成果
aileadをTypeScriptで開発し続けていくにあたって、型によるメリットを得て開発速度を向上し、お客様への価値提供スピードを最速にするために、厳格化(= “strict” : true)に取り組みました。
振り返りとしては、型の恩恵をきちんと受けられるようになり、私が入社した9月,10月ごろと比べて新機能の開発速度が格段に上がったと感じています。
合わせて、Prismaでのクエリの組み立て等で、型を使えていなかった点に気付き、修正することにもつなげていけそうです。
参加したメンバーからは、
- エラーの起こりうるコードを防止できることがメリットだと感じられた
- データ構造を意識して書くためにTypeScriptを使うのであれば、今回くらい厳格なルールがないと効果が半減してしまうことに気づいた
- (短期的には)厳格化の影響で増加した工数の割に効果が体感しづらかった
と様々な感想がありましたが、直すべき箇所や成長阻害になり得る箇所を可視化できたことは非常に良かったと思っています。
まとめ
今回は技術としてTypeScriptを選定していたものの、型の恩恵を受けられていなかったため、後から修正することになったというケースでの取り組みについて話しました。
どんなにモダンな技術を取り入れても、内容を理解せずに使っていると宝の持ち腐れになってしまいます。
エンジニアとして選定した技術に責任を持ち、開発・運営していくべきと、改めて感じさせられました。
---
Type Scriptを振り回せ by @uhyo
次に、バベルの技術顧問も務める uhyoさんから、
- 初めてTypeScriptのプロダクションにアサインされて、書き始めた
- これからTypeScriptを勉強します
といった方に向けて、TypeScriptに振り回されるのではなく「TypeScriptを振り回そう」という内容を発表いただきました。
こちらの発表を、k2wankoがレポートしていきます。
実際に遭遇しそうなシチュエーションや、あるあるコード例など、資料内に登場しているので、ご興味ある方はぜひ資料やアーカイブも見てみてください！
TypeScriptと型システム
最初はTypeScriptと、特徴である “型システム”の話からスタート。
まず「TypeScriptは、JavaScriptに “型システム” をもたらしてくれるもの」であると。
「その型システムの役割は、一般論として『型検査』『入力支援』『コード生成』の3つ。」
「役割によって得られるメリットが、型システムを利用する目的になる」
「TypeScriptにおいての “コード生成” は、JavaScriptへの変換に型情報を利用しないという特徴があるため、『コンパイルが通ればいい』という考え方は危険。TypeScriptの恩恵を0まで落としてしまう恐れがある。」
uhyoさんいわく、「TypeScriptを使う上では、必要最低限ではなく能動的に型を活用して、プログラムの正しさを向上させるという目的意識が大事」であると。
こういった、前提となる考え方やTypeScriptの特徴を整理してお伝えいただきました。
tsconfigを厳格化した話をしましたが、まさに型を使う意味や恩恵を十分に得るという部分から、非常に共感して聞いていました。
型を能動的に活用するための3要素
次に、能動的に型を活用するために必要なものについて。
「『やる気・探究心・知識』の3つ要素が重要です。」
発表では strictNullChecks(*)を忘れていたというシナリオを例に、3要素を使ってどう解決するか、解説していただきました。
(*)意図せずnullが代入されてしまうことを防ぐオプション
また、TypeScriptを使いこなすための道筋は2つで、
- ①とにかく知識をつけてベストプラクティスを実践する
- ②常に現状に疑問を持ちさらに優れたやり方を探究する
であるとのこと。
「やる気があればできるということで、初心者の方には②がおすすめ。」
「コンパイルが通ることがスタートラインであるTypeScriptは、現状に疑問を持ってコードを改善していきやすいのも相性がいい。」
「また、知識を蓄え極めていけば①にも移行していける。それが理想的なステップ」
ということでした。
TypeScript活用の際は、「人間が気をつけなければならないと思ったら、TypeScriptにチェックしてもらえないかを考えてみる」という思考で取り組むことがオススメとのことでした。
最初は知識も揃っているわけではないので、実践しながら学んでいくというプロセスは個人的にも重要だなと考えています。また、「動くことがスタート」「ロジック保証において、ユニットテストよりも型システムが勝る部分がある」といった特性から、まさにTypeScriptとの相性が良い点だなと感じました。
意図のあるコードを
最後は、「コードに意図を込めよう」というメッセージ。
一般的にも「読めば意図がわかるものが、良いコードである」と言います。
ただ “動くだけのコード” よりも、”他人が読んで意図を理解しやすいコード”を書くべきということです。
「TypeScriptでも同様で、良いTypeScriptのコードは意図を読み取れるものであり、それらはコンパイラオプションや型の書き方が改善につながる。」
という内容を、例に出てきたコードやユニオン型・リテラル型などを用いて、解説してくださいました。
発表を聞いてみて
TypeScriptの色々な機能を活用していってほしいとの思いから、具体例も用いながら網羅的に説明してくださいました。
発表後に資料を公開されてからの反響もすごく、初学者の学習資料としてはもちろんのこと、初学者向けの説明資料としても、保存版となる資料なのではないでしょうか。
型システムの恩恵を軸に
- 人間でなくTypeScriptが管理・保証する部分を増やすこと
- プログラム自体の正しさのためにTypeScriptを活用すること
は、TypeScriptの特性から非常に重要な点だと、個人的にも頷きながら聞いていました。
改めて、発表いただきありがとうございました！
---
LT枠
5分のLT枠では、同じくTypeScriptを利用してプロダクト開発をしている株式会社Spectraから、2名のエンジニアに参加いただきました！
LT1: ニュースレターつき会員制メディア作成サービス Medy における TypeScript 活用
1枠目では、ソフトウェアエンジニアの @SatoruTakanami さんが、現在開発しているサービスにおいてのTypeScript活用について発表。
RPCフレームワークのApache Thriftの導入、Next.js/React × TypeScriptでの開発のユースケースについて、発表いただきました。
LT2: 小規模チームで TypeScript を選んだ理由
2枠目では、CTOの @trueymt2 さんが、小規模チームがTypeScriptを選定した理由について発表。
1人でフロントエンドからバックエンド・インフラを担当するケースにおいて、メンテナビリティの維持、型の恩恵と型システムの活用といった観点から、発表いただきました。
まとめ
2021/12/17(金)に開催した「Harajuku.ts Meetup#1」のイベントレポートをお届けしました！
@k2wankoの発表では、バベル・aileadにおけるTypeScriptの採用背景から、実際に利用してプロダクト開発をする中での取り組みまでお伝えさせていただきました。
はじめて主催する勉強会ということで緊張していましたが、事後に集計した参加者アンケートでも、「最高でした!」「uhyoくんのもっと過激な話が聞きたい」のような感想が寄せられ、満足いただけたようで嬉しく思います。
こういったTypeScriptのコミュニティ活動・勉強会を定期開催する予定なので、
いただき、ぜひ一緒にTypeScriptの未来を盛り上げていきましょう！次回登壇者も募集しています！
興味があったけど当日参加できなかったという方は、イベント動画もぜひチェックしてみてください。
さいごに
バベルでは、TypeScriptで最高のプロダクトを作りたい人を積極採用中です！
- TypeScriptをstrictに取り組みたい方
- 型に嘘を付きたくない方
- AIサービスにTypeScript+GCPで全力で取り組みたい方
など、ご興味ある方は下記から気軽にエントリーいただけると嬉しいです。
◯関連リンク
株式会社バベル (Babel,Inc) | コーポレートサイト
Babel, Inc. Engineering Blog | Engineering Blog
tamiki sugiyama / Babel, Inc.｜note | 代表杉山のnote
Babel, Inc. Story Vol. 3『CTOに聞く！AI Automationを支えるバベル開発チームについて』 | 株式会社バベル | CTO k2wankoインタビュー記事
