通常Webページを作成するプログラミング言語は、HTML・CSSを使います。
HTMLは、サイトに文字や画像などを表示する骨組み。
CSSは、HTMLで表示した文字の色や大きさ。画像の位置や背景などサイトの装飾に関わります。
企業のコーポレートサイトは、スクロールをするとふわっと画像が出てくるようなアニメーションの導入。
通販サイトは、メールアドレスとパスワードを使用して新規登録やログイン機能がWebサイトに追加されています。
しかし、これらは基本的にHTML・CSSではできないです。
アニメーションや会員登録などは、「JavaScript」と「PHP」２つのプログラミング言語がHTML・CSSの他に必要になります。
本記事では、「JavaScript」と「PHP」に焦点を当てて、両者の言語がどのようなことができるか紹介します。
また、できることを踏まえて、どちらの言語を優先して学習するべきか紹介します。
- JavaScriptとPHPでできること・違いを知りたい。
- どちらを優先して学習を進めていくべきか知りたい。
ConoHaWing開設方法｜アリッシア
技術ブログを書くべき理由｜アリッシア
JavaScript
JavaScriptは、動的なコンテンツやユーザーとの対話を可能にするためのプログラミング言語です。
主にウェブページのユーザーがブラウザ上で動作する場面で、使用されます。
JavaScriptでできる一例を紹介します。
他にもできることはありますが、本記事では、多くの人に該当するJavaScriptの用途を挙げます。
- Webサイトのアニメーション
- ポップアップウィンドウ
- フォーム制御
- Web、スマホアプリ作成
- Chrome・Firefoxの拡張機能
Webサイトのアニメーション
スクロールすると、ふわっと画像が出てくる。（フェイドイン・フェイドアウト）
スクロールで、背景の画像がぱらぱらマンガのように動く。（例：Apple-Airpods Pro公式サイト）
このような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がおすすめです。
Chrome、Firefoxの拡張機能
JavaScriptを使えば、Chrome、Firefoxなどのブラウザの拡張機能の作成もできます。
ブラウザの拡張機能では、Webページの文字色を変えるカスタマイズができます。
高度な技術があれば、動画の倍速機能や英語のサイトを自動で日本語翻訳するなど様々な拡張機能を作成できます。
PHP
続いて、PHPでできることを紹介します。
PHPは、サーバーサイドで動作するプログラミング言語です。
JSと同様に、動的なウェブページを作成するために使用されます。
PHPのコードはHTMLに埋め込むことができて、ウェブサーバー上で実行します。
ユーザーのブラウザには生成されたHTMLコードが送信されます。
- SNSサイト
- ECサイト
- WordPressプラグイン
- お問い合わせフォーム
- MySQLとUnityの連携
SNSサイト作成
X（Twitter）やFacebook、インスタなどのSNSサービスは次のような機能があります。
- アカウントの登録や更新削除
- 投稿の更新と削除
- 個人間のメッセージのやり取り
- ログイン、ログアウト
これらの機能はPHPを使って、データベースを管理する必要があります。
ECサイト作成
ECサイト（Electronic Commerce）とは、「Amazon」や「楽天」といったショッピングサイトです。
先ほどのSNSサイトの機能でもあったように、ログイン・ログアウトでPHPを使います。
他にも、商品購入やお気に入り設定や商品の在庫確認はPHPで開発されます。
WordPressプラグインを自作
WordPressとは、ブログを運営するためのオープンソースのソフトウェアです。
PHPで開発されていて、MYSQLでデータベースを管理しています。
さらに、WordPressプラグインは、PHPで作成されています。
おすすめや新着記事などの表示もPHPが関係しています。
UnityとMySQLの連携
ゲームエンジンUnityとデータベースを連携して通信する場合は、PHPを介して行うことができます。
データベースを使うことでセーブデータの管理をサーバー上で行うことができます。
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!";- PHP
$name = "Hello, World!";- Javascript
let arrayNum = [1, 2, 3];- PHP
$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
<?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にはありません。
ブログを運営するメリット
プログラマーがブログを運営するメリットは沢山あります。
エンジニアはブログを運営するべき理由｜アリッシア
- アウトプットによるスキル向上
- メモ帳代わり
- ポートフォリオ（案件獲得）
ブログを始めるためには、「テーマ」・「ドメイン」・「サーバー」の3つが必要です。
３つはブログ運営の基盤となる要素ですが、これら全て自分で用意しなければいけません。
面倒で難しくブログ開設を断念してしまう人が多いです。
ConoHa Wingの「WordPressかんたんセットアップ」は
最短10分で契約可能！
ConoHa WINGから契約をすれば、独自ドメイン、サーバーの用意、WordPressとの連携も簡単にできます。
さらに、２つの独自ドメインが永久無料の特典もあり、
月660円からの破格価格にもかかわらず、表示速度は国内最速です。
まとめ
通常Webページには、骨組みのHTMLと装飾のCSSを使います。
ウェブアニメーションや新規登録・ログインは、HTML・CSSではできないです。
これらは、「JavaScript」と「PHP」がHTML・CSSの他に必要になります。
2つの言語は動的なウェブページを作成する言語です。
JavaScriptはブラウザ内、PHPはウェブサーバー上で実行します。
その他にも、データベース連携が得意不得意があります。
PHPは文法の他にもデータベースを扱うので、MySQLをマスターしないといけないので、JSの学習を優先することをおすすめします。
