PHP（サーバサイド言語）の学習前に知っておくべきこと

**PHP** は Web 開発において広く使われている言語の 1 つですが、PHP や他のサーバサイド言語を学ぶ前に Web 開発に必要ないくつかの基礎知識を知っておく必要があります。

https://youtu.be/r9ndOH0tyfA

上記の動画内で、PHP を学ぶ前に必要な基礎知識について

1. インターネットと Web サイトの仕組み
2. ブラウザからのリクエストとサーバーからのレスポンスの流れ
3. HTTP プロトコル
4. HTML, CSS, Javascript の基礎
5. バージョン管理システム (Git、GitHub)
6. リレーションデータベース

の 6 つのトピックが挙げられています。

本記事では、PHP を学習する前に知っておくべきことについて上記のトピックを中心に説明します。しかし、本記事で説明するトピックは PHP に限らず、サーバーサイド言語全般に通じるものです。

# インターネットと Web アプリケーションの仕組み
まずは、PHP を用いて開発する対象である **Web アプリケーション**と Web アプリケーションをユーザに提供するために必要な**インターネット**について説明します。

## インターネット
**インターネット**は、地理的な距離に関係なく、世界中の**ネットワーク**（複数のコンピュータを繋ぎ、情報交換できるようにする仕組み）を相互に接続している大規模なネットワークです。
![インターネット](https://www.soumu.go.jp/main_sosiki/joho_tsusin/security/basic/service/img/ill02_01.jpg)
引用元：[インターネットの仕組み｜インターネットを使ったサービス｜基礎知識｜国民のための情報セキュリティサイト - 総務省](https://www.soumu.go.jp/main_sosiki/joho_tsusin/security/basic/service/02.html)

## Web アプリケーション
**Web アプリケーション**は、インターネットを介して利用されるアプリケーションであり、ユーザーが Web ブラウザを使用してアクセスすることができます。 例）Twitter・Amazon・YouTube 
### Web アプリケーションと Web サイトの違い
Web アプリケーションは **Web サイト**とよく比較されます。
Web サイトは、情報を提供することが主な目的です。一般的には企業や組織の情報、製品やサービスの説明、ニュース記事などの**静的なコンテンツ**を表示します。
一方、Webアプリケーションは、ユーザーとのインタラクションやデータの処理などの**動的な機能**の提供を目的としています。この動的な処理に、PHP や他のサーバーサイド言語が用いられます。

# ブラウザからのリクエストとサーバーからのレスポンスの流れ
Web アプリケーションはインターネットを介して利用されると前述しました。
ここでは、Web アプリケーションがインターネットを通じてユーザーに提供される流れをもう少し詳しく見ていきます。

具体的には、**ブラウザからのリクエストに対して、Web サーバーがレスポンスを返すまでの流れ**を説明します。

## Web サーバー
**Web サーバー**は、クライアント（通常は Web ブラウザ）からのリクエストを受け取り、そのリクエストに応じた処理を行ってレスポンスを返す役割を担うコンピュータです。

一般的な Web サーバーソフトウェアには、Apache、Nginx があります。Web サーバーソフトウェアをコンピュータにインストールすることで、そのコンピュータを Web サーバーとして機能させることができます。

**Web サーバー**と PHP などの**サーバーサイド言語**（Web サーバー上で実行されるプログラミング言語）を組み合わせることで、ユーザーとのインタラクションやデータの処理が可能となり、Web アプリケーションの機能を提供できます。Web サーバーがリクエストを受け取り、サーバーサイド言語がそれを処理して適切なレスポンスを生成し、最終的にクライアントに返すという流れが形成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2801269/b224889a-62fe-a3a2-d1e1-4be42a5b8f30.png)

## Web アプリケーションが利用される流れ
Web サーバー側での処理の流れについて Web サーバーの説明の中で少し触れましたが、ここでは Web アプリケーションが利用される全体の流れを説明します。
　
```mermaid
flowchart LR
URL入力　--> ドメイン名解決　--> サーバ接続　--> リクエスト送信　--> リクエストの処理　--> レスポンス受信　--> ブラウザ表示
```

1. **URL の入力**: Web アプリケーションにアクセスするために、URL をブラウザのアドレスバーに入力します。
2. **ドメイン名解決**: ブラウザは、DNS サーバーに問い合わせて、入力された URL から対応する Web アプリケーションの IP アドレスを取得します。（DNS はドメイン名と対応する IP アドレスを提供するサービスです。）
3. **TCP/IP 接続の確立**: ブラウザは、取得した IP アドレスを使用して、Web サーバとの間で TCP/IP 接続を確立します。これにより、正確かつ安全なデータ転送が実現されます。
4. **リクエストの送信**: ブラウザは、取得した IP アドレスに基づいて、Web アプリケーションに対して、 HTTP プロトコルを使用してリクエストを Web サーバーに送信します。
5. **リクエストの処理**: Web サーバーは、受信したリクエストに基づいて、特定のページの表示、データの取得や処理、データベースへのクエリなどの処理をします。
6. **レスポンスの送信**: Web サーバーは、 HTTP プロトコルを使用してブラウザにレスポンスを返します。
7. **ページの表示**: ブラウザは、受け取ったレスポンスを解析し、Web ページを表示します。

このように、Web アプリケーションを利用するためには、ブラウザからWebサーバーにリクエストを送信し、Webサーバーからレスポンスを受け取る必要があります。


# HTTP プロトコル
**HTTP（Hypertext Transfer Protocol）プロトコル**は、Web 通信の基盤となるプロトコルであり、Web 上でクライアントとサーバー間のデータの送受信を可能にします。

Web アプリケーションが利用される流れのなかで説明したように、クライアントからのリクエストの送信及びサーバーからのレスポンスの送信には **HTTP プロトコル**が使用されます。そのため、それぞれは **HTTP リクエスト**と **HTTP レスポンス**と呼ばれます。

ここでは、HTTP リクエストと HTTP レスポンスの構成要素ついて見ていきます。

参考：[HTTP - MDN](https://developer.mozilla.org/ja/docs/Web/HTTP)

## HTTP リクエスト

HTTP リクエストは、以下の要素から構成されています。

1. **HTTP メソッド**: リクエストの種類や要求されるアクションを示します。代表的な HTTP メソッドには、以下のようなものがあります。
    + **GET**: リソースの取得を要求します。通常、Web ページや画像などの静的なコンテンツを取得する際に使用されます。
    + **POST**: リソースの作成やデータの送信を要求します。フォームデータや API へのデータ送信などに使用されます。
    + **PUT**: リソースの更新を要求します。指定したリソースを置き換えるデータを送信します。
    + **DELETE**: リソースの削除を要求します。

2. **リソースのパス**: クライアントが要求するリソースのパスです。このパスは通常、URL の一部として指定されます。例えば、`https://example.com/api/users` という URL で `/api/users` がリソースのパスになります。

3. **HTTP プロトコルのバージョン**: HTTP/1.1 プロトコルなど

4. **リクエストヘッダー**: リクエストに関する追加の情報が含まれています。ヘッダーはキーと値のペアで構成され、クライアントがサーバーに対して要求する詳細な情報を提供します。例えば、ユーザーエージェント情報、クッキー情報などが含まれます。

5. **リクエストボディ**: POST や PUT などのメソッドで使用される場合、リクエストボディにデータを含めることがあります。フォームデータや JSON データなど、リソースの作成や更新に必要なパラメータが含まれます。

HTTP リクエストの例：
```
GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: fr*
```
引用元：[HTTP の概要 - MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Overview)



## HTTP レスポンス
HTTPレスポンスは、以下の要素から構成されています。
1. **HTTP プロトコルのバージョン**
2. **ステータスコード**: レスポンスの状態を示すコードです。3桁の数字で表され、リクエストの処理結果を示します（例: 200、404）。

3. **ステータスメッセージ**: ステータスコードの簡単な説明です（例: OK、 Not Found）。
4. **レスポンスヘッダ**: レスポンスに関する追加の情報が含まれています。ヘッダはキーと値のペアで構成され、クライアントに対してレスポンスの詳細な情報を提供します（例: Content-Type、Content-Length）。

5. **レスポンスボディ**: 実際のレスポンスの内容（要求に応じたデータ）が含まれています。HTML ページ、画像、JSON データなど、クライアントに返されるコンテンツがここに格納されます。


HTTP レスポンスの例：
```
HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html...（ここに、リクエストした 29769 バイトのウェブページが来ます）
```
引用元：[HTTP の概要 - MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Overview)
　
## HTTP リクエストと HTTP レスポンスの間での PHP の役割
PHP などのサーバーサイド言語を使用することにより、Web サーバー上で HTTP リクエストの受信と HTTP レスポンスの送信の間で、リクエストの処理やレスポンスの生成を行うことができます。

# HTML, CSS, JavaScript の基礎
先ほど説明したように、HTTP レスポンスのボディにはさまざまなコンテンツを含めることができます。具体的には、HTML、JavaScript、CSS、画像、動画、音声ファイルなどが含まれます。

ここでは、 HTTP レスポンスのボディに含まれるコンテンツのうち HTML、CSS、JavaScript について説明します。

## フロントエンドとバックエンド
まずは、**HTML、CSS、JavaScript** が使用されるフロントエンドと **PHP などのサーバサイド言語**が使用されるバックエンドの関係を説明します。

Web アプリケーションの開発は、**フロントエンド**と**バックエンド**に分けられます。フロントエンドとバックエンドは、Web アプリケーションの開発において役割が異なる領域です。

**フロントエンド**: ユーザーが直接操作するクライアント側の領域であり、HTML、CSS、JavaScript などの言語や他の技術を使用して、ユーザーインターフェースを構築します。

**バックエンド**: サーバーサイドの領域であり、Web アプリケーションの裏側で動作する処理やデータの管理を担当します。PHP や他のサーバーサイド言語は、バックエンドの開発に使用される主要なツールです。これらの言語を使用して、データの処理、認証やセキュリティの管理、API の作成、データの永続化などを実装します。

フロントエンドとバックエンドは、協力してWeb アプリケーションを構築します。フロントエンドがユーザーインターフェースを作成し、ユーザーとのやり取りを処理する一方で、バックエンドはデータの管理やビジネスロジックの実行を担当します。両者は HTTP リクエストと HTTP レスポンスを通じて情報をやり取りし、Web アプリケーション全体の機能とパフォーマンスを向上させるために連携します。


![フロントエンドとバックエンド](https://udemy.benesse.co.jp/wp-content/uploads/0ca70a9179a242f3b948e5601741d718.png)
引用元：[Webアプリの開発手順とは？Webアプリの仕組みから公開方法までを解説！ - Udemy メディア](https://udemy.benesse.co.jp/development/app/making-web-apps.html)


## HTML
 **HTML（Hypertext Markup Language）** は、Web ページに表示するコンテンツの構造を定義するためのマークアップ言語です。

参考：[HTML: HyperText Markup Language - MDN](https://developer.mozilla.org/ja/docs/Web/HTML)

2023 年 4 月現在、HTML の標準規格は [HTML Living Standard](https://html.spec.whatwg.org/) ですが、HTML を学習する際は **HTML5** と調べるほうがより多く情報を得られます。
ちなみに、HTML Living Standard のドキュメントで、以下のように 「HTML Living Standard は HTML5 か」という質問に対し、「手短に言えば、はい。」と回答してます。
> **Is this HTML5?**
> This section is non-normative.
> **In short: Yes.**
>
> 参考：[is-this-html5- HTML Living Standard](https://html.spec.whatwg.org/#is-this-html5?)

## CSS
**CSS（Cascading Style Sheets）** は、Web ページの見た目やスタイルを指定するためのスタイルシート言語です。CSS を使用することで、HTMLで表示される文書のレイアウト、色、フォントなどを制御することができます。
2023 年 4 月現在、CSS の最新バージョンは、**CSS3** です。

参考：[CSS: カスケーディングスタイルシート - MDN](https://developer.mozilla.org/ja/docs/Web/CSS)

## JavaScript
**JavaScript** は Web ページに動きをつけるために使用されるプログラミング言語です。
最近では、PHP と同じようにサーバサイド言語として使用されることもあります。

参考：[JavaScript - MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript)

## HTML, CSS, JavaScript
HTML、CSS、JavaScript の基礎を身につけることで、Web ページやアプリケーションの構築や装飾、動的な機能の実装が可能になります。これらの言語を組み合わせて使うことで、魅力的で対話的なウェブ体験を提供できます。

# バージョン管理システム (Git、GitHub)
HTML、CSS、JavaScript、PHP などのソースコードを効果的に管理するためには、**バージョン管理システム**を使用することが一般的です。

**バージョン管理システム**は、ソフトウェア開発やファイルの変更管理に使用されるシステムです。ファイルの変更履歴を追跡し、異なるバージョンのファイルを管理することができます。

バージョン管理システムの基本的な使い方を学ぶことで、ソースコードの管理やバージョンの追跡、チームとの協力などの開発プロセスをスムーズに行うことができます。

# リレーションデータベース
**リレーションデータベース**は、関連性を持つデータをテーブルという形式で論理的に組織し、データの一貫性や整合性を保ちながら効率的に管理するためのデータベースの種類です。 例）MySQL, PostgreSQL

Web アプリケーションにおいて、リレーショナルデータベースは、データの永続化と管理を担当します。データベース内にテーブルや関係を作成し、データを格納し、検索・更新・削除などの操作を行います。


リレーショナルデータベースには、一般的に PHP、Python、Ruby などのサーバサイド言語を使用してアクセスします。

# おわりに
本記事では、サーバサイド言語を学ぶ前に必要な基礎知識として、Web アプリケーションがインターネットを通じてユーザーに提供される流れや、それに使用されている技術、また、Web 開発を効率的に進めるために使用されるシステムなど、大きく 6 つのトピックを説明しました。

サーバサイド言語の学習を進める際には、Web アプリケーション開発におけるサーバサイド言語の役割をしっかりと意識することが重要です。これにより、自身の学習の目的や方向性が明確になり、今何を学習してるのか迷子になることなく効果的な学習を進めることができます。

それぞれのトピックについて、さらなる学習の橋渡しとなる程度に説明を留めました。これらの情報を参考にしながら、自身で理解を深めてください。

本記事をお読みいただき、ありがとうございました。皆さんの時間と関心をいただけることに心から感謝しています。