プログラミング

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

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

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

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

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

本記事の内容

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

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

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

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

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

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

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

この記事を書いている人

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

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

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

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

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

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

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

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

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

MAMP25

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をインストールする

ダウンロード, アイコン, シンボル, インストール

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

MAMP1

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

MAMP2

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

MAMP3

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

MAMP4 MAMP5

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

MAMP6

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

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

MAMP7

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

MAMP8

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

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

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

MAMP9

ありましたね。

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

MAMPを起動する

スタートアップ, 起動します, ビジネス, 開始, 起動, 技術革新, 電球

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

MAMP10

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

MAMP11

じゃん!

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

MAMP12 MAMP13

「Preferences」を開きます。

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

Generalは以下の通り。

MAMP14

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

続いて、Ports。

MAMP15

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

ポートとは?

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

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

続いて、PHP。

MAMP16

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

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

続いて、WebServer。

MAMP17

よほどのことがない限り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。

MAMP18

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

続いて、Cloud。

MAMP19

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

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

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

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

Seo, レスポンシブ, ウェブサイト, 写真, ウェブ

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

なんでも良いので適当に「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>

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

MAMP20

ブラウザではこんな感じ。

MAMP21htmlファイルを作成したら、きちんとドキュメントルートの適切な箇所に保存してください。(例えば「Application/MAMP/htdocs」などのドキュメントルート。)

よくあるうっかりミスとして、①ドキュメントルートが設定できていない場合や、②単なる保存ミスの場合があると思います。

保存できたら次に進みます。

具体的にどうするか?

MAMPが起動したら以下の順番で確認していきます。

MAMP22

①Start Serversをクリック

②上から順番に、Apache Server、MySQL Server、Cloudと並んでいます。○の色が変わるので待つ。

③「Open WebStart page」の文字の色が濃くなるまで待つ。

MAMP23

①をクリックしてMAMPを起動すると上の画像のようになります。ね、諸々色が変わってるでしょう。

次に③の「Open WebStart page」をクリックするとこうなります。

MAMP24

上の「MY WEBSITE」を叩くと、先ほど書いたhtmlファイルがブラウザに表示されます。

出なかったら、上のURLの箇所に「http://localhost:8080/(自分で作成したhtmlファイル名)」を入力してください。

(ここもうっかりポイントです。ファイル名を指定しないと開かない場合もあります。僕の場合、ファイル名をhello.htmlにしているので結果的に「localhost:8080/hello.html」となっています。)

MAMP21

じゃん!

ここまで問題なく動かせたのであれば、環境構築完了です!!

個人の開発環境は構築できたと見て間違い無いでしょう。あとはコードを書きまくって、学習を進めるのがいいです。

本を使って学習するのがおすすめです。

僕は一番最初はこの本を買って学習しました。

いちばんやさしいPHPの教本 第2版 人気講師が教える実践Webプログラミング 「いちばんやさしい教本」シリーズ

分かりやすくて非常に勉強になりました。

ここまで進めて、もし上手く行かない場合には、ググるなりして問題解決を図ってみてください。

手順書通りにやったのにエラーが出てしまうなんてことはザラです。エンジニアは日々謎のエラーとの格闘だと思ってググってください。

いぬ
いぬ
応援してます!

一番の難所は「ドキュメントルート」だと思います。

まとめ

記事のポイントをまとめます。

今回はMAMPを最低限のところまで設定することを目的としました。その後の開発環境のカスタマイズはお任せします。

やるべきことはコードを書くことなので。

開発環境構築について
  1. 初心者はMAMPを使うと比較的簡単です。
  2. 目的はコードを書くことであって、環境構築ではありません。
  3. 今は「とりあえず」でOK

僕が独学で開発環境を構築しようと思った時には、文系でも理解できる内容で、かつ簡単な環境構築の方法がありませんでした

開発環境とか、仮想環境とか、ドキュメントルートなんて知らない言葉だし、聞きたくても何をどう聞いていいのかすら分かりませんでした。

ブラウザに表示させるところまでの説明は随所で見かけますが、書いたコードを資産として保存する方法については環境構築以外には無いと思います。(GitHubもそのうち触るので、Gitでもいいかもしれません。)

一人でも多くのエンジニアを目指す人が、迷わずコードを書くところまでスムーズに進んでほしいなと思っています。

比較的簡単で、一回体験すれば今後の理解のステップになるMAMPの環境構築について書いてみました。

1㎜でも参考になれば幸いです。

いぬ
いぬ
ここまで読んでくれて、
どうもありがとう!