ミニアプリを作ろう

― HTML/CCSS/JavaScriptを使ったシンプルなWebアプリケーション開発入門

はじめに

これまでの記事では、Webページの構造（HTML）、見た目の設計（CSS）、動作の制御（JavaScript）という三位一体の基本技術を習得し、検索機能やタブUIのような実用的な機能も実装してきました。

今回はそれらの技術を活かして、実際に一つのWebアプリケーションを完成させるプロジェクト編です。

アプリ開発というと難しそうに感じるかもしれませんが、学んできた技術を組み合わせるだけで、小規模でも立派なWebアプリは作れます。今回は、**「ユーザー検索＆表示アプリ」**を例に、実装から動作確認までの流れを丁寧に解説していきます。

作るもの：ユーザー検索アプリ

今回作成するのは以下のような機能を持つ小さなWebアプリです：

  • 外部API（Random User API）からユーザーを複数取得
  • ユーザー情報を一覧で表示（画像・名前・メールアドレス）
  • 検索ボックスから名前でリアルタイム絞り込み
  • 簡単なUI切り替え（タブや表示制御）

このアプリの実装を通じて、HTML/CSS/JSの技術を「一つの作品」にまとめる経験を積みましょう。

プロジェクト構成

まずは、必要なファイルを以下のように準備します：

/mini-app/
├── index.html
├── style.css
└── script.js

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ユーザー検索アプリ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <header>
    <h1>ユーザー検索アプリ</h1>
  </header>

  <main>
    <input type="text" id="searchInput" placeholder="名前で検索" />
    <button id="loadUsers">ユーザー取得</button>
    <ul id="userList"></ul>
  </main>

  <footer>
    <small>&copy; 2025 Sample App</small>
  </footer>

  <script src="script.js" defer></script>
</body>
</html>

CSS（style.css）

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

header, footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
}

main {
  padding: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

#searchInput {
  padding: 0.5rem;
  width: 60%;
  margin-bottom: 1rem;
}

#userList {
  list-style: none;
  padding: 0;
}

#userList li {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #ccc;
}

JavaScript（script.js）

const loadBtn = document.getElementById('loadUsers');
const userList = document.getElementById('userList');
const searchInput = document.getElementById('searchInput');

let allUsers = [];

loadBtn.addEventListener('click', () => {
  fetch('https://randomuser.me/api/?results=20')
    .then(res => res.json())
    .then(data => {
      allUsers = data.results;
      renderUsers(allUsers);
    })
    .catch(err => {
      console.error('データ取得エラー:', err);
    });
});

searchInput.addEventListener('input', () => {
  const keyword = searchInput.value.toLowerCase();
  const filtered = allUsers.filter(user => {
    const name = `${user.name.first} ${user.name.last}`.toLowerCase();
    return name.includes(keyword);
  });
  renderUsers(filtered);
});

function renderUsers(users) {
  userList.innerHTML = '';

  if (users.length === 0) {
    userList.innerHTML = '<li>該当するユーザーが見つかりません。</li>';
    return;
  }

  users.forEach(user => {
    const li = document.createElement('li');
    li.innerHTML = `
      <img src="${user.picture.thumbnail}" alt="写真">
      <span>${user.name.first} ${user.name.last} (${user.email})</span>
    `;
    userList.appendChild(li);
  });
}

実行・確認方法

  1. 作成した3ファイルを同じフォルダに置く
  2. index.html をブラウザで開く
  3. 「ユーザー取得」ボタンを押してリストを表示
  4. 検索ボックスに文字を入力してフィルタ動作を確認

これで、1つの完結したWebアプリケーションが完成しました。外部データ取得、リスト表示、絞り込み、UI制御がすべて一体となって動作していることが確認できます。

まとめ

このミニアプリ開発では、HTML・CSS・JavaScriptの基本を組み合わせて、実際に「動くアプリケーション」を作り上げる経験を積むことができました。

  • HTMLで構造を組み立て
  • CSSでデザインを整え
  • JavaScriptでデータ取得と表示制御を実装

これらの技術が揃えば、簡易的なツールやサービスのプロトタイプを自分の力で作ることが可能になります。

次回からは、いよいよモダンなフレームワーク（React / Vue）を用いた開発に進み、より大規模・効率的な開発手法を学んでいきます。

次回予告

Reactを学ぼう ― コンポーネントベースでUIを組み立てるモダンな開発入門

コメント

タイトルとURLをコピーしました