ウェブサイトをゼロから構築する方法：ステップバイステップガイド

ウェブ開発者の皆さん、こんにちは！

ウェブサイトの構築は、特に真っ白なHTMLファイルを前にして、どこから手をつければいいのか途方に暮れる初心者にとっては、気が遠くなるような作業に感じられるかもしれません。

しかし、心配ご無用！この記事では、シンプルなウェブサイトをゼロから構築し、インターネットに公開するまでの全工程をステップごとに解説します。

1. ウェブサイトのアイデアから始めよう

今回は、今日の天気予報を表示するシンプルな天気アプリを構築します。 このアプリには、以下の機能があります。

• 都市名による検索：ユーザーが都市名を入力すると、天気情報を取得します。
• 天気情報の表示：気温、天気、風速を表示します。
• エラー処理：無効な都市名が入力された場合のエラーメッセージを表示します。

これは基本的な機能を備えたシンプルなウェブサイトであり、比較的簡単に構築できるはずです。

始める前に、前提条件を確認しましょう。 HTML、CSS、JavaScriptの基本を理解していることを前提としています。 Gitの知識があると便利ですが、必須ではありません。この記事の手順に沿って進めることができます。

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

まず、プロジェクトをセットアップします。 簡単にするために、HTML、CSS、JavaScriptのみを使用してウェブサイトを構築します。 次のファイルを作成します。

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

天気APIの利用

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

Gitの初期化

始める前に、システムにGitがインストールされていることを確認してください。 Gitをお持ちでない場合は、Git SCMを参照してMacおよびWindowsへのインストールガイドを入手してください。 Gitに慣れていない場合は、次のガイドを参照して開始してください。

ローカルリポジトリを初期化するには、プロジェクトディレクトリ内で次のコマンドを実行します。

git init

次に、GitHubにアクセスして、プロジェクトと同じ名前の新しいリポジトリを作成します。 プロセスに慣れていない場合は、クイックスタートガイドを参照してください。 リポジトリを作成したら、画面に表示されるコマンドを実行します。

3. ウェブサイトの構築

設計と要件を確認することで、各コンポーネントの開発にどのようにアプローチするかを決定します。 これは要件の少ないシンプルな小さなウェブサイトです。 そのため、ReactやAngularなどのフレームワークを使用せず、シンプルなHTML、CSS、JavaScriptのみを使用します。

まず、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を使用してスタイルを設定します。

.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; /* Hide until data is available to display */
}
#errorMessage {
  color: red;
  font-weight: bold;
}

JavaScriptによる機能追加

HTMLとCSSを使用して、次のような静的ウェブサイトを作成しました。次に、JavaScriptを使用して機能を追加します。 次のエンドポイントを呼び出します。

• /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が順番に呼び出されます。 getCoordinatesメソッドで最初のAPIを呼び出しましょう。

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] || "不明な状態";
  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;
}

4. コードのテスト

機能の開発時には必ず徹底的にテストしてください。 テストを行う1つの方法は、ユーザーがWebサイトと対話する可能性のあるすべての方法を検討することです。 次に、Webサイトが各シナリオまたはテストケースでどのように動作するかを確認します。

まず、有効な都市名を入力した場合にWebサイトが期待どおりに動作するかどうかを確認しましょう。 都市名を入力して検索をクリックすると、次のように天気情報が表示されます。

次に、エラー処理をテストしてみましょう。 入力に意味不明な語句を追加してみましょう。

この入力を使用すると、APIが失敗し、上記のエラーが返され、正しく表示されます。

Webサイトは非常にシンプルなため、テストケースは多くありません。 ただし、実際のWebサイトでは、テストケースのリストを作成し、それぞれのWebサイトに対してテストするのが良い方法です。

このコンテキストでは、都市の検索やエラーの処理などのコア機能が正しく実行されることを確認するために、機能テストを行っています。 このタイプのテストは、アプリケーションが意図したとおりに機能を実行することを確認するため、非常に重要です。

5. コードをバージョン管理にプッシュ

先に進む前に、バージョン管理がなぜ重要なのか疑問に思われるかもしれません。 バージョン管理は、コードの変更を体系的な方法で追跡するのに役立ちます。 メリットを次に示します。

• コードで問題が発生した場合、必要に応じて以前のバージョンに戻すことができます。
• プロジェクトはGitHubに安全に保存されるため、進捗状況が失われることはありません。
• ブランチを使用すると、相互干渉したりメインコードに干渉したりすることなく、異なる機能を同時に操作できます。 これは、複数の人がプロジェクトに取り組んでいる場合に特に役立ちます。
• デプロイメントおよびホスティングプラットフォーム (Netlifyなど) は、GitHubなどのバージョン管理システムとシームレスに連携します。

コードをGithubにプッシュしましょう。 最初にリポジトリを作成したときに表示されるすべてのコマンドを実行したことを確認してください。

次のコマンドを実行します。

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

最初のコマンドは、変更をステージング領域に追加します。 2番目のコマンドは変更をローカルにコミットし、最後のコマンドはそれらをリモートリポジトリにプッシュします。

ここでは、コードを直接masterにプッシュしました。 通常は、別のブランチで機能を操作し、プルリクエスト (またはマージリクエスト) を発行し、その後コードをmaster/mainブランチにマージできます。

コードがGitHubにプッシュされたので、デプロイメントとホスティングに進みます。 ここに自分のコードのgitリポジトリがあります。

6. デプロイメントとホスティング

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

今回は、GitHubリポジトリから直接Webサイトをデプロイできる初心者向けのプラットフォームであるNetlifyを使用します。 これは、HTML、CSS、JavaScriptで構築されたシンプルなWebサイトのデプロイに最適です。 また、Webサイトに無料のURLが付属しています (または、ドメイン名を購入することができます)。

開始するには、まずnetlify.comにアクセスし、メールまたはGitHubアカウントでサインアップします。 ログインすると、ランディングページが表示されます。 「新しいサイトを追加」→「既存のプロジェクトをインポート」をクリックします。

次に、NetlifyがGitHubリポジトリにアクセスすることを承認することにより、GitHubアカウントを接続します。 GitHubリポジトリのリストが表示されます。 リポジトリtest-weather-appまたは名前を付けたものを検索して選択します。

次に、次のページが表示されて構成を入力します。 プロジェクトではフレームワークを使用していないため、ビルドコマンドを指定する必要はありません。 したがって、ほとんどのフィールドを空のままにして、「デプロイ」をクリックします。

Netlifyは数分でサイトをデプロイし、リンクを提供します。 次のリンクにアクセスすると、このサンプルWebサイトを見つけることができます。

https://testweatherapp11.netlify.app

Netlifyでは、カスタムドメインを購入するオプションも提供されます。 したがって、実際に収益を上げるためのWebサイトを構築する場合は、そのオプションを使用できます。

変更を加える場合は、GitHubにプッシュするとNetlifyによって自動的にデプロイされます。

まとめ

このようにして、Webサイトはインターネット上で公開されます。 これだけですべてを完了しました。 ローカルマシンでコードを記述し、シンプルなWebページをゼロから構築しただけで、他の人が使用できるようにインターネット上で公開されています。 なんて素晴らしいことでしょう!

ゼロからWebサイトを構築してインターネットにデプロイする方法を学んだので、覚えておくべき追加事項を次に示します。

• Webサイトの開発はまだ完了していません。 構築を続けると、Webサイトは成長します。 さまざまなデザインを調べて、バグを修正し、フィードバックに基づいて機能を改善します。
• Webサイトが成長するにつれて、Webサイトのパフォーマンス、使用量の増加、セキュリティについても検討し、自分自身とユーザーを攻撃者から保護する必要があります。
• 高度に単純化されたプロセスについて説明しました。 通常、要件の収集、Webサイトのデザインの作成、開発を開始する前の見積もりがあります。
• 設計者、バックエンドエンジニア、製品マネージャー、関係者など、他の人とコラボレーションします。
• 多くの場合、Webサイトは段階的に開発されます。つまり、基本的な機能を備えたWebサイトの基本バージョンが最初にリリースされます (私たちが行ったように)。 次に、機能ごとに、設計から開発、テスト、デプロイメントまですべてのプロセスが実行されます。

さまざまな障害のある人々を含め、すべての人がWebサイトを使用できるようにするにはWebアクセシビリティのベストプラクティスに従ってください。 開発フェーズで従うべき多くのプラクティスがあります。 これらについては、Webアクセシビリティハンドブックここで詳しく説明しています。

結論

Webサイトをゼロから構築してインターネットにリリースする過程は、多くの点でやりがいがあります。 このプロセスを通じて、貴重なWeb開発スキルを習得し、バージョン管理を使用して作業を追跡することが良くなります。 そして、あなたが構築したものをコミュニティと共有するのはとても満足です。

このチュートリアルでは、非常に簡略化されたプロセスについて説明しましたが、実際のプロジェクトには、コラボレーション、パフォーマンスの最適化、セキュリティの考慮事項など、より複雑な要素が含まれることがよくあります。

スキルを開発し続けると、新しい課題に直面し、Webサイトの機能とユーザーエクスペリエンスを向上させる絶好の機会が得られます。 学習プロセスを受け入れ、創造物がインターネット上で実現する満足感を楽しんでください。 ハッピーコーディング!

ご質問がある場合や、さらに説明が必要な場合は、お気軽にお問い合わせください。 フィードバックは常に高く評価されています。 詳しくはTwitterでつながり、最新情報やディスカッションをご覧ください。 お読みいただきありがとうございます。次回お会いできるのを楽しみにしています!