ECMAScriptのPattern Matching 案について - Qiita
こちらの記事で「ECMAScriptにパターンマッチングが来るかも！」ということを知りました。（リンク先は英語・Mediumメンバー限定記事です。ご注意を） しかし、この提案について日本語で書かれた記事が無い！ そこでECMAの提案ページを抄訳することでこの凄そうな機能について周知していきたいと思います。 パターンマッチングとは オブジェクト指向プログラミングにおけるパターンマッチングとは何でしょう。WikiPediaの英語版記事を参考にすると「与えられたトークンシークエンスがパターン構成を満たしているかどうかをチェックすること」(the act of checking a given sequence of tokens for the presence of the constituents of some pattern)とあります。これをかみ砕くと、 与えられたオブジェクトが所定の
JavaScript で Wasm 使ってるなら要注意！ そのメモリ、本当に解放されてますか？ - カミナシ エンジニアブログ
数ヶ月前、画像処理ライブラリ OpenCV.js を使って Web カメラの映像をリアルタイム処理するプロトタイプを作っていたときのことです。 OpenCV.js は C++ で書かれたコードを WebAssembly（Wasm） にコンパイルして作られており、Wasm ならではのブラウザ上での高速な処理が可能なライブラリです。 実際、画像のフィルタ処理や特徴点検出など、ユニットテストの段階では高速に実行でき、開発は一見順調に進んでいるかのように見えました。 ところが、いざアプリケーションに画像処理モジュールを組み込んでみると、起動したカメラが数秒経つとなぜか止まってしまいました。 コンソールにもエラーは出ず、Chrome を再起動すればまた数秒だけ動く……そんな不可解な状態に悩まされました。 原因は、Wasm のメモリリーク。 そう、恐ろしいことに C++ 製 Wasm で作られたライブ
ECMAScript source phase imports がはやく動くようになってほしい
Node.js 24.0.0 でECMAScript source phase importsが動くようになりました。 (--experimental-wasm-modules が必要です) Node.jsエコシステムは様々なサードパーティーツールに支えられているので、Node.js自身が新しい機能をサポートしたからといってすぐさまアプリケーションやライブラリで採用できるわけではないですが、この機会に何が嬉しいのか説明しようと思います。 サンプル まず以下のサンプルコードを見てください。 本コードで重要なのは以下の3行だけです。 import source addModuleSource from "./add.wasm"; const addModule = await WebAssembly.instantiate(addModuleSource); console.log("123
2025-05-29のJS: TypeScript Native Previews、Firefox 139、Angular 20、Chrome 137
JSer.info #736 - TypeSciptのGo言語でのネイティブ実装である@typescript/native-previewが公開されました。 Announcing TypeScript Native Previews - TypeScript TypeScriptをGo言語に移植した実装で、コンパイラであるtsgoと合わせてVSCode拡張などもリリースされています。 TypeScriptネイティブ移植観察レポート TSKaigi 2025 - Speaker Deck Firefox 139がリリースされました。 Firefox 139.0, See All New Features, Updates and Fixes Firefox 139 for developers - Mozilla | MDN hidden=until-found属性のサポートとTempora
JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
無料・広告なし・登録なしでスマホ・PCからブラウザで動画が編集できるウェブアプリ「Clip JS」を実際に使ってみた
「ClipJS」はFFmpegのWebAssembly版であるffmpeg.wasmとNext.js、Reactの動画生成ライブラリであるRemotionで構築された動画編集ウェブアプリです。登録不要かつ無料で、PCやスマートフォンのブラウザから使うことができます。 ClipJS https://clipjs.vercel.app/ 今回はClipJSにPCのGoogle Chromeからアクセスしてみました。動画編集を行うには「Get started」をクリックします。なお、利用にはユーザー登録は必要なく、無料でも使うことができます。 プロジェクトを作成するため、「Add Project」をクリック。 プロジェクト名を入力し、「Create」をクリックします。 作成されたプロジェクトをクリック。 ClipJSのUIが表示されました。無料で使えるウェブアプリですが、広告は一切表示されていま
2025-04-09のJS: express 5.1(正式リリース)、Safari 18.4、ESLint bulk suppressions
JSer.info #731 - Express 5.1.0がリリースされました。 Express@5.1.0: Now the Default on npm with LTS Timeline このバージョンはExpress 5.xシリーズの正式リリースとなります。 npmでのexpressのデフォルトバージョンも5.xへと変更されました。ドキュメントが刷新され、4.xから5.xへの移行を支援するためのcodemodによるマイグレーションツールも提供されています。 同時にLTS（Long Term Support）ポリシーも発表され、Express 4.xは2026年10月1日にサポートが終了する予定となっています。 Safari 18.4がリリースされました。 WebKit Features in Safari 18.4 | WebKit 大きな機能としてDeclarative Web
HonoJSがJavaScriptの未来を変える！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Leapcell: 次世代のサーバレスプラットフォームでWebホスティング JavaScriptランタイムフレームワークHonoの詳細理解 Github上で、JavaScriptランタイムフレームワークのHonoはすでに22,000のスターを獲得しています！ Honoの誕生背景 Honoの誕生は2021年12月に遡ることができます。その作者は、当時Cloudflareの社員として、Cloudflare Workers向けのアプリケーションを作成したいと考えていました。しかし、フレームワークを使用しない場合、コードは非常に冗長になり、要件
ESLintがCSSの構文検証など正式サポート、MarkdownやJSONのサポートに加えて
JavaScriptなどのコードを静的に解析し、構文や基本的なエラーのチェックやコーディングスタイルへの統一などを行ってくれる、いわゆるリントツール（あるいはリンティングツール）「ESLint」が、CSSの構文やコーディングスタイルの検証もサポートしたことが発表されました。 ESLint now officially supports linting CSS! Read more:https://t.co/bCK6kFj2B0 — ESLint (@geteslint) February 18, 2025 CSSのサポートは、公式の言語プラグインである@eslint/cssプラグインによって行われます。 CSSのリンティングでは、デフォルトでは可能な限り厳密にコードを解析し、途中で見つかったすべてのエラーを強調表示します。ただし通常、WebブラウザにおけるCSSの解析ではエラーリカバリー機
HTML / CSS / JavaScript 制作 Tips 中級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 中級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編について教えてくださり、ありがとうございました。今日は中級編として、以下の10個の項目について詳しく教えてください。 レスポンシブデザインに対応するにはCSSのメディアクエリを使うとええよ。 モダンJavaScriptでは、アロー関数がよく使われるわ。覚えときなり。 CSSでflexboxやgridを使うと、レイアウト作成が手軽になるの。 画像やフォントはな
HTML / CSS / JavaScript 制作 Tips 上級編 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML / CSS / JavaScript 制作 Tips 上級編 user: ChatGPT先生、先日はHTML/CSS/JavaScript を用いたWebページ制作の初級編・中級編について教えていただき、ありがとうございました。今日は上級編として、次の１０項目について詳しく教えてください。 パフォーマンス最適化のために、クリティカルCSSの使用や画像の遅延読み込みを検討しとき。 JavaScriptを使ってデバッグ作業を効率化する方法を覚えるのがええし。コンソールAPIとかね。 RESTやGraphQLによるAPIの設計と使用
JavaScriptの日付と時刻の管理を大きく簡素化する「Temporal」の実装作業が進行中
JavaScriptには「Date」という時刻を表すためのオブジェクトがありますが、タイムゾーンの扱いが難しかったり、APIが直感的ではなかったりするなどの問題がありました。こうした問題を解決した新たな時刻表示用オブジェクト「Temporal」が登場し、ブラウザへの実装作業が進められています。 JavaScript Temporal is coming | MDN Blog https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/ JavaScriptのDateオブジェクトは、JavaScriptが1995年に作成された際にJavaの「java.util.Date」の実装をコピーして作成され、30年間同じAPIが使われ続けてきました。Dateはユーザーのローカル時刻とUTC(世界協定時)をサポートするもの
CSSのattr()関数がパワーアップ！ また一つJavaScriptでしかできなかったことがCSSだけでできるになります
CSSのattr()関数は、HTMLの属性に記述した値をCSSで使用できる便利な機能です。たとえば、hrefに記述した値をリンクとして表示したり、titleに記述した値を画像のキャプションとして表示したり、data-でさまざまな値を表示することができます。 このattr()関数がよりパワーアップします。 これまではcontentプロパティだけでしたが、任意のプロパティで使用できるようになり、<string>以外のデータ型も使用できるようになります。 HTMLに記述したカラー値やidの値をCSSで使用することもできます。これでまた一つ、JavaScriptでしかできなかったことができるようになります。 CSS attr() gets an upgrade by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめ
【海外記事紹介】JavaScriptのDateは時代遅れになる — 新たな標準API、Temporalの紹介
1月25日、Mozillaが「JavaScript Temporal is coming」と題した記事を公開した。この記事では、JavaScriptの新たな日時処理APIであるTemporalについて詳しく紹介されている。 1月25日、Mozillaが「JavaScript Temporal is coming」と題した記事を公開した。この記事では、JavaScriptの新たな日時処理APIであるTemporalについて詳しく紹介されている。 以下に、その内容を紹介する。 Temporalとは何か？ 従来のJavaScriptにおいては、日時を扱うための標準手段としてDateオブジェクトが用意されてきた。しかし、Dateは以下のような問題点を抱えていたため、柔軟かつ正確な日時操作を実現することが難しかった。 コンストラクタの引数や各種メソッドでタイムゾーンが混在しやすく、扱いが直感的でない
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルなJavaScript
ページ上で動作するアクティブなビュー遷移にリンクされたすべてのアニメーションを取得するJavaScriptのコードを紹介します。 数行のコードをコピペするだけで使用でき、アニメーションを反転させたり、継続時間を変更したり、キーフレームを変更したりなど、さまざまな操作を実行できます。 ビュー遷移（View Transitions）はSafariでもサポートされ、今年は使用する機会が増えそうですね。 お弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する まずは、デモをご覧ください。 ブルーのボックスの疑似要素（::view-transition-group(box)）のアニメーションのキーフレームを数行のコードで取得します。 See the Pen Debugging View Transitions: Getting the group’s anim
サーバサイドJavaScriptの標準策定を目指す「WinterTC」がECMA International傘下で始動、W3CのWinterCGから移行
サーバサイドJavaScriptの標準策定を目指す「WinterTC」がECMA International傘下で始動、W3CのWinterCGから移行 W3CでサーバサイドJavaScriptを中心とした非Webブラウザ環境におけるJavaScriptの互換性について議論してきた「Web Interoperable Runtimes Community Group 」（WinterCG） とECMA Internationalは、サーバサイドJavaScriptランタイムにおけるAPIの互換性を実現するための新グループをECMA International傘下の「TC55 – Web-interoperable server runtimes」（WinterTC）として設立すると発表しました。 WinterTCには、Node.js、Deno、Verel、Fastly、Netlify、Sh
JavaScript/TypeScript Tech Feed (2025/1/3号) - Qiita
TL;DR honojs/hono Release v4.6.15 web-infra-dev/rspack Release v1.2.0-alpha.0 vitejs/vite v6.0.7 withastro/astro Release astro@5.1.2 Node.js 23 からデフォルトでTypeScriptをサポートするようになるかも？ Ghostty のリリース AI エージェントがウェブブラウザを操作できるようにするためのライブラリ、browser-useが注目されています リリース情報 honojs/hono Release v4.6.15 c.json()、c.text()、またはc.html()がコンテンツを返すときに、204のような無内容なステータスコードを指定すると、typecheckでエラーになるようになりました。 実際にソースを見てみると、 export
【JavaScript】ES2025の新機能全部解説する - Qiita
ES2025 / ES2024 / ES2023 / ES2022 JavaScriptの仕様は、TC39というところで決められています。 ブラウザベンダや関係者が定期的に会合を行い、様々な新機能について話し合って今後のJavaScriptの方向性を決めていきます。 ここでは2024年にFinishedになった、すなわち仕様が確定して複数のブラウザで実装がなされたproposalについて紹介してみます。 主要ブラウザでは既にほとんどの機能を使用可能です。 ちなみに、2024年2月から2025年1月までにStage4になったproposalがES2025と呼ばれます。 ややこしいですね。 Finished Proposals Promise.try 同期かもしれないし非同期かもしれない、Promiseを返すかもしれないしそうでないかもしれない、そんな関数があります。 その関数を使う際に、いち
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
bunのECMAScript仕様非準拠の挙動
［作って学ぶ］ブラウザのしくみ──HTTP、HTML、CSS、JavaScriptの裏側 - yamaScrapbox