【Server】Webサーバー入門　その2　～実践編～

森本
0
13 view

はじめに

OX ENGINEER STUDIO でサーバーエンジニアをしています、森本です。
前回のブログ【Server】Webサーバー入門その1 ～紹介編～ | OX ENGINEER STUDIO | C&R Creative Studiosでは、
サーバーの業務内容やその面白さについてご紹介しました。

今回はその続編として、実際にWeb開発で使用される技術――HTML、JavaScript、PHP、SQL、シェルスクリプトなど――をどのように学び、どのように自分のPC上で動かしていけるかをご紹介します。

「Web開発って難しそう…」と思っている方も、まずは簡単な表示から始めてみましょう。
手を動かしながら学ぶことで、技術は自然と身についていきます。

HTMLに慣れよう

APIサーバーのエンジニアにとって、管理ツールの作成は重要な業務のひとつです。たとえば、ユーザー情報の登録や検索、データの更新などを行うための「入力フォーム」は、管理画面の基本機能として頻繁に登場します。

そこで今回は、HTMLを使って簡単な入力フォームを作成してみましょう。フォームは、ユーザーから情報を受け取るためのインターフェースであり、サーバーと連携する第一歩でもあります。

まずは、以下のコードをコピーして、メモ帳にindex.html という名前で保存してください。
保存したファイルをダブルクリックするだけで、ブラウザで表示できます。

index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8">
     <title>Api練習ページ</title>
   </head>
   <body> 
    <form>
       <input type="text" id="text" name="text ">
       <input type="submit">
     </form>
   </body>
 </html>

問題なくコピーできていれば、画像のような画面がブラウザに確認できるはずです。
このように、HTMLを使えば簡単に入力フォームを作成できます。まずは「表示できた！」という体験を楽しみながら、
少しずつステップアップしていきましょう。

■ポイント解説
・<form>タグは、入力項目をまとめるためのタグです。将来的にPHPなどでデータを受け取る際にも、このタグが必要になります。

・<input>タグは、実際にユーザーが情報を入力するためのフィールドです。type=”text”は文字列の入力欄です。

・<input type=”submit”>は、フォームの送信ボタンです。今回は送信先を指定していませんが、後ほどサーバー側と連携する際に活用します。

JavaScriptに慣れよう

JavaScriptは、Web開発において圧倒的な人気を誇っている、まさにWebの標準言語とも言える存在です。
サーバーエンジニアであっても、フロントエンドとの連携やAPIの動作確認などでJavaScriptに触れる機会は非常に多く、切っても切り離せない関係となっています。

今回は、JavaScriptの基本的な使い方を、実際のコードを通して学んでみましょう。

以下のコードをコピーして、メモ帳にsubmit.js という名前で index.html と同じフォルダ内に保存してください。

submit.js

document.querySelector("form").addEventListener("submit", function(event) {
   event.preventDefault();
   const text = document.querySelector ("#text").value;
   if (window.confirm(`${text} で送信しますか？`))
 {     console.log("送信されました: " + text);
   } else {
     console.log("送信がキャンセルされました");
   }
 });

作成した .js ファイルは、HTMLファイルから <script> タグを使って読み込むことができます。
以下のように、<body>タグ内の最後に記述するのが一般的です。

index.html

～省略～
   <script src=" submit.js"></script>
  </body>
 </html>

ここまで問題なく出来ていれば、前項で作成したHTMLで送信ボタンを押した際に添付のような挙動を確認できるかと思います。
フォームに入力して送信すると、確認ダイアログが表示され、OKを押すと画面にメッセージが表示されます。
キャンセルすれば何も起こりません。

次は、いよいよサーバーの準備に進みます。
ローカル環境でWebアプリを動かすための第一歩を踏み出しましょう！

■ポイント解説
・JavaScriptはWeb開発の定番言語ですが、より安全で堅牢なコードを書くために、TypeScriptを使うプロジェクトが急増しています。
　余裕がある方はそちらも勉強してみてください。

自分のPCにサーバーを準備しよう

Web開発の世界では、HTMLやJavaScriptを使った簡単な動作確認ならローカル環境でも十分可能です。
しかし、より本格的なWebアプリを構築するには、サーバーの存在が不可欠です。
サーバーは、ユーザーからのリクエストを受け取り、処理し、結果を返す役割を担う、いわばWebの「頭脳」です。

とはいえ、実際にサーバーを構築しようとすると、クラウドサービスやVPSの契約など、金銭的な負担が発生します。
初学者が学習段階で毎月サーバー費用を支払うのは現実的ではありません。そこで登場するのが、仮想環境の活用です。

仮想環境とは、物理的な機器を増やすことなく、PCの中にもう一台のPCをソフトウェア的に構築する技術です。
この環境内では、実際のサーバーと同様に通信や処理を行うことができ、学習や検証に最適となっています。

現在の開発現場では、仮想環境の構築に Docker が広く使われています。
Dockerは、軽量かつ高速な仮想環境を簡単に作成できるツールで、環境構築の手間を大幅に削減してくれます。
コードで環境を定義できるため、他の開発者と同じ環境を再現するのも容易です。
そのため、今回はDockerを導入したことを前提に解説を行っていきます。

Dockerの導入方法や基本的な使い方については、すでに多くの解説記事が存在しているため、ここでは詳細な手順は割愛します。
興味がある方は「Docker インストール」などで検索してみてください。

任意の場所にディレクトリを作成して、以下に示すようにファイルの作成とコードのコピーを行ってください。

ファイル構成

./
├ docker
│ └ php
│    └ Dockerfile
└ docker-compose.yml

docker-compose.yml

version: '3' 
services:   app: 
    build:
       context: ./docker/php
       dockerfile: Dockerfile
     volumes: 
      - ./src:/var/www/html
     ports: 
      - "8000:80"

Dockerfile

FROM php:7.2-apache 
RUN apt-get update  \
   && docker-php-ext-install pdo_mysql mysqli mbstring 
RUN apt-get -y install locales-all 
ENV LANG ja_JP.UTF-8 
WORKDIR /var/www/html EXPOSE 80

ファイルを構成通りに配置出来たらコマンドプロンプトで配置したディレクトリに移り、
以下のコマンドを実行してください。
問題なくDockerのインストールなどが終わっていればエラー無く仮想環境が立ち上がるはずです。

C:\Users\~> docker-compose up -d --build

サーバーを利用してブラウザに表示しよう

ローカルPCにコンテナ環境が構築され、APIサーバーの準備が整いました。
ここからは、作成したHTMLをサーバー上で動かし、ブラウザからアクセスできるようにしていきます。
以下の手順に沿って操作を進めてみましょう。

先ほど作成したindex.htmlの拡張子を.phpに変更し、index.phpとして以下のように配置してください。

ファイル構成

./
├ docker
│ └ php
│ │  └ Dockerfile
│ └ src
│    └ index.php
└ docker-compose.yml

配置が終わったらブラウザで http://localhost:8000 にアクセスしてみましょう。
「 HTMLに慣れよう」で表示されたページと同様なページが表示されれば、サーバーとしての通信が正常に行われていることが確認できます。

ブラウザでページが表示されるのは、前回のdocker-compose.ymlに記述した以下のようなマウント設定によって、ローカルのファイルがドキュメントルートに接続されているためです。

 - ./src:/var/www/html

このように、docker-compose.ymlのマウント設定を活用することで、ローカルのファイルを簡単にサーバーに反映させることができます。

■ポイント解説
・ドキュメントルートとは、外部（ブラウザなど）からアクセス可能なデータを格納するためのディレクトリのことを指します。
　Apacheの場合、一般的にこのドキュメントルートは /var/www/html に設定されています。

サーバーへの接続が確認できたら、次はPHPを使ってHTMLフォームの内容を取得できるかを試してみましょう。
これは、ユーザーが入力した情報をサーバー側で受け取る基本的な仕組みを理解するための重要なステップです。
以下のようにindex.phpを編集してみてください。

index.php

<?php
if ($_SERVER["REQUEST_METHOD"] === "POST") {
  var_dump($_POST['text']);
}
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Api練習ページ</title>
  </head>
  <body>
    <form method="POST" >
      <input type="text" id="text" name="text ">
      <input type="submit">
    </form>
  </body>
</html>

フォームに「こんにちは」を入力して「送信」ボタンを押すと、以下のような出力が表示されます。

 string(6) "こんにちは"

フォームに入力した内容が $_POST[‘text’] を通じてPHPで受け取られ、var_dump() によって画面に表示されることが確認できました。
これで、ブラウザから送信されたデータがサーバー側で処理される仕組みをひと通り体験できたことになります。

次のステップでは、この受け取ったデータを一時的な表示だけで終わらせず、保存・管理できるようにするための仕組み
――つまりデータベース（DB）の準備に進みましょう。

DBを準備しよう

サーバーの動作確認が完了した今、いよいよAPIサーバーの本領発揮――データベース（DB）の構築に取りかかります。
Webアプリにおいて、DBはユーザー情報やゲームデータなどを保存・管理する心臓部。
ここでは、Dockerを使ってMySQLサーバーを立ち上げ、ゲームの一場面を想定したテーブル作成までを行います。

まずは、既存のDocker環境にMySQLコンテナを追加して、DBサーバーを構築します。
以下の構成の通りに新たにDockerfileを設置して docker-compose.ymlを書き換えてください。

ファイル構成

./
├ docker
│ └ php
│ │  └ Dockerfile
│ └ mysql
│ │  └ Dockerfile
│ └ src
│    └ index.php
└ docker-compose.yml

docker-compose.yml

version: '3' services:   app:          ～   中略   ～
    depends_on:
      - db
  db:
    build:
      context: ./docker/mysql
      dockerfile: Dockerfile
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
      - ./docker/mysql/script:/docker-entrypoint-initdb.d
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=pass
      - MYSQL_DATABASE=mysql
    command: --default-authentication-plugin=mysql_native_password

Dockerfile

FROM mysql:8.0-debian 
RUN apt-get update 
RUN apt-get -y install locales-all 
ENV LANG ja_JP.UTF-8 
EXPOSE 3306

ここまでの準備ができたら再度、以下のコマンドを実行してみましょう。

C:\Users\~> docker-compose up -d --build

これで、APIサーバーがデータを受け取り、DBに保存する準備が整いました。
次章では、PHPからこのDBに接続し、実際にデータを登録・取得する処理を実装していきます。

DBのデータをブラウザに表示しよう

前章でDBサーバーの構築が完了しました。
ここからは、ゲームの一場面を想定したデータベース設計を行い、PHPを使ってそのデータを取得し、
ブラウザに表示するまでの流れを体験していきましょう。これは、APIサーバーのエンジニアが日常的に行っている業務の一部です。

まずは、好きなゲームの一場面を思い浮かべて、どんなデータが必要かを考えてみましょう。
ここでは「プレイヤーのステータス情報」を管理するテーブルを例にします。

以下のコマンドをコマンドプロンプトで実行してDBに接続してみましょう。

C:\Users\~> docker exec -it ＜自身で作成したフォルダ名＞-db-1 bash
~$ mysql -uroot -ppass

　接続ができたら以下のSQLクエリを実行して、テーブルを作成してください。

mysql > CREATE DATABASE game_db;
mysql > USE game_db;
mysql > CREATE TABLE players (
   userId INT PRIMARY KEY,
   userName VARCHAR(50),
   level INT,
   hp INT,
 mp INT
);
mysql > INSERT INTO players VALUES (1,’ chibito’,12,340,120);

　このテーブルでは、プレイヤーのID、名前、レベル、HP、MPなどのステータスを管理します。ゲーム内でキャラクターの情報を表示したり、戦闘ロジックに活用したりする場面を想定しています。

　次に、PHPを使ってこのテーブルからデータを取得し、ブラウザにJSON形式で表示してみましょう。index.phpを以下のように一部書き換えてください。

index.php

<?php
// POSTリクエストが送られた場合
if ($_SERVER["REQUEST_METHOD"] === "POST") {
  // DB接続設定
  $mysqli = new mysqli('db', 'root', 'pass', 'game_db');

  // 入力されたIDを取得
  $userId = $_POST['text'];

  // SQLクエリを作成して実行
  $sql = "SELECT * FROM players WHERE userId = $userId";
  $result = $mysqli->query($sql);

  // 結果をJSON形式で表示
  if ($result && $result->num_rows > 0) {
    echo "<pre>";
    echo json_encode($result->fetch_assoc(), JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
    echo "</pre>";
  } else {
    echo "<p>該当するユーザーIDのデータが見つかりませんでした。</p>";
  }
  $result->close();
  $mysqli->close();
}
?>
～省略～

書き換えて保存が完了したら、ラウザで http://localhost:8000 にアクセスしてフォームに「1 」を入力すると以下のように表示されるはずです。

{
 "userId": 1,
 "userName": "chibito",
 "level": 12,
 "hp": 340,
 "mp": 120
}

このようにして、PHPを通じてデータベースから取得した情報をJSON形式でブラウザに返す処理が完成しました。これは、実際のゲーム開発において、サーバーがプレイヤーのステータスやアイテム情報などをゲームクライアントに返すAPIレスポンスと同じ仕組みです。

　ここまでのステップを通じて、読者の皆さんはサーバー業務の基本的な流れを一通り体験できたことになります。ローカル環境の構築から、フォーム入力、PHPによるデータ処理、そしてDBとの連携まで――これは、実際のAPIサーバー開発でも日常的に行われている重要な業務です。

　ブラウザに表示されたJSON形式のデータは、まさにサーバーがゲームクライアントに返している情報のかたちそのもの。この仕組みを理解することで、Webやゲーム開発の裏側がぐっと身近に感じられるようになったのではないでしょうか。

■ポイント解説
紹介したPHPソースでは「SQLインジェクション」に対応できていません。これは重大なインシデントになりかねないので、これまでそういった言葉を聞いたことがない方などは調べて対応してみましょう

おわりに

いかがでしたか？HTMLから始まり、JavaScript、サーバー、DBと進めていくことで、Web開発の基礎が自然と身についていきます。

　もしこの過程で「もっと深く知りたい」「なぜこうなるのか？」といった疑問が湧いてきたなら、それはとても良い兆しです。そうした探究心こそが、サーバー業務に携わるエンジニアとしての第一歩。このブログをきっかけに、より多くの方がインフラやバックエンドの世界に興味を持ち、仲間として加わってくれることを願っています。

森本

サーバーエンジニア（API・管理ツール担当）
元韓国産オンラインゲームのDBAを経て、PHPやシェルスクリプトでのApi・管理ツール開発に従事中
スノボとアクションやFPSゲームが趣味です！

投稿者記事

【Server】Webサーバー入門その1 ～紹介編～

2025-05-13

【UE5】 UnrealEngine5におけるC++UMG制作フローの1例

2025-11-25

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

サイト内検索

【Server】Webサーバー入門　その2　～実践編～

はじめに

HTMLに慣れよう

index.html

JavaScriptに慣れよう

submit.js

index.html

自分のPCにサーバーを準備しよう

ファイル構成

docker-compose.yml

Dockerfile

サーバーを利用してブラウザに表示しよう

ファイル構成

index.php

DBを準備しよう

ファイル構成

docker-compose.yml

Dockerfile

DBのデータをブラウザに表示しよう

index.php

おわりに

森本

投稿者記事

関連記事

オススメ記事

ABOUT

キーワード検索

カレンダー

カテゴリー一覧

【Server】Webサーバー入門 その2 ～実践編～

はじめに

HTMLに慣れよう

index.html

JavaScriptに慣れよう

submit.js

index.html

自分のPCにサーバーを準備しよう

ファイル構成

docker-compose.yml

Dockerfile

サーバーを利用してブラウザに表示しよう

ファイル構成

index.php

DBを準備しよう

ファイル構成

docker-compose.yml

Dockerfile

DBのデータをブラウザに表示しよう

index.php

おわりに

森本

投稿者記事

関連記事

オススメ記事

ABOUT

キーワード検索

カレンダー

カテゴリー一覧

【Server】Webサーバー入門　その2　～実践編～