はじめに
これまで組み込みやバックエンド開発を主に担当してきましたが、Web業界へ転職したことをきっかけに、Webアプリについて改めて学び直し、使用する技術や構成を整理・まとめています。
※ざっくり書いてChatGPTに補足させてそれっぽくしてます。使用している技術、記事の内容はチェックしているので、技術について全体像を何となく掴みたい人向けです。
Web開発では何を作るのか？
Webアプリ開発では、主に以下の3つの層で構成されることが多いです。
[ フロントエンド ] ← ユーザーが操作する画面（HTML/CSS/JS）
↓↑ HTTP通信
[ バックエンド ] ← ロジック・API（Node.js, Python, Ruby, Java など）
↓↑ DBアクセス
[ データベース ] ← データの保存（MySQL, PostgreSQL, MongoDB など）
フロントエンド開発
ユーザーが直接操作する、見える部分の開発を担当します。
主な技術
- HTML：ページの構造を定義
- CSS：スタイルやデザインを調整
- JavaScript：動きや動的な処理を実装
フレームワーク／ライブラリ
- React / Vue / Angular：SPA（Single Page Application）の構築に使用
- Next.js / Nuxt：サーバーサイドレンダリングやルーティング対応
重要な概念
- SPA（Single Page Application）：ページを遷移せずに動的に切り替えるアプリ形式
-
状態管理：
useState（React）や Redux などでUIの状態を制御
バックエンド開発
アプリケーションのロジック、データ処理、認証などを担います。
主な言語／フレームワーク
- Node.js + Express
- Python + Django / Flask
- Ruby on Rails
- Java + Spring Boot
- PHP + Laravel
主な役割
- APIの提供（REST / GraphQL）
- データベースとのやりとり
- 認証・セッション管理
- ファイルアップロードや外部サービスとの連携
データベース
データの永続化を行う層です。ユーザーデータや投稿情報などを保存します。
主な種類と例
- リレーショナルデータベース：MySQL / PostgreSQL / SQLite
- NoSQLデータベース：MongoDB / Firebase Firestore
開発で使用する主なツール
- VS Code：コードエディタ
- Git / GitHub：バージョン管理・チーム開発
- Docker：開発環境の統一、仮想化
デプロイ・運用
- Vercel / Netlify：フロントエンドのホスティング
- Render / Railway / Heroku：バックエンドやDBのホスティング
- AWS / GCP / Azure：スケールが必要な商用アプリ向けクラウドサービス
認証・セキュリティ
セキュリティやログイン機能に関わる技術です。
認証方式
- セッションベース認証
- JWT（JSON Web Token）
- OAuth（GoogleやGitHub連携ログインなど）
セキュリティ対策
- CORS：クロスオリジンリクエスト制御
- CSRF / XSS：不正リクエストやスクリプト攻撃への対策
- HTTPS：通信の暗号化
モダンWeb技術の特徴
- フロントエンドとバックエンドの分離型構成が主流
- フロントエンドはSPA、バックエンドはAPIサーバー
- **CI/CD（継続的インテグレーション・デリバリー）**や自動テスト、クラウドデプロイが一般的