<iframe>

<button>

チャレンジ_入門編_テンプレ

チャレンジ_実践編_テンプレ

reactテスト

ターミナル問題テスト

CONSOLE問題テスト

テストのテスト

reactjsxテスト

vue3テスト

vue2テスト

vue3.2テスト

typescript

vueモジュール

Processなし課題

CSSテスト確認

リンクのテスト

sass

scss

隠しファイルテスト

rust

python

ViewZone

分割代入

比較演算子(JavaScript)

オブジェクト{}

変数定義(JavaScript)

console.log

QuizSample

express

echo

katex_sample

Markdown確認challenge1

border

Markdown確認challenge2

wordpress

ファイルロゴチェック

react退避(イベントオブジェクトに型をつけてみよう)

配列操作/forEach

テンプレートリテラル

JavaScript退避

java

deno

rustパーサ

実践チャレンジ用テスト

実践Lessonサンプル

JavaScriptテストサンプル

テストのテスト3

phpApache

http-server

コーディングなし

pythonLib

sandbox-react-js

sandbox-react-ts

sandbox-vue-js

sandbox-vue-ts

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

サンプルコース

サンプルレッスングループ

レッスン_サンプル

環境構築でローカル環境が稼働しました。
何がどのように動いてローカル環境が稼働しているか確認してみましょう。

### 注意
この章は座学中心のため、実装から取り掛かりたい方は次の章へ進んでください。

## URLを叩くと処理が実行されるまでの仕組み
ローカル環境を立ち上げてから「 http://localhost:8081/ 」へアクセスすると、以下のメッセージが表示されます。
~~~html-preview
正常に動作しています。
~~~
この表示が出るまでに、どのような処理が裏で行われているのか順を追って解説します。

### 1. ブラウザからのリクエスト
URLをブラウザのアドレスバーに入力すると、ブラウザはそのURLに対してリクエストを送信します。

### 2. Dockerで起動しているApacheサーバ
ブラウザからのリクエストは、まずDockerコンテナ内で稼働しているApacheサーバに届きます。Apacheは以下の役割を果たします。

1. リクエストを受け取る<br>ブラウザから送られたリクエストを受信
2. リクエストがどのファイルにアクセスするか判定
3. PHPファイルが指定された場合はPHPファイルの処理を実行

### 3. PHPスクリプトの実行
Apacheからリクエストが渡されると、PHPがそのスクリプトを実行します。

1. ApacheはリクエストURIをPHPスクリプトへ渡します
2. URLが`/`の場合は正常に動作しています。と出力します
~~~php
<?php
// URLを取得してrequestUriへ格納
$requestUri = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

// ルーティングの実装
switch ($requestUri) {
    case '/':
        echo "正常に動作しています。";
        break;
// 省略
~~~
上記の記述では`$requestUri`が`/`の時に`正常に動作しています。`表示しています。

今回ローカル環境では、`Apache`というWebサーバが稼働しています。
`Apache`は`Webサーバ`で、ユーザーのブラウザからのリクエストを受け取り、HTMLファイルや画像などのファイルを提供します。

### 4. レスポンスの生成
PHPで生成された結果は、Apacheを通じてブラウザにレスポンスとして返されます。
- レスポンスの構成要素
  - ステータスコード: リクエストが正常に処理された場合、200 OKが返されます。
  - ヘッダー情報: コンテンツタイプ（例: text/html）や文字コード情報などが含まれます。
  - レスポンスボディ: 実際の表示内容（例: 正常に動作しています。）がここに含まれます。

### 5. ブラウザでの表示
ブラウザは受け取ったレスポンスを解析し、画面に表示します。<br>この時レスポンスボディに含まれる`正常に動作しています。`という文字列がそのままブラウザに描画されます

### 参考：ブラウザに文字列が表示されるまで

~~~mermaid
sequenceDiagram
    participant Browser as ブラウザ
    participant Apache as Apache (Webサーバ)
    participant PHP as PHP (スクリプト)
    
    Browser->>Apache: リクエストを送信
    Apache->>PHP: リクエストに応じてスクリプトを実行
    PHP-->>Apache: 実行結果を返す
    Apache-->>Browser: レスポンスを生成し送信
    Browser->>Browser: 画面に表示
~~~

## まとめ
### Apache
- リクエストを受け取り、どのリソースを返すかを判断します。
- 静的なリソース（HTMLや画像など）はそのまま提供します。
- 動的なリソース（PHPスクリプト）はPHPに処理を渡します。
### PHP
- リクエストに応じて動的にコンテンツを生成します。



3.ローカル環境の仕組み

3. 3.ローカル環境の仕組み