Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドエンジニアが関数型プログラミングに出会った話
Search
Azusa Okamoto
April 13, 2025
Programming
0
60
フロントエンドエンジニアが関数型プログラミングに出会った話
λ Kansai in Spring 2025のLT登壇資料です。
業務でts-patternを使う機会があったため、自分が学んだことをアウトプットしてみました!
Azusa Okamoto
April 13, 2025
Tweet
Share
More Decks by Azusa Okamoto
See All by Azusa Okamoto
「わたし色」の見方で拓く世界
azunyan
0
2
ちゃんとSvelte, Hello Worldした!
azunyan
0
26
最近取り組んでいることについて喋ってみる
azunyan
0
3
TECH WOMAN KANSAIの 取り組みと今後~2024年の振り返りと2025年へ~
azunyan
0
56
Go初心者が開発やってみた!
azunyan
1
530
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
1.1k
個人的に楽しかった実装2022
azunyan
0
130
TestCaféでE2Eテスト!
azunyan
0
140
vanilla-extractを使ってみた!with React
azunyan
1
800
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
670
Team operations that are not burdened by SRE
kazatohiei
1
190
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
エラーって何種類あるの?
kajitack
5
300
VS Code Update for GitHub Copilot
74th
1
320
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
800
Claude Codeの使い方
ttnyt8701
1
130
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
XP, Testing and ninja testing
m_seki
3
180
生成AIで日々のエラー調査を進めたい
yuyaabo
0
640
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
480
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Side Projects
sachag
455
42k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Building Applications with DynamoDB
mza
95
6.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
KATA
mclloyd
29
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
How GitHub (no longer) Works
holman
314
140k
The Cult of Friendly URLs
andyhume
79
6.5k
Six Lessons from altMBA
skipperchong
28
3.8k
Transcript
フロントエンドエンジニアが 関数型プログラミングに出会った話 ~ts-patternとの出会いと学び~ あずにゃん λ Kansai in Spring 2025
フロントエンドエンジニア バックエンドやったり... PMやったり... エンジニア5年目 TECH WOMAN KANSAIという女性エ ンジニア向けコミュニティの運営 ✨ 自己紹介
あずにゃん @azunyan_eng
今日お話しすること 1. 関数型プログラミングと出会ったきっかけ 2. ts-patternについて 3. おわりに
フロントエンドエンジニアが、 なんで関数型プログラミングと 出会った?
別のプロジェクトを引き継いだ時のこと。 修正箇所は三項演算子のネスト... switch文で改善した上でMR出すぞ 🔥 関数型プログラミングとの出会い
MRレビューにて。 「このプロジェクトではts-pattern入れてるの で、ts-pattern使ってください。」 関数型プログラミングとの出会い
ts-patternってなんだ? 何それ美味しいの? 関数型プログラミングとの出会い!
ts-patternとは TypeScriptのための、 パターンマッチングの ライブラリ
JavaScriptで条件分岐する例
switch文を使った条件分岐 if文や三項演算子が入れ子になると可読性が落 ちる 複雑な条件分岐を簡潔に記述できる
switch文を使った条件分岐 厳密等価演算子で比較される 値を比較しているだけで、型をチェックするこ とはできない
ts-patternの例
パターンマッチング 代数的データ型 複数の選択肢からいずれか1つの型だけを選ぶデー タ型 例)クラス継承、TSのユニオン型 パターンマッチングは、代数的データ型のパタ ーン(型)に応じて分岐する 型を見ることができる!?
パターンマッチングめっちゃ雑に言う
ts-patternを使ってみて 保守性上がる 型を網羅していないとエラーを返す 変数に代入(バインド)できる 読みやすくなる!(可読性) if文や三項演算子に比べると直感的かな?
ts-patternを使ってみて 複雑になるとやっぱり可読性は落ちてしまう... P.whenとか使うとやっぱりごちゃつく... 確かに可読性上がるけど、まぁ標準のswitch 文で良くない?と一瞬思っちゃう...
おわりに ts-patternを使って、関数型プログラミングに 関心を持つきっかけになった! ts-patternに見慣れたら、「これええやん!」 ってなってくる笑 標準のswitch文でええやんって思ってた奴が言うて ますw
登壇にあたってお世話になった書籍 『関数型プログラミングの基礎 JavaScriptを 使って学ぶ』、わかりやすかった!! TypeScript(JavaScript)を扱うフロントエンド エンジニアでも関数型プログラミングに入門し やすかった!
ご清聴 ありがとうございました!