まふ雑記

気になったこと、共有したいことをなんでも書きます。

【MacOS】ローカルでHTMLの開発をする方法

【MacOS】ローカルでHTMLの開発をする方法

Webエンジニアっぽい記事も書きます。まふゆです。

MacOSってApache入ってるから簡単にHTMLのローカル開発できるなぁと思ったのですが、調べてみると意外と一連の流れがまとまってなかったりするんですよね。

なので今回は、ターミナルでファイルを作って、テキストエディタで開いて編集、ブラウザで確認という一連の流れを書いていきます。

ローカルでの開発手順

【MacOS】ローカルでHTMLの開発をする方法

もう一度ざっと一連の流れを確認します。

1. ターミナルでファイルを作成
2. テキストエディタで開いて編集
3. ブラウザで確認

簡単3ステップ!

情報がまとまっていないとめんどくさくて諦めちゃうことありますからね。

HTMLのローカルでの開発はここだけ見ればできるように書いていきます。

1. ターミナルでファイルを作成

まずはターミナルでファイルを作成します。

ターミナルの場所は、アプリケーション→ユーティリティの中にあります。

【MacOS】ローカルでHTMLの開発をする方法

ターミナルを開いたら、

cd /Library/WebServer/Documents

上のコマンドを入力してください。(コピペでもOKです。)

このコマンドでDocumentsディレクトリに移動しました。

【MacOS】ローカルでHTMLの開発をする方法

/Library/WebServer/Documentsという今いる場所にファイルを作ることで、ローカルでの開発ができるようになります。

ファイルの作り方は、

touch index.html

上のコマンドになります。

今回は初めてということで、index.htmlというファイル名にしました。

ls

と入力して、inedx.htmlがあることを確認してください。

ここまでで、ファイルの作成が完了しました。

2. テキストエディタで開いて編集

ファイルは作りましたが、そのままターミナルでHTML書いていくのはめんどくさいです。

使いこなせるようになるとめちゃくちゃ効率良いらしいですけどね。それはまた別の話。

やっぱり自分の使いやすいテキストエディタで開発するのがベターでしょう。

さっき作ったindex.htmlをテキストエディタで開くために、ファイルがあるディレクトリを開きます。

open -R index.html

上のコマンドを入力すると、index.htmlがあるディレクトリが開かれます。

【MacOS】ローカルでHTMLの開発をする方法

そのままindex.htmlを右クリック(指2本でパッドをクリック)して、「このアプリケーションで開く」にカーソルを合わせると、開くテキストエディタを選ぶことができます。

お好きなテキストエディタでindex.htmlを開きましょう。

これでようやく、開発ができますね。

それではさっそく、HTMLを書いていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="content-type" charset="utf-8">
	<title>test</title>
</head>
<body>
        <p>テストページです。</p>
</body>
</html>

上のコードをコピペしてしまいましょう。

そのままファイルを上書き保存(cmd + s)で編集完了です。

パスワードを求められたら、PCを起動するときに使っているパスワードを入力します。

3. ブラウザで確認

それではブラウザで確認します。

ブラウザで確認するためにはWebサーバーを立てる必要があり、Apacheというソフトウェアがその役割を果たしてくれます。

MacOSには標準で備わっているので、起動するだけです。

ターミナルに戻って、

sudo apachectl start

上を入力すると、Apacheが起動します。

ちなみに停止は

sudo apachectl stop

です。

Apacheが起動したので、いよいよブラウザでの確認です。

ブラウザを開いて、URL欄に

localhost

と入力してアクセスします。

「テストページです。」と書かれたページが出てきましたか?

【MacOS】ローカルでHTMLの開発をする方法

これでブラウザでの確認が完了です。

まとめ

【MacOS】ローカルでHTMLの開発をする方法

うまくいきましたかね。

ローカルで開発することってなにかとあると思うし、プログラミング初心者とかは開発環境の構築が必要ないので導入に最適なのではないでしょうか?