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

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起動→各種サービス起動→ネットワーク有効化を行います。

Webプログラミングを行うには、前回セットアップした「ATOM」と、今回セットアップした「XAMPP」の2つのツールを使います。

ATOMについてはこちらの記事をどうぞ

関連記事

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


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