フルスタックエンジニアのノウハウ
2020.06.09    2020.11.01

開発環境構築と初めてのPHPプログラム作成(Windows版)

この記事の動画版はこちら(画像クリックでYoutubeに飛びます)

チャンネル登録お願いします!


今回は、自分のパソコンに開発環境を構築して、初めてのPHPプログラムを動かすための方法をご説明します。


これからWebプログラミングを学んでいきたい方は、最初の1歩としてぜひチャレンジしてみてくださいね。


Webアプリを動かすためには「サーバー」が必要


PHPで作ったWebアプリを動かすためには「Webサーバー」というものが必要になります。

また、アプリで扱うデータを保存しておくためには「データベースサーバー」が必要になります。




レンタルサーバーには、これらはあらかじめセットアップされていますが、プログラミングをしている時、動作を確認する度にレンタルサーバーにアップロードするのは手間です。


そこで、自分のパソコンにこれらのサーバーをインストールして開発環境を構築し、プログラミングと動作確認は、自分のパソコン上で行っていくのが一般的です。


そしてアプリがある程度完成したら、レンタルサーバーなどの本番環境にアップするといった流れですね。


ちなみに、自分のパソコンの開発環境のことを「ローカル環境」と言ったりします。


ということで、ローカルの開発環境を構築していきましょう!


ローカル開発環境の構築手順


今回は、XAMPPというツールを使って構築していきます。




XAMPPは、簡単な手順で「Webサーバー」と「データベースサーバー」が一気にインストール出来てしまう便利なツールです。プロの現場でも多くの開発者が利用しています。


それでは早速、XAMPPをインストールしてみましょう。


まずは、以下のリンクからXAMPPのページにアクセスします。


XAMPPのダウンロード
https://www.apachefriends.org/jp/index.html


Windows向けのダウンロードボタンをクリックします。




ダウンロードが完了するまで少し待ちましょう。

完了したら、ダウンロードされたファイルをクリックして実行します。




このような確認メッセージが表示されたら「はい」をクリックします。




ここから、インストールの開始です。

基本的にはボタンを押していくだけなので、確認しながら一緒に進めていきましょう。


ステップ1


この画面は、お使いの環境によっては表示されない場合がありますが、表示された場合は「Yes」をクリックします。





ステップ2


ここは「OK」をクリックします。





ステップ3


そのまま「Next」をクリックします。




ステップ4


コンポーネントの選択画面が表示されますが、何も変更せず「Next」をクリックします。





ステップ5


インストール先を聞かれますが、何も変更せず「Next」をクリックします。





ステップ6


言語はEnglishが選択されている状態で、そのまま「Next」をクリックします。





ステップ7


画面中央に表示されているチェックを外してから「Next」をクリックします。




ステップ8


そのまま「Next」をクリックします。





ステップ9


インストールが始まりますので、完了するまでしばらく待ちましょう。

ここは結構時間がかかります。





ステップ10


この画面が表示されればインストールは完了です。

画面にあるチェックボックスにチェックを付けたまま「Finish」をクリックします。




XAMPPが起動すると、このような画面が表示されます。




いくつか行が並んでいますが、


1番上の「Apache」というのがWebサーバーで

2番目の「MySQL」というのがデータベースサーバーになります。


Webプログラミングには、これら2つを使います。


サーバーを起動する


早速、これらを起動していきましょう。


Apacheの「Start」ボタンをクリックします。

正常に起動すると緑色になります(ボタンは「Stop」に変わります)




なお、先程の確認メッセージがこのタイミングで表示されることもあります。

このような画面が表示されたら「アクセスを許可する」をクリックします。




続いて、MySQLも「Start」ボタンをクリックします。

このように、2つとも緑色になれば起動完了です。




ブラウザで確認


ブラウザでアクセスして確認してみましょう。


ブラウザを起動して、アドレス欄に「localhost」と入力してEnterを押します。




このような画面が表示されれば、XAMPPは正常に動作しています。




タスクバーのXAMPPアイコンを右クリックし、タスクバーにピン留めするをクリックしておくと、次回からは、このアイコンをクリックすればXAMPPを起動することが出来ます。




これで、XAMPPのインストールは完了です。


XAMPPのインストールフォルダを確認


XAMPPのフォルダがどこにあるか確認しておきましょう。


Windowsのエクスプローラを表示し、Cドライブの中を見ると「xampp」フォルダがあります。

これがXAMPPがインストールされた場所です。




さらにその中を見てみると「htdocs」というフォルダがあると思います。




このフォルダが「ドキュメントルート」という特別なフォルダに設定されており、ここにファイルを置くと、ブラウザから確認出来るようになります。



これから作成するPHPプログラムはここの場所に置いていきます。



PHPファイルを設置してみよう!


それでは、ここに初めてのPHPファイルを作成してみましょう。


ATOMエディタを起動し、新規ファイルを作成します。




内容に「hello」と打ち込み、保存します。




ファイル名は「hello.php」として、先程のhtdocsフォルダの下に保存します。




保存したら、ブラウザで確認してみましょう。


http:/localhostの後ろに/で区切ってhello.phpと指定してアクセスしてみましょう。


http://localhost/hello.php




画面に先ほど書いた「hello」の文字が表示されましたね。




このように、PHPプログラムを書いてこの場所に保存すると、URLでアクセスして動作を確認することが出来ます。


 これで、自分のパソコンにPHPの開発環境が構築出来ました。


これからPHPプログラムを書いたら、この手順で動作を確認していきます。


また、データベースも使える状態になっていますので、本格的なPHPアプリを作っていくことも可能です。


この開発環境を活用しながら、たくさんプログラムを作っていきましょう!


おすすめ記事