ホームページ制作で簡易にローカル環境を構築する方法

とあるWebサイトの構築を請け負ったんですが、これから自分でホームページを運営していく事を考えてWeb開発やら、ホームページ制作についても教えて欲しいというオーダーでした。 とても勉強熱心でこちらとしても是非Webに関して技術的にも詳しくなってもらいたかったので、そのレクチャーをするところまで、少し長期間になりますが、お引き受けする依頼でした。 実際に、HTMLやCSSなどの言語については、色々な書籍やWebサイトなどのリファレンスや、個人で書かれているブログなどで勉強してもらうとして、まずはWeb制作を多人数で行う時に必須の技術について学んでもらうことにしました。

• Gitの基本概念と操作方法
• ローカル環境の構築
• 運用を行うポイントなど

どれもホームページ制作の最初にやらないとイケないんですが、勉強する前の事前知識レベルであまり重要視されていないため、この点をしっかりと学習している人も少ないようなので、ちゃんとレクチャーしようと思って進めている状況です。 そのなかで、ローカル環境の構築について、ブログにまとめておきたいと思います。

ホームページ制作におけるローカル環境について

ホームページ制作におけるローカル環境と一言で言っても、実はコレ！という１つだけのものではありません。

色々な環境構築パターン

Wordpress環境であれば、Local、XAMP、MAMP、などいくつかの選択肢があるし、 Ruby環境であれば、Rails。 Python言語であれば、Django、Flask、Web2pyなどのフレームワーク。 汎用的なことを考えると、Dockerを使ってサーバーさながらの環境を構築したり、 VMwareや、VirtualBoxなどの仮想サーバー環境をローカルPCに構築すると、本番サーバーとの親和性もアップしてより手戻りの少ない開発環境が構築できます。 初心者の人は、一体どれを使うのが良いのか？どのフレームワークが一番いいのか？というのを気にすると思いますが、個人的にはDockerを使うのがいいと思います。 Dockerの技術を覚えると、ほぼどんな環境でも構築できてしまうし、ローカル環境のメモリー負荷や、バッテリー消費量を抑える事ができ（他の仮想サーバーなんかよりも）、エコ環境を構築することができます。

少し簡易なローカル環境構築

ただし、エンジニアレベルではなく、HTMLとCSSとJavascriptだけが問題なく動く環境という事であれば、もっと簡易に構築する方法もあります。 基本的に、HTMLとCSSと簡単なJavascript記述だけであれば、index.htmlなどのHTMLファイルをインターネットブラウザにドラッグするだけで簡単に表示されて問題なく閲覧することができます。 でも、Javascriptのtype="module"というモジュールモードで記述去れている場合（classなどを使ったり、import,exportなどの記述がある場合）は、セキュリティエラーがでて、ページが表示されなくなります。 こうした事態を会費するために、やっぱりサーバーで実行したような環境にする必要があります。 そんな時に便利な環境構築を紹介したいと思います。

その1. Simple Web Server

このツールをインストールするだけで、簡易なWebサーバーを立ち上げることができます。 Javascriptのmoduleタイプでもエラー無く実行することができます。 https://simplewebserver.org/ モジュールをダウンロードしてインストールしてWebサーバー構築ができてしまいますが、PHPなどサーバーCGI系モジュールは動かないので、本当に簡易環境になります。 でも、SafariやFirefoxなどの他のブラウザでも確認できるので、このツール便利ですね。 インストールしておいて損はないかもです。

その2. VScodeプラグイン「Live Server」

VScodeの拡張機能で「Live Server」をインストールしておくと、エディタ下部にある、Go Liveというボタンを押すだけで簡単にブラウザでHTMLが表示されます。 このツールもHTML,CSS,Javascriptの起動のみしかできないのですが、簡易なホームページの立ち上げには非常に便利だし、VScodeを使って開発をしている人であれば、便利すぎる機能でしょう。 ちなみに、VScodeのプロジェクトとして開いている階層をdocument rootとして表示されるので、この辺も便利に立ち上げたい人は、フォルダをVScodeで簡単に表示できる、次のブログ記事を参考に設定をしてみるといいですよ。（Macだけですが） [VScode] 右クリックのフォルダで開く「クィックアクション」に登録して作業効率化する方法

その3. PHPのビルトインサーバー

ローカル環境にPHPがインストール去れている場合に、ターミナルで次のコマンドを入力するだけで、PHPの実行環境が作れます。 php -S localhost:8080 -t ./ 上記を実行すると、以下のURLで、実行した階層がドキュメントルートとしてブラウザで表示できます。 http://localhost:8080/ ちなみに、詳しくは、こちらのブログに書かれています。 PHPのbuilt-inモードで軽量なローカル環境の構築

その4. Wordpress専用のLocal

ホームページ制作で結構依頼の多いWordpressをローカルで開発するならやっぱり、Localのインストールです。 これだけで、Wordpressのテーマもプラグインも複数のサイトも同時に便利に開発できる環境が作れてしまいます。 そしてこれも過去にブログを書いているので、インストールの仕方などは、そちらを御覧ください。 Wordpressでwebサイトを作るならやっぱり「Localwp」使うでしょ

その5. やっぱりDocker

上記では、まかないきれない環境構築をしたい場合は、是非Dockerを検討してください。 [Docker] 色々な言語環境を詰め込んだGitパックを作ったよ 過去にこちらで10個ほどのプログラミング言語環境をgitリポジトリ別にパッキングした便利環境をgithubにアップしておきました。 dockerを深く知らなくても、とりあえず環境構築したい場合は是非ご利用ください。

あとがき

ホームページの開発環境（表示環境）が構築できたら、あとはコーディングやデザイン、構成などを作り込むだけですね。 他のプログラム言語の実行環境が必要になったら、是非Dockerを覚えましょう。 他にも、ReactやNext.jsなどの環境もDockerを使えば簡単にローカル構築できますが、そう考えると開発をするローカル環境構築は、ケースバイケースであるので、これが正解というのはありません。 自分にあった環境構築ができるというのもエンジニアスキルの大きな一歩かもしれませんね。