TypeScript化の旅
Helpfeelが辿った試行錯誤と成功の道のり
自己紹介
Profile
X (Twitter): @teramotodaiki
3
今日話すこと
Today’s topic
Helpfeelは、いかにしてTypeScript化に成功したか？
4
Helpfeelのビジョン
Vision
Human
Empowerment
Technology
人の好奇心は無限大であり、テクノロジーの可能性も無限に広がっています。
私たちは人にとってスムーズで頼もしい両者の関係を設計することで、
⼈間の思考とコミュニケーションを加速します。
テクノロジーの発明により、人の可能性を拡張する
5
会社沿革
History
Gyazoリリース by 増井
Nota Inc.設立
総額200万ドル
（約2億円）の
資金調達
Scrapbox リリース
黒字化
Helpfeel リリース
5億円の資金調達
ICC SaaS
カタパルト優勝
株式会Helpfeelに社名変更、CI刷新
6億円の資金調達
グッドデザイン賞受賞
2007
2014
2017
2016
2019
2021
2022
2023
ICCサミット FUKUOKA
総合優勝
シリーズDで20億円の資金調達
累計調達額は33億円に
Helpfeel導入社数200社突破
6
Helpfeelについて
About Helpfeel
検索性に特化し、問題がすぐに解決する「FAQ」を簡単に構築できるシステム。ユーザーが自力で問題を解決するのを手助けするだけでなく、CS担当者やコールセンターの負担も削減します。
2019年IVS LaunchPad出場。2020年Mizuho Innovation Award受賞。
どんな質問でも答えられる
新世代FAQ検索システム
MRR：2022年→2023年は2倍に成長
Helpfeel
検索性能に特化した
新世代FAQ検索システム
全方位で積極採用中！
7
なぜFAQが機能しないのか
Problem of FAQ
検索語彙の違いやタイプミスに対応できず、ユーザーが欲しい答えを見つけらない
8
Helpfeelの革新性
Innovation of Helpfeel
独自の『意図予測検索』技術により、ヒット率98％を実現
従来FAQの50倍に拡張された質問予測パターン
Helpfeelでは質問の予測パターンを50倍以上に拡張し、言葉の違いだけではなく、同じ言葉でも漢字表現とひらがな表現の違い、送り仮名の違い、スペルミスや、感情的、抽象的な表現などにも対応しています。
「質問に対して回答を探す」のではなく
「言葉にマッチする質問を提示する」仕組み
従来のチャットボット等の手法では、１つの質問からそれに当たる答えを１つ探していました（１対１の関係）。そのため大量のデータとチューニングが必要でしたが、Helpfeelは逆に言葉からお客様が意図する「質問を探す」仕組みになっています。
従来のFAQ
Helpfeel
9
Helpfeelの革新性
Innovation of Helpfeel
従来のFAQと比べ1000倍の応答速度と、柔軟な編集環境
従来のFAQと比べ、1000倍の応答速度
言葉から質問を探すアプローチで、文字を入力した瞬間に結果が表示される爆速FAQシステムを構築しています。従来の平均的FAQシステムは約1秒かかっていた応答が、Helpfeelでは、約1000倍高速の0.001秒の応答速度を実現しました。
Scrapboxを使った柔軟な編集環境
答えを探しやすくなっただけではなく、ヘルプページをScrapboxで管理でき、簡単に編集・改善できるようになります。
クライアントサイドで検索が完結している
10
ご利用法人、自治体・サービス一覧
11
公開FAQはhttps://www.helpfeel.com/showcaseにリンクがございますので実際にお試しいただけます
業界のリーディングカンパニー含め300サイト以上で採用されています。
HelpfeelにおけるTypeScript史
History
Helpfeelリリース
初期はCEOがコードの
ほとんどを書いていた
100% JavaScript
社内でTypeScript化の
議論がスタートする
筆者がジョイン
TS化キックオフを実施
進め方を試行錯誤
JSDocで型をつける
最初のTypeScript化
プルリクがマージ
一部のファイルから型を付け始める
2019
2019
2021
2020
2024
優秀な新入社員も続々入社
最新のTypeScriptに追従できる体制が整ってきた
12
結論
Conclusion
注意
今から身も蓋もないことを言います
TypeScript化を成功するために必要な３つのポイント
13
結論
Conclusion
TypeScript化を成功するために必要な３つのポイント
14
もうちょい現実的な戦略やテクニック
15
既存のJSコードをTS化する難しさ
その結果…
しかも、(直接的には) 利益に繋がらない
まずは前提として、何が難しいのか考える
型アノテーションだけなら振る舞いに影響を与えないが、誰もがそう上手く安全に型付け出来る訳ではない
リファクタリング欲に抗えない
例) arrayとstring
16
JSDocで型を書き込む
拡張子は .js のまま、コメント文として型アノテーションできる
→振る舞いに影響を与えない
→絶対にデグレしない
checkJs: true にすれば、tscで静的型検知してくれる
TypeScriptには、絶対デグレを起こさずに型をつける方法が用意されている
17
TypeScriptにおける位置づけ
TypeScriptの型レベルには、５段階の厳密さがある (筆者による意訳)
まずはこの段階に行く
最終的にはここに行く
18
既存のJSコードをTSに変えていく２つの戦略
型安心な領域を作って少しずつ拡げていく戦略
デグレを起こさず一気に型安心にする戦略
v.s.
19
既存のJSコードをTSに変えていく２つの戦略
デグレを起こさず一気に型安心にする戦略
具体的な進め方
→型の恩恵を受けられる状態になる
20
最初の型エラーとの戦い方
@ts-expect-errorで逃げる
例えばこういうケース
実はそもそもの実装が間違っていることもしばしば
型エラーを直すのではなく、型エラーが起きていることを明示する
@ts-expect-error (型エラーが起きている理由)
次の行にエラーがあることをアサーションする
（エラーがなければエラーになる）
21
コラム
TypeScript の静的解析はプロジェクト全体で協調動作しているから、周辺が型安心であればあるほど、その型の正しさを保証してくれる
１ヶ所でしか使われないその場限りの型定義は間違っている可能性が高いが、１０ヶ所から参照されている型定義は合っている可能性が高い
これはクロスワードパズルによく似ている
クロスワードパズルは一問解けても正解かどうか分からない
クロスする問題が解けたとき、相補的に正解である確率が高まる
型付けはクロスワードパズルに似ている
22
レビューして、議論して、スローガンにする
一口に「TypeScript化する」と言っても、書き方には幅がある
23
レビューして、議論して、スローガンにする
例
24
レビューして、議論して、スローガンにする
議論が起きることは健全
同じ議論が再び繰り広げられないようにする
25
まとめ
TypeScript化を成功するために必要な３つのポイント
それ以外のテクニック
26
☆俺達の戦いはまだまだこれからだ！！！
Helpfeel Tech Conf 2024やります！
TSKaigi 2024 After Talkやります！
27