JavaScriptとPHPの違いー優先して学ぶ言語はどっち？

通常Webページを作成するプログラミング言語は、HTML・CSSを使います。

HTMLは、サイトに文字や画像などを表示する骨組み。
CSSは、HTMLで表示した文字の色や大きさ。画像の位置や背景などサイトの装飾に関わります。

企業のコーポレートサイトは、スクロールをするとふわっと画像が出てくるようなアニメーションの導入。

通販サイトは、メールアドレスとパスワードを使用して新規登録やログイン機能がWebサイトに追加されています。

しかし、これらは基本的にHTML・CSSではできないです。

アニメーションや会員登録などは、「JavaScript」と「PHP」２つのプログラミング言語がHTML・CSSの他に必要になります。

本記事では、「JavaScript」と「PHP」に焦点を当てて、両者の言語がどのようなことができるか紹介します。

また、できることを踏まえて、どちらの言語を優先して学習するべきか紹介します。

本記事は次の人におすすめ

JavaScriptとPHPでできること・違いを知りたい。
どちらを優先して学習を進めていくべきか知りたい。

Udemyで学習する

Udemy 公式サイト

JavaScript
PHP
JavaScriptとPHPの違い
まとめ

JavaScript

JavaScriptは、動的なコンテンツやユーザーとの対話を可能にするためのプログラミング言語です。
主にウェブページのユーザーがブラウザ上で動作する場面で、使用されます。

JavaScriptでできる一例を紹介します。
他にもできることはありますが、本記事では、多くの人に該当するJavaScriptの用途を挙げます。

JSの用途

Webサイトのアニメーション
ポップアップウィンドウ
フォーム制御
Web、スマホアプリ作成
Chrome・Firefoxの拡張機能

Webサイトのアニメーション

スクロールすると、ふわっと画像が出てくる。（フェイドイン・フェイドアウト）
スクロールで、背景の画像がぱらぱらマンガのように動く。（例：Apple-Airpods Pro公式サイト）

スクロールして画像が変わるアニメーションを紹介しています。

【CSS/JavaScript】スクロールに合わせて画像切り替え

JavaScriptでスクロール時に背景画像を切り替え、パララックス効果を実現します。スクロール位置に基づいて画像が滑らかに変化し、ページの動きに合わせて背景が移動します。

このようなWebサイトのアニメーションは、JavaScriptで作成することができます。

アニメーションを導入したサイトは閲覧者の目を引き、このようなWebページは彼らを楽しませるだけではなく、サイトの離脱を下げる効果があります。

ポップアップウィンドウ・フォーム制御

ポップアップウィンドウはサイトを操作中に、
ディスプレイ上に表示されるウィンドウのことです。

例えば、Webテストを受けていて、
終了ボタンを押すと、「本当に終了しますか？」という確認メッセージが表示されます。

このメッセージ（ポップアップ）は、JavaScriptによって表示します。

<script>
    'use strict'
    if(window.confirm('本当に終了しますか？'))
    {
        console.log('はい')
    }
　　else{
　　　　console.log('いいえ')
    }
</script>

このソースコードで表示されるポップアップウィンドはデフォルトで、デザインにはCSSを使います。

ポップアップと聞くと、ポップアップ広告という言葉を聞いたことがある人もいるでしょう。
ウェブページに訪問すると、画面上に小さなウィンドウで出てくる広告です。

販売促進、コンバージョン率の向上が見込めますが、
あからさまに広告の押し売りになるので、ユーザーから嫌われます。
サイトの評価も下がるので、使い方には注意が必要です。

フォーム制御は、新規登録のような入力をサーバーに転送する際に、電話番号の桁数が足りない。メールアドレスに漢字が入っている。半角の数字ではなく全角で入力している。
このような間違いの入力があるときに、エラーを表示します。

Web・スマホアプリ作成

Webサイトで動くアプリは基本的にHTMLとCSSで静的な枠組みを作って、
JavaScriptで動きを付けてアプリを作成しています。

また、Webの枠を超えて、スマホアプリも作ることができますが、
ゲームやスマホアプリは専用の言語を使うことをおすすめします。

Webで動くゲームを作る場合は、Unityがおすすめです。
Unityは、ゲームを作るエンジンで、物理演算、AR/VRなど作ることができます。
Unityはプラットフォームを変えれば、PC・Web・Android・iOSいずれも作成することができます。

本格的なアプリケーションを作る場合は、
iOS、Androidどちらでも動くFlutterがおすすめです。

Flutterの環境設定を解説しています。

【Flutter】VSCodeでWindowsの開発を環境構築

Windowsを使ってflutterでvscodeの環境構築を解説をしています。アプリの開発はOSごとに使用できる言語が異なりますが、Flutterはどちらも対応していて、企業の参入もしています。

Chrome、Firefoxの拡張機能

JavaScriptを使えば、Chrome、Firefoxなどのブラウザの拡張機能の作成もできます。

ブラウザの拡張機能では、Webページの文字色を変えるカスタマイズができます。

高度な技術があれば、動画の倍速機能や英語のサイトを自動で日本語翻訳するなど様々な拡張機能を作成できます。

PHP

続いて、PHPでできることを紹介します。

PHPは、サーバーサイドで動作するプログラミング言語です。
JSと同様に、動的なウェブページを作成するために使用されます。

PHPのコードはHTMLに埋め込むことができて、ウェブサーバー上で実行します。
ユーザーのブラウザには生成されたHTMLコードが送信されます。

PHPの用途

SNSサイト
ECサイト
WordPressプラグイン
お問い合わせフォーム
MySQLとUnityの連携

SNSサイト作成

X（Twitter）やFacebook、インスタなどのSNSサービスは次のような機能があります。

SNS機能

アカウントの登録や更新削除
投稿の更新と削除
個人間のメッセージのやり取り
ログイン、ログアウト

これらの機能はPHPを使って、データベースを管理する必要があります。

ECサイト作成

ECサイト（Electronic Commerce）とは、「Amazon」や「楽天」といったショッピングサイトです。

先ほどのSNSサイトの機能でもあったように、ログイン・ログアウトでPHPを使います。

他にも、商品購入やお気に入り設定や商品の在庫確認はPHPで開発されます。

WordPressプラグインを自作

WordPressとは、ブログを運営するためのオープンソースのソフトウェアです。
PHPで開発されていて、MYSQLでデータベースを管理しています。

さらに、WordPressプラグインは、PHPで作成されています。
おすすめや新着記事などの表示もPHPが関係しています。

UnityとMySQLの連携

ゲームエンジンUnityとデータベースを連携して通信する場合は、PHPを介して行うことができます。
データベースを使うことでセーブデータの管理をサーバー上で行うことができます。

Unity(C#)とPHPを連携を解説しています。

【Unity】PHP連携-MySQLでデータベースを作成

UnityとPHPを組み合わせたデータベース接続にはMySQLを使います。UnityからPHPを経由してデータベースにアクセスし、SQLを使用して連携します。編集はphpAdminを使用します。

JavaScriptとPHPの違い

2つの言語は動的なウェブページを作成という観点で、同じような言語です。

JavaScriptは、ブラウザ内で実行され、ユーザーの端末上で動作します。
PHPは、ウェブサーバー上で実行され、HTMLとして表示されます。

その他にも、データベース連携が得意・不得意ことや実装する場所が違うなど違いは多くあります。

ウェブページを作成の上でどちらから学ぶべきでしょうか。

特別な理由がなければ、JavaScriptから学ぶべき

自分は、PHPにしか興味がない。
アカウント登録のシステム（ログイン・ログアウト）がとにかく作りたい。

これらサーバーを使うことは、JSは不向きなので、PHPから入るべきです。

いずれにおいても、PHPを扱う場合には、JavaScriptでのアニメーションが必要になります。
PHPを学ぶならば、JavaScriptも習得を見通しておくことをおすすめします。

JavaScriptはすぐに始められる

PHPは環境設定が必要です。
PHPの実行するためには、ウェブサーバーとPHPのインストールします。
その後、PHPを設定して、ウェブサーバーと連携しなければいけません。

一方で、JavaScriptはインストールのようなひと手間は、基本的には不要です。

VScodeやドキュメントにソースコードを書いて、拡張子を指定(script.js)すれば、JavaScriptは実行できます。

PHPより知識がいらない

PHPはデータやアカウントを扱うので、文法だけではなくデータベース(MySQL)やCookieなどを学ぶ必要があります。

一方でJavaScriptは、PHPのように知識はほとんど不要です。

慣れないうちはjQueryに苦戦しますが、jQueryはJavaScriptコードを容易に記述できるように設計されたJavaScriptライブラリなので、マスターすれば柔軟なウェブデザインを開発ができます。

JavaScriptの知識がPHPで役に立つ

JavaScriptとPHPは文法がよく似ています。
JavaScriptの知識がある程度あれば、PHPもすぐに身に着けることができます。

一例として、変数宣言・配列があります。

変数宣言

Javascript

let name = "Hello, World!";

$name = "Hello, World!";

配列

Javascript

let arrayNum = [1, 2, 3];

$arrayNum = array(1, 2, 3);

ただし、異なる点もあります。
JavaScriptは変数の型を宣言する必要がありません。
PHPは変数の型を事前に宣言する必要があります。

型宣言

Javascript

let name; // 型を宣言せずに変数を宣言

name = 10; // 数値型
console.log(name); // 10

name = "Hello, World!"; // 文字列型
console.log(name); // Hello, World!

name = true; // ブール型
console.log(name); // true

<?php
$name; // エラーになります。型の宣言が必要

$name = 10; // 数値型
echo $name; // 10

$name = "Hello, World!"; // 文字列型
echo $name; // Hello, World!

$name = true; // ブール型
echo $name; // 1 (trueは1に変換される)
?>

その他にも、JSは、var・let・constなどを使用して制御しますが、PHPにはありません。