webpack to Rspack ~ Rspack移行の結果と注意点 ~
プロダクトのビルドツールを webpack から Rspack に移行したので、その経緯と注意点をまとめます。 🦀 Rspackとは？ Rustで書かれた高速なJavaScriptのバンドルツールです。 webpackエコシステムとの強力な互換性を持ちます。 2024/08/24にv1.0.0がリリースされました。 🤔 なぜRspackに移行したのか？ ビルド速度改善のため以前からwebpackの移行を検討していましたが、プロダクトがwebpack依存の構成[1]で、Viteやその他のビルドツールへの移行が少し面倒でした。 Rspackであればwebpackのプラグインもそのまま動き移行が容易、かつ速度改善が見込まれるためRspackへの移行を選びました。 💡 移行方法 移行方法は、rspackの公式ドキュメントの migrate from webpack をそのまま参考にして進めま
JavaScriptの非同期処理をしっかり理解する 〜async/await/Promise〜 - Qiita
JavaScript での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています！ 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです！！ 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 （by ChatGPT） 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです！ 身近な例では、部下への仕事の
Deno、V8 JavaScriptエンジンをRustに統合できる「Rusty V8」リリース — RustにJavaScriptコードを埋め込み可能に
9月25日、DenoはRustベースのV8バインディング「Rusty V8」が安定版としてリリースされたことを発表した。Rusty V8は、JavaScriptエンジンV8のC++ APIをゼロオーバーヘッドでRustに統合するライブラリであり、5年間にわたる開発と150以上のリリースを経て、3.1百万回以上のダウンロード数を記録している。このリリースにより、Rusty V8は本格的なプロダクション環境での利用が推奨される安定版となった。 Rusty V8は、バージョン129.0.0として初めて安定版リリースが行われた。これはChromeのバージョニングに合わせたもので、今後もChrome V8エンジンと同期したリリースが行われる予定である。このバージョンではAPIの安定性が保証され、これまでの0.xリリースを超えて、Rustベースの開発者にとって信頼性のあるツールとして位置づけられること
AIプラットフォームで世界を目指す！フロントエンドエンジニアを募集
AIプラットフォームで世界を目指す！フロントエンドエンジニアを募集 AI inside株式会社 @ai_inside I want to hear a detailed なにをやっているのか 私たちは2015年に創業し、AIを「使う」「作る」「動かす」ためのサービスをAIプラットフォームで提供しています。AIを「使う」サービスの一つ、手書き文字を認識してデジタル化するAI-OCR「DX Suite」は、その識字率の高さと使いやすさから銀行や通信、地方自治体など幅広い業界でご活用いただき、AI-OCR市場シェアNo.1を獲得しています。（※１） また、ノーコードで高精度なAIを「作る」ための「Learning Center」、よりセキュアかつ安定した環境でAIを「動かす」エッジコンピューティング「AI inside Cube」を提供しています。 さらに、世の中で作られたAIを「シェアする」た
JavaScriptを忘れて、CSSだけでモーダルを創造する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利
*.min.jsより遥かに小さい爆縮js file - Qiita
minifyだけでは満足できない人向けの企画。今まで散々その手の記事を書いてきましたが、その応用という事になります。 圧縮率も重要ですが展開速度も重視したいところ。自己展開する事になるので復号処理も小型である必要があります。 爆縮形態 凄まじい圧力によって一瞬にして潰れてしまったjs fileの形態の1つ。自己展開能力により一瞬にして再生する。 ただし一瞬では潰れ切らずに、二瞬、百瞬と時間がかかりまくる事もざらにある。再生も同様である。そこは爆縮者の腕にかかっている。 爆縮対象 以下のfileとなります(link先は配布元)。随時追加予定。他にも要望があれば増やしていきます。ついでに元の大きさと爆縮後の大きさも掲載しておきます。 angular-1.8.2.min.js 177324 -> 64656(36.4%) bootstrap.bundle-5.3.0.min.js 80421 -
Vitest公式になったeslint-plugin-vitestを導入して、適切なVitestのお作法を学んでみる
import vitest from "@vitest/eslint-plugin"; export default [ { files: ["tests/**"], // or any other pattern plugins: { vitest }, rules: { ...vitest.configs.recommended.rules, // you can also use vitest.configs.all.rules to enable all rules + // e.g. 'vitest/no-test-return-statement': 'error', + "vitest/max-nested-describe": ["error", { "max": 1 }] // you can also modify rules' behavior using optio
2024-08-25のJS: WebdriverIO v9、Node v22.7.0(TS `enum`と`namespace`の対応)、Deno 1.46(Last 1.x)
JSer.info #704 - WebdriverIO v9がリリースされました。 WebdriverIO v9 Released | WebdriverIO 新しい機能として、WebDriver BiDiのサポート、urlコマンドの追加、addInitScriptコマンドの追加、setViewportコマンドの追加、ShadowRootのサポートなどがあります。 また、emulateコマンドでClockのエミュレーションサポートや、要素がinteractiveになるまで自動的に待機する変更も含まれています。 Node.js v22.7.0がリリースされました。 Node.js — Node v22.7.0 (Current) 新しい機能として、--experimental-transform-typesフラグによるTypeScriptのenumとnamespaceの変換をサポートしまし
CSSとJSの変数管理でイライラしてない？CSSのenv()関数をマスターしよう - コハム
Why you should use CSS env() 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 共有のCSSとJavaScript値を最新の状態に保ち、同期させるのに苦労していますか？共有値を更新する際に、一見ランダムなバグに直面していますか？この記事では、近日公開予定のCSS env() 機能とPostCSSプラグインを使用して、CSSとJS間で同じ変数を共有し、さらにそれらを単一のファイルに保存する方法を紹介します。 よくある以下のシナリオに遭遇したことがあるかもしれません： 比較的複雑なレスポンシブデザインを実装する必要がある CSSセレクターと calc() だけではデザインに影響を与えられないため、信頼できる友人であるJavaScriptに頼る 問題を解決するために、JavaScript からCSS値（例：コンテナのサ
JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新
JavaScript Primer v6.0.0をリリースしました 🎉 JavaScript Primer v6.0.0では、ECMAScript 2024の対応とNode.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように書き直しています。 JavaScript Primer Sponsors JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。 JavaScript Primer - Open Collective 今回のv6リリースにおいては、次の方々にご支援いただきました！ 株式会社コクチョウさんは、Yearly Gold Sponsorとしてご支援いただいています。 ご支援ありがとうございます！ JavaScript Primerス
汎用的な非依存のReactフックを30以上まとめたコレクション・「Nova.js」 - かちびと.net
Nova.jsは汎用的な非依存のReactフックを30以上まとめたコレクションです。何もインストールする必要はなくコードをコピーするだけで使う事が出来ます。 TypeScriptとJavaScriptで利用可能、依存関係も無くセットアップや構成も不要、CLIでフックを追加できます。 用意されたフックはオーディオ管理、バッテリー状態の追跡、クリップボードへのコピー、カウントダウンやカウントアップの実装、ユーザーが初期訪問かどうかの検出、ユーザーの位置情報の検出、ブラウザの選択言語の検出、タッチデバイスかどうかの検出、ローカルストレージの管理、オフラインかどうかの検出などなどその他にもさまざまなフックが用意されています。 各フックのコードも使い方もドキュメントに詳しく書かれていますので合わせてご参照下さい。ライセンスはMIT。 Nova.jsGithub
Deno 2.0リリース候補版が公開、1.0のリリース以来最大のアップデート
9月20日、Deno 2.0のリリース候補版が公開された。これは、Deno 1.0のリリース以来、最大のアップデートであり、Node.jsとの互換性向上や依存管理システムの改良、グローバル変数の変更など、様々な新機能と改善が含まれている。 1. グローバル変数の変更 Deno 2.0では、windowグローバル変数が削除され、代わりにglobalThisやselfの使用が推奨されている。この変更は、Denoがブラウザと互換性を持つことを目指して導入されたwindowが、思わぬバグを引き起こしていたためだ。これにより、ライブラリがDeno上での動作時に問題を引き起こすことが少なくなる。 // Deno v1.x window.addEventListener("load", () => { console.log("loaded"); }); // Deno v2.x globalThis.
先進的なWeb技術を詰め込んだAstro 5.0 β版リース — Server Islandsに注目
9月18日、Astro 5.0 Betaがリリースされた。Astroは、モダンなウェブサイト開発のための静的サイトジェネレーターで、特にフロントエンド開発において人気が高まっている。サーバーレンダリングと静的サイト生成の両方をサポートし、ReactやVueなどのフレームワークとも互換性がある点が特徴だ。性能向上や使いやすさを重視しており、ビルド後のファイルサイズを最小限に抑えることで、表示速度の高速化を実現している。この新バージョンでは、コンテンツ管理のための「Astro Content Layer」や、新しい「Server Islands」機能が安定版として導入され、開発者にとってより柔軟かつ効率的なウェブサイト構築が可能となる。Astro 5.0 Betaの主要な新機能は以下の通りだ。Content LayerContent Layerは、Astro 5.0で導入された強力なコンテンツ
2024-09-16のJS: Biome v1.9、ESLint 8.xのEOL、TypeScript 5.6、ES5の現状
JSer.info #707 - Biome v1.9がリリースされました。 Biome v1.9 Anniversary Release | Biome CSSのFormatter/LinterがStableに、GraphQLのFormatter/Linterを追加されています。 GritQLを使ったbiome searchコマンドを追加、.editorconfigをサポートなども追加されています。 ESLint v8.xのサポートが2024年10月5日に終了することが発表されました。 Version support policy and ESLint v8.x end of life - ESLint - Pluggable JavaScript Linter ESLintの現在の最新バージョンはv9.xです。 マイグレーションガイドは次のページに公開されています。 Configura
Bun 1.1.28で、「C言語をJavaScriptでコンパイルして実行」機能が導入 — N-APIより3倍速く、システムプログラミングも自在に
9月19日、bun.shで「Compile and run C in JavaScript」と題した記事が公開された。この記事では、JavaScriptからCを直接コンパイルし実行できる機能について詳しく紹介されている。この新機能は、システムプログラミングにおけるCやC ABI（Application Binary Interface）が果たしてきた重要な役割に焦点を当て、Bun v1.1.28で導入された実験的サポートを説明している。 以下に、その内容を詳しく解説する。 CとJavaScriptの統合 C言語はシステムプログラミングにおける過去、現在、未来を代表する言語である。圧縮、暗号化、ネットワーキングなど、あらゆるコンピュータシステムの基盤を支えている。さらに、C++やRust、Zigといった言語もC ABIと互換性があり、Cライブラリとして提供されていることが多い。つまり、Cはシ
Safari 18.0リリース — 最注目のView Transitions APIなど、Web開発者向けの機能を一挙紹介
9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi
オラクルよ、 JavaScriptの商標を手放すときだ。Denoのライアン・ダール氏がオラクルに公開書簡
主要なJavaScriptランタイムであるNode.jsの作者であり、現在もDenoの開発を進めているライアン・ダール氏は、JavaScriptの商標を所有しているオラクルに対して商標を手放すように要請する公開書簡「Oracle, it’s time to free JavaScript.」を公開しました。 オラクルへの要請は今回で2回目 同氏がオラクルにJavaScriptの商標を手放すように要請する試みは2回目です。1回目は2022年9月に行われています。 参考：Denoのライアン・ダール氏「親愛なるオラクル殿、どうかJavaScriptの商標を手放して」と呼びかけ JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商標として所有し、同社がオラクルに買収されたことで現在はオラクル
FullCalendarの代替として開発されたオープンソースのJavaScript製イベントカレンダー・「Schedule-X」 - かちびと.net
Schedule-XはFullCalendarの代替として開発されたオープンソースのJavaScript製イベントカレンダーです。 技術スタックに関係なく、イベントカレンダーを簡単に配信出来る、というもの。もちろん、React、Vue、 Angular、Svelte、Preactといったフレームワークのコンポーネントも RWD対応、国際化（日本語サポートされています）、プラグインによるカスタマイズ、D&Dによるスケジュール変更などが可能で、このようなカレンダーアプリを数分で利用可能になります。 また、有償で構築サポートも承っているみたいです。FullCalendar代替とはいえ、あちらもOSSではあるので好みで選ぶと良いんじゃないでしょうか。ライセンスはMIT。 Schedule-XGithub
ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】え？forって使わんの？ - Qiita
