Reactテスト駆動開発に一度挫折した人が、生成AIの力を借りて再挑戦する話 - Insight Edge Tech Blog
はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
NLUX with ReactGenerative UI With Next.jsChatGPT-Inspired UI import { AiChat, useAsStreamAdapter } from '@nlux/react'; import '@nlux/themes/nova.css'; import { send } from './send'; import { user, assistantAvatar } from './personas'; export default () => { const adapter = useAsStreamAdapter(send, []); return ( <AiChat adapter={ adapter } personaOptions={{ assistant: { name: "EinAssistant", tagline
この記事は、<strong><a href="https://techfeed.io/events/techfeed-experts-night-31">TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来</a></strong>の開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。 本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャ
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
6月18日、Codeminer42が「How React 19 (Almost) Made the Internet Slower」と題した記事を公開した。この記事では、React 19の新しい変更がどのようにしてインターネットの速度を遅くする可能性があったかについて詳しく紹介されている。 React 19が今年の初めに発表され、新機能や開発者体験（DX）の向上が話題となった。しかし、先週、React 19に加えられたある変更が多くのウェブサイトのパフォーマンスを大幅に低下させる可能性があることが明らかになった。 この問題は、Dominik（TkDodo）のツイートから始まった。 https://x.com/TkDodo/status/1800501040766144676 React 19では、同じSuspenseバウンダリ内の兄弟要素の並列レンダリングが無効化された。これにより、兄弟要
API経由でメール送信をするためのサービスといえば、SendGrid, Amazon SES, Postmarkのような名前が出てくるかと思います。 そんな中、弊社(トラストハブ)でも利用しているResendというサービスがとても使いやすいので紹介します。また、記事後半でResendを日本で使うにあたり重要なアップデートがあったので、どんな点が変わったかを紹介します。 そもそもResendとはどんなサービスか Resendは後発サービスなだけあり、開発体験の良さに主眼が置かれて開発されています。テストでメールが送信できていることを確認する機能や、ログを確認する機能など、細かいところが使い勝手が良いなと感じています。 SDK・設定がシンプル 公式でたくさんの言語のSDKが用意されています。また、フレームワークごとに組み込むためのドキュメントも充実しています。 Knowledge Baseを見
この記事は、React 19 RCにおけるSuspenseの問題について、なるべくフラットな立場から現状を解説することを目的としたものです。 この問題の経緯については既に先行の記事が存在します。本記事は、この記事とは別の切り口でまとめ、現在の動向を追加したものとなるよう構成しました。 要約 React公式が正式リリースまでに対応してくれるようなので、大人しく待ちましょう。 概要 以下のように<Suspense>で包まれた、2つの兄弟コンポーネント<Foo>と<Bar>があるとします。 プリレンダリングを走らせる際、React 18では<Foo>と<Bar>は並列にレンダリングされましたが、React 19 RCでは直列にレンダリングされるという変更が適用されました。 なぜ変更を適用したか 直列にレンダリングすることで得られるメリットがあります。それは、レンダリングの途中経過をスタックに保存
We’re excited to announce that we are partnering with the React team to build and maintain the react-codemod repo, offering open-source codemods to enhance the migration experience for React 19 and beyond. React 19 MigrationTo kick things off, we've released 10 new codemods and recipes to assist with upgrading to React 19. Upgrade your React project with the following command: For more details, re
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
こんにちは、エンジニアの内山です。 最近、社内でIPAの情報セキュリティマネジメント試験に挑戦する人が増えていて、セキュリティチームもその流れを支援するために勉強会を開催してくれたり、毎日一問一答方式で出題、解説をしてくれたりと行動指針にある「学びのティーチャー」を体現するサイクルが回っています。 僕も負けてられないと、情報処理安全確保支援士試験に挑戦することを決めました。そして、僕自身も次の人に「学びのティーチャー」のバトンを回していきたいと思っています。 それでは、今月の行動指針をご覧ください！ 今月はどういったこと(に挑戦した|を学んだ|で速さを追求した|を楽しんだ)か教えてください サービス台帳の一括インポート機能をリリースしました (岩松) 以前の記事でサービス台帳機能に一括インポート機能を追加することについて 考慮しなければいけないこと(データフォーマット,バリデーション処理,
こんにちは！ KANNA の開発のお手伝いをしております、フリーランスエンジニアの len_prog です。 今回は、XState を用いてステートマシーンを作り、アプリケーションの複雑な状態遷移をシンプルに実装する方法についてご紹介します。 背景 アルダグラムでは、デジタル帳票アプリケーション「KANNA レポート」を提供しています。 KANNA レポートは、Excel や Google スプレッドシートのようなユーザーインターフェースを備えた Next.js 製の Web アプリケーションとなっており、複雑な状態遷移を多く含んでいます。 このような複雑な状態遷移を管理するためには、React アプリケーションでは通常、Redux や useReducer を用いてステートマシンを構築することが多いと思います。 しかし、これらの方法は状態遷移に厳格な制約が必要な場面で手続き的なコードを多
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
How to Document Picture-in-Picture in React (with Typescript) | HackerNoon
How to Document Picture-in-Picture in React (with Typescript) by@dlitsman Too Long; Didn't ReadThe Chrome 116 update introduced the Document Picture-in-Picture API, expanding developers' control over custom controls and UI for Picture-in-Picture mode. This feature is currently supported in Chrome and Edge, with potential for wider browser support. The API allows opening, closing, and detecting Pic
PR TIMESのトップページをNext.jsにリプレイスしました | PR TIMES 開発者ブログ
こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 プレスリリース掲載ページ、キーワード検索ページに続き、PR TIMESのトップページを PHP + Smarty + […]
3回目となる今回は、過去最多の39名の方にご参加いただきました（前回は20名前後）。 また、イベントでは4名の方に以下のような感じで登壇していただきました。 1.高速案件立ち上げで使われるマッハテンプレートのフロントエンド技術選定 弊社の西田さんが発表されました。 マッハチームで利用されている高速開発のためのマッハテンプレートに含まれるフロントエンドのスタックについて説明いただきました。 実は私も西田さんと同じマッハチームなのですがフロントエンドの技術選定を全て理解できているわけではなかったので背景含めて大変参考になりました。 2.Reactへの刷新の取り組みと恩恵 サイボウズ株式会社に所属する ryounasso さんに登壇いただきました。 kintoneアーキテクチャ刷新PJの取り組み内容やClojureからReactに変更することによる恩恵などについてお話しいただきました。
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
AIUI.me - Screenshot to code
Transform any screenshot into a fully functional, reusable component with just a single click.
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
astroでthree.jsを動かす方法
検索しても出てこなかったので。 Reactを使います(React Three Fiberは後述) astroにReactをインストール ドキュメントを見るとReactをインストールする方法は自動と手動の2つあって、今回は自動で行います。手動だと、reactをブラウザで解釈するためのreact/domというライブラリを入れたり、コンフィグいじったりしなければならないですが、自動だと全部よろしくやってくれます。 npx astro add react ✔ Resolving packages... Astro will run the following command: If you skip this step, you can always run it yourself later ╭───────────────────────────────────────────────────
React 19を概念から理解する
2024-05-29うひょさんに聞く！ React 19アップデートの勘所 #React19_Findy
React 19の新機能まるわかり
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
React でゼロからフローチャートUIを実装する
最近、AIのワークフローを簡単に組める OSS「Dify」が注目を集めています。 Difyではブラウザ上でフローチャートを構築してLLMのワークフローを設計できます。 今回はこのUIの実装を理解するためにReactでフローチャートUIを実装してみようと思います。DifyではフローチャートUIの構築に「React Flow」を使用しています。React Flow は React で使えるフローチャートUIライブラリです。本記事の実装でも React Flow を参考にしてきます。 本記事はフローチャートUIの仕組みを理解することを目的にしています。 フローチャートUIの要素 フローチャートは主に、ノードとエッジから構成されます。ノード同士はエッジで繋ぐことができます。 この記事ではエッジ接続部分をコネクターと呼びます。 つくるもの シンプルなフローチャートUIを実装します。 今回作るフローチ
【初心者向け】Reactでよく使うJavaScriptのメソッドや構文13選とReact Hooks(プチ紹介) - Qiita
はじめに 最近、ひょんなことから初学者向けのReactアプリをレベル別に10個くらい開発しながら、ハンズオンで学べる教材的なものを作成する機会があり、それを実施する前に最低限理解していたら学習がスムーズに進むだろうと思われるものをまとめました。 また、予習編としてReact専用で使用されるものも簡単に紹介します。 ちなみに、すでに「基本編くらいわかるわ！」って方は予習編はみなくていいので、以下のリファレンスのチュートリアルをやっちゃってください。Udemyなんかでもいいと思いますのでどんどん手を動かすフェーズに入っていきましょう。 https://ja.react.dev/ 基本編(JavaScript) mapメソッド 配列内の全ての要素に対して関数を適用し、新しい配列を作成します。 const items = ['apple', 'banana', 'cherry']; const l
JSer.info #694 - Next.js 15 RCがリリースされました。 Next.js 15 RC | Next.js React 19 RCに対応、React Compilerを実験的にサポート、Hydration Error表示の改善が行われています。 また、Fetch/GET Route Handler/Client Routerをデフォルトでキャッシュしないように変更、Partial Prerenderingのincrementalオプションを追加などの変更も行われています。 そのほかには、遅延処理をするnext/afterを追加、create-next-appのアップデート、非推奨だった@next/fontのサポート削除などが行われています。 SolidStart 1.0がリリースされました。 SolidStart 1.0: The Shape of Framewor
Next.js 15 RCまとめ
基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable
React to Nuxt
Nuxt for React devs in development everything you need to get started with Nuxt, from a React perspective. join waitlist with GitHub by registering you are signing up for email updates what will it cost? I'm still working out the details. I am aiming to be accessible to most developers. There will be purchasing power parity discounts. I'll also offer an early adopter discount for users who purchas
初夏のJavaScript祭りにて使用した資料です。 TanStackを用いてアプリケーションを実装するためのポイントと注意点を解説しています。 https://javascript-fes.doorkeeper.jp/events/172450
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Balancing Old Tricks with New Feats: AI-Powered Conversion From Enzyme to React Testing Library at Slack - Slack Engineering
Balancing Old Tricks with New Feats: AI-Powered Conversion From Enzyme to React Testing Library at Slack In the world of frontend development, one thing remains certain: change is the only constant. New frameworks emerge, and libraries can become obsolete without warning. Keeping up with the ever-changing ecosystem involves handling code conversions, both big and small. One significant shift for u
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Server Componentsを理解したい
The Powerful Conversational AI JavaScript Library | NLUX
【2024年6月版】フロントエンドアーキテクチャ界隈の必読記事まとめ【TechFeed】
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
React 19に加えられた変更が危うくインターネット全体を遅くするところだった件
メール送信サービスのResendが日本でもまともに使えるようになったので紹介したい
React 19 RCのSuspenseに関する問題と現状のまとめ
Codemod partnering with the React team
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
【2024年5月】今月の行動指針 - Assured Tech Blog
XState で複雑な状態遷移をシンプルに管理する
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
「クラスメソッドのReact事情大公開スペシャル#3」を開催・登壇しました！ | DevelopersIO
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
Netflixは、フロントエンドテストへのカスタムアプローチであるSafeTestを発表
メルカリ ハロの技術スタックとその選定理由 | メルカリエンジニアリング
2024-05-26のJS: Next.js 15 RC、SolidStart 1.0、Angular v18(zoneless)
TanStackで効率的なルーティングとデータ取得を実現
Server Actions の同時実行制御と画面の状態更新
Next.js で React Compiler を試しつつ出力コードを見てみる