2025年11月にObject.keysLengthというproposalが提出されました。 ステージの進行に年単位の時間がかかることも珍しくないTC39において、提出された瞬間ステージ2のステータスになっていました。 そんなにみんなが欲しがる機能なのでしょうか。 いったいどんな便利機能なのか、proposalを見てみましょう。 Proposal: Object.keysLength Overview Object.keysLength(target)は、文字列キーを持つ列挙可能なプロパティの数を返します。 これはObject.keys(target).lengthと全く同じですが、中間変数を使用しません。 Motivation 開発者は、文字列キーを持つ列挙可能なプロパティの数を調べるためにObject.keys(obj).lengthという記述を頻繁に行います。 一見わかりやすいですが

はじめに 「enumはツリーシェイキングができないからas constを使え。」TypeScriptプロジェクトでよく聞くアドバイスだ。リントルールで強制するチームもあれば、コードレビューで指摘されることもある。 しかし実際のところ、enum数個がバンドルサイズに与える影響は微々たるものだ。パフォーマンスの話だけでは、なぜここまで推奨されているのか説明がつかない。namespaceやparameter propertiesのように、パフォーマンスとは無関係な構文も同じ文脈で非推奨とされているのはなぜだろうか？ この記事は、その疑問から出発する。 TypeScript初期：JavaScriptにないものを独自に作っていた時代 TypeScriptが初めて登場した2012年、JavaScriptは今とはかなり違っていた。ES Modules（import/export）は標準化されておらず、ク

const resp = await fetch("https://api.example.com/data"); await を2回書いているのが気になったことはありませんか？1回の await で一気にレスポンスボディまで取れたら楽なのに、と思ったことはないでしょうか。 とある休日の午前中、いつものようにYouTube上でライブコーディング動画を見ていました1。そこで配信者の方が、fetchを使ってレスポンスボディを取得する際に2回目のawaitが必要であることに対して、「なんでfetchはこんなにめんどくさいんだろう」と言っていました。言われてみると、確かにめんどくさいような気もします。 この記事では、なぜ fetch がこのような設計になっているのかをいろいろな観点から掘り下げてみます。 fetch の使い方おさらい まずはJavaScriptのfetchの基本的な使い方を確認して

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】

JSConf JP 2025

Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

JSer.info #748 - pnpm 10.16がリリースされました。 Release pnpm 10.16 · pnpm/pnpm pnpm 10.16 | pnpm pnpm 10.16では、パッケージがリリースされてから最低限の日数が経過するまでインストール対象から外すminimumReleaseAgeオプションが追加されています。これにより、悪意のあるパッケージが即座にインストールされることを防ぎ、サプライチェーン攻撃のリスクを軽減できます。 同様のオプションはrenovatebotやdependabotにも存在しており、パッケージを追加やアップデートする際にマルウェアが混入するリスクを下げるために利用されています。 npmパッケージ/GitHub Actionsを利用する側/公開する側でサプライチェーン攻撃を防ぐためにやることメモ また、pnpm why --find-by

Intro ページを閉じる際に何かしらの情報をサーバで収集したいケースがある。 これを Beacon の送信(Beaconing)と呼び、ブラウザではページ表示中に収集したパフォーマンス統計の収集や、広告タグによるトラッキングなどに用いられる。 しかし、「ページが閉じる直前に、サーバにリクエストを送信する」を確実に実行するのは実は難しく、これを標準技術で実現する過程で、複数の API が生まれるに至った。 各 API の策定経緯と、挙動の違いについて解説していく。 <img> での送信 最もプリミティブな Beacon の送信は、<img> を用いたものだった。 window.addEventListener("unload", () => { const beaconImage = new Image(1, 1); beaconImage.src = "https://telemetry

LINEヤフー × Deno Land Inc. Meetup 2025-02-17 Yusuke Wada

Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ

アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点

重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e

module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-types. Node.js will transpile TypeScript source code into JavaScript source code. During the transpi... 💁‍♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになる

2023 年の Prettier の活動を振り返ります。 Prettier とは Prettier は JavaScript で書かれたコードフォーマッタです。設定可能な項目が少ないいわゆる opinionated なコードフォーマッタです。JavaScript や TypeScript だけではなく、HTML や CSS、GraphQL などもサポートしています。 リリース 2023 年は、メジャーバージョンのリリースが 1 回、マイナーバージョンのリリースが 1 回でした。これまでは 3 ヶ月に 1 回程度マイナーバージョンをリリースしていたので、頻度は少し下がっています。 ですが、メジャーバージョンである 3.0 をリリースできたことと、これまでよりもカジュアルにパッチバージョンをリリースするようになったことを考えると、開発自体が停滞しているわけではないと思っています。 「カジュアル

TL;DR あるリソースの fetch 中にページ遷移すると、一部ブラウザでは fetch が中断される 中断されると、TypeError が throw される ページ遷移時は、ブラウザによって遷移前のページの実行が"停止"され、"捨てられる"ので、通常 throw された後のことは考えなくて良い しかし、そのページが Back/Forward Cache から復元されうるなら、話は別 ブラウザバックすると、エラーが throw された後からページが再開される！！！ そして発生する、奇妙な現象の数々... はじまりは、あるサービスの不具合報告 ある日、「Webサービスから外部サービスにページ遷移した後、ブラウザバックで戻ると、エラー画面が表示される」という不具合が報告された。どうも Webサービスの ErrorBoundary で何かしらのエラーが catch され、それによってエラー画

序 ここ数日、for文の由来は何か? と言う話題が上がった。 シンタックスのキーワードの由来については自分も関心があって、好きなトピック。 中でも、いつも思っていたことがあって、JavaScriptの変数宣言に使われるキーワード選定が謎と言うのがある。 このことについてツイートしたところたくさんの方に反応をいただけたので備忘録として。 元ツイ: https://twitter.com/ubugeeei/status/1691491304428236800?s=20 お気持ち: https://twitter.com/ubugeeei/status/1691623230812123376?s=20 その他お気持ち: https://twitter.com/ubugeeei/status/1691519021957672961?s=20 https://twitter.com/ubugeeei

この記事では現在 Stage 2 の Symbols as WeakMap keys 提案について解説する。 プロポーザルの詳細についてはtc39/proposal-symbols-as-weakmap-keysを参照してほしい。 また、ここで紹介した仕様に関しては今後更新されていく可能性がある。 概要 Symbols as WeakMap keys は、WeakMap のキーとしてシンボルを使えるようにするための提案である。 現在の WeakMap では、キーとしてオブジェクトのみを使用できる。 const weak = new WeakMap(); const key = {}; const value = ""; weak.set(key, value); たとえば、キーとして数字や文字列などのプリミティブな値を使用すると実行時エラーが発生する。 const weak = new W

JavaScript, the undisputed king of web development, is being sabotaged — not by a rival language or a revolutionary new technology, but by its own baggage from the past. This insidious saboteur is none other than CommonJS, the antique module system that we’ve tolerated for far too long. The rise of CommonJS About 15 years after its invention, JavaScript started expanding beyond the browser to the

We are excited to announce the release of the new version of Prettier! We have made the migration to using ECMAScript Modules for all our source code. This change has significantly improved the development experience for the Prettier team. Please rest assured that when using Prettier as a library, you can still use it as CommonJS as well. This update comes with several breaking changes. One notabl