KOS.LOG
tech

【React】Nextjs+bun+TailwindCSS+shadcn/uiで環境構築してみたい

  • #nextjs
  • #bun
  • #tailwindcss
  • #shadcn-ui
  • #react

はじめに

今回は、Next.js+TailwindCSSを用いたプロジェクトをbunを使用して環境構築する過程を確認していきます。

環境構築の流れ

  • 事前準備：以下のパッケージがインストールされていることを確認
    • Homebrew/Chocolatey
    • Volta
    • Node.js
  • bunのインストール
  • プロジェクトの作成

事前準備

bunでプロジェクトを作成するためには、以下のパッケージが入っていることが好ましいです。ただし、パッケージ管理ツールは、なんでもかんでも入れると管理が煩雑になることから、使う使わないの好みが分かれますので、よく確認のうえインストールしていきましょう！

  • Volta含む様々なツールに対応した汎用的なパッケージ管理ツール
    • Homebrew：Macの方向け
    • Chocolatey：Windowsの方向け
      • 他にはwingetやscoopといったツールもありますが、より多くのツールに対応しているChocolateyを使用しています。
  • Volta：Nodejsとnpmに特化したパッケージ管理ツール
    • ほかには、npmやyarn、pnpmなどもあります。npmはNodeをインストールすると一緒にインストールされる標準ツールです。
  • Node.js：サーバーサイドJavaScript実行環境

Homebrew/Chocolatey

Macの方は、ターミナルを開き、以下のコマンドでHomebrewをインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Homebrew（日本語）

Windowsの方は、PowerShellを管理者権限で開き、以下のコマンドでChocolateyをインストールします。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

https://chocolatey.org/install

Volta

PC環境に合わせて以下のコマンドでVoltaをインストールします。

  • Macの方
brew install volta

https://formulae.brew.sh/formula/volta

  • Windowsの方
choco install volta

https://community.chocolatey.org/packages/volta

Node.js

Voltaを使用してNode.jsをインストールします。@以降でバージョン指定できます。

volta install node@20

https://formulae.brew.sh/formula/volta

bunのインストール

Nodeがインストールされたので、npmを使用してbunをインストールします。

npm install -g bun

bunとは？

ここで使用したbunについて少し掘り下げます。

bunとは、高速なサーバーサイドレンダリングと従来のJavaScriptランタイムを置き換えるのに申し分ないパッケージマネージャーを備えていることで話題のJavaScript実行環境です。

https://bun.sh/

例えば、pnpmはnpmなどに対して、複数プロジェクトのnode_modulesを共有するような仕組みを用いてストレージ効率化を図りましたが、このような機能をbunについても要しています。

https://pnpm.io/ja/motivation

https://bun.sh/docs/install/cache

プロジェクトの作成

一通りパッケージのインストールが完了したので、プロジェクトを作成していきます。以下のように作業フォルダを作成してbunxコマンドでNextjsプロジェクトを作成します。

対話式で選択する箇所はデフォルトに従います。

  • What is your project named?
    • プロジェクトの名前を設定します。ここでは、“my-app”というプロジェクト名が入力されています。
  • Would you like to use TypeScript?
    • TypeScriptを使用するかどうかを選択します。TypeScriptは、JavaScriptに静的型付けを追加した言語で、コードの品質と保守性を向上させることができます。“Yes”を選択すると、TypeScriptが設定されます。
  • Would you like to use ESLint?
    • ESLintを使用するかどうかを選択します。ESLintは、JavaScriptやTypeScriptのコードをチェックし、潜在的なエラーや問題を検出するツールです。“Yes”を選択すると、ESLintが設定されます。
  • Would you like to use Tailwind CSS?
    • Tailwind CSSを使用するかどうかを選択します。Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、素早くカスタマイズ可能なUIを構築することができます。“Yes”を選択すると、Tailwind CSSが設定されます。
  • Would you like to use src/ directory?
    • プロジェクトのソースコードをsrc/ディレクトリ内に配置するかどうかを選択します。“Yes”を選択すると、コンポーネントやページなどのソースコードがsrc/ディレクトリ内に配置されます。
      • デフォルトでNoになっている通り、公式でもあまり採用しないようなので今回も使用しません。
  • Would you like to use App Router? (recommended)
    • App Routerを使用するかどうかを選択します。App Routerは、Next.js 13以降で導入された新しいルーティングシステムで、ファイルベースのルーティングを提供します。“Yes”を選択すると、App Routerが設定されます。
      • 従来のPagesRouterが世の中ではまだ多いようですが、今後置き換わっていくと思いますので、勉強しつつ慣れていきたいものです。デフォルトに合わせてYesです。
$ mkdir sample-project && cd sample-project
$ bunx create-next-app@latest
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) › No / Yes

https://nextjs.org/docs/pages/api-reference/create-next-app

https://tailwindcss.com/docs/installation

以下のコマンドでローカル環境を立ち上げます。

% bun dev
$ next dev
  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 3.8s
 ○ Compiling / ...
(node:22841) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
 ✓ Compiled / in 3s (532 modules)
 GET / 200 in 3269ms
 ✓ Compiled in 370ms (250 modules)

ブラウザからhttp://localhost:3000にアクセスすると以下のようにサンプルページにアクセスできました！

Untitled.png

shadcn/uiも使用する

ここからはおまけですが、shadcn/uiも設定していきます。

shadcn/uiは依存関係としてインストールしないコンポーネントライブラリで、コピーペーストできる形式のため自由度が高いです。

なぜ依存関係としてパッケージ化されずにコピー/ペーストするのでしょうか?

この背後にある考え方は、コードの所有権と制御をユーザーに与え、コンポーネントの構築方法とスタイルを決定できるようにすることです。

いくつかの賢明なデフォルトから始めて、ニーズに合わせてコンポーネントをカスタマイズします。

https://ui.shadcn.com/docs

$ bunx shadcn-ui@latest init
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Zinc
✔ Would you like to use CSS variables for colors? … no / yes

✔ Writing components.json...
✔ Initializing project...
✔ Installing dependencies...

Success! Project initialization completed. You may now add components.

https://ui.shadcn.com/docs/cli

ボタンの機能を搭載するには以下のコマンドを使用するようなイメージです。

$ bunx shadcn-ui@latest add button
✔ Done.

https://ui.shadcn.com/docs/components/button

拡張機能「shadcn/ui」

拡張機能を使用することもできます。

VScodeやCursorで以下の拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=SuhelMakkad.shadcn-ui

使用したいコンポーネントが出てきたら、「cmmand+shift+p」と入力してEnterを押します。

shadcnと入力して「AddNewComponent」を選択します。

Untitled.png

buttonと入力してEnterを押します。

Untitled.png

ターミナルが起動して、コンポーネントがインストールされます。

$ bunx shadcn-ui add button
✔ Done.

まとめ

今回は、Nextjs+bun+TailwindCSS+shadcn/uiでプロジェクト作成を試してみました。次回以降で実際にサイト制作を進めていきたいと思います！

最後までご覧いただきありがとうございました。