FrontEnd JavaScript
&
Keywords
2013-08-23 @uupaa
「知らなければググれない」
フロントエンド開発者に
知っておいてほしい
キーワードを列挙してみました
Browser
http://evolutionofweb.appspot.com/
• Browser Components
• ブラウザはコンポーネントで構成されている
全体を見れば複雑だが、個々のコンポーネントは基
礎部品の積み重ねで出来ており、相応の時間をかけ
てブラウザのコードを読めば細部まで理解が可能
• WebKi...
• WebKit
• 主にAppleが開発中のレンダリングエンジン
• Android BrowserはWebKit
• ChromeもVer. 27まではWebKit → 28からは Blink へ
• WebKit2
• WebKitをマル...
WebKit fork tree
WebKit2
(Apple)
KHTML
WebKit
(Apple)
Blink
(Google)
• WebKit::WebCore
• WebKitのコアコンポーネント。レンダリング担当
• プラットフォームに依存しない(共通部品)
• WebKit::WebCore/platform
• 各プラットフォームごとの実装
• WebKit:...
• WebKit::JavaScript Core
• WebKit デフォルトの JavaScript エンジン
• Nitro
• Apple の JavaScript エンジン
• MobileSafari で利用されている
• V8
•...
• JIT (Just-In-Time compiler)
• 実行時にコンパイルを行い、ネイティブコードを直
接生成するコンパイラ
• Nitro, TraceMonkey,V8 などは JIT コンパイラ
• JIT毎に特性が異なり、あるブ...
• Emscripten
• CやC++などの言語で書かれたソースコードを、
LLVMを利用し、JavaScriptで実行できる形に変換する
コンパイラ
• asm.js
• Emscriptenの弱点を補強するもの
• 型情報を付与し最適化し...
• Rhino
• Javaで実装された組み込み用の JavaScript エンジン
• SpiderMonkey,TraceMonkey, IonMonkey,
JaegerMonkey
• Mozilla の JavaScript エンジン...
• Chromium
• 主にGoogleが開発しているChromeのベースブラウザ
• 実験的な機能を多数搭載している
• http://www.chromestatus.com/features
• Firefox OS (Boot to ...
HTML5
• HTML5
• WebAppを実現する技術や仕様の総称
• 影響範囲はHTML,CSS,DOM,SVG,Canvas,Video,Audio
と多岐に渡り、必要とされる知識量も膨大
• 2012年に仕様策定が完了済み
http://www....
<canvas>
<details>
<summary>
<a download>
<iframe sandbox srcdoc>
<style scoped>
<datalist>
<track>
<input type=”***”>
dat...
Shadow DOM
Template Elements
Custom Elements
mouseenter
mouseleaveFormVaridation
Encrypted Media
MutationObserver
Drag and...
box-reflect:
transforms:
position: sticky
marquee:
inputmode: kana
touch-action:
scroll-behavior:
scrollbar-attachment:
Cus...
flow-from:
flow-into:
CSS Execlusions
*-gradient:
repeating-*-gradient()
CSS Gradients
var-*
var()
CSSVariables
mask:
mask-c...
filters:
mix-blend-mode:
background-blend-mode:
CSS Blending
@keyframes
CSS Animations
@font-face
Web Font
@media
Media Que...
Canvas 2D Blending (blend-mode)
Canvas 2D Text Decoration
Canvas rendering from Workers
Canvas context “alpha” attribute
s...
HTML5 (Meida/Network)
WebAudio API
WebP
WebP (Animation)
VP9
SPDY
QUIC
PNaCl
HTTP Client Hints
WebNotification API
Streams ...
DeviceMotion
DeviceOrientation
FullScreen API
Vibration
WebMIDI API
Battry
Geolocation
GamePad API
WebRTC
WebSpeech API
We...
FileReader
FileWriter
TypedArrays
FileSystem API
Blob
URL
MediaStream API
HTML5 (Blob/File/Storage)
ApplicationCache
Index...
HTML5 (Timing/Event)
NavigationTiming API
requestAnimationFrame
High-resolution timing
UserTiming API
Ressource Timing API...
HTML5 (Other)
WebCtypto APIIME API
• DOM Lv0
• 仕様が存在しないレガシーな HTML/CSS/JS の挙動の
ことをDOM Lv0 と呼ぶ
• 最新のブラウザでもある程度は動作するが無保証
• CSSOM
• DOM Lv0 の一部(CSS)を
仕様として(無理やり)...
ECMAScript
• ECMAScript
• ECMA(国際標準化団体)で標準化された JavaScript
• ES 3 (ECMAScript-262 3rd edition)
• ES 5 (ECMAScript-262 5th edition)
• E...
ES 5
Object.create
Object.defineProperty
Object.defineProperties
Object.getPrototypeOf
Object.keys
Object.seal
Object.freeze...
ES 5
JSON.parse
JSON.stringify
var object = {
get function,
set function
};
“String indexer”[12];
var object = {
“new”:“re...
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
...
ES 6
Map
Set
WeakMap
Proxy
Promises
function(...arg){}
Math.max(...[1,2,3]);
[...[1,2,3]]
Iterators
function(arg = “defaul...
ES 6 Compatibility Table
http://kangax.github.io/es5-compat-table/non-standard/
AltJS
• AltJS
• コンパイルしてJavaScriptを生成する言語の総称
• Haxe, CoffeeScript, JSX, TypeScript などがある
• Haxe
• ActionScript 3とほぼ同じ構文を持つ
静的型付け言...
• JSX
• Java に似た構文をもつ静的型付け言語
• (将来はC++にもコンパイルが可能になるらしい)
• TypeScript
• ES 6の構文を先取りした静的型付け言語
• JavaScriptのソースコードをそのままコンパイル可能
Feature Haxe CoffeeScript JSX TypeScript
静的型 ⃝ --- ⃝ ⃝
動的型 ⃝ ⃝ ⃝ ⃝
類似言語 AS3 Ruby Java? C#
型推論/型チェック ⃝ --- ⃝ ⃝
オーバーロード --- ...
Feature Haxe CoffeeScript JSX TypeScript
開発規模 中∼大 小 中∼大 小∼大
手引書 十分 十分 不足 不足
導入実績 少ない 多い 多少 多少
開発ツールの
アシスト
◎ △ △ ◎
既存Librar...
W3C
• W3C (World Wide Web Consortium)
• Webの技術仕様の標準化を推進する非営利団体。
W3Cで承認された仕様が標準となる
• 検討結果をTechnical Report(TR)として公開する
• W3Cの勧告フ...
• 標準化作業中のWebAPI
• http://www.w3.org/2012/sysapps/
• Bluetooth, Calender, Device, Idle, Network, Secure...
• ベンダー独自のWebAPI
...
• Venvor Prefix
• 仕様策定中の実験的機能に付与されるプリフィクス
• 仕様策定後にはプリフィクスは除去される
Browser CSS Prefix Method Prefix
-webkit-***
webkitCamelCase
...
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/...
ServerSide JavaScript
• Node.js
• V8を組み込んだサーバサイドJavaScript実行環境
• %> brew install node
• npm
• Node.js 用のパッケージ管理ツール
• Node.jsをインストールすると
npmも一緒にイン...
Development
• Grunt
• アセットビルドパイプライン自動化ツール
• タスクを登録しCoffeeScriptやSassのコンパイル、
ファイルの変更をwatchしリビルド・リロード
• Bower
• フロントエンド用のパッケージ管理ツール
• % ...
• PhantomJS
• 画面を持たない Safari (WebKit)
• コンソールからテストを実行可能
• SlimerJS
• PhantomJSのGecko版
• CaspserJS
• PhantomJS(SlimerJS)と連携...
• Validation Service
• チェックを行ってくれるサービスの一覧
• MarkupValidation Service - http://validator.w3.org/
• HTML5lint - http://www.h...
• Generator
• CSS系
• Google.search(“CSS ジェネレーター まとめ”)
• 例: http://matome.naver.jp/odai/2132750704946539001
• 例: http://mat...
Development::Document
• MDN - https://developer.mozilla.org/ja/
• Google.search(“MDN keyword”) で検索するとWebに関
する仕様を調べることができる
• HTML5 Rocks - http:/...
• Stack Overflow - http://stackoverflow.com/
• 圧倒的な情報量
• Qiita - http://qiita.com/
• 日本語で探す場合に
• can i use - http://caniuse....
DevTools
• Browser Cache (または単に Cache)
• ブラウザがサーバから取得したアセットを自動的に
保持する仕組み
• Cache を OFFにする
• 設定を変更し、キャッシュを無効にすることで、修
正がリアルタイムで反映される状...
• about:about (chrome://about)
• ブラウザの隠し機能一覧。一部だけ紹介
• chrome://appcache-internals - ApplicationCacheを使った
開発で必ず知っておきたい画面。制御...
• chrome://inspect - 開いているページの一覧と直接
DevToolsを起動することが可能。Chrome for Android
のリモートデバッグでお世話になるページ
• chrome://media-internals -...
• Firebug
• Firefoxのエクステンション(開発者ツール)、Firefoxの
普及に一役買ったキラーツール
• Firebugがあるという理由でFirefoxをメインブラウ
ザに選択する人がちょっと前まで大勢いた
• 現在では、活...
Upcoming SlideShare
Loading in...5
×

JavaScript And Keywords

1,540

Published on

JavaScript And Keywords

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,540
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

JavaScript And Keywords

  1. 1. FrontEnd JavaScript & Keywords 2013-08-23 @uupaa
  2. 2. 「知らなければググれない」
  3. 3. フロントエンド開発者に 知っておいてほしい キーワードを列挙してみました
  4. 4. Browser
  5. 5. http://evolutionofweb.appspot.com/
  6. 6. • Browser Components • ブラウザはコンポーネントで構成されている 全体を見れば複雑だが、個々のコンポーネントは基 礎部品の積み重ねで出来ており、相応の時間をかけ てブラウザのコードを読めば細部まで理解が可能 • WebKit,Firefox,最新ブラウザの内部構造 • http://www.html5rocks.com/ja/tutorials/internals/ howbrowserswork/
  7. 7. • 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 を採用
  8. 8. WebKit fork tree WebKit2 (Apple) KHTML WebKit (Apple) Blink (Google)
  9. 9. • WebKit::WebCore • WebKitのコアコンポーネント。レンダリング担当 • プラットフォームに依存しない(共通部品) • WebKit::WebCore/platform • 各プラットフォームごとの実装 • WebKit::Android WebKit • Android Browser用の実装 • Chrome for Android では使われていない • {root}/framework/base/core/java/android/webkit • {root}/external/webkit
  10. 10. • WebKit::JavaScript Core • WebKit デフォルトの JavaScript エンジン • Nitro • Apple の JavaScript エンジン • MobileSafari で利用されている • V8 • Google の JavaScript エンジン • Chrome, Chrome for Android, Android 4.1以上, Adobe Air, Node.jsで利用されている
  11. 11. • JIT (Just-In-Time compiler) • 実行時にコンパイルを行い、ネイティブコードを直 接生成するコンパイラ • Nitro, TraceMonkey,V8 などは JIT コンパイラ • JIT毎に特性が異なり、あるブラウザで高速なコード でも、他のブラウザも同じ結果になるとは限らない • 現在は正しくても、未来では不正解になることも よくある。疑問を感じたらベンチマークで比較 • V8::Crankshaft • V8 を更に高速化する技術 • 頻繁に繰り返し実行する部分は徹底的に最適化を行い、そう でもない部分には最適化を施さない
  12. 12. • Emscripten • CやC++などの言語で書かれたソースコードを、 LLVMを利用し、JavaScriptで実行できる形に変換する コンパイラ • asm.js • Emscriptenの弱点を補強するもの • 型情報を付与し最適化しやすくする
  13. 13. • Rhino • Javaで実装された組み込み用の JavaScript エンジン • SpiderMonkey,TraceMonkey, IonMonkey, JaegerMonkey • Mozilla の JavaScript エンジン • Cairo • グラフィックライブラリ、 Firefoxが使用している • Skia • Googleのグラフィックライブラリ、 ChromeとAndroid が使用している
  14. 14. • Chromium • 主にGoogleが開発しているChromeのベースブラウザ • 実験的な機能を多数搭載している • http://www.chromestatus.com/features • Firefox OS (Boot to Gecko) • Mozilla が開発している Web OS • デバイスの機能をブラウザから利用するWeb***APIを 多数策定している • https://wiki.mozilla.org/WebAPI
  15. 15. HTML5
  16. 16. • HTML5 • WebAppを実現する技術や仕様の総称 • 影響範囲はHTML,CSS,DOM,SVG,Canvas,Video,Audio と多岐に渡り、必要とされる知識量も膨大 • 2012年に仕様策定が完了済み http://www.w3.org/2012/12/html5-cr.html.ja • 2014年中に実験フェーズを終え、最終勧告が公開さ れる予定 • 最終勧告に到達するまでには、2種類以上のブラウザ で仕様が十分に実証される必要がある
  17. 17. <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>
  18. 18. 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
  19. 19. box-reflect: 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)
  20. 20. flow-from: flow-into: CSS Execlusions *-gradient: repeating-*-gradient() CSS Gradients var-* var() CSSVariables mask: mask-clip: CSS Mask HTML5 (CSS)
  21. 21. filters: 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)
  22. 22. Canvas 2D Blending (blend-mode) Canvas 2D Text Decoration Canvas rendering from Workers Canvas 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
  23. 23. HTML5 (Meida/Network) WebAudio API WebP WebP (Animation) VP9 SPDY QUIC PNaCl HTTP Client Hints WebNotification API Streams API XMLHttpRequest Lv2 Push API
  24. 24. DeviceMotion DeviceOrientation FullScreen API Vibration WebMIDI API Battry Geolocation GamePad API WebRTC WebSpeech API WebNFC API WebUSB API HTML5 (Device)
  25. 25. FileReader FileWriter TypedArrays FileSystem API Blob URL MediaStream API HTML5 (Blob/File/Storage) ApplicationCache IndexedDB WebSQL Quota Management API WebStorage
  26. 26. HTML5 (Timing/Event) NavigationTiming API requestAnimationFrame High-resolution timing UserTiming API Ressource Timing API PageVisibility API HashChange Event Messageing MessageChannels
  27. 27. HTML5 (Other) WebCtypto APIIME API
  28. 28. • DOM Lv0 • 仕様が存在しないレガシーな HTML/CSS/JS の挙動の ことをDOM Lv0 と呼ぶ • 最新のブラウザでもある程度は動作するが無保証 • CSSOM • DOM Lv0 の一部(CSS)を 仕様として(無理やり)文章化したもの • 古いブラウザはこの仕様通りに実装されていない • window.innerWidth, pageXOffset, screenX, outerWidth • Element.elementFromPoint, getClientRect • HTMLElement.clientTop, offsetTop • MouseEvent.xxx
  29. 29. ECMAScript
  30. 30. • 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互換言語(ちょっと違う)
  31. 31. ES 5 Object.create Object.defineProperty Object.defineProperties 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#filter Array#reduce Array#reduceRight String#trim
  32. 32. 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”;
  33. 33. ES 5 Compatibility Table http://kangax.github.io/es5-compat-table/
  34. 34. 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
  35. 35. 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() { } }
  36. 36. ES 6 Compatibility Table http://kangax.github.io/es5-compat-table/non-standard/
  37. 37. AltJS
  38. 38. • AltJS • コンパイルしてJavaScriptを生成する言語の総称 • Haxe, CoffeeScript, JSX, TypeScript などがある • Haxe • ActionScript 3とほぼ同じ構文を持つ 静的型付け言語(動的型付けも可能) • Haxeのコードは、Flash,ActionScript 3, C++, C#, Java, PHP, Neko にもコンパイル可能 • CoffeeScript • Rubyに似た独自の構文を持つ動的型付け言語
  39. 39. • JSX • Java に似た構文をもつ静的型付け言語 • (将来はC++にもコンパイルが可能になるらしい) • TypeScript • ES 6の構文を先取りした静的型付け言語 • JavaScriptのソースコードをそのままコンパイル可能
  40. 40. Feature Haxe CoffeeScript JSX TypeScript 静的型 ⃝ --- ⃝ ⃝ 動的型 ⃝ ⃝ ⃝ ⃝ 類似言語 AS3 Ruby Java? C# 型推論/型チェック ⃝ --- ⃝ ⃝ オーバーロード --- --- ⃝ △ 力点 汎用性 Ruby風 最適化 ES6先取
  41. 41. Feature Haxe CoffeeScript JSX TypeScript 開発規模 中∼大 小 中∼大 小∼大 手引書 十分 十分 不足 不足 導入実績 少ない 多い 多少 多少 開発ツールの アシスト ◎ △ △ ◎ 既存Libraryの活用 可能 --- --- 可能 Google Trend 検索ボリューム 30 89 ??? 49
  42. 42. W3C
  43. 43. • 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, 勧告) - 正式な規格として承認
  44. 44. • 標準化作業中の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
  45. 45. • Venvor Prefix • 仕様策定中の実験的機能に付与されるプリフィクス • 仕様策定後にはプリフィクスは除去される Browser CSS Prefix Method Prefix -webkit-*** webkitCamelCase WebKitCamelCase -webkit-*** webkitCamelCase WebKitCamelCase -ms-*** msCamelCase -moz-*** mozCamelCase MozCamelCase
  46. 46. Trend
  47. 47. • Browser Share • IE が著しい減少トレンド = デスクトップの減少 • Chrome が急成長している • http://gs.statcounter.com/ http://www.w3counter.com/trends
  48. 48. • 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%
  49. 49. ServerSide JavaScript
  50. 50. • Node.js • V8を組み込んだサーバサイドJavaScript実行環境 • %> brew install node • npm • Node.js 用のパッケージ管理ツール • Node.jsをインストールすると npmも一緒にインストールされる
  51. 51. Development
  52. 52. • Grunt • アセットビルドパイプライン自動化ツール • タスクを登録しCoffeeScriptやSassのコンパイル、 ファイルの変更をwatchしリビルド・リロード • Bower • フロントエンド用のパッケージ管理ツール • % npm install -g bower • Yeoman • Webフロントエンドの構成管理ツール • % npm insall -g yo grunt-cli bower • Bower と Grunt と連携して動作する
  53. 53. • PhantomJS • 画面を持たない Safari (WebKit) • コンソールからテストを実行可能 • SlimerJS • PhantomJSのGecko版 • CaspserJS • PhantomJS(SlimerJS)と連携動作するライブラリ • 簡単な記述で複雑なテストを実行できる • スクレイピングなどにも応用可能
  54. 54. • 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://jsfiddle.net/ • Chrome DevTools の Snippets も利用できる
  55. 55. • 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
  56. 56. Development::Document
  57. 57. • 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 など、多種多様なドキュメントをインク リメンタルサーチ(串刺し検索)ができる
  58. 58. • Stack Overflow - http://stackoverflow.com/ • 圧倒的な情報量 • Qiita - http://qiita.com/ • 日本語で探す場合に • can i use - http://caniuse.com/ • HTML5 API のブラウザサポート状況が分かる • 不具合情報までは得られない • HTML5 TEST - http://html5test.com/ • HTML5 系のAPIの実装状況を点数で表示する • ブラウザ毎の比較もできる • 不具合情報までは得られない
  59. 59. DevTools
  60. 60. • Browser Cache (または単に Cache) • ブラウザがサーバから取得したアセットを自動的に 保持する仕組み • Cache を OFFにする • 設定を変更し、キャッシュを無効にすることで、修 正がリアルタイムで反映される状態にする(キャッシ ュの有無による混乱を回避するため)
  61. 61. • 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なのか確認ができる
  62. 62. • chrome://inspect - 開いているページの一覧と直接 DevToolsを起動することが可能。Chrome for Android のリモートデバッグでお世話になるページ • chrome://media-internals - 現在開いているメディアス トリーム(Video,Audio)の情報一覧。音が鳴らないと きなどにAudioストリームを開きすぎていないかなど の問題切り分けに使える • chrome://memory-internals - chrome://memory よりも詳 しい情報が取得できる • chrome://net-internals - Chrome経由のネットワークア クセスをキャプチャしたり一覧でみたりと、とても 重宝する • その他にも便利な機能が沢山あります
  63. 63. • Firebug • Firefoxのエクステンション(開発者ツール)、Firefoxの 普及に一役買ったキラーツール • Firebugがあるという理由でFirefoxをメインブラウ ザに選択する人がちょっと前まで大勢いた • 現在では、活躍の場を失いつつある • FirebugLite • Firefox 以外の環境でも、ブックマークレットを読み 込むだけで動作する軽量なデバッガ • あまり利用されることがない
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×