Bun v0.7.3が公開 - コードカバレッジレポーティングやテストのフィルタリング機能追加、Node.jsとの互換性向上
8月6日、BunはBun v0.7.3をリリースしました。 このリリースでは、コードカバレッジのサポートやテストのフィルタリング、クラッシュ修正など、開発者にとって重要な機能が追加されました。 詳細は以下の通りです。 8月6日、Bunプロジェクトは最新バージョンであるBun v0.7.3をリリースした。Bunは高速なJavaScriptランタイムであり、バンドラー、トランスパイラ、そしてパッケージマネージャーの機能を一つに統合している。 新機能: コードカバレッジレポーティング 新バージョンでは、コードカバレッジのサポートが追加され、bun testコマンドに--coverageフラグを使用することで、テキスト形式のカバレッジレポートが生成される。これにより、テストのカバレッジを把握することが容易になる。 新機能: テストのフィルタリング bun testコマンドは、正規表現パターンを使っ
Bun v0.7.2リリース ー Node.jsのワーカースレッドをサポート
Bun v0.7.2が本日公開され、JavaScriptランタイム、バンドラー、トランスパイラー、およびパッケージマネージャーの機能を1つに統合したと発表された。 この新バージョンでは、node:worker_threadsとnode:diagnostics_channelのサポートが追加され、BroadcastChannelが利用可能になった。また、Node.jsとの互換性も改善され、いくつかの重大なメモリリークも修正されたとされている。 Bun v0.7.2の新機能と修正の概要 Bun v0.7.2では、次のような新機能と修正が行われている。 Node.js worker_threadsのサポート Bun v0.7.2では、Node.jsのworker_threadsモジュールをサポートし、Workerをグローバル変数として使用できるようになった。これにより、node:worker_t
React スプレッド構文をなぜ使うのか モダンなJavaScriptを書いていくうえで欠かせない知識 - Qiita
スプレッド構文をなぜ使うのか 理解のためにはまず破壊的メソッドと非破壊的メソッドを知る必要がある。 破壊的メソッドを見ていく popやpushのような破壊的なメソッドを使うことは最近のJavaScriptではNGとなっている。 破壊的メソッドを避けるためにスプレッド構文が使われると覚えておく。 一般的な破壊的メソッド Array.prototype.push(): 配列の末尾に要素を追加します。 Array.prototype.pop(): 配列の末尾から要素を削除します。 Array.prototype.shift(): 配列の先頭から要素を削除して、残りの要素を前に詰めます。 Array.prototype.unshift(): 配列の先頭に要素を追加し、他の要素を後ろにずらします。 Array.prototype.sort(): 配列の要素をソートします。デフォルトでは破壊的なソート
滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA
ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？ このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲覧できたり、演出と組み合わせることで世界観や没入感を表現できます。また、macOSに比べるとWindowsはデフォルトでスクロールしたときにカクカクと動くため、慣性スクロールを実装するとWindowsでもmacOSのように滑らかにスクロールさせることができます。 前編である今回の記事では、慣性スクロールを使ったウェブサイトを紹介し、簡単に実装できるライブラリ「Lenis」で実際に慣性スクロールを実装してみます。 慣性スクロールが使われているサイト 慣性スクロールはどのようなウェブサイトで使われてい
ChatGPTっぽいサービスのプロトタイプをChatGPTを使ってHTMLとJavascriptで作ってみた - Qiita
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } #chat-box { width: 80%; height: 400px; margin: auto; border: 1px solid #000; padding: 20px; overflow: auto; margin-top: 50px; background-color: #fff; } #user-input { width: 80%; margin: auto; margin-top: 20px; } </style> </head> <body> <div id="chat-box"></div> <div id="
2023-08-03のJS: Riot.js v9.0.0、Firefox 116、React Server Componentsへの移行
JSer.info #654 - Riot.js v9.0.0がリリースされました。 Release Evergreen · riot/riot このリリースでは、Riot.jsとcompilerなどのバージョンを合わせるため、v8はスキップしてv9.0.0としてリリースされています。 Node.js 14/16のサポート終了、BabelでのTranspileをしないように変更、boolean属性の挙動変更などが含まれています。 Firefox 116がリリースされました。 Firefox 116.0, See All New Features, Updates and Fixes Firefox 116 for developers - Mozilla | MDN HTTP/2のアップロードパフォーマンスの改善、CSP3 external hashesをサポート。 FetchのgetRe
ReactとJavaScript: Reactと他のJavaScriptフレームワークの比較 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React JavaScriptの利点と他のJavaScriptフレームワークとの優位性を探ってみましょう。以下の記事では、Reactを他のフレームワークと比較し、それぞれの技術の利点やメリットを理解することができます。信頼性と効率性を持つウェブアプリケーションを構築するための最適な選択肢を見つけるために、ぜひ読み進めてください。 Reactと他のJavaScriptフレームワークの比較 Cre: twire React JavaScript - Facebookの強力なJavaScriptライブラリ Reactは、ウェブ開発の分野でト
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
Denoのビルドツール「dnt」が、ESMとCommonJSのハイブリッドnpmモジュール作成に対応
7月31日、dntはESMとCommonJSのハイブリッドnpmモジュールを簡単に公開する方法を発表しました。 JavaScriptモジュールの作成と公開は依然として困難であり、多くの人が複雑なリリースパイプラインやわずかに異なるモジュール構文を持つ2つのコードのコピーを維持することに頼っています。 dntを使用することで、モジュールを一度書いてTypeScriptなどのモダンなツールで変換し、すべてのユースケースをサポートすることができます。 7月31日、dntはESMとCommonJSのハイブリッドnpmモジュールを簡単に公開する方法を発表しました。 JavaScriptモジュールの作成と公開は依然として困難であり、多くの人が複雑なリリースパイプラインやわずかに異なるモジュール構文を持つ2つのコードのコピーを維持することに頼っています。 dntを使用することで、モジュールを一度書いてT
2023-07-28のJS: Node.js v20.5.0、Bun v0.7.0、Redwood v6.0.0
JSer.info #653 - Node.js v20.5.0がリリースされました。 Node v20.5.0 (Current) | Node.js Test Runnerに--test-shardフラグの追加、node:eventsにaddAbortListenerを追加、fs.readFileSyncでUTF-8のファイルを読み込むときのパフォーマンスを改善などが行われています。 Bun v0.7.0がリリースされました。 Bun v0.7.0 | Bun Blog Viteのサポート、Worker APIのサポート、structuredClone()のサポート、AsyncLocalStorageのサポートが追加されています。 実行時のパフォーマンスを犠牲にメモリ消費量を抑えるbun --smolフラグのサポート、bun test --bail=<number>のサポート、Node
JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に
JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に JavaScriptのUIフレームワーク「Svelte」の最新版となる「Svelte 4」が正式にリリースされました。 https://t.co/9qz0sDglCe — Svelte 4 Ever (@SvelteSociety) June 22, 2023 Svelteは読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。Stack Overflowの調査では開発者の人気が急速に高まっていることでも注目されています。 Svelteの最大の特徴はコンパイラであるということです。UIフレームワークは、なんらかのライブラリをアプリケーションに同梱することが一般的ですが、Svelteではコー
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］ CDNのエッジロケーションでJavaScriptランタイムを提供するサービスが相次いで登場しています。 代表的なものとしてCDNプロバイダのCloudflareやFasltyが提供する「Cloudflare Workers」や「Fastly Compute@Edge」などがあり、最近ではCDNプロバイダ以外からも「Deno Deploy」「Vercel Edge Runtime」などが登場しています。 これらに共通するのは、世界中に分散したデータセンターで稼働するサービスであること。そして、サーバサイドJavaScriptの実行環境が用意されていることです。 Vercelが提唱するエッジミドルウェア 現在インターネット上でサービスを提供する手段としてエッジロケーション
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいReactドキュメンテーション、SPA（Single-page application）の利用を中止 ー SPAに代わるアーキテクチャの採用を加速
Reactパフォーマンスを最大70%向上させる!? Million.js入門 - Qiita
typescript-eslint v6 アップデートガイド - Realtime JSer.info
【2023年最新】JavaScript ES13の新機能6選！コード例付きで詳しく解説します！ - Qiita
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
難しすぎると話題の「警視庁の音ゲー」、JavaScriptでベタ書きされていた→作り切る根性がすごいし参考になりそうな実装だった
