フルスタックエンジニアのノウハウ
2020.02.06    2020.04.23

XAMPPのセットアップ手順(プログラミング環境構築)

XAMPPのセットアップ手順(プログラミング環境構築)

こんにちは、徳田 啓です。
Webプログラマー歴20年、【フルスタックエンジニア マスター講座】を運営しています。(生徒数1,800名突破)


今回は、「XAMPP」というツールをパソコンにインストールして、自分のパソコンにWebプログラムが動く環境を作ってみましょう。


この記事の動画版はこちら

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



XAMPPってなに?


Webプログラムを動かすためには、エンジンとなる「Webサーバー」や、データを保存するための「データベースサーバー」が必要です。

※サーバーについて詳しくはこちらの記事をどうぞ

関連記事

プログラマーのためのサーバーの基本【基礎編】


レンタルサーバーを借りれば、これらのサーバーソフトは最初からセットアップされています。

ただ、プログラミングをしている段階では、作っては動作確認、という作業を何度も行うため、毎回レンタルサーバーにプログラムをアップロードするのは面倒です。

  • そこで、自分のパソコンにもプログラムが動く環境を作って開発を進めていきます。


ここで活躍するのが「XAMPP(ザンプ)」というツールです。

XAMPPという名前は、以下のような言葉の頭文字になっています。
  • 【X】クロスプラットフォーム(Windows/Mac/Linuxに対応)
    【A】Apache(Webサーバー)
    【M】MySQL(データベースサーバー)
    【P】PHP(PHP言語)
    【P】Perl(Perl言語)

この名前の通り、Webプログラミングに必要なサーバーソフトがまとめて入っている便利な開発者向けパッケージツールです。このツールを自分のパソコンにインストールするだけで、Webプログラムの動作環境が整ってしまいます。

Windows、Macどちらでも使えて、しかも「無料」です。

今回はこの「XAMPP」を自分のパソコンにインストールして使えるようにしてみましょう!


XAMPPのインストール方法


まずは以下のサイトにアクセスします。
https://www.apachefriends.org/jp/index.html

「ダウンロード」という部分から、自分のパソコン用のXAMPPをダウンロードします。

  • 僕は今MacBookAirを使っているので、以下の手順はMac向けになります(Windows向けも要望が多ければ書きます)


ダウンロードしたファイルをクリックして実行すると、このような画面が開くので、XAMPP.appというアイコンを左のフォルダへドラッグ&ドロップします。



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


早速起動してみよう!


右側のフォルダをダブルクリックすると、アプリケーションフォルダが開きます。

その中にある「XAMPP.app」をダブルクリックして起動しましょう。

以下のような確認メッセージが表示された場合は「開く」をクリックします。




XAMPPが起動しました。

まずは、「Start」ボタンを押してXAMPPを起動しましょう。


このように、Statusアイコンが緑になればOKです。


次に、各種サーバーソフトを起動します。Servicesタブをクリックしましょう。

この画面で、ApacheやMySQLなどの各種サーバーソフトを起動出来ます。
Start All」ボタンをクリックして全て起動しましょう。


アイコンが全て緑色になれば起動完了です。

最後に、Networkタブをクリックします。

localhost:8080 -> 80 (Over SSH)を選択して「Enable」ボタンをクリックします。


アイコンが緑色になればOKです。

これで、全ての起動が完了したので、以下のURLにアクセスしてみましょう。
http://localhost:8080

このようなページが表示されれば、XAMPPは正常に動いています。


画面右上の「phpMyAdmin」という部分をクリックしてみましょう。

これは、データベースの管理ツールです。
これを使ってデータベースにテーブルを作成したり、データの登録を行ったりします。


これで、あなたのパソコンでWebプログラムを実行出来る環境が整いました。


使い終わったあとは


上記と逆の手順で、起動したものをストップしていきましょう。
全て停止したらXAMPP自体も終了してOKです。

プログラミングを行う前は、毎回以下の手順で起動を行います。
  • ①XAMPP起動→②各種サービス起動→③ネットワーク有効化


以上でXAMPPのインストールは完了です!

前回セットアップした「ATOM」と、今回セットアップした「XAMPP」の2つのツールを使って、Webプログラミングを行っていくことができるようになりました。

ATOMについてはこちらの記事をご覧ください。

関連記事

プログラミングにはATOMを使え


おすすめ記事
無料メルマガ配信中