開発環境の作り方 – まとめページ

これまでに書いた開発環境の作り方についての記事をまとめています。

XAMPP

 

Node.js

 

React + webpack + ESLint

 

コーディング規約

 

エディター

XAMPPのアップデート方法

XAMPPで作成した開発環境をアップデートする方法を紹介します。

XAMPPはPHP、MariaDB、phpMyAdminなど複数のソフトウェアが含まれたパッケージですが、それらのソフトウェアを個別にアップデートするのはおすすめしません。手間がかかる上に正常に動作させるのに知識が必要になるためです。

XAMPPのアップデートは一度アンインストールしてから新しいバージョンをインストールする方法で行いましょう。設定ファイルの変更部分さえ覚えておけば、1、2時間ほどで新しいバーションに移行することが可能です。

手順-1 ファイルをバックアップする


まず現在のxamppフォルダのバックアップを取りましょう。Cドライブにあるxamppフォルダを他のドライブや、DVDなどのメディアにコピーしましょう。

必要なファイルのみバックアップしたいという方は、以下のファイルを保存してください。

  • xampp > htdocs > あなたが作成したフォルダとファイルのすべて
  • xampp > apache > conf > httpd.conf
  • xampp > php > php.ini
  • xampp > mysql > bin > my.ini
  • xampp > phpMyAdmin > config.inc.php
  • xampp > phpMyAdmin > libraries > config.default.php

当ブログのXAMPP記事を参考に設定を行った場合は、上記のファイルのみで大丈夫です。他の情報を参考に設定を行った場合は、その際に変更したファイルも保存しておいてください。

通常は xampp > htdocs 内にファイルを用意して開発を進めますが、もし違う場所に開発ファイルを保存している場合は、そちらも忘れずにバックアップしておきましょう。

※ バックアップのし忘れがあると取り返しがつきませんので、xamppフォルダごと保存することをおすすめします。

手順-2 データベースをエクスポートする


開発でデータベースを作成した場合は、データベースをエクスポートしましょう。データベースを作成していない場合は、この手順は省いてもらって構いません。

phpMyAdmin にアクセスしてください。コントロールパネルのMySQL右側のAdminボタンをクリックするか、ブラウザで http://localhost/phpmyadmin/ を開いてください。

 

phpMyAdmin トップページ

左側のナビゲーション部分にいろいろなデータベースが表示されていると思いますが、今回、保存するのはあなたが作成したデータベースのみです。それ以外のデータベースを保存する必要はありません。

左側のナビゲーションからあなたが作成したデータベースを選んでください。

 

データベースを開いたところ

次に画面上部のエクスポートと書かれた部分をクリックしてください。

 

エクスポート画面

この画面で実行ボタンをクリックすると、データベースがエクスポートされます。画像では gameusers というデータベースをエクスポートしていますので、gameusers.sql というファイルが作成されます。

このファイルはXAMPPアップデート後にインポートしますので、大事に保存しておいてください。

エクスポートするファイルについて細かく設定したい場合は、ラジオボタンで詳細を選んでオプションを設定してください。この設定にはデータベースの知識が必要になります。

作成したデータベースが複数ある場合は、上記の手順でデータベースそれぞれにエクスポート処理を行ってください。

手順-3 XAMPPをアンインストールする


XAMPPをアンインストールしましょう。

以下はWindows10の環境でソフトウェアをアンインストールする方法を解説しています。違うOSを利用している場合は、それぞれのOSのアンインストール方法を用いてください。

 

Windows10のタスクバー

Windows10の場合は左下タスクバーに アンインストール と入力してください。

 

スタートメニュー

プログラムと機能をクリックしてください。

 

プログラムのアンインストールまたは変更画面

プログラムのアンインストールまたは変更画面が開きますので、そこでXAMPPを選んでダブルクリックしてください。

 

Question

XAMPPをアンインストールしてもいいですか?と尋ねられますのでYesをクリックしましょう。さらに htdocsフォルダを削除するか聞かれますのでYesを選んで削除してください。手順-1ですでにバックアップを行っていますので削除しても大丈夫です。

アンインストール後に再起動が必要ですと表示された場合は、Windowsを再起動しましょう。これでアンインストールは終わりです。

手順-4 XAMPPをインストールする


XAMPPの新しいバージョンをインストールします。以下のサイトに移動してインストールしたいバージョンをダウンロードしてきましょう。

XAMPP ウェブサイト
https://www.apachefriends.org/jp/

インストールについてはこちらのページで詳しく解説しています。わからない場合はこちらをチェックしてみてください。

XAMPPのインストール方法を解説します

手順-5 XAMPPの設定を行う


XAMPPの設定を行いましょう。編集する内容は以下を参考にしてください。独自の設定を行っている方は、バックアップしたファイルを参考にしながら設定を行ってください。

  • xampp > apache > conf > httpd.conf

 

  • xampp > php > php.ini

  • Game Usersの開発に参加する場合

 

  • xampp > mysql > bin > my.ini

 

  • xampp > xampp-control.exe を管理者として実行する

xampp-control.exe にカーソルを合わせ、右クリックをしてみてください。するとメニューが現れますので、そこからプロパティを選んでください。

上のタブから互換性を選んでください。

管理者としてこのプログラムを実行するにチェックを入れてOKをクリックしてください。

 

  • MariaDB / MySQLのパスワードを設定

コントロールパネルを起動し、ApacheとMySQLを起動します。そしてパネル右側 Shell と書かれている部分をクリックしてください。

mysqladmin -u root password と入力してキーボードの Enter を押してください。

パスワードの入力を求められるので2度同じパスワードを入力して Enter を押してください。

 

  • xampp > phpMyAmin > config.inc.php

 

  • xampp > phpMyAmin > libraries > config.default.php

 

これでXAMPPの設定は終わりです。各設定について詳しく知りたい方は以下を参考にしてください。

手順-6 データベースをインポートする


手順-2でエクスポートしたデータベースをインポートしましょう。

phpMyAdmin にアクセスしてください。コントロールパネルのMySQL右側のAdminボタンをクリックするか、ブラウザで http://localhost/phpmyadmin/ を開いてください。

 

phpMyAdmin トップページ

画面上部にあるデータベースをクリックしてください。

 

データベースを作成する

データベース作成画面に移動するので、左のインプットフォームに作成するデータベースの名前を入力して、実行ボタンを押してください。

 

データベースが作成されました

データベースが作成されましたので、手順-2でエクスポートしたデータベースをインポートします。画面上部のインポートと書かれた部分をクリックしてください。

 

データベースをインポートします

アップロードファイルと書かれた部分の横に、ファイル選択と書かれたボタンがあると思います。そこをクリックして、手順-2でエクスポートした拡張子が .sql のファイルを選んでください。

ファイルを選んだら画面をスクロールし、一番下にある実行ボタンをクリックしてください。

 

インポート完了

インポートが正常に終わると画像のような画面が表示されます。他にもエクスポートしたデータベースがある場合は、同じ手順でインポートを行ってください。

これでデータベースのインポートは終わりです。

XAMPPのアップデート完了


最後に xampp > htdocs 内に手順-1でバックアップしたフォルダやファイルをコピーすればXAMPPのアップデートは終わりです。

開発をしていると開発環境に新たなソフトウェアをインストールしたり、設定ファイルを変更することがあると思います。その場合は必ずインストールしたソフトウェアや、変更した部分について記録を残しておきましょう。

自分がなにをインストールして、どこを変更したのか記録しておけば、次回、XAMPPをアップデートするときも同じ手順をたどって、素早く開発環境を作ることができるようになります。

長くなりましたが、お疲れ様でした!

 

XAMPP インストール・設定 関連記事

XAMPPの設定方法-4 phpMyAdmin

XAMPPのApache、PHP、データベースの設定が終わりましたので、最後に phpMyAdmin の設定を行います。

phpMyAdmin がなにかわからない人のために説明すると、これはデータベースをブラウザ上で簡単に扱うためのソフトウェアです。プログラムを始めたばかりの方はデータベースの存在価値があまりわからないと思いますが、それなりの規模のウェブサイトを作ろうと思うと、必ずデータベースは必要になります。

今、世の中で知名度のあるサイトの多くはデータベースを活用しています。

phpMyAdmin を使わない場合は、データベースの管理をコマンドプロンプト(黒い画面)でコマンドを打ちながら操作しなければならなくなります。これは本当に難易度の高い作業なので、絶対にデータベースの管理ソフトは利用した方がいいです。

ですので、最初はよくわからなくても使い方を頑張って覚えていきましょう!

phpMyAdmin(データベース管理ソフト)の設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そしてphpMyAdminというフォルダを開いて、config.inc.php というファイルを見つけてください。

phpMyAdmin(フォルダ) > config.inc.php(ファイル)

 

config.inc.phpファイル

config.inc.php をメモ帳またはエディターで開きましょう。エディターで開いたら、これまでの設定と同じようにメモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いてください。

 

検索ワード:$cfg[‘Servers’][$i][‘password’]

この ” 内に XAMPPの設定方法-3 データベース で入力したデータベースのパスワードを入力しましょう。上では ‘0123456a’ と書かれていますが、これはサンプルのパスワードです。同じものを入力しても正常に動作しません。

ここでパスワードを入力すると、phpMyAdmin からデータベースにログインして操作することができるようになります。

データベースをインポートする際の時間制限をなくす設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そして以下のフォルダを順番に開いていって、config.default.php というファイルを見つけてください。

phpMyAdmin(フォルダ) > libraries(フォルダ) > config.default.php(ファイル)

 

config.default.php ファイル

config.default.php をメモ帳またはエディターで開きましょう。エディターで開いたら、これまでの設定と同じようにメモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いてください。

 

検索ワード:$cfg[‘ExecTimeLimit’]

開発が進んでいくと大きなサイズのデータベースをインポートする必要が出てきたりするのですが、その際に時間制限に引っかかって処理が正常に完了しないことがあります。

通常は300秒(5分)でエラーが表示されてしまうのですが、この設定にすることで時間の制限がなくなり、データベースのインポート処理が完了するまでエラーが表示されなくなります。

phpMyAdmin にアクセスする


XAMPPのコントロールパネルで、MySQLと書かれている場所の右側にある Admin というボタンをクリックしてみてください。

コントロールパネルの Admin ボタン

ここをクリックすると phpMyAdmin のトップ画面に移動します。ブラウザのアドレスバーに http://localhost/phpmyadmin/ を入力して移動することもできます。

設定によって、ログイン画面がでることがあります。その場合は以下の情報を入力してください。

ユーザー名:root
パスワード: XAMPPの設定方法-3 データベースで設定したパスワード

 

phpMyAdmin トップ画面

ここからデータベースを操作することができます。データベースを新たに作成したり、データを入力したり、バックアップのためにデータベースをエクスポートしたり、様々な操作を行うことができます。

XAMPP の設定完了!


お疲れ様でした!

これでXAMPPの設定は終わりです。xampp > htdocs の中にフォルダを設置して開発を始めてみてください。

最後に XAMPP をアップデートする方法を紹介します。時間が経つと新しいバージョンに入れ替えたくなるので、アップデートしたくなったら、ぜひ次の記事もチェックしてみてください。

XAMPPのアップデート方法

XAMPP インストール・設定 関連記事

XAMPPの設定方法-3 データベース

XAMPPのApacheとPHPの設定が終わりましたので、次はデータベースの設定を行います。

MariaDB / MySQL(データベース)の設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そして以下のフォルダを順番に開いていって、my.ini というファイルを見つけてください。

mysql(フォルダ) > bin(フォルダ) > my.ini(ファイル)

my.ini ファイル

my.ini をメモ帳またはエディターで開きましょう。

 

my.ini をエディターで開いたところ

my.ini も英語だらけですが、Apache & PHP の設定と同じで、必要な部分を検索して書き換えるだけで設定は終わります。

メモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いて、必要な部分を検索しながら、以下のように書き換えてください。

#を3つ削除するだけです。

書き換えが終わったら忘れずに保存しましょう。

XAMPPのコントロールパネルを使う


次にXAMPPに用意されているコントロールパネルを使ってみましょう。エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そして xampp-control.exe というファイルを探してください。それがコントロールパネルの起動ファイルになります。

 

xampp-control.exe

まだ起動はしないで xampp-control.exe にカーソルを合わせ、右クリックをしてみてください。するとメニューが現れますので、そこからプロパティを選んでください。

 

xampp-control.exe のプロパティ

こういうウィンドウが表示されますので、上のタブから互換性を選んでください。

 

xampp-control.exe のプロパティ 互換性タブ

管理者としてこのプログラムを実行するにチェックを入れてOKをクリックしてください。これはなにを設定していたかというと、この xampp-control.exe をダブルクリックしたときに、毎回管理者として実行するように設定しています。

なぜそうする必要があるのかというと、環境によって Apache やデータベースが正常に起動しないことがあるのですが、管理者として起動した場合はそういう問題が起こらないためです。

xampp-control.exe をダブルクリックして起動してみましょう。

 

XAMPPのコントロールパネル

ユーザーアカウント制御の画面が出ると思いますので、はいを押してください。するとコントロールパネルが起動されます。次はコントロールパネル上で、Apacheと書かれている部分の右側にある Start をクリックし、続けてMySQLと書かれている部分の右側にある Start をクリックしてみましょう。

画像のように緑色の四角で文字が囲まれると、Apache とデータベースの起動が正常に成功したことになります。

これから開発を進めていく時は、このコントロールパネルを使うことになりますので、xampp-control.exe のファイルの場所は覚えておきましょう。デスクトップにショートカットを作ったり、ランチャーソフトに登録すると起動しやすくなるのでおすすめです。

MariaDB / MySQLのパスワードを設定


ここから少し難しくなるのですが、コマンドプロンプトを使ってデータベースのパスワードを設定します。

コントロールパネルの右側 Shell と書かれている部分をクリックしてください。

コントロールパネルの Shell

ここをクリックするとコマンドプロンプト(黒い画面)が立ち上がります。次にその画面で mysqladmin -u root password と入力してキーボードの Enter を押してください。

コマンドプロンプトに入力した状態

New password:
Confirm new password:

Enter を押すと、このように表示され、パスワードの入力を求められるので2度同じパスワードを入力して Enter を押してください。ここで入力するパスワードは、今後、あなたが開発するプログラムからデータベースを利用するときや、 phpMyAdmin (データベース管理ソフト)でログインするときに必要になりますので、忘れないようにしてください。

これでデータベースの設定が完了しました。次は phpMyAdmin の設定を行います。

XAMPPの設定方法-4 phpMyAdmin

XAMPP インストール・設定 関連記事

XAMPPの設定方法-2 PHP

XAMPPのApacheの設定が終わりましたので、次はPHPの設定を行います。

PHPの設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてください。そしてphpフォルダを開いて、php.iniというファイルを探してください。

php(フォルダ) > php.ini(ファイル)

php.iniファイル

見つからない場合は、php.ini-development というファイルをコピーして、php.ini にファイル名を変更してください。この時、php.ini-development 自体を編集しないように気をつけてください。

php.ini をメモ帳またはエディターで開きましょう。

 

php.iniをエディターで開いたところ

php.ini の中身も英語で難しそうに感じると思いますが、こちらも必要な部分を検索して書き換えるだけです。ただApacheの設定よりも書き換える部分が多いので頑張ってください。

メモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いて、必要な部分を検索しながら、以下のように書き換えてください。

upload_max_filesize / post_max_size / memory_limit の設定についてですが、これらはアップロードできるファイルの最大サイズを設定しています。256Mと書かれているのは、256メガバイトまでのファイルを一度にアップロードできるということです。

通常のウェブサイトではこんなに大きなファイルをアップロードすることはないのですが、上記で大きめの数字を設定している理由は、phpMyAdmin(データベース管理ソフト)でデータベースをインポート(インストールのような意味)する際に、ファイルサイズが大きい方が便利なためです。

開発が進んでいくと自然とデータベースのサイズは大きくなります。アップロードできるサイズが小さいと、データベースのインポート時にひっかかってしまうためです。

ただしスペックがあまり良くないパソコンを利用している場合は、ここの数字は小さめに設定しましょう。

この設定は以下の関係を維持してください。例えば memory_limit を post_max_size より小さな数字にしてはいけません。

memory_limit > post_max_size > upload_max_filesize

 

php.ini の書き換えがすべて終わったら保存しましょう。これでPHPの設定は終わりです。次はデータベースの設定を行います。

XAMPPの設定方法-3 データベース

Game Usersの開発用設定


Game Usersの開発に参加してくれる方は、こちらの設定を php.ini で追加で行ってください。

 

XAMPP インストール・設定 関連記事

XAMPPの設定方法-1 Apache

XAMPPのインストール自体は簡単なのですが、問題は設定が難しいことです。基本的な設定と日本語化について解説していますので、このページに書かれているとおりに設定してみてください。

最初はなんの設定なのかわからないし、間違えたらどうしようと不安になると思いますが、もし間違えて正常に起動しなくなったとしても、アンインストールして再度インストールしなおせばいいだけなので、気軽に設定してみましょう。

※ Cドライブに普通にインストールしたケースで解説しています。もし別の場所にインストールした場合は、その場所に置き換えて読んでください。例)Cドライブ → Dドライブ

Apache(Webサーバーソフト)の設定


エクスプローラーでCドライブを開き、その中のxamppフォルダを開いてみてください。

Windows10のエクスプローラーでxamppフォルダを開いたところ

いろいろなフォルダの一覧が表示されていると思いますが、以下のフォルダを順番に開いていって、httpd.confというファイルを見つけてください。

apache(フォルダ) > conf(フォルダ) > httpd.conf(ファイル)

 

confフォルダの中身、httpd.confというファイルが見えます

httpd.confをエディターで開きましょう。メモ帳でもOKです。

 

httpd.confをエディターで開いたところ

画像はAtomというエディターで開いたところです。メモ帳の場合は白い背景になっていると思います。英語が並んでいて不安になるかもしれませんが、気にしなくて大丈夫です。XAMPPの設定は必要な部分を検索して書き換えるだけなので、中身について理解する必要はありません。

メモ帳やエディターの画面でキーボードの Ctrl(コントロールキー)+ F(エフ)を押して検索ウィンドウを開いてください。メモ帳の場合は、上部メニューの編集をクリックすると、検索と書かれている部分が出てきますので、そこをクリックしても検索ウィンドウが開きます。

 

検索ウィンドウ

検索ワード:Listen

これを入力して検索すると書き換える必要のある場所が出てきます。Listen 12.34.56.78:80 もしくは Listen 80と書かれている部分を、Listen 127.0.0.1:80 に書き換えてください。

書き換えたら保存しましょう。これはセキュリティを強化する設定で、外部から開発環境のサーバーにアクセスできないようにするための設定です。

Apacheの設定はこれだけです。次はPHPの設定を行います。

XAMPPの設定方法-2 PHP

XAMPP インストール・設定 関連記事

XAMPPのインストール方法を解説します

簡単に開発環境を作れることで有名な XAMPP のインストール、設定、アップデートの方法を解説します。

XAMPPはPHPで開発する環境を簡単に作れるソフトウェアで、通称黒い画面と呼ばれているコマンドプロンプトを操作しなくても、GUIを用いてApache(Webサーバーソフト)やMariaDB(データベース)の起動・停止ができるようになります。

 

コマンドプロンプト

XAMPPを利用しない場合、この黒い画面で文字を入力しながら操作しないといけないため、慣れるまで苦労します。コマンドも覚えなければなりません。

 

XAMPPのコントローラー

Start、Stopをマウスでクリックするだけで、Webサーバーやデータベースを起動・停止させられるので操作が簡単です。

インストール方法


XAMPPを提供してくれているウェブサイトに移動しましょう。日本語化されていますので安心してください。

XAMPP ウェブサイト
https://www.apachefriends.org/jp/

このページの上部メニューにあるダウンロードをクリックしてください。

 

ダウンロードページに移動すると、Windows版、Linux版、OS X版があると思います。お使いのOSのところまでスクロールしてみてください。

バージョンは記事を書いている2017年3月23日時点では、この3つが並んでいます。

  1. バージョン:5.6.30
  2. バージョン:7.0.15
  3. バージョン:7.1.1

どれを選ぶのがいいかという問題ですが、これは開発したプログラムを公開するサーバーのPHPバージョンに合わせてください。例えばレンタルサーバーを借りていて、そこに入っているPHPのバージョンが5.6の場合は、ここで選ぶバージョンも5.6をおすすめします。開発環境と本番環境のバージョンが揃っていると、余計な問題が起きにくいためです。

もしレンタルサーバーのPHPのバージョンを新しいものに変更できる場合は、PHPを7.1に変更し、XAMPPのバージョンも7.1をダウンロードするのがいいでしょう。なぜかというと、PHPは5よりも7の方が動作が速いためです。同じプログラムでも7の方がキビキビと表示されるので、ウェブサイトに来てくれる方も快適に利用できます。

インストーラーのダウンロードが終わったら、インストールを行ってください。インストーラーを起動すると、いろいろ質問されますが、基本的にNextを押しているだけで大丈夫です。もしなにか間違えてしまったと思ったら、アンインストールして再度インストールするとやり直せます。

Windows版で普通にインストールを行った場合は、Cドライブにxamppというフォルダができています。

 

XAMPPがインストールされたWindows10のCドライブ

インストールが完了しましたので、次はXAMPPの設定を行います。

 

XAMPPの設定方法-1 Apache

XAMPP インストール・設定 関連記事