【初心者向け】MAMP(マンプ)を使って開発環境を構築する方法

いぬ

プログラミング初心者だと、最初の壁が開発環境を構築するところだと思います。エディターにコードを書いたとしても、それがどう動いているかwebに表示してみないことには始まりません。

【記事の要約】数ある中でもMAMP(マンプ)が一番楽に環境構築できます。(主にMAC向けの内容です。)

OSがwindowsでもMAMPを利用できますので大丈夫です。

本記事では、以下の内容を解説します。

本記事の内容

・簡単に開発環境を構築したいのならMAMP(マンプ)がおすすめです。

・開発環境　＝　コードを書いてどう動くのか試す場です。

・環境構築が一番最初につまづいた所でした。

ドキュメントルート？環境構築？？仮想環境？？？

「さぁて！気合い入れてプログラミング始めるぞ！！」と思ったものの、広いネットの世界で欲しい情報を探そうとすると、意外と初心者向けなドンピシャな情報が無いんですよね。

【誤字が過ぎたので再送】プログラミング初心者の環境構築の手段は、やっぱりMAMPが一番楽だと思う。いきなりLinuxとかでやれちゃうなら話しは別なんだけど、独学してる人にとっては環境構築って最初の関門だと思うんだよね。みんな、開発環境は何使ってるの？

— (インフラ)エンジニアのいぬ (@inuengineer) October 22, 2019

この記事を読むと分かること

拘らないのであれば「とりあえず」開発環境を作れます。
最初は何でもいいから「動かす」ことが大事です。
情報が多すぎて取捨選択が困難ですが、とにかく「とりあえず」が肝心！

都内で、主にPHPを使ってwebサイトを作る仕事をしています。

思い返せば1年前、プログラミングを独学し始めた際に最初に壁にぶち当たったのが【環境構築】でした。

エディターに書いたコードは、Google Chrome などを使えば簡単にweb上に表示させることは可能です。でもそれだと単に書いたコードの動作確認にしか利用できません。

書いたコードを保存して、行く行くはポートフォリオにしたいはずです。

独学した学習を全て将来のために使うのであれば開発環境は必要になります。

環境構築とは、自分の作業場を確保することだと思ってください。

Google Chrome などでwebブラウザに表示させるだけでは、保存したり好きなタイミングでデータを展開することにいささか難有りなのです。

簡単ではありますが、ここで最低限の開発環境構築について備忘録に残したいと思います。

1 一番簡単な環境構築はMAMP(マンプ)
2 MAMPをインストールする
3 MAMPを起動する
4 ブラウザでコードを表示してみる
- 4.1 具体的にどうするか？
5 まとめ

一番簡単な環境構築はMAMP(マンプ)

Linux、XAMPP、MAMPと、開発環境を整える選択肢はたくさんあります。　(他にもある)

参考までに、僕のPCと通信環境

【PC】2013年製、Mac Book Air13インチ

【通信】ポケットwi-fi(3日で3ギガしか使えないやつ)

職場ではLinuxを使って仮想環境を作っています。主にwindowsで、VPSなど使ってやっているのですがそれを個人で、家庭環境で再現するにはコストと手間がちょっと必要になります。

開発環境も、自身のPCの性能も考慮して(主に容量の問題)検討しなければならない中、全ての条件を手軽に満たしているものと言えばMAMPです。

色々試してみましたが、MAMPが一番楽チンでした。

PCのスペックや、通信環境がもっと良いのであればLinuxでApacheとかnginxを使ってやった方が断然今後の為になるはずです。

ただここで直面するのは、初心者でも迷わず環境構築できるのか？という点が一番重要だと思います。

目的はあくまで「プログラミング学習」であって、「高性能な開発環境」ではありません。

なのでここは一旦「とりあえず」を選択して、手を動かすことに専念します。

因みにMAMP(マンプ)とは、Macintosh,Apache,MySQL,PHPの頭文字を取って命名されています。(確か…違ったらすみません。)

Macintoshと言うとMacのことを言っていますが、windowsでも利用できるのでご安心ください。

基本的に無料で利用でき、容量も軽めなので初心者にとっては願ったり叶ったりの環境と言えるでしょう。

基本的に無料というのは、高性能な有料版があるからなのですが、ぶっちゃけ無料版で十分だと思っています。

MAMPをインストールする

ここ↓から、インストールへと進みます。

MAMPのインストール(公式サイト)

次にどのOSのインストールを行うか選択します。

選択後、インストールが開始されます。

インストール後、以下の画面よりセットアップを進めていきます。

同意を求められるところまで「続ける」を選択し、進みます。同意しないとインストールできないので同意しましょう。

インストールには約1.5G必要になります。

問題なければ「インストール」からインストールを開始します。

ご自身のユーザ名とパスワードを入力してください。

無事にインストールが完了すると「インストーラ」を捨てるか聞かれますので捨てちゃいましょう。

インストール後、「Applications(アプリケーション)」にMAMPをドラッグして移動させます。

次に「Finder(ファインダー)」→「Applications(アプリケーション)」と進みMAMPを見つけてください。

ありましたね。

右側にある「MAMP PRO.app」は触らなくてOKです。

MAMPを起動する

先ほどの「MAMP」フォルダを開くと今度は「MAMP.app」がありますのでこいつをダブルクリックして開きます。

すると、こいつが出てきます。

じゃん！

MAMPを起動している状態でMacの画面上に出ているメニューの「MAMP」から色々いじっていきます。

「Preferences」を開きます。

左から順に、General、Ports、PHP、Web Server、MySQL、Cloudとなっています。

Generalは以下の通り。

特に難しい設定はありませんので☑️がついているところを参考にOKを選択してください。

続いて、Ports。

ApacheとnginxとMySQLのポートを任意の数字に設定します。

ポートとは？

ポートとはインタネット通信をする時に用いられる用語です。難しい話は置いておいて、要は通信する時にそれぞれの信号を識別する為の番号です。もっと言うと、自分の専用の開発環境に振り分ける数字ですかね？

僕はApacheは「8080」にして、nginxは「80」、MySQLは「3306」にしています。IPアドレスは性質上人と同じ番号はあり得ません。ポート番号とIPアドレスと違うので混同しないようにしてください。ローカル開発環境(個人の開発環境)ですので、僕と同じ番号にしちゃっても平気です。

続いて、PHP。

ここではPHPの現在のバージョンを選択します。

2019年10月現在では、バージョン「7.3.7」が最新です。なるべく最新にしといたほうがいいです。変なエラーが出にくいので。

続いて、WebServer。

よほどのことがない限りApacheでいいです。

「Document Root」ですがここは説明が必要ですね。

ドキュメントルートとは？

ドキュメントルートは、簡単に言うと外部に公開するデータがある場所です。

自身でwebサイトを作って行くとたくさんのファイル(ディレクトリ)が出来上がります。階層やファイルの位置がどんどん複雑になっていくと、ブラウザなどに「どこからどこまでを表示してください。」とお願いするのも難しくなってきます。

そんな時に「ここからここまではみんなに見てもらってOK!!でもこっちはダメ。」というのを選ぶ道筋をドキュメントルートと言います。

このドキュメントルートはある程度は決まっています。

もちろんMAMPでも最初からドキュメントルートは決まっていて、「Applications/MAMP/htdocs」になっていたかと思います。

この「htdocs」の下にindex.htmlとか、index.phpのファイルを作って置いておけばブラウザに表示されます。

時に、「上で説明したドキュメントルート以外の場所にファイルを置きたい！」場合が出てくる時があります。

そうした際に新たなドキュメントルートを設定してあげないと、コンピューターは開発者の意図したファイルを参照してくれません。

つまりドキュメントルートを設定する場合、①素直にドキュメントルート直下にファイルを置く場合と、②自分で新しいドキュメントルートを設定する場合があります。

では今回はどうするか？というと、①で問題ないです。

「Applications/MAMP/htdocs」の「htdocs」ファイルの中にソースコードなどを保存していけばOKです。

ドキュメントルートはそのうち(複数サイトを一度に作成する時など)、嫌でも設定していくことになります。

MAMPは非常に親切で、このドキュメントルートを感覚的に分かりやすく設定することが可能です。

初心者がMAMPを使うべきだと思う理由の一つに、このドキュメントルート設定問題があるからでして、ドキュメントルートでつまづきたくなければMAMPをおすすめします。

もし②のケースで、自身でドキュメントルートを変更する場合には、「Document Root: Select」の「Select」からどのファイルを参照して欲しいのか設定してください。

続いて、MySQL。

ここではMySQLのバージョン確認だけなので特に何も触らなくて良しです。

続いて、Cloud。

ここは後から触ります。MAMPインストール直後はDB(データベース)をまだ作成していないので何も選択できないはずです。(僕の場合、既に「db8080」というDBを作成しているので出てます。)

DBを作成したら、開発中のコードとDBを紐づける際に必要になるので今はスルーします。

これで、一通り簡単に設定しました。

ブラウザでコードを表示してみる

最低限ですが、ある程度設定してきたのでここでブラウザに表示させて見たいと思います。

なんでも良いので適当に「htmlファイル」的なノリの奴を作ります。

(めんど臭い人は以下をコピペします。インラインでごめんなさい。CSSがあった方が盛り上がると思ったんです。CSSは後ほど別ファイルに移すなどしてください。僕的にイケてるバナーのCSSだと思うので良かったら参考にしてください。)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
	<title>ブラウザに映してみよう！</title>
		<style>
		h1 {font-size:30pt;
			height:auto;
			width:auto;
			margin: 0px 0px 10px 0px;
			padding: 0px 20px;
			color: #fff;
			background: linear-gradient(to bottom, #aaa 2%, #fff 98%);
			box-shadow: 0 1px 1px rgba(0,0,0,0.3);}
		p {font-size:14pt;
			color: #666;}
		</style>
</head>
<body>
	<header class="row">
		<h1>どうだろか？</h1>
	</header>
	<div class="row">
		<p>みえたでしょうか？？</p>
	</div>
</body>
</html>

エディタでは、こんな感じで。