フロントエンドウェブ開発

フロントエンドウェブ開発とは、 HTML、CSS、JavaScriptを使用してウェブサイトのグラフィカルユーザーインターフェースを開発し、ユーザーがウェブサイトを閲覧したり操作したりできるようにすることです。[ 1 ] [ 2 ] [ 3 ] [ 4 ]

フロントエンド開発に使用するツール

WordPress、Joomla、Drupalなど、ウェブサイトのフロントエンドを開発するために使用できるツールやプラットフォームはいくつかあります。[ 5 ]

ハイパーテキストマークアップ言語

ハイパーテキスト・マークアップ言語（HTML）は、インターネット上のウェブコンテンツの表示と構造化における最新の標準規格です。[ 6 ] HTMLは、ウェブサイトに表示される要素とその配置を定義します。すべての主要なウェブブラウザはHTMLを解釈するように設計されており、ほとんどの最新のウェブサイトはユーザーにHTMLを提供します。[ 7 ]ハイパーテキストとは、コンピュータ上に表示されるテキストで、他のテキストへの参照が含まれています。これらの参照（またはリンク）は「ハイパーリンク」と呼ばれます。インターネットユーザーがハイパーリンクされた項目を操作すると、ウェブサイトはリンクされたデータをユーザーに提供します。このデータは、別のHTMLウェブページ、JavaScript、その他何でも構いません。HTMLの最新のメジャーリリースはHTML5で、2014年10月28日にW3C勧告として最初に公開されました。[ 8 ] [ 9 ]

カスケードスタイルシート

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

JavaScript

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

AJAXと呼ばれる技術を使用すると、JavaScript コードは (元の HTML ページの取得とは独立して) Web からコンテンツをアクティブに取得したり、サーバー側のイベントに反応したりすることもできるため、Web ページのエクスペリエンスに真に動的な性質を追加できます。

Webアセンブリ

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

開発目標

フロントエンドの開発者はこれらの点を念頭に置き、利用可能なツールと技術を活用してこの目的を達成します。[ 5 ]

アクセシビリティ

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

パフォーマンス

パフォーマンス目標は主にレンダリング時間に関係しており、サイトがすぐに開くように HTML、CSS、JavaScript を操作します。

参考文献

  1. ^ MDN (2020年5月2日). 「フロントエンドWeb開発者」 . Mozilla Developer . 2022年7月4日閲覧。
  2. ^ Refsnes Data (1999-07-04). 「Web開発ロードマップ」 . w3schools . 2022年7月4日閲覧。
  3. ^ Refsnes Data (1999年7月4日). 「フロントエンド開発者になる方法」 . w3schools . 2022年7月4日閲覧。
  4. ^ Refsnes Data (1999-07-04). 「フロントエンド開発」 . w3schools . 2022年7月4日閲覧。
  5. ^ a b Codesido, Ivan (2009年9月28日). 「フロントエンド開発とは何か？」 Theguardian.com . 2019年1月17日閲覧。
  6. ^ 「HTML標準」 . html.spec.whatwg.org . 2024年9月30日閲覧。
  7. ^ 「WebとWeb標準 - Web開発を学ぶ | MDN」 . developer.mozilla.org . 2024年8月2日. 2024年9月30日閲覧。
  8. ^ "HTML5" . w3 . 2014年10月28日. 2024年9月30日閲覧。
  9. ^ 「Web標準」 . W3C . 2024年9月30日閲覧。
  10. ^ Abed, Sudad (2019). 「CSSの挿入」（PDF） .
「 https://en.wikipedia.org/w/index.php?title=Front-end_web_development&oldid=1327214214」より取得