フロントエンド技術を学ぼう 1-2.一般的に採用されるWeb技術

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

www.mojage.club

第2回はPart I. The Front-End Practiceから、
2項のCommon Web Tech Employedを紹介します。

一般的に採用されるWeb技術についての説明です。

フロントエンドデベロッパに採用される技術

以下の順番で学ぶ事を勧めています。

  1. Uniform Resource Locators (URL)
  2. Hypertext Transfer Protocol (HTTP)
  3. Hyper Text Markup Language (HTML)
  4. Cascading Style Sheets (CSS)
  5. JavaScript Programming Language (ECMAScript-262)
  6. JavaScript Object Notation (JSON)
  7. Document Object Model (DOM)
  8. Web APIs (HTML5関連やブラウザAPI)
  9. Web Content Accessibility Guidelines (WCAG) & Accessible Rich Internet Applications (ARIA)

これらの技術はこれから以下に示す関連資料や、仕様にて定義されています。
Web関連の包括的な仕様は、platform.html5.orgを御覧ください。

Uniform Resource Locators (URL)

Uniform Resource Locator(URL)(Webアドレスとも呼ばれている)は、コンピュータネットワーク上に定義されたリソースの場所の参照、また検索する仕組みです。

URI≠URL

URLはUniform Resource Identifier(URI)の特定のタイプのことをさしますが、多くの人はこの2つを同じ意味で使用します。 URLは指定されたリソースへアクセスすることを意味しますが、全てのURIがこれに当てはまるわけではありません。

http以外のスキーム

URLはWebページを参照するとき(http)に発生するのが最も一般的ですが、以下に挙げたものの他にも多くの他のアプリケーションでも使用されています。

  • ファイル転送(ftp)
  • メール(mailto)
  • データベースアクセス(JDBC)

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

Hypertext Transfer Protocol (HTTP)

image:英語版Wikipedia

Hypertext Transfer Protocol (HTTP)は、分散型、協調型、ハイパーメディア情報システムの為のアプリケーションプロトコルです。 HTTPはWorld Wide Webのデータ通信の基盤です。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

Hyper Text Markup Language (HTML)

普段HTMLと呼ばれているHyperText Markup Languageは、Webページを作る際に使用されるマークアップ言語です。
WebブラウザはHTMLファイルを読むことが出来ので、それをWebページとしンダリングします。 HTMLでWebサイトの構造を記述することによってWebページを表現するので、プログラム言語というよりはマークアップ言語になります。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)は、見た目とドキュメントフォーマットを記述するのに使われるマークアップ言語です。
HTMLやXHTMLで記述されたWebページやユーザインターフェースの見た目を変更するために使われるのが一般的ですが、XML、SVG、XULなど、XML形式のファイルならば適用することができます。 CSSは殆どの魅力的なWebサイト、Webアプリケーションやモバイルアプリケーションのユーザインターフェースを作成する際に、HTMLやJavaScriptと一緒に使用される基礎技術です。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

JavaScript Programming Language (ECMAScript 262)

JavaScript高水準動的動的型付けインタプリタ型プログラム言語です。
またECMAScript言語仕様にて標準化されています。
HTMLやCSSと共に、Webコンテンツ制作に必要な3つの技術の内の1つです。
大体のWebサイトが採用しており、全てのモダンブラウザではプラグイン無しでサポートしています。
JavaScriptは、ファーストクラスの関数を使用したプロトタイプベースであり、オブジェクト指向、命令型、関数型プログラミングスタイルをサポートしたマルチパラダイム言語です。 テキスト、配列、日付、および正規表現を扱うためのAPIを備えていますが、ネットワーキング、ストレージ、グラフィックス機能などのI/Oは含まれておらず、埋め込まれたホスト環境に依存しています。

主な要素 説明
高水準 人間にとってわかりやすい記述の仕方が出来る言語のこと。
動的 動的でない言語がコンパイル時に行う事を、実行時に行うこと。
動的型付け 静的型付けに対して、変数などに代入する値の型が実行時に決まる性質のこと。
インタプリタ型 実行時にコンパイル->実行の流れを一度に行う性質のこと。
ECMAScript言語仕様 JavaScriptの標準仕様。
ファーストクラス 言語における基本的な操作を行える対象。変数へ関数を代入する無名関数の生成など
プロトタイプベース 新しいオブジェクトを生成するときに、既存のオブジェクトを複製する性質のこと。
マルチパラダイム言語 プログラミングパラダイムというプログラムの書き方が、複数種類対応している性質のこと。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

JavaScript Object Notation (JSON)

非同期ブラウザ/サーバー間通信(AJAJ)に使用される主なデータ形式であり、主にXML(AJAXで使用される)を置き換えます。
JavaScriptから派生したのが始まりですが、JSONは言語依存しないデータフォーマットです。 JSONデータを解析したり生成するコードは、多くのプログラム言語で簡単に利用できます。

JSONの定義と仕様

JSONフォーマットを最初に定義したのは、Douglas Crockfordで、以下の2つの競合する標準仕様にて定められています。

標準仕様 内容
RFC 7159 最小限の文法や構文のみについて記述されている。
ECMA-404 意味付けやセキュリティ面での考慮事項について記述されている。

また、JSONの公式のメディアタイプはapplication/jsonです。
JSONファイルの拡張子は.jsonです。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

Document Object Model (DOM)

image:英語版Wikipedia

Document Object Model(DOM)は、クロスプラットフォームかつ言語依存の無い、HTML、XHTML、XMLドキュメントのオブジェクトを表現し相互作用させる為の規約です。
ドキュメント上にあるすべてのノードは、DOMツリーというツリー構造状に編成されます。 DOMツリー内のオブジェクトはアドレス指定され、オブジェクトが持つメソッドを使用して操作することができます。 DOMのパブリックインターフェイスは、Application Programming Interface(API)で指定されます。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント

Sponsored Link

Web APIs (HTML5関連やブラウザAPI)

Application Programming Interface(API)とは、プログラミングする際に他のコンポーネントの機能を使用する為の仕様やルールのことです。
JavaScriptを使用してWeb用のコードを書く際、非常に多くのAPIが使用できます。
以下にWebアプリケーションやサイトを開発する際に使用できるインターフェースを全てリストアップします。

参照元:Mozila

関連する仕様 / ドキュメント

Sponsored Link

Web Content Accessibility Guidelines (WCAG) & Accessible Rich Internet Applications (ARIA)

アクセシビリティは、障害を持つ人々の為の

  • 製品
  • デバイス
  • サービス
  • 環境

のデザインを意味します。

アクセシブルデザインのコンセプトは、

  • ダイレクトアクセス(支援なし)
  • 支援技術(コンピュータスクリーンリーダーなど)との互換性を意味する間接アクセス

の両方を保証します。

参照元:英語版Wikipedia

関連する仕様 / ドキュメント