Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載。
一般的に採用されるWeb技術についての説明です。
フロントエンドデベロッパに採用される技術
フロントエンド開発者が採用しているWebのコア技術は以下の通りです（この順番で学習することを検討してください）。
- Hypertext Transfer Protocol (HTTP)
- Cascading Style Sheets (CSS)
- Uniform Resource Locators (URL)
- HyperText Markup Language (HTML)
- JavaScript Programming Language (ECMAScript-262)
- JavaScript Object Notation (JSON)
- Document Object Model (DOM)
- Web APIs (HTML5関連やブラウザAPI)
- Web Content Accessibility Guidelines (WCAG) & Accessible Rich Internet Applications (ARIA)
これらの技術はこれから以下に示す関連資料や、仕様にて定義されています。Web関連の包括的な仕様は、platform.html5.orgやMDN Web APIsを御覧ください。
それぞれの技術に関連するドキュメントや仕様へのリンクとともに、9つの技術が以下に定義されています。
Hyper Text Markup Language (HTML)
普段HTMLと呼ばれているHyperText Markup Languageは、Webページを作る際に使用されるマークアップ言語です。
WebブラウザはHTMLファイルを読むことが出来ので、それをWebページとしンダリングします。HTMLでWebサイトの構造を記述することによってWebページを表現するので、プログラム言語というよりはマークアップ言語になります。
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
- All W3C HTML Spec
- The elements of HTML from the Living Standard
- Global attributes
- HTML 5.2 from W3C
- HTML 5.3 from W3C
- HTML attribute reference
- HTML element reference
- The HTML Syntax from the Living Standa
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)は、見た目とドキュメントフォーマットを記述するのに使われるマークアップ言語です。
HTMLやXHTMLで記述されたWebページやユーザインターフェースの見た目を変更するために使われるのが一般的ですが、XML、SVG、XULなど、XML形式のファイルならば適用することができます。CSSは殆どの魅力的なWebサイト、Webアプリケーションやモバイルアプリケーションのユーザインターフェースを作成する際に、HTMLやJavaScriptと一緒に使用される基礎技術です。
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
- All W3C CSS Specifications
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
- CSS reference
- Selectors Level 3
Hypertext Transfer Protocol (HTTP)
image:英語版Wikipedia
Hypertext Transfer Protocol (HTTP)は、分散型、協調型、ハイパーメディア情報システムの為のアプリケーションプロトコルです。HTTPはWorld Wide Webのデータ通信の基盤です。
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
Uniform Resource Locators (URL)
Uniform Resource Locator(URL)(Webアドレスとも呼ばれている)は、コンピュータネットワーク上に定義されたリソースの場所の参照、また検索する仕組みです。
URLはUniform Resource Identifier(URI)の特定のタイプのことをさしますが、多くの人はこの2つを同じ意味で使用します。URLは指定されたリソースへアクセスすることを意味しますが、全てのURIがこれに当てはまるわけではありません。
URLはWebページを参照するとき(http)に発生するのが最も一般的ですが、以下に挙げたものの他にも多くの他のアプリケーションでも使用されています。ファイル転送(ftp)、メール(mailto)、データベースアクセス(JDBC)など
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
Document Object Model (DOM)
image:英語版Wikipedia
ドキュメント上にあるすべてのノードは、DOMツリーというツリー構造状に編成されます。DOMツリー内のオブジェクトはアドレス指定され、オブジェクトが持つメソッドを使用して操作することができます。DOMのパブリックインターフェイスは、Application Programming Interface(API)で指定されます。
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
JavaScript Programming Language (ECMAScript 262)
JavaScriptは高水準、動的、動的型付け、インタプリタ型のプログラム言語です。またECMAScript言語仕様にて標準化されています。
HTMLやCSSと共に、Webコンテンツ制作に必要な3つの技術の内の1つです。大体のWebサイトが採用しており、全てのモダンブラウザではプラグイン無しでサポートしています。
JavaScriptは、ファーストクラスの関数を使用したプロトタイプベースであり、オブジェクト指向、命令型、関数型プログラミングスタイルをサポートしたマルチパラダイム言語です。テキスト、配列、日付、および正規表現を扱うためのAPIを備えていますが、ネットワーキング、ストレージ、グラフィックス機能などのI/Oは含まれておらず、埋め込まれたホスト環境に依存しています。
| 主な要素 | 説明 |
|---|---|
| 高水準 | 人間にとってわかりやすい記述の仕方が出来る言語のこと。 |
| 動的 | 動的でない言語がコンパイル時に行う事を、実行時に行うこと。 |
| 動的型付け | 静的型付けに対して、変数などに代入する値の型が実行時に決まる性質のこと。 |
| インタプリタ型 | 実行時にコンパイル->実行の流れを一度に行う性質のこと。 |
| ECMAScript言語仕様 | JavaScriptの標準仕様。 |
| ファーストクラス | 言語における基本的な操作を行える対象。変数へ関数を代入する、無名関数の生成など |
| プロトタイプベース | 新しいオブジェクトを生成するときに、既存のオブジェクトを複製する性質のこと。 |
| マルチパラダイム言語 | プログラミングパラダイムというプログラムの書き方が、複数種類対応している性質のこと。 |
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
Web APIs (HTML5関連やブラウザAPI)
Application Programming Interface(API)とは、プログラミングする際に他のコンポーネントの機能を使用する為の仕様やルールのことです。
JavaScriptを使用してWeb用のコードを書く際、非常に多くのAPIが使用できます。以下にWebアプリケーションやサイトを開発する際に使用できるインターフェースを全てリストアップします。
参照元：Mozila
関連する仕様 / ドキュメント
JavaScript Object Notation (JSON)
JSONデータを解析したり生成するコードは、多くのプログラム言語で簡単に利用できます。
JSONフォーマットを最初に定義したのは、Douglas Crockfordで、以下の2つの競合する標準仕様にて定められています。
| 標準仕様 | 内容 |
|---|---|
| RFC 7159 | 最小限の文法や構文のみについて記述されている。 |
| ECMA-404 | 意味付けやセキュリティ面での考慮事項について記述されている。 |
また、JSONの公式のメディアタイプはapplication/jsonです。
JSONファイルの拡張子は.jsonです。
参照元：英語版Wikipedia
関連する仕様 / ドキュメント
Web Content Accessibility Guidelines (WCAG) & Accessible Rich Internet Applications (ARIA)
アクセシブルデザインのコンセプトは、ダイレクトアクセス(支援なし)、支援技術(コンピュータスクリーンリーダーなど)との互換性を意味する間接アクセスの両方を保証します。
参照元：英語版Wikipedia
0 件のコメント:
コメントを投稿