XAMPPとは?
XAMPPとはWebアプリ開発に必要なソフトウェアがひとまとめになったパッケージのことです。XAMPPをインストールするだけでWebアプリをすぐに開発することができ、面倒な設定なども必要なくなります。特に開発初心者の方は開発環境を構築する段階で挫折することも多いため、XAMPPを使って簡単に構築することをおすすめします。
なお、XAMPPは実際の開発現場では使われないことが多いです。なぜならPHPなどの新バージョンが発表されても、XAMPPに入っているソフトウェアは新バージョンに更新されないためです。とはいえ、開発の練習用としてはXAMPPは非常に便利ですのでぜひ使い方を覚えましょう。
【参考】:XAMPP Installers and Downloads for Apache Friends
XAMPPで使えるソフトウェア
XAMPPの中にはApache、MariaDB、PHP、Perlの4つのソフトウェアが入っています。XAMPPのインストール方法の前に、4つのソフトウェアの概要について解説します。
Apache
Apacheは無料で使えるWebサーバソフトの1つです。パソコンはそのままの状態だとWebサーバとして使えませんが、Apacheを使うとWebサーバとして他のパソコンにサービスを提供できるようになります。ApacheはOSに依存せず使える上に処理速度も早いため、Webアプリ開発で主流となっています。XAMPPでは管理画面からすぐにApacheを起動させてWebアプリを開発できるようになっています。
【参考】:Welcome! - The Apache HTTP Server Project
MariaDB
MariaDBはMySQLやSQLiteと同じデータベース管理システムです。データベースに格納されたデータを更新したり削除したり、あらゆる操作を行うことができます。MariaDBの名前を聞いたことがない人もいるかもしれませんが、Mysqlとさほど使い方が変わらないので、MySQL経験者ならすぐに使いこなせるでしょう。
【参考】:MariaDB Foundation - MariaDB.org
PHP
PHPはWebアプリ開発で使われるプログラミング言語の1つです。PHPはWebサーバ上で動きブラウザと通信を行って、Webサイト表示に必要なデータの取得やデータベースの更新処理などを行います。PHPのメリットは学習コストが低く初心者でも簡単にマスターできる点です。CやJavaなどの言語と比べても文法が分かりやすく覚えることも少ないです。また、HTMLに直接埋め込んで使えるのメリットです。
PHPを使う場合公式サイトからインストールするのが一般的ですが、その場合設定ファイルを調整するなどの処理が必要で初心者にはややハードルが高いです。XAMPPなら細かい調整は必要なくすぐにPHPを利用できます。
【参考】:PHP: Hypertext Preprocessor
Perl
PerlもPHP同様Webアプリ開発で使われているプログラミング言語の1つです。Perlは学習コストが低い上にソースコードの記述量が少ないのがメリットです。加えて、テキスト処理機能が豊富でありスクレイピングなども得意としています。
最近PerlはWebアプリ開発で使われることが少なくなってきました。とはいえ、Perlで作られた既存のWebアプリを改良する案件なども多くあるため、Perlのスキルが活きることもあります。PHPを勉強したらPerlを習得してみるのも良いでしょう。
【参考】:The Perl Programming Language - www.perl.org
XAMPPのインストール手順
XAMPPのインストール手順について解説します。ここではOSがMacの場合を基準にして解説しますが、WindowsやLinuxなどでもそこまで基本的な流れは変わりません。
Step1.XAMPPをダウンロードする
まず、XAMPPを公式サイトからダウンロードします。
【参考】:XAMPP Installers and Downloads for Apache Friends
公式サイトのトップページの緑色の「ダウンロード」欄から、お使いのパソコンのOSに合わせたものをクリックすると、ダウンロードが開始されます。他のページからでもダウンロードできますが、最新版がどれかわかりにくいのでトップページからダウンロードしましょう。
ただしMacの場合、bz2形式でダウンロードされるためファイルを解凍する必要があります。bz2形式を解凍できないという場合は、こちらのページからdmg形式版をダウンロードしましょう。
【参考】:XAMPP - Browse /XAMPP Mac OS X at SourceForge.net
こちらのページから1番上の最新版をクリックし、次のページで「xampp-osx-☓.☓.☓-☓-installer.dmg」をクリックするとダウンロードが開始されます。
Step2.セットアップ画面を立ち上げる
XAMPPはダウンロードしただけでは使えず、インストールを行う必要があります。まず、ダウンロードしたファイルをクリックして、XAMPPのセットアップ画面を表示させましょう。セットアップ画面を開く際、パソコンのパスワード入力が求められることもあるため、正しく入力します。
Step3.インストールを行う
セットアップ画面を開いたら、XAMPPをインストールします。セットアップ画面の右下にある「next」を順番にクリックしていきましょう。XAMPPの細かい設定を行う画面が途中で出てきますが、気にせず「next」をクリックして先へ進めて問題ありません。XAMPPはデフォルト設定でも問題なく使えるようにできているからです。
「next」をクリックしていくとインストールが開始されるので、しばらく待ちましょう。インストールが完了すると右下に「Finish」が表示されるので、「Finish」をクリックしてセットアップ画面を閉じます。
これでXAMPPのインストールが完了しました。
Step4.インストールを確認する
インストールが完了したらXAMPPを起動させてみましょう。Finderを開き「アプリケーション」の「XAMPP」フォルダにある「manager-osx」のショートカットをクリックします。以下のような画面が立ち上がったらXAMPPが問題なくインストールされています。
XAMPPの使い方
続いて、XAMPPの基本的な使い方を解説します。Apacheを起動させてローカルサーバ内でWebアプリを動かす方法をみていきましょう。
Step1.Apacheを起動する
XAMPPの管理画面の上部から「Manage Servers」をクリックし、「Apache Web Server」をクリックし「Start」ボタンをクリックしてください。「Start」をクリックすると表示が「Starting…」に変わってApacheが起動されます。
Apacheが正常に動いていることを確認するために「http://localhost/index.php 」にアクセスしましょう。ブラウザの画面上に「XAMPP Apache + MariaDB + PHP + Perl」と表示されているならApacheは正常に動いています。
Step2.実験用ソースコードを作成する
続いて、画面上に任意の文字列を表示させてみましょう。テキストエディタを開き、次のように記述してください。
```<?php echo 'Hello World!'; ?>
```
こちらは1文字でも間違えると正しく動きませんので、コピー&ペーストすることをおすすめします。記述したらファイルを「HelloWorld.php」という名前でxamppフォルダの中の「htdocs」に保存します。保存先とファイル名が間違っていると正しく動かないのでこちらも真似して行いましょう。
Step3.実行結果を確認する
最後に、実行結果を確認します。今度は「http://localhost/HelloWorld.php 」にアクセスしてください。ブラウザの画面上に「Hello World!」と表示されているなら成功です。
その後はソースコード上の「Hello World!」を好きな言葉などに変更し、ブラウザを更新してみましょう。表示内容が変更されているはずです。このようにしてXAMPPを使ってWebアプリを開発します。
日本語が文字化けしてしまった場合の対処方法
ブラウザ上に表示される日本語が文字化けする場合、お使いのテキストエディタの文字コードが「UTF-8」になっているか確認してください。「UTF-8」以外だと文字化けしてしまう可能性があります。文字コードを変更したらファイルを保存し、ブラウザを更新して直っているか確認しましょう。
XAMPPをインストールしてWebアプリ開発をはじめよう!
本記事ではXAMPPのインストール方法について解説しました。XAMPPをインストールするだけで、Webアプリを開発する環境をすぐに整えることができます。細かい設定なども必要ないため、初心者でも特につまずくことなく行えるでしょう。
Webアプリ開発は需要が高くこれから更に伸びていくことが予想されます。Webアプリ開発に興味がある方はXAMPPを使ってプログラミングの勉強に取り組んでみてください。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから