Webサイト制作【1】 XAMPP準備編

JavaScriptは、Webサイトを作るときによく使われます。

JavaScript学習の一環として、Webサイト制作の練習もやってみましょう。

用語

• サーバーサイド（バックエンド）
• クライアントサイド（フロントエンド）
• LL（Lightweight Language 軽量プログラミング言語）

「超」初心者のためにPHPとフロントエンド言語の違いをサクッと解説 | Tech2GO

フロントエンドとバックエンドの違い

HTMLやCSS、JavaScriptなどでのフロントエンド処理はWEBページ内で完結する処理＝「ユーザーに見せる外側の処理」、

PHPなどでのバックエンド処理はWEBページを飛び越えサーバー上で行う処理＝「内部的な処理」

Lightweight Languageとは - はてなキーワード

コンピュータの世界におけるプログラミング言語の中でも"軽量"と思われるものの総称。LLと略し「えるえる」と呼ぶこともある。

具体的には、CやC++、あるいは Java などのスタティックかつ「硬く重い」言語に対し、スクリプト言語のような「やわらかく軽い」言語のことを指す。代表的なものでは Perl、PHP、Python、Ruby などがある。

• フロントエンド：HTML、CSS、JavaScript
• バックエンド ：Linux、Apache、MySQL、PHP（＝LAMPスタックと呼ぶ）

という組合せで作ってみましょう。

PHPで入門した後に、RubyでRuby on Rails（代表的なWebアプリフレームワーク）の練習をしてみましょう。（目標）

PHPとは？

→ PHP - Google 検索

PHP: PHP とはなんでしょう? - Manual

PHP (PHP: Hypertext Preprocessor を再帰的に略したものです) は、広く使われているオープンソースの汎用スクリプト言語です。

PHP は、特に Web 開発に適しており、HTML に埋め込むことができます。

• PHPは、Webサイト制作でよく使われている軽量プログラミング言語です。
• PHPは、検索したら参考情報がたくさん得られるので練習に向いています。
• PHPのバージョン7は動作が速いので、実用的なWebサイトでも十分使えます。
• Facebookは、PHPを改良した「HHVM」という実行環境を公開しています。（巨大なWebサイトも作れる）

（参考）PHP 7のパフォーマンスが高い理由 (1/4)：CodeZine（コードジン）

（参考）PHPの使い方 → PHP入門 - ドットインストール

XAMPP

ローカル環境（自分のパソコン）に、テスト用のWebサーバーを構築しましょう。

ローカルサーバーを用意する方法は、いろいろあります。

• XAMPPというソフト（パッケージ）を使う。（簡単）
• Docker、VirtualBoxなどの仮想環境ソフトを使う。（面倒）

XAMPP - Wikipedia

XAMPP（ザンプ）とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.orgから提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。

とりあえず、インストールが簡単な「XAMPP」（ザンプ）を使ってみます。

（本格的にやるなら、今だと「Docker」を使うことをお勧めします。）

プログラマのためのDocker教科書 インフラの基礎知識&コードによる環境構築の自動化

XAMPPのインストール

XAMPPのダウンロードページに行きます。

www.apachefriends.org

Windows用、Mac用、Linux用の各種インストーラーが用意されているので、使ってるパソコンに合わせて選びます。

※以下、Windowsの場合で話を進めます。

Windows用で、最新のPHP7.1.xのインストーラーを選んでみます。

（データベースは、MySQLの代わりにMariaDBになってますがこれでOK）

ダウンロードしたインストーラー（例：「xampp-win32-7.1.1-0-VC14-installer.exe」）をダブルクリックして、インストールを開始します。

設定に関する質問が出てきたら、適当に選んでインストール完了！（笑）

XAMPPの起動

[スタート] → [プログラム] → [XAMPP] → [XAMPP Control Panel] をクリックします。

XAMPPのコントロールパネルが表示されたら、「Apache」と「MySQL」の「Start」ボタンをクリックします。

（上記画像は、「Start」ボタンを押した後の様子。ApacheとMySQLが起動した。）

これで、Webサーバーの用意と、Webサーバーの起動まで完了しました。

XAMPPの動作確認

Apache（Webサーバーソフト）が動いていることを確認するために、Webページを開いてみます。

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

http://localhost

と入力してみます。

以下のようなXAMPPのスタートページが表示されたらOKです。

XAMPPの公開フォルダ

XAMPPはデフォルトだと、Cドライブの直下にインストールされています。

• 「C:\xampp\htdocs」という所にWebサーバーの公開フォルダがあります。
• 「htdocs」フォルダの中身が、ブラウザーで見えるデータになります。

「htdocs」をいつでもすぐに開けるように、デスクトップにショートカットを作っておくと便利です。

以上で、Webサイト開発用のWebサーバーが用意できました。

確かな力が身につくPHP「超」入門 (Informatics & IDEA)