自作ウェブサイト構築：初心者向けステップバイステップガイド

ウェブサイトの作成は、最初は大変に感じるかもしれません。特に、真っ白なHTMLファイルを見つめ、「これがどうやってインターネット上のウェブサイトになるんだろう？」と思っている初心者の方にとっては。この記事では、ウェブサイト構築の全工程を丁寧に解説し、簡単なオリジナルウェブサイトを実際に作成しながら、公開まで導きます。

ウェブサイト構築のイメージ

ウェブサイトのアイデアから始める

今回は、特定地域の今日の天気を表示するシンプルな天気アプリを構築します。以下の機能を実装します。

都市名検索: ユーザーが都市名を入力し、天気情報を取得
天気情報の表示: 気温、天気の状態、風速
エラーハンドリング: 都市名が存在しない場合など、適切なエラーメッセージを表示

基本機能を備えたシンプルなウェブサイトなので、比較的簡単に構築できるでしょう。

プロジェクトのセットアップ

まず、プロジェクトをセットアップしましょう。今回は、HTML、CSS、JavaScriptを使ってウェブサイトを構築します。以下のファイルを作成してください。

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

天気データを取得するために、Open-Meteoというオープンソースの天気APIを使用します。このAPIは無料で、APIキーも必要ありません。気温、風速、天気の状態を提供してくれます。

HTMLでウェブサイトの基本レイアウトを作成

ウェブサイトの基本的なレイアウトをHTMLで作成します。

<div class="container">
  <h1>天気予報</h1>
  <div class="searchContainer">
    <input
      class="inputField"
      id="cityField"
      placeholder="都市名を入力..."
      type="text"
    />
    <button id="searchBtn">検索</button>
  </div>
  <div id="weatherContainer">
    <h2 id="cityName"></h2>
    <p id="temperature"></p>
    <p id="condition"></p>
    <p id="windSpeed"></p>
  </div>
  <p id="errorMessage"></p>
</div>
<script src="script.js"></script>

検索コンテナ: 都市名を入力するフィールドと検索ボタンを配置
天気情報/エラーメッセージコンテナ: 検索結果もしくはエラーメッセージを表示

CSSでウェブサイトをスタイリング

次に、CSSでウェブサイトをスタイリングしましょう。簡単なスタイルを適用して、見やすくします。

.container {
  max-width: 400px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: auto;
}

.searchContainer {
  margin: 20px 0;
}

.inputField {
  padding: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.searchBtn {
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

#weatherContainer {
  display: none; /* データが利用可能になるまで非表示 */
}

#errorMessage {
  color: red;
  font-weight: bold;
}

JavaScriptでウェブサイトに機能を追加

JavaScriptを使って、ウェブサイトに天気情報を取得する機能を追加します。以下のAPIエンドポイントを呼び出します。

/v1/search: 都市名から経度と緯度を取得
/v1/forecast: 天気情報を取得

まず、検索ボタンにonclickハンドラーを追加します。

document.getElementById("searchBtn").addEventListener("click", () => {
  const city = document.getElementById("cityField").value.trim();
  if (city) {
    getCoordinates(city);
  } else {
    showError("都市名を入力してください");
  }
});

検索ボタンをクリックすると、上記の2つのAPIが順に呼び出されます。最初のAPIをgetCoordinatesメソッドで呼び出しましょう。この処理により、天気予報アプリの基本的な検索機能が実装されます。

async function getCoordinates(city) {
  showError("");
  try {
    const response = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
    );
    if (!response.ok) {
      throw new Error("都市が見つかりません");
    }
    const data = await response.json();
    if (!data.results || data.results.length === 0) {
      throw new Error("都市が見つかりません");
    }
    const { latitude, longitude, name, country } = data.results[0];
    getWeather(latitude, longitude, name, country);
  } catch (error) {
    showError(error.message);
  }
}

ここでは、最初のAPIを呼び出して座標を取得し、レスポンスが成功したかどうかを確認します。成功しなかった場合は、エラーをスローしてDOMに表示します。座標が正常に取得されたら、その座標の天気データを取得します。

async function getWeather(latitude, longitude, city, country) {
  try {
    const response = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
    );
    if (!response.ok) {
      throw new Error("天気データが利用できません");
    }
    const data = await response.json();
    displayWeather(data.current_weather, city, country);
  } catch (error) {
    showError(error.message);
  }
}

ここでも同様に、エラーを処理し、displayWeatherメソッド内で天気データを画面にレンダリングします。リアルタイム天気情報が表示されるようになります。

function displayWeather(weather, city, country) {
  const weatherContainer = document.getElementById("weatherContainer");
  const cityHeader = document.getElementById("cityName");
  const temp = document.getElementById("temperature");
  const condition = document.getElementById("condition");
  const windSpeed = document.getElementById("windSpeed");
  const weatherCondition =
    weatherDescriptions[weather.weathercode] || "Unknown Condition";
  weatherContainer.style.display = "block";
  cityHeader.textContent = `${city}, ${country}`;
  temp.textContent = `気温: ${weather.temperature} °C`;
  condition.textContent = `状態: ${weatherCondition}`;
  windSpeed.textContent = `風速: ${weather.windspeed} km/h`;
}

次に、showErrorメソッドにはエラー処理ロジックが含まれています。画面にエラーを表示します。

function showError(message) {
  const weatherContainer = document.getElementById("weatherContainer");
  weatherContainer.style.display = "none";
  const errorPara = document.getElementById("errorMessage");
  errorPara.textContent = message;
}

これで、ウェブサイト開発が完了しました。次はコードをテストしましょう。

コードのテスト

機能開発が終わったら必ずテストを行いましょう。テストケースをリスト化し、ウェブサイトがそれぞれのケースで期待通りに動作するか確認します。

正常な都市名でのテスト: 都市名を入力し、検索をクリック。天気情報が表示されるか確認。
エラーハンドリングのテスト: 無効な都市名を入力。エラーメッセージが表示されるか確認。

バージョン管理システムにコードをプッシュ

バージョン管理は重要です。コードの変更を組織的に追跡できます。主な利点は以下のとおりです。

コードが壊れた場合、以前のバージョンに戻すことができます。
プロジェクトがGitHubに安全に保存されるため、進捗が失われることはありません。
ブランチを使用すると、互いに邪魔したり、メインコードを邪魔したりすることなく、同時に異なる機能を操作できます。これは、複数の人がプロジェクトに取り組んでいる場合に特に役立ちます。

GitHubにコードをプッシュしましょう。

git add .
git commit -m "API呼び出しで天気情報を追加"
git push origin main

デプロイとホスティング

デプロイとホスティング の意味を理解しましょう。簡単に言うと、デプロイはウェブサイトをインターネット上に公開することであり、ホスティングサービスはウェブサイトを保存して、オンラインでアクセスできるようにすることです。

Netlifyを使用して、GitHubリポジトリから直接ウェブサイトをデプロイします。

netlify.comにアクセスし、メールまたはGitHubアカウントでサインアップします。
ログインしたら、「新しいサイトを追加」→「既存のプロジェクトをインポート」をクリックします。
GitHubアカウントを接続し、NetlifyがGitHubリポジトリにアクセスすることを承認します。
リポジトリを選択し、デプロイ設定を入力します。フレームワークを使用していないため、ビルドコマンドを指定する必要はありません。

数分でサイトがデプロイされ、URLが発行されます。

まとめ

これでウェブサイトがインターネット上で公開されました。おめでとうございます！ローカルマシンでコードを作成し、簡単なウェブページをゼロから作成し、インターネット上で他の人が使えるようになりました。

今後のウェブサイト開発では、以下の点に注意しましょう。

ウェブサイト開発は終わりではありません。ウェブサイトは成長し、新しいデザインや機能を追加し、セキュリティ対策を行う必要があります。
チームでの開発では、デザイナー、バックエンドエンジニア、プロダクトマネージャーなど、さまざまな役割の人々と協力します。
ウェブアクセシビリティのベストプラクティスに従い、さまざまな障害を持つ人々にとっても使いやすいウェブサイトを目指しましょう。

ウェブサイトをゼロから構築し、インターネットに公開する過程は、多くの点でやりがいのあるものです。このプロセスを通じて、貴重なウェブ開発スキルを習得し、バージョン管理を使いこなせるようになります。そして、あなたが作成したものをコミュニティと共有することは非常に満足のいくものです。 自作ウェブサイトの公開、おめでとうございます！