実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by Web
Node.js has undergone a remarkable transformation since its early days. If you’ve been writing Node.js for several years, you’ve likely witnessed this evolution firsthand—from the callback-heavy, CommonJS-dominated landscape to today’s clean, standards-based development experience. The changes aren’t just cosmetic; they represent a fundamental shift in how we approach server-side JavaScript develo
Published: September 30, 2022, Last updated: December 19, 2024 Common advice for keeping JavaScript apps fast tends to boil down to the following advice: "Don't block the main thread." "Break up your long tasks." This is great advice, but what work does it involve? Shipping less JavaScript is good, but does that automatically equate to more responsive user interfaces? Maybe, but maybe not. To unde
よろしくお願いします！エンジニアのideです。 こちらはアドベントカレンダー23日目の記事になります！ 今年は体のあちこちに痛みを感じることが多かったので、来年こそは健康に過ごせる一年になるといいなと願っています。 さて、今回は今年やってきたことを振り返るのもいい機会だなと思い、特に触れる機会が多かったJavaScriptについてまとめてみることにしました。 結果的に基本的な内容が中心となりましたが、改めて理解を深める良いきっかけになったので、これはこれでよしとしています！ それではよろしくお願いいたします！ [目次] テンプレート文字列 スプレッド構文 分割代入 プロパティ名の短縮記法 オプショナルチェーン nullish(??)とfalsy(||)チェック ディープコピー アロー関数 Promise async/await forEachの中でasync/awaitが効かない おわりに
=>htmz> a low power tool for html htmz is a minimalist HTML microframework for creating interactive and modular web user interfaces with the familiar simplicity of plain HTML. [GitHub] plain🍦 Use straight up HTML. No supersets. No hz- ng- hx- v- w- x-; no special attributes. No DSLs. No <custom-elements>. Just vanilla HTML. lightweight🪶 166 bytes in total. Zero dependencies. Zero JS bundles to l
初めに 昨日のアップデートでAWS Lambdaは実行結果の返却値を一括の応答ではなくストリーミングな徐々に応答するようなことが可能となりました。 いざ日本語に直そうとすると微妙に難しいタイトルで実際の公式の翻訳がどうなるか次第では少しタイトルを調整するかもしれません。 これまでの方式ではLambdaの機能としては処理完了まで返却値を返すことができず、そういった機能が必要な場合はWebSocket等別の手段をユーザ側で実装する必要がありました。 今回のアップデートではTransfer-Encoding: chunked形式による返却に対応しHTTP/1.1の仕様の範囲内で徐々に値を返却できるようになりました。 またこの方式は応答サイズの上限が従来の6MBではなく20MBまでの対応となるためより大きなレスポンスを返すことができるようです。 Configuring a Lambda funct
![[アップデート]AWS Lambdaでストリーミングな応答が可能になりました | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f56dd8a78cb4581e5d4138697f1d3be133b1f9e/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F08%2Faws-lambda.png)
［速習］ Puppeteer ～ヘッドレスChromeでテスト＆スクレイピング 第2章ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント 第2章では、実際にヘッドレスChromeを自動化するうえで必要となる、最新のJavaScriptの構文やPuppeteerのAPIについて解説します。 進化し続けるJavaScript PuppeteerのAPIを解説する前に、第1章の冒頭で掲載したサンプルコードを見返してみましょう。もしかすると、中にはまったく見慣れない構文が見つかったかもしれません。 const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await b
【JS体操】第2問「画像の横長具合を比較しよう」〜正攻法＆ハック部門の解説〜 - KAYAC Engineers' Blog
こんにちは！ カヤック面白プロデュース事業部のおばらです。 普段は受託案件のデザイン・フロントエンド開発などを担当しています。 さて、『JS体操』第2問 いかがでしたか？ 今回初めての方々 第1問に引き続きの方々 複数のアプローチで何通りも回答してくださった方々 普段業務で JavaScript をバリバリ書いているであろう方々 JavaScript を学んでいる学生の方々 などたくさんの方々が挑戦してくださいました。 とても嬉しいです。ありがとうございます！ 『JS体操』とは？ 『JS体操』とはカヤックが主催する JavaScript のコードゴルフ大会です。 もともとは社内の勉強会として始めた施策です。 その詳細は以下のブログ記事を御覧ください！ techblog.kayac.com 第2問の詳細はこちら https://hubspot.kayac.com/js-taiso-002 も
Patterns for Reactivity with Modern Vanilla JavaScript – Frontend Masters Blog
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We must respond to user inputs, communicate with servers, log, perform, etc.
Today we’re excited to announce the release of TypeScript 5.2! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
Bringing Javascript to WebAssembly for Shopify Functions - Shopify
Bringing Javascript to WebAssembly for Shopify FunctionsWhile we’re working on getting our Shopify Functions infrastructure ready for the public beta, we thought we’d use this opportunity to shine some light on how we brought JavaScript to WebAssembly, how we made everything fit within our very tight Shopify Function constraints, and what our plans for the future look like. At Winter Editions 2023
Node.js compatibility for Cloudflare Workers – starting with Async Context Tracking, EventEmitter, Buffer, assert, and util
Node.js compatibility for Cloudflare Workers – starting with Async Context Tracking, EventEmitter, Buffer, assert, and util2023-03-23 Over the coming months, Cloudflare Workers will start to roll out built-in compatibility with Node.js core APIs as part of an effort to support increased compatibility across JavaScript runtimes. We are happy to announce today that the first of these Node.js APIs –
Today we’re excited to announce our Release Candidate of TypeScript 5.2! Between now and the stable release of TypeScript 5.2, we expect no further changes apart from critical bug fixes. To get started using the RC, you can get it through NuGet, or through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.2! using Declarations and Explic
Syntax Highlighting in Hand-Coded Websites The problem I have been trying to identify practical reasons why hand-coding websites with HTML and CSS is so hard (by hand-coding, I mean not relying on frameworks, generators or 3rd party scripts that modify the DOM). Let's say, I want to make a blog. What are the actual things that prevent me from making—and maintaining—it by hand? What would it take t
Today we’re excited to announce the release of TypeScript 5.4! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
Wasm core dumps and debugging Rust in Cloudflare Workers
Wasm core dumps and debugging Rust in Cloudflare Workers2023-08-14 A clear sign of maturing for any new programming language or environment is how easy and efficient debugging them is. Programming, like any other complex task, involves various challenges and potential pitfalls. Logic errors, off-by-ones, null pointer dereferences, and memory leaks are some examples of things that can make software
Node.js 16.x runtime now available in AWS Lambda | Amazon Web Services
AWS Compute Blog Node.js 16.x runtime now available in AWS Lambda This post is written by Dan Fox, Principal Specialist Solutions Architect, Serverless. You can now develop AWS Lambda functions using the Node.js 16 runtime. This version is in active LTS status and considered ready for general use. To use this new version, specify a runtime parameter value of nodejs16.x when creating or updating fu
Today we are excited to announce the availability of TypeScript 5.4 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta Here’s a quick list of what’s new in TypeScript 5.4! Preserved Narrowing in Closures Following Last Assignments The NoInfer Utility Type Object.groupBy and Map.groupBy Support for require() c
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Blog
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief Overview When you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer tools “Elemen
Scheme in the browser: A Hoot of a tale -- Spritely Institute
Scheme in the browser: A Hoot of a taleDave Thompson — October 10, 2023 Hey there, it’s been a while! We’re back to share some more exciting news about Guile Hoot, a WebAssembly toolchain and Scheme→WASM compiler. In our last post we demonstrated that the Guile Hoot toolchain can be used to assemble programs written in WebAssembly Text (WAT) format, which allowed us to develop for the WASM-4 fanta
Next.jsは現在最も人気のあるReactベースのフルスタックのJavaScriptフレームワークです。バージョンがアップする毎に新しい機能が次々に追加されNext.js13からServer ComponentsなどReactの最新機能を利用したApp Routerが登場しました。App Routerはファイル名でルーティングを設定していた既存のPage Routerとは全く異なる機能で設定方法も一から学び直す必要があります。新たにプロジェクトを作成するのであればApp Routerを利用することが推奨されていますが同時に両方の機能を利用することも可能です。 次々に新しい機能が追加される反面、ネット上に公開されている記事もすぐにOutDatedなものになっています。この文書もすぐにOutdatedなものになってしまうと思いますが現在(2023年5月)の最新バージョン13.4のドキュメント
AbortController is your friend
AbortController is your friend One of my favorite new features of JS is the humble AbortController, and its AbortSignal. It enables some new development patterns, which I'll cover below, but first: the canonical demo. It's to use AbortController to provide a fetch() you can abort early: Sorry, your browser doesn't support an inline demo. And here's a simplified version of the demo's code: fetchBut
JavaScript Promiseについての初学者向け解説 - 概念と操作の基礎 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
本日はJavaScriptのPromiseの操作とその概念について初学者様に解説致します。 非同期関数 Promise Promiseの状態 Promiseの作成 Promiseをチェーンする方法 Promiseを返す promiseのthenとfinallyの違い より高度な複数のPromise処理 最後に 前提の知識とスキルとして、少なくともES6の関数・高階関数・コールバック関数およびJavaScriptオブジェクトに精通している必要があります。 上記を学び終えてない方は、以下で学習できますので参照ください。 dev-k.hatenablog.com dev-k.hatenablog.com dev-k.hatenablog.com 非同期関数 JavaScriptにおいて非同期処理を行う際には、従来はコールバック関数を利用していました。 しかし、JavaScriptにおいて関数が第
React Native 0.76 with the New Architecture by default is now available on npm! In the 0.76 release blog post, we shared a list of significant changes included in this version. In this post, we provide an overview of the New Architecture and how it shapes the future of React Native. The New Architecture adds full support for modern React features, including Suspense, Transitions, automatic batchin
Today we’re excited to announce our Release Candidate of TypeScript 5.4! Between now and the stable release of TypeScript 5.4, we expect no further changes apart from critical bug fixes. To get started using the RC, you can get it through NuGet, or through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.4! Preserved Narrowing in Closur
DisclaimerAll projects mentioned in this blog post have been contacted, and I confirmed that the behavior described in this article is either working as intended, already fixed, or will not be fixed. TL;DRThe browser loads elements in the HTML from top to bottom, and some JavaScript libraries retrieve data or attributes from the DOM after the page has been completely loaded. Because of how the con
Explicit Resource Management: Exploring JavaScript's and TypeScript's new feature | iliazeus
One of my favorite new features of JavaScript and TypeScript is explicit resource management. It brings new syntax, using foobar = ..., that enables RAII, reducing boilerplate when managing the lifecycle of various resources. In this article, I will explore this feature as implemented in TypeScript 5.2.0 with the disposablestack polyfill. I will mention both sync and async resources, DisposableSta
Today we are excited to announce the availability of TypeScript 5.2 Beta. To get started using the beta, you can get it through NuGet, or through npm with the following command: npm install -D typescript@beta Here’s a quick list of what’s new in TypeScript 5.2! using Declarations and Explicit Resource Management Decorator Metadata Named and Anonymous Tuple Elements Easier Method Usage for Unions o
また、Project API keyとURLも同様にメモをしておいてください。 Remixのセットアップ Remixアプリケーションを用意します。今回は初期構築を行ったものをGitHubへ公開していますのでそちらをCustom Stackとして利用、もしくはクローンして利用していただくか下記手順で構築を行ってください。 Remix Custom Stacksを利用する場合 あらかじめ用意してあるRemix Custom Stacksを利用してセットアップする方法です。一番Remix wayに則った手法かもしれません。 $ npx create-remix@latest --template himorishige/remix-form-example $ cd remix-form-example $ cp .env.example .env .envファイルにSupabaseから取得した
Err... thanks for the technical explanation. But what does this actually mean in real life? Which setting should you use? Does it even matter? And if it does, why don't those clever browser engineers just set it to the best setting? Well recently I ranted on Twitter about this (as I am often want to do!) in a long thread that really should have been a blog post. So here is that blog post. Some mis
# JavaScript Garbage Collection with WebAssembly is Possible Today *by [@bwasti](https://twitter.com/bwasti)* **** tl;dr - Using [WeakRefs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef), you can pretty easily implement automatic memory management for objects exposed from WebAssembly with JavaScript's garbage collector. *(Keep in mind "automatic memory ma
Vue.jsに限らずアプリケーションに入力フォームを追加した場合には必バリデーション機能を実装する必要があります。バリデーションはユーザが入力フォームから入力した値がアプリケーションの要件を満たしているかチェックを行う仕組みです。例えばネット上のサービスを利用する場合にはメールアドレスの入力を求められます。入力後にメールアドレスの形式になっているかどうかチェックを行うのがバリデーションです。 フォームバリデーションには入力値をチェックするだけではなくエラーメッセージの管理、入力したデータの管理、submit処理(サーバに)など含まれ、すべて自分で実装しようとすると非常に大変な作業になります。vee-validateなどのライブラリの力を借りることでフォーム作成の負担を下がることができフォーム以外の処理に時間をかけることができます。ライブラリを利用することで自分で実装することに比べて楽にはな
こんにちは！ サイボウズフロントエンドエキスパートチームの左治木です。 今回のテーマは「進化するPromiseオブジェクト」です。 Promiseは、非同期処理を管理するためのオブジェクトで、ECMAScript 2015 (ES6)で導入されました。ECMAScript 2017ではasync／await構文が追加され、非同期処理がより直感的に記述できるようになりました。現在では、async／await構文が非同期処理の主流となっています。 一方で、Promiseの機能はasync／await構文の登場後も進化を続けています。これにより、非同期処理がさらに扱いやすくなり、従来のPromiseでは難しかった細かい処理も可能になっています。今回は、ES2020以降で追加されたPromiseの新機能をユースケースを交えて解説します。 Promiseの基本を簡単におさらい Promiseは、非同
The web dev community has spent the past few weeks buzzing about signals, a reactive programming pattern that enables very efficient UI updates. Devon Govett wrote a thought-provoking Twitter thread about signals and mutable state Devon Govett on X Easy to forget, but the debate about signals is the same one we had about 2-way data binding vs unidirectional data flow 10 years ago. Signals are muta
There are a lot of ways to break up long tasks in JavaScript.
There are a lot of ways to break up long tasks in JavaScript. It's very common to intentionally break up long, expensive tasks over multiple ticks of the event loop. But there are sure are a lot of approaches to choose from. Let's explore them. It's not hard to bork your site's user experience by letting a long, expensive task hog the main thread. No matter how complex an application becomes, the
Today we're releasing the Remix 3 beta preview. This is still a pre-release. It is not production ready yet, and there is still a lot to do. But it is ready for you to kick the tires and tell us where the sharp edges are. When we started talking publicly about Remix waking up, we said we wanted to build something simpler, faster, and closer to the web itself. Today's beta preview is a concrete ste
GitHub - trevorjay/Jerrica: Jerrica is a small, bare bones, 100% scheduled, web audio native, MOD player designed to be embedded in Javascript games
Jerrica is a small bare bones MOD Player meant to be embedded in JavaScript games. By "100% scheduled" we mean that all the timing of audio events is handled using the web audio scheduler. Jerrica doesn't use setTimeout, setInterval, or other timing hacks. It is recommended that its processMusic function is called once per frame via requestAnimationFrame, but that's simply to ensure that sound eve
Introducing TanStack Start Middleware – Frontend Masters Blog
TanStack Start is one of the most exciting full-stack web development frameworks I’ve seen. I’ve written about it before. In essence, TanStack Start takes TanStack Router, a superb, strongly-typed client-side JavaScript framework, and adds server-side support. This serves two purposes: it gives you a place to execute server-side code, like database access; and it enables server-side rendering, or
Vitest の Browser Mode (experimental) でファイル読み込みのテストを書く - ジンジャー研究室
趣味でブラウザ上に画像や音声を読み込んで作業する React アプリを作っているのだが、 Vitest + Testing Library でテストをしようと思ったらファイル読み込み部分でつまづいた。Node.js 上でブラウザ環境をシミュレートしている部分がそのままでは上手く動かないので、 polyfill を入れたり沢山モックを差し込んだりするとなんとか動く。が、色々弄りすぎて本当にテスト出来ているのか怪しいし、やはりリアルなデータでテストしたい。 で、リアルなブラウザ環境でテスト出来ないかなと調べていたところ、２つの候補が挙がった。 Browser Mode | Guide | Vitest Experimental: components | Playwright 両方とも experimental 。前者は Vitest をそのままブラウザ上で実行するというもので、後者は Pla
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
Modern Node.js Patterns for 2025
Optimize long tasks | web.dev
JavaScriptの基礎と向き合う - iimon TECH BLOG
htmz - a low power tool for html
[アップデート]AWS Lambdaでストリーミングな応答が可能になりました | DevelopersIO
第2章 ブラウザ操作自動化の基本 ～非同期処理を扱うasync/await関数、自動化の鍵を握るPuppeteerコンポーネント | gihyo.jp
Announcing TypeScript 5.2 - TypeScript
Announcing TypeScript 5.2 RC - TypeScript
Font with Built-In Syntax Highlighting
Announcing TypeScript 5.4 - TypeScript
Announcing TypeScript 5.4 Beta - TypeScript
進化が止まらない！Next.js13の基本機能をしっかり理解しよう | アールエフェクト
New Architecture is here · React Native
Announcing TypeScript 5.4 RC - TypeScript
DOM-based race condition: racing in the browser for fun
Announcing TypeScript 5.2 Beta - TypeScript
Remixの基本 – Formコンポーネントの使い方 | DevelopersIO
What does the image decoding attribute actually do?
jott - js_gc_in_wasm
Vue3でフォームバリデーションのVee-Validate 4の基礎を理解 | アールエフェクト
進化するPromiseオブジェクト ［JS Modern Features no.2］ | gihyo.jp
Were React Hooks a Mistake? | jakelazaroff.com
Remix 3 Beta Preview