【React Redux】カンバンボードを実装

Yuji

学べること

React (+ React Hooks, TypeScript) を使って web アプリを実装できる
Redux を使わない状態管理と Redux を使った状態管理、どちらも実装できる
Reducer のテストが書ける
Redux を使った状態管理の設計ができる
状態管理の設計改善によって、レンダリング性能の最適化ができる

Yuji

実装する機能

カンバンを進捗列ごとに表示できる
カンバンをフィルタリングできる
カンバンを並べ替えたり、カンバンの進捗列を変えたりできる
カンバンを作成または削除できる

Yuji

Parcel のキャッシュの消去法

rm -rf .cache dist

Yuji

const assertions

const x = [0, 1] as const ：配列の中身を変更できないことを示す
const x = { a: 'A' } as const：オブジェクトの中身を変更できないことを示す

Yuji

styled-componentを使用するメリット

DOMの実態（どのHTML要素を使用しているか）を隠蔽し、ユニークで抽象的なコンポーネントを定義できる。
利用側は、どのHTML要素で実装されたかに関心を持つ必要がない。
そういった点で、styled-componentは利用側に影響を与えずにDOM要素を変更できる

Yuji

Reset CSSを使用してデフォルトスタイルのベースラインを揃える

<link
       rel="stylesheet"
       href="https://unpkg.com/ress@2.0.4/dist/ress.min.css"
       crossorigin="anonymous"
/>

createGlobalStyle を使用する

const GlobalStyle = createGlobalStyle`
  html, body, #app {
    height: 100%;
  }

  body {
    /* https://css-tricks.com/snippets/css/system-font-stack/ */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

    overflow-wrap: break-word;
  }
`

ReactDOM.render(
  <>
    <GlobalStyle />
    <App />
  </>,
  document.getElementById('app'),
)

Yuji

Sassのように色を変数として共通化する

colors.ts のようなファイルを作成し、色の変数を管理する

export const Navy = '#001f3f'
export const Blue = '#0074D9'
export const Aqua = '#7FDBFF'
export const Teal = '#39CCCC'
export const Olive = '#3D9970'
export const Green = '#2ECC40'

Yuji

コンポーネントを切り出す

モジュールの切り出し方は、単一責任の原則などを参考にする。

Yuji

CSSのTIPS

inputのフォーカス時のアウトラインを無効化

:focus {
    outline: none;
  }

flex-shrink

flex-flow

Yuji

あとで確認すること

flex-flowとは？
flex-shrinkとは？
styled.div.attrsの使用用途
styled(_CheckIcon)の使用用途　→ import時に名前を変更している

Yuji

入力フォームの表示非表示は、トグル関数を作成して実装している。

const toggleInput = () => setInputMode(v => !v)

Yuji

ユーザーは自分の入力したデータを失うと苦痛を感じる

対策として、入力フォームを非表示にしても値が消えない設計にしないといけない。
そうでなければ、アプリケーションに対する信用が落ちてしまう。

state と props のどちらを使うかが設計を左右することを把握する必要がある。
また、state として入力値を持つなら、CSS の display プロパティで表示を切り替えたり、入力途中の値をどこかに退避したりといった対策が必要です。