解説：Web開発でのクライアントサイドとサーバーサイドの違いは？

APIかWeb開発中に、クライアントサイドとサーバーサイドをよく耳にしていますね。それでは、この2つの概念をよく理解できていますか？クライアントサイドとサーバーサイドとの違いは何ですか？本文では、クライアントサイドとサーバーサイドを詳しく紹介した上、その相違点もわかりやすく解説します。

クライアントとサーバーサイドとは何ですか?

クライアントとサーバーサイドは、Web開発の用語で、アプリケーションコードが実行される場所を表しています。Web開発者はこの違いをフロントエンドとバックエンドとも呼びますが、クライアント/サーバーサイドとフロントエンド/バックエンドは完全一緒なものでもありません。

クライアントサーバーモデルが注目

インターネットのほとんどはクライアントサーバーモデルに基づいています。このモデルでは、ユーザーのデバイスはネットワークを介してサーバーと通信して必要なデータを取得しています。エンドユーザーのデバイス(ノートパソコン、スマートフォン、デスクトップコンピューターなど)は、常にサーバーの「クライアント」と見なされます。クライアントデバイスは、Webページやアプリケーションを取得するために、サーバーにリクエストを送信してサーバーからデータを取得する必要があります。

クライアントサーバーモデルが汎用される理由は、サーバーが通常、エンドユーザーのデバイスよりも性能が高くて、信頼できるからです。また、サーバーは時々メンテナンスされ、いつもオンラインで使用できる状態に保っています。それにしても、特定の原因でサーバー機が不安定になり、オフラインになることがありますが、このような場合、可用性を確保するために待機中の他のサーバーがあります。一方、ユーザーは自分のデバイスの電源を切ったり、オフにしたりする可能性がありますし、デバイスを紛失または破損する可能性もありますが、これはすべて他のユーザーがインターネットサービスを正常に使用することに影響を与えません。

サーバーは複数のクライアントとなるデバイスに同時にサービスを提供できます。クライアントデバイスでも、インターネットを閲覧およびブラウジングするプロセスで、複数のサーバーにリクエストを送信できます。

各クライアントは複数のサーバーと通信し、その逆もまたしかりです。

ユーザーがインターネットを閲覧していて、ブラウザのアドレスバーに「netflix.com」と入力したとします。これは、netflix.comのIPアドレスをホストするDNSサーバーへのリクエストが起きて、DNSサーバーはそのIPアドレスをブラウザーに提供することでレスポンスします。次に、ユーザーのブラウザーは、そのIPアドレスを利用して、リクエストされたページに表示されるコンテンツ(映画のサムネイル、Netflixのロゴ、検索バーなど)を取得できるように、Netflixサーバーにリクエストします。Netflixのサーバーは最後にレスポンスをブラウザに送信し、ブラウザはページをクライアントデバイスで表示されるようになります。

クライアントとは何ですか?

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

HTMLやCSSなどのマークアップ言語は、クライアントのブラウザによって解釈されます。さらに、現在多くの開発者がすべての操作をサーバー側でのみ実行することの代わりに、クライアント側のプロセスをアプリケーションアーキテクチャ内に置いたりしています。たとえば、ダイナミックWebページのビジネスロジックは、Webアプリケーションの中でクライアントを実行するのが普通です。クライアントサイドのプロセスはほとんどがJavaScriptで記述されています。

同じく上記のnetflix.comを例にとってみると、Netflixのホームページを表示するために、そのHTML、CSS、JavaScriptがクライアントのブラウザによって解析されます。このページは「イベント」にも応答します。たとえば、ユーザーはガーソルを映画のサムネイルに置くと、そのサムネール画像が拡大され、隣接するサムネイルが拡大の画像にスペースを空けるために少し横に移動するようになります。これは、クライアントサイドのプロセスの例です。ページ自体のコードがサーバーと通信せずにユーザーのアクションに応答することも可能です。

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

ご案内：ダイナミックWebページは、すべてのユーザーに同じコンテンツを表示せず、ユーザー入力に基づいて表示内容を変更できるWebページです。FacebookのニュースフィードがダイナミックWebページの例です。その一方、Facebookのログインページはほとんどは静的ページになります。

サーバーサイドとは何ですか?

クライアントサイドと同様に、「サーバーサイド」はクライアントではなくサーバー上で発生するすべてのイベントを示します。過去には、ダイナミックWebページの提供、データベースとの対話、認証、プッシュ通知など、ほぼすべてのビジネスロジックがサーバーサイドで実行されていました。

これらすべてのプロセスをもサーバー側で実行すると、いずれかのプロセスに関連するリクエストが、毎回もクライアントからサーバーに送信しなければならなくなります。これにより、大きな遅延が生じます。したがって、現代のアプリケーションはクライアント側でより多くのコードを実行するようにしています。例えば、ダイナミックWebページを実現するもう1つの方式は、ユーザーがブラウザで見れるコンテンツを変更できるスクリプトを実行することになります。

「フロントエンド」および「クライアント」と同様に、「サーバーサイド」と「バックエンド」は必ずしも完全に同じなものでもありません。バックエンドはプロセスの種類のみを指し、サーバーサイドはプロセスが実行される場所も指します。

クライアントサイドとサーバーサイドでのスクリプト処理

クライアントサイドのスクリプト処理は、通常JavaScriptなどのスクリプトをクライアントデバイス上のブラウザで実行することを意味します。JavaScriptはブラウザに広くサポートされているため、 JavaScriptで記述されているスクリプトをもクライアント側で実行できます。 その他のスクリプト言語は、ユーザーのブラウザでサポートされている場合にのみ使用できます。

サーバーサイドでのスクリプト処理は、通常クライアント上ではなくサーバー上でスクリプトが実行されることになります。ユーザーのアクションに応答するために、ダイナミックのコンテンツをWebページに送信することを目的としています。 サーバーは複数の言語をサポートしているため、サーバーサイドのスクリプトは必ずしもJavaScriptで記述される必要はありません。

Apidog：クライアントサイドとサーバーサイドとの通信

ここまでWebアプリのクライアントとサーバーの役割分担についてお話しました。この分業を活かすためには、クライアントとサーバーがスムーズに通信できることが重要です。そこでおすすめしたいのが「Apidog」というツールです。

ApidogはクライアントサイドからサーバーサイドへのAPI通信を簡単かつ高速に実行できるツールとして、クライアントとサーバー間のAPI通信を構築・検証・運用の一連の流れで支援できます。

具体的な機能は以下の通りです。

• APIの仕様設計: OpenAPI標準に基づいてAPIをデザイン
• APIドキュメントの自動生成: 設計した仕様からAPIリファレンスを生成
• API通信のコード生成: 各言語に対応した通信コードを自動で生成
• APIリクエストの送受信: テスト用のAPIコールがGUI上から直感的に実行できる
• APIのシナリオテスト: 複数APIを組み合わせたテストが可能
• モックサーバー機能: 本番環境への影響なくAPIの動作確認ができる

このようにサーバー側のAPIとクライアント側の利用を、一元的に高効率で実現できるのがApidogです。効率的な通信インフラを構築したい場合にはApidogがおすすめです。