JavaScript の関数型ライブラリ Ramda.js を使ってみよう

Transcript

1. JavaScript の関数型ライブラリ Ramda.js を使ってみよう tsuji-108 @ 株式会社Gaji-Labo 2023/11/15 第12回LT練習会
2. ⾃⼰紹介 ＠tsuji-108 株式会社Gaji-Labo フロントエンドエンジニア
3. 01. Ramda.js とは？ 02. Ramda.js の便利な関数 アジェンダ
4. 01 Ramda.js とは？
5. Ramda.js とは？ Ramda.js とは、関数型プログラミングの考え⽅を取り⼊れたユーティリティライブラリです。 > 公式サイト: https://ramdajs.com/ JavaScript のユーティリティライブラリと⾔えば Lodash （ https://lodash.com/ ）が有名です。 Ramda.js とは、いうなれば「関数型プログラミングを取り⼊れた Lodash」です。
6. 02 Ramda.js の便利な関数
7. 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
8. compose() ‧ pipe() compose() と pipe() は、いずれも引数の関数を合成して1つの関数にまとめます。 > compose(): https://ramdajs.com/docs/#compose > pipe(): https://ramdajs.com/docs/#pipe
9. compose() ‧ pipe() composed() と pipe() の違いは、関数の実⾏順（合成順）にあります。 composed() は、引数の関数のうち、最後に⼊れた関数から順次実⾏します。 pipe() は、引数の関数のうち、最初に⼊れた関数から順次実⾏します。
10. composed() ‧ pipe() で⼀括管理！
11. composed() ‧ pipe() で⼀括管理！ composed() と pipe() は、複雑なプログラムを簡潔にまとめられます！ 特に⻑〜い⼿続き的プログラムやコールバック地獄には効果テキメンです！
12. まとめ 以上、Ramda.js の紹介でした！ Ramda.js を導⼊すれば、Webアプリ開発でよく利⽤する機能をすぐに導⼊できます。 その中でも composed() と pipe() は、Ramda.js を代表する強⼒な機能で、複雑な処理をシンプルにまとめら れます。 今回のスライドで紹介した事以外にも「カリー化」などの便利な点が、まだまだ Ramda.js にはあります！ もし機会があれば、Ramda.js に触れてみてはいかがでしょうか。 > 公式サイト: https://ramdajs.com/
13. 会社紹介 すべてのサービスとプロダクトに 「⼿ざわりのいいUI」を 新規事業やサービス開発 ∕ プロダクト開発に取り組むチームのサポートが得意な会社です。 フロントエンド開発 UIデザイン / 情報設計 チーム / プロセス⽀援