クライアントサイド は、利用者のブラウザやスマホアプリなど、サービスを使う側の端末で動く処理を指します。
Webでは、ブラウザで動くJavaScript、画面の描画、入力中のチェック、クリック時の反応などがクライアントサイドの処理になりやすいです。
まず押さえたいポイント
- 利用者の端末やブラウザ側で動く処理
- JavaScriptで書かれることが多い
- 画面の操作感や即時反応と関係が深い
- サーバーサイド と通信してデータを取得することが多い
- フロントエンド と近いが、主に処理場所を表す言葉
フロントエンドとの違い
フロントエンドは、画面側を作る担当領域です。
クライアントサイドは、処理が利用者側の端末で動くことを表します。
たとえば、Reactで画面を作り、ブラウザで状態を切り替える処理は、フロントエンド開発でもあり、クライアントサイド処理でもあります。
ただし、フロントエンドの中にはサーバー側でHTMLを生成する SSR のような話も含まれるため、完全に同じ言葉ではありません。
実務で見るポイント
クライアントサイドに重要な秘密情報を置くと、利用者の端末から見えてしまう可能性があります。
APIキー、管理者権限、決済の確定処理などは、サーバーサイドで扱うべきかを考えます。
よくある誤解
クライアントサイドで入力チェックをしているから安全、とは言えません。
ブラウザ側の処理は利用者が改変できる前提で考える必要があります。入力チェックを画面側で行うことは操作性のために有効ですが、最終的な検証や権限確認はサーバー側でも行うのが基本です。
また、クライアントサイド処理が多いほど高性能になるとも限りません。JavaScriptが重くなると初回表示が遅くなったり、古い端末で操作が重くなったりします。
どの処理をブラウザ側で行い、どの処理をサーバー側に任せるかは、体験、セキュリティ、保守性を見て決めます。
詳しい比較は、フロントエンド、バックエンド、クライアントサイド、サーバーサイドの意味 で整理しています。