WEB DEVELOPMENT WORKSHOP

アプリ開発編

プロジェクト構成からデプロイまで

package.json npm Vite React Deploy

→ キーで次へ進む

この編の全体像

ゴール: モダンなWeb開発のプロジェクト構成を理解し、ゼロからデプロイまで一人で完走できるようになる

FOUNDATION

開発環境の理解

package.json / npm / yarn の役割と使い方
→ なぜパッケージ管理が必要か？ライブラリを手動管理する地獄から脱出する

STRUCTURE

プロジェクト構成

src/ dist/ public/ node_modules/ の役割
→ 各フォルダが何をしているか理解すれば、迷わず開発できる

BUILD

ビルドと開発

Vite / 開発サーバー / HMR / フレームワーク選び
→ なぜビルドが必要か？ブラウザが理解できる形に変換＆最適化する

PRACTICE

実践: 作成〜デプロイ

プロジェクト作成 → Git連携 → Vercel/Netlifyでデプロイ
→ 実際に手を動かして、ゼロから公開までの流れを体験する

SECURITY

安全な運用: 環境変数

.env ファイルでAPIキーや秘密情報を管理。.gitignore で漏洩防止
→ 秘密情報をGitHubに公開してしまう事故を防ぐ。これを知らないと本当に危険

モダンWeb開発の全体像

ファイルを書いてからユーザーに届くまで

Step 1

HTML/CSS/JS

コードを書く

→

Step 2

フレームワーク

React / Vue / Svelte

→

Step 3

ビルド

Vite / Webpack

→

Step 4

デプロイ

Vercel / GitHub Pages

昔はHTMLファイルをサーバーに置くだけだった。
今はnpmでパッケージ管理、Viteでビルド、Vercelで自動デプロイが主流。

package.json とは

プロジェクトの「設計図」兼「レシピ」

package.json

name / version

プロジェクト名とバージョン

scripts

よく使うコマンドのショートカット。npm run dev で起動

dependencies

本番で使うライブラリ（React等）

devDependencies

開発時だけ使うツール（Vite等）

パッケージマネージャー

npm / yarn / pnpm — ライブラリを管理するツール

npm

Node.js標準。最も普及。初心者はまずこれ。

yarn

Facebookが開発。npmの高速版として登場。

pnpm

ディスク効率が最高。monorepo向き。

Terminal — npm を使ってみよう

プロジェクト構成

よくあるフォルダ構造を理解しよう

src/

ソースコード

自分が書くコード。コンポーネント、スタイル、ロジックなど。ここが主戦場。

public/

静的ファイル

画像やfavicon。ビルド時にそのままコピーされる。加工されない。

dist/

ビルド出力

npm run build で生成。本番用の最適化済みファイル。

node_modules/

依存パッケージ

npm install で入る。数万ファイル。Gitには入れない。

ディレクトリ構成
my-app/
├── src/ ← 自分のコード
├── public/ ← 静的ファイル
├── dist/ ← ビルド出力
├── node_modules/ ← 依存（Git管理外）
├── package.json
├── vite.config.js
└── .gitignore

ビルドツール — Vite / Webpack

ソースコードを本番用に変換するツール

ビルドとは？

JSXやTypeScriptなどブラウザが理解できないコードを、
普通のHTML/CSS/JSに変換＆最適化すること。

Vite（推奨）

爆速。開発サーバーの起動が一瞬。2024年以降のデファクトスタンダード。

Webpack

老舗。設定が複雑だが何でもできる。既存プロジェクトでよく見る。

Terminal — npm run build

開発サーバー & HMR

コードを書きながらリアルタイムで確認

Terminal — dev server

開発サーバーとは

ローカルでWebアプリを動かす仮のサーバー。localhost:5173 でアクセス。

HMR

Hot Module Replacement。コードを保存すると、ページ全体をリロードせずに変更箇所だけ即座に反映される。

保存するだけで画面が変わる。
開発効率が劇的に上がる。

フレームワーク選び

目的と好みに合わせて選ぼう

⚛

React

  • Meta（Facebook）製
  • 最大のエコシステム
  • 求人数No.1
  • JSXで書く
  • 学習コストは中程度

初心者に一番おすすめ

🟢

Vue

  • 直感的なテンプレート構文
  • 学習コストが低い
  • 日本語ドキュメント充実
  • SFC（単一ファイルコンポーネント）
  • 段階的に導入可能

日本語の情報が豊富

🔥

Svelte

  • コンパイラ方式で超軽量
  • 仮想DOMなし
  • 記述量が少ない
  • SvelteKit でフルスタック
  • 急成長中

パフォーマンス重視

実践: プロジェクト作成

Vite + React でプロジェクトをゼロから作る

Terminal — プロジェクト作成

Git連携

プロジェクトをGitで管理してGitHubにpush

Terminal — Git + GitHub

.gitignore

node_modules/ と dist/ はGit管理から除外。これ超大事。

初回push

GitHub上にリポジトリを作って、ローカルと紐付けてpush。

Vite は npm create 時に
.gitignore を自動生成してくれる

デプロイ方法の比較

アプリを世界に公開する方法

GitHub Pages

  • 無料（パブリックリポジトリ）
  • 静的サイト専用
  • GitHub Actionsと連携
  • カスタムドメイン対応

静的サイト向き

Vercel

  • pushするだけで自動デプロイ
  • プレビューURL自動生成
  • サーバーレス関数対応
  • Next.jsとの相性抜群

一番おすすめ

Netlify

  • ドラッグ&ドロップでデプロイ
  • フォーム処理が標準搭載
  • サーバーレス関数対応
  • CMSとの連携が簡単

手軽さNo.1

実践: ビルド & デプロイ

Viteでビルドして公開するまでの流れ

Terminal — Build & Deploy

環境変数 — .env ファイル

APIキーなどの秘密情報を安全に管理する

.env ファイルの例
# .env（Git管理しない！）
VITE_API_KEY=sk-abc123xyz789
VITE_API_URL=https://api.example.com
DATABASE_URL=postgres://user:pass@db:5432
# .gitignore に追加
.env
.env.local
.env.*.local

絶対にやってはいけないこと

APIキーやパスワードをコードに直書き → GitHubに公開 → 悪用される。実際によくある事故。

正しい方法

.env ファイルに書いて .gitignore で除外。Viteでは VITE_ プレフィックスで参照可能。

コード内での使い方

// Viteの場合
const apiKey = import.meta.env.VITE_API_KEY

まとめ

今日学んだことの振り返り

プロジェクト管理

  • package.json = プロジェクトの設計図
  • npm install で依存関係を一発導入
  • src/ にコード、dist/ がビルド出力

開発フロー

  • npm run dev で開発サーバー起動
  • HMRで保存 → 即反映
  • npm run build で本番用にビルド

デプロイ & セキュリティ

  • Vercel / Netlify で自動デプロイ
  • .env に秘密情報を隔離
  • .gitignore で漏洩防止

まずは npm create vite@latest で
プロジェクトを作ってみよう！

Appendix: コマンドリファレンス

コマンド 説明
npm init -y package.jsonを初期化（プロジェクト作成）
npm install 依存パッケージをインストール
npm install -D 開発用の依存パッケージをインストール
npm run dev 開発サーバーを起動
npm run build 本番用にプロジェクトをビルド
npm create vite@latest Viteテンプレートから新規プロジェクトを作成
npm list --depth=0 インストール済みパッケージの一覧を表示
npx vercel --prod Vercelに本番デプロイ（npxで直接実行）
git init 新しいGitリポジトリを初期化
git add 変更をステージングエリアに追加
git commit -m "msg" ステージングした変更を履歴に記録
git remote add origin URL リモートリポジトリを紐付け
git push -u origin main 初回プッシュ（上流ブランチを設定）
git push origin main ローカルの変更をGitHubにプッシュ
1 / 16
← → キーで移動