Upgrade to Pro — share decks privately, control downloads, hide ads and more …

There is no compression algorithm for experience.

There is no compression algorithm for experience.

There is no compression algorithm for experience.

Tech Leverages

June 30, 2023
Tweet

More Decks by Tech Leverages

Other Decks in Technology

Transcript

  1. 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. デコンストラクション(美とは何か)
  2. 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. デコンストラクション(美とは何か)
  3. 小林京輔 1996/1/9 (ENTJ) 1. 出身 a. 札幌 2. 生まれ a.

    秋田県能代市 3. 趣味 a. OCTOMORE(スコッチ) b. React /Remix c. 西洋哲学・時間論 d. ウィトゲンシュタイン i. ウィトゲンシュタインハウ スに行った ii. 一族の墓にお参りに行った
  4. 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. デコンストラクション(美とは何か)
  5. 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. デコンストラクション(美とは何か)
  6. UI をインタラクティブにするには、ユーザーが基礎となるデータ モデルを変更できるようにする必要が あります。これには状態を使用します。 状態は、アプリが記憶する必要がある最小限の変化するデータのセットであると考えてください。状態 を構造化するための最も重要な原則は、状態を DRY (繰り返さない) に保つことです。アプリケーション が必要とする状態の絶対最小表現を見つけ出し、その他すべてをオンデマンドで計算します。

    たとえ ば、買い物リストを作成している場合、項目を状態の配列として保存できます。リスト内の項目数も表 示したい場合は、項目数を別の状態値として保存せず、代わりに配列の長さを読み取ります。 ※Thinking in React(https://react.dev/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state)
  7. 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. デコンストラクション(美とは何か)
  8. 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. コンポーネント内のみをスタイルし、暗黙的にコンポーネントの外部にス タイルを当てないこと
  9. 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. コンポーネント内のみをスタイルし、暗黙的にコンポーネントの外部にス タイルを当てないこと
  10. 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. コンポーネント内のみをスタイルし、暗黙的にコンポーネントの外部にス タイルを当てないこと
  11. 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. コンポーネント内のみをスタイルし、暗黙的にコンポーネントの外部にス タイルを当てないこと
  12. 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. コンポーネント内のみをスタイルし、暗黙的にコンポーネントの外部にス タイルを当てないこと
  13. JS

  14. 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. デコンストラクション(美とは何か)
  15. 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を導入しよう
  16. 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を導入しよう
  17. const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState('');

    const fullName = useMemo( () => `${firstName} ${lastName}`, [firstName, lastName]);
  18. 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を導入しよう
  19. 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を導入しよう
  20. import { useState } from 'react'; export default function MyComponent()

    { const [counter, setCounter] = useState(0); function MyTextField() { const [text, setText] = useState(''); return <input value={text} onChange={(e) => setText(e.target.value)} />; } return ( <> <MyTextField /> <button onClick={() => { setCounter(counter + 1); }} > Clicked {counter} times </button> </> ); }
  21. 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を導入しよう
  22. 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を導入しよう
  23. 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を導入しよう
  24. export type BaseContainerProps = Omit<BoxProps, 'title'> & { 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; };
  25. 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を導入しよう
  26. 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を導入しよう
  27. 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. デコンストラクション(美とは何か)
  28. React is not a framework (unlike Angular, which is more

    opinionated). ref:https://www.taniarascia.com/getting-started-with-react/