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
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
510
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
310
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
180
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
210
Webサーバーサイド言語としてのRustについて
kouyuume
0
440
EMこそClaude Codeでコード調査しよう
shibayu36
0
230
Software Architecture
hschwentner
6
2.3k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
220
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
310
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
320
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
580
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Cult of Friendly URLs
andyhume
79
6.6k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Side Projects
sachag
455
43k
Rails Girls Zürich Keynote
gr2m
95
14k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
RailsConf 2023
tenderlove
30
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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)を扱うフロントエンド エンジニアでも関数型プログラミングに入門し やすかった!
ご清聴 ありがとうございました!