ウェブサイトを作るための“義務教育”とは
HTML、CSS、JavaScript、PHPを学んで、ウェブサイトの“義務教育を修了”することが、エンジニアになる第一歩です。
それぞれがウェブサイトを作る時にどう機能しているかを見てみましょう。
すべての基礎、HTML
HTMLとは、「HyperText Markup Language」つまりマークアップするためのプログラミング言語です。インターネット上のかなりの数のウェブサイトはHTML形式で作成され、ほとんどすべてと言っても過言ではありません。マークアップとは印付け、目印を付けることです。文章を書くと、私たち人間にはどれがタイトルでどれが本文かがある程度分かります。しかし、コンピューターにはすべてが同じ文字列に見え、そのままウェブサイトを作るとすべて同じように表示されてしまいます。
そこで、タグで囲んで「どれがタイトルで、どれが本文か」などを、コンピューターにも分かるように意味づけしていきます。これがマークアップであり、HTMLはその一つのルールを一定に設定したマークアップ言語です。
例えば、
- <h1></h1>で囲む→大見出し
- <li></li>で囲む→箇条書き
- <p></p>で囲む→段落
などの“文法”があります。
これらの文法、いわばルールに則ってウェブページを製作することで、狙い通りの配置で文字を表示させてページを仕上げていきます。加えて、情報を整理することでGoogle検索の上位に表示させるSEO対策にもなります。HTMLでタイトルや各見出し、段落をしっかりと整理することで、Googleのアルゴリズムが「このウェブサイトはしっかりと整理されている＝上位に優先して表示する価値がある」と判断してくれるようになります。HTMLはウェブサイトを作る基本システムでありながら、工夫次第で検索結果にも影響を与える要素を持っています。ちなみに、HTMLはマークアップ言語であり、プログラミング言語ではありません。
HTMLが文書の構造を指示するコンピューター用の言語であるのに対し、PHPやJavaScriptはコンピューターに計算させるための言語です。関数や配列を計算させることで、様々な情報を簡単に表示したり、便利に保管できるよう仕組みを操るのがプログラミング言語です。HTMLの場合、文字の大きさや配列を指定できても、そこから複雑な情報表示が出来ず、またウェブサイトをデザインするにも制限が発生します。そこで、PHPやJavaScriptなどのプログラミング言語を使って数列を計算させ、CSSなどのスタイルシートを使ってウェブサイトを綺麗にデザインしていきます。
HTMLは、現在改訂版5版となる「HTML5」まで出ており、より簡単に動画や音声を埋め込んだり、ウェブ上のアプリケーションを作れるようになったり、文字列を書きやすくなったりなどの改善点があります。
CSSはデザインに必要
先ほども触れたように、CSS「Cascading Style Sheets」、つまりスタイルシートです。HTMLと組み合わせて使用されることがほとんどで、ウェブサイトのデザインを担当する“言語”です。ところで、HTMLだけでも文字に変化を付けられるのではなかったでしょうか？その通りです。しかし、HTMLですべての文字列を書きウェブサイトを仕上げてしまうと、コンピューターは見栄えの制御と本来の文章列を混同し、狙い通りにページを表示できません。問題はコンピューターがこちらの意図を理解しないことにあり、はっきりと狙い通りにウェブサイトを作るにはCSSで分かりやすく区別する、という作業が必要になります。
JavaScriptとPHPでより複雑な機能を
これに対し、JavaScriptやPHPはプログラミング言語です。私たちが使うサーバーと、ウェブサイトの情報が保管されているサーバーとのやり取りをスムーズにし、設計通りにウェブサイトが表示されるようにします。
例えば、
- 何かのフォームに自分のメールアドレスを入力した時、間違った文字列があればそれをポップアップで表示したり、警告を与える
- ウェブページの一部だけをロードし、新しい広告や動画を表示させる
- お問い合わせフォームなどを作成して、ユーザーが使用した際に「送信しました」「ありがとうございました」などのメッセージを自動で表示させる
- 通販サイトで「買い物かご」を作り、商品の内容や合計金額を自動で計算、整理させる などです。
PHPも同じプログラミング言語に属するものですが、PHPは「サーバーサイドで指示を実行する」ことに特徴があります。PHPでは、ウェブサイトを利用する“クライアント側”は実行した指示を見れないため、管理人しか入れない領域を作ったり、セキュリティーを有効にするのに効果的です。また、HTMLソースコードを作成できるため、HTMLの一部をPHPで書いてウェブサイトを作成できます。
つまり、HTMLベースでウェブサイトを作成していても、簡単にPHPを埋め込んでその機能を使えます。まとめると、
- HTMLはウェブサイトを作る基本システム
- CSSはウェブサイトをデザインする基本システム
- JavaScriptやPHPはウェブサイトに各種機能を持たせる基本システム となります。
これらの言語は、プログラマーやエンジニアにとっていわば“義務教育”で学んでおくべきもので、初心者がウェブエンジニアになる時に最初に学ぶ基礎です。
