使いこなせ！忍法、Chakra UIの術！

HapInS アドベントカレンダー2023、19日目でござるよ、にんにん！

ついに記事を書きすぎて気が触れたんじゃないかって？

驚くことなかれ、なんか枠があいていたのであと2つ拙者の記事があるのでまだまだこれからでござるよ。

そんなことはともかく、今日は拙者の故郷、Reactに伝わるChakra UIの術を伝授しに参ったで候。

この術、フロントエンドニンジャが一足飛びで上級ニンジャになれる、チート級の忍術でござる故、しかと身に覚えて今日は帰るでござる！

それではいざいざ！

そもそもChakra UIとは

簡潔に申せばUIコンポーネントライブラリでござる。

これをJSXの中にタグとして記述するだけで、最低限のマージンやパディングが確保されるので

逐一、Flexで並べた要素にmargin-bottom: 8px;とか記述しなくて済むでござる。

加えて、コンポーネントライブラリとして多種多様なコンポーネントが用意されているところも売りでござるな。

普段はバックエンドニンジャでも細かいCSSを気にしなくて済むので、コツさえつかめば初級フロントエンドニンジャぐらいにいはあっという間になれるでござる。

さらにさらに、FIgmaでUIライブラリも提供されているので、デザイナーニンジャといともたやすく意思疎通が図れるでござる。

開発はスピードが命！デザイナーニンジャと連携して瞬歩のごとくアプリ開発をするでござる！

ちなみに感のいい方はお気づきでござろうが、拙者がこんな感じなのはChakra UIの名前が元ネタでござる。

チャクラといえばあの世界的に有名なニンジャNARUTO殿であるが、このNARUTOにでてくるチャクラが名前の元ネタでござる故

郷に入りては郷に従えの精神で今日はニンジャスタイルで通して参るでござるよ、にんにん！

それでは、実践で役に立つ術を早速伝授するでござる！

十全十美！HStack、VStackの術！

要素を並べるならまずこれでござる。

HはHorizon、VはVertical、それぞれ中身はFlexでHStackがflex-direction: row;、VStackがflex-direction: columnでござる。

使い方は下記のような感じで、タグで子要素たちを囲むでござる

HStack

要素

要素

要素

/HStack

これで要素が横並びになり、かつ最低限のマージン（デフォルトだと8px）が確保されて並べられるでござる。

もちろん下記のようにspacingを使って、マージンを指定することもできるでござる。

HStack spacing="16px"

中身は前述の通りFlexなのでFlexで使えるプロパティは一通り使えるのも売りでござるな。

HStackかVStackかを見るだけで水平方向か垂直方向、どちらに要素が並んでるから一目瞭然、spacingを使えばマージンも意のままでござるからコードの可読性もあがりつつ、記述を減らせるのがこの術のよいところでござるよ！

変幻自在！Boxの術！

こちらも要素を入れ子にするときに使う術でござるな。

このBoxの術、中身はdivで、プロパティをつけることで様々なな要素に早変わりするでござる。

display="Flex"と書けばFlexになり、asプロパティでButtonやimgにいともたやすく変化するでござる。

大変便利な術でござるが、乱用するとコードの可読性が損なわれるので要注意でござる。

基本的に、Chakra UIの基本コンポーネントに無いタグを実装するときに使うでござるよ。

神出鬼没！Modalの術！

これはその名のとおりモーダルを一瞬で口寄せできる術でござる。

普通に実装しようとすると大変なモーダルをいくつかタグを記述するだけで、容易に実装できるのはよいでござるな。

const { isOpen, onOpen, onClose } = useDisclosure()

と、まずは術の下準備をして

Modal isOpen={isOpen} onClose={onClose}

ModalOverlay /

ModalContent

ModalHeader

ここにヘッダーの内容

/ModalHeader

ModalCloseButton /

ModalBody

ここにメインの内容

/ModalBody

ModalFooter

ここにフッターの内容

/ModalFooter

/ModalContent

/Modal