読者です 読者をやめる 読者になる 読者になる

Amarronの日記

iOSやMac、Web系の記事を書きます。

HTML5 CSS3 JavaScript 入門

f:id:Amarron:20150524235338p:plain

概要


  • 次のようなことに観点を当てて記載しました
    • HTML5やCSS3、JavaScriptとは何か?
    • 新機能やレガシーブラウザ対応
  • 全体像や概要、基礎を抑えるのに役立てられたら良いと思います
  • フロントエンドエンジニアを目指す人にもオススメです
  • プログラムの例は少ないので実際の使い方などは他のサイトを参考にしてください

HTML5


HTML5とは

  • HTMLの最新バージョン、HTML4/XHTML1に変わるしようとして登場
  • HTML4やXHTML1が「文章」を定義するためのマークアップ言語だったのに対してHTML5は「Webアプリケーションプラットフォーム」を実現するための中核の技術として考えられている

HTML5で追加された主な要素

  • ドキュメントの構造を表す要素
    • セクション/アウトラインの概念が強化されている
    • 代表的なセクショニンング要素は4種類
      • <section>,<article>,<aside>,<nav>
    • 各セクションのヘッダ情報やフッター情報を定義するために次の要素もある
      • <header>,<footer>
  • マルチメディア要素
    • これまで動画や音声の再生にはFlashなどのプラグインをインストールして使用する必要があったが、HTML5では動画や音楽用の要素が追加された
      • <video>,<audio>
    • <audio>要素はJavaScriptからアクセスできるAudio Apiが提供されており、より複雑な操作が可能

HTML5で使える新機能

  • グラフィックス
    • Canvas:ブラウザ畳でグラフィックスを描画するための機能
      • 線を引く、短径で塗りつぶす等
    • SVG(Scalable Vectir Graphics):グラフィックスを描画する別の方法として、ベクター画像を扱う(XMLの構造を持つ)
      • 拡大しても画像が粗くならない
      • XMLで記述されるため、JavaScriptからDOMにアクセスできる
      • Illustratorなどのデザインデータを使用できる
    • WebGL:3Dグラフィックスを扱うためのOpen GL ES2.0に基づくAPI
      • Canvasと同様にJavaScriptで実装し<canvas>要素に対して描画を行う
      • 現時点ではモバイルブラウザのサポートが少ない
    • その他
      • CreeteJS,three.jsなど、様々なライブラリが公開されており少ないコードで手軽に実装できる
  • 位置情報(Geolocation API):ユーザーの位置情報を取り扱う
  • 履歴(History API):ブラウザの履歴を管理・操作する機能
    • 次のような機能が追加された
      • pushStateメソッド:新しい履歴を追加
      • replaceStateメソッド:履歴を置換
      • popStateイベント:操作した履歴の移動を補足するイベント
    • 主な用途はAjaxを駆使したページへの対応で良く利用される
  • ストレージ(Web Storage):ブラウザ側にデータを保持する機能
    • Key-Value型で保持(Cookieよりもデータ量が大きく、扱いやすいAPIが提供されている)
    • Cookieとは違い、データがサーバーへ送信されない(送信したい場合は個別に処理を記述する)
    • Web Storageには次の二つがある
      • localStorage:永続的にデータが保持される、別タブ・ウィンドウで共有可能
      • sessionStorage:ブラウザが起動している間だけ有効、別タブ・ウィンドウでは共有不可
  • オフライン対応(Application Cache):ブラウザにファイルをキャッシュさせ、オフラインでも機能する
    • manifestファイルにキャッシュさせたいファイルを定義することで一度読み込めば次回以降はキャッシュしたファイルを読み込むようになる
    • manifestファイルは非常に強力なキャッシュとなるため、ファイルが更新されないなどの事態を引き起こすことがあり、実運用の際には注意して設計する必要がある
  • ファイル操作(Drag and Drop API/File ApI):ページ上の要素やデスクトップなどブラウザ外のファイルをドラック&ドロップをできるようにする
    • ファイルを選択する以外にも、JavaScriptで選択されたファイルにもアクセス可能
  • 並行処理(Web Workers):JavaScriptの並行処理を行える
    • 通常、JavaScriptの処理は同一のスレッド上で処理されるが、重い処理を実行すると完了するまで処理が止まってしまう
    • Web Workersを利用することでバックグランドで動作させユーザへのストレスを軽減できる

CSS3


CSS3とは

  • CSSの最新バージョン、CSS2.1までは画像を使わざるを得なかった表現もCSSで表現可能に
  • モジュール単位で仕様を策定している
    • テキスト(CSS Text Module Level 3)や背景(CSS Backgrounds and Borders Module Lebel3)など、20以上のモジュールがあり、それらをまとめてCSS3と呼ばれている
    • 細分化することでブラウザ開発側もモジュール単位で実装を進めることができる

CSS3で使える新機能

  • アニメーション
    • 次の二つの方法でアニメーションを表現
      • transitionプロパティ:スタイル指定されている要素に対し違うスタイルを指定し変化をアニメーションさせる
      • animation/@keyframesプロパティ:animationプロパティは、@keygramesで定義したキーフレームに沿ったアニメーションを実行します
  • グラデーション
    • background/background-imagesプロパティに次の二つの新しい値を用いることでグラデーションを表現
      • linear-gradient:線形グラデーションを生成
      • radial-gradient:円形グラデーションを生成
  • ドロップシャドウ
    • 次の二つの方法でドロップシャドウ(影をつける)効果を与えられる
      • box-shadowプロパティ:ボックスモデルにドロップシャドウ効果を与える
      • text-shadowプロパティ:テキストにドロップシャドウ効果を与える
  • ボーダー
    • 次の二つのプロパティがある
      • border-radiusプロパティ:ボーダーの角を丸めるプロパティ
      • border-imageプロパティ:ボーダーの描画に画像を用いるプロパティ
  • 変形
    • transformプロパティ:移動、回転、拡大・縮小、傾斜させることができる(translateとscaleのアニメーションと組み合わせてつ変わることが多い)
  • ウェブフォント
    • これまでは、フォントを指定する場合、ユーザが保有しているフォントでしか表現できなかった
    • ウェブフォントは、@font-faceを用いることで制約をなくし様々なフォントの表現が可能(ただしライセンスの考慮は必要)
    • @font-face:サーバ上のフォントファイルを読み込みfont-familyプロパティが利用可能
  • セレクタ:{ }内のCSS命令を適用するか選択(セレクト)する部分
  • メディアクエリ:@mediaを表示するメディアの種類や特性に応じたスタイルを指定するためのもの
    • メディア特性には、「幅、高さ、色」の指定ができ、幅の指定はレスポンシブルデザインの実装によく使われる
  • ベンダープレフィックス:接頭辞を付与したプロパティ(将来的な仕様変更に備えた先行的な実装)
    • 次のようなプロパティがある
    • 具体的には各ブラウザごとにプロパティを変更したりできる

JavaScript


JavaScriptとは

  • Webページに動きを表現できる
  • HTML5の台頭や、アプリケーション化、Flashに変わる表現などで利用される
  • Webブラウザ上の言語として認識が強いがサーバサイドの言語としても広く知られてきた(Node.jsなど)
  • 言語を使うにあたり次のようなものがある
    • 変数:var name = 'tanaka'
    • データ型:Number,String,Boolean,Null,Undefined,Object型がある
    • 関数:function 関数名(引数1,引数2...){処理}
    • スコープ:グローバルスコープとローカルスコープの2種類がある
    • オブジェクト:複数のデータをまとめたものでキーと値の組み合わせで管理されている
// オブジェクトの例)
// オブジェクトの生成
var obj = {
    name : 'tanaka',
    other : {address : 'Tokyo'},
      getName : function {
        return this.name;
      }
};

// 値の取り出し
console.log(obj.name);
console.log(obj.other.address);
console.log(obj.other.getName());

オブジェクトの生成

// コンストラクタ関数とnewの例)
// 1.コンストラクタ関数"Person"を生成
// 慣例的にコンストラクタ関数の一文字目は大文字
var Person = function() {
    this.name = 'sato';
    this.address = 'Tokyo'
    return this;
}
// 2.コンストラクタ関数"Person"のプロトタイプにメソッド追加
Person.prototype.getAddress = function {
    return this.address;
}
// 3. 生成されたオブジェクトを格納
var person = new Person();
person.getAddress(); // "Tokyo"が取得できる

this

  • 読み込み専用の変数(最初は掴みにくく乱用しがち)
  • 次のようなルールで使う
    • コンストラクタ:生成するオブジェクト
    • オブジェクトのメソッド:呼び出し元のオブジェクト
    • イベントハンドラ:イベントの呼び出し元の要素
    • callまたはapply:指定したオブジェクト
    • それ以外:グローバルオブジェクト

DOM(Document Object Model

  • JavaScriptからHTMLやCSSにアクセスするための仕組み
  • DOMツリーとして、window.documentからアクセスできる(HTMLのタグの階層)
  • DOMで出来ることは大まかに次の3つ
    • DOM要素の情報の取得・変更:document.getElemenById('ID名');
    • DOM要素の追加:var btn = document.createElement('span');document.body.appendChild(btn);
    • イベント関数登録:window.onload = function() {処理};

非同期通信

  • Ajaxを利用する上で欠かせない技術
  • Ajaxを利用する場合、主流な方法は次の二つ
    • XMLHTTPRequest通信:サーバとデータをやりとりするAPIデータ形式XML系とJSON形式がある)、オリジンが一致しないと通信できない(安全な通信を行うためのセキュリティ制限あり)
    • JSONP通信:XMLHTTPRequest通信ではオリジンが一致しないと通信ができないので、それを解決するために登場した(scriptの読み込みはドメイン間の制限を受けないため、動的なscriptラグを読み込みコールバック関数を使って実現んできる)

その他


レガシーブラウザ対応

  • HTML5/CSS3の新機能はどれも魅力的で使いたくなるが、HTML5/CSS3に対応していないようなレガシーブラウザにはどのように対応すれば良いか
  • 次の3つの考え方で対応
    • プログレッシブ・エンハンスメント:レガシーブラウザを基準にした見せ方を提供、HTML5/CSS3に対応したブラウザはよりリッチな見せ方を提供
    • グレイスフル・でグラデーション:プログレッシブ・エンハンスメントとは反対の考え、HTML5/CSS3などの最新技術を基準にした見せ方を提供し、レガシーブラウザは最低限を提供
    • ポリフィル:レガシーブラウザでもJSライブラリを用いて擬似的にリッチに表現
      • よく使われるライブラリ:html5shiv、CSS3 Pie、Selectivizr、css3-mediaueries-jsなど

おすすめ書籍

  • 「フロントエンドエンジニア養成読本」がオススメです(このブログは一部抜粋しているのでもう少し詳しく知りたい人は是非!)
  • プログラム以外にも「フロントエンドエンジニアの基礎」、「開発環境」、「パフォーマンス」、「Git」など幅広く網羅しています