プログラムは大きく大別するとクライアントサイドプログラムとサーバーサイドプログラムにわけられます。違いは簡単にいうと、クライアント側（ブラウザ側）で実行されるのか、サーバー側で実行されるのかの違いです。
それぞれどのように使い分けられるのか、特長を含めて見ていきましょう。
クライアントサイドプログラム
クライアントとは、ユーザー側の環境を指します。Webサイトにおいては、ユーザー側の環境＝ブラウザとなるため、クライアントサイドプログラムとは、ブラウザ上で実行されるプログラムのことを意味します。
クライアントサイドプログラムの代表例として、JavaScriptが挙げられます。JavaScriptには、サーバー側で実行される Node.js のような利用形態もありますが、ホームページ制作などのWeb制作で一般的に使われるJavaScriptは、クライアント側（ブラウザ）で動作するものです。
JavaScriptがブラウザ上で動作する理由は、各ブラウザにJavaScriptエンジンが標準で搭載されており、私たちが記述したJavaScriptコードを実行できる環境が用意されているためです。
例：JavaScriptでできること
JavaScriptを使ったプログラムが、どのようにして動作するのかを例を挙げて見ていきましょう。
例えば、画面を少し下にスクロールすると「上に戻るボタン」が表示されるWebサイトを、よく見かけると思います。このような仕組みを実装する際には、「ユーザーが画面の上端から（例えば）300px以上スクロールした場合」といった条件を設定します。
そして、その条件が満たされたときに、「上に戻るボタン」を表示させる、という仕組みです。
このときに必要となるのは、「ユーザーが画面の上端から300px下までスクロールした」という情報です。
これはブラウザ上で発生する出来事のため、ブラウザで実行できるクライアントサイドプログラムを用いて処理します。
ブラウザでは、JavaScriptを使うことで、このような画面上に関するさまざまな情報を取得できます。
例えば、現在の画面幅が何pxかといった情報や、特定の要素が画面上のどの位置にあるのかといった位置情報などです。
これらの情報を組み合わせて活用することで、ユーザーの操作に応じた多様なプログラムを実行することが可能になります。
JavaScriptはHTMLを直接書き換えない。やるのは主にDOM操作。
JavaScriptはHTMLを直接書き換えるものではありません。HTMLを読み込んだあと、ブラウザはHTMLを DOM（Document Object Model） という、データとしてアクセス・操作できる構造に展開します。JavaScriptは、このDOMを操作することで、Webサイトの表示を変更しています。
DOMは、HTML文書の構造や内容を表現するための仕様であり、JavaScriptはこのDOMにアクセスして操作を行います。DOMがあることで、Webページを構成する各要素や属性、テキストなどの情報にアクセスでき、それらを書き換えることが可能になります。これにより、ユーザーの操作に応じてコンテンツを動的に変更するといった処理が実現できます。
なお、JavaScriptでできることはDOM操作だけではありませんが、Web制作の現場においては、DOM操作を目的としてJavaScriptを使用するケースが非常に多いのが実情です。
そして、「どのようにDOMを操作するのか」を学んでいくことが、Web制作者にとってのJavaScript学習の中心的なテーマとなるでしょう。
サーバーサイドプログラム
サーバーサイドプログラムとは、前述したとおり、サーバー側で実行されるプログラムを指します。
代表的な例としては、PHP や Ruby などがあり、WordPressはこれまでに紹介したとおり、PHPで作られています。
ここで押さえておきたいポイントは、サーバーサイドプログラムは、HTMLがブラウザに返される前の段階で実行されているという点です。
例えば、WordPressでWebサイトを表示する場合、ユーザーがページにアクセスすると、サーバー側でそのページを表示するためのHTMLが生成され、そのHTMLがブラウザに返されます。この「HTMLをサーバー側で生成する」という処理には、テンプレートファイルの読み込みや、共通パーツの呼び出し、データベースから必要な情報を取得する処理などが含まれます。これらを組み合わせて、ユーザーがリクエストしたページのHTMLを作り上げていくわけです。
このように、HTMLを生成する処理自体はサーバー側で行う必要があるため、その役割を担うのがサーバーサイドプログラムになります。
例：PHPでできること
例として、ブログの検索システムを考えてみると、より身近で理解しやすいでしょう。
ブログの検索システムでは、ユーザーが任意のキーワードを入力して「検索ボタン」をクリックすると、そのキーワードがサーバーに送信されます。サーバー側では、受け取った検索キーワードをもとにデータベースへリクエストを送り、該当する記事の情報を取得します。そして、その結果をHTMLに埋め込み、生成したHTMLをブラウザに返します。
この一連の処理は、サーバー側でデータベースと連携しながらHTMLを生成する必要があるため、サーバーサイドプログラムでなければ実現できません。
なお、WordPressで開発を進めていくうえで、PHPを扱えることは必須ですが、PHPをすべて網羅的にマスターする必要はありません。WordPressのテーマ開発で使用されるPHPの範囲は比較的限られており、重要なのは「WordPressで使われるPHP」に絞って理解することです。
そのため、やみくもにPHP全体を学習するのではなく、WordPressに必要なPHPを効率よく学ぶことが重要になります。unazukiのコンテンツでは、WordPress学習者向けに、実務で必要なPHPを体系的に学習できる構成を用意しています。
クライアントサイドとサーバーサイドのまとめ
クライアントサイドプログラムとサーバーサイドプログラムの違いを具体的に理解いただけたでしょうか？
参考までに以前僕のXで投稿したクライアントサイドとサーバーサイドプログラムの違いについて解説した図説の一部を貼っておきます。
クライアントサイドはブラウザ環境で実行するものであり、特長としてはブラウザ側で取得可能な様々なデータを活用したプログラムの実装が可能であり、ユーザーの任意の動作をトリガーに何かを実行することができます。一方でサーバーサイドプログラムはサーバー側で実行するので、最終的にブラウザに送るHTMLファイルを生成する前に実行され、例えばデータベースから様々な情報を取得してHTMLに埋め込んだり、複数のファイルを読み込んで１つのHTMLを生成したりすることができます。
おまけ：Ajaxとは？
一般的に、Webサイトの情報を更新するには、サーバーと通信を行い、ページ全体を再読み込みする必要があります。しかし、Ajax という技術を使うことで、Webページの一部分だけを更新することが可能になります。
例えば、Webページの読み込み時点では記事が10件しか表示されていないものの、スクロールしていくと次々と記事が追加で読み込まれていく――このようなニュースサイトやブログを見かけたことがあるのではないでしょうか。こうした仕組みは、「無限スクロール」と呼ばれることもあります。
Ajaxを使うと、このような挙動を実現できます。
AjaxはJavaScriptを用いた技術で、ユーザーの操作を検知し、必要に応じてサーバーと通信を行います。ページ全体を再読み込みするのではなく、必要なデータだけをサーバーにリクエストし、その結果を受け取ってHTMLに反映します。
このように、ページの読み込みとは別に通信を行う仕組みを、非同期通信と呼びます。
Ajaxは身近な例でいうと、「もっと見る」ボタンをクリックして記事を追加表示する機能や、検索フォームに文字を入力すると候補がリアルタイムで表示される機能などでも利用されています。
