関連記事
プログラマーのためのサーバーの基礎
2020.02.06
2020.09.09
XAMPPのセットアップ手順（プログラミング環境構築）
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は「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をダウンロードします。
なお、今回の手順は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にアクセスしてみましょう。
このようなページが表示されれば、XAMPPは正常に動いています。
画面右上の「phpMyAdmin」という部分をクリックしてみましょう。
これは、データベースの管理ツールです。
これを使ってデータベースにテーブルを作成したり、データの登録を行ったりします。
これで、あなたのパソコンでWebプログラムを実行出来る環境が整いました。
使い終わったあとは
上記と逆の手順で、起動したものをストップしていきましょう。
全て停止したらXAMPP自体も終了してOKです。
プログラミングを行う前は、毎回以下の手順で起動を行います。
①XAMPP起動→②各種サービス起動→③ネットワーク有効化
以上でXAMPPのインストールは完了です！
前回セットアップした「ATOM」と、今回セットアップした「XAMPP」の2つのツールを使って、Webプログラミングを行っていくことができるようになりました。
ATOMについてはこちらの記事をご覧ください。
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
