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_20.x | sudo -E bash -
$ sudo apt install nodejs
$ node --version
v20.19.0
# v18.x以上であることを確認する。

yarnのインストール

$ ls /usr/local/share/
$ 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/
$ 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
$ ls /etc/apt/sources.list.d/
...（略）...  yarn.list
$ sudo apt update
$ sudo apt install yarn
$ yarn --version
1.22.22

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

frontend$ yarn create next-app frontend --ts --eslint
yarn create v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-next-app@15.2.4" with binaries:
      - create-next-app
✔ Would you like to use Tailwind CSS? … No / *Yes
✔ Would you like your code inside a `src/` directory? … No / *Yes
✔ Would you like to use App Router? (recommended) … No / *Yes
✔ Would you like to use Turbopack for `next dev`? … No / *Yes
✔ Would you like to customize the import alias (`@/*` by default)? … *No / Yes
Creating a new Next.js app in /home/rsl/dev/recsys-full/src/frontend/frontend.

Using yarn.

Initializing project with template: app-tw 


Installing dependencies:
- react
- react-dom
- next

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

yarn install v1.22.22
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 70.77s.
Success! Created frontend at /home/rsl/dev/recsys-full/src/frontend/frontend

Done in 116.44s.
frontend$ mv frontend/* .
frontend$ mv frontend/.* .
frontend$ rmdir frontend/
frontend$ ls -a
.   .gitignore  eslint.config.mjs  next.config.ts  package.json        public  tsconfig.json
..  README.md   next-env.d.ts      node_modules    postcss.config.mjs  src     yarn.lock

package.jsonの確認

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

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

frontend$ yarn dev
yarn run v1.22.22
$ next dev --turbopack
   ▲ Next.js 15.2.4 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://10.0.2.15:3000

 ✓ Starting...
 ✓ Ready in 1238ms

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

VSCodeの起動

frontend$ code .

.gitignoreの設定

frontend/.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# ↓追加
# Vscode
.vscode/
# ↑追加
...（略）...

globals.cssの設定

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": "15.2.4",
    "prettier": "^3.5.3",                      # <-
    "prettier-plugin-tailwindcss": "^0.6.11",  # <-
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
...（略）...

frontend/.prettierrc

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

tsconfig.jsonの設定

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

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": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], // <- 確認
  "exclude": ["node_modules"]
}

参考

  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 フロントエンド開発の準備