Roa run dev

ReactJS-Viteでプロジェクト作成【環境構築】

●目次

    高速な開発体験を実現するViteと、UI構築に最適なReactを使って、開発の第一歩を踏み出しましょう!
    このガイドでは、Macのターミナルを使って、React + Vite の開発環境を1から構築する手順を丁寧に解説します。

    【1】ターミナルからプロジェクトを作成

    【1-1】ターミナルを起動

    Finderの「アプリケーション」→「ユーティリティ」→「ターミナル」で開けます。

    【1-2】デスクトップにプロジェクト用フォルダを作成

    ターミナル
    cd ~/Desktop
    mkdir my-app
    cd my-app

    ここまでで、my-app/ という作業フォルダができました。

    【2】ViteでReactプロジェクトを作成

    【2-1】Viteを使ってReactプロジェクト生成

    ターミナル
    npm create vite@latest
    • 対話形式でインストールを進める
      • プロジェクト名を入力(例:front)
      • フレームワークを選択:「React」
      • バリアントを選択:「JavaScript」または「TypeScript」
    ターミナル
    npm create vite@latest
    
    >>>>
    (好みに合わせて選択)
    ✔ Project name: …             (例)front
    ✔ Select a framework: ›     (例)React
    ✔ Select a variant: ›            (例)JavaScript 

    ↓↓↓↓↓↓↓

    ディレクトリ構成
    my-app/
    └── front/                                 # Vite + React プロジェクト
        ├── public/                            # 静的ファイル(faviconなど)
        │   └── vite.svg
        │
        ├── src/                                 # ソースコード(コンポーネントなど)
        │   ├── assets/                     # 画像・スタイルなどのアセット
        │   │   └── react.svg
        │   ├── App.css                     # アプリ全体のスタイル
        │   ├── App.jsx                      # メインコンポーネント
        │   ├── main.jsx                     # エントリーポイント
        │   └── index.css                   # ベーススタイル
        │
        ├── .gitignore
        ├── index.html                        # エントリーHTML(publicではなくルートにある)
        ├── package.json                   # プロジェクト依存管理ファイル
        ├── package-lock.json           
        ├── README.md
        └── vite.config.js                   # Vite設定ファイル
    

    【3】依存パッケージをインストール

    プロジェクトフォルダに移動し、必要なパッケージをインストール。

    ターミナル
    cd front
    
    npm install
    ディレクトリ構成
    my-app/
    └── front/
        ├── node_modules/ ←⭐️ 新しく追加される!
        │   ├── react/
        │   ├── react-dom/
        │   ├── vite/
        │   └── ...(その他の依存パッケージ多数)
        ├── public/
        │   └── vite.svg
        ├── src/
        │   ├── assets/
        │   │   └── react.svg
        │   ├── App.css
        │   ├── App.jsx
        │   ├── index.css
        │   └── main.jsx
        ├── .gitignore
        ├── index.html
        ├── package.json
        ├── package-lock.json ←⭐️ 自動生成 or 更新される
        ├── vite.config.js
        └── README.md
    

    【4】Vite開発サーバーの起動

    【4-1】VSCodeでプロジェクトを起動

    ルートプロジェクトに戻って

    ターミナル
    # my-appに戻る
    cd ..
    
    # VsCodeを開く
    code .

    【4-2】開発サーバーを起動

    ターミナル
    npm run dev
    
    >>>
    
    ➜  Local: http://localhost:5173/

    【4-3】ローカルサーバーで確認

    コマンドが完了すると、ローカル開発サーバー(通常はhttp://localhost:5173)が表示されます。
    ブラウザでアクセスして動作を確認できます。

    よくある初期カスタマイズ

    ディレクトリ構成
    my-app/
    └── front/
        ├── node_modules/
        ├── public/
        │   └── favicon.svg  (削除予定)
        ├── src/
        │   ├── assets/
        │   ├── App.css      (削除予定)
        │   ├── App.jsx
        │   ├── index.css
        │   └── main.jsx
        ├── .gitignore
        ├── index.html
        ├── package.json
        ├── README.md
        ├── vite.config.js
        └── yarn.lock または package-lock.json

    まとめ

    補足:package-lock.json って何?

    • インストールされたすべての依存ライブラリの正確なバージョン情報が保存されます。
    • チーム開発や再現性を保つために重要なファイルです。
    • Gitでは管理対象にしてOK!
    ステップ内容
    【1】作業ディレクトリ(my-app)の作成
    【2】ViteでReactプロジェクト(front)を生成
    【3】npm install で依存ライブラリをインストール
    【4】VSCodeで開発、npm run dev で開発サーバー起動

    この流れを理解することで、今後のReact開発の基盤がしっかり整います!
    次のステップとしては、ルーティングの追加などに進むと良いですよ。