WEBシステムの開発について

ITエンジニアを職業として検討する時、多くの人が最初に思い浮かぶのが日頃使用しているWEBシステムの開発エンジニアであることが多いと思います。でも、WEBシステムの開発がどんな仕事なのかを具体的にイメージできる人は少ないはず。そこで、WEBシステムの開発を詳しく説明していきます。 　　　　　　　　　　　　　​​​​​​​

要件定義

どんなシステムでも、システムが持つ機能や性能、ユーザーの要求やビジネスのニーズを明確にして利用方法を定める必要があります。そのフェース（工程）を要件定義と言います。具体例として、多くの人が利用したことがあるであろうホテルの予約システムを例とします。
ホテル予約システムには、

１．基本的な要件として利用者が宿泊したい日付、部屋タイプ、人数などの条件を指定して利用可能な部屋を検索できる部屋の検索機能があります。

２．ユーザ管理機能としては、アカウントの作成やログイン機能があります。

３．ホテル側の機能としては、部屋情報の登録を行ったり、料金設定、利用者情報の管理などを行う管理者向けの機能が必要です。

４．その他の機能として、予約の確認、変更、キャンセル時にメールやSMSで知らせる通知機能や、料金を支払うための決済機能、SNSと連携するレビュー機能、セキュリティー関連の機能や、レスポンスタイムや同時接続の性能要件などを定めることも必要です。​​​​​​​

基本設計

次のフェーズである基本設計とは、システム全体の構造や動作の大枠を明確にし、その要件や機能を満たすための設計を行うことです。例として、部屋の検索機能の一部を基本設計書にしてみます。

１．概要
・ユーザーが希望する条件を指定して、利用可能なホテルの部屋を検索する機能。

２．入力項目
・チェックイン日
・チェックアウト日
・部屋タイプ (シングル、ダブル、スイートなど)
・定員 (大人、子供の人数)
・その他オプション (喫煙/禁煙、朝食付きなど)

３．処理の流れ
・ユーザーが検索条件を入力する。
・システムがデータベースを検索し、指定された条件に合致する部屋を抽出する。
・すでに予約されている部屋は除外する。
・検索結果をユーザーに表示する。

４．出力項目 (検索結果)
・部屋番号
・部屋タイプ
・定員
・料金 (1泊あたり)
・部屋の写真や説明文
・予約ボタン

この辺りはホテルの予約システムを利用したことのある方なら、確かにこんな機能があるなと思いますよね。

詳細設計

詳細設計は、基本設計で定められた大枠や方針に基づいて、具体的な実装方法や手順を決定するフェーズです。

１．画面設計
各画面のレイアウトや操作方法、表示内容などを具体的に設計する。

２．データベースの詳細設計
テーブルの詳細な構造や、カラムのデータ型、制約、リレーションシップなどを決定する。

３．処理の詳細
各機能や業務処理の具体的な手順やアルゴリズムを定義する。

４．プログラム単位の設定
システムを構成するプログラムやモジュールの分割や関係を定義する。

５．エラーハンドリング
エラーが発生した際の対応策や処理を設計する。

６．テスト仕様の策定
テストを行うための条件や手順、期待する結果などを定義する。

詳細設計は、「どのように」実現するかを中心に考えるフェーズと言えます。

開発

部屋検索のコードをHTMLで記述してみます。

<div>
    <h2>部屋検索</h2>
    <label>チェックイン日: <input type="date" id="checkinDate"></label>
    <label>チェックアウト日: <input type="date" id="checkoutDate"></label>
    <label>部屋タイプ: 
        <select id="roomType">
            <option value="single">シングル</option>
            <option value="double">ダブル</option>
            <option value="suite">スイート</option>

<div>タグは、ウェブページの異なるセクションや内容をグループ化するためのコンテナ要素です。ここでは、部屋検索に関する内容をグループ化するために使用されています。
<h2>タグは、見出しを表示するためのタグです。この場合、"部屋検索"というテキストを表示します。h2は、h1よりも少し小さい見出しのレベルを示しています。

<label>チェックイン日: <input type="date" id="checkinDate"></label>

<label>タグは、フォームコントロールの説明文を表示するためのタグです。ここでは、"チェックイン日:"というテキストが説明文として表示されます。
<input type="date" id="checkinDate">は、ユーザーが日付を選択できるフォームコントロールを生成します。type="date"により、日付の入力フィールドが表示されます。id="checkinDate"は、この入力フィールドを一意に識別するためのIDです。

<label>チェックアウト日: <input type="date" id="checkoutDate"></label>

これも日付の入力フィールドですが、チェックアウトの日付を入力するためのものです。

<label>部屋タイプ:
<select id="roomType">
<option value="single">シングル</option>
<option value="double">ダブル</option>
<option value="suite">スイート</option>

<label>タグは、"部屋タイプ:"というテキストを表示します。
<select id="roomType">は、ドロップダウンメニューのフォームコントロールを生成します。ユーザーはこのメニューから部屋のタイプを選択することができます。
<option>タグは、<select>内の選択肢を定義します。この場合、3つの選択肢があります。シングル、ダブル、スイート。value属性は、選択肢の実際の値を示しており、この値はフォームが送信されたときにサーバーに送られます。

やはり実装になると難しくなりますね。

テスト

システムの動作を確認し、バグや不具合を見つけ出して修正する工程です。

１．単体テスト 
コードの関数やメソッドが期待通りの動作をするか確認します。

２．結合テスト 
システム内の異なる部分が連携して正しく動作するかをテストします。
例：フロントエンドの部屋検索機能がバックエンドのAPIと正しく通信できるか、データベースから正しいデータが取得できるかなど。

３．システムテスト 
システム全体が統合された状態で、要件を満たして動作するかを確認します。
実際のブラウザやデバイスでのテストを含むことが多いです。

４．受け入れテスト 
実際のユーザーやステークホルダーがシステムを使って、ビジネス要件を満たしているかを確認します。

５．テストケースの作成
・機能ごとに具体的なテストケースをリストアップします。
・例：部屋検索機能の場合、以下のようなテストケースが考えられます：
　・チェックイン日・チェックアウト日を指定して、利用可能な部屋が表示されるか。　
　・予約済みの部屋は検索結果に表示されないか。
　・定員や部屋のタイプに応じて適切な部屋が検索されるか。
　・不正な入力（例：チェックアウト日がチェックイン日より前の日付）が行われた際に適切なエラーメッセージが表示されるか。

６．テスト結果のレビュー
テストが失敗した場合、原因を特定し、修正します。テスト結果をドキュメントとして保存し、関係者と共有します。

７．リグレッションテスト
既存の機能に影響が出ないように、変更を加えるたびに以前のテストケースを再度実行します。
以上のテスト工程を通じて、システムが安定して動作し、要件を満たしていることを確認します。適切なテストを行うことで、バグや問題点を早期に検出し、高品質なシステムの実現に寄与します。

以上のテスト工程を通じて、システムが安定して動作し、要件を満たしていることを確認します。適切なテストを行うことで、バグや問題点を早期に検出し、高品質なシステムの実現に寄与します。

その他、システムが完成した後も、デプロイ（サーバー上にシステムを配置し、公開・稼働させる）や保守・運用（システムの運用を続けながら、必要に応じてアップデートや修正を行う）をする工程があります。

まとめ

いかがでしたでしょうか。我々が生活を便利にするWEBシステムは、見えない部分で多くの工程や努力が詰まっています。使い勝手の良さ、デザインの美しさ、安全性…それらはすべて、専門家たちの手間暇をかけた成果の結晶です。WEB開発エンジニアを目指すなら、まずは、コンピューターの基礎からじっくり学習するのが実は近道です。

DENNO Academyでは、IT未経験者がコンピューター基礎から無料で学習することが可能です。皆様の登録をお待ちしております→DENNO Academyのご紹介はこちら