There is no compression algorithm for experience.

There is no compression
algorithm for experience.
小林　京輔
（CTD）

View Slide

table of contents
1. 自己紹介
a. 経歴
2. 美とは何か
a. 荘厳な美について
b. 精緻な美について
3. アーキテクチャ（建築）
a. 高層マンション
b. 壊れた古民家
4. Reactにおける美とは何か
a. Single Responsibility Principle
i. Provider
ii. Custom Hooks
1. Remixパターン
iii. 状態管理
iv. JSX　UI、ロジック、スタイル（HTML,JS,CSS）
5. アンチパターンとリファクタリング
6. 責務分離は精緻な美から荘厳な美へと昇華する
a. デコンストラクション（美とは何か）

View Slide

小林京輔 1996/1/9 (ENTJ)
1. 出身
a. 札幌
2. 生まれ
a. 秋田県能代市
3. 趣味
a. OCTOMORE(スコッチ)
b. React /Remix
c. 西洋哲学・時間論
d. ウィトゲンシュタイン
i. ウィトゲンシュタインハウ
スに行った
ii. 一族の墓にお参りに行った

View Slide

小学生くらい

View Slide

名言っていいこと言ってそう
だけど、矛盾してないか？

View Slide

中学生

View Slide

ショーペンハウエル「読書について」
読書とは（自ら思考せず）他人にものを考えても
らうことである

View Slide

高校生

View Slide

プラトン
完全な三角形は存在しない

View Slide

View Slide

※後にイデア論の話だとわかる

View Slide

大学時代

View Slide

Ludwig Josef Johann Wittgenstein

View Slide

Only present things exist.

View Slide

現在
過去
知覚の構造

View Slide

パラドックス

View Slide

認識は必然的に過去では？
ならば
認識は過去であるから存在しない？

View Slide

現実性への回帰

View Slide

View Slide

主客二元論への批判

View Slide

社会人

View Slide

経歴
株式会社◼◼◼◼◼ 2018.4~2019.8
＞旅（タイ・台湾）2019.9
株式会社◼◼◼◼ 2019.10~2021.3
＞Reactを楽しむ 2021.4
◼◼◼◼◼◼◼株式会社 2021.5~2022.9
レバレジーズ株式会社 2022.10~

View Slide

株式会社◼◼◼◼◼〜オペレーション部門〜
属人化してた業務の
マニュアル化（怠
惰）
別々で管理されてい
た社内システムを統
合するシステム設計
（怠惰）
SEの友達の家で
Javaの本読む
PC持ってなかったの
でネカフェでプログ
ラミングの勉強

View Slide

株式会社◼◼◼◼◼〜営業〜
見積書100件の作成
をVBAで自動化し手
作業を削減（怠惰）
自動化楽しい・・・
画像を送信したら文
字列で返してくれる
LINEアプリを作る
⇨転職の機運（短気）
（確変）

View Slide

View Slide

株式会社◼◼◼◼（SIer）
Salesforce機能開発
QAチームの業務をGASで
常時監視、ツール作成など
（気づいたらGAS200ファ
イルくらい作ってた）（怠
惰）
⇨もしかしてSIerって
React使わない？（短気）
2020.3
Reactと出会う
※Hooksがメジャー
リリースされて約半
年後
（確変）

View Slide

View Slide

◼◼◼◼◼◼◼株式会社（コンサルの開発チーム）
自社サービスのフロ
ントエンド担当
（ようやく業務で
React書ける）
⇨俺よりReact詳しく
て書ける人がいない
・・・？（傲慢）
2021.11
Remixと出会う
（確変）

View Slide

View Slide

レバレジーズ株式会社
HRTech
↓
CTD
SwiftでiOSアプリ
作り始める
Golangを勉強し始め
る

View Slide

table of contents
1. 自己紹介
a. 経歴
2. 美とは何か
i. Provider
ii. Custom Hooks
iii. 状態管理

View Slide

美とは

View Slide

View Slide

1. 私が明証的に真理であると認めるものでなければ、いかなる事柄
でもこれを真なりとして認めないこと
2. 検討しようとする難問をよりよく理解するために、多数の小部分
に分割すること
3. もっとも単純なものからもっとも複雑なものの認識へと至り、先
後のない事物の間に秩序を仮定すること
4. 最後に完全な列挙と、広範な再検討をすること
方法序説

View Slide

View Slide

荘厳な美

View Slide

View Slide

精緻な美

View Slide

View Slide

table of contents
1. 自己紹介
a. 経歴
2. 美とは何か
i. Provider
ii. Custom Hooks
iii. 状態管理

View Slide

高層マンション

View Slide

View Slide

壊れた古民家

View Slide

View Slide

美とは

View Slide

調和？規則性？

View Slide

View Slide

プラトン

View Slide

西洋哲学
（人生哲学・経営哲学ではない）

View Slide

自然現象（カオス）を
合理的に説明しようとする

View Slide

世界を論理によって描写する

View Slide

啓蒙主義

View Slide

あれ、なんか香ばしくなってきた
（？）

View Slide

進みます

View Slide

世界
↕
神話↔理性
※「啓蒙の弁証法: 哲学的断想」アドルノ・ホルクハイマー

View Slide

世界
性質：{無秩序・不安・自由}

View Slide

神話の時代

View Slide

物語による説明（伝説）
祈祷

View Slide

理性の時代

View Slide

理性・規律
不自由の自由・科学

View Slide

具象の抽象化
同一化
構造・体系化
意味

View Slide

（無駄に）思考しないために思考する
構造化・体系化・理性

View Slide

カント「純粋理性批判」

View Slide

世界
↕
神話↔理性

View Slide

啓蒙主義時代

View Slide

科学の発展など

View Slide

論理に従って世界がある
↓
主従関係の逆転

View Slide

前提：西洋哲学

View Slide

自由への希求
↓
啓蒙主義への批判・再検討

View Slide

論理に従って世界があるのではなく
世界を論理が描写しているにすぎない
↓
主従関係の逆転の逆転

View Slide

哲学における転回
↓
現象学?・実存主義?

View Slide

自由の回復
↓
アート・文学・詩・創作などなど

View Slide

ん？

View Slide

なんで哲学やってた俺は
React好きなんだろう？

View Slide

具象の抽象化
同一化
構造・体系化
意味

View Slide

コンポーネントっぽい？

View Slide

具象の抽象化
同一化
構造・体系化
意味

View Slide

思考しないために思考する
構造化・体系化

View Slide

UI をインタラクティブにするには、ユーザーが基礎となるデータモデルを変更できるようにする必要が
あります。これには状態を使用します。
状態は、アプリが記憶する必要がある最小限の変化するデータのセットであると考えてください。状態
を構造化するための最も重要な原則は、状態を DRY (繰り返さない) に保つことです。アプリケーション
が必要とする状態の絶対最小表現を見つけ出し、その他すべてをオンデマンドで計算します。たとえ
ば、買い物リストを作成している場合、項目を状態の配列として保存できます。リスト内の項目数も表
示したい場合は、項目数を別の状態値として保存せず、代わりに配列の長さを読み取ります。
※Thinking in React(https://react.dev/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state)

View Slide

View Slide

「ある事柄を説明するためには、必要以上に
多くを仮定するべきでない」とする指針
オッカムの剃刀

View Slide

論理に従ってUIを構築する
↓
主従関係の逆転の逆転の逆転
　　・世界⇨論理（主従関係）
　　・論理⇨世界（逆転１）
　　・世界⇨論理（逆転２）
　　・論理⇨世界＜UI＞（逆転３）

View Slide

本編に戻ります

View Slide

table of contents
1. 自己紹介
a. 経歴
2. 美とは何か
i. Provider
ii. Custom Hooks
iii. 状態管理

View Slide

Reactにおける美とは何か

View Slide

Single Responsibility Principle

View Slide

1. Provider
a. 認証・権限は処理をまとめる
2. Custom Hooks
a. Remixパターン
i. loaderとactionを分ける
3. 状態管理
a. 実はURLも状態管理の選択肢
b. レンダリングするならuseState,レンダリングしたくないならuseRef
c. useEffectは極力使わない
i. うまく設計すれば使わなくて良いケースが多々ある
4. JSX　UI、ロジック、スタイル（HTML,JS,CSS）
a. HTMLは構造を定義
i. 共通のTemplateファイルを作るのではなく、
HeaderSection,MainContentSectionなどで分けた方が良い
b. JSは処理
i. 関数の分割の粒度、副作用のない設計
c. CSSはスタイル
i. コンポーネント内のみをスタイルし、暗黙的にコンポーネントの外部にス
タイルを当てないこと

View Slide

認証・権限は処理をまとめる
[Before]
Roterコンポーネントをラップした権限判定するコンポー
ネントをページ数分差し込み
[After]
ルーティングする前に、pathとPermissionMapObjectを
突合してハンドリング

View Slide

1. Provider
2. Custom Hooks
3. 状態管理
b. JSは処理

View Slide

Remixパターン
[Before]
１コンポーネント内にFetchする処理とRequestする処理
が混在
[After]
Fetch用のカスタムHooks、Request用のカスタムHooks
に分ける

View Slide

1. Provider
2. Custom Hooks
3. 状態管理
b. JSは処理

View Slide

実はURLも状態管理の選択肢
[Before]
LocalStorageに保存
[After]
URLに動的Pathとする設計

View Slide

レンダリングするならuseState,レンダリングしたくないならuseRef
[Before]
useStateでフォームの状態を管理
[After]
useRefでフォームの状態を管理
※ただし、escape hatchであることに注意

View Slide

useEffectは極力使わない
ReactDocs
https://react.dev/learn/you-might-not-need-an-effect

View Slide

1. Provider
2. Custom Hooks
3. 状態管理
b. JSは処理
i. 関数の分割の粒度

View Slide

HTML

View Slide

コンポーネントの責務とHTMLの関係
[Before]
画面全体のスタイルを定義するTemplateコンポーネント
[After]
各画面の構造に対応したコンポーネント（Section単位）

View Slide

JS

View Slide

関数の分割の粒度
[Before]
コンポーネント内の変数に依存した関数定義
[After]
受け取った引数で完結する関数
機能ドメインごとに分かれた、過度な共通化がされていな
い関数

View Slide

CSSはスタイル

View Slide

コンポーネントの外部にスタイルを当てないこと
[Before]
子、孫コンポーネントに対してclassNameを使ってスタイ
ルを当てている
[After]
自コンポーネント内のスタイルのみを実装する

View Slide

table of contents
1. 自己紹介
a. 経歴
2. 美とは何か
i. Provider
ii. Custom Hooks
iii. 状態管理

View Slide

アンチパターンとリファクタリング

View Slide

1. 計算できる値を状態として持つ
2. 複数のuseState
3. コンポーネントの内部にコンポーネントを宣言する
4. 子・孫コンポーネントに対してclassNameでStyleを指定す
る
5. AtomicDesignを採用した結果aタグとbuttonタグを内包す
る過度な共通化Button
a. コンポーネントの引数が増える
b. コンポーネント内での条件分岐が発生する
6. 14個のPropsを持つ共通レイアウトコンポーネント
7. KeyのないList
8. 余白を適当につけてしまう
a. 余白も一つの責務
b. Merginの相殺
c. Spacerを導入しよう

View Slide

「ある事柄を説明するためには、必要以上に
多くを仮定するべきでない」とする指針

View Slide

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [fullName, setFullName] = useState('');

View Slide

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = useMemo(
() => `${firstName} ${lastName}`, [firstName, lastName]);

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

const [x, setX] = useState(0);
const [y, setY] = useState(0);

View Slide

const [position, setPosition] = useState(
{ x: 0, y: 0 }
);

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

開発者体験としての問題

View Slide

読みにくい

View Slide

仮想DOM上の問題

View Slide

状態はツリー内の位置に関連付けられる

View Slide

異なる性質もののが、同一のものとして
判定される位置に存在することが問題

View Slide

import { useState } from 'react';
export default function MyComponent() {
const [counter, setCounter] = useState(0);
function MyTextField() {
const [text, setText] = useState('');
return setText(e.target.value)} />;
}
return (
<>

onClick={() => {
setCounter(counter + 1);
}}
>
Clicked {counter} times

>
);
}

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

コンポーネントの外部にスタイルを当てないこと
[Before]
子、孫コンポーネントに対してclassNameを使ってスタイ
ルを当てている
[After]
自コンポーネント内のスタイルのみを実装する
再掲

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

見かけ上同じであることと、コンポーネ
ントの責務・機能において同じであるこ
とは異なる判断指標である

View Slide

コンポーネントの内部で条件分岐してい
るのならば、それは複数の責務を持って
しまっているのでは？

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

export type BaseContainerProps = Omit & {
className?: string;
title?: string | JSX.Element;
subtitle?: string | JSX.Element;
breadcrumbs?: BreadcrumbContextType[];
isErrorDisplay?: boolean;
expiration?: Date;
containerMt?: string;
headerComponent?: JSX.Element;
headerButton?: JSX.Element;
sideComponent?: JSX.Element;
sidecomponenttop?: string;
mainComponentPb?: string;
mode?: 'list' | 'form';
bottomComponent?: React.ReactChild;
};

View Slide

14個のPropsを持つ共通レイアウトコンポーネント
[Before]
共通レイアウトコンポーネントに引数を渡して表示する
[After]
HeaderSection、MainSectionなどに分け、
Compositionして実装

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

https://ja.legacy.reactjs.org/docs/lists-and-keys.html

View Slide

る
7. KeyのないList
b. Merginの相殺

View Slide

❌

⭕

View Slide

table of contents
1. 自己紹介
a. 経歴
2. 美とは何か
i. Provider
ii. Custom Hooks
iii. 状態管理

View Slide

1. 私が明証的に真理であると認めるものでなければ、いかなる事柄
でもこれを真なりとして認めないこと
2. 検討しようとする難問をよりよく理解するために、多数の小部分
に分割すること
3. もっとも単純なものからもっとも複雑なものの認識へと至り、先
後のない事物の間に秩序を仮定すること
4. 最後に完全な列挙と、広範な再検討をすること
方法序説

View Slide

React is not a framework
(unlike Angular, which is more
opinionated).
ref:https://www.taniarascia.com/getting-started-with-react/

View Slide

Single Responsibility Principle

View Slide

責務分離されることで、結果的にアーキ
テクチャのような調和を持ってフロント
エンドを開発できるのでは？

View Slide

分離された責務
構造化
↓
ソフトウェアアーキテクチャ？

View Slide

There is no compression algorithm
for experience.
経験を圧縮できるアルゴリズムはない
President and Chief Executive Officer
Andy Jassy

View Slide

There is no compression algorithm for experience.

There is no compression algorithm for experience.

レバレジーズTechアカウント

More Decks by レバレジーズTechアカウント

Other Decks in Technology

Featured

Transcript