ご自身のパソコン（ローカル）上で実際にPHPのプログラミングをする準備をします。簡単なプログラムの実行まで体験してみましょう。

PHPコース

PHPでWebアプリを作ろう

PHPのローカル開発準備（環境構築）

# はじめに
これからPHPについて学んでいきます。

- PHPはどのように使われているのか
- PHPにはどんな特徴があるのか

といった内容を説明します。
わからないところがあっても気にせず、まずは読み進めてみてください。
そして、実際に手を動かして試してみることを心がけましょう。

## PHPとは？
PHPは、Webアプリケーションを作るために広く使われているプログラミング言語です。特に以下のような場面でよく使われています。
- 動的なWebサイトの作成: ユーザーが入力した情報をもとに、内容が変わるページを作ることができます。（例: ブログや掲示板）
- オンラインショッピングサイト: カート機能や注文処理など、ECサイトの多くがPHPで作られています。
- CMS（コンテンツ管理システム）: WordPressのようなツールを支える技術として使われています。
- データベースとの連携: ユーザー情報や投稿内容などをデータベースに保存し、それを使って効率的にWebアプリケーションを動かします。
- APIの構築: 他のサービスと情報をやりとりするための仕組みを作ることもできます。（例: 天気予報のデータ提供API）

## PHPの特徴
- 動的Webページの生成: PHPはサーバーサイドで動作するため、ユーザーの入力に応じた動的なWebページを簡単に生成できます。
- 簡単で学びやすい: シンプルな文法と豊富なチュートリアルが用意されているため、初心者にも学びやすい言語です。
- データベース連携が得意: MySQLやPostgreSQLなど、さまざまなデータベースと簡単に連携でき、データを効率的に扱うWebアプリケーションを構築できます。
- オープンソース: PHPは無料で使用でき、コミュニティも活発で、ドキュメントやサンプルコードが豊富です。
- クロスプラットフォーム: PHPで作成したプログラムは、WindowsやMac、Linuxなど、ほとんどのサーバー環境で動作します。
- フレームワークが豊富: LaravelやSymfonyなど、多機能なフレームワークが用意されており、効率よく高度な開発が可能です。

## なぜPHPを学ぶの？
- Web開発の基礎を学べる
PHPは多くのWeb技術の基本を学ぶのに適しています。
- 就職や案件獲得に有利
世界中で利用されており、特に中小企業やスタートアップでの需要が高いです。
- 幅広い利用シーン
動的なWebサイトからAPI、データベース操作まで、多彩な分野で活用可能です。

## PHPで何ができる？
- Webアプリケーション: Facebook（初期段階）やWikipediaのような動的なWebサービス
- CMS構築: WordPressやDrupalを使ったブログや企業サイト
- ECサイト: MagentoやPrestaShopによるオンラインショッピングサイト
- API開発: モバイルアプリやWebサービスと連携するバックエンドの構築
- 企業システム: SugarCRMなど、中小企業向けの業務管理システム

## PHPを始めるには？
PHPのプログラムを動作させるための環境を用意する必要があります。
   - PHPをインストールする。(※)
   - IDEを選ぶ
     - IDEはVisual Studio CodeやPHPStormなどが人気です。
#### (※チュートリアル内でPHPはインストールするため別途インストールの必要はありません)

## チュートリアルの目的
このチュートリアルでは、PHPを使って簡単なプログラムを作る環境を整える方法を説明します。主には、以下のことを学びます。

1. PHP環境の構築
2. 簡単なPHPプログラムの作成
3. 作成したプログラムの実行

チュートリアルをスムーズに進めるためには以下の点に注意しましょう。

- 指示されている手順通りかどうか、手順を飛ばしていないか
- 画面のスクリーンショットがある場合、設定内容などをよく確認して説明通りの設定になっているか
- ソースコードがある場合、記述内容を確認(特に大文字／小文字、ピリオド／カンマ、カッコの対応など)

このチュートリアルを終えると、あなたは自分でPHPでプログラムを作る準備が整います。初心者の方でも安心して進められるように、わかりやすく説明していきますので、一緒に頑張りましょう！


はじめに

## 必要なソフトウェアのインストール（開発の準備）
### Docker Desktopとは？
Docker Desktopは、アプリケーションを簡単に実行できるツールです。PHPだけでなく、他のプログラミング言語やアプリケーションも動かすことができます。WindowsやMacにインストールすることで、環境設定が簡単になり、すぐにアプリケーションを実行できるようになります。今回は、PHPの開発環境を作成するためにDocker Desktopを利用します。

## Docker Desktopのダウンロード
1. https://www.docker.com/ja-jp/products/docker-desktop/ よりダウンロードします。
![docker desktop](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/b93f8145-a531-4dca-b3c4-4132f2ba7bc8.png)
#### 注意事項
- ご自身の**CPU**にあったDocker Desktopをダウンロードしてください
  - CPUの確認方法：**Windows**の場合
    - 1. スタートメニューを開き検索ボックスに「cmd」と入力し**コマンドプロンプト**を開きます。
    - 2. 次のコマンドを実行：`echo %PROCESSOR_ARCHITECTURE%` 
    - 3-1. AMD64 と表示された場合、`Windows用をダウンロード - AMD64` をダウンロードしてください
    - 3-2. ARM と表示された場合、`Windows用をダウンロード - ARM64`をダウンロードしてください
  - CPUの確認方法：**Mac**の場合
    - 1. 「Finder」から「アプリケーション」 > 「ユーティリティ」 > 「ターミナル」を選択してターミナルを開きます。
    - 2. 次のコマンドを実行：`uname -m` 
    - 3-1. x86_64 と表示された場合、`Mac版のダウンロード - Intelチップ` をダウンロードしてください
    - 3-2. arm64 と表示された場合、`Mac版のダウンロード - Apple Silicon`をダウンロードしてください

## Docker Desktopのインストール
1. ダウンロードしたDocker Desktopのファイルをダブルクリックし、インストール画面に沿ってインストールの実施。

### Macの場合
1. Docker.appをドラッグ&ドロップでApplicationsへフォルダへ移動
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/d2b42eb0-d4bd-4e88-ae16-248af4fd67f3.png)
2. LaunchPadを開き、**Docker** アイコンを探してクリック
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/3c457de3-0000-4334-9af8-662f4b6a1eae.png)
3. (初回起動のみ)次のような表示が出る場合は開くを実行
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/4a7a386f-34b9-4128-8aed-76377c57443b.png)
4. (初回起動のみ)ログインを促されるがSkipを押下
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/ddeb8eec-da40-4a65-a025-8ae2ec87e595.png)
5. docker dektopの画面が起動したら完了
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/7bd196e5-54af-4b68-a794-f196f96ba8d1.png)

次回以降はLaunchPadからDockerアイコンをクリックして起動してください

### Windowsの場合
ダウンロードしたインストーラーを起動し、次へ進むを押していきインストールしてください

必要なソフトウェアのインストール（開発の準備）

# PHPプログラムの作成
このセクションではDockerを用いて簡単なPHPのプログラムを実行できる環境を用意しましょう。
※本レッスンではVisualStudioCode(VSCode)を利用します。

## Dockerで利用するファイルの用意
### フォルダの作成
1. 任意の場所へ`PHPLocalLesson`というフォルダを作成
2. VSCodeのファイル > フォルダーを開くで `PHPLocalLesson`を選択
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/afab9ecc-b78d-4bf4-8cd2-63e9a07d07ae.png)

### Dockerfileとdocker-compose.ymlの作成
Dockerにどのようなプログラミング環境を用意したいのか指示するためのファイル(Dockerfileとdocker-compose.yml)を作成します。
それぞれのファイルの内容は覚える必要はなく、プログラミングの環境を用意するための設定が記載されているということだけ覚えておきましょう。
1. VSCodeのファイル > 新しいファイル あるいは画面中央の新しいファイル を選択
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/924f6c56-0c2c-46c0-8429-92ac7d4c004d.png)
2. ファイル名に`Dockerfile`と入力し、ファイルを作成
3. ファイルへ以下の記述をコピーし、保存
~~~txt~Dockerfile
# PHP 8.2 CLI をベースイメージに使用
FROM php:8.2-cli

# 作業ディレクトリを設定
WORKDIR /app

# 組み込みWebサーバーを起動
CMD ["php", "-S", "0.0.0.0:8000", "-t", "/app"]
~~~

4. VSCodeのファイル > 新しいファイル あるいは画面中央の新しいファイル を選択
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/924f6c56-0c2c-46c0-8429-92ac7d4c004d.png)
5. ファイル名に`docker-compose.yml`と入力し、ファイルを作成
6. ファイルへ以下の記述をコピーし、保存
~~~yml~docker-compose
version: '3.8'

services:
  app:
    build:
      context: .
    ports:
      - "8000:8000" # ホスト側の8000番ポートをコンテナの8000番にマッピング
    volumes:
      - .:/app # ホスト側のカレントディレクトリをコンテナ内の/appにマウント
~~~


## テストコードの準備
PHPの環境が用意できた際に動作に問題がないかを確かめるために簡単なPHPのコードを用意します。
今回はHello, World!と出力するプログラムを記載しましょう。
1. VSCodeのファイル > 新しいファイル あるいは画面中央の新しいファイル を選択
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/924f6c56-0c2c-46c0-8429-92ac7d4c004d.png)
2. ファイル名に`index.php`と入力し、ファイルを作成
3. ファイルへ以下の記述をコピーし、保存
~~~php~index
<?php
echo "Hello, World!";
~~~

## Dockerイメージの作成と起動
Dockerで必要なファイルを上記で用意したので実際に利用していきます。
1. Docker Desktopを起動
2. VSCodeの下部にあるターミナルタブを選択
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/0d54425a-460a-4d5b-9d6a-c2d5e0cd44b4.png)
3. 次のコマンドを入力してDockerイメージをビルド
~~~bash
docker compose up --build
~~~
4. `[+] Running 2/0`のような表記が出れば完了です。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/355abb5f-8e95-4884-871e-0af104413921.png)
5. 次のURLヘアクセスしてください
http://localhost:8000/
6. Hello, World! と表示されていれば成功です！

PHPの環境構築

# カウンターアプリを作ろう
それではより実践的なアプリケーション実装としてカウンターアプリを実装してみましょう。

### 完成イメージ
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/5b58ac24-443b-4ff8-8cd8-fb6d0652ee95.png)

## 仕様
カウンターアプリは主に3つの要件があります。要件に沿った実装をしましょう。
### 仕様1. +ボタンを押すとカウンターの値が1増加します
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/43db4a7c-0a49-4a07-81df-3153bfa2dfb6.png)

### 仕様2. -ボタンを押すとカウンターの値が1減少します
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/c0aea18c-5682-4b18-aa11-ca68eda19987.png)

### 仕様3. リセットボタンを押すとカウンターの値が0になります
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/d9b7530a-16c9-4622-8c03-24dbcf70e53c.png)

## スターターコード
フロントエンド(画面に表示される部分)は実装済みです。
以下のコードをベースに対応1~4の実装をしてみましょう。

~~~php~index
<?php
// 初期値
$currentValue = 0; // 現在のカウント数

// 対応1. 現在のカウンター数を取得してください
// ヒント: $_POST['result'] を利用して、前回の値を引き継ぐことができます。

// 対応2. +ボタンが押された場合の処理を追加してください
// ヒント: $_POST['plus'] が送信されている場合に値を増やします。

// 対応3. −ボタンが押された場合の処理を追加してください
// ヒント: $_POST['minus'] が送信されている場合に値を減らします。

// 対応4. リセットボタンが押された場合の処理を追加してください
// ヒント: $_POST['reset'] が送信されている場合に値を0にします。


?>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>カウンターアプリ</title>
</head>

<body>
  <form action='index.php' method='post'>
    <h2>カウンターアプリ</h2>
    <ol>
      <li>+ボタンを押すと、カウンターの数が1増えます。</li>
      <li>-ボタンを押すと、カウンターの数が1減ります。</li>
      <li>リセットボタンを押すと、カウンターの値がリセットされます。</li>
    </ol>
    <h3>カウンター</h3>
    <p>実行：
      <button type='submit' name='plus' value='plus'>+</button>
      <button type='submit' name='minus' value='minus'>−</button>
      <button type='submit' name='reset' value='reset'>リセット</button>
    </p>
    <p>
      結果：
      <?php echo $currentValue; // 現在の値を表示します ?>
      <input type='hidden' name='result' value=<?php echo $currentValue; ?>>
    </p>
  </form>
</body>

</html>

~~~

## スターターコードの解説
- 変数`$currentValue`は現在のカウンター数が入ります。
- form内に定義されているボタン(`+`、`-`、`リセット`)を押下すると`index.php`へ`post`メソッドが送信されます。

## 実装について
スターターコード内に対応1~4として記載されている内容を実装してみましょう。
### 対応1. 現在のカウンター数を取得してください
- カウンター数はフォームが送信された際に`result`という名前で送信されます。
~~~html
<input type='hidden' name='result' value=<?php echo $currentValue; ?>>
~~~
- 送信された値は`$_POST['result']`として取得できます。
- 変数`$currentValue`の値を$_POST['result']で更新しましょう。

### 対応2. +ボタンが押された場合の処理を追加してください
- +ボタンが`押下されていた場合`は`$_POST['plus']`に値が格納されます。
- 押下されていた場合のみ変数`$currentValue`の値をインクリメント(1増加)しましょう。

### 対応3. −ボタンが押された場合の処理を追加してください
- -ボタンが`押下されていた場合`は`$_POST['minus']`に値が格納されます。
- 押下されていた場合のみ変数`$currentValue`の値をデクリメント(1減少)しましょう。

### 対応4. リセットボタンが押された場合の処理を追加してください
- リセットボタンが`押下されていた場合`は`$_POST['reset']`に値が格納されます。
- 押下されていた場合のみ変数`$currentValue`の値を0に更新しましょう。


カウンターアプリを作ろう

# カウンターアプリの実装確認
カウンターアプリケーションはうまく実装できましたか？
以下はサンプルコードです。自分の実装と見比べてみましょう。
## 解答例
~~~php~index
<?php
// 初期値
$currentValue = 0; // 現在のカウント数

// 対応1. 現在のカウンター数を取得してください
// ヒント: $_POST['result'] を利用して、前回の値を引き継ぐことができます。
if (isset($_POST['result'])) {
  $currentValue = (int)$_POST['result'];
}

// 対応2. +ボタンが押された場合の処理を追加してください
// ヒント: $_POST['plus'] が送信されている場合に値を増やします。
if (isset($_POST['plus'])) {
  $currentValue++;
}

// 対応3. −ボタンが押された場合の処理を追加してください
// ヒント: $_POST['minus'] が送信されている場合に値を減らします。
if (isset($_POST['minus'])) {
  $currentValue--;
}

// 対応4. リセットボタンが押された場合の処理を追加してください
// ヒント: $_POST['reset'] が送信されている場合に値を0にします。
if (isset($_POST['reset'])) {
  $currentValue = 0;
}

?>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>カウンターアプリ</title>
</head>

<body>
  <form action='index.php' method='post'>
    <h2>カウンターアプリ</h2>
    <ol>
      <li>+ボタンを押すと、カウンターの数が1増えます。</li>
      <li>-ボタンを押すと、カウンターの数が1減ります。</li>
      <li>リセットボタンを押すと、カウンターの値がリセットされます。</li>
    </ol>
    <h3>カウンター</h3>
    <p>実行：
      <button type='submit' name='plus' value='plus'>+</button>
      <button type='submit' name='minus' value='minus'>−</button>
      <button type='submit' name='reset' value='reset'>リセット</button>
    </p>
    <p>
      結果：
      <?php echo $currentValue; // 現在の値を表示します 
      ?>
      <input type='hidden' name='result' value=<?php echo $currentValue; ?>>
    </p>
  </form>
</body>

</html>

~~~

## 実装中にエラーが発生した場合
実装中に以下のようなエラーが発生したかもしれません。
![image](https://prod-code-lesson-api.s3.ap-northeast-1.amazonaws.com/cms/4a4b5c14-9de9-41f3-a3f7-947465d05c70.png)
#### 例：index.phpの4行目の末に`;`が抜けていた場合の表示例

PHP ではエラーの該当箇所を教えてくれることが多いです。
上記の場合index.phpの4行目に`;`がない可能性があることを示唆しています。
この指示に沿ってエラーを解消していく流れを`トラブルシューティング`といいます。

## トラブルシューティングの基本的な流れ

トラブル（エラーが表示される/期待した実行結果と異なるなど）が発生したときは気持ちが焦っていたり混乱したりしがちです。まずは落ち着きましょう。深呼吸するなり、コーヒーを飲むなりして、客観的に物事を捉えることに意識を集中しましょう。
&nbsp;
### トラブル発生時の基本的な流れ

1. まずは何をしたのか（操作内容/入力内容など）そして、どのような結果となったのか正確に把握しましょう。また、どうしたら同じトラブルが再現できるか、注意深く振り返りましょう。
2. エラー情報等が表示されている場合は、エラーメッセージを注意深く読み、どんなエラーなのか、発生している場所はどこなのか確認しましょう。
3. コンソールやログに何かしらおかしな記録が残っていないか注意深く確認しましょう。
4. 得られた情報を元にトラブルの原因を類推し、対応方法をいくつか検討しましょう。
5. 考えた対応方法を試してみましょう。
6. トラブルが解消できるまで１から繰り返して下さい。


5. カウンターアプリの実装確認