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
57
フロントエンドエンジニアが関数型プログラミングに出会った話
λ 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
1
TECH WOMAN KANSAIの 取り組みと今後~2024年の振り返りと2025年へ~
azunyan
0
53
Go初心者が開発やってみた!
azunyan
1
520
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
1k
個人的に楽しかった実装2022
azunyan
0
120
TestCaféでE2Eテスト!
azunyan
0
130
vanilla-extractを使ってみた!with React
azunyan
1
790
Next.js・microCMSで ポートフォリオサイトを作りかえて学んだこと
azunyan
0
2.1k
VisualStudioCodeの拡張機能を作ってみた!
azunyan
0
79
Other Decks in Programming
See All in Programming
七輪ライブラリー: Claude AI で作る Next.js アプリ
suneo3476
1
170
SwiftDataのカスタムデータストアを試してみた
1mash0
0
140
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
7
1.4k
flutter_kaigi_mini_4.pdf
nobu74658
0
140
The New Developer Workflow: How AI Transforms Ideas into Code
danielsogl
0
100
REALITY コマンド作成チュートリアル
nishiuriraku
0
120
GitHub Copilot for Azureを使い倒したい
ymd65536
1
310
M5UnitUnified 最新動向 2025/05
gob
0
120
RuboCop: Modularity and AST Insights
koic
2
2.4k
Vibe Coding の話をしよう
schroneko
13
3.6k
Contribute to Comunities | React Tokyo Meetup #4 LT
sasagar
0
590
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
290
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
Side Projects
sachag
453
42k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.4k
Building an army of robots
kneath
305
45k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Invisible Side of Design
smashingmag
299
50k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Visualization
eitanlees
146
16k
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)を扱うフロントエンド エンジニアでも関数型プログラミングに入門し やすかった!
ご清聴 ありがとうございました!