1. 環境構築
パッケージマネージャの最新化
バイナリのインストール
Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
コマンドで入力する方法もあるけど、最新化するだけならバイナリからインストールが一番楽
terminal
$ slack-clone $ node -v
v20.17.0
npmのアップデート
今はnpxを個別にインストールする必要がないらしいので、npmだけアップデート。
terminal
$ npm install -g npm --force
pnpmのアップデート
【pnpm】pnpm自体をアップデートする - Qiita
pnpm installを実行した際に、アップデートのお知らせが出たので、pnpm自体をアップデートしたときの手順をまとめます。 ╭─────────────────────────────────…

ついでなのでpnpmをアップデート(今回は使わない)
terminal
$ pnpm add -g pnpm
+ pnpm 9.9.0
アップデートされなかったので場所確認
terminal
$ where pnpm
/opt/homebrew/bin/pnpm
/Users/Library/pnpm/pnpm
/opt/homebrew/bin/pnpm
なんかhomebrewが2️2つあるのが気になるけど、homebrew側使ってるようなので以下
terminal
$ brew install pnpm
$ pnpm -v
9.9.0
これで最新化。
Bunのインストール
今回はBunを使う。
Bun — A fast all-in-one JavaScript runtime
Bundle, install, and run JavaScript & TypeScript — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner, and npm client built-in.

terminal
$ curl -fsSL https://bun.sh/install | bash
$ bun -v
1.1.26
プロジェクト作成
create-next-app
デフォルトの設定で作成(最後だけNo)
terminal
$ bunx create-next-app@latest slack-tutorial
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
実行確認
terminal
$ bun run dev
shadcn/uiのインストール
Next.js
Install and configure Next.js.

terminal
$ bunx --bun shadcn@latest init
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › Default
✔ Which color would you like to use as the base color? › Slate
✔ Would you like to use CSS variables for theming? … yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
✔ Installing dependencies.
✔ Created 1 file:
- src/lib/utils.ts
ボタン追加
Button
Displays a button or a component that looks like a button.

terminal
$ bunx --bun shadcn@latest add button
VSCodeの拡張機能
拡張機能が入ってない場合は入れる。
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code
Simple React Snippets
Simple React Snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Dead simple React snippets you will actually use
Error Lens
Error Lens - Visual Studio Marketplace
Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.
Color Highlight
Color Highlight - Hue show better version - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight web colors in your editor, optimized for hsl and hwb formats. CSS Color Module Level 4 compliant.
global.cssの修正
viewport全体に適用される形に修正。reset.cssのようなもの。
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
html,
body,
:root {
height: 100%;
}
Tips
The punycode module is deprecated.
このブログをローカルで立ち上げていると punycode
が非推奨のようなエラーが出始める。
直らなかったので検索すると、同じエラーにハマってる人複数。nodeが21以上だと起きるらしい(原因不明)。
ERROR:[DEP0040] DeprecationWarning: The punycode module is deprecated.の解決法 | トマトソースのWEB開発
今回は「ERROR:[DEP0040] DeprecationWarning: The punycode module is deprecated.」のエラーの解消法について解説します。
![ERROR:[DEP0040] DeprecationWarning: The punycode module is deprecated.の解決法 | トマトソースのWEB開発](https://tomatosauce.jp/wp-content/uploads/2023/12/punycode-deprecated.png)
terminal
(node:1512) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
ターミナルから叩くと v20.17.0
なので別の問題かと思ったのだけど、homebrew側が v22
だった。
サーバ起動時はhomebrew側を使ってるっぽいが、自身が管理しきれてないのでHomebrew側を削除。
terminal
astro-paper-blog $ /usr/local/bin/node -v
v20.17.0
astro-paper-blog $ /opt/homebrew/bin/node -v
v22.8.0
削除
terminal
$ brew list node
$ brew uninstall node --ignore-dependencies
$ brew cleanup
これでエラー解消。