プロダクトのビルドツールを 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 での非同期処理について、身近な例や具体例を交えながら詳細に解説しています。 最後には練習問題も用意しています! 頑張って書いているので、良いと思ったらコメント・いいね・ストック・共有などしてもらえると嬉しいです!! 非同期処理とは 非同期処理とは、プログラムの処理が順番に実行されず、ある処理を実行している間に他の処理を並行して実行することができる仕組みです。非同期処理では、あるタスクが完了するのを待たずに次のタスクが実行されるため、効率的に複数の処理を進めることが可能です。 (by ChatGPT) 非同期処理とは、「同期処理」の対義語で、同期処理は「プログラムの処理が順番に実行され、ある処理が終わるまで次の処理を待つ仕組み」です。 非同期処理の最大のメリットは、 「時間のかかる処理を行っている間に別の処理を行うことができる」 ことです! 身近な例では、部下への仕事の
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 inside株式会社 @ai_inside I want to hear a detailed なにをやっているのか 私たちは2015年に創業し、AIを「使う」「作る」「動かす」ためのサービスをAIプラットフォームで提供しています。AIを「使う」サービスの一つ、手書き文字を認識してデジタル化するAI-OCR「DX Suite」は、その識字率の高さと使いやすさから銀行や通信、地方自治体など幅広い業界でご活用いただき、AI-OCR市場シェアNo.1を獲得しています。(※1) また、ノーコードで高精度なAIを「作る」ための「Learning Center」、よりセキュアかつ安定した環境でAIを「動かす」エッジコンピューティング「AI inside Cube」を提供しています。 さらに、世の中で作られたAIを「シェアする」た
はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ(モーダル)がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください! モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa
minifyだけでは満足できない人向けの企画。今まで散々その手の記事を書いてきましたが、その応用という事になります。 圧縮率も重要ですが展開速度も重視したいところ。自己展開する事になるので復号処理も小型である必要があります。 爆縮形態 凄まじい圧力によって一瞬にして潰れてしまったjs fileの形態の1つ。自己展開能力により一瞬にして再生する。 ただし一瞬では潰れ切らずに、二瞬、百瞬と時間がかかりまくる事もざらにある。再生も同様である。そこは爆縮者の腕にかかっている。 爆縮対象 以下のfileとなります(link先は配布元)。随時追加予定。他にも要望があれば増やしていきます。ついでに元の大きさと爆縮後の大きさも掲載しておきます。 angular-1.8.2.min.js 177324 -> 64656(36.4%) bootstrap.bundle-5.3.0.min.js 80421 -
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
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の変換をサポートしまし
Why you should use CSS env() 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 共有のCSSとJavaScript値を最新の状態に保ち、同期させるのに苦労していますか?共有値を更新する際に、一見ランダムなバグに直面していますか?この記事では、近日公開予定のCSS env() 機能とPostCSSプラグインを使用して、CSSとJS間で同じ変数を共有し、さらにそれらを単一のファイルに保存する方法を紹介します。 よくある以下のシナリオに遭遇したことがあるかもしれません: 比較的複雑なレスポンシブデザインを実装する必要がある CSSセレクターと calc() だけではデザインに影響を与えられないため、信頼できる友人であるJavaScriptに頼る 問題を解決するために、JavaScript からCSS値(例:コンテナのサ
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ス
Nova.jsは汎用的な非依存のReactフックを30以上まとめたコレクションです。何もインストールする必要はなくコードをコピーするだけで使う事が出来ます。 TypeScriptとJavaScriptで利用可能、依存関係も無くセットアップや構成も不要、CLIでフックを追加できます。 用意されたフックはオーディオ管理、バッテリー状態の追跡、クリップボードへのコピー、カウントダウンやカウントアップの実装、ユーザーが初期訪問かどうかの検出、ユーザーの位置情報の検出、ブラウザの選択言語の検出、タッチデバイスかどうかの検出、ローカルストレージの管理、オフラインかどうかの検出などなどその他にもさまざまなフックが用意されています。 各フックのコードも使い方もドキュメントに詳しく書かれていますので合わせてご参照下さい。ライセンスはMIT。 Nova.jsGithub
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.
9月18日、Astro 5.0 Betaがリリースされた。Astroは、モダンなウェブサイト開発のための静的サイトジェネレーターで、特にフロントエンド開発において人気が高まっている。サーバーレンダリングと静的サイト生成の両方をサポートし、ReactやVueなどのフレームワークとも互換性がある点が特徴だ。性能向上や使いやすさを重視しており、ビルド後のファイルサイズを最小限に抑えることで、表示速度の高速化を実現している。この新バージョンでは、コンテンツ管理のための「Astro Content Layer」や、新しい「Server Islands」機能が安定版として導入され、開発者にとってより柔軟かつ効率的なウェブサイト構築が可能となる。Astro 5.0 Betaの主要な新機能は以下の通りだ。Content LayerContent Layerは、Astro 5.0で導入された強力なコンテンツ
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
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はシ
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ランタイムであるNode.jsの作者であり、現在もDenoの開発を進めているライアン・ダール氏は、JavaScriptの商標を所有しているオラクルに対して商標を手放すように要請する公開書簡「Oracle, it’s time to free JavaScript.」を公開しました。 オラクルへの要請は今回で2回目 同氏がオラクルにJavaScriptの商標を手放すように要請する試みは2回目です。1回目は2022年9月に行われています。 参考:Denoのライアン・ダール氏「親愛なるオラクル殿、どうかJavaScriptの商標を手放して」と呼びかけ JavaScriptはNetscapeがWebブラウザ用に開発したプログラミング言語であることはよく知られていますが、その名称はサン・マイクロシステムズが登録商標として所有し、同社がオラクルに買収されたことで現在はオラクル
Schedule-XはFullCalendarの代替として開発されたオープンソースのJavaScript製イベントカレンダーです。 技術スタックに関係なく、イベントカレンダーを簡単に配信出来る、というもの。もちろん、React、Vue、 Angular、Svelte、Preactといったフレームワークのコンポーネントも RWD対応、国際化(日本語サポートされています)、プラグインによるカスタマイズ、D&Dによるスケジュール変更などが可能で、このようなカレンダーアプリを数分で利用可能になります。 また、有償で構築サポートも承っているみたいです。FullCalendar代替とはいえ、あちらもOSSではあるので好みで選ぶと良いんじゃないでしょうか。ライセンスはMIT。 Schedule-XGithub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く