【🔰初心者向け】SNS型webアプリを作成しよう　第1回_ファイル作成と環境構築

こんにちは。
今回はプログラミング初心者である私が、SNS型webアプリを作成してリリースするまでの手順について、シリーズで解説していこうと思います。なるべくコストを抑えた方法を目指します。
まずは第1回として、ファイルの作成と環境構築をしていきます。

Next.jsというフロントエンドフレームワークを使ってwebアプリを作成します。

Next.js プロジェクトの作成
TypeScript & ESLint 設定、Tailwind CSS の導入
拡張機能のインストール

Next.js プロジェクトの作成

まずはパソコンで開発環境を開きます。今回はVScodeを使用します。
ターミナルで以下のコマンドを実行します。
ターミナルはVScodeを開いて右上から２個目のボタンをクリックすると出てきます。

npx create-next-app@latest my-app(好きなファイル名)

TypeScript & ESLint 設定、Tailwind CSS の導入

ターミナルに先ほどのコマンドを実行すると、次のように表示されます。
選択肢が出てくるので、青マーカーの方を選択して下さい。

Need to install the following packages:
create-next-app@15.2.3
Ok to proceed? (y) y　yを選択

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ 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 /Users/shunto/my-hitorigoto-app.

Using npm.

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


added 316 packages, and audited 317 packages in 6m

131 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created my-app(先ほど決めたファイル名)

インストールが完了したら、ターミナルに以下のコマンドを入力しプロジェクトディレクトリに移動。

cd my-app(先ほど決めたファイル名)

開発サーバーを起動して、動作確認をします。同じくターミナルに入力します。

npm run dev

すると以下のように表示されます。

> next dev --turbopack

   ▲ Next.js 15.2.3 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://192.168.1.63:3000

 ✓ Starting...
 ✓ Ready in 2.1s
 ○ Compiling / ...
 ✓ Compiled / in 2.3s

これで http://localhost:3000 にアクセスし、Next.js の初期画面が表示されることを確認してください。

拡張機能のインストール

次に、以下のVSCode拡張機能をインストールします。
VScodeで左に表示されているアイコンのうち、「拡張機能」を選択して下さい。そして、以下の拡張機能をインストールします。

ESLint
Prettier – Code formatter
GitLens

これらの拡張機能は、コードを読みやすくしてくれるので便利です。

これで、

Next.js プロジェクトの作成
TypeScript & ESLint 設定、Tailwind CSS の導入
拡張機能のインストール

が完了しました。

次回はユーザー登録・ログイン機能を実装していきましょう！