Skip to content

Slackクローン 1. 環境構築

公開日

表紙

1. 環境構築

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

バイナリのインストール

Node.js — Run JavaScript Everywhere
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
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 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

これでエラー解消。