なんでモダンJavaScriptを使うの？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Vanilla.js 何のライブラリもフレームワークも使わないで書かれたJavaScript(JS)のこと モダンJS 仮想DOMを用いるライブラリやフレームワーク npmやyarnなどのパッケージマネージャ webpackなどのモジュールバンドラ Babelなどのトランスパイラ 具体的にはReact, Vue, Angularを指していると考えて差し支えない DOM Document Object Model HTMLなどの文書を木構造で表現したもの DOM操作自体はコードが複雑化する上に、レンダリングコストが高いというデメリットがあ
FirefoxがJavaScriptベンチマークテストの「SunSpider」でついにChromeを抜いたと報告、ただしSunSpiderは古いという指摘も
ブラウザのFirefoxを開発するMozillaが、Firefoxの開発にまつわる最新情報を報告するブログ・Firefox Nightly Newsで、「FirefoxがJavaScriptベンチマークの『SunSpider』でGoogle Chromeを上回った」と2023年8月10日に報告しました。一方で、SunSpiderは最新版のリリースが2013年の古いベンチマークテストであり、すでに別のベンチマークテストに取って代わられているという声も上がっています。 A View to a Better, Faster Web – These Weeks in Firefox: Issue 143 – Firefox Nightly News https://blog.nightly.mozilla.org/2023/08/10/a-view-to-a-better-faster-web-t
ESLint、新バージョンv8.47.0をリリース
8月11日に、ESLintはv8.47.0を発表しました。 このマイナーリリースでは、いくつかの新機能が追加され、前のリリースで見つかったいくつかのバグが修正されています。 ESLintの機能向上とバグ修正を目的としており、注目すべきポイントを以下に紹介します。 8月13日、静的コード解析ツール ESLintが、新たなバージョンv8.47.0をリリースした。この最新バージョンは、ESLintのマイナーアップグレードであり、以前のバージョンで特定された複数のバグが修正され、新たな機能が追加された。具体的には、メソッド内でthisArgを使用する正規表現の更新など、新しい機能が組み込まれている。また、no-new-wrappersルールにおいて、シャドウされたコンストラクタに関する報告が行われないように調整された。 以下に、新バージョンv8.47.0の主な変更点を詳しく記載する。 新機能 53
TypeScriptにおいてCommonJSとES Moduleの両方に対応するパッケージを作る - Qiita
はじめに 最近ではNode.jsのライブラリでも、pure ESMの考え方でES Moduleのみでしか利用できないものも出てきている。とはいえ、npm-esm-vs-cjsというリポジトリのデータによると、以下のようにCommonJSのライブラリのほうが圧倒的に多く、ES Moduleのみはまだ10％程度しかない（みたい）。 そこで、今回はライブラリを公開する際に、CommonJSとES Moduleの両方をサポートするようなプロジェクトの設定についてみていきたいと思う。 ※前提として、今回は1つのTypeScriptファイルからCommonJS・ES Moduleの両方に対応するJavaScriptファイルを作成することを考える（ファイル拡張子を".mts"や".cts"にして、コンパイル後のファイル拡張子を変えることでCommonJS・ES Moduleに対応する方法ではない）。その
React 18の非同期機能とパフォーマンス改善についてVercelが解説
React 18の非同期機能とパフォーマンス改善について 7月19日、React 18はパフォーマンス改善機能を発表しました。 この記事では、React 18の非同期機能がアプリケーションのパフォーマンスに与える影響と改善点 React 18の非同期機能とパフォーマンス改善について この記事では、React 18の非同期機能がアプリケーションのパフォーマンスに与える影響と改善点について説明します。 メインスレッドと長時間タスク メインスレッドは、さまざまなタスクを処理する責任があります。 しかし、長時間タスクは他の処理をブロックすることがあり、パフォーマンスに悪影響を与えることがあります。 従来のReactのレンダリング 従来の同期レンダリングでは、すべての要素に同じ優先度が与えられます。 しかし、React 18では非同期レンダリングが導入され、優先度の低いコンポーネントのレンダリングを
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ではコー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
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
