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

2015年10月27日 (2017年3月9日最終更新)
「超」初心者のためにPHPとフロントエンド言語の違いをサクッと解説
目次
  1. バックエンドとフロントエンドとは
  2. WEBサービス開発の進め方を知ろう
  3. ①「HTML」でWEBページの基本構造を作る
  4. ②「CSS」で装飾を行う
  5. ③「JavaScript」で動きを付ける
  6. ④「PHP」でサーバーを介した処理を行う
  7. WEBサービス開発の進め方まとめ
  8. フロントエンドとバックエンドの違い
  9. PHPとフロントエンド言語の違い
  10. フロントエンド言語とは違い、サーバーで動作する
  11. サーバーを介するので動的な動きをWEBページに付ける事ができる
  12. まとめ

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

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

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

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>

20151011_1

②「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>

20151011_2

③「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>

20151011_3

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

20151011_4

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

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

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

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

20151011_5

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

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

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

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

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

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

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

また、JavaScriptに至ってはJavaScriptを無効にする事も可能なので、もし無効になっていた場合は…など、様々なケースを考慮しなければならないのです。

サーバーを介するので動的な動きをWEBページに付ける事ができる

PHPを使えば、HTML/CSSやJavaScriptだけでは実現できないような動作を加える事ができます。その代表的な例が、IDとパスワードを使ったログイン認証やお問い合わせフォームです。

20151011_8

このようなシステムを作成するには、PHP(もしくは他のバックエンド言語)が不可欠です。このように、同じプログラミング言語でも役割やできる事が大きく違うのがPHPとHTML/CSSなどのフロントエンド言語。イメージを掴んで頂けたでしょうか?

まとめ

今回はフロントエンド言語とバックエンド言語の違いを簡単に解説しましたが、いかがでしたでしょうか?今回は主にできる事や動作する場所に焦点を当ててご説明しましたが、実はフロントエンド開発とバックエンド開発では担当者の職種も違います。フロントを担当するのは「フロントエンドエンジニア」、バックを担当するのは「エンジニア」です。ちなみに近頃はフロントを「Webデザイナー」が担当する事もあり、近年はフロントもバックも(あるいはデザインも)マルチに担当できるエンジニアの需要が高まっています。より良い条件でエンジニアとして活躍するなら、すべて出来るに越した事はありません。CodeCampではHTML/CSS,JavaScript,PHPの全ての言語を学んで頂く事ができますので、ぜひ無料体験レッスンにて体験してみて下さいね!

山崎 響
山崎 響
CodeCamp講師/ライター 1986年生まれ、大阪在住。大阪のシステム会社に約4年半勤務後、半年間京都に戻るも諸事情により大阪にて独立。2015年に法人化し現在は広告・ライティング・HP制作を主業務とする会社を経営しながらCodeCamp講師としてプログラミング指導を実施中。CodeCampレッスンでの担当言語はHTML/CSS、JavaScript、PHP、Wordpress、Photoshop、Illustrator。

関連記事