フロントエンド

ソフトウェアプログラムやWebサイトのフロントエンドとは、ユーザーが操作するすべての部分のことです。ユーザーの視点では、フロントエンドはユーザーインターフェースと同じ意味です。開発者の視点では、インターフェースのデザインと、それを機能させるプログラミングを指します。一方、バックエンドには、裏側で行われる機能やデータ処理が含まれます。

フロントエンド開発の主な目的の1つは、スムーズで「摩擦のない」ユーザーエクスペリエンスを作ることです。つまり、アプリケーションやWebサイトのフロントエンドは、直感的で使いやすいものであるべきです。簡単な目標のように聞こえますが、すべてのユーザーやデバイスが同じではないため、実際には驚くほど複雑になることがあります。たとえば、モバイルデバイス向けに開発されたアプリには、デスクトップアプリケーションとは大きく異なるフロントエンドが必要です。Webサイトは複数のデバイスや画面サイズで適切に動作する必要があるため、現代のWeb開発では通常、レスポンシブデザインが使われます。

フロントエンドの要素には、次のようなものがあります。

1. アプリケーションやページのレイアウト
2. グラフィックス
3. 音声や動画の要素
4. テキストコンテンツ
5. ユーザーインターフェースの要素ボタン、リンク、(ツールバー、ナビゲーションバーなど）
6. 入力領域(ダイアログボックス）、フォームのフィールド、テキストエリアなど
7. ユーザーフロー（あるインターフェースから次のインターフェースへ進む流れ）
8. ユーザー設定、テーマ、カスタマイズ

ユーザーの入力はフロントエンドを通じて受け取られ、プログラムやWebサイトのバックエンドで処理されます。バックエンドのコードはデータを読み書きし、フロントエンドを通じてユーザーに出力を送ります。アプリやWebサイトのバックエンドとフロントエンドは連携して動作するため、ソフトウェア関連の仕事では、フロントエンド開発とバックエンド開発の両方が求められることがよくあります。両方の領域を開発することを、フルスタック開発と呼びます。

NOTE: フロントエンドは、名詞として「front end」、形容詞として「front-end」と表記されることもあります。簡潔にするため、両方の場合に、1語で表記する「frontend」が一般的に使える用語になっています。