たった1つのHTMLファイルから始めるWebアプリケーション開発

Naoki Machida

index.htmlというたった1つのHTMLファイルから始まり、最終的には動的にHTMLデータを生成するPHPプログラムの開発をします。この開発の過程を通して、Webアプリケーション開発の基礎の基礎を体験できます。

Keywords

PHP
プログラミング
HTML

Contents

1. 概要
1-1. 目的
1-2. 対象
2. VSCodeのインストール
3. index.htmlファイルの作成
4. ローカルのWebサーバを立ててindex.htmlをブラウザで表示
5. リクエストとレスポンスの中身
6. PHPを使用し、動的なHTMLを生成する
7. まとめ

概要

目的

今日のWebアプリケーション開発にWebフレームワークの使用は当然ですが、初学者がLaravelやRuby on RailsといったWebフレームワークを使って、Webアプリケーションの開発を始めると、圧倒的な量の学習すべき項目に押しつぶされてしまいます。

Webフレームワークの書籍やチュートリアルを参考にしてアプリケーションを作ってみたはいいものの、「あまり理解していないけど、アプリケーションは動いている」といった感覚を覚える人は多いことでしょう。

そのため本稿では、WebフレームワークやRDBMSを使用せず、ひとまず「動的に生成したHTMLデータをブラウザで表示する」までを目標とし、一方で、1つ1つの理解を確実なものにできるように構成しました。

もちろん、世の中に役に立つようなWebサービスを開発するためには、これだけでは不十分ですが、初学者がWebアプリケーションの基礎の基礎を理解する上では十分でしょう。

この過程を通して、Webアプリケーション開発の片鱗をみていきましょう

対象

プログラミング未経験者、かつ、MacOS使用者

VSCodeのインストール

プログラムをコーディングするためのエディタです。無料で使用できます。 https://code.visualstudio.com/

本稿では、VSCodeの使用を前提に進めるので、是非こちらをインストールしてください。(使い慣れたエディタがあれば、それを使用して大丈夫です。)

index.htmlファイルの作成

[New file]をクリックします。

次に、下記をコーディングします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    Hello, World
  </body>
</html>

[command]+[s]の2つのキーを同時に押下して、index.htmlというファイル名で保存しましょう。

ローカルのWebサーバを立ててindex.htmlをブラウザで表示

Webサーバと聞いて、驚いた方もいるかもしれませんが、このWebサーバとは物理的なサーバを構築するのではなく、今開発で使っているPC内にて、PHPの機能を使って簡易的に立てる論理的なWebサーバのことです。

なお、サーバとは、クライアントからのリクエストを待ち続け、もしリクエストがきたらレスポンスを返す、というものです。

Webアプリケーションの文脈では、クライアントはブラウザで、サーバはWebサーバとなります。

ターミナル(terminarl.app)を開き、index.htmlが存在するディレクトリまで遷移(cdコマンドを使用します。)します。

$ ls index.htmlを実行し、index.htmlが存在することを確認します。

その後、下記コマンドを実行してみましょう。

php -S localhost:8000

このコマンドを実行後、[Sat May 30 15:29:48 2020] PHP 7.4.5 Development Server (http://localhost:8000) startedといったような文字列が出力されましたでしょうか？

これは、このPC内(localhost)の8000ポートをListenしている Webサーバの起動が開始したということです。

それでは、Webサーバが起動したので、クライアントであるブラウザでhttp://localhost:8000 にアクセスしてみましょう。

index.htmlに記述した内容が表示されています。

[control]+[c]の2つのキーを同時に押下すると、Webサーバが停止します。

リクエストとレスポンスの中身

デベロッパーツールでWebサーバへのリクエストとレスポンスの中身を覗いてみます。

[option]+[command]+[i]の3つのキーを同時に押下すると、デベロッパーツールが表示されます。

デベロッパーツールを表示させた後、もう一度ページをリロードし、その後、デベロッパーツールの[Network]タブをクリックしてみましょう。

次に、このlocalhostと表示されている箇所をクリックします。

すると、このようにリクエストやレスポンスの中身をみることができます。[Headers]タブや[Response]タグをクリックしてみて、実際に調べてみてください。

[Response]タブをクリックしてみると、index.htmlに記述した内容がそのまま、表示されていることが確認できます。

ブラウザとWebサーバの関係を図にすると、このようになります。

PHPを使用し、動的なHTMLを生成する

index.htmlをindex.phpに変更し、ファイルの中身を下記のように書き換えてみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <div>
      <?php
        $number = rand(1,10);
        
        if($number >= 5){
          echo "Hello";
        }else{
          echo "World";
        }
      ?>
    </div>
  </body>
</html>

そして、一度Webサーバを止めて、再度起動させます。 http://localhost:8000/ にアクセスしてみると50%の確率でHelloを表示し、50%の確率でWorldを表示します。

php -S localhost:8000というコマンドはWebサーバを起動させるものですが、http://localhost:8000/ でアクセスがきた場合、index.phpが存在すれば、index.phpのHTMLデータをクライアントに返却し、index.phpが存在しなければ、index.htmlのHTMLデータを返却します。また、index.phpの場合は、そのファイルに存在する<?phpと?>で囲まれたPHPプログラムをサーバサイドで実行してから、その結果生成されたHTMLデータをクライアントに返却するようになります。

Responseをみてみると、PHPプログラムはなくなっており、PHPプログラムの実行後のHTMLデータとなっていることが確認できます。(今回はHelloが表示されていますが、何回かリクエストするとWorldが表示されます。)

PHPの処理を含めた全体像は下記のようになります。

まとめ

ブラウザとWebサーバ、リクエストとレスポンス、デベロッパーツール、サーバサイドでHTMLデータを生成して、ブラウザにレスポンスといったことを駆け足でしたがみてきました。

Webアプリケーションの全体像が見えてきたのではないでしょうか？

Webアプリケーション開発に必要なことはまだまだたくさんありますが、今後の開発の役に立てば幸いです。