View on GitHub

フロントエンド開発の準備

Home

フロントエンド開発の準備

フロントエンドのルートディレクトリの作成

$ mkdir -p ~/dev/recsys-full/src/frontend/
$ cd ~/dev/recsys-full/src/frontend/
frontend$

Node.js のインストール

$ curl -fsSL https://deb.nodesource.com/setup_24.x | sudo -E bash -
$ sudo apt install nodejs
$ node --version
v24.20.0
# v18.x以上であることを確認する。

yarn のインストール

$ ls /usr/local/share/
ca-certificates  fonts  man  sgml  xml

$ sudo mkdir -p /usr/local/share/keyrings/
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo gpg --dearmor -o /usr/local/share/keyrings/yarn-archive-keyring.gpg
$ ls /usr/local/share/keyrings/
yarn-archive-keyring.gpg

$ ls /etc/apt/sources.list.d/
google-chrome.sources  nodesource.sources  official-package-repositories.list  vscode.sources

$ echo "deb [signed-by=/usr/local/share/keyrings/yarn-archive-keyring.gpg] https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
deb [signed-by=/usr/local/share/keyrings/yarn-archive-keyring.gpg] https://dl.yarnpkg.com/debian/ stable main

$ ls /etc/apt/sources.list.d/
google-chrome.sources  nodesource.sources  official-package-repositories.list  vscode.sources  yarn.list

$ sudo apt update
$ sudo apt install yarn
$ yarn --version
1.22.22

Next.js のアプリケーションの作成

frontend$ $ yarn create next-app . --ts --tailwind --eslint --app --src-dir
yarn create v1.22.22
(node:18475) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
(Use `node --trace-deprecation ...` to show where the warning was created)
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@16.3.3" with binaries:
      - create-next-app
(node:18475) [DEP0190] DeprecationWarning: Passing args to a child process with shell option true can lead to security vulnerabilities, as the arguments are not escaped, only concatenated.
[##] 2/2
Using defaults for unprovided options:

  --no-react-compiler     No React Compiler (use --react-compiler for React Compiler)
  --agents-md             AGENTS.md (use --no-agents-md for No AGENTS.md)
  --import-alias          "@/*"

Creating a new Next.js app in /home/rsl/dev/recsys-full/src/frontend.

Using yarn.

Initializing project with template: app-tw


Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

yarn install v1.22.22
info No lockfile found.
(node:18513) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
(Use `node --trace-deprecation ...` to show where the warning was created)
[1/4] Resolving packages...
warning eslint@9.39.5: This version is no longer supported. Please see https://eslint.org/version-support for other options.
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 110.40s.

yarn exec v1.22.22
Generating route types...
✓ Types generated successfully
Done in 0.56s.

Success! Created frontend at /home/rsl/dev/recsys-full/src/frontend

Done in 114.11s.

frontend$ ls -a
.  ..  .gitignore  .next  AGENTS.md  CLAUDE.md  README.md  eslint.config.mjs  next-env.d.ts  next.config.ts  node_modules  package.json  postcss.config.mjs  public  src  tsconfig.json  yarn.lock

package.json の確認

frontend$ less package.json
{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "next": "16.3.3",
    "react": "19.2.8",
    "react-dom": "19.2.8"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.3.3",
    "tailwindcss": "^4",
    "typescript": "^5"
  },
  "packageManager": "yarn@1.22.22"
}

フロントエンド環境の動作確認

frontend$ yarn dev
yarn run v1.22.22
$ next dev
▲ Next.js 16.3.3 (Turbopack)
- Local:         http://localhost:3000
- Network:       http://10.0.2.15:3000
✓ Ready in 285ms
✓ Running next.config.ts took 39ms
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

ブラウザで、上記のLocalに記載されている URL にアクセスし、Next.js のウェルカムページが表示されることを確認してください。

globals.css の設定

src/frontend/src/app/globals.css

@import "tailwindcss";
/* ↓削除
:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}
↑削除 */

Prettier の設定

frontend$ yarn add prettier
frontend$ yarn add prettier-plugin-tailwindcss
frontend$ less package.json
...（略）...
{
  "dependencies": {
    "next": "16.3.3",
    "prettier": "^3.9.6",                     # <-
    "prettier-plugin-tailwindcss": "^0.8.1",  # <-
    "react": "19.2.8",
    "react-dom": "19.2.8"
  },
}
...（略）...

src/frontend/.prettierrc

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "src/app/globals.css"
}

src/frontend/.prettierignore

node_modules/
.next/
out/
build/
public/
*.min.js

tsconfig.json の設定

tsconfig.jsonを下記のとおり確認・編集してください。

src/frontend/tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true, // <- 確認
    "strictNullChecks": true, // <- 追加
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"] // <- 確認
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts", // <- 確認
    "**/*.tsx", // <- 確認
    ".next/types/**/*.ts", // <- 確認
    ".next/dev/types/**/*.ts",
    "**/*.mts"
  ],
  "exclude": ["node_modules"]
}

yarn run build のテスト

下記を実行し、エラーがないことを確認してください。

frontend$ yarn run build
yarn add v1.22.22
(node:19047) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
(Use `node --trace-deprecation ...` to show where the warning was created)
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ prettier-plugin-tailwindcss@0.8.1
info All dependencies
└─ prettier-plugin-tailwindcss@0.8.1
Done in 2.93s.
rsl@rsl000-mint:~/dev/recsys-full/src/frontend$ less package.json
rsl@rsl000-mint:~/dev/recsys-full/src/frontend$ yarn run build
yarn run v1.22.22
$ next build
▲ Next.js 16.3.3 (Turbopack)
✓ Running next.config.ts took 58ms

  Creating an optimized production build ...
✓ Compiled successfully in 13.5s
✓ Finished TypeScript in 2.8s
✓ Collecting page data using 1 worker in 487ms
✓ Generating static pages using 1 worker (4/4) in 254ms
✓ Finalizing page optimization in 9ms

Route (app)
┌ ○ /
└ ○ /_not-found


○  (Static)  prerendered as static content

Done in 19.25s.

参考

  1. Windows、macOS、Linux に Node.js と npm をインストールする方法
  2. apt-key を使わないサードパーティーリポジトリからのパッケージのインストール方法 #Ubuntu - Qiita
  3. API Reference: create-next-app | Next.js
  4. tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.
  5. 手島拓也，吉田健人，高林佳稀，『TypeScript と React/Next.js でつくる 実践 Web アプリケーション開発』，技術評論社，2022．
    • 2.6 TypeScript の開発時設定
  6. 株式会社オープントーン，佐藤大輔，伊東直喜，上野啓二，『実装で学ぶフルスタック Web 開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン』，翔泳社，2023．
    • 3-2 フロントエンド開発の準備