「TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発」の感想・備忘録1

点数

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

コメント

タイトルとURLをコピーしました