狠狠撸

FrontEnd JavaScript
&
Keywords
2013-08-23 @uupaa

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

フロントエンド開発者に
知っておいてほしい
キーワードを列挙してみました

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)
KHTML
WebKit
(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
? 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, ?le(mobile)
<audio>
<video>
<dialog>
<svg>
<svg2>
<inline svg>
<link rel=”import”>
<picture><source>
<img srcset>
HTML5 (HTML)
<script async defer>

Shadow DOM
Template Elements
Custom Elements
mouseenter
mouseleaveFormVaridation
Encrypted Media
MutationObserver
Drag and Drop
Content Security Policy
Keyboad Events
Pointer Events
HTML5 (DOM)
TouchEvents
GestureEvents
Pointer Lock
Microdata
DOM Lv4

box-re?ect:
transforms:
position: sticky
marquee:
inputmode: kana
touch-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)

?ow-from:
?ow-into:
CSS Execlusions
*-gradient:
repeating-*-gradient()
CSS Gradients
var-*
var()
CSSVariables
mask:
mask-clip:
CSS Mask
HTML5 (CSS)

?lters:
mix-blend-mode:
background-blend-mode:
CSS Blending
@keyframes
CSS Animations
@font-face
Web Font
@media
Media Queries
@supports
@document (CSS4)
CSS Conditional Rules
HTML5 (CSS)

HTML5 (Meida/Network)
WebAudio API
WebP
WebP (Animation)
VP9
SPDY
QUIC
PNaCl
HTTP Client Hints
WebNoti?cation API
Streams API
XMLHttpRequest Lv2
Push API

DeviceMotion
DeviceOrientation
FullScreen API
Vibration
WebMIDI API
Battry
Geolocation
GamePad API
WebRTC
WebSpeech API
WebNFC API
WebUSB API
HTML5 (Device)

FileReader
FileWriter
TypedArrays
FileSystem API
Blob
URL
MediaStream API
HTML5 (Blob/File/Storage)
ApplicationCache
IndexedDB
WebSQL
Quota Management API
WebStorage

HTML5 (Timing/Event)
NavigationTiming API
requestAnimationFrame
High-resolution timing
UserTiming API
Ressource Timing API
PageVisibility API
HashChange Event
Messageing
MessageChannels

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
? 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 5
Object.create
Object.de?neProperty
Object.de?neProperties
Object.getPrototypeOf
Object.keys
Object.seal
Object.freeze
Object.preventExtensions
Object.isSealed
Object.isFrozen
Object.isExtensible
Object.getOwnPropertyDescriptor
Object.getOwnPropertyNames
Date#toISOString
Date.now
Function#bind
Array.isArray
Array#indexOf
Array#lastIndexOf
Array#every
Array#some
Array#forEach
Array#map
Array#?lter
Array#reduce
Array#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” unde?ned = “immutable”;

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

ES 6
RegExp(,“y”)
Object.observe
Object.assign
Object.mixin
Object.is
Object.isnt
String.fromCodePoint
String#codePointAt
String#repeat
String#startWith
String#endWith
String#contains
String#toArray
Array.from
Array.of
Number.isFinite
Number.isInteger
Number.isNaN
Number.toInteger
Math.sign
Math.log10
Math.log2
Math.log1p
Math.expm1
Math.cosh
Math.sinh
Math.tanh
Math.acosh
Math.asinh
Math.atanh
Math.hypot
Math.trunc

ES 6
Map
Set
WeakMap
Proxy
Promises
function(...arg){}
Math.max(...[1,2,3]);
[...[1,2,3]]
Iterators
function(arg = “default”)Arrow function
private keyword;
class
let
const
Module
for (value of [1,2]) { ... }
yield u`template strings`;
StructType
{
function blockLevel() {
}
}

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

? 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 (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 Pre?x
? 仕様策定中の実験的機能に付与されるプリフィクス
? 仕様策定後にはプリフィクスは除去される
Browser CSS Pre?x Method Pre?x
-webkit-***
webkitCamelCase
WebKitCamelCase
-webkit-***
webkitCamelCase
WebKitCamelCase
-ms-*** msCamelCase
-moz-***
mozCamelCase
MozCamelCase

? 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%

? Node.js
? V8を組み込んだサーバサイドJavaScript実行環境
? %> brew install node
? npm
? Node.js 用のパッケージ管理ツール
? Node.jsをインストールすると
npmも一緒にインストールされる

? 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
? チェックを行ってくれるサービスの一覧
? MarkupValidation 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://js?ddle.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

? 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 Over?ow - http://stackover?ow.com/
? 圧倒的な情報量
? Qiita - http://qiita.com/
? 日本語で探す場合に
? can i use - http://caniuse.com/
? HTML5 API のブラウザサポート状況が分かる
? 不具合情報までは得られない
? HTML5 TEST - http://html5test.com/
? HTML5 系のAPIの実装状況を点数で表示する
? ブラウザ毎の比較もできる
? 不具合情報までは得られない

? 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://?ags - 試験運用機能のON/OFF
? chrome://?ash - 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 以外の環境でも、ブックマークレットを読み
込むだけで動作する軽量なデバッガ
? あまり利用されることがない

狠狠撸

JavaScript And Keywords

More Related Content

JavaScript And Keywords