実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
2024/04/17: 更新 内容を更新した記事を書きましたので、よかったらこちらも併せて、ご覧ください。 zenn.dev こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考
JavaScriptの仕様であるECMAScriptはEcma Internationalによって定められています。ECMAScript 2015（ES6）の登場以降は、ECMAScript 2016、ECMAScript 2017･･･と、年次で仕様が更新されています。ECMAScript 2022（ES2022）は2022年6月22日のEcma InternationalのGA 123rd meetingにて、ECMAScript 2023（ES2023）は2023年6月27日のGA 125th meetingで承認されました。 ES2022とES2023はすでに多くのブラウザやNode.js環境で利用可能です。本記事では新仕様と使いどころを紹介します。 ES2023 - 配列の非破壊操作 ES2023では配列を非破壊で操作できるメソッドが追加されています。非破壊とは、元の配列を変更せ
フロントエンド API コール時のエラーハンドリングを軽く整理（Fetch API・typescript-fetch・TanStack Query） - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニア佐藤です。カミナシレポートの開発に携わっています。 フロントエンドのエラーは「画面リロードやブラウザ再起動で復旧できる（かもしれない）」「クラッシュしてもユーザーの端末に閉じる」などの理由から、バックエンドよりは精緻に扱われない傾向があると個人的には感じています。 その一方、カミナシレポートは、ノンデスクワーカー向けの不安定なネットワーク環境で利用されることも多々あるアプリです。そのため、デジタルツールに不慣れな方のために精緻なフィードバックが必要とされる、リロードに頼ることが難しいケースがある、などの理由でエラーの扱いにも慎重になる必要があります。 本記事では、カミナシレポートのフロントエンド開発をする中で、 バックエンドの API コール時にエラーが発生する条件とその内容（型・クラス） これらエラーをハンドリングする箇所 について、把握しておきたいと感じ
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
TSKaigi資料まとめ
非常に学びが多く、刺激的な時間でした。…が、あまりに内容が濃く、逆に記憶に残らない！ そんな自分のために、登壇者の方が公開してくださっている資料をまとめました。 もともとは完全に自分用のメモなのですが、「こんなの欲しかった」と思ってくださる方がいればと思い、共有してみます。 内容に誤りや抜けがあれば、ぜひコメントなどでご指摘いただけると嬉しいです。修正していきます！ ※本記事では、TSKaigi 2025の各登壇者が公開されている資料・概要を引用・紹介しています。 ※引用元・登壇者情報は公式サイトおよび各スライド共有サービスからのリンクに基づいています。 ※内容の正確性については各登壇資料をご確認ください。 2025/05/23 Room: トグル 招待講演 The New Powerful ESLint Config with Type Safety Introduction to th
Web 標準動向 2025年10月版
こんにちは！ サイボウズ株式会社 フロントエンドエンジニアの mehm8128 (@mehm8128) です。 はじめに サイボウズは 2025 年 4 月より、W3C のメンバーに加入しました。 標準化プロセスに関わることができるようになるための最初の一歩として、フロントエンドエンジニアの一部のメンバーは積極的に Web 標準のキャッチアップを行っています。 そこで、毎月メンバーが興味を持った Web 標準に関する話題や、実際に標準化プロセスに関わることができた場合にはその報告などを 1 つの記事としてまとめ、紹介していきます。 また、ここでは W3C に限らず、TC39 や WHATWG などの標準化団体のトピックについても扱います。 HTML Blink: Intent to Ship: Scoped Custom Element Registry Scoped Custom Ele
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
JavaScript 第7版
JavaScriptは最も多くのソフトウェア開発者に使用されているプログラミング言語です。JavaScriptを包括的に解説する本書は、第6版から大幅に加筆および更新し、全面改訂しました。 はじめにJavaScript言語仕様の基本的な構文と機能について豊富なサンプルコードを使って学習します。そしてJavaScript標準ライブラリを詳述し、Webブラウザで使われるクライアントサイドJavaScriptやNode.jsで使われるサーバサイドJavaScriptについてわかりやすく説明します。またNode形式と標準形式のモジュールの使い方、イテレータとジェネレータ、async/awaitやPromiseなどの非同期プログラミングの新しい構文、クラスの定義方法などを紹介し、さらにツール群や言語拡張機能、理解の難しいJavaScript特有の動きなどについても学ぶことができます。 Webプラット
IDEs CLion DataGrip DataSpell Fleet GoLand IntelliJ IDEA PhpStorm PyCharm RustRover Rider RubyMine WebStorm Plugins & Services Big Data Tools Code With Me JetBrains Platform Scala Toolbox App Writerside JetBrains AI Grazie Junie JetBrains for Data Kineto Team Tools Datalore Space TeamCity Upsource YouTrack Hub Qodana CodeCanvas .NET & Visual Studio .NET Tools ReSharper C++ Languages & Frameworks K
概要 タイトル通りですが、AWSでサーバーレスなメール送信システムを、AWS CDKを使って構築してみました。 サーバーレスなので、スケールする良い感じの構成になります。 荒いところもありますが結構便利なのでよかったらぜひご参考に、またはそのまま使ってくださいという感じで読んでいただけたら光栄です。 Amazon SESを使用してメールを送信していますが、（少し変えれば）SES以外でも送信できるかと思います。 目次 目次 概要 目次 まとめ(AWS Dev Day 2022 Japan) 要件 前提 アーキテクチャ 構成図 使用AWSサービス コード アーキテクチャ解説と補足 AWS CDK aws_lambda_nodejs パラメータ用コンフィグファイル バリデーション Amazon SES SQS 標準キュー 可視性タイムアウト ロングポーリング 部分バッチ応答 S3 DynamoD
Learn how to bring multithreaded applications written in other languages to WebAssembly. WebAssembly threads support is one of the most important performance additions to WebAssembly. It allows you to either run parts of your code in parallel on separate cores, or the same code over independent parts of the input data, scaling it to as many cores as the user has and significantly reducing the over
Today we’re excited to announce the release of TypeScript 4.5! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript by adding statically checked types. When you use static types, you can run the TypeScript compiler to check for bugs like typos and mismatches in the shapes of your data, and get handy suggestions. These types don’t change your program, and you can re
令和最新版 CoffeeScriptで書かれたnodeと上手くやっていく方法、そして決別 <わかれ> - moznion
moznion サーバーサイドエンジニア Seattle, Washington在住 10年モノのCoffeeScript on node というのは若干言いすぎで、およそ9年モノです 2014年当時の状況 ES2015以前 (そりゃそう) Babelはあった TypeScriptブレイク以前 (だいたい2016年くらいから広くproduction readyになったという印象) AltJSの萌芽 => この時点でCoffeeScriptを採用したのは間違いではないはず...... 2023年現在の状況 JavaScriptの言語機能がめちゃ拡張された TypeScriptがメジャーに DHH、TypeScriptをやめる => CoffeeScriptを使うメリットはおそらく失なわれたと言ってもよい (このへんを参考にした: https://yosuke-furukawa.hatenab
An introduction to WebAssembly for JavaScript Developers
If you transmit a number whereas an integer encoded on 64 bits is expected you will get an exception: let run = async () => { try { let bytecode = await fetch("add/add.wasm"); let wasm = await WebAssembly.instantiateStreaming(bytecode); console.log(wasm.instance.exports.addInt64(1,2)); } catch(e) { console.error(e); } }; > run().then(); TypeError: wasm function signature contains illegal type Call
ロマン構成が動いたので紹介します。 コード: https://github.com/mizchi/absurd-sql-example-with-typeorm デモ: https://heuristic-perlman-94f8f4.netlify.app tldr Steam の某クリッカーゲームをやってたら放置ゲーでも作りたい気分になってきた。 複雑なデータを管理するならブラウザ内に本物の sqlite を持ってきたい sqlite は持ってこれたけど TS の中で 生 SQL 書くのがだるかった(補完支援がない)ので ORM でラップしたい Typeorm + absurd-sql の構成を試したら色々大変だったけど動いた つまりブラウザでこのコードが動く。 // ... @Entity() class User { @PrimaryGeneratedColumn() id: nu
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.
The story of web framework Hono, from the creator of Hono
The story of web framework Hono, from the creator of Hono2024-10-17 Hono is a fast, lightweight web framework that runs anywhere JavaScript does, built with Web Standards. Of course, it runs on Cloudflare Workers. It was three years ago, in December 2021. At that time, I wanted to create applications for Cloudflare Workers, but the code became verbose without using a framework, and couldn't find a
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
We've added JavaScript-native RPC to Cloudflare Workers
We've added JavaScript-native RPC to Cloudflare Workers2024-04-05 Cloudflare Workers now features a built-in RPC (Remote Procedure Call) system enabling seamless Worker-to-Worker and Worker-to-Durable Object communication, with almost no boilerplate. You just define a class: export class MyService extends WorkerEntrypoint { sum(a, b) { return a + b; } } And then you call it: let three = await env.
皆さんこんにちは、暑い中ですがお元気ですか？おっくんです。 去る 2021 年 7 月 13 日に Deno 1.12 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介したいと思います。 実行環境 macOS Catalina 10.15.7 Docker イメージ denoland/deno:centos(確認時点では Deno 1.12.0 でした) Deno 1.12 Deno 1.12 での変更事項をDeno 1.12 リリースノートを元に確認します。 deno.com Web Crypto API の対応メソッドが増えました Deno 1.12 では、 以下のWeb Crypto APIの 3 つの実装が追加されました。 crypto.subtle.generateKey キー生成 crypto.subtle.sign 署名 crypto.s
All JavaScript and TypeScript Features of the last 3 years
TypeScript as envisioned by Stable DiffusionThis article goes through almost all of the changes of the last 3 years (and some from earlier) in JavaScript / ECMAScript and TypeScript . Not all of the following features will be relevant to you or even practical, but they should instead serve to show what’s possible and to deepen your understanding of these languages. There are a lot of TypeScript fe
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
Introducing humanfs (formerly fsx): A modern filesystem API for JavaScript - Human Who Codes
The JavaScript APIs we have today are so much better than those we had even a decade ago. Consider the transition for XMLHttpRequest to fetch(): the developer experience is dramatically better, allowing us to write more succinct, functional code that accomplishes the same thing. The introduction of promises for asynchronous programming allowed this change, along with a series of other changes that
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
Note: I received a lot of great feedback from the discussions at Mastodon and Hacker News, so I've updated the post with some improvements to the font! I've also added some further examples and acknowledgements at the end. 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
Join a VS Code Dev Days event near you to learn about AI-assisted development in VS Code. Update 1.70.1: The update addresses these issues. Update 1.70.2: The update addresses these issues. Update 1.70.3: This update is only available for Windows 7 users and is the last release supporting Windows 7. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welc
2025-05-06, Version 24.0.0 (Current), @RafaelGSS and @juanarbol We’re excited to announce the release of Node.js 24! This release brings several significant updates, including the upgrade of the V8 JavaScript engine to version 13.6 and npm to version 11. Starting with Node.js 24, support for MSVC has been removed, and ClangCL is now required to compile Node.js on Windows. The AsyncLocalStorage API
14 Linting Rules To Help You Write Asynchronous Code in JavaScript
Debugging asynchronous code in JavaScript can feel like navigating a minefield at times. You don't know when and where the console.logs will print out, and you have no idea how your code is executed. It's hard to correctly structure async code so it executes in the right order as you intend it to. Wouldn't it be nice if you had some guidance while writing asynchronous code, and to get a helpful me
Today we are excited to announce the availability of TypeScript 5.8 Beta. To get started using the beta, you can get it through npm with the following command: npm install -D typescript@beta Let’s take a look at what’s new in TypeScript 5.8! Checked Returns for Conditional and Indexed Access Types Consider an API that presents a set of options to a user: /** * @param prompt The text to show to a u
Welcome to WWDC25! We’ve got lots of exciting announcements about web technology to share with you this week. Don’t miss our seven sessions, including What’s new in Safari and WebKit. Today brings the beta of Safari 26, with 67 new features and 107 improvements. We’ll take a tour of them all in this article. But first — Safari 26? Where is Safari 19? You might have seen today during the WWDC25 Key
NestJS Way より TS Way を意識したバックエンド設計事例と Tips - Mobile Factory Tech Blog
こんにちは！BC チームでエンジニアをしている id:d-kimuson です。 最近、弊チームで構築した社内向け Web API のバックエンド設計をしたので事例として紹介しようと思います。 フレームワークとして NestJS を採用していますが、NestJS Way よりも TS Way を意識した設計をしており、このエントリの主題でもあるため、TS Backend の設計事例として読んでいただければと思います。 対象システムの概要 社内の他サービス向けの Web API で、他チームのサービスを経由してエンドユーザーに届く中間システム チーム内のサービスからもチーム外のサービスからも叩かれる想定 チーム外からも叩かれるため、なんらかのスキーマを共有したいというモチベーションがある → 2023 年現在で標準的な OpenAPI Specification (以後 OAS と呼びます)
JavaScriptのthisキーワードを理解する方法と使い方 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
JavaScriptのthisキーワードやpromise/async/await、スコープ、巻き上げなどの概念を学び始めると、JavaScriptの中級者レベルに到達したと言えます。 ただし、この段階は概念を理解するための難易度であり、技術的な中級者になるための一歩となります。 この中でも、Promiseの概念の理解は、thisキーワードと同じぐらい難易度が高く、学習者によっては急に難しく感じるかもしれません。 thisとはなんですか？ グローバル実行環境 単独のグローバルスコープ 関数内部のthis コンストラクターでの呼び出し クラスでのthis オブジェクトメソッドでの呼び出し thisのカスタム値 アロー関数でのthis DOMイベントハンドラー thisの優先順位 最後に thisとはなんですか？ JavaScriptにおける最も難しい概念の1つが、この「this」キーワードです
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
Persistent npm Campaign Shipping Trojanized jQuery | Phylum
Since May 26, 2024, Phylum has been monitoring a persistent supply chain attacker involving a trojanized version of jQuery. We initially discovered the malicious variant on npm, where we saw the compromised version published in dozens of packages over a month. After investigating, we found instances of the trojanized jQuery on other platforms, such as GitHub, and even as a CDN-hosted resource on j
Jun 10, 2024 by Jen Simmons, Jon Davis, Karl Dubost, Anne van Kesteren, Marcos Cáceres, Ada Rose Canon, Tim Nguyen, Sanjana Aithal, Pascoe, and Garrett Davidson ContentsWebXRCSSWeb apps for MacSafari ExtensionsSpatial mediaHTMLMediaWebRTCPasskeysHTTPSJavaScriptWeb APICanvasWebGLWeb InspectorWKWebViewApple PayDeprecationsBug Fixes and moreHelp us Beta TestFeedback The last year has been a great one
Web Streams Everywhere (and Fetch for Node.js) | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Chrome developer advocate Jake Archibald called 2016 “the year of web streams.” Clearly, his prediction was somewhat premature. The Streams Standard was announced back in 2014. It’s taken a while, but there’s now a consistent streaming API implemented in modern browsers (still waiting on Firefox…)
WebKit Features in Safari 18.4
Mar 31, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Razvan Caliman, Karl Dubost, Brady Eidson, Elika Etemad, Youenn Fablet, Matthew Finkel, Simon Fraser, Timothy Hatcher, David Johnson, Anne van Kesteren, Daniel Liu, Keith Miller, Rupin Mittal, Tim Nguyen, Pascoe, Abrar Rahman Protyasha, Richard Robinson, Lily Spiniolas, Brandon Stewart, John Wilander and Luming Yin ContentsDeclarative Web Pus
State of the Common Lisp ecosystem, 2020 🎉 - Lisp journey
NEW: 9 videos (86min) about CLOS on my Common Lisp course. Out of 7h+ of content. Rated 4.7/5. Learn more and stay tuned. 🎥 I also have cool Lisp showcases on Youtube . The last ones: how to build a web app in Common Lisp, part 1 and 2. This is a description of the Common Lisp ecosystem, as of January, 2021, from the perspective of a user and contributor. The purpose of this article is both to gi
Editor’s note: This guide to React design patterns was last reviewed for accuracy by Isaac Okoro on 12 April 2024. The article was also updated to add four more design patterns, covering prop combination, controlled components, forwardRefs, and conditional rendering. It was previously updated to include information about the render props pattern and state reducer pattern. Check out this article fo
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのES2023・ES2022の新機能まとめ - ICS MEDIA
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
Modern Node.js Patterns for 2025
JavaScript Best Practices | The WebStorm Blog
サーバーレスでスケールするメール送信システムをAWS CDKで構築する - 365歩のテック
Using WebAssembly threads from C, C++ and Rust
Announcing TypeScript 4.5 - TypeScript
typeorm + absurd-sql on Browser のロマン構成
Announcing TypeScript 5.2 - TypeScript
Deno 1.12 へのアップデートと変更事項まとめ - 虎の穴ラボ技術ブログ
Announcing TypeScript 5.2 RC - TypeScript
Font with Built-In Syntax Highlighting
July 2022 (version 1.70)
Node.js — Node.js v24.0.0 (Current)
Announcing TypeScript 5.8 Beta - TypeScript
News from WWDC25: WebKit in Safari 26 beta
News from WWDC24: WebKit in Safari 18 beta
A guide to React design patterns - LogRocket Blog
DOM-based race condition: racing in the browser for fun