GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました - ANDPAD Tech Blog
ANDPAD フロントエンドエンジニアの小泉です。 普段は Vue での開発をメインにしているのですが、並行して React のプロジェクトも担当しています。 今回は、「ANDPAD 資料承認」というプロダクトのサービスページを Next.js から React Router に移行した際の、 GitHub Copilot の活用法について紹介します。 特に、「コーディングエージェントが凄いのはわかったけど、実際のプロダクト開発にどう取り入れて良いかわからない」という悩みを持っている方の参考になれば幸いです。 なお、この記事は、ある程度 Copilot や コーディングエージェントを使ったことのある方に向けた内容となっています。そもそもの Copilot の導入・設定方法、基本的な使い方・事例について知りたい方は、以下の記事を先に読んでいただくのがオススメです！ tech.andpad.c
Storybook の情報を抜き出して MCP サーバにしてみる
LayerX バクラク事業部 Enabling チームでスタッフエンジニアをしている izumin5210 です。 Ubie さんの「社内デザインシステムをMCPサーバー化したらUI実装が爆速になった」を拝見し、悔しかった感動したので、自分でも試してみました。 MCP ツール設計 以下に引用する Ubie さんのスライドで解説されているとおりですが、現行モデルでは全コンポーネントのコードやルールを一気に渡してもノイズが多くなりすぎるためか、満足のいく性能は出ませんでした。 これは MCP サーバ化したとしても同様で、Tool 1回の呼び出しで全コンポーネントの詳細情報をすべて返すとやはり情報がぼやけてしまいます。 AI Coding Agent Enablement - エージェントを自走させよう (p.23) これらを踏まえると、以下のような2つのツールに分けて提供するのがよさそうだと判
Orvalによる自動生成で型安全なフロントエンド開発をやってみる
はじめに バックエンド（FastAPI）とフロントエンド（React）を別々に開発していると、REST APIのスキーマ定義に不一致が生じることがあります。 せっかくTypeScriptで型定義をして安全性を高めようとしているのに、そもそもバックエンドと矛盾があってしまうとTypeScriptの強みが活かせない状態になってしまいます。 本記事では、そのようなスキーマの不一致を防ぐ方法を検証します。 また、検証にかかる時間を短縮するため、本題以外の実装にはAIコーダーClineを活用しています。 方法 バックエンドで定義しているOpenAPIの定義ファイルを利用して、フロントエンドのスキーマを自動生成することで不一致をなくします。 つまり、バックエンドを正としてフロントエンドがバックエンドを追従するようにします。 ツール 今回利用するツールはOrvalです。 Orval は React との
GraphDB KuzuのWebAssemblyをブラウザ上で動かしneo4j-nvlで可視化してみたメモ - Qiita
declare module '@kuzu/kuzu-wasm' { export default function kuzu_wasm(): Promise<Kuzu>; export interface Kuzu { Database: () => Promise<Database>; Connection: (db: Database) => Promise<Connection>; FS: { writeFile: (path: string, content: string) => void; }; } export interface Database { close: () => void; } export interface Connection { execute: (query: string) => Promise<QueryResult>; } export in
Vitestを使った型テストの始め方
WeJS @ 42nd https://wajs.connpass.com/event/293440/
Playwright を使いこなすためのベストプラクティス - Qiita
はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after
EnzymeとReact Testing Libraryの違いを調べてみた
この記事は何？ 過去に少しだけEnzymeを触ったことがあり、最近Reactを触るようになったため、公式から推奨されているテストライブラリについて調べた Enzymeとは？ Airbnb によって開発された React v16 までしかサポートしていない コンポーネントの内部構造や状態にフォーカスしており、コンポーネントのメソッドや状態を直接テストすることが可能 コンポーネント内のメソッドを単体でテストすることができる Vue.jsのテストライブラリ（Vue Test Utils）に近い React Testing Library Kent C. Dodds（Testing Trophyの考案者）によって開発された ユーザー視点でテストすることを重視しており、コンポーネントを操作して表示される内容をテストする E2Eに近いイメージ コンポーネント内にアクセスすることができない コードで差を
Vite は使ってないけど Jest を Vitest に移行する
上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか？ 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか？ これについては Vitest
Hankoを使ってパスキーを使った指紋認証をWebで試してみる
この記事は？ 最近、ヤフーやNTTドコモ、メルカリといった日本で有名な企業がログインにおいて、パスキーを使った認証を採用していること、または、し始めたことを知り、その技術について興味を持ったので調べていました。その中で、パスキーを使った認証が実装できるHankoというライブラリを見つけたので試してみたという記事です。 パスキーとは何か？ 筆者はパスキーについて詳しくないため、次の記事がとても参考になりました。 簡単に言えば、パスキーとは、FIDO(ファイド, Fast IDentity Online)という認証技術で使われる資格情報の一つであり、Web Authenticationの仕様(Web技術標準化団体W3Cが策定)とClient-to-Authenticator Protocol(CTAP)の仕様(FIDOの標準化団体FIDO Allianceが策定)で構成されるFIDO2の仕様で
Storybook 8.3 で導入された Vitest 対応を React と Next.js で試す
Storybook 8.3 のリリースつについて 先日 Storybook 8.3 がリリースされました。 このリリースでの目玉機能は、なんといっても、待望の Vitest 対応ではないでしょうか。 以下は、7月末に一部公開されていたスクリーンキャスト。 とはいえ、何故か大々的に告知されていなかったり、Changelog には以下のようにあるのですが、 ⚡️ First-class Vitest integration to run stories as component tests 🔼 Next.js-Vite framework for Vitest compatibility and better DX 🗜️ Further reduced bundle size for a smaller install footprint 🌐 Experimental Story glo
GraphQL の Fragment Colocation を導入したら依存関係がスッキリしてクエリもコンポーネントも書きやすくなった
この記事は Money Forward Engineering 1 Advent Calendar 2022 11 日目の投稿です 🎄 昨日 10 日目は cabossoldir さんによる 『コードレビューのとき、私は何をレビューしているのか？』 でした。 🙈 TL;DR Fragment Colocation とは、コンポーネントが必要とするデータを Fragment にまとめてコンポーネントと同じ場所に配置 (co-locate) すること Fragment Colocation を導入することで、「Query や Mutation を実行するコンポーネント」と、「それらの結果を必要とするコンポーネント」との関心の分離ができる Query, Mutation, Fragment はそれを実行するあるいは必要とするコンポーネントと同じファイル内に宣言すると依存関係が見やすく、変更が
GitHub Actions のみで、actions/cache も使わない最軽量の VRT
Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？ スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？ 比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージ や GitHub Actions の actions/cache を使用する場合など コミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ
Playwright+GitHub Actions*E2E with VRT 環境構築とCI/CD連携の知見
はじめに 業務でPlaywrightの環境構築及びCI/CD連携担当したことから、E2EテストとVRTのベストな構成をずっと悩んでいました。 自分の中である程度納得できる形まで落とし込めたので、その知見を残しておきます。 🎭Playwrigth Microsoftが開発したテストツールです。複数ブラウザ対応、自動待機機能、並列処理などによりE2Eテストを実施します。また、スクリーンショットの比較によるテスト（VRT:Visual Regression Testing）により視覚的変更も検出可能です。元々Puppeteerを作っていたチームにより開発が行われているようです。 ツールの比較対象にcypressがありますが、最近の週間ダウンロード数はPlaywrightが上回っているようです。 （他にはSeleniumやベンダー提供の有料E2Eテストツールなどもあります） また、Playwri
PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright
PlaywrightによるE2Eテスト入門 / Introduction to E2E Testing with Playwright
SQLocalで拓かれるフロントエンドデータベースの世界
はじめに SQLocalという面白そうなものを見つけたので遊んでみました。 SQLocalとは SQLocalは、WebブラウザでSQLiteを便利に使うためのライブラリです。 軽量RDBMSとして知られるSQLiteは、本来はネイティブなアプリケーションに組み込まれるもので、一昔前まではWebブラウザでは動作しませんでした。しかしWebAssemblyの登場により、コンパイルすればWebブラウザでも動くようになりました。 SQLocalはSQLite公式が提供する@sqlite.org/sqlite-wasmパッケージのラッパーとして、実際にSQLiteをフロントエンドで使う上で必要になってくる機能を提供しています。 例えば、SQLocalはSQLiteのデータベースファイルをOrigin Private File Systemに保存する機能を提供します。Origin Private F
TypeSpec、Orval、Storybook を使ってフロントエンドのモック生成を自動化する
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
OpenAPI Specificationを導入するまでの苦労と失敗、その後の効果 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに 対象読者 TL;DR OpenAPI Specificationとは OASを導入することの何が嬉しい？ 1. プロダクトごとにAPI仕様書を記述するツールやフォーマットがバラバラでスイッチングコストがかかる 2. 記述量が増えると動作が重くなる 3. API仕様変更の伝達漏れの多発 導入までの課題 1. OASの調査に時間をかけすぎた 2. OASのデメリット全てに対応策を講じようとしてしまったこと 導入して１年、開発環境は改善されたのか？ おわりに はじめに ラクスフロントエンド開発2課の斉藤です。 ラクスの開発するプロダクトである楽楽明細、楽楽電子保存、楽楽請求ではOpenAPI Specification（以下OAS）を採用した開発を行っています。 今でこそOASを活用した開発を行うことができていますが、導入にあたっては様々な苦労がありました。 そこで今回は 何故OASを
[WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita
現状、通常のフローでモデルデータを読み込んでそれをそのままジオメトリインスタンシングでレンダリングする方法はないようです。 なので、モデルデータを読み込み、自前で処理する必要があります。 （ただ、ドキュメントも整備されておらず、もしかしたらまだ安定していないかもしれないので、利用する場合は自己責任でお願いします） ちなみに今回の解説用に作ったサンプルはGithubに上げてあります。 （動作デモはこちら） ジオメトリインスタンシングって？ さて、まずジオメトリインスタンシングとはなにか。 WebGLでの詳細についてはエマさんのこちらの記事（WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる）がとても分かりやすく書かれているので読むことをおすすめします。 ざっくり言うと、プログラムで言うところのクラス・インスタンスの関係をジオメトリ
![[WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f1c24267b663eedf241c806f641fc3d2f587ef8e/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTYxNiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTYwMDMwMzY2Mz9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00YWVlZmJkNWZiMmZkYWUyOWM0Yzk5ZDJmOTJiMjZlYQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D39d93af82d0822915255df0c881cf200%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCV2ViR0wlNUQlMjBUaHJlZS5qcyVFMyU4MSVBNyVFMyU4MiVCOCVFMyU4MiVBQSVFMyU4MyVBMSVFMyU4MyU4OCVFMyU4MyVBQSVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MiVCOSVFMyU4MiVCRiVFMyU4MyVCMyVFMyU4MiVCNyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MyVBMiVFMyU4MyU4NyVFMyU4MyVBQiVFMyU4MiU5MiVFMyU4MyVBQyVFMyU4MyVCMyVFMyU4MyU4MCVFMyU4MyVBQSVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPTkwYmJhMGU5OGYzNzJhYTQ3NjZmY2ViZTg1ODllYTU0%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9ODM0NTU3N2U0MjQ2ZTA3MjZjZmFhMTNjYjIwODJkMWE%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dd5c76d6d7a2924be9e6d3908783e508b)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
明日から始めたくなる、フロントエンドのチーム開発における設計のすゝめ
GitLabとOrvalを活用したフロントエンドテスト