2023-03-29のJS: Safari 16.4、DenoとCloudflare WorkersのNode.js互換性、pnpm 8.0.0
JSer.info #637 - Safari 16.4がリリースされました。 WebKit Features in Safari 16.4 | WebKit Safari 16.4 Release Notes | Apple Developer Documentation Beta版時の2023-02-20のJS: Sandpack 2.0、Safari 16.4 Beta、Reactドキュメンタリー - JSer.infoでも紹介しましたが、大量の変更点が含まれています。 margin-trimプロパティ、lh unit、CSS Typed Object Model APIのサポート、Constructable Stylesheetsのサポート Declarative Shadow DOM、EmentInternals、Imperative Slot APIのサポート RegExp l
2022-07-14のJS: Bun(all-in-one JavaScript runtime)、Vite 3.0.0、600回目の更新
JSer.info #600 - BunというZig言語とJavaScriptCore(WebKitのJavaScriptエンジン)を使って書かれたJavaScript Runtimeが公開されました。 oven-sh/bun: Incredibly fast JavaScript runtime, bundler, transpiler and package manager – all in one. Bunは"all-in-one JavaScript runtime"とあるように、TypeScript/JSXのTranspiler/Bundler/Task Runerを同梱し、npm互換のパッケージマネージャーやNode-API(N-API)互換の実装、FetchなどのWeb APIの実装をもっています。 Denoと似ている立ち位置のRuntimeですが、Node.js互換のAPI
JavaScriptのJITをざっくり理解する会
まずV8は普段自分たちが書いたコードをいくつかのスレッド上で実行するっぽい。 1つはソースコードを取ってきてそれを実行するやつ。それ以外に最適化を行うためのスレッド、プロファイラ、GCなどがあるようだ。 この最適化というのが今回調べたいJITってやつ。 そもそもインタプリタとの差を把握したい。 今の自分の把握の中では、インタプリタは逐次実行をするもの、JITは実行よりも前の段階でコンパイルをしてコンパイル済みのコードを実行すると言った差があるように思える。 このため一般的にはJITが効いたものの方がパフォーマンスが良いとされており、V8もインタプリタで実行するのではなくJITをベースに実行して行っているっぽい
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
JavaScript のスレッド並列実行環境
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
JavaScript にイミュータブルな配列操作メソッドを導入するプロポーザルについて
この記事では、現在 Stage 1 のプロポーザル Change Array by copy について解説する。 プロポーザルの詳細については、https://github.com/tc39/proposal-change-array-by-copy を参照してほしい。 また、ここで紹介した仕様に関しては今後更新されていく可能性がある。 概要 Change Array by copy は、簡単にいえばイミュータブルな配列操作メソッドを導入するプロポーザルである。 JavaScript の配列には多くのインスタンスメソッドがあり、それらを使って配列を操作できる。 配列のインスタンスメソッドには、ミュータブルなもの、つまりもとの配列を変更することによって配列を操作するタイプのものがいくつかある。 たとえば、Array.prototype.push や Array.prototype.pop、A
Sebastian McKenzie: JavaScript Transformation | JSConf US 2015
I made the open source project Babel and will be presenting on how JavaScript transformation and ES6 can help improve developer workflow and how it can futur...
A Brief History of JavaScript
Auth0 Marketplace Discover and enable the integrations you need to solve identity Explore Auth0 Marketplace JavaScript is arguably one of the most important languages today. The rise of the web has taken JavaScript places it was never conceived to be. We take a look at how JavaScript has evolved in its short history, and where it is headed. Read on! "We take a look at how JavaScript has evolved in
[js] Closure Tools用コンパイルツール plovr について
plovrはClosure Toolsに依存するJSとClosureTemplateのSoyファイルのローカルコンパイルデーモン。 普通にClosure LibraryやClosure Templateを使う時は 作成→コンパイル→コンパイル後のソースで動作確認 という手順になるが、 plovrを使うと、作成→コンパイル前後のソースで動作確認→コンパイル という手順に変わる。 作りながらコンパイル後の動作確認ができる。というのが主たる恩恵だが、それだけじゃなく、 必要になった時だけJSファイルを読み込めば良いように、JSファイルをメインとモジュールに分割して作りたい場合にも使えるツールです。 導入までの流れ ダウンロード・ インストール 設定ファイルの作成 最低限必要な設定項目 モジュール分割する場合の設定 modulesを設定している時のrequireしたクラスの扱い 例1 例2 モジュ
![[js] Closure Tools用コンパイルツール plovr について](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
New and potential ES2019 JavaScript features every developer should be excited about - LogRocket Blog
New and potential ES2019 JavaScript features every developer should be excited about JavaScript has come a long way since its early days, with many new additions and features designed specifically to make the language more user-friendly and less verbose. Below are some recent additions to JavaScript that I find fascinating. Some of these features are already available in Node, Chrome, Firefox, and
Creating custom JavaScript syntax with Babel | Tan Li Hau
Series: Intermediate Babel JavaScriptbabelASTtransform Overview Fork the babel Crash Course on Parsing Code to AST Our custom babel parser A new token: '@@' The new parser How parsing works this.eat, this.match, this.next Our babel plugin 1. Assume `currying` has been declared in the global scope. 2. Use the `@babel/helpers` Closing Note Editor's Note Further Reading Following my previous post on
Practical Ways to Write Better JavaScript - Stack Overflow
In our 2019 Dev Survey, we asked what kind of content Stack Overflow users would like to see beyond questions and answers. The most popular response was “tech articles written by other developers.” So from now on we'll be regularly publishing articles from contributors. If you have an idea and would like to submit a pitch, you can email pitches@stackoverflow.com. Hey there, I'm Ryland Goldstein, a
Backbone.Model に 型をつけて剥がす - Typing to destroy Backbone.Model
2019年9月20日の社内勉強会の資料です
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
なぜ昨今のJavaScriptではイミュータブルであるべきと言えるのか歴史的背景を踏まえて言語化する - Qiita
先日JavaScriptに慣れていない人のコードをレビューする機会があり、constで宣言されたオブジェクト内部に副作用を与えている記述がありました。 その時に「今の動作に問題ないけど、今風のJSならイミュータブルの方が良いかも」と指摘したものの、JSに疎い人からすれば背景が分からないはずで、理由を自分なりに説明したものの案外言語化が難しかったことがありました。 難しい理由として、イミュータブルであることは実利面と同時に、Facebook発祥のトレンドという側面も多分に含んでおり、JavaScript自体の潮流も踏まえておく必要があるからです。 今回は実利面に加えてトレンド面も交えて、なぜイミュータブル性がJavaScriptで重宝されるのかを見ていきましょう。 フロントエンドの世界では状態を持ち、時間やインタラクションと共に変化するから サーバーサイドの世界から見た場合、HTTPはステー
昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog
はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClass { test() { 処理 } } function を省略して書けるのかなと思ったらそうではない。むしろ書いてはいけない。 下記はエラーになる。 class TestClass { function test() { 処理 } } PHPに慣れてるからか、もやもやする。 (a, b) => は無名関数なのはわかったけど function(a, b) じゃダメなの？ (a, b) => は無名関数で function(a, b) と同じ。 好みの問題
Tasks(Macrotasks), Microtasksについて - Carpe Diem
概要 Angularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。 実験 以下のjsのログ順はどうなるでしょうか？ console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2'); }); console.log('script end'); MicroTask1 結果 このようになります。 script start script end promise1 promise2 setTime
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
New patterns for media apps
Writing Asynchronous Tasks In Modern JavaScript — Smashing Magazine