更新日: 2017年6月27日
公開日: 2015年10月27日

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

「PHPとHTMLって、違うものなんですか？」という素朴な質問。経験者であれば「全く違う」と即答する内容ですが、初心者の方にしてみればプログラミング言語の違いはわかりにくいですよね。プログラミング言語は200種類以上あると言われていますが、よく似ているものから全然違うものまで様々。そして中でもPHPなどバックエンド言語とHTMLなどのフロントエンド言語には大きな違いがあります。

というわけで、今回はフロントエンドとバックエンドの違いについてサクッと解説させて頂きますね！

バックエンドとフロントエンドとは
WEBサービス開発の進め方を知ろう
①「HTML」でWEBページの基本構造を作る
②「CSS」で装飾を行う
③「JavaScript」で動きを付ける
④「PHP」でサーバーを介した処理を行う
WEBサービス開発の進め方まとめ
フロントエンドとバックエンドの違い
PHPとフロントエンド言語の違い
フロントエンド言語とは違い、サーバーで動作する
サーバーを介するので動的な動きをWEBページに付ける事ができる
まとめ

バックエンドとフロントエンドとは

WEBサービス開発を行う上で抑えておきたいのが、「フロントエンド」と「バックエンド」という概念。簡単に言うと、フロントエンドとはユーザーに見せる為の見た目の部分に関する部分の事を言い、バックエンドとはユーザーからは直接見えない内部処理な部分の事を言います。

これではわかりにくいと思いますので、今回はWEBサービスの開発手順のご紹介を踏まえてフロントエンドとバックエンドの違いをご説明しましょう。

WEBサービス開発の進め方を知ろう

WEBサービス開発は、主に4種類の言語を利用して行います。プログラミング言語にはそれぞれ得手不得手があるので、複数のプログラミング言語を組み合わせて得手不得手の部分をうまく補完しながら開発を行うんですね。では、具体的にどんな手順で開発するかご紹介していきましょう。

①「HTML」でWEBページの基本構造を作る

WEBサービスとは、WEBページをベースに様々な処理を組み込んだものの事を言います。なので、まずはこのベースとなるWEBページを「HTML」で制作していきます。HTMLはWEBページを作るのに特化したプログラミング言語で、HTMLの構文は以下のようなものです。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
</head>
<body>
    <h2>性別を選択してください</h2>
    <form method="post">
        <input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女">女
        <input type="submit" value="送信">
    </form>
</body>
</html>

②「CSS」で装飾を行う

次に使うのが「CSS」。上記の画像をご覧頂ければわかる通り、HTMLだけでは白黒で愛想も何もないページが出来上がりますが、これじゃ寂しいですよね。そこで、CSSを使って装飾を施します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
    <style>
        body{
           color:#696969;
        }
        h2{
            background-color:#c0c0c0;
            color:#FFF;
            padding-left:20px;
        }
        input#submit_button{
            background-color:#c0c0c0;
            border-style: none;
            color:#FFF;
            padding:5px 20px;
        }
    </style>
</head>
<body>
    <h2>性別を選択してください</h2>
    <form method="post">
        <input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女">女
        <input type="submit" value="送信">
    </form>
</body>
</html>

③「JavaScript」で動きを付ける

次は「JavaScript」を使ってページに動きを付けます。JavaScriptではHTMLに出力した結果を書き換えたり、ボタンクリックやマウスオーバーなどWEBページ上での動きを拾う事ができます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
    <style>
        body{
           color:#696969;
        }
        h2{
            background-color:#c0c0c0;
            color:#FFF;
            padding-left:20px;
        }
        input#submit_button{
            background-color:#c0c0c0;
            border-style: none;
            color:#FFF;
            padding:5px 20px;
        }
    </style>
</head>
<body>
<script>
        function event_alert(){
            alert("本当に押しますか？");
        }
        window.onload = function () {
            var button = document.getElementById("submit_button");
            button.addEventListener("mouseover", event_alert, false);
        }
</script>
    <h2>性別を選択してください</h2>
    <form method="post">
        <input type="radio" name="gender" value="男">男
        <input type="radio" name="gender" value="女">女
        <input type="submit" id="submit_button"  data-text="本当に送信しますか？" value="送信">
    </form>
</body>
</html>

今回は送信ボタンにマウスが乗るとアラートを出すように組んでみました。今回の例だと実用性は低いのですが、例えばマウスオーバーで画像を拡大する処理などは日常よく見られているのでは無いでしょうか？あれはJavaScriptが裏で頑張ってくれています。

④「PHP」でサーバーを介した処理を行う

さて、ここでいよいよ「PHP」の登場です。PHPはWEBページとWEBページをまたいで値を受け渡すなどWEBページという概念を飛び越えた処理ができるのが特徴。試しに「送信ボタンを押すと結果がWEBページに表示される」というコードを組んでみましょう。この処理では一度WEBページを読み込んで、送信ボタンを押すともう一度同じページが読み込まれる仕組みになっています。つまり、ブラウザからするとページとページをまたぐ処理を行うのですが、それでもちゃんと値が受け渡されて画面に表示されるんですね。


<?php
$gender = '';
if (isset($_POST['gender']) === TRUE) {
    $gender = htmlspecialchars($_POST['gender'], ENT_QUOTES, 'UTF-8');
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>性別確認</title>
    <style>
        body{
           color:#696969;
        }
        h2{
            background-color:#c0c0c0;
            color:#FFF;
            padding-left:20px;
        }
        input#submit_button{
            background-color:#c0c0c0;
            border-style: none;
            color:#FFF;
            padding:5px 20px;
        }
    </style>
</head>
<body>
<script>
        function event_alert(){
            //alert("本当に押しますか？");
        }
        window.onload = function () {
            var button = document.getElementById("submit_button");
            button.addEventListener("mouseover", event_alert, false);
        }
</script>
    <h2>性別を選択してください</h2>
<?php if ($gender === '男' || $gender === '女') { ?>
<p>あなたの性別は「<?php print $gender; ?>」です</p>
<?php } ?>
    <form method="post">
        <input type="radio" name="gender" value="男" <?php if ($gender === '男') { print 'checked'; } ?>>男
        <input type="radio" name="gender" value="女" <?php if ($gender === '女') { print 'checked'; } ?>>女
        <input type="submit" id="submit_button"  data-text="本当に送信しますか？" value="送信">
    </form>
</body>
</html>

WEBサービス開発の進め方まとめ

このように、WEBサービスは

①「HTML」でWEBページの基本構造を作る
②「CSS」で装飾を行う
③「JavaScript」で動きを付ける
④「PHP」でサーバーを介した処理を行う

の手順で進めていきます。そして、この一連の流れの中で「PHP」だけがWEBページを飛び越えた処理を行う事ができたというのがポイントです。

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

つまりフロントエンドとバックエンドの違いはここにあり、HTMLやCSS、JavaScriptなどでのフロントエンド処理はWEBページ内で完結する処理＝「ユーザーに見せる外側の処理」、PHPなどでのバックエンド処理はWEBページを飛び越えサーバー上で行う処理＝「内部的な処理」とご理解頂けると思います。

PHPとフロントエンド言語の違い

では上記を踏まえたPHPとフロントエンド言語の違いですが、主に下記の違いが挙げられます。また、その他にHTML/CSSやJavaScriptとは書き方が全く違うというのもおわかり頂けたのではないでしょうか。

フロントエンド言語とは違い、サーバーで動作する

動作する場所が違うのは上述の通りですが、これによりどんな影響があるかという事にも触れさせて頂きますね。もしかするとPHPは難しそうに思うかもしれませんが、実は慣れればフロントエンド開発よりも簡単です。

というのも、PHPはApache（アパッチ）というWebサーバー単一で動作するので動作環境の違いを考慮する必要はありませんが、フロントエンドはブラウザで動くので環境の違いへの考慮が大変なのです。実は、ChromeやIE、FireFoxなどのブラウザは同じに見えて細部の仕様が少しづつ違います。それぞれ別の会社が提供しているので当たり前なのですが、フロントエンド開発ではこれらの違いに考慮した上でたくさんのテストを行わなければなりません。