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

フロントエンドとバックエンド（英語:Front end and back end）とは、Webアプリケーション開発におけるソフトウェアアーキテクチャである。

ソフトウェア開発において、フロントエンド（front end）はユーザーが対話するプレゼンテーション層を指し、バックエンド（back end）は背後でのデータ管理や処理を指す。フルスタックは、これら両方を合わせたものを指す。クライアントサーバモデルにおいて、通常クライアントはフロントエンドと見なされ、ユーザー向けタスクの大部分を処理し、サーバはバックエンドとして主にデータとロジックを管理する。

概要ソフトウェアアーキテクチャにおいて、ハードウェアとエンドユーザーの間には多くの抽象化層が存在し得る。フロントエンドは抽象化であり、ユーザーフレンドリーなインターフェースを提供することで基盤となるコンポーネントを単純化する。一方でバックエンドはデータストレージやビジネスロジックを処理する。

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

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

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

電気通信において、フロントエンドはデバイスやサービスと見なされる場合があり、バックエンドはサービスの提供をサポートするインフラストラクチャである。経験則として、フロントエンド（クライアント側）にはユーザーが操作するすべてのコンポーネントが含まれる。バックエンド（サーバ側）は通常サーバ上に存在し、多くの場合物理的にユーザーから遠く離れている。

ソフトウェアにおける定義ソフトウェアの文脈において、「フロントエンド」と「バックエンド」という用語は多様な定義を持つ。例えば、コンテンツ管理システム（CMS）において、フロントエンドはエンドユーザー向けに表示されるビューを指し、バックエンドは管理者向けに表示されるビューを指す。

同様に、音声合成の分野において、フロントエンドは入力テキストを記号的な音声表現に変換する合成システムの一部を指し、バックエンドは記号的な音声表現を実際の音声に変換する。

プログラミング言語のコンパイラにおいて、フロントエンドはコンピュータのソースコードを中間表現へと翻訳し、バックエンドは中間表現から実行可能コードを生成する。通常、バックエンドはより高速に動作するコードを生成するために最適化を行う。また、フロントエンドとバックエンドの区別は、ソースコードを処理するパーサと、実行可能コードを生成および最適化するコンパイラとを分離することもある。GNUコンパイラコレクション（GCC）などの一部の設計では、複数のフロントエンドオプション（様々なソースプログラミング言語を解析）と、複数のバックエンドオプション（様々なターゲットプロセッサ向けのコードを生成）を提供している。

一部のグラフィカルユーザインタフェース（GUI）アプリケーションは、基礎となるコマンドラインインターフェイス（CLI）プログラムの薄いフロントエンドとして機能し、ユーザーがCLIの用語やコマンドを学習する手間を省いている。

例としてのWeb開発フロントエンドとバックエンドの違いを理解するもう一つの方法は、ソフトウェア開発者がそれぞれに必要とする知識を考慮することである。以下の例は、Web開発に焦点を当てたリストである。

フロントエンド

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

バックエンド

PHP、Python、Ruby、Perl、Node.jsなどのスクリプト言語 C#、Java、Goなどのコンパイラ言語データアクセス層ビジネスロジックデータベース管理（データベース管理者）スケーラビリティ高可用性認証や認可などのセキュリティ上の懸念事項ソフトウェアアーキテクチャデータ変換バックアップ方法およびソフトウェア

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

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

API フロントエンドはAPIを通じてバックエンドと通信する。Webおよびモバイルのフロントエンドの場合、APIは多くの場合HTTPリクエスト/レスポンスに基づいている。また、APIは「Back end For Front end」（BFF）パターンのように、異なるフロントエンドインターフェースに異なるバックエンドサービスを使用することで、フロントエンドの処理負荷を軽減することもできる。

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

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

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

Źródło i licencja