【海外記事紹介】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は以下のような問題点を抱えていたため、柔軟かつ正確な日時操作を実現することが難しかった。 コンストラクタの引数や各種メソッドでタイムゾーンが混在しやすく、扱いが直感的でない
Bun 1.2リリース！新機能をまとめてチェックしよう — 凄まじい進化速度に圧倒される
1月22日、Node.js互換の高速JavaScriptランタイムBun、新バージョンである1.2をリリースした。（公式のリリースノート） 監修者からのコメント: 本記事は、以下のエキスパートに監修していただきました: yosuke_furukawa: Bunはリリースが早く、しかも膨大な数の機能を毎回リリースしています。 Bun 1.1は Bun 1.1.45 までバージョンも出てますが、セマンティックバージョニングではなく、全てパッチバージョンで機能を追加しています。ある程度機能がまとまったらマイナーバージョンを上げていく方針なんじゃないかと感じています。 昨今 Deno も 2024年における進化を記述しています。 Deno in 2024 , Techfeed 紹介 どちらも Node の互換性を上げるという方針で、まずはNode.jsのユーザベースを引っ張っていき、自分たちの体験
JavaScript イベントの実行順序を早める方法 - Qiita
<form onclick="alert('form')"> <div onclick="alert('div')"> <p onclick="alert('p')"></p> </div> </form> バブリングフェーズとは、例えば、上記のようにform > div > p の順番で要素が入れ子になっていた場合、p要素を押下すると、アラートは p div form の順番で実行されます。 泡のようにイベントが内部の要素から親に向かって実行されていくので、バブリングフェーズと呼ばれています。 何もしないとイベントは基本的にバブリングフェーズに登録されます。 キャプチャリングフェーズはその逆で、親要素から内部に向かって実行されるフェーズのことを言います。 バブリングフェーズに登録されたイベントより、キャプチャリングフェーズに登録されたイベントの方が早く実行される 上記の特性を利用して、イ
RustベースのJavaScriptバンドラー「Rolldown」のβ版が公開、Rollup互換で10〜30倍の速度向上を達成
RolldownはViteを手掛けるvoid(0)社が開発したもので、Rollup互換のAPIとプラグインインターフェースを提供しながら、機能範囲としてはesbuildに近いとされている。 Viteは、Vue.jsの開発者Evan You氏を中心に開発されたフロントエンド向けビルドツールで、ESモジュールを活用した高速な開発サーバーとして知られている。内部実装にはRollupなどを活用しており、開発時にホットリロードや依存関係の一括管理を高速に行える点が特徴だ。さらに、ビルドフェーズではesbuildなどを活用してトランスパイルやバンドリングを行ってきたが、今回のRolldownにより、それらを統合したより高速なビルドパイプラインの構築が期待されている。 Rollupはプラグインによる拡張性に優れたJavaScriptバンドラーとして広く使われており、ツリーシェイキングなどを通じて効率的な
🚀 アニメーションとビジュアル化に特化したJavaScriptライブラリ完全ガイド 🎨 - Qiita
Web開発において、アニメーションやビジュアル化はユーザー体験を向上させる重要な要素です。この記事では、インタラクティブで魅力的なWeb体験を実現するためのJavaScriptライブラリを紹介します。各ライブラリの特徴や用途を解説し、プロジェクトに最適な選択肢を見つける手助けをします！ 🎬 アニメーションライブラリ 1. GSAP (GreenSock Animation Platform) 🌟 特徴: 高速でスムーズなアニメーションを実現。 CSS、SVG、Canvas、React、Vue、Three.jsなど幅広い環境に対応。 モジュール式で拡張性が高く、複雑なアニメーションシーケンスも簡単に作成可能。 プラグイン（ScrollTrigger、MorphSVGなど）を使用して高度なエフェクトも実現可能。 用途: ページスクロールアニメーションや複雑なUIエフェクトの実装。
「State of JavaScript 2024」公開 最も勢いのあるフレームワークやツールは？
Devographicsは2024年12月16日（米国時間）、JavaScriptの利用動向を調査した年次調査「State of JavaScript 2024」の結果を発表した。 同調査は、2024年11月13日～12月10日にオンラインで実施され、JavaScriptを開発に利用する1万4015人から回答を得た。回答が多かった上位5カ国は、米国（15％）、ドイツ（8％）、フランス（7％）、イギリス（4％）、ポーランド（3％）。日本からは150人が回答した。 同調査の目的はWeb開発エコシステムにおけるトレンドを把握し、開発者の技術選択を支援することだ。レポートでは、2024年のJavaScriptエコシステムの全体像をさまざまな角度から示している。調査結果は、回答者の属性、言語機能、ライブラリ、他のツール、使用用途、リソースといったカテゴリー別に報告されている。 調査結果のハイライトは
jsの単項演算子（Unary Operators）とは？ - Qiita
let arr = [1, 2, 3]; for (let i = 0; i < arr.length; i++) { arr[i] = arr[i++]; // ESLint : Disallow the unary operators ++ and -- } そうすると、ESLintから使うなと警告される。 えーダメなのかと思ってi += 1に直す作業をするだけでなんで使っちゃダメなのかについて深く考えたことがなかった。 ESLintの警告について読んでいたらUnary Operators(単項演算子)が原因だったので調べてみた。 単項演算子とは？ 単項演算子は一つの値に対して操作を行う演算子で、二項演算子（例：a + b）と異なり、一つの値に対してのみ作用する。 使い方 インクリメント/デクリメント演算子 ++と--は一般的な使い方のように+1や-1の動きをする。 また、前におくか、
JavaScript の Template Literal を活用してコードを劇的に改善する方法 | iret.media
はじめに JavaScript 大好きな私が、JavaScript の文字列について熱く語るブログです。 正月休み中に執筆したので、趣味全開のブログをお届けします。 JavaScript の文字列というと、"String" や 'String' は広く知られています。 しかし、`String` と表記する Template Literal (テンプレート文字列) はその真価が伝わりきっていないかなと考えます。 Template Literal を使うことで、コードの可読性だけでなく保守性も向上します。 また、Template Literal は、SQL インジェクションなどのセキュリティリスクを軽減するのにも役立ちます。 このブログでは、Template Literal について熱く語りたいと思います。 (メインで使う言語が TypeScript のため、例には一部 TypeScript
position: stickyで貼り付いたときだけ境界線を出す(JavaScriptを使わない) - hogashi.*
貼り付く見出し 貼り付く見出し スクロールしてこの見出しが画面上部に貼り付いたときだけ、見出しの下に境界線を出したい。 技として、境界線用の要素をいっこ用意して、それを見出しの裏に忍ばせておく方法がある。見出しが画面上部に貼り付いたときに、下に境界線が出てくる。 画面上部に貼り付いたときに境界線が下に出る 貼り付く見出し 貼り付く見出し どうなってるかというと、背景色を透明にするとこう。 見出しの要素に margin-top: -1px; をつけることで、境界線の要素を覆い隠して見えなくしておく sticky の top の値を、見出しの縦幅 + 1px 分にして、 1px 下に貼り付くようにする 境界線が躍り出る空間を得るために、外側の包む要素の縦幅は、見出しの縦幅 + 1px 分にしておく むずいけど、これで、見出しが貼り付いたときに、境界線がちょうど背景色のすぐ下に躍り出る。 こうい
コピペするだけで使用できる！ ページ上のアクティブなアニメーションを取得するシンプルな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
WebサイトがハングしたユーザのJavaScriptコールスタックを取得する - ASnoKaze blog
Webサイトが応答しなくなった場合、ブラウザ側が強制的に停止したり、タブがクラッシュしたりします。 その際の、JavaScriptコールスタックを取得する仕組みとして『Crash Reporting』という仕組みがあります。この仕組みを使うことで、Webサイトを閲覧しているユーザが実際にどこでハングしているのか、コールスタックを調査できるようになります。 具体例 下記のように閲覧したユーザの ハングしたURLが、JavaScriptコールスタック付きのレポートとして取得する事ができます。 (json内改行は見やすくするために修正) Crash Reporting Reporting APIという仕組みがあり、自身のサイトで起こったCSP違反やネットワークエラー(DNSエラー・TLSハンドシェイクエラーなど)を、任意のエンドポイントにレポートさせる仕組みが標準化されています。 NEL(net
【海外記事紹介】Rustで書かれ、WebAssemblyで動作するフロントエンドフレームワーク「Leptos」が注目を集める — Reactライクな書き心地と圧倒的なパフォーマンスを実現
1月14日、The New Stackが「Want a Web Framework for Rust, Not JavaScript? Try Leptos」と題した記事を公開した。この記事では、Rustフレームワーク「Leptos」やWebAssembly（Wasm）を活用したWeb開発の最新動向について詳しく紹介されている。 以下に、その内容を紹介する。 Leptosとは Leptosは、Rustで書かれたフレームワークをWeb Assembly経由でWebアプリとして高速かつインタラクティブに動作させる仕組みを提供するものである。公式サイトによれば、主要なフロントエンドフレームワーク（Vue、Svelte、Reactなど）と比較して優れたパフォーマンスを持ち、バニラJavaScriptに迫るとされている。以下はLeptos公式サイトで公開されているベンチマークの一例である。 Lept
サーバサイド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
ReactでJavaScriptを使ってWordをHTMLに変換 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Word文書をHTML形式に変換することで、コンテンツクリエイターは、ウェブ展示に適したコンテンツを作成するために、親しみやすいWord文書編集環境を活用できます。また、Word文書の内容をウェブページに埋め込むことで、コンテンツのメンテナンス性と更新効率を向上させることができます。JavaScriptとReactを使用することで、開発者はクライアントブラウザ内で直接Word文書をHTMLに変換する機能を実現でき、開発ワークフローが簡素化され、ロード時間やサーバーコストが削減されます。この記事では、ReactアプリケーションでJavaS
Sharp.js: 最強のNode.js画像処理フレームワーク - Qiita
Node.js環境におけるSharpモジュールを用いた画像の効率的な処理方法 この記事では、Node.js環境においてSharpモジュールを用いて画像を効率的に処理する方法を紹介します。実際のコード例を通じて、大きな画像ファイルをネットワーク送信に適したJPEG、PNG、WebP、AVIF形式に変換する方法を示します。同時に、libvipsライブラリの強力な機能を利用して、画像処理の効率を高める方法も紹介します。 1. Sharpモジュールのはじめに 1.1 Sharpモジュールの紹介 視覚情報爆発の今日の時代において、画像処理技術は極めて重要になっています。Node.js環境に基づく高性能画像処理モジュールとして、Sharpはその優れた性能と使いやすさから、開発者コミュニティで広く評判を得ています。それは一般的なJPEGやPNG形式の画像の処理をサポートするだけでなく、技術のトレンドにも
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を返すかもしれないしそうでないかもしれない、そんな関数があります。 その関数を使う際に、いち
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答
「State of JavaScript 2024」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、1万4000人のエンジニアが回答 JavaScriptに興味を持つ世界中のIT技術者1万4015人が回答したアンケートの結果をまとめた「State of JavaScript 2024」が公開されました。 State of JavaScript 2023の発表が昨年（2024年）6月でしたので、前回から約半年での公開となります。 回答者の国別分布を見ると米国が15％、ドイツが8％、フランスが7％、スペインが4％、イギリス（UK）も4％、ポーランドが3％、カナダが3％などで、日本は1％（回答者150人）でした。 発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】Reactでも役立つ！mapメソッド練習問題集【基礎～上級】 - Qiita
JavaScriptのreplaceに気をつけろ！ - Qiita
