Gatsby & TypeScript の個人ブログを Tailwind から Chakra UI に入門しつつ移行したログ

ブログには大仰すぎると感じたらTailwindを使い続ければよい (改善の余地がありそうということは前々から思っている)。

そしてEmotionに依存している。もともとtwin.macroを使ってTailwindとEmotion併用してたが、Emotionのv11がいつの間にか出てるのでアップグレードしておく。

https://emotion.sh/docs/emotion-11

Emotion 11でパッケージが色々とリネームされている。

Most of this renaming can be done automatically via a codemod by running the @emotion/pkg-renaming rule from @emotion/eslint-plugin with --fix over your codebase.

@emotion/eslint-plugin を入れてパッケージリネーム用の設定を走らせればいいらしい。このeslint-plugin自体も eslint-plugin-emotion という名前から変更されている。

eslintrc.json にこれを追加して eslint --fix でOK。うっかり @emotion/core からインポートしたりしそうなので設定はしばらく残しておく。

  "plugins": [
    "@emotion"
  ],
  "rules": {
    "@emotion/pkg-renaming": "error"
  }

@chakra-ui/gatsby-plugin を入れる。gatsby-plugin-chakra-uiというのもあるがこれは公式ではない。

そういえば gatsby-plugin-emotion が古いので v5 に上げておく。

Our goal is to design simple, composable components that cater to real-life UI design problems. In order to do that, we developed a set of principles that help us always be on that path.

おれたちのゴールは現実のUIデザインの問題にこたえられるシンプルでコンポーザブルなコンポーネントをデザインすることだ。その目的から外れないように行動指針のまとめを作って発展させてきた。

composableは「構成可能な」って訳されるけどまずその日本語の意味がよくわからん。どうでもいいけど「日本語は漢字があるから初見の単語の意味も字面から捉えられる」とか言ってる人間にこれを叩きつけたい。個人的にはパーツを組み合わせて大きなものを組み上げられるみたいな感じだと勝手に解釈してる。

• Style Props: All component styles can be overriden or extended via style props to reduce the use of css prop or styled(). Compose new components from Box.

propsを使ってスタイルを上書きしたり拡張したりできるらしい。Box から新しいコンポーネントを構成するっていうのは進めないとよくわからん。

• Simplicity: Strive to keep the component API fairly simple and show real world scenarios of using the component.

コンポーネントのAPIをシンプルに保ち、現実での使い方を示す。

• Composition: Break down components into smaller parts with minimal props to keep complexity low, and compose them together. This will ensure that the styles and functionality are flexible and extensible.

/compos(e|able|ition)/ についての解説あるな。コンポーネントをより小さいパーツごとに分解してpropsを減らすことで複雑さを抑え、そんでそれらのパーツを組み合わせて使う。こうするとスタイルと機能の柔軟性と拡張性が上がる。

• Accessibility: When creating a component, keep accessibility top of mind. This includes keyboard navigation, focus management, color contrast, voice over, and the correct aria-* attributes.

アクセシビリティ第一。キーボードナビゲーション、フォーカス管理、色のコントラスト、音声読み上げ、aria-*属性。

• Dark Mode: Make components dark mode compatible. Use our ColorModeProvider component and useColorMode hook to handle styling. Learn more about dark mode.

コンポーネントはダークモードでも使える。カラーモード取るのに React Hooks が使える。

• Naming Props: We all know naming is the hardest thing in this industry. Generally, ensure a prop name is indicative of what it does. Boolean props should be named using auxiliary verbs such as does, has, is and should. For example, Button uses isDisabled, isLoading, etc.

名前付けって作業が一番大変。一般的にpropの名前はそれが何をするのか明確になっている。真偽値なら does has is should みたいな助動詞を使う。Button には isDisabled isLoading みたいなのがある。

まあよくリーダブルコードとかで言われるのと同じ感じ。

• Pure TypeScript なので自然な補完が出る
• デフォルトのBreakpointsがem指定
• Stack Flexぽいやつ

Tailwind消しただけなのでEmotionの部分は普通に残ってる。

Tailwindと挙動が違う？Tailwindの container は1個下のブレークポイントの幅になるのだが、ChakraUIのデフォルトだと 60ch 固定なのか？

wrap="wrap-reverse" みたいな文字列もちゃんと文字列リテラルのUnionが取られている。TypeScriptわかってる。

Stack の divider が地味に便利。並べるやつの隙間に線引こうとするとどうしても :first-childとかが必要になりがちだがこいつならまったく不要。最高。

export const PostList: React.FC<PostListProps> = ({ nodes }) => (
  <VStack divider={<StackDivider />} spacing="1.5rem">
    {nodes.map(
      ({ excerpt, fields, frontmatter }) =>
        frontmatter?.tags &&
        fields?.path && (
          <PostLink
            path={fields.path}
            yyyymmdd={fields.yyyymmdd}
            title={frontmatter.title}
            tags={frontmatter.tags.filter(isntNull)}
            key={fields.path}
            excerpt={excerpt}
          />
        )
    )}
  </VStack>
);

export const PostLink: React.VFC<PostLinkProps> = ({
  excerpt,
  path,
  tags,
  title,
  yyyymmdd,
}) => (
  <Box as="article" px=".5rem">
    <Wrap spacing=".5rem" direction="row" wrap="wrap">
      {yyyymmdd && (
        <WrapItem>
          <PostDate path={yyyymmdd} />
        </WrapItem>
      )}
      <WrapItem>
        <TagList tags={tags} />
      </WrapItem>
    </Wrap>
    <Heading my=".5rem">
      <Hyper
        to={`/${path}`}
        css={css`
          font-feature-settings: "palt";
        `}
      >
        {title}
      </Hyper>
    </Heading>
    <Text color="gray.600">{excerpt}</Text>
  </Box>
);

うそかも。props の型が Box と合わない。

リファクタリングを通してTailwind由来の className を消しまくれた。

サイドバーは Layout の SidebarComponent にわたす方式だったがサイドバーだけ独立させたらすごい楽になった。