【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイムゾーンや言語を指定できる コンポーネントの振る舞いを見るテストに対応できる まとめ 参考 はじめに PlaywrightはMicrosoftが開発・メンテナンスしているCypress、Puppeteerなどと同じE2E自動テストフレームワークとして有名です。 playwright.dev Chromium、Edge、Firefoxなどの複数のブラウザに対応しており、全てに単一のAPIで簡単にテストの実装が可能になっています。 目玉機能
GitHub - toshusai/cmpui: CmpUI is a component library designed for creating complex GUI applications in web browsers.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
前回はこちらで議論できて大変有意義でした、ありがとうございました。 その際、Next.jsでのlayout.tsxとpage.tsxの実行順序についてpage -> layoutの順で実行されることを初めて知ったのですが、疑問に思ったのは「これはReact Server Component（RSC）の仕様なのかNext.js（フレームワーク）の仕様なのか？」ということでした。 素のReactの挙動を理由に自分が思い描いていたのは「コンポーネントはネスト順に実行される」だったのでこれは衝撃的でフレームワークについて何も知らなかったな、と思わせる内容でした。 ここでは、Reactコンポーネントの実行順序を再確認し、RSC、フレームワークについても確認していきます。 Reactコンポーネントの実行順序 ここでの対象はクライアントコンポーネントです。 このようなネストしたツリーを用意しました。Aと
前回の記事の続きです。 前回までは、その1でMapped TypesとConditional Typesを、その2でDiscriminated Union TypeとUnion Distributionを見ていきました。 実をいうと本当に書きたかったのは、本稿の「Reactとそのデザインシステムの実装における型定義」という話でした。しかし、そのための前提がいっぱいあって、三部作という長編になってしまいました。 つまり、ここからが本題です。 前段のTypeScriptのテクニックを活かして、まずButtonのコンポーネントを作っていきます。また、Polymorphic Componentというコンポーネントの汎用性を上げるテクニックを取り上げます。最後に、デザインシステムの実装、共通コンポーネントのインターフェースの設計について簡単に触れて終わります。 TypeScriptで型安全にReac
Matt PocockMatt is a well-regarded TypeScript expert known for his ability to demystify complex TypeScript concepts. React's props model is extremely powerful. One of its most useful features is the ability to pass a component as a prop. This lets you create composable pieces of UI, helping to make your components more reusable. The trouble is that this can often be difficult to type correctly. Le
きっかけ 私は今まで Pages Router でプロジェクトの開発をしてきました。今の所、具体的な新規で開発する案件の話はないけど今後 App Router で開発するときにどうゆうフォルダ構成にすれば良いか悩んだからまとめようかなと思ったのがきっかけです。 環境について node: v18.18.2 npm: 9.8.1 react: 18 系 next.js: 13.5.6 具体的にどんなことに悩んだのか /app の中で style や util 系関数や component なんかも入れた方がいいの？ それとも/app を/pages と同じように扱う方がいいの？ この 2 点です。Private Folders やら Route Groups なんかもあったりして Next.js のファイルベースルーティングはいろんなことが柔軟にできるようになった印象です。 しかし、柔軟だから
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
Storybook is the industry standard workshop for building, documenting, and testing UI components. It’s used by leading development teams at organizations like Shopify, Gov.UK, and NASA. One of the biggest benefits of developing in Storybook is that you get tests for free. Each isolated component example—or “story”—is a UI test. And if you want to test data fetching and user interactions, Storybook
React Server Component のテストと Container / Presentation Separation
Photo by Jon Tyson from unsplashはじめに先日 @takepepe さんと フロントエンドのテストについてパネルディスカッションする機会 があり、その際に一瞬だけ Next.js App Router のテストの話題になりました。 僕自身、最近 Next.js App Router と格闘する日々を送っておりタイムリーな話題であったのですが、イベントの場では時間の都合もありほとんど語らず仕舞いとなってしまいました。 そこで、今回の記事は App Router、特に React Server Component のテストについて、最近考えていたことを吐き出していこうと思います。 要旨この記事では「2023 年 8 月現在で利用可能なツール群で、どのように React Server Component (以下 RSC) をテストしていくのが妥当か」を書いていきます
"use client" は Server Component と Client Component の境界につけよう
🌼 はじめに 最近 Next.js の app Router で開発してて、不思議なワーニングに出会いました。 Props must be serializable for components in the "use client" entry file, "handleClick" is invalid. これがなんなのかがすごく気になり、"use client"について色々調べたので共有したいと思います。 1. "use client" は何なのか "use client"は Server Component と Client Component の境界の宣言です。公式ドキュメントにもそう書いてました。 The "use client" directive is a convention to declare a boundary between a Server and Clie
ちょっとした React Server Component 小ネタ。 Next.js (webpack, Turbopack) で確認しているが、おそらく RSC に対応しているツールであったらどれも変わらないはず。 アプリケーションの package.json の imports セクションに以下のように記載しておく。util の部分は好きな文字列で構わないが # から始めておくこと。 { "imports": { "#util": { "react-server": "./src/util.react-server.ts", "default": "./src/util.default.ts" } } }React Server 環境とそれ以外の環境用、それぞれの実装を用意する。 とりあえず結果が異なることを確認したければ以下のような感じ。 /* ./src/util.default.
React Server Component、そしてqwikのインパクト ー フロントエンドアーキテクチャの最新動向をmizchiさんに聞いてきた(1)
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、フロントエンドのエキスパートmizchiさんに、フロントエンドの最新動向について詳しく伺ってきました。 mizchiさんのアカウントをぜひフォローしましょう！ mizchiさん（フロントエンド兼Node.jsエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております。どしどしお寄せください😊 以下、動画の内容の要約です
Emit が分からない！ Vue.js で ref や computed でのステート管理を学び、コンポーネント間でのやり取りで props を学び、次に emit を学ぼうとするとなんだか難しく感じることがあります。 確かに初学者の方からすると、慣れるまで少し時間がかかるかもしれません。 でも大丈夫です。 この記事では図でのイメージとあなたが既に知っているはずの知識を使って emit を理解するためのヒントを提供します。 基本のキ とりあえず emit の基本をおさらいします。 <!-- ChildComponent.vue --> <script setup lang="ts"> const emit = defineEmits<{ "my-event": [] }>(); function handleClick() { emit("my-event"); } </script> <
WASM Component Modelをまとめてみる
この記事はWebAssembly Advent Calendar 2023 13日目の記事です。 まえおき 本当はもっと発展した記事を書きたかったのですが、進捗ゼロに近いのでこのスクラップの焼き直しです。 また、あれから２ヶ月ほどたって仕様策定も進んでいると思われるのでそのキャッチアップも試みます。 WASM Component Model is 何？ WASMはプログラミング言語非依存なバイナリーフォーマットで、Rustで書いたWASMモジュールをC#からも、Pythonからも利用するということが論理的には可能です。しかし、従来のWASM Core仕様で定義されるモジュール仕様はとてもプリミティブなもので、現実としては「Rustで書いたWASMモジュールをC#からも、Pythonからも利用する」というシナリオを実現するためには実装者がかなりの注意を払う必要がありました。 例えばCore仕
GitHub - vantezzen/auto-form: 🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
AutoForm is mostly meant as a drop-in form builder for your internal and low-priority forms with existing zod schemas. For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done. AutoForm uses @shadcn/ui components as natively as possible with only minimal class overrides. This way, if
この記事はnote株式会社 Advent Calendar 2023の5日目の記事です。 僕はnoteで働いているエンジニアで、主にABテストで改善を繰り返す業務をやりつつ、フロントエンドのリアーキテクチャにも取り組んでいます。 趣味はコーヒーとエレキギターで、どちらも物欲が尽きることはありませんが、最近は新しい焙煎機とエスプレッソマシーンを買いたくてあーでもないこーでもないと悩みながら商品検索を繰り返しています。 Svelteを使っている背景さて、noteではSvelteを使って一部のコンポーネントを実装しています。Svelte自体の詳しい解説は省きますが、開発体験がよくコンパクトなコード にトランスパイルできるUIライブラリです。 現在2023年12月時点でもnoteのフロントエンドの大部分はNuxtで実装されていますが、様々な問題があるためアーキテクチャそのものから見直し、主にNex
FlutterアプリにおけるUI Component Architecture #LayerXテックアドカレ - LayerX エンジニアブログ
こんにちは。バクラク申請・経費精算 ネイティブアプリエンジニアのyoheiです。 最近はこたけ正義感の逆転裁判プレイ動画を見ながら法律の勉強してます。好きなラジオは真空ジェシカのラジオ父ちゃんです。M-1も応援してます！ この記事はLayerXテックアドカレ2023の26日目の記事です。前回は 赤羽さん が「Go言語のORMであるGORMをv1からv2へのマイグレーションした話」を書いてくれました。27日目の記事 id:itkq さんより「勤怠をいい感じにする社内Slackアプリ #LayerXテックアドカレ - LayerX エンジニアブログ」ポストされました。一緒にご覧いただけたらと！ バクラク申請・経費申請では現在のモバイルアプリをFlutterでのリプレースを進めています。そのうえでチームとしてUIコンポーネント(Widget)をどの用に作っていくか設計(UI Component
React Server ComponentでもContextで状態を共有する | フューチャー技術ブログ
Next.jsの最近の大きな目玉機能はReact Server Component(以下サーバーコンポーネント)です。パフォーマンスアップに有効だったり、gRPCだRESTだGraphQLだ論争を終わりにするServer Actionsなど盛りだくさんです。 一方で、サーバーコンポーネントはコーディング上の制約がいろいろあります。 サーバーコンポーネントではhooksが使えない サーバーコンポーネントのソースからクライアントコンポーネントはimportできるが逆はできない。レンダーツリーを工夫すればクライアントコンポーネントの下にサーバーコンポーネントを配置することは可能 サーバーコンポーネントでは非同期コンポーネントを作成でき、fetchでサーバーから情報をとってきたり、DBアクセスした結果を利用できます。しかし、最近のモダンReactの場合、状態管理などはすべてhooksに寄せるので大
JSer.info #688 - zx 8.0.0がリリースされました。 Release 8.0.0 · google/zx パッケージサイズの削減、$.syncの追加、inputオプションの追加、AbortControllerのサポート、killメソッドの追加などが行われています。 そのほかには、$.verboseのデフォルト値をfalseに変更、ssh APIの削除などの変更も含まれています ESLint 9.0.0がリリースされました。 ESLint v9.0.0 released - ESLint - Pluggable JavaScript Linter Node.js 18.18未満のサポート終了、Flat Configをデフォルト化、ビルトインのformatterの一部をパッケージに移動、JSDocのルールを削除、eslint:recommendeddの更新などの変更が行われ
GitHub - andrico1234/the-dilemmas-youll-face: The Dilemmas You'll Face When Creating Your First Component Library
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
RFC: The Next.js "App Router", React Server Component & "SSR with Suspense" story by phryneas · Pull Request #9 · apollographql/apollo-client-nextjs
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
前回までのあらすじ： cargo-componentを使ってWebAssemblyコンポーネント（Wasmコンポーネント）を作りました Wasmtimeで実行しました wasm-toolsを使って作成したコンポーネントのワールドを出力しました 今回の内容： WebAssembly Interface Type（WIT）を使ってWasmコンポーネントのインターフェースを定義します wit-bindgenの力を借りつつ、インターフェースをRustで実装します 実装したWasmコンポーネントをコンポーネントレジストリーに登録します。 用意するもの Rustのツールチェーン cargo-component Wasmtime wasm-tools 前回作成したhello-wasm-cliプロジェクト hello-wasm-cliプロジェクトは次のようなフォルダー構成をしています： . ├── Car
Astro 3.3 is out with a brand new, experimental <Picture /> component, improved compatibility for syntax highlighting, package provenance, and a handful of other quality of life improvements. New <Picture /> component Syntax Highlighting improvements Package Provenance Quality of Life Improvements To take advantage of the latest features, make sure you’re running the latest version of Astro. You c
Next.js@13 と React Server Component と Suspense と GraphQL の @defer, @stream について
React Server Component と Suspense と Next.js@13 ってなんか紛らわしくね React Server Component(RSC) rfc https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md 概要 RSC はサーバー上で実行されるコンポーネントのこと サーバー上で実行されるということで、データベースへの通信などを直接行うことができる コンポーネントはレンダリング結果のみがクライアントに送られるので、秘匿情報などの流出は起こらない 適当に具体例を書くと // 従来の方法(React Client Component, RCC とする) const Page = () => { const { data } = useSWR("/todos/1", () =>
wasi-sdk,wit-bindgenとjcoでWebPに対応した画像diff wasm componentを作成する
Visual Regression Test をサポートする reg-actions をリリースしたという記事のTODOとして挙げたのだが、reg-viz/reg-cliのwasm化とwebp対応を進めたいと思っていた。 今回はその第一歩として画像diffライブラリのwebp/wasm化対応と、その際に躓いた内容などを記載する。 TL;DR webpをサポートした画像diffライブラリをRustで書き、wit-bindgenとjcoでnode.js,denoから使用できるようにした webpのサポートにはlibwebpを使用した 当初はwasm32-unknown-emscriptenで進めていたがComponent化で問題が発生した wasi-sdkを利用し、wasm32-wasiにtargetを変えることでimportをwasi_snapshot_preview1に揃えることで上記を回
デザイナーインターンをしているれいか（@re_ka310）です。 弊社ではインターン生が5名在籍しており、HR・デザインの分野に分かれて日々業務を行っております。 本記事では、社内用Component Libraryを作成した業務について紹介します。「社内デザイナーがいつでも使用可能なComponent Libraryがあると仮で画面作成をする必要がある際にパフォーマンスが上がりそう」という話があがり、インターン生で作成することになりました。 実際に作成したもの作成物は以下からご覧いただけます。 Behance 以下でどのようなプロセスで作成したのか紹介します。 企画UIのコンセプトを決めずに突然Componentのみを作成し始めるのは少々難しいので、架空サービスを企画してそのComponent Libraryという体で制作しました。 ドメイン設定ドメインは教育業界にしました。理由は以下の
Next.js App Router で Client Component を SSR する時に Cookie にアクセスできない問題 - pokutuna
'use client' は Server Component じゃないよという意味で、SSR はする
GitHub - emilkowalski/vaul: An unstyled drawer component for React.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
*]:prose-blockquote:content-none prose-pre:whitespace-pre-wrap [&>*.footnotes]:mt-12 [&>*.footnotes]:border-t [&>*.footnotes>h2]:hidden [&>*.footnotes]:text-sm"> React Server Component, or RSC, was first introduced over three years ago, but is still confusing a lot of us web developers. We know React. We know server. We know component. But somehow putting them together isn’t what React Server Comp
はじめに CPUの進化により、データの処理速度は毎年驚異的な速度で上がっています。それに対し、データをメモリから受け取る速度はここ十数年で数倍程度にしか進化してません。 その結果、プログラムの実行時間の大部分がデータ取得の待機時間に費やされるようになってしまいました。 そこで、キャッシュメモリとCPUの特性を生かし、データ取得の待機時間を減らすことでパフォーマンスの向上を図ろうとしたのがEntityComponentSystem(ECS) です。 今回は、そんなECSをC++で実装してみたので、その基本的な概念から作り方まで解説していこうと思います。 必要な前提知識 この記事はC++を前提に書いてあるので、ある程度のC++の知識があると読みやすいと思います。 また、途中でコンポーネント指向やオブジェクトプール等のデザインパターンが出てくるので、必要に応じて調べながら読んでいただけると嬉しい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React Server Componentの実行順序とフレームワークでの注意点
明日から使えるTypeScriptの応用テクニックその3 -Polymorphic Component編-
How to Pass a Component as a Prop in React
Next.js App Routerの場合componentはどこに置けばいいの？
CSS Modules で作る SVG Icon Component
Portable stories for Playwright Component Tests
Server Component と Client Component で依存モジュールを切り替える
【Vue.js】イメージとアナロジーとヒストリーで理解する Component Emits
noteのSvelte componentを事前ビルドして配布するようにしました｜zochang
2024-04-11のJS: zx 8.0.0、ESLint 9.0.0、Flowの`component`構文
Hello, world! with Wasm Component（ライブラリー編）
Astro 3.3: Picture component | Astro
社内用Component Libraryの作り方 〜デザインインターン生の取り組み〜｜ROUTE06
RSC is React Server + Component | bobae kang
C++でEntity Component Systemを実装してみる