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
JavaScript の関数型ライブラリ Ramda.js を使ってみよう
Search
tsuji-108
November 16, 2023
0
70
JavaScript の関数型ライブラリ Ramda.js を使ってみよう
tsuji-108
November 16, 2023
Tweet
Share
More Decks by tsuji-108
See All by tsuji-108
PixiJS x Spineでキャラクターアニメーションを作ってみる
gajilabo_tsuji
1
41
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
60
4k
Code Reviewing Like a Champion
maltzj
515
39k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Docker and Python
trallard
35
2.7k
Practical Orchestrator
shlominoach
183
9.7k
In The Pink: A Labor of Love
frogandcode
138
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
Designing Experiences People Love
moore
136
23k
Product Roadmaps are Hard
iamctodd
45
9.7k
For a Future-Friendly Web
brad_frost
172
9k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
Building an army of robots
kneath
300
41k
Transcript
JavaScript の関数型ライブラリ Ramda.js を使ってみよう tsuji-108 @ 株式会社Gaji-Labo 2023/11/15 第12回LT練習会
⾃⼰紹介 @tsuji-108 株式会社Gaji-Labo フロントエンドエンジニア
01. Ramda.js とは? 02. Ramda.js の便利な関数 アジェンダ
01 Ramda.js とは?
Ramda.js とは? Ramda.js とは、関数型プログラミングの考え⽅を取り⼊れたユーティリティライブラリです。 > 公式サイト: https://ramdajs.com/ JavaScript のユーティリティライブラリと⾔えば Lodash
( https://lodash.com/ )が有名です。 Ramda.js とは、いうなれば「関数型プログラミングを取り⼊れた Lodash」です。
02 Ramda.js の便利な関数
Ramda.js の便利な関数 Ramda.js には⾮常に便利な関数が揃っており、フロントエンド開発で強⼒な味⽅になります! • clone():引数に⼊れた要素のディープコピーを返却します。 ◦ https://ramdajs.com/docs/#clone • mergeAll()
:引数に⼊れた配列内のオブジェクトをすべてマージして返却します。 ◦ https://ramdajs.com/docs/#mergeAll • equals() :引数に⼊れた要素同⼠が⼀致するかを判定します。 ◦ https://ramdajs.com/docs/#equals • pick():第⼆引数のオブジェクトから、第⼀引数で指定したプロパティを抽出したオブジェクトを返却し ます。 ◦ https://ramdajs.com/docs/#pick
compose() ‧ pipe() compose() と pipe() は、いずれも引数の関数を合成して1つの関数にまとめます。 > compose(): https://ramdajs.com/docs/#compose
> pipe(): https://ramdajs.com/docs/#pipe
compose() ‧ pipe() composed() と pipe() の違いは、関数の実⾏順(合成順)にあります。 composed() は、引数の関数のうち、最後に⼊れた関数から順次実⾏します。 pipe()
は、引数の関数のうち、最初に⼊れた関数から順次実⾏します。
composed() ‧ pipe() で⼀括管理!
composed() ‧ pipe() で⼀括管理! composed() と pipe() は、複雑なプログラムを簡潔にまとめられます! 特に⻑〜い⼿続き的プログラムやコールバック地獄には効果テキメンです!
まとめ 以上、Ramda.js の紹介でした! Ramda.js を導⼊すれば、Webアプリ開発でよく利⽤する機能をすぐに導⼊できます。 その中でも composed() と pipe() は、Ramda.js
を代表する強⼒な機能で、複雑な処理をシンプルにまとめら れます。 今回のスライドで紹介した事以外にも「カリー化」などの便利な点が、まだまだ Ramda.js にはあります! もし機会があれば、Ramda.js に触れてみてはいかがでしょうか。 > 公式サイト: https://ramdajs.com/
会社紹介 すべてのサービスとプロダクトに 「⼿ざわりのいいUI」を 新規事業やサービス開発 ∕ プロダクト開発に取り組むチームのサポートが得意な会社です。 フロントエンド開発 UIデザイン / 情報設計
チーム / プロセス⽀援