E-4. 開発環境を整えよう！

ローカルでの開発環境の構築

アプリやWeb開発では、普段見ている画面の裏側で「サーバ」というコンピュータが処理を行っています。私たちが書いたプログラム（コード）を動かすには、本来サーバ上で実行する必要があります。

しかし、効率や環境を考慮し、自分のパソコンの中の「ローカル環境」という仮想的な小さなサーバを作ることが一般的です。

ローカル環境があれば、インターネットに接続していなくても、自分のパソコンの中で自由にコードを実行・テストできます。これは、自分の部屋に実験室を作るようなイメージです。

ローカル環境での開発は、効率が良く、安全にテストできるため、アプリやWeb開発を学ぶ上で非常に重要です。

今回はXAMPP（ザンプ）を使って環境を構築を行います。

サーバーとは？

アプリやWeb開発は、裏側のシステム（サーバサイド）と、ユーザーが直接操作する画面（フロントエンド）の両方が重要です。

サーバサイドでは、データベースやサーバーサイドの言語（PHP、Javaなど）が使われます。これらのプログラムを動かすためにはサーバが必要です。

サーバとは、利用者の要求に応じてデータを提供するコンピュータやプログラムのことです。例えば、SNSアプリの新規会員登録で入力した名前やメールアドレスなどの個人情報は、データベースという場所に保管されます。このデータベースが保管されている場所がサーバです。

（パソコンとサーバがデータをやり取りする際には、SQLという特別な言語が使われます。）

一方、フロントエンド開発では、HTML（骨組み）、CSS（見た目）、JavaScript（動き）などの技術を使い、ユーザーが見やすく、使いやすい画面を作ります。

開発を行う際には、自分のパソコンにローカル環境という仮想的なサーバを作り、インターネットに接続していなくても、コードの実行やテストを自由に行えるようにします。ローカル環境では、サーバサイドの処理だけでなく、フロントエンドの表示や動きもすぐに確認できるため、効率的に開発を進められます。

このように、アプリやWeb開発は、サーバサイドとフロントエンドが連携して動作しており、それぞれの開発においてローカル環境を活用することが、効率的で質の高い開発に繋がります。

仮想サーバーとは？

仮想サーバを分かりやすく説明するために、対比である物理サーバーと比較して説明します。

物理サーバーとは、
その名の通り、物理的＝実体のあるサーバーです。
物理サーバーは価格も高く、サーバーを置くための場所代もかかり、ネット回線も引かないといけません。

一方仮想サーバーとは、
その名の通り、仮想＝実体がなく、インターネット上にサーバーを立てています。
そのため、個人開発でしようする程度であれば、無料で使用可能ですし、
サーバーを置く場所代もかからず、PC内の設定のみで使用可能です。

（それぞれのメリットでメリットはありますがここでは割愛します。）

そしてこれからインストールするXAMPP/MAMPは「仮想サーバー」といい、
完全に無償でMySQL・ MariaDB・PHP、および Perl といったデータベースや言語を簡単にインストールできる Apache ディストリビューションです。
この後、MySQLの学習を行いますが、MySQL＝データーベースのためサーバーを立てる必要があります。

次にXAMPP・MAMPそれぞれのインストール方法になりますが、
ご自身のPCが、
・Windowsの場合は、XAMPPの説明
・MacBookの場合は、MAMPの説明
を元にインストールをしましょう。

XAMPP（ザンプ）の導入

Windows使用の方はXAMPPをインストールしてください！

簡単にローカル環境に設定できるPHP開発環境です。完全に無償で MariaDB、PHP、および Perl を含んだ、簡単にインストールできる Apache ディストリビューションです。

こちらでは、Windowsを基準に導入説明をしています。

ダウンロードサイトはこちら→XAMPP公式

インストールしていくと以下のコントロールパネルが表示されます。

詳しいインストール方法は、こちらにあります。XAMMPの使い方

Apach MySQLの実行

pache,MySQL,FileZilaの「Start」ボタンを押下する。起動した後、http://localhost/をブラウザでURLを入力して確認してください。

※補足：最近のサーバ環境はApacheよりnginxを使われることが多いです。なので、nginxがどういったものか知っておきましょう。

コンテンツがブラウザに表示されます。localhostは、PC内の現在使用しているシステムを示しています。自分自身のホスト名を示しています。

自動起動させるなどを行いたい場合は、XAMPPの使い方を参考にしてください。

PHPを確認しよう！

「PHPInfo」メニューをクリックして下さい。

XAMPP内にあるPHP情報が表示されます。

htdocsフォルダを探す

「PHPInfo」メニューをクリックすると
下記画像が表示されているか確認してください。
（今は使用しませんが、今後PHP学習を行うため確認）

XAMPPが正しく動作しているかブラウザで確認

GoogleChromeを開き、http://localhost/　と入力したときに、
下記の画像が表示されればXAMPPは問題なく動作しています。

index.phpを作成・設置しよう！

DOCUMENT_ROOTに C:/xampp/htdoc (設定した場所によって異なります。)の場所を探してください。

上記の内容をVScodeを使用しindex.phpとして新しいファイルで作成してください。

参考: VScodeでファイルを作成・保存

作成が完了したらC:/xampp/htdocのフォルダ内に設置し、

ブラウザで、http://localhost/からどのように表示されているか確認して下さい。

注意：XAMPPのコントロールパネルでApacheがstartされていないとhttp://localhost/で反映されません。

MAMPインストール方法（MacBookユーザー）

MacBook使用の方は下記サイトを参考に、MAMPのインストールをしてください。

なおMAMPインストールは、
公式サイト遷移後「Free install」選択し、
→Appleの方は「MAMP＆MAMP PRO 6.8(Apple)」を選択してインストール
→Intel使用の方は「MAMP＆MAMP PRO 6.8(Intel)」を選択してインストール
（自身がどちらをしようしているかは「システム環境設定」から確認できます。）

MAMPのインストール方法

PHPを確認する

XAMPP/MAMPのインストールが終わったら、
「Start」ボタンを押下しMAMPを起動させます。
Startボタンが「Stop」となったら、MAMP自体は正常に起動しています。
その後、飛行機の「Web Start」ボタンを押下します。

公式サイトに遷移後、
「PHP > phpinfo」を押下し、下記画像が表示されているか確認してください。
（今は使用しませんが、今後PHP学習を行うため確認）

※個人情報を含むのため黒塗りにしています

MAMPが正しく動作しているかブラウザで確認

GoogleChromeを開き、localhost:8888　と入力したときに、
下記の画像が表示されればXAMPPは問題なく動作しています。

index.phpを作成・設置しよう！

DOCUMENT_ROOTに Application/MAMP/htdocs (設定した場所によって異なります。)の場所を探してください。

上記の内容をVScodeを使用しindex.phpとして新しいファイルで作成してください。

参考: VScodeでファイルを作成・保存

作成が完了したらApplication/MAMP/htdocsのフォルダ内に設置し、

ブラウザで、http://localhost/からどのように表示されているか確認して下さい。

課題

下記の①サンプルHTMLの＜body＞内に、②サンプルPHPの内容を埋め込み作成し、XAMPPはhttp://localhost/(MAMPはlocalhost:8888)で反映させてください。

①サンプルHTML

②サンプルPHP

XAMPP(MAMP)で表示して完了したら、htdocs直下にフォルダ（フォルダ名p1-1）を作成し、その中にindex.phpファイル格納してフォルダを提出してください。

ヒント

上記の説明通りにファイル保存ができていれば、

XAMPP使用の方→http://localhost/p1-1/index.php

MAMP使用の方→localhost:8888/p1-1/index.php

と打ち込むと表示される。

ブラウザに表示された画面のスクリーンショット（下記画像①のように）とIndex.phpファイル、両方合わせてご提出ください。

実行結果

課題・復習用検索キーワード

検索例

🔍php echo 意味

🔍php PHP_EOL とは

🔍ローカルサーバー　ソフトウェア

参考