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

はじめに

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

React， Next.jsとは

Reactとは，インタラクティブなユーザーインタフェースを構築するためのJavaScriptライブラリです．Webアプリケーションの要件として

• ユーザーインタフェース
• ルーティング
• データ取得
• レンダリング
• インテグレーション
• インフラストラクチャ
• パフォーマンス
• スケーラビリティ

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

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

chakra UIとは

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

デザインのライブラリでいえば，Material UIやBootStrap, Tailwindが有名ですが，これらと比較したときのchakra UIのメリットとしては，

• シンプルで分かりやすいコンポーネント
• カスタマイズのしやすさ
• ソースコードが綺麗に書ける

が挙げられます．例えば，簡単なBoxコンポーネントを縦方向に並べたいときには，

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して配置するだけで，実現することができます．また，スタイルを指定するときには，wでwidth，pでpaddingなど省略した引数で与えることが可能です．

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

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

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

前回の記事