フロントエンドエンジニアが関数型プログラミングに出会った話

λ Kansai in Spring 2025のLT登壇資料です。
業務でts-patternを使う機会があったため、自分が学んだことをアウトプットしてみました！

Transcript

1. フロントエンドエンジニアが 関数型プログラミングに出会った話 ～ts-patternとの出会いと学び～ あずにゃん λ Kansai in Spring 2025
2. フロントエンドエンジニア バックエンドやったり... PMやったり... エンジニア5年目 TECH WOMAN KANSAIという女性エ ンジニア向けコミュニティの運営 ✨ 自己紹介 あずにゃん @azunyan_eng
3. 今日お話しすること 1. 関数型プログラミングと出会ったきっかけ 2. ts-patternについて 3. おわりに
4. フロントエンドエンジニアが、 なんで関数型プログラミングと 出会った？
5. 別のプロジェクトを引き継いだ時のこと。 修正箇所は三項演算子のネスト... switch文で改善した上でMR出すぞ 🔥 関数型プログラミングとの出会い
6. MRレビューにて。 「このプロジェクトではts-pattern入れてるの で、ts-pattern使ってください。」 関数型プログラミングとの出会い
7. ts-patternってなんだ？ 何それ美味しいの？ 関数型プログラミングとの出会い！
8. ts-patternとは TypeScriptのための、 パターンマッチングの ライブラリ
9. JavaScriptで条件分岐する例
10. switch文を使った条件分岐 if文や三項演算子が入れ子になると可読性が落 ちる 複雑な条件分岐を簡潔に記述できる
11. switch文を使った条件分岐 厳密等価演算子で比較される 値を比較しているだけで、型をチェックするこ とはできない
12. ts-patternの例
13. パターンマッチング 代数的データ型 複数の選択肢からいずれか1つの型だけを選ぶデー タ型 例)クラス継承、TSのユニオン型 パターンマッチングは、代数的データ型のパタ ーン(型)に応じて分岐する 型を見ることができる！？
14. パターンマッチングめっちゃ雑に言う
15. ts-patternを使ってみて 保守性上がる 型を網羅していないとエラーを返す 変数に代入(バインド)できる 読みやすくなる！(可読性) if文や三項演算子に比べると直感的かな？
16. ts-patternを使ってみて 複雑になるとやっぱり可読性は落ちてしまう... P.whenとか使うとやっぱりごちゃつく... 確かに可読性上がるけど、まぁ標準のswitch 文で良くない？と一瞬思っちゃう...
17. おわりに ts-patternを使って、関数型プログラミングに 関心を持つきっかけになった！ ts-patternに見慣れたら、「これええやん！」 ってなってくる笑 標準のswitch文でええやんって思ってた奴が言うて ますw
18. 登壇にあたってお世話になった書籍 『関数型プログラミングの基礎 JavaScriptを 使って学ぶ』、わかりやすかった！！ TypeScript(JavaScript)を扱うフロントエンド エンジニアでも関数型プログラミングに入門し やすかった！
19. ご清聴 ありがとうございました！