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
82
フロントエンドエンジニアが関数型プログラミングに出会った話
λ Kansai in Spring 2025のLT登壇資料です。
業務でts-patternを使う機会があったため、自分が学んだことをアウトプットしてみました!
Azusa Okamoto
April 13, 2025
Tweet
Share
More Decks by Azusa Okamoto
See All by Azusa Okamoto
GraphQLでAPI開発 やってみよう!
azunyan
0
13
「わたし色」の見方で拓く世界
azunyan
0
16
ちゃんとSvelte, Hello Worldした!
azunyan
0
41
最近取り組んでいることについて喋ってみる
azunyan
0
10
TECH WOMAN KANSAIの 取り組みと今後~2024年の振り返りと2025年へ~
azunyan
0
75
Go初心者が開発やってみた!
azunyan
1
550
デブサミウーマン2023 アウトプットって何が良いの?
azunyan
0
1.1k
個人的に楽しかった実装2022
azunyan
0
140
TestCaféでE2Eテスト!
azunyan
0
140
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
1.8k
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.5k
明日から始めるリファクタリング
ryounasso
0
130
止められない医療アプリ、そっと Swift 6 へ
medley
1
140
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
250
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
110
Railsだからできる 例外業務に禍根を残さない 設定設計パターン
ei_ei_eiichi
0
420
What's new in Spring Modulith?
olivergierke
1
130
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1.2k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
960
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
660
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Code Review Best Practice
trishagee
72
19k
Statistics for Hackers
jakevdp
799
220k
Building Applications with DynamoDB
mza
96
6.7k
Being A Developer After 40
akosma
91
590k
Mobile First: as difficult as doing things right
swwweet
224
10k
Designing for Performance
lara
610
69k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
KATA
mclloyd
32
15k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
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)を扱うフロントエンド エンジニアでも関数型プログラミングに入門し やすかった!
ご清聴 ありがとうございました!