フロントエンドウェブ開発（フロントエンドウェブかいはつ、Front-end web development）は、ユーザーがウェブサイトを閲覧し、対話できるように、HTML、CSS、およびJavaScriptを使用してウェブサイトのグラフィカルユーザインタフェースを開発することである。

フロントエンド開発に使用されるツール ウェブサイトのフロントエンドを開発するために利用できる、WordPress、Joomla、Drupalなどのプラットフォームやツールがいくつか存在する。

HyperText Markup Language

HyperText Markup Language（HTML）は、インターネット上でウェブコンテンツを表示し、構造化するための最新の標準である。HTMLは、ウェブサイト上に表示される要素と、その配置方法を定義する。すべての主要なウェブブラウザはHTMLを解釈するように設計されており、最新のウェブサイトのほとんどはユーザーにHTMLを提供している。ハイパーテキストとは、他のテキストへの参照を持つ、コンピュータ上に表示されるテキストのことであり、これらの参照（またはリンク）は「ハイパーリンク」と呼ばれる。インターネットユーザーがハイパーリンクされた項目を操作すると、ウェブサイトはリンクされたデータをユーザーに提供する。このデータは、別のHTMLウェブページ、JavaScript、またはその他のデータである可能性がある。HTMLの最新のメジャーリリースはHTML5であり、2014年10月28日にW3C勧告として最初に公開された。ウェブページは、多数のマークアップタグを含めて開発される場合がある。各マークアップタグのペアは、通常、開始タグで始まり、対応する終了タグで終わる。開始タグと終了タグの間のテキストは、HTML要素と呼ばれる。

Cascading Style Sheets

Cascading Style Sheets（CSS）は、ウェブサイトのプレゼンテーションとスタイルを制御する。CSSはカスケードシステムを使用し、詳細度、継承、および重要度に基づいてスタイルルールを適用することで、スタイルの競合を解決する。メディアクエリを使用すると、画面サイズや解像度などの要因に応じて、サイトのレイアウトや外観を調整できる。CSSは、HTMLファイルにリンクされた外部スタイルシート、内部の「<style>」ブロック、または個々の要素内のインラインという3つの方法で適用できる。

JavaScript

JavaScriptは、静的なHTMLページを動的なインターフェースに変換するために使用される、イベントベースの命令型プログラミング言語（HTMLの宣言型言語モデルとは対照的）である。JavaScriptコードは、HTML標準で提供されるDocument Object Model（DOM）を使用して、ユーザー入力などのイベントに応答してウェブページを操作できる。

AJAXと呼ばれる手法を使用することで、JavaScriptコードは（元のHTMLページの取得とは無関係に）ウェブからコンテンツをアクティブに取得し、サーバー側のイベントにも反応できるため、柔軟性と速度が向上する。

WebAssembly

WebAssemblyは、すべての主要なブラウザ（Google、Apple、Mozilla、Microsoftなどの主要ベンダー）でサポートされており、ウェブブラウザでコードを実行するためのJavaScriptの唯一の代替手段である（Flash、Java、Silverlightなどのプラグインの助けを借りない場合。ブラウザがプラグインのサポートを廃止しているため、これらはすべて廃止されている）。その採用以前には、asm.js（JavaScriptのサブセットであり、すべてのブラウザで厳密に動作する）があり、Internet Explorer 11などのブラウザで効率的にサポートされるコンパイラターゲットとしても使用されていた。また、WebAssemblyを直接サポートしていないブラウザでは、asm.jsにコンパイルしてサポートすることも可能であった。一般的に、プログラマはWebAssembly（またはasm.js）で直接プログラムするのではなく、Rust、C、C++、または理論的にはコンパイル可能なあらゆる言語を使用してプログラムする。

開発の目標 フロントエンド開発は、ウェブ体験の重要な側面であるユーザーインタラクションレイヤーを提供する。サイトのパフォーマンス、デジタルアクセシビリティ、サイトの応答性、ユーザーエクスペリエンス（UX）、およびフロントエンドのセキュリティはすべて、フロントエンド開発者が目指す目標である。

アクセシビリティ スマートフォンやタブレットなどのモバイルデバイスの開発が続く中、デザイナーはすべてのデバイスのブラウザでサイトが正しく表示されるようにする必要がある。これは、CSSのスタイルシートを使用してレスポンシブウェブデザインを作成することで実現できる。

パフォーマンス パフォーマンスの目標は主にレンダリング時間に関係しており、HTML、CSS、JavaScriptを操作してサイトがすばやく開くようにする。読み込み時間の短縮に加えて、開発者は速度、ブラウザの種類、およびウェブサイト全体でのユーザーのナビゲーションを考慮する必要がある。ウェブサイトの読み込みにかかる時間が長くなるほど、ユーザーが訪問をあきらめる可能性が高くなる。フロントエンド開発者のパフォーマンスに関する目標は、読み込み時間を最小限に抑え、可能な限り早く、エクスペリエンスをできるだけ利用しやすくインタラクティブにすることである。これは多くの場合、エクスペリエンスの長いテール部分を非同期的に読み込みながら、レイテンシを隠すための追加機能を追加することによって達成される。

脚注