HTML/CSS/JavaScript × Copilot で作る「就活進捗管理アプリ」

そこで今回は、Copilot に相談しながら、HTML/CSS/JavaScript だけで動く就活進捗管理アプリを作ってみました。
フレームワークなし、サーバーなし、index.html 1枚で完結します。

🎯 アプリの特徴

• 企業名・ステータス・締切日・メモを管理
• ステータスはプルダウンで変更
• メモはその場で編集可能
• 企業名クリックでモーダル表示
• LocalStorage でデータ保持（ページを閉じても残る）
• スマホでも動く
• デザインはブルーのグラデーション＋ガラス風UI
  就活の管理がかなり楽になります。

🖼 完成イメージ

• 一覧で企業の進捗が見える
• ステータス変更が即反映
• メモを直接編集
• 企業名クリックで詳細モーダル
• 追加ボタンで企業をどんどん登録
  ブラウザだけで動くので、PC でもスマホでも使えます。

🧱 技術構成
今回使ったのは以下の3つだけです。

• HTML（構造）
• CSS（デザイン）
• JavaScript（動作）
• LocalStorage（データ保存）
  Copilot に相談しながら、UI の改善やコード整理を進めていきました。
  📦 初期データ（5社）

const initialCompanies = [
  {
    name: "中央システム株式会社",
    status: "検討中",
    deadline: "",
    memo: "設立：1980年\n従業員：中規模（非公開）\n平均年収：記載なし\n特徴：独立系SI。金融・生産管理・電子マネーなど幅広い開発。AWSアドバンストティアパートナー。安定性が高い。"
  },
  {
    name: "株式会社GRCS",
    status: "検討中",
    deadline: "",
    memo: "設立：2005年\n従業員：213名（連結）\n平均年収：約692万円\n特徴：GRC・セキュリティ専門。生成AIセキュリティなど先端領域に強い。売上高は5年で約2.3倍の高成長。東証グロース上場。"
  },
  {
    name: "株式会社クリーク・アンド・リバー社",
    status: "検討中",
    deadline: "",
    memo: "設立：1990年\n従業員：単独1,342名／連結2,580名\n平均年収：約476万円\n特徴：クリエイティブ領域大手。映像・ゲーム・Web・広告など幅広い。プライム市場上場。"
  },
  {
    name: "GLナビゲーション株式会社",
    status: "検討中",
    deadline: "",
    memo: "設立：2009年\n従業員：87名\n平均年収：記載なし\n特徴：DXコンサル。Salesforce・AI・データ分析支援。人材育成にも強み。多国籍で成長意欲の高い組織文化。"
  },
  {
    name: "トランスコスモス株式会社",
    status: "検討中",
    deadline: "",
    memo: "設立：1985年\n従業員：71,416名（国内44,439名／海外26,977名）\n平均年収：記載なし\n特徴：国内最大級BPO。コンタクトセンター、EC、デジタルマーケティングなど幅広い。35カ国182拠点でグローバル展開。"
  }
];

💾 LocalStorage でデータを保存する
ブラウザにデータを保存するので、ページを閉じても消えません。

function loadCompanies() {
  const data = localStorage.getItem("companies");
  return data ? JSON.parse(data) : initialCompanies;
}

function saveCompanies() {
  localStorage.setItem("companies", JSON.stringify(companies));
}

🧩 ステータス変更・メモ編集・削除
ステータスは select の変更イベントで更新します。

statusSelect.addEventListener("change", () => {
  companies[index].status = statusSelect.value;
  saveCompanies();
});

メモは textarea の input イベントで即保存。
削除ボタンは配列から削除 → 再描画。

🪟 モーダル表示
企業名をクリックすると詳細が表示されます。

function showModal(company) {
  modalContent.innerHTML = `
    <h3>${company.name}</h3>
    <p><strong>ステータス：</strong> ${company.status}</p>
    <p><strong>締切日：</strong> ${company.deadline || "未設定"}</p>
    <p><strong>メモ：</strong><br>${company.memo.replace(/\n/g, "<br>")}</p>
  `;
  modalOverlay.style.display = "flex";
}

🎨 デザイン（ブルーのグラデーション）
CSS はこんな感じで統一感を出しています。

body {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  color: #fff;
}

ガラス風カードデザインで、視認性と軽さを両立しています。

🤖 Copilot を使って良かったこと
今回の開発では Copilot をかなり活用しました。

• UI の改善案を提案してくれる
• バグの原因をすぐ指摘してくれる
• コードの整理や命名のアドバイス
• デザインの方向性を一緒に考えられる
  特に「追加ボタンが動かない」問題は、Copilot が原因をすぐ教えてくれて助かりました。

📌 まとめ

• HTML1枚で就活管理アプリが作れる
• LocalStorage でデータ保持も簡単
• Copilot を活用すると開発がスムーズ
• スマホでも動くので実用性が高い
  就活の管理に困っている人や、
  「何か Web アプリを作ってみたい」という初心者にもおすすめの題材です。

🏷 推奨タグ
#JavaScript
#HTML
#CSS
#Copilot
#Webアプリ
#LocalStorage
#初心者向け