Next.js × chakra UIでモダンなフロントエンド開発（導入編）

# はじめに
こんにちは，来海くるみ（@walnut-pro）です．
2022年のフロントエンド開発におけるトレンド技術といえば，<b>React</b>や<b>Next.js</b>が思いつくのではないでしょうか？実際に，125カ国のフロントエンド開発者に向けたアンケートで，注目されているフレームワークやライブラリなどをまとめた[State of frontend 2022](https://tsh.io/state-of-frontend/)を読んでみても，ReactやNext.jsの人気が高いことが分かります．

https://tsh.io/state-of-frontend/


# React， Next.jsとは
Reactとは，インタラクティブなユーザーインタフェースを構築するためのJavaScriptライブラリです．Webアプリケーションの要件として
- <b>ユーザーインタフェース</b>
- <font color="DarkGray">ルーティング</font>
- <font color="DarkGray">データ取得</font>
- <font color="DarkGray">レンダリング</font>
- <font color="DarkGray">インテグレーション</font>
- <font color="DarkGray">インフラストラクチャ</font>
- <font color="DarkGray">パフォーマンス</font>
- <font color="DarkGray">スケーラビリティ</font>

がありますが，ユーザーインタフェース（UI）とは，ユーザーが画面上で表示および操作する要素を意味しています．Reactは，サードパーティのツールとソリューションのエコシステムが充実しているため，アプリケーション開発のスピードを高めることができます．

Next.jsとは，Reactベースで開発されたフレームワーク</b>であり，Webアプリケーションを構築するためのビルディングブロックを提供します．例えば，Reactを使用してUIを構築し，Next.jsによって<b>ルーティングやデータ取得，インテグレーション</b>などの一般的なアプリケーション要件を満たすことができます．つまり，ReactとNext.jsを活用することで，インタラクティブで高度に動的化された，高いパフォーマンスのWebアプリケーションを構築できるのです．

https://nextjs.org/learn/foundations/about-nextjs?utm_source=next-site&utm_medium=nav-cta&utm_campaign=next-website

# chakra UIとは
ChakraUIとは，Reactアプリケーションを構築するために必要なビルディングブロックを提供する，シンプルでモジュール化されたコンポーネントライブラリです．cssを使ったことがある人なら共感できると思うのですが，ゼロから開発を始めるときにコンポーネントの高さや色などのスタイルをどう当てれば良いか，ものすごく悩みます．また，hoverのような擬似要素を与えるときに，どのように記述すればよいか迷うことがあります．このようなデザイン実装をできる限り効率化し，開発スピードを高めるために使用するのが，<b>Chakra UI</b>です．

デザインのライブラリでいえば，Material UIやBootStrap, Tailwindが有名ですが，これらと比較したときのchakra UIのメリットとしては，
- シンプルで分かりやすいコンポーネント
- カスタマイズのしやすさ
- ソースコードが綺麗に書ける

が挙げられます．例えば，簡単なBoxコンポーネントを縦方向に並べたいときには，
```react
import { Box, Text, VStack } from '@chakra-ui/react';
import React from 'react';

const ExperienceTemplate = () => {
  return (
    <VStack>
      <Box w='100%' p={4} color='white'>
        <Text>Experience</Text>
      </Box>
      <Box w='100%' p={4} color='white'>
        <Text>React, Next, ChakraUI, Vue, Vuex, Nuxt, Java, SpringBoot, Docker, k8s</Text>
      </Box>
    </VStack>
  );
};

export default ExperienceTemplate;
```
このようにBox， Text, VStackコンポーネントをimportして配置するだけで，実現することができます．また，スタイルを指定するときには<b>，wでwidth，pでpadding</b>など省略した引数で与えることが可能です．

- Accordion
- Tabs
- Visually Hidden
- Alert
- Circular Progress
- Progress
- Skeleton
- Spinner
- Toast
- Button
- Box
- Checkbox
- Form Controll
- Input
- Close Button
- ...

など，たくさんのコンポーネントが揃っているので，興味のある方は，ぜひ下のリンクから公式サイトに飛んでみてください．

https://chakra-ui.com/docs/components

# Next.js × chakra UIで何ができるか
ここまで記事を読んでくださった方は想像できると思いますが,Next.js × chakra UIによって，以下のことを実現することができます．

- Next.jsが各フォルダに対して，自動でURLのルーティングをおこなってくれる
- 画像やレンダリングを最適化し，ページ読み込みを高速化することができる
- ゼロコンフィグ機能により，最低限の設定（webpackなどのパッケージのインストール）を自動で行う
- chakra UIにより，スタイルのカスタマイズ性を拡張することができる
- reactのpropsとchakra UIを組み合わせることで，データの受け渡しを可能にする

モダンなフロントエンド開発を行う上では欠かせないですね．

# 最後に
フロントエンドは変化の激しい業界ですので，常にキャッチアップをしていければ良いと思っています．そしてみなさんの役に立てれば幸いです．次回は実際にWebサイトを生成するための環境構築編，開発編を執筆していきたいと思っています！最後まで読んでいただき，ありがとうございました！

# Twitter

こちらで呟いてますので，良かったらフォローお願いします✨
https://twitter.com/walnut_pro

# 前回の記事
https://qiita.com/walnut-pro/items/99981b2a55659eb812b5

https://qiita.com/walnut-pro/items/d97e6293bc9964d0da45