ホームページはいくつかの言語で作られています。
代表的なのが
・HTML/CSS
・Javascript(jquery/react/vue他)
・PHP
の３種類です。
さらにどこで処理されているかで「クライアントサイド」と「サーバーサイド」に分類されます。
・クライアントサイド（閲覧時にブラウザで処理される）...HTML/CSS,JS
・サーバーサイド（ブラウザで表示される前に処理される）...PHP
ざっくり表示に関連するものがクライアントサイド、フォームなど機能面に関連するものがサーバーサイド、という解釈で問題ないと思います。
ではどういった作業でどの言語が使われているのかを見ていきましょう。
サイトにページを作りたい！
単純にページを作るだの場合はHTML/CSSが使われています。
専門用語では「静的」とか「スタティック」とか呼ばれています。
特に機能的なものはなくレイアウトして表示させるだけのページという意味です。
またブラウザサイズによってレイアウトが可変する「レスポンシブ対応」もHTML/CSSの範疇で、ページの基礎的な部分は全てHTML/CSSで書かれています。
スライダーとか動きのあるページを作りたい！
ページに動きを付けたり、マウスの動きに反応する挙動を付けたい時などはJavascriptが使われます。
「トップへ戻る」ボタンなどもそれですね。
Javascriptという言語はそれ自体の書式で書くこともあれば、「ライブラリ」や「フレームワーク」と呼ばれる、よく使われる書式を簡略して書くためのパッケージを使う場合もあります。
ライブラリで一番馴染みがあるものは「Jquery」でしょう。
正直Jqueryをフレームワークと捉えられることもあるので議論の余地があるかも知れませんが、出生がマルチブラウザ対応という側面があるため、個人的にはライブラリに分類したほうが正しいと思います。
他にもスライダーで使われる「slick slider」や、画像を拡大表示させる「Lightbox」などもjsライブラリの一種です。
フレームワークについては少々話が難しくなるのでざっくりになりますが、jsの機能拡張できるパッケージと考えておいてください。
お知らせの一覧表示をしたい！
お知らせ一覧など、何かの情報を元に表示を切り替えるのは基本的にPHPなどサーバーサイドの役割になります。
単純なサイトのページを「静的」と呼ぶのに対して、条件によって切り替えることを「動的」と呼びます。
「サーバーサイド」という言葉を出しましたが、動的処理についてはブラウザで閲覧される前に処理をします。
ユーザーがページにアクセスしたタイミングでPHPの処理が行われ、ブラウザが処理できるHTMLを作り直して表示させる、というイメージです。
ちなみに「基本的に」と書いたのは、実は別の方法を使えばjsでもお知らせ一覧などを実装することもできます。
ヘッドレスCMSと呼ばれるものがその一例ですね。
以上、ホームページではどういったところでどういう言語が使われているかの紹介でした。
Wordpressが機能的に動いているのはWordpressが便利なだけではなく、それらを機能的に動かしているプログラムをエンジニアが日々コツコツと書いているということです。
話が逸れますが、一時エンジニア界隈では「車輪の再発明」という言葉がよく言われていました。既にライブラリなどで実装できているものをわざわざ作るのは無駄、という比喩です。
ただ自分はそれはどうかと思っています。
確かに無駄に工数を重ねるのは誰も幸せになれないのは確かですが、それは既にあるからと理解を放棄してしまうのは別の話だと考えています。
先人が作ったものを分解して理解を深めたり、それと同じものを自分で0ベースで作ってみるなどのトライは間違いなく成長のきっかけになります。
なのでエンジニアはライブラリをポンと置くだけという技術ではなく、どのような要件にも対応できるよう、そのライブラリがどうやって動いているのかという根本の理解まで掘り下げておく必要があるでしょう。
ということで、ホームページ制作のこぼれ話的に読んでいただき、制作会社へオーダーする際の一助でもなれば幸いです。
