フロントエンドとバックエンド

ソフトウェア開発において、フロントエンドはユーザーが操作するプレゼンテーション層を指し、バックエンドは舞台裏で行われるデータ管理と処理を指します。「フルスタック」とは、この両方を指します。クライアントサーバーモデルでは、クライアントは通常、ユーザー対応のタスクの大部分を処理するフロントエンドと見なされ、サーバーは主にデータとロジックを管理するバックエンドです。

導入

ソフトウェアアーキテクチャでは、ハードウェアとエンドユーザーの間に多くのレイヤーが存在する場合があります。フロントエンドは抽象化されており、ユーザーフレンドリーなインターフェースを提供することで基盤となるコンポーネントを簡素化します。一方、バックエンドはデータの保存とビジネスロジックを処理します。

例

電子商取引 Web サイト: フロントエンドはユーザーインターフェイス (製品ページ、検索バーなど) であり、バックエンドは支払いを処理し、在庫を更新します。

銀行アプリ: フロントエンドでは口座残高が表示され、バックエンドでは安全な取引が処理され、記録が更新されます。

ソーシャルメディアプラットフォーム: フロントエンドではニュースフィードが表示され、バックエンドでは投稿が保存され、通知が管理されます。

電気通信においては、フロントエンドはデバイスまたはサービスと考えられ、バックエンドはサービスの提供をサポートするインフラストラクチャです。

経験則として、フロントエンド（クライアント側）にはユーザーが操作するすべてのコンポーネントが含まれます。バックエンド（サーバー側）は通常サーバー上に存在し、ユーザーから物理的に遠く離れていることがよくあります。

ソフトウェア定義

コンテンツ管理システムでは、フロントエンドはエンドユーザー向けのビューを指し、バックエンドは管理ユーザー向けのビューを指します。^{[ 1 ]}^{[ 2 ]}

音声合成において、フロントエンドとは入力テキストを記号的な音声表現に変換する合成システムの部分を指し、バックエンドとは記号的な音声表現を実際の音に変換する部分を指します。^{[ 3 ]}

コンパイラでは、フロントエンドがコンピュータのソースコードを中間表現に変換し、バックエンドが中間表現から実行可能コードを生成します。バックエンドは通常、より高速に実行できるコードを生成するように最適化されます。フロントエンドとバックエンドの区別は、ソースコードを処理するパーサーと、実行可能コードを生成・最適化するコンパイラを区別することもできます。GCC などの一部の設計では、複数のフロントエンドオプション（異なるソース言語の解析）と複数のバックエンドオプション（異なるターゲットプロセッサ向けのコード生成）が提供されています。^[⁴^]

一部のグラフィカルユーザーインターフェイス(GUI) アプリケーションは、基礎となるコマンドラインインターフェイス(CLI) プログラムのシンプルなフロントエンドとして機能し、ユーザーが CLI の用語やコマンドを学習する必要がないようにしています。

Web開発を例に

フロントエンドとバックエンドの違いを理解するもう一つの方法は、それぞれのソフトウェア開発者に求められる知識を考えることです。以下の例は、Web開発に焦点を当てています。

フロントエンド

HTML、CSS、JavaScriptなどのマークアップ言語とWeb言語、およびSassやjQueryなどのこれらの言語で一般的に使用される補助ライブラリ
非同期リクエスト処理とAJAX
React、Angular、Vue.jsなどのフレームワークを使用したシングルページアプリケーション
Web パフォーマンス(最大コンテンツペイント、インタラクティブになるまでの時間、アニメーションのFPS、メモリ使用量などの最適化)
レスポンシブウェブデザイン
ブラウザ間の互換性の問題と回避策
ヘッドレスブラウザによるエンドツーエンドのテスト
WebpackやGulp.jsなどのツールを使用して、JavaScript ファイルの変換とバンドル、画像サイズの縮小、その他のプロセスの処理を行うビルド自動化
検索エンジン最適化
アクセシビリティに関する懸念
GIMPやPhotoshopなどの画像編集ツール
ユーザーインターフェースの設計と作成

バックエンド

フロントエンドとバックエンド

Git、Mercurial、Subversionなどのバージョン管理ツール
FTPやrsyncなどのファイル転送ツールとプロトコル

API

フロントエンドはAPIを介してバックエンドと通信します。Webおよびモバイルフロントエンドの場合、APIはHTTPリクエスト/レスポンスに基づいていることが多いです。APIは、「バックエンド・フォー・フロントエンド」（BFF）パターンのように、フロントエンドインターフェースごとに異なるバックエンドサービスを使用することで、フロントエンドの処理負荷を軽減することもできます。^{[ 5 ]}

ハードウェアの定義

コンピュータネットワークにおいて、フロントエンドとは、デバイスをネットワークに接続したり、DMZなどのセキュリティを提供したり、データを転送可能な形式に変換したりするハードウェアを指します。バックエンドとは、ネットワーク内でデータを処理および転送するハードウェアを指します。

プロセッサ設計において、フロントエンド設計は、 Verilogなどのハードウェア記述言語で回路の動作を最初に記述することを指します。一方、バックエンド設計は、その動作をダイ上の物理的なトランジスタにマッピングするプロセスを指します。

参照

参考文献

^ 「ウェブサイトのフロントエンドとバックエンド：知っておくべきことすべて」 DOJO Creative 2020年2月7日。2022年9月1日時点のオリジナルよりアーカイブ。 2022年8月31日閲覧。
^ Thapliyal, Vimal. 「フロントエンドとバックエンドのMVCの違い - Joomlatuts」 . joomlatuts.net . 2016年12月30日時点のオリジナルよりアーカイブ。2016年12月30日閲覧。
^ Gutierrez-Osuna, Ricardo. 「L18: 音声合成（バックエンド）」（PDF） . tamu.edu . テキサスA&M大学. 2019年2月14日時点のオリジナル（PDF）からアーカイブ。 2016年12月29日閲覧。
^ Bin Muhammad, Rashid. 「オペレーティングシステムノート」 . www.personal.kent.edu . ケント州立大学. 2018年8月31日時点のオリジナルよりアーカイブ。 2016年12月30日閲覧。
^ Wickramarachchi, Viduni (2021年2月24日). 「BFFパターン（バックエンド・フォー・フロントエンド）：入門」 . Bits and pieces . 2024年3月27日時点のオリジナルよりアーカイブ。 2021年11月13日閲覧。

[1] 「ウェブサイトのフロントエンドとバックエンド：知っておくべきことすべて」 DOJO Creative 2020年2月7日。2022年9月1日時点のオリジナルよりアーカイブ。 2022年8月31日閲覧。

[2] Thapliyal, Vimal. 「フロントエンドとバックエンドのMVCの違い - Joomlatuts」 . joomlatuts.net . 2016年12月30日時点のオリジナルよりアーカイブ。2016年12月30日閲覧。

[3] Gutierrez-Osuna, Ricardo. 「L18: 音声合成（バックエンド）」（PDF） . tamu.edu . テキサスA&M大学. 2019年2月14日時点のオリジナル（PDF）からアーカイブ。 2016年12月29日閲覧。

[4] Bin Muhammad, Rashid. 「オペレーティングシステムノート」 . www.personal.kent.edu . ケント州立大学. 2018年8月31日時点のオリジナルよりアーカイブ。 2016年12月30日閲覧。

[5] Wickramarachchi, Viduni (2021年2月24日). 「BFFパターン（バックエンド・フォー・フロントエンド）：入門」 . Bits and pieces . 2024年3月27日時点のオリジナルよりアーカイブ。 2021年11月13日閲覧。

[ 1 ]

[ 2 ]

[ 3 ]

[

[ 5 ]