手島 拓也/吉田 健人/高林 佳稀 技術評論社 2022年07月25日頃
点数
80点
感想
前半はTypeScript、React、Next.jsについてわかりやすく説明されていてとても良かった。
しかし、後半のサンプルアプリの開発はわかりづらくコード量も多いため、あまり参考にならなかった。
設計
コンポーネント間のデータのやりとり
シンプルな用途であれば、porpsでデータとコールバック関数を渡せばよい。
しかし、バケツリレーになるため以下のデメリットがある。
- 間に別のコンポーネントを差し込むことになった場合、propsを2段階に渡す必要が生じる
- 親子ではなく兄弟間のコンポーネントの場合、兄弟それぞれ親をたどる必要が生じる
これらの問題を解決する方法として、ReduxとContextがある。
Atomic Design
コンポーネントを以下の粒度でカテゴライズして開発するというコンセプト。
- Pages: Templateにデータが注ぎ込まれたもの
- Templates: Organismを組み合わせて1つの画面としたもの
- Organisms: 1つ以上のMoleculeを組み合わせた要素。ヘッダーなど。
- Molecules: 1つ以上のAtomをを組み合わせた要素。フォームなど。
- Atoms: UIの最小単位。ボタンなど。
これらは一例であり、細かな分類はプロジェクトの指針によって異なる。
便利なライブラリ
React Hook Form
フォームバリデーション用のライブラリ。
SWR
データフェッチ用のライブラリ。
値をキャッシュし、バックグラウンドをキャッシュ更新してくれる。
React Content Loader
ローディングプレースホルダーを簡単に作成できるライブラリ。
Material Icons
アイコン。Material UIのコンポーネントの1つ。
styled-components
インストール
npm install styled-components@latest
propsを使う
CSSの内容にpropsを使いたい場合は、styled.タグ名<Propsの型>とし、値は関数の引数として受け取る。
import {NextPage} from 'next'
import styled from 'styled-components';
type StyledProps = {
color: string
}
const STitle = styled.h3<StyledProps>`
color: ${(props)=>props.color};
`;
const Styled: NextPage = () => {
return (
<>
<STitle color="#f00">styled components</STitle>
</>
)
}
export default Styled