狠狠撸

狠狠撸Share a Scribd company logo

関数型プログラミングの視点で考えるテーマ機能 on React

?
?
K
Kazuyuki TAKASE

このスライドは、2021/10/01 に開催された「第一回 関数型プログラミング（仮）の会」で発表したものです。

1 of 13
Download to read offline
? Chatwork 第一回 関数型プログラミング（仮）の会 Chatwork 株式会社 CTO 室　エンジニア採用広報 高瀬 和之 (@Guvalif) 関数型プログラミングの視点で考える テーマ機能 on React
　 ? Chatwork ■ 概要 関数型プログラミングをクライアント領域で実応用する "宣言的 UI" に関して、主要ライブラリの 1 つである React を軸に、 テーマ機能の実現方法とそのビルディングブロック性を簡単に考察します。 ■ 関数型プログラミングに対する私の立ち位置 ? - 良い設計を発見する ための、ベース知識として用いる - 安全な開発を実現する ための、勘所として用いる - これらは決してプログラミング言語に依存すること無く、 普遍的に応用可能 だと考える - つまり、ライトユーザーです 　（?????? 2 アジェンダ
　 ? Chatwork 3 というわけで ... UI の "テーマ機能" を例にとって、 関数型プログラミングの考え方を用いながら、設計を行ってみましょう ? こんな感じで見た目を切り替える処理の設計 ?
　 ? Chatwork 4 自明とする前提 最終的な実 DOM は React DOM を用いて生成できるので、 UI は type UI = State -> View という型の純粋関数に近似できます。 Statet Statet+1 Viewt Viewt+1 ー Di? 実 DOM f :: UI f :: UI
　 ? Chatwork 5 Step 1. "テーマ機能" に必要な要件を考察する まずは、UI のスタイリング事情を観察してみます： - 必ず適用すべきスタイル が存在する (margin，padding，font，animation，etc …) - テーマの選択内容に関連して適用したいスタイル が存在する (background，color，border，etc ...) - State に関連して適用したいスタイル が存在する (例えば、初期 State では display: none; にしたいなど) - テーマと State，双方に関連して適用したいスタイル が存在する (例えば、primary や danger のような情報設計に対応するスタイルなど) これらの要件を、複雑性を抑えて実装できることが望ましい ?
　 ? Chatwork 6 Step 2. ドメインを分析する 前述の要件は、大きく 2 つのドメインに分解できると考えられます： - Presentational Domain※1 に該当する要件 - 必ず適用すべきスタイルが存在する - テーマの選択内容に関連して適用したいスタイルが存在する - テーマと State，双方に関連して適用したいスタイルが存在する - Application Domain※2 に該当する要件 - State に関連して適用したいスタイルが存在する ∴ State = Presentational State + Application State がより正確 ※1　純粋に見た目にしか関心のないもの，原理的にはデザインシステム上に分離が可能 ※2　アプリケーション特有のユースケースがあって、はじめて必要となるもの テーマ機能で主に 解決したいのはこの要件
　 ? Chatwork まずはユビキタス言語っぽいものをピックアップし、整理します： - 必ず 適用 すべき スタイル が存在する - テーマ の 選択 内容に 関連 して適用したいスタイルが存在する - テーマと State，双方に関連して適用したいスタイルが存在する 7 Step 3. ユビキタス言語を抽出する 複数を考慮 Presentational 設計初期におけるふわっとした脳内モデル ?
　 ? Chatwork PoC や関係者との議論も行いながら、モデルを漸進的に確定します。 この時、関数型プログラミングの視点で考えるメリット は次の通りです： 1. 変換や述語が 振る舞い ではなく、モデル として捉えやすくなる 2. 振る舞いをなるべく純粋関数で記述したくなるため、 型のあるプログラミング言語であれば 型から実装を予測 しやすくなる 3. 関数で表されるモデルに対して、自然と合成を定義できる 場合がある 例) 8 Step 4. ドメインモデリングを行う ＿?＿ type UI = State -> View < 変換関数だけど、振る舞いではなく UI を表現するモデルだよ stackLayout :: Orientation -> [UI] -> UI < UI を複数受け取って、1 つの UI に合成できるよ
? Chatwork そんなこんなで、???????? しまして … 9
　 ? Chatwork 10 参考. Chatwork で用いている "テーマ機能" を表すモデル cf. モデリング結果 (PDF)?
　 ? Chatwork 11 ● 関数型プログラミングは、設計でも役に立つ ● 関数型プログラミングは、クライアント開発でも応用できる ● 関数型プログラミングは、決して ??????！? … とはいえ「もっと難しい話が聞きたかったー」な方は、 ぜひ弊社 YouTube チャンネル? もご参考まで まとめ
　 ? Chatwork 12 働くを もっと楽しく、 創造的に We are Hiring !!! Chatwork 株式会社では、 フロントエンド，バックエンドのどちらでも、 関数型の考え方で設計にチャレンジしたい エンジニアを 募集? しています ?
? Chatwork 働くをもっと楽しく、創造的に

More Related Content

関数型プログラミングの視点で考えるテーマ機能 on React

  • 1. ? Chatwork 第一回 関数型プログラミング（仮）の会 Chatwork 株式会社 CTO 室　エンジニア採用広報 高瀬 和之 (@Guvalif) 関数型プログラミングの視点で考える テーマ機能 on React
  • 2. 　 ? Chatwork ■ 概要 関数型プログラミングをクライアント領域で実応用する "宣言的 UI" に関して、主要ライブラリの 1 つである React を軸に、 テーマ機能の実現方法とそのビルディングブロック性を簡単に考察します。 ■ 関数型プログラミングに対する私の立ち位置 ? - 良い設計を発見する ための、ベース知識として用いる - 安全な開発を実現する ための、勘所として用いる - これらは決してプログラミング言語に依存すること無く、 普遍的に応用可能 だと考える - つまり、ライトユーザーです 　（?????? 2 アジェンダ
  • 3. 　 ? Chatwork 3 というわけで ... UI の "テーマ機能" を例にとって、 関数型プログラミングの考え方を用いながら、設計を行ってみましょう ? こんな感じで見た目を切り替える処理の設計 ?
  • 4. 　 ? Chatwork 4 自明とする前提 最終的な実 DOM は React DOM を用いて生成できるので、 UI は type UI = State -> View という型の純粋関数に近似できます。 Statet Statet+1 Viewt Viewt+1 ー Di? 実 DOM f :: UI f :: UI
  • 5. 　 ? Chatwork 5 Step 1. "テーマ機能" に必要な要件を考察する まずは、UI のスタイリング事情を観察してみます： - 必ず適用すべきスタイル が存在する (margin，padding，font，animation，etc …) - テーマの選択内容に関連して適用したいスタイル が存在する (background，color，border，etc ...) - State に関連して適用したいスタイル が存在する (例えば、初期 State では display: none; にしたいなど) - テーマと State，双方に関連して適用したいスタイル が存在する (例えば、primary や danger のような情報設計に対応するスタイルなど) これらの要件を、複雑性を抑えて実装できることが望ましい ?
  • 6. 　 ? Chatwork 6 Step 2. ドメインを分析する 前述の要件は、大きく 2 つのドメインに分解できると考えられます： - Presentational Domain※1 に該当する要件 - 必ず適用すべきスタイルが存在する - テーマの選択内容に関連して適用したいスタイルが存在する - テーマと State，双方に関連して適用したいスタイルが存在する - Application Domain※2 に該当する要件 - State に関連して適用したいスタイルが存在する ∴ State = Presentational State + Application State がより正確 ※1　純粋に見た目にしか関心のないもの，原理的にはデザインシステム上に分離が可能 ※2　アプリケーション特有のユースケースがあって、はじめて必要となるもの テーマ機能で主に 解決したいのはこの要件
  • 7. 　 ? Chatwork まずはユビキタス言語っぽいものをピックアップし、整理します： - 必ず 適用 すべき スタイル が存在する - テーマ の 選択 内容に 関連 して適用したいスタイルが存在する - テーマと State，双方に関連して適用したいスタイルが存在する 7 Step 3. ユビキタス言語を抽出する 複数を考慮 Presentational 設計初期におけるふわっとした脳内モデル ?
  • 8. 　 ? Chatwork PoC や関係者との議論も行いながら、モデルを漸進的に確定します。 この時、関数型プログラミングの視点で考えるメリット は次の通りです： 1. 変換や述語が 振る舞い ではなく、モデル として捉えやすくなる 2. 振る舞いをなるべく純粋関数で記述したくなるため、 型のあるプログラミング言語であれば 型から実装を予測 しやすくなる 3. 関数で表されるモデルに対して、自然と合成を定義できる 場合がある 例) 8 Step 4. ドメインモデリングを行う ＿?＿ type UI = State -> View < 変換関数だけど、振る舞いではなく UI を表現するモデルだよ stackLayout :: Orientation -> [UI] -> UI < UI を複数受け取って、1 つの UI に合成できるよ
  • 10. 　 ? Chatwork 10 参考. Chatwork で用いている "テーマ機能" を表すモデル cf. モデリング結果 (PDF)?
  • 11. 　 ? Chatwork 11 ● 関数型プログラミングは、設計でも役に立つ ● 関数型プログラミングは、クライアント開発でも応用できる ● 関数型プログラミングは、決して ??????！? … とはいえ「もっと難しい話が聞きたかったー」な方は、 ぜひ弊社 YouTube チャンネル? もご参考まで まとめ
  • 12. 　 ? Chatwork 12 働くを もっと楽しく、 創造的に We are Hiring !!! Chatwork 株式会社では、 フロントエンド，バックエンドのどちらでも、 関数型の考え方で設計にチャレンジしたい エンジニアを 募集? しています ?