Web系の場合

Web開発（JavaScript、Python、PHPなど）の場合のガイドです。

この領域の特徴

• フロントエンドとバックエンドがある
• 技術の変化が速い
• アジャイル開発が多い
• ユーザー体験（UX）が重視される

よくある1日の流れ

flowchart LR
    A[10:00<br>朝会] --> B[10:30<br>開発作業]
    B --> C[12:00<br>昼休み]
    C --> D[13:00<br>開発作業]
    D --> E[15:00<br>レビュー・MTG]
    E --> F[17:00<br>デプロイ確認]
    F --> G[19:00<br>退勤]

タイムスケジュール例（スタートアップ/Web系企業）

ポイント：Web系は「デプロイして本番に出す」サイクルが速いことが特徴です。小さな変更を頻繁にリリースするため、「動く状態を維持する」意識が大切です。

最初の1ヶ月で覚えること

第1週：環境とツールに慣れる

第2週：小さな機能を実装

第3〜4週：開発フローを一通り経験

1ヶ月後の目標状態

flowchart TB
    A[1ヶ月後の目標] --> B[開発環境で自力で作業できる]
    A --> C[PRを作成してレビューを受けられる]
    A --> D[開発者ツールで問題を調査できる]
    A --> E[APIの呼び出しが理解できる]

ブラウザ開発者ツールの使い方

Web開発で必須のスキルです。Chrome DevToolsを例に説明します。

開き方

• Windows：F12 または Ctrl + Shift + I
• Mac：Cmd + Option + I
• 右クリック → 「検証」でも開ける

主要なタブと用途

よく使う操作

Elementsタブ

1. 調べたい要素を右クリック →「検証」
2. Stylesパネルでスタイルを確認
3. 値を変更して、リアルタイムで結果を確認

Consoleタブ

// エラーが赤字で表示される
Uncaught TypeError: Cannot read property 'name' of undefined

// console.logの出力を確認
console.log(userData);  // オブジェクトの中身を確認

Networkタブ

1. Networkタブを開いてからページを更新
2. 確認したいリクエストをクリック
3. Headers：リクエストヘッダーを確認
4. Response：APIの戻り値を確認
5. 赤字のリクエストはエラー（ステータスコードを確認）

ポイント：「画面が表示されない」「データが取得できない」問題の多くは、Networkタブでリクエストの成否とレスポンス内容を見れば原因が分かります。

REST APIのテスト方法

APIの動作確認はWeb開発で頻繁に行います。

Postman/Insomniaの使い方

APIをブラウザから呼び出す前に、ツールで動作確認しておくと効率的です。

基本的な流れ

flowchart LR
    A[URLとメソッドを入力] --> B[リクエストボディを設定]
    B --> C[送信]
    C --> D[レスポンスを確認]

例：ユーザー情報を取得するAPI

メソッド：GET
URL：https://api.example.com/users/123
ヘッダー：
  Authorization: Bearer xxxxx
  Content-Type: application/json

例：ユーザーを登録するAPI

メソッド：POST
URL：https://api.example.com/users
ヘッダー：
  Authorization: Bearer xxxxx
  Content-Type: application/json
ボディ：
{
  "name": "山田太郎",
  "email": "yamada@example.com"
}

curlコマンドでの確認

ターミナルからAPIを呼び出すこともできます。

# GETリクエスト
curl https://api.example.com/users/123

# POSTリクエスト（JSON）
curl -X POST https://api.example.com/users \
  -H "Content-Type: application/json" \
  -d '{"name": "山田太郎", "email": "yamada@example.com"}'

# レスポンスを見やすく整形
curl https://api.example.com/users/123 | jq

よくあるHTTPステータスコード

フロントエンドとバックエンドの連携

Web開発では「データの流れ」を理解することが重要です。

sequenceDiagram
    participant User as ユーザー
    participant Frontend as フロントエンド
    participant Backend as バックエンド
    participant DB as データベース

    User->>Frontend: ボタンをクリック
    Frontend->>Backend: APIリクエスト（fetch/axios）
    Backend->>DB: クエリ実行
    DB-->>Backend: 結果を返す
    Backend-->>Frontend: JSONレスポンス
    Frontend-->>User: 画面に表示

トラブルシューティングのポイント

この経験で身につくスキル

技術スキル

ビジネススキル

目指せる人材像

flowchart TB
    A[Web系からのキャリア] --> B[フロントエンドエンジニア]
    A --> C[バックエンドエンジニア]
    A --> D[フルスタックエンジニア]
    A --> E[テックリード/CTO]

    B --> B1[UI/UXに強いエンジニア]
    C --> C1[API・インフラに強いエンジニア]
    D --> D1[フロント・バック両方できる]
    E --> E1[技術戦略を決める立場]

Web系は「自分で作れる」が強み：個人でもサービスを作れるスキルが身につきます。副業やスタートアップへの参画など、キャリアの選択肢が広がります。

成長を感じられるポイント

3ヶ月後

• [ ] 開発者ツールでデバッグできる
• [ ] Git操作が自然にできる
• [ ] 簡単な機能を一人で実装できる

6ヶ月後

• [ ] フロントエンドとバックエンドの連携を理解できる
• [ ] PR作成からマージまでスムーズに進められる
• [ ] 「この技術ならあの実装ができる」と発想できる

1年後

• [ ] 機能設計から実装まで一人で担当できる
• [ ] 新しいフレームワークを自力で学べる
• [ ] 技術選定の議論に参加できる

成長のサイン：「以前は動かなくて困っていたエラーが、今は自分で解決できる」「新しい技術を見ても、学び方が分かる」と感じたら成長の証です。

本編で特に重要な章

追加で学ぶと良いこと

優先度：高

優先度：中

Web系特有の注意点

フロントエンドとバックエンド

• 両方の知識があると強い
• APIの設計と利用を理解する
• データの流れを把握する

技術の変化が速い

• 基礎をしっかり学ぶ（基礎は変わりにくい）
• 流行を追いかけすぎない
• 必要なときに学ぶ姿勢

開発サイクルが速い

• 短期間でリリース
• フィードバックを素早く反映
• 完璧より動くものを優先

よくある悩みと対処法

「覚えることが多すぎる」

• 全部覚えようとしない
• 今必要なことから学ぶ
• 基礎を固める

「フレームワークの使い方が分からない」

• 公式ドキュメントを読む
• チュートリアルをやってみる
• 動くサンプルを参考にする

「デザインの知識がない」

• 最初からデザインスキルは不要
• 既存のUIコンポーネントを活用
• 必要に応じて学ぶ

成長のためのアドバイス

基礎を固める

• JavaScript（またはメイン言語）の基礎
• HTTP/WebAPIの理解
• HTMLとCSSの基礎

実際に動かして学ぶ

• サンプルを動かす
• 小さなアプリを作ってみる
• エラーを経験して学ぶ

アウトプットする

• 個人プロジェクトを作る
• 学んだことをブログに書く
• GitHubにコードを公開