Web開発の基礎：フロントエンドからバックエンドまで

Web開発とは？

Web開発は、WebサイトやWebアプリケーションを作成する技術です。

Web開発の種類

フロントエンド開発: ユーザーが見る部分
バックエンド開発: サーバー側の処理
フルスタック開発: 両方の開発

Web開発の流れ

1要件定義・設計
2フロントエンド開発
3バックエンド開発
4テスト・デバッグ
5デプロイ・運用

フロントエンド開発

ユーザーが直接触れる部分の開発について説明します。

HTMLの基礎

HTMLとは

HTML（HyperText Markup Language）は、Webページの構造を定義するマークアップ言語です。

基本的なHTML要素

html

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    <h1>見出し</h1>
    <p>段落</p>
    <a href="https://example.com">リンク</a>
    <img src="image.jpg" alt="画像">
</body>
</html>

重要な要素

見出し（h1-h6）
段落（p）
リンク（a）
画像（img）
リスト（ul、ol、li）

CSSの基礎

CSSとは

CSS（Cascading Style Sheets）は、Webページの見た目を制御するスタイルシート言語です。

基本的なCSS

css

/* セレクタ */
h1 {
    color: blue;
    font-size: 24px;
    text-align: center;
}
/* クラスセレクタ */
.highlight {
    background-color: yellow;
}/* IDセレクタ */
#header {
    background-color: #333;
    color: white;
}

重要な概念

セレクタ
プロパティと値
クラスとID
ボックスモデル

JavaScriptの基礎

JavaScriptとは

JavaScriptは、Webページに動的な機能を追加するプログラミング言語です。

基本的なJavaScript

javascript

// 変数の宣言
let name = "田中太郎";
const age = 25;
// 関数の定義
function greet(name) {
    return "こんにちは、" + name + "さん";
}// イベント処理
document.getElementById("button").addEventListener("click", function() {
    alert("ボタンがクリックされました");
});

重要な概念

変数とデータ型
関数
イベント処理
DOM操作

フロントエンドフレームワーク

主要なフレームワーク

React: Facebookが開発
Vue.js: 軽量で学習しやすい
Angular: Googleが開発
Svelte: コンパイル時最適化

フレームワークのメリット

開発効率の向上
再利用可能なコンポーネント
状態管理の簡素化
豊富なエコシステム

バックエンド開発

サーバー側の処理を担当するバックエンド開発について説明します。

サーバーサイド言語

主要な言語

Node.js: JavaScriptでサーバー開発
Python: Django、Flask
PHP: WordPress、Laravel
Java: Spring Boot
C#: ASP.NET

言語選択のポイント

学習コスト
パフォーマンス
エコシステム
チームのスキル

データベース

データベースの種類

リレーショナルDB: MySQL、PostgreSQL
NoSQL: MongoDB、Redis
クラウドDB: Firebase、AWS RDS

データベース設計

テーブル設計
正規化
インデックス
リレーション

API開発

APIとは

API（Application Programming Interface）は、異なるシステム間でデータをやり取りするためのインターフェースです。

RESTful API

javascript

// GET /api/users
app.get('/api/users', (req, res) => {
    res.json(users);
});// POST /api/users
app.post('/api/users', (req, res) => {
    const newUser = req.body;
    users.push(newUser);
    res.json(newUser);
});

API設計のポイント

RESTfulな設計
HTTPステータスコード
エラーハンドリング
認証・認可