XAMPPのインストール方法を手順ごとにわかりやすく解説
cover
XAMPPのインストール方法を手順ごとにわかりやすく解説
アンドエンジニア編集部
2024.02.02
この記事でわかること
XAMPPはWebアプリ開発に必要なソフトウェアがひとまとめになったパッケージ
XAMPPの中にはApache、MariaDB、PHP、Perlの4つのソフトウェアが入っている
XAMPPは公式サイトからダウンロードしセットアップ画面に従って操作するだけで簡単にインストールできる

XAMPPとは?

img_xampp_01

XAMPPとはWebアプリ開発に必要なソフトウェアがひとまとめになったパッケージのことです。XAMPPをインストールするだけでWebアプリをすぐに開発することができ、面倒な設定なども必要なくなります。特に開発初心者の方は開発環境を構築する段階で挫折することも多いため、XAMPPを使って簡単に構築することをおすすめします。

なお、XAMPPは実際の開発現場では使われないことが多いです。なぜならPHPなどの新バージョンが発表されても、XAMPPに入っているソフトウェアは新バージョンに更新されないためです。とはいえ、開発の練習用としてはXAMPPは非常に便利ですのでぜひ使い方を覚えましょう。

【参考】:XAMPP Installers and Downloads for Apache Friends

Web業界で使われるXAMPPとは?特徴やメリット、注意点を解説

XAMPPで使えるソフトウェア

img_xampp_02

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

MySQLとは?特徴から使い方・学習方法まで詳しく解説!

PHP

PHPはWebアプリ開発で使われるプログラミング言語の1つです。PHPはWebサーバ上で動きブラウザと通信を行って、Webサイト表示に必要なデータの取得やデータベースの更新処理などを行います。PHPのメリットは学習コストが低く初心者でも簡単にマスターできる点です。CやJavaなどの言語と比べても文法が分かりやすく覚えることも少ないです。また、HTMLに直接埋め込んで使えるのメリットです。

PHPを使う場合公式サイトからインストールするのが一般的ですが、その場合設定ファイルを調整するなどの処理が必要で初心者にはややハードルが高いです。XAMPPなら細かい調整は必要なくすぐにPHPを利用できます。

【参考】:PHP: Hypertext Preprocessor

PHPとは一体何か?他のプログラミング言語と異なるポイントを解説!

Perl

PerlもPHP同様Webアプリ開発で使われているプログラミング言語の1つです。Perlは学習コストが低い上にソースコードの記述量が少ないのがメリットです。加えて、テキスト処理機能が豊富でありスクレイピングなども得意としています。

最近PerlはWebアプリ開発で使われることが少なくなってきました。とはいえ、Perlで作られた既存のWebアプリを改良する案件なども多くあるため、Perlのスキルが活きることもあります。PHPを勉強したらPerlを習得してみるのも良いでしょう。

【参考】:The Perl Programming Language - www.perl.org

XAMPPのインストール手順

img_xampp_03

XAMPPのインストール手順について解説します。ここではOSがMacの場合を基準にして解説しますが、WindowsやLinuxなどでもそこまで基本的な流れは変わりません。

Step1.XAMPPをダウンロードする

まず、XAMPPを公式サイトからダウンロードします。

【参考】:XAMPP Installers and Downloads for Apache Friends

img_xampp_04

公式サイトのトップページの緑色の「ダウンロード」欄から、お使いのパソコンのOSに合わせたものをクリックすると、ダウンロードが開始されます。他のページからでもダウンロードできますが、最新版がどれかわかりにくいのでトップページからダウンロードしましょう。

ただしMacの場合、bz2形式でダウンロードされるためファイルを解凍する必要があります。bz2形式を解凍できないという場合は、こちらのページからdmg形式版をダウンロードしましょう。

【参考】:XAMPP -  Browse /XAMPP Mac OS X at SourceForge.net

こちらのページから1番上の最新版をクリックし、次のページで「xampp-osx-☓.☓.☓-☓-installer.dmg」をクリックするとダウンロードが開始されます。

Step2.セットアップ画面を立ち上げる

XAMPPはダウンロードしただけでは使えず、インストールを行う必要があります。まず、ダウンロードしたファイルをクリックして、XAMPPのセットアップ画面を表示させましょう。セットアップ画面を開く際、パソコンのパスワード入力が求められることもあるため、正しく入力します。

img_xampp_05

Step3.インストールを行う

セットアップ画面を開いたら、XAMPPをインストールします。セットアップ画面の右下にある「next」を順番にクリックしていきましょう。XAMPPの細かい設定を行う画面が途中で出てきますが、気にせず「next」をクリックして先へ進めて問題ありません。XAMPPはデフォルト設定でも問題なく使えるようにできているからです。

「next」をクリックしていくとインストールが開始されるので、しばらく待ちましょう。インストールが完了すると右下に「Finish」が表示されるので、「Finish」をクリックしてセットアップ画面を閉じます。

これでXAMPPのインストールが完了しました。

Step4.インストールを確認する

インストールが完了したらXAMPPを起動させてみましょう。Finderを開き「アプリケーション」の「XAMPP」フォルダにある「manager-osx」のショートカットをクリックします。以下のような画面が立ち上がったらXAMPPが問題なくインストールされています。

img_xampp_06

XAMPPの使い方

img_xampp_07

続いて、XAMPPの基本的な使い方を解説します。Apacheを起動させてローカルサーバ内でWebアプリを動かす方法をみていきましょう。

Step1.Apacheを起動する

XAMPPの管理画面の上部から「Manage Servers」をクリックし、「Apache Web Server」をクリックし「Start」ボタンをクリックしてください。「Start」をクリックすると表示が「Starting…」に変わってApacheが起動されます。

img_xampp_08

Apacheが正常に動いていることを確認するために「http://localhost/index.php 」にアクセスしましょう。ブラウザの画面上に「XAMPP Apache + MariaDB + PHP + Perl」と表示されているならApacheは正常に動いています。

img_xampp_09

Step2.実験用ソースコードを作成する

続いて、画面上に任意の文字列を表示させてみましょう。テキストエディタを開き、次のように記述してください。

```<?php echo 'Hello World!'; ?>

```

こちらは1文字でも間違えると正しく動きませんので、コピー&ペーストすることをおすすめします。記述したらファイルを「HelloWorld.php」という名前でxamppフォルダの中の「htdocs」に保存します。保存先とファイル名が間違っていると正しく動かないのでこちらも真似して行いましょう。

Step3.実行結果を確認する

最後に、実行結果を確認します。今度は「http://localhost/HelloWorld.php 」にアクセスしてください。ブラウザの画面上に「Hello World!」と表示されているなら成功です。

img_xampp_10

その後はソースコード上の「Hello World!」を好きな言葉などに変更し、ブラウザを更新してみましょう。表示内容が変更されているはずです。このようにしてXAMPPを使ってWebアプリを開発します。

日本語が文字化けしてしまった場合の対処方法

ブラウザ上に表示される日本語が文字化けする場合、お使いのテキストエディタの文字コードが「UTF-8」になっているか確認してください。「UTF-8」以外だと文字化けしてしまう可能性があります。文字コードを変更したらファイルを保存し、ブラウザを更新して直っているか確認しましょう。

XAMPPをインストールしてWebアプリ開発をはじめよう!

img_xampp_11

本記事ではXAMPPのインストール方法について解説しました。XAMPPをインストールするだけで、Webアプリを開発する環境をすぐに整えることができます。細かい設定なども必要ないため、初心者でも特につまずくことなく行えるでしょう。

Webアプリ開発は需要が高くこれから更に伸びていくことが予想されます。Webアプリ開発に興味がある方はXAMPPを使ってプログラミングの勉強に取り組んでみてください。

XAMPPとは違う?DockerでのPHP環境構築方法を解説
気になる人のXをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

Sponsored
【無料個別転職相談会】アプリケーションエンジニア向け!リモート・在宅勤務で働きたい方へ
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
はじめて転職される方へ
SE・システムエンジニア(IT/通信/インターネット) 求人一覧

編集部おすすめコンテンツ

Sponsored
【無料個別転職相談会】アプリケーションエンジニア向け!リモート・在宅勤務で働きたい方へ
マイナビITエージェント
Sponsored

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT