View
1.454
Download
0
Category
Preview:
DESCRIPTION
JavaScript And Keywords
Citation preview
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 以外の環境でも、ブックマークレットを読み込むだけで動作する軽量なデバッガ
• あまり利用されることがない
Recommended