クライアントサイドとサーバーサイドの意味とは?| クライアントサイドとサーバーサイドの違い

「クライアントサイド」と「サーバーサイド」と言う言葉は、Webアプリケーションのコードが実行される場所を表すものです。

学習目的

この記事を読み終えると、以下のことができるようになります。

  • クライアントサーバーモデルとは
  • クライアントとサーバーで行われるプロセスのタイプをご覧ください
  • クライアントとサーバーがアプリケーションのフロントエンドとバックエンドにどのように関係しているかをご覧ください
  • サーバーレスアーキテクチャの使用がサーバー側のプロセスに与える影響を見つけるには

記事のリンクをコピーする

クライアント側/サーバー側とは?

クライアント側/サーバー側とは、アプリケーションコードの実行場所を説明するためのWeb開発用語です。Web開発者は、この区別をフロントエンドとバックエンドと呼びますが、クライアント側/サーバー側とフロントエンド/バックエンドはまったく同じではありません。サーバーレスアーキテクチャでは、サーバーレスベンダーがすべてのサーバー側プロセスをホストし、リソースを割り当てます。プロセスは、アプリケーションの使用率が増加するにつれて拡大します。

クライアントサーバーモデルとは?

インターネットの多くは、クライアントサーバーモデルに基づいています。このモデルでは、ユーザーデバイスはネットワークを介して中央に配置されたサーバーと通信し、互いに通信するのではなく、必要なデータを取得します。ラップトップ、スマートフォン、デスクトップコンピューターなどのエンドユーザーデバイスは、まるで会社からサービスを取得している顧客のように、サーバーの「クライアント」と見なされます。クライアントデバイスは、Webページまたはアプリケーションのリクエストをサーバーに送信し、サーバーはそれに対する応答を提供します。

通常、サーバーはユーザーデバイスよりも強力で信頼性が高いため、クライアントサーバーモデルが使用されます。また、常に管理され、制御された環境で維持され、常にオンで利用可能になっています。個々のサーバーがダウンする可能性はありますが、通常、それらをバックアップするための他のサーバーがあります。一方、ユーザーはデバイスのオン/オフを切り替えたり、デバイスを紛失または破損したりできますが、他のユーザーのインターネットサービスに影響を与えることはありません。

サーバーは複数のクライアントデバイスに一度に対応でき、各クライアントデバイスはインターネットへのアクセスと閲覧中に複数のサーバーにリクエストを送信します。

複数のクライアントとサーバーが相互作用:

クライアントサーバーモデルにおける多対多の関係

それぞれのクライアントは複数のサーバーと通信しますが、その逆も同様です。

ユーザーがインターネットを閲覧しており、ブラウザバーに「netflix.com」と入力したとします。これにより、netflix.comのIPアドレスに対してDNSサーバーへのリクエストが発生し、DNSサーバーはブラウザーにIPアドレスを提供することでこのリクエストに応答します。次に、ユーザーのブラウザは、映画のサムネイル画像、Netflixロゴ、検索バーなど、ページに表示されるコンテンツを(IPアドレスを使用して)Netflixサーバーにリクエストします。Netflixサーバーはこれをブラウザに配信し、ブラウザはクライアントデバイスにページを読み込みます。

クライアント側とは?どう言う意味ですか

Web開発では、「クライアント側」とは、クライアント(エンドユーザーデバイス)で表示または実行されるWebアプリケーションのすべてを指します。これには、ユーザーのブラウザ内でアプリケーションが実行するアクションに加えて、テキスト、画像、UIの残りの部分など、ユーザーに見えるものが含まれます。

HTMLやCSSなどのマークアップ言語は、クライアント側のブラウザによって解釈されます。さらに、現代の多くの開発者は、アプリケーションアーキテクチャにクライアント側プロセスを含め、サーバー側ですべてを行うことから遠ざかっています。たとえば、動的Webページ*のビジネスロジックは、通常、最新のWebアプリケーションでクライアント側を実行します。クライアント側のプロセスは、ほとんどの場合JavaScriptで記述されています。

上記のnetflix.comの例では、Netflixメインページがユーザーにどのように表示されるかを指示するHTML、CSS、およびJavaScriptは、クライアント側のブラウザによって解釈されます。ページは「イベント」に応答することもできます。たとえば、ユーザーのマウスが映画のサムネイル画像の1つにホバーすると、画像が拡大し、隣接するサムネイルがわずかに片側に移動して、大きな画像のためのスペースを空けます。これはクライアント側プロセスの例です。Webページ内のコード自体がユーザーのマウスに応答し、サーバーと通信せずにこのアクションを開始します。

クライアント側はフロントエンドとも呼ばれますが、これら2つの用語は正確に同じものを意味するものではありません。クライアント側はプロセスが実行される場所のみを指し、フロントエンドはクライアント側を実行するプロセスの種類を指します。

*動的Webページは、すべてのユーザーに同じコンテンツを表示せず、ユーザー入力に基づいて変更するWebページです。Facebookホームページは動的ページですが、Facebookログインページの大部分は静的です。

サーバー側とはどのような意味ですか?

クライアント側と同様に、「サーバー側」とは、クライアントではなくサーバーで発生するすべてのことを意味します。過去には、ほぼすべてのビジネスロジックがサーバー側で実行され、これには動的Webページのレンダリング、データベースとの対話、ID認証、プッシュ通知が含まれました。

サーバー側でこれらすべてのプロセスをホストすることの問題は、それらの1つに関係するそれぞれのリクエストが、クライアントからサーバーまで常に移動する必要があることです。これにより、かなりのレイテンシーが発生します。このため、現代のアプリケーションはクライアント側でより多くのコードを実行します。使用事例の1つは、ユーザーが見るコンテンツに変更を加えるスクリプトをブラウザ内で実行することにより、動的なWebページをリアルタイムでレンダリングすることです。

「フロントエンド」および「クライアント側」と同様に、バックエンドはサーバー上で行われるプロセスの用語でもありますが、バックエンドはプロセスのタイプのみを指して、サーバー側はプロセスが実行される場所を指します。

クライアント側スクリプトとは?サーバー側スクリプトとは?

クライアント側スクリプトとは、通常はブラウザ内のクライアントデバイスでJavaScriptなどのスクリプトを実行することを意味します。 JavaScriptは一般的にサポートされているため、JavaScriptで記述されている場合、すべての種類のスクリプトをクライアント側で実行できます。他のスクリプト言語は、ユーザーのブラウザがサポートしている場合にのみ使用できます。

サーバー側スクリプトは、多くの場合、ユーザーのアクションに応じて動的コンテンツをWebページに配信するために、クライアントではなくサーバーで実行されます。サーバーはさまざまな言語をサポートしている可能性があるため、サーバー側のスクリプトをJavaScriptで記述する必要はありません。

スクリプトはクライアント側とサーバー側で実行:

クライアントサイドとサーバーサイドのスクリプトの記述

データはクライアントとサーバーの間でやり取りされ、スクリプトは両側にて実行できます。

サーバーレスアーキテクチャ内のサーバー側プロセスの仕組みは?

サーバーレスコンピューティングでは、すべてのサーバー側プロセスまたはバックエンドプロセスはまだクライアントデバイスではなくサーバー上で実行されますが、特定のサーバーまたはサーバーセットにはリリースされません。バックエンドプロセスは機能分割され、オンデマンドで実行され、自動的にスケールアップします。開発者は、サーバーレスアーキテクチャ内で通常サーバー側で実行されるすべての機能を引き続き構築できます。

Cloudflare Workersはサーバー側またはクライアント側を実行しますか?

Cloudflare Workersはオンデマンドで実行されるサーバーレスJavaScript機能であり、Cloudflareがクライアントと配信元サーバー間でCDNキャッシュに使用するエッジネットワークで実行されます。これにより、開発者は技術的にはサーバー側でありながらクライアントデバイスに可能な限り近いサーバーレスバックエンドを構築できるため、レイテンシーを短縮し、アプリケーションがユーザーインタラクションにより迅速に応答するようになります。

Cloudflare Workersの導入に関しては、開発者向けドキュメントをご覧ください。