サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Intro XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。 これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。 最近、やっと話が前進したので、ここまでの経過を解説する。 Fetch のミッシングピース fetch() は、ブラウザが発行するリクエストと、取得するレスポンスを扱う低レベルなインタフェースとして策定が始まった。 DOM のAPI が Promise ベースに移行しつつある流れを汲み、fetch() もまた Promise を返す関数一発スタイルになった。 クラスからインスタンスを生成しメソッドを呼ぶ XHR スタイルでは、インスタンスを再利用した場合の挙動などを含め、オブジェクトのライフサイクルを考慮
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくないJavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。 実
高度なユーザー エクスペリエンスを提供するには、ユーザーがウェブサイトで本人確認を行うことをサポートすることが重要です。認証されたユーザーは、専用のプロファイルを使用して相互にやり取りしたり、デバイス間でデータを同期したり、オフラインでデータを処理したりできます。ただし、パスワードの作成、記憶、入力は、特にモバイル画面ではエンドユーザーにとって煩雑になりがちで、異なるサイトで同じパスワードを再利用する結果につながります。これはもちろんセキュリティ リスクです。 最新バージョンのChrome（51）は 認証情報管理API をサポートしています。これは W3C の標準トラック プロポーザルで、デベロッパーがブラウザの認証情報マネージャーにプログラムでアクセスできるようにし、ユーザーが簡単にログインできるようにします。 認証情報マネージャーAPI とはCredential Managem
ECMAScript 2016に新規追加される機能が50回目のEcma TC39ミーティングで確定しました。 On March 1st I will be snapshotting the ECMA262 draft to startits journey toward becoming the official ECMAScript 2016 standard! — Brian Terlson (@bterlson) January 27, 2016 Array.prototype.includes ES6でArray.prototype.containsとして追加される予定でしたが、Break the webであったため延期されていた機能です。 Having a non-enumerable Array.prototype.contains may not be web-compat
Webkit の Bugzilla で強烈なバグが報告されていると、同僚に教えて頂いた。 あまり話題になっていないものの、単純ゆえに強烈なバグだと思ったので Qiita にも公開しておく。 https://bugs.webkit.org/show_bug.cgi?id=151354 にそのバグ報告が上がっている。 最初にGoogle+ でやりとり があった模様。 URL のクエリ文字列から値を取り出す関数が正常に動作していないことから発覚したようだ。 その後は、簡単なテストケースに落とし込まれjsfiddle というサイトにテストケースが公開されている。 Safari でこのページを開くと、実際にJavaScript を実行して確認できるようになっている。 続報 (2015.12.14) この記事を上げてすぐに Bugzilla の方で進展があった。 Yusuke SUZUKI さん
Web Storage, AKA Local StorageWorking with Web StorageDemosListening for Storage ChangesInspecting Web Storage with Dev ToolsSupport and RecommendedUsage Welcome to Deep DataKeyIndexedDB TermsChecking forIndexedDB SupportWorking withDatabasesWorking with Object StoresMaking Object StoresDefining Primary KeysDefining IndexesWorking with DataCreating DataReading DataUpdating DataDeleting DataGet
In ECMAScript 6, the object Symbol has several properties that contain so-called well-known symbols (Symbol.iterator, Symbol.hasInstance,etc.). These let you customize how ES6 treats objects. Thisblog post explains the details. Warning # Implementation of the features described here is work in progress. Consult the “ECMAScript 6 compatibility table” for what is supported where (spoiler: not muc
gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。gulp v3.9以上gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。APIの変更点大
ブラウザーに優しくして、 アニメーションを滑らかに Brian Birtles, Mozilla Japanhtml5j October 2014, TokyoAnimation is awesome… Source: Christopher Price 2013, http://topherchris.com/post/55109717733Animation is awesome… Source: icanhasGIF.com windfinder.com earth.nullschool.net healthmap.org/ebola/ 蔓延[まんえん] = spread (disease) ebolavideo.org ウィンドウを最小化する 逆に負担になります。うまくいかなかった冗談みたい。Animation is awesome? HTC J 端末上の Firefox
This feature is well established and works across many devices and browser versions.It’s been available across browsers since 2016年8月. Learn more See full compatibilityReport feedback Path2D は Canvas 2DAPI のインターフェイスで、 CanvasRenderingContext2D オブジェクトで使用できるパスを宣言するために使用します。 CanvasRenderingContext2D インターフェイスのパスメソッドもこのインターフェイスにあり、必要な時にいつでもパスを保持して再生できるので便利です。 コンストラクター Path2D() Path2D コンストラクターです。新しい
What you need to know about this book This book is about ECMAScript 6 (also called ECMAScript 2015), a new version ofJavaScript. Audience:JavaScript programmers In order to understand this book, you should already knowJavaScript. If you don’t: my other book “SpeakingJavaScript” is free online and teaches programmers all ofJavaScript (up to and including ECMAScript 5). Why should I read this b
Babel 前提 Babelは入力されたコードをES6 moduleとして扱う Babel assumes that all input code is an ES6 module FAQ · Babel (結論的には--blacklist strictでこの挙動は無効化できる) ES6 moduleの前提知識 Environment Recordというのはそのスコープと変数を関連付けたりするような環境情報的なものを入れる場所 関数とかモジュールとかwith用みたいな何種類かある ModuleはModule Environment Recordsのを作ってそこに情報を記録する Module Environment Recordsはdeclarative Environment Recordの一種で、加えてModule専用の記録領域がある(importのbindingのための場所) 基本的な
Intro 最近 Extensible Web の話がたまに出るようになりましたが、なんというかレイヤの高い概念(ポエム)的な話が多い気がしてます。 もう少し具体的なAPI とか、「それコード書く上で何が変わるの？」って話があまりないので、今日はそこにフォーカスして、 Extensible Web 的な流れの中で整理されたAPI の話をします。 しかし、実際にはAPI が 「Extensible Web という理念で生まれたかどうか」は自明ではないので、 今標準化されている低レベルなAPI を拾い、それを整理するというエントリだと思ってもらと良いかもしれません。 あまり知られてないAPI もあると思うので、これを期に「これがあれば、今までできなかったアレが、標準化や実装を待たなくても、できるようになるな」と思ったら是非書いてみると良いと思います。 実際はそれこそが Extensi
<span>あいうえお</span> <div>かきくけこ</div> <img src="http://example.com/test.jpg">
以下の主要ブラウザで動作確認しています。少しでも古いブラウザだと動作しない可能性が考えられますが、特に言及しません。常に最新のブラウザを使用する事を必須とします。
Thisblog post describes the options you have for deploying ECMAScript 6 in currentJavaScript environments.It is selective w.r.t. the amount of toolsit covers. If you want a comprehensive list of tools, I suggest you look at Addy Osmani’s “ECMAScript 6 Tools”. Consult theblog post “Using ECMAScript 6 today” for an overview of ES6 features. Using ECMAScript 6 today # What options do you have f
HTTP2 時代のサーバサイドアーキテクチャフィードバック -Togetterまとめ のあたりで話していたことのまとめ。 補足 タイトルで「ES6 Modulesってconcatしないと動かないの？」と一部に誤解を与えてしまったようなので補足。ES6 Modulesがブラウザにネイティブ実装されたら、当然concatしなくても動きます。 ここで書きたかったテーマは「ES6 Modules + HTTP/2 + concat無し は ES6 Modules + HTTP/1 + concat と同等の速度で動作するのか」です。 追追記 (2016/01) kazuhoさんはh2oで Cache Aware Server Push という解決策を提案しています。 Jxckによる日本語解説記事: HTTP/2 Push を Service Worker + Cache Aware Server
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
