サルワカさんのサイトで色々装飾できてきたわー面白い！自分のwebサイトとか作ってみたいと思った！でも、そもそもwebサイトの仕組みってどうなんだろう。。
まずはサーバーを作成して・・・アドレスを作成して・・・アップロードするための・・・・
サーバーかー・・・すみません。。仕組みから教えてもらっても良いですか？？
webサイトの仕組みがわかっていないと、せっかくカッコよくデザインしたファイルをアップロードできないよね。やっぱり色々やることがあって複雑なんだ。。でも理解すると単純なので、理解の仕方を覚えていこう！
webシステムの仕組み
もうここに関しては色んなyoutuberの人がわかりやすく動画にしてくれているのでみた方が早い。まこさんの説明がわかりやすいです。
なるほど〜わかりやすい。お気に入りにしよう！でも実際のwebアップまでの流れってどうなっているの？自分のPCでテストとかしなくて良いの？
理解度の速度が早いね！そしたら自分のPCに仮想開発環境を作成しweb表示の仕組みを理解しよう！
local開発環境を作成してシステムの仕組みを理解する。
ローカル環境とは、自分のPC上に構築する仮想環境です。インターネット上に公開されている本番環境とは異なる環境のため、本番環境に影響することはありません。
本番環境に限りなく近い環境を自分のPC上に構築して作業することで、本番環境にアップする前に動作確認やテストをしっかりと行った上で本番環境に反映することができます。
また、サーバーを用意したり、FTPソフトを使わなくてもWordPressを動かすことができるので、学習するにも最適な環境です。
この記事では、「 MAMP」というツールを使用してローカル環境を構築していきます。
「MAMP」は無料で利用でき、誰でも簡単にローカル環境を構築することができる超便利ツールです。
主な特徴としては、以下のようなものが挙げられます。
- 誰でも簡単にローカル環境が構築できる
- 外部に共有することができる
- Webサーバー、データベース、PHPのバージョンを選択することができ本番環境に限りなく近い環境を作れる
それではさっそくMAMPを使ってローカル環境を構築してきましょう！
MAMMPのインストール
まずは、公式サイト（https://localwp.com/）からMAMPをダウンロードしていきましょう。
公式サイトにアクセスし「FREE Download」をクリックします。
Start Serversを押すとサーバーが起動します。
MAMP
MY WEBSITEをクリックしてwebサイトを開く
MAMPのサイトが開きますが、本来ここにサーバーにアップロードした自分のサイトが表示されます。
以下htdocsフォルダに自分の作成した。index.htmlとstyle.cssファイルをドラックアンドドロップで入れてみましょう。今回はテストというhtmlファイルを用意しました。
<!DOCTYPE html>
<html>
<head>
<title>グラデ</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>システム開発勉強におすすめ独学法</h1>
<p>MAMPローカル環境</p>
</body>
</html>/Applications/MAMP/htdocs/index.html
もう一度リロードもしくはOpen Webstart pageをクリックする。MAMPのwebサーバーに作成したhtmlが表示されました。これはwebサービスのアップロードにあたります。上部URL表示が「localhost:8888」ありますね。これは8888というポート番号に開発環境を作成したことにななります。これで開発環境にファイルをアップロードされました。
おーこれがサーバーを動かしてhtmlを表示させている状態なんだね！自分でやっってみると理解度が違うね
実際もwebサーバーというものがあって、その中にhtmlファイルやcssファイルが存在するんだ。
まとめ
他にもXampやLocalなど言語の特性によって分けたりする為、様々なローカル開発環境があります。
local環境で
次回はphpを使用して動的にファイルを動かしてみようと思います。
