Skip to content

Slackクローン 1. 環境構築

公開日

表紙

1. 環境構築

パッケージマネージャの最新化

バイナリのインストール

Node.js — Run JavaScript Everywhere
Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
Node.js — Run JavaScript Everywhere favicon https://nodejs.org/en/
Node.js — Run JavaScript Everywhere

コマンドで入力する方法もあるけど、最新化するだけならバイナリからインストールが一番楽

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】pnpm自体をアップデートする - Qiita favicon https://qiita.com/hujuu/items/8ba12eca6fb2db5dd8bd
【pnpm】pnpm自体をアップデートする - Qiita

ついでなので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.
Bun — A fast all-in-one JavaScript runtime favicon https://bun.sh/
Bun — A fast all-in-one JavaScript runtime
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 shadcn/ui for Next.js.
Next.js favicon https://ui.shadcn.com/docs/installation/next
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.
Button favicon https://ui.shadcn.com/docs/components/button
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
Tailwind CSS IntelliSense - Visual Studio Marketplace favicon https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Tailwind CSS IntelliSense - Visual Studio Marketplace

Simple React Snippets

Simple React Snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Dead simple React snippets you will actually use
Simple React Snippets - Visual Studio Marketplace favicon https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
Simple React Snippets - Visual Studio Marketplace

Error Lens

Error Lens - Visual Studio Marketplace
Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.
Error Lens - Visual Studio Marketplace favicon https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens
Error Lens - Visual Studio Marketplace

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.
Color Highlight - Hue show better version - Visual Studio Marketplace favicon https://marketplace.visualstudio.com/items?itemName=Yunduo.color-highlight-css-color-4
Color Highlight - Hue show better version - Visual Studio Marketplace

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開発 favicon https://tomatosauce.jp/punycode-deprecated/
ERROR:[DEP0040] DeprecationWarning: The punycode module is deprecated.の解決法 | トマトソースのWEB開発
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

これでエラー解消。