FrontEnd JavaScript&

Keywords2013-08-23 @uupaa

「知らなければググれない」

フロントエンド開発者に知っておいてほしい

キーワードを列挙してみました

Browser

http://evolutionofweb.appspot.com/

• Browser Components

• ブラウザはコンポーネントで構成されている全体を見れば複雑だが、個々のコンポーネントは基礎部品の積み重ねで出来ており、相応の時間をかけてブラウザのコードを読めば細部まで理解が可能

• WebKit,Firefox,最新ブラウザの内部構造

• http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/

• WebKit

• 主にAppleが開発中のレンダリングエンジン• Android BrowserはWebKit

• ChromeもVer. 27まではWebKit → 28からは Blink へ

• WebKit2

• WebKitをマルチプロセス化したもの• Safari, MobileSafari, Tizen(?) が WebKit2 を採用

• Blink

• Google が WebKit からフォークし開発中のエンジン• Chrome (for Android), Opera.Next が Blink を採用

WebKit fork tree

WebKit2(Apple)

KHTMLWebKit(Apple)

Blink(Google)

• WebKit::WebCore

• WebKitのコアコンポーネント。レンダリング担当

• プラットフォームに依存しない(共通部品)

• WebKit::WebCore/platform

• 各プラットフォームごとの実装

• WebKit::Android WebKit

• Android Browser用の実装• Chrome for Android では使われていない

• {root}/framework/base/core/java/android/webkit

• {root}/external/webkit

• WebKit::JavaScript Core

• WebKit デフォルトの JavaScript エンジン

• Nitro

• Apple の JavaScript エンジン

• MobileSafari で利用されている

• V8

• Google の JavaScript エンジン

• Chrome, Chrome for Android,Android 4.1以上, Adobe Air, Node.jsで利用されている

• JIT (Just-In-Time compiler)

• 実行時にコンパイルを行い、ネイティブコードを直接生成するコンパイラ

• Nitro, TraceMonkey, V8 などは JIT コンパイラ

• JIT毎に特性が異なり、あるブラウザで高速なコードでも、他のブラウザも同じ結果になるとは限らない

• 現在は正しくても、未来では不正解になることもよくある。疑問を感じたらベンチマークで比較

• V8::Crankshaft

• V8 を更に高速化する技術• 頻繁に繰り返し実行する部分は徹底的に最適化を行い、そうでもない部分には最適化を施さない

• Emscripten

• CやC++などの言語で書かれたソースコードを、LLVMを利用し、JavaScriptで実行できる形に変換するコンパイラ

• asm.js

• Emscriptenの弱点を補強するもの• 型情報を付与し最適化しやすくする

• Rhino

• Javaで実装された組み込み用の JavaScript エンジン

• SpiderMonkey, TraceMonkey, IonMonkey, JaegerMonkey

• Mozilla の JavaScript エンジン

• Cairo

• グラフィックライブラリ、Firefoxが使用している

• Skia

• Googleのグラフィックライブラリ、ChromeとAndroid が使用している

• Chromium

• 主にGoogleが開発しているChromeのベースブラウザ• 実験的な機能を多数搭載している• http://www.chromestatus.com/features

• Firefox OS (Boot to Gecko)

• Mozilla が開発している Web OS

• デバイスの機能をブラウザから利用するWeb***APIを多数策定している

• https://wiki.mozilla.org/WebAPI

HTML5

• HTML5

• WebAppを実現する技術や仕様の総称

• 影響範囲はHTML,CSS,DOM,SVG,Canvas,Video, Audioと多岐に渡り、必要とされる知識量も膨大

• 2012年に仕様策定が完了済みhttp://www.w3.org/2012/12/html5-cr.html.ja

• 2014年中に実験フェーズを終え、最終勧告が公開される予定

• 最終勧告に到達するまでには、2種類以上のブラウザで仕様が十分に実証される必要がある

<canvas><details>

<summary><a download>

<iframe sandbox srcdoc>

<style scoped><datalist>

<track>

<input type=”***”> date, month, number, datetime, week, time, url, color, range, search, email, tel, file(mobile)

<audio><video>

<dialog>

<svg>

<svg2><inline svg>

<link rel=”import”>

<picture><source><img srcset>

HTML5 (HTML)

<script async defer>

Shadow DOM

Template ElementsCustom Elements

mouseentermouseleaveFormVaridation

Encrypted MediaMutationObserver

Drag and Drop

Content Security Policy

Keyboad EventsPointer Events

HTML5 (DOM)

TouchEventsGestureEvents

Pointer Lock

Microdata

DOM Lv4

box-reflect:

transforms:

position: sticky

marquee:

inputmode: kanatouch-action:

scroll-behavior:

scrollbar-attachment:

CustomFilters

CSS Grid Layout

CSS Instrinic Sizing

CSS Multi-column Layout

CSS Box Alignment

Lazy Layout

CSS Generated Content

CSS Flexible Box

HTML5 (CSS)

flow-from:flow-into:

CSS Execlusions

*-gradient:repeating-*-gradient()

CSS Gradientsvar-*var()

CSS Variables

mask:mask-clip:

CSS Mask

HTML5 (CSS)

filters:mix-blend-mode:background-blend-mode:

CSS Blending

@keyframesCSS Animations

@font-faceWeb Font

@mediaMedia Queries

@supports@document (CSS4)

CSS Conditional Rules

HTML5 (CSS)

Canvas 2D Blending (blend-mode)

Canvas 2D Text DecorationCanvas rendering from WorkersCanvas context “alpha” attribute

screen.canvasResolution

HTML5 (Canvas)

normal | multiply | screen | overlay| darken | lighten| color-dodge | color-burn| hard-light | soft-light | difference| exclusion | hue | saturation| color | luminosity

WebGL

HTML5 (Meida/Network)

WebAudio API

WebPWebP (Animation)

VP9

SPDYQUIC

PNaClHTTP Client Hints

WebNotification APIStreams APIXMLHttpRequest Lv2

Push API

DeviceMotionDeviceOrientation

FullScreen API

Vibration

WebMIDI API

Battry

GeolocationGamePad APIWebRTCWebSpeech API

WebNFC APIWebUSB API

HTML5 (Device)

FileReaderFileWriter

TypedArrays

FileSystem API

BlobURL

MediaStream API

HTML5 (Blob/File/Storage)

ApplicationCacheIndexedDB

WebSQL

Quota Management API

WebStorage

HTML5 (Timing/Event)

NavigationTiming API

requestAnimationFrameHigh-resolution timingUserTiming API

Ressource Timing API

PageVisibility APIHashChange Event

MessageingMessageChannels

HTML5 (Other)

WebCtypto APIIME API

• DOM Lv0

• 仕様が存在しないレガシーな HTML/CSS/JS の挙動のことをDOM Lv0 と呼ぶ

• 最新のブラウザでもある程度は動作するが無保証

• CSSOM

• DOM Lv0 の一部(CSS)を仕様として(無理やり)文章化したもの

• 古いブラウザはこの仕様通りに実装されていない• window.innerWidth, pageXOffset, screenX, outerWidth

• Element.elementFromPoint, getClientRect

• HTMLElement.clientTop, offsetTop

• MouseEvent.xxx

ECMAScript

• ECMAScript

• ECMA(国際標準化団体)で標準化された JavaScript

• ES 3 (ECMAScript-262 3rd edition)

• ES 5 (ECMAScript-262 5th edition)

• ES 3 に StrictMode, JSON, getter/setter などを追加

• ES 5.1 は ES 5 の Errata (誤字修正版)

• ES 6 (ES.next, harmony)

• ES 5.1 をベースに策定中の新仕様

• JScript

• IE 3～8 に搭載されたJavaScript互換言語(ちょっと違う)

ES 5Object.createObject.definePropertyObject.definePropertiesObject.getPrototypeOfObject.keysObject.sealObject.freeze

Object.preventExtensions

Object.isSealedObject.isFrozen

Object.isExtensible

Object.getOwnPropertyDescriptorObject.getOwnPropertyNames

Date#toISOStringDate.now

Function#bind

Array.isArrayArray#indexOfArray#lastIndexOfArray#everyArray#someArray#forEachArray#mapArray#filterArray#reduceArray#reduceRight

String#trim

ES 5

JSON.parse

JSON.stringify

var object = { get function, set function};

“String indexer”[12];

var object = { “new”: “reservedWord”, “lastComma”: “ready”,};

“use strict” undefined = “immutable”;

ES 5 Compatibility Tablehttp://kangax.github.io/es5-compat-table/

ES 6RegExp(, “y”)

Object.observe

Object.assignObject.mixinObject.isObject.isnt

String.fromCodePointString#codePointAtString#repeatString#startWithString#endWithString#containsString#toArray

Array.fromArray.of

Number.isFiniteNumber.isIntegerNumber.isNaNNumber.toInteger

Math.signMath.log10Math.log2Math.log1pMath.expm1Math.coshMath.sinhMath.tanhMath.acoshMath.asinhMath.atanhMath.hypotMath.trunc

ES 6

MapSetWeakMapProxyPromises

function(...arg){}Math.max(...[1,2,3]);[...[1,2,3]]

Iterators

function(arg = “default”)Arrow function

private keyword;

classletconst

Module

for (value of [1,2]) { ... }

yield u`template strings`;

StructType

{ function blockLevel() { }}

ES 6 Compatibility Tablehttp://kangax.github.io/es5-compat-table/non-standard/

AltJS

• AltJS

• コンパイルしてJavaScriptを生成する言語の総称• Haxe, CoffeeScript, JSX, TypeScript などがある

• Haxe

• ActionScript 3とほぼ同じ構文を持つ静的型付け言語(動的型付けも可能)

• Haxeのコードは、Flash, ActionScript 3, C++, C#,

Java, PHP, Neko にもコンパイル可能

• CoffeeScript

• Rubyに似た独自の構文を持つ動的型付け言語

• JSX

• Java に似た構文をもつ静的型付け言語

• (将来はC++にもコンパイルが可能になるらしい)

• TypeScript

• ES 6の構文を先取りした静的型付け言語

• JavaScriptのソースコードをそのままコンパイル可能

Feature Haxe CoffeeScript JSX TypeScript

静的型 ◯ --- ◯ ◯

動的型 ◯ ◯ ◯ ◯

類似言語 AS3 Ruby Java? C#

型推論/型チェック ◯ --- ◯ ◯

オーバーロード --- --- ◯ △

力点 汎用性 Ruby風 最適化 ES6先取

Feature Haxe CoffeeScript JSX TypeScript

開発規模 中～大 小 中～大 小～大

手引書 十分 十分 不足 不足

導入実績 少ない 多い 多少 多少

開発ツールのアシスト

◎ △ △ ◎

既存Libraryの活用 可能 --- --- 可能

Google Trend検索ボリューム 30 89 ??? 49

W3C

• W3C (World Wide Web Consortium)

• Webの技術仕様の標準化を推進する非営利団体。W3Cで承認された仕様が標準となる

• 検討結果をTechnical Report(TR)として公開する

• W3Cの勧告フェーズ• Working Draft (WD, 草案) - 3ヶ月で次のステップへ

• Last Call Working Draft (LC, 最終草案) - レビュークリアで次のステップへ

• Candidate Recommendation (CR, 勧告候補) - 試験的実装開始。問題があればWDに差し戻し

• Proposed Recommendation (PR, 勧告案) - 2つ以上のブラウザで実装を確認すると次のステップへ

• Recommendation (REC, 勧告) - 正式な規格として承認

• 標準化作業中のWebAPI

• http://www.w3.org/2012/sysapps/

• Bluetooth, Calender, Device, Idle, Network, Secure...

• ベンダー独自のWebAPI

• Chrome API• Chrome WebStore, Chrome Extension, Google Apps で利用可能な特別なAPI

• http://developer.chrome.com/apps/api_index.html

• Mozilla WebAPI• Firefox, Firefox OS などで利用可能な特別なAPI

• https://wiki.mozilla.org/WebAPI

• Venvor Prefix

• 仕様策定中の実験的機能に付与されるプリフィクス• 仕様策定後にはプリフィクスは除去される

Browser CSS Prefix Method Prefix

-webkit-*** webkitCamelCaseWebKitCamelCase

-webkit-*** webkitCamelCaseWebKitCamelCase

-ms-*** msCamelCase

-moz-*** mozCamelCaseMozCamelCase

Trend

• Browser Share

• IE が著しい減少トレンド = デスクトップの減少

• Chrome が急成長している• http://gs.statcounter.com/ http://www.w3counter.com/trends

• Mobile Carrier Share

• Docomoが減少トレンド• http://www.tca.or.jp/database/

• https://sites.google.com/site/mobilemarketshare/japan-volume

• docomo: 46.23%, au: 28.79%, softbank: 24.98%

ServerSide JavaScript

• Node.js

• V8を組み込んだサーバサイドJavaScript実行環境

• %> brew install node

• npm

• Node.js 用のパッケージ管理ツール

• Node.jsをインストールするとnpmも一緒にインストールされる

Development

• Grunt

• アセットビルドパイプライン自動化ツール• タスクを登録しCoffeeScriptやSassのコンパイル、ファイルの変更をwatchしリビルド・リロード

• Bower

• フロントエンド用のパッケージ管理ツール• % npm install -g bower

• Yeoman

• Webフロントエンドの構成管理ツール• % npm insall -g yo grunt-cli bower

• Bower と Grunt と連携して動作する

• PhantomJS

• 画面を持たない Safari (WebKit)

• コンソールからテストを実行可能

• SlimerJS

• PhantomJSのGecko版

• CaspserJS

• PhantomJS(SlimerJS)と連携動作するライブラリ

• 簡単な記述で複雑なテストを実行できる• スクレイピングなどにも応用可能

• Validation Service• チェックを行ってくれるサービスの一覧• Markup Validation Service - http://validator.w3.org/

• HTML5lint - http://www.htmllint.net/html-lint/htmllint.html

• CSS Lint - http://csslint.net/

• JS Hint - http://www.jshint.com/

• JSON Editot - http://braincast.nl/samples/jsoneditor/

• BenchMark• jsPerf - http://jsperf.com/

• Test Bed• jsFiddle - http://jsfiddle.net/

• Chrome DevTools の Snippets も利用できる

• Generator

• CSS系• Google.search(“CSS ジェネレーター まとめ”)

• 例: http://matome.naver.jp/odai/2132750704946539001

• 例: http://matome.naver.jp/odai/2135014007678440101

• グリッドレイアウト系• Google.search(“レイアウト ジェネレーター まとめ”)

• 例: http://w3q.jp/t/1947

• 例: http://e0166.blog89.fc2.com/blog-entry-862.html

Development::Document

• MDN - https://developer.mozilla.org/ja/

• Google.search(“MDN keyword”) で検索するとWebに関する仕様を調べることができる

• HTML5 Rocks - http://www.html5rocks.com/ja/

• Googleの中の人が執筆と翻訳

• Dush - http://kapeli.com/dash

• ドキュメントビューアアプリ• AngularJS, BackboneJS, CSS, Git, HTML, jQuery, Less,

NodeJS, Sass など、多種多様なドキュメントをインクリメンタルサーチ(串刺し検索)ができる

• Stack Overflow - http://stackoverflow.com/

• 圧倒的な情報量• Qiita - http://qiita.com/

• 日本語で探す場合に• can i use - http://caniuse.com/

• HTML5 API のブラウザサポート状況が分かる

• 不具合情報までは得られない

• HTML5 TEST - http://html5test.com/

• HTML5 系のAPIの実装状況を点数で表示する

• ブラウザ毎の比較もできる• 不具合情報までは得られない

DevTools

• Browser Cache (または単に Cache)• ブラウザがサーバから取得したアセットを自動的に保持する仕組み

• Cache を OFFにする• 設定を変更し、キャッシュを無効にすることで、修正がリアルタイムで反映される状態にする(キャッシュの有無による混乱を回避するため)

• about:about (chrome://about)• ブラウザの隠し機能一覧。一部だけ紹介• chrome://appcache-internals - ApplicationCacheを使った開発で必ず知っておきたい画面。制御が難しいAppCacheのキャッシュをクリアできる

• chrome://blob-internals - Blobを使った開発でお世話になる画面。Blob URLの一覧を確認できる

• chrome://dns - DNSやDNSプリフェッチ結果の一覧

• chrome://flags - 試験運用機能のON/OFF

• chrome://flash - ChromeがロードしているFlashモジュールとバージョンなど

• chrome://gpu - GPU情報。ハードウェアアクセラレーションがONなのかOFFなのか確認ができる

• chrome://inspect - 開いているページの一覧と直接DevToolsを起動することが可能。Chrome for Androidのリモートデバッグでお世話になるページ

• chrome://media-internals - 現在開いているメディアストリーム(Video, Audio)の情報一覧。音が鳴らないときなどにAudioストリームを開きすぎていないかなどの問題切り分けに使える

• chrome://memory-internals - chrome://memory よりも詳しい情報が取得できる

• chrome://net-internals - Chrome経由のネットワークアクセスをキャプチャしたり一覧でみたりと、とても重宝する

• その他にも便利な機能が沢山あります

• Firebug

• Firefoxのエクステンション(開発者ツール)、Firefoxの普及に一役買ったキラーツール

• Firebugがあるという理由でFirefoxをメインブラウザに選択する人がちょっと前まで大勢いた

• 現在では、活躍の場を失いつつある• FirebugLite

• Firefox 以外の環境でも、ブックマークレットを読み込むだけで動作する軽量なデバッガ

• あまり利用されることがない