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
58
フロントエンドエンジニアが関数型プログラミングに出会った話
λ Kansai in Spring 2025のLT登壇資料です。
業務でts-patternを使う機会があったため、自分が学んだことをアウトプットしてみました!
Azusa Okamoto
April 13, 2025
Tweet
Share
More Decks by Azusa Okamoto
See All by Azusa Okamoto
ちゃんとSvelte, Hello Worldした!
azunyan
0
23
最近取り組んでいることについて喋ってみる
azunyan
0
3
TECH WOMAN KANSAIの 取り組みと今後~2024年の振り返りと2025年へ~
azunyan
0
54
Go初心者が開発やってみた!
azunyan
1
520
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
1.1k
個人的に楽しかった実装2022
azunyan
0
120
TestCaféでE2Eテスト!
azunyan
0
130
vanilla-extractを使ってみた!with React
azunyan
1
800
Next.js・microCMSで ポートフォリオサイトを作りかえて学んだこと
azunyan
0
2.1k
Other Decks in Programming
See All in Programming
Duke on CRaC with Jakarta EE
ivargrimstad
1
530
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.2k
バリデーションライブラリ徹底比較
nayuta999999
1
200
AIにコードを生成するコードを作らせて、再現性を担保しよう! / Let AI generate code to ensure reproducibility
yamachu
5
5.3k
LRパーサーはいいぞ
ydah
7
1.5k
ビカム・ア・コパイロット
ymd65536
1
190
TypeScript を活かしてデザインシステム MCP を作る / #tskaigi_after_night
izumin5210
3
390
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
200
TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ~他言語変換の仕組み~ / cdk-language-transformation
gotok365
6
320
医療系ソフトウェアのAI駆動開発
koukimiura
1
170
#QiitaBash TDDでAIに設計イメージを伝える
ryosukedtomita
2
540
Storybookの情報をMCPサーバー化する
shota_tech
3
1.6k
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Pragmatic Product Professional
lauravandoore
33
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
How to train your dragon (web standard)
notwaldorf
91
6k
Producing Creativity
orderedlist
PRO
344
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Bash Introduction
62gerente
613
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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)を扱うフロントエンド エンジニアでも関数型プログラミングに入門し やすかった!
ご清聴 ありがとうございました!