JavaScript: The First 20 Years  by Allen Wirfs-Brock and Brendan Eich Our HOPL paper is done and submitted to the ACM for June 2020 publication in PACMPL (Proceedings of the ACM on Programming Languages)  and presentation at the HOPL 4 conference in June 2021. PACMPL is an open access journal so there isn’t a paywall preventing people from reading our paper.  The official version of the paper is a

Chrome 80 から Web Worker (Dedicated Worker) で ES Modules が使えるようになります。本記事はその宣伝です。 前提知識 ES Modules って何？ ざっくりいうとスクリプトファイルをモジューラブルに読み込む仕組みです。 他の方が解説した記事がいっぱいあるのでそっちを見てください。 Web Worker って何？ ざっくりいうと Web でスレッドを使うための API です。 MDN の解説（これとかこれ）を読むか、詳しく知りたい人は「JavaScript のスレッド並列実行環境」を読んでください。 スクリプトファイルの読み込みについては以前「JavaScript のスクリプトインポートを正しく使い分けようという話」に詳しくまとめたのでそちらも併せて読んでください。 使い方 Dedicated Worker で ES Modules (M

これまでに Emscripten などのツールを使用して他の言語からモジュールをコンパイルしたり、自分自身のコードを読み込んでして実行したりしました。次のステップは他の WebAssembly JavaScript API の使い方について学ぶことです。この記事では知る必要があることを説明します。

2016/06/26 03:37 Blob, ArrayBuffer, Uint8Array, DataURI の変換 ◆ Blob からは FileReader をつかって非同期で変換処理 ◆ ArrayBuffer, DataURI, text, BinaryString ◆ ArrayBuffer や BinaryString, Uint 系配列 から Blob は Blob のコンストラクタでできる ◆ Uint 系配列の buffer プロパティが　ArrayBuffer ◆ ArrayBuffer を Uint 系のコンストラクタに入れるとその TypedArray に変換できる 色々あって変換するときにどうすればいいんだっけと思うのでまとめ 今回の対象はこれ BlobArrayBufferUintXXArrayFileBinaryStringDataURI UintXXArr

2019 rebuilding of the original NeXT web browser

hostとhostnameの違いとは？ 一覧を見ていると、hostとhostnameという似ているプロパティがあることにお気づきでしょうか？ hostとhostnameは、現在開いているWebページのホスト名を取得することができるプロパティです。ホスト名とは、例えばhttps://www.sejuku.net/blogのようなURLがあったとするとwww.sejuku.netの部分のことです。 大抵の場合は、プロトコル情報を排除したトップページのURLが該当します。では、この2つの違いは何なのか、サンプルコードを見ながら確認してみましょう。 console.log( location.host ); console.log( location.hostname ); 実行結果 www.sejuku.net www.sejuku.net locationに対してhostとhostnameを記

これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout

ウェブブラウザにおいてメインスレッドはとても重要なリソースです。なるべくメインスレッドを使える状態にしておくことが滑らかな UI/UX を実現する上で重要になります。しかし、実際には多くの処理が実装上の理由やブラウザ仕様の不足によりメインスレッドでしか動かせないため、メインスレッドは忙しくなりがちです。特にページロード時は JavaScript の実行やリソース読み込みなどでとても忙しくなります。 とあるページの perf プロファイル。メインスレッドでせわしなく処理が行われている様子が分かる。 これを解消するために、ブラウザの処理をメインスレッド以外 (off-the-main-thread) でも実行できるようにする試みが行われています。 1. Off-the-main-thread とは メインスレッド以外のスレッドに処理を委譲することを off-the-main-thread と呼

JavaScript の文脈で「スクリプトをインポートする」といった場合、色々な可能性が考えられます。現場での混乱を避けるためにも用語を正しく使い分ける必要があります。そこで本記事では JavaScript のスクリプトインポートについて整理します。 更新履歴 2019/12/05 Dedicated Worker の ES Modules サポートについて追記しました。 2018/09/08 Worklet の type とその上での dynamic import について追記しました。 Service Worker 上での importScripts について追記しました。 Classic Script と Module Script スクリプトインポートを理解するには、スクリプトについて正確に理解する必要があります。HTML の仕様では、スクリプトには Classic Script

当初は better AppCache1 として開発が始まった Service Worker2 ですが、ページとは独立したライフサイクルを持つことでイベント駆動型のサービス3実行基盤としての色合いが強くなっています。本記事では、イベント駆動型のサービス実行基盤とは何なのか、そこへと発展していった流れについて紹介します。 なお本記事は Service Worker の使い方を紹介するものではありません。Service Worker をある程度理解している開発者を想定読者としています。また、本記事はすべて私の個人的な意見や調査に基づくものであり、所属する組織、団体とは一切関係ありません。前置きおわり。 AppCache、そして Service Worker へ 冒頭でも述べた通り、Service Worker は当初 better AppCache として開発が始まりました4 5 6。AppC

This article discusses more of the amazing things you can do with Shadow DOM! It builds on the concepts discussed in Shadow DOM 101 and Shadow DOM 201. Using multiple shadow roots If you're hosting a party, it gets stuffy if everyone is crammed into the same room. You want the option of distributing groups of people across multiple rooms. Elements hosting Shadow DOM can do this too, that is to say

Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と試し終