こんにちは、LINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしている板井（@itatchi3_）です。 LINEヤフーでは、社員が海外のカンファレンスや学会に参加することを支援する制度があります。これを通じて、最先端技術の情報収集や現地の温度感の調査を行い、得た知見を会社に持ち帰ることで、全社的な技術力向上に努めています。 この制度を活用し、2024年5月13日と14日にアメリカ・サンフランシスコ州マウンテンビューで実施された「Google I/O 2024」に現地参加してきました。 現地のエンジニアと実際に触れ合った中で、その熱意の高さからも重要であると感じ、さらにLINEヤフーでも導入の検討が進められているフロントエンド技術について解説します。 Built-in AI 兎にも角にもAI一色の「Google I/O 2024」でした。AI関連の発表が
Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
Cloud Nativeを支える要素技術・プロダクト・プラクティスの歩み / infrastudy-returns-01-amsy810
フロントエンドの Monorepo をやめてリポジトリ分割したワケ / Why did we stop using Monorepo on the frontend and split the repository?
2024/06/25： モノレポは、令和のソフトウェア開発における銀の弾丸か？ https://hack-at-delta.connpass.com/event/319792/ フロントエンドの Monorepo をやめてリポジトリ分割したワケ 坂井 学 ソフトウェアエンジニア
RUM ブラウザモニタリング
製品 { this.openCategory = category; }, 160); }, clearCategory() { clearTimeout(this.timeoutID); } }" x-init=" const menu = document.querySelector('.product-menu'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.attributeName === 'class' && !mutation.target.classList.contains('show')) { openCategory = 'observability'; } }); }); observer.
「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となりました
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
はじめに GraphQLを用いたフロントエンド開発は多くなってきているように思います。 フロントエンドから柔軟にデータを取ってくることができるということは、今までバックエンドが担保してきていた部分をフロントエンドが担わないといけなくなった ということを意味します。 保守性をちゃんと考えないといけない。 ということですね。 今回は、Fragmentについての話 Fragmentとは？ GraphQLにおけるFragmentとは複雑なクエリを小さくまとめ上げるために生み出されました。 これはとてもComponentの概念に似ていますね。 僕たちはComponentという小さな単位に分割し、それを組み合わせることで複雑なアプリケーションを構築しています。 これと同じです。 データをFragmentという小さな単位に分割し、複雑なクエリを役割ごとに分割してやろう。 という話です。 どうやって実現す
こんにちは！ 本記事は2021年度の「株式会社カケハシ x TypeScript」アドベントカレンダーの10日目の記事として執筆いたしました。 私が、最近設計開発するWebAppではOpenAPIを活用しており、本記事では実践している知見が共有できればと思います！ OpenAPIとは ご存知の通りOpenAPI は、プログラミング言語に関係なくAPIの仕様を定義するための仕様です。デモとしては Swagger Editor のページが有名です。 OpenAPIの成り立ちとしては、元々SwaggerというAPI定義仕様とツール群がありましたが、こちらの通り 2015年ころ、ベンダー依存しないオープンなプロジェクトに拡張するためSwaggerのスペックをベースに構築されたAPI定義仕様がOpenAPIです。その後 数々のツール が開発されています。 OpenAPIの記述方法は json, ya
フロントエンド開発のためにモックサーバーを使いたかった フロントエンドのAPI実装をするにあたって、モックサーバーを作るためのツールを検索していたら、API仕様書作成ツールのSwaggerのサードパーティ製ライブラリのSwagger Studioで作成した仕様書のモックサーバーを簡単に利用できることを知った。 元々モックサーバー用のライブラリであるPrismが統合されているらしい。 GUIで直感的にAPI定義できる SwaggerではAPI仕様書をyamlファイルを書いて作成していくが、Swagger Studioを利用するとGUIで直感的に操作して定義を作成しそのコードを出力することができる。 実際に操作してみる まずアカウントを作成ます。 API Design & Documentation Management | Designing & Building OpenAPIs 自分のワ
はじめに 以下記事を読んで、OpenAPI Specをもっとフロントエンド側で活用できたら良いなと思いました。 そこで、同じようにGitHub Actionsを使って、GitHub PagesにReDocを配置、Mock Server（Prism）をCloud Runへデプロイしてみることにしました。 なお、Mock Server（Prism）のデプロイ先をCloud Runにしたのは、最小インスタンスを0にする（つまり、アクセスが無い時はインスタンスが落ちている状態にできる）ことができ、課金を抑えられると思ったからです。 ReDocとは？ ReDocは、OpenAPI Specからドキュメントを生成してくれるツールです。 同じようなツールで、Swagger UIもありますが、Swagger UIはリファレンス要素が強く、ReDocはガイド要素が強い（見易さ重視）印象を受けました。そのため
概要 GraphQLでクライアントの開発をしており下記のような理由からモックサーバーが欲しくなりました。 バックエンドの開発を待たずにGraphQLのSchemaベースで非同期でフロントエンドの開発を行いたい テスト用にAPIのモック サクッと良い感じにモックサーバー建てられないかな〜と思って調べてみました。 作りたいもの GraphQLのSchemaを正にして、可能な限り自動で型セーフなMSWのハンドラ＋データ作成関数を作りたい。 これによってShemaの変更に対してモックサーバもすぐに追随できる＋モックサーバのメンテナンスもしやすいのかなと思いました。 ざっくりと導入手順 下記にやったことをざっくりと書いていきます。 まず、下記のようなGraphQL SchemaとQueryがあると仮定します。 Schema type Query { getUser(id: ID!): User }
SvelteKitでスキーマ駆動的な - Qiita
やりたかったこと Svelte公式チュートリアルのfetch(uri)の代わりに、 OpenAPI定義から自動生成した型定義されたTypescriptコードを使ってバックエンドと通信したい タイトルに書いてしまったけどスキーマ駆動という語が妥当なのかはよくわからない... 調べ方が悪いのかやろうとする人にとっては当然の内容なのか、調べても出てこなかったので備忘録として やったこと 公式チュートリアルを一通り眺めた状況からスタート SvelteKitの準備 API定義からコード生成 実装 SvelteKitの準備 viteってビルドツールが全部やってくれた(全部Yes) > yarn create vite √ Project name: ... sample √ Select a framework: » Svelte √ Select a variant: » SvelteKit ↗ √
はじめに こんにちは。READYFOR のプロダクトエンジニアのもっさんです。 この記事は「READYFOR Advent Calendar 2022」の 12 日目の記事です。 概要 READYFORでの機能開発 READYFOR では、新規・追加開発を行う際、スキーマ駆動開発を利用して開発を進めています。 スキーマの定義には OpenAPI を利用していて、定義の yaml ファイルをメンバーで相談しながら作成後、その定義を元にフロントエンドとバックエンド分かれて実装を進めています。 フロントエンド領域でのスキーマ利用 フロントエンドでは TypeScript で開発をおこなっているので、この定義をもとに型定義ファイルを作成、実装を行なっています。 READYFOR のフロントエンドでは、SPA またはマイクロフロントエンドがコンテキストごとにいくつか分かれて存在しています（SPA ま
運ゲー化していた動的UIのテストをリトライするためにrspec-retry_ex gemを導入しました - Qiita
発生した問題 私たちが扱うプロダクト内では、ユーザーの入力値に基づき表示が変化する動的なUIが存在します。 このフロントエンドのテストはRSpecを用いて行っていました。 しかし、このような動的UIの自動テストは、何回かに1回の確率で落ちてしまい、GREENになるかどうかがある意味「運次第」となる傾向がありました。 問題が発生することの課題 変更していない箇所に対してテストが落ち、CIツールの画面上で「Retry」をすることは開発スピードの足を引っ張ります。 そこで、落ちやすいテストに関して自動でリトライしてくれるgemを導入しました。 対象となるテスト example '試算ができないこと' do visit('/try/input') fill_in('simulation_postcode_1', with: '100') fill_in('simulation_postcode_2
nuxt-typed-vuexを使ったページコンポーネントを（苦しまずに）単体テストするためのTips - Qiita
はじめに これは以下の全てに当てはまる人向けの記事です。 Nuxtでも型推論の恩恵を得るためにnuxt-typed-vuexを導入している nuxt-typed-vuexを利用したページコンポーネントの単体テストを書こうとしている 元々はページコンポーネントが肥大化しそうだったため、リファクタリングを通じて処理の責任分割をしようと思ったのが発端です。 ただページコンポーネントが状態に応じて細かく表現を変える実装になってしまっており、「まずはページコンポーネントが意図通りに動くこと」を担保するため、ページコンポーネントの単体テストに手を出した次第です。 その際に幾つかの問題が発生したので、その内訳と対処法を残しておきます。 ※ リファクタリングの話、Vueのテスト方法、nuxt-typed-vuexが何ぞやという話はしませんのでご注意下さい 前提 環境 パッケージ バージョン
単体テストは奥が深い テストコード書いてみたいな、ということで以下の作ったものを対象に、テストケースとテストコードを作成したため、そのプロセスを記事にする。単体テストは難しいし、奥が深い... github https://github.com/doz13189/rui-vue3 URL https://rui-vue3.web.app/ 環境 Vue.js https://github.com/vuejs/vue-next Jest https://github.com/facebook/jest vue-test-utils https://github.com/vuejs/vue-test-utils-next 単体テスト対象 単体テストは、Search.vue を対象に実施する。Search.vue に実装されているイベントを確認する。 初期表示 入力ボックスに検索キーワードを入力
Vue3 で単体テストを記述する - Qiita
はじめに 本記事では Vue3 で構築したコンポーネントに単体テストを実装する方法について解説します。 課題 従来、ウェブサービスのページ内容はサーバーサイドで動的生成されたHTMLにjQuery等でクライアントサイドでインタラクティブ性を付加する実装が一般的で、ブラウザに表示された内容の単体テストの実装はほぼ不可能でした。 Seleniumで出来るじゃないか、という人もいるかもしれませんが、あれは基本的にプログラムで普通のブラウザを自動制御する技術であり、サービス全体のページ遷移テストには使えるかもしれませんが、各ページごとの表示内容のチェック用として実装に手間がかかりすぎ、なおかつ実行速度も極めて遅く、しかもシステムの改変に極めて弱いためおよそ実用とは言えない代物でした。 現在の環境 現在ではVue.js、React、Angular.jsなど、アプリ構築が構造化され自動化された高度なフ
はじめに ReactTestingLibrary(RTL)を利用する際に、要素を取得する方法をまとめました。本記事では単純にレンダリングのテストを行っているだけに留まりますが、RTLを使ってテストを始める取っ掛かりとして参考になればと思います。 対象読者 Reactで開発してて、これからテストを導入したい人 サンプルリポジトリはこちらです(参考程度に) ① テストファイルの中でコンポーネントをレンダリングする。 RTLは、Render結果であるDOM構造をテストするので実際のユーザー行動に近いテストをし易いのが特徴です。 コンポーネントのユニットテストをするには、まずはテストファイル内にコンポーネントをimportしてレンダリングしてあげる必要があります。そのためには、render関数を使用します。 render 任意のJSXを受け取ってレンダリングする関数です。 render関数実行後、
はじめに この記事では、Vitest というテストフレームワークで localStorage がどのように動作をするか確認していきます。 開発環境 開発環境は以下の通りです。 Windows11 VSCode TypeScript 4.9.5 React 18.2.0 Vite 4.1.5 Vitest 0.34.5 jsdom 22.1.0 テスト対象コードの実装 テストを実装する前に localStorage を利用したテスト対象となるコードを実装します。 export const BOOK_IN_RENTAL_KEY = "book-in-rental"; export const getBookInRental = () => localStorage.getItem(BOOK_IN_RENTAL_KEY); export const setBookInRental = (book
はじめに 前回はkarateを使用してREST APIのテストを書きました。次はWebUIのテストの書き方をまとめます。REST APIの書き方とほとんど同じなので、前回と今回の2つを合わせるとkarateの魅力を感じられると思います。 環境 IntelliJ：2020.1.3 Java:11 Gradle:7.0 環境作成 前回の環境作成と同じなので、そちらを確認してください。 テストソースの作成 前回と同様karateを使用するので、必要なものはJavaファイルとfeatureファイルの2つで変わりません。 Javaファイルの作成 Javaファイルは前回とほとんど同じです。ただ、今回はテスト前に環境変数をリセットするようにしていますが、あまり関係ないです。（最終的には設定ファイルで設定するはずです） package com.karate.ui; import com.intuit.ka
Karate とは？ Gherkin記法で記載するテストフレームワークです。 元々はWeb APIのテストフレームワークでしたが、いつのまにかブラウザ操作や画像データを利用したGUIのテスト、さらにコマンドラインも実行できるようになっていました。 そこで、Karateを使ってブラウザやAPI、CLIツールを使ったRedmineのテストをしてみます。 以下をKarateで操作します。 Chromeで、Redmine にログイン Chromeで、設定ページから「RESTによるWebサービス」を有効化 Chromeで、個人設定のページを開きAPIアクセスキーを取得 REST APIで、取得したAPIアクセスキーをつかって、チケットを作成 Redmineのコマンドラインツールで、作成したissueを確認 実際のテストコードは以下になります。シンプルに可読性よくかけます。 雰囲気で何をやっているか読
E2Eテストの自動化観点でのブラウザ操作のけるSelenium周りの言葉の定義と関連事項の整理 - Qiita
概要 似たような言葉があって混乱したので、整理することを目的としたメモ。 あくまでも私が理解し易い視点、であることに注意。 Webアプリケーションの画面に対するE2Eテストの実行を自動化する実装場面が検討の対象。テストコードとノーコードツールで分岐することを検討したうえで、テストコードでの実装を選択する。その実装に用いるライブラリを比較検討する中で、Selenium周辺の言葉の定義の整理を目的とする。 ツールの比較そのものではなく、言葉の整理が目的であることに注意。 整理の起点 次の通り。 E2Eテストとして、WebアプリケーションのUIに対する機能テストを対象とする テストを自動化することは、つまりコマンドラインから実行出来ること、を意味する コマンドラインからUIテストを実行する方法として、次の2つがある (A) テストコードを用いて、ブラウザーを操作するためのAPIを呼び出す (B)
著者の自己紹介 著者はイナバくん。 株式会社ニジボックスのフロントエンドエンジニア。 登山家でもあり、禁煙家でもあります。 某アパレル企業に2年ほど常駐していて、自社プロダクトを開発しております。 この記事で話すこと GitHub Actionsを使ってVRTを実現する方法をお話しします。 この記事で話さないこと VRTとは何か？ について GitHub Actionsの基本的な使い方や文法について storycap・reg-suitなどの基本的な使い方について また、VRTの構成として有名な下記のサービスたちは使っていません。 Chromatic: Storybookのホスティングサービス AWSのS3: VRTのスクショやレポートのアップ先としてよく使われます あくまでGitHubのみでVRTを実現する方針となります。 VRT導入の背景 私の参画しているプロダクトでは、フロントエンドは
PlaywrightでVisual Regression Test実装する＋便利そうなオプションの紹介 - Qiita
✔ Do you want to use TypeScript or JavaScript? · TypeScript ✔ Where to put your end-to-end tests? · tests ✔ Add a GitHub Actions workflow? (y/N) · false ✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true 下記のファイルを指定階層(playwright_vrt)にインストールできます、これでplaywrightのインストールは完了です。playwright.config.ts内でデフォルトでChormium,Firefox,Webkit環境でのテストが指定されていますのでテスト内容によってここを修正する
はじめに 自己紹介 こんにちは。 ミツモアのQAエンジニアの山本です。 1人目のQAエンジニアとしてチームを立ち上げ、現在はミツモア, MeetsOneの2つのプロダクトのQA全体のリーダーとして日々プロダクトに向き合いつつ、楽しく働いています。 ミツモアは「テクノロジーでシンプルに」をバリューとしており、継続的インテグレーションとリグレッションテストの効率化の観点からE2E自動テストを重視しています。 QAチームでは全員が手動テストも自動E2Eテストも行っており、今年は安定性向上や自動テスト実行スピードアップ, 安定性向上などを狙ってAutifyからPlaywrightへ移行しました。 今回はPlaywrightで秒数指定wait処理のハードコードを避けてスマートにする方法をご紹介します。 よくあるwait処理の悪い例 await page.locator('input[name="em
はじめに 社会人10年目になり、ソフトウエア開発系の会社に転職したはいいものの、「コーディングまるでわからん(´・ω・｀)」状態に陥ってしまった中の人です。 前職の会社もソフトウエア開発系ではあったものの、社会人4年目くらいから転職するまで、ずっと開発もしなけりゃ設計もしない、そんな別の会社に出向していたので、VSCode すら触ったことがありませんでした。 CSS とか JavaScript とか HTML とか学んではみましたが、やはりちんぷんかんぷん。一から作り上げることの難しさを痛感したものです。 見かねた上長が、助け舟を出してくれて、とあるテスト自動化ツール使ってみてほしいと言ってくれました。 ツール何使ったの Playwrightをとりあえず使ってみました。 社内の勉強会で紹介されていたというのと、上述した上長からの勧めでとりあえずこれからはじめてみました。 Playwrigh
Storybook + CodeBuild + PlaywrightでVisual Regression Testをやってみた - Qiita
Storybook + CodeBuild + PlaywrightでVisual Regression Testをやってみたテスト自動化フロントエンドstorybookVisualRegressionTestPlaywright 概要 フロントエンド開発をしていると、「コンポーネントのUIに意図しない変更が反映されていないか」と気になることが何度かあります。 しかし数多くあるコンポーネントを一つずつ目視で確認するのは骨が折れますね... そこでGitHubにpushするたび、自動的にUIの差分の有無を確認できるテスト（Visual Regression Test）をできるように設定します！ 使用技術 Storybook Playwright reg-suit Slack Webhook AWS CodeBuild S3 CloudFront
Rails 7 でのログアウト処理問題とその解決策 Railsアプリケーションで以下のようにログアウトリンクを設定している場合、 <%= link_to 'ログアウト', destroy_user_session_path, data: { turbo_method: :delete } %>
はじめに 今回はstimulusの状態管理についてドキュメントを見ながら学んでいきます。 過去回↓ 第1回：ゼロから始めるstimulus入門1(ファーストコンタクト) 第2回：ゼロから始めるstimulus入門2(現実的なものを作る) 第3回：ゼロから始めるstimulus入門3(古いブラウザを考慮した設計) 状態の管理 最近のフレームワークのほとんどは、常に JavaScript で状態を維持することを推奨されていますが、stimulusではDOM内の属性として状態が存在します。 この方法によって、最初のHTMLドキュメント、Ajaxリクエスト、Turboのページ遷移、さらには他のJavaScriptライブラリなど、どこからでも HTML を操作でき、明示的な初期化手順なしで、関連付けられたコントローラーが自動的に起動するようです。 スライドショーの作成 スライドショーの実装を例に、学
はじめに 今回はstimulusで外部リソースとの連携についてドキュメントを見ながら学んでいきます。 過去回↓ 第1回：ゼロから始めるstimulus入門1(ファーストコンタクト) 第2回：ゼロから始めるstimulus入門2(現実的なものを作る) 第3回：ゼロから始めるstimulus入門3(古いブラウザを考慮した設計) 第4回：ゼロから始めるstimulus入門4(状態の管理) 外部リソースとの連携 コントローラーが外部リソースの状態を追跡しないといけない場合があります。 （「外部」とは、DOMやStimulusの一部ではないものを指す） 例えば、HTTPリクエストを発行し、そのリクエストの状態が変わるごとに応答する必要がある場合があります。また、タイマーを開始し、コントローラーが接続されなくなった時に停止する必要がある場合もあります。 そのような場合のstimulusでの実装をやって
Rust UIライブラリ「Dioxus」をReact+Typescriptと比較してみた - Qiita
はじめに これは 株式会社 RetailAI X Advent Calendar 2022 の 9 日目の記事です。 前回は MLエンジニアである@atsukishさんの【MLOps】Vertex AIによるモデルモニタリングサービスの構築でした。 本日は「Rust UIライブラリ「Dioxus」をReact+Typescriptと比較してみた」です。 フロントエンドエンジニアの私は最近Rustに興味を持っているのですが、自分の特に興味のあるフロントエンド分野で学習できるライブラリ等がないかと探していたところDioxusを見つけました。 Reactを触ったことがある方なら割と違和感なくRustの学習ができるのではないかと思いましたので共有します。 Dioxusとは？ DioxusはRustでGUIアプリケーションを構築できるクレート（Rustの世界ではライブラリ、フレームワークのことをクレ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google I/O 2024 注目のフロントエンド技術
全社的な生成AI活用プラットフォームとしての Difyの導入事例紹介
Vite ってよく聞くけど何なんですか？ あれは
TypeScript 5.5 で追加された正規表現構文チェックを理解する
【フロントエンド】GraphQLを導入する時はFragmentを理解しよう - Qiita
Server-Sent Events を複数パターンで実装して理解を試みる
Code Firstで疲弊しないOpenAPI活用方法 - Qiita
Swagger StudioでAPI仕様書の作成とモックサーバー利用してみた - Qiita
GitHub Actionsを使ってAPI設計をフロントエンドと共有する話 - Qiita
GraphQLのSchemaを元にサクッとモックサーバーを作る - Qiita
Apollo ClientでのSuspense対応について - Qiita
コードを書きたくないのでコードを書くコードを書いた話 - Qiita
Turbo✖️Stimulusを使用したモーダルでのレビュー機能を実装してみた - Qiita
JS書けないけど非同期処理はTurbo Framesで作れる - Qiita
rails、importmapの初めの一歩はstimulus - Qiita
フロントエンド( Vue )の単体テストのテストケース作成とテストコード作成 - Qiita
React Testing Libraryで要素を取得する方法 - Qiita
Vitest で localStorage の単体テストを実装する - Qiita
karateでWebUIのテストをする。seleniumとのソース比較も - Qiita
Web UIとWeb APIとCLIをまとめてKarateでテストする - Qiita
GitHub ActionsのみでVRTを実現したい人へ - Qiita
Playwrightで秒数指定wait処理を避けてスマートにする - Qiita
テスト自動化ツールのPlaywrightについて学んだ結果 - Qiita
viteとimportmapの競合による期待しないHTTPメソッドの挙動の解消について - Qiita
ゼロから始めるstimulus入門4(状態の管理) - Qiita
ゼロから始めるstimulus入門5(外部リソースとの連携) - Qiita
Tauri + Svelte + Milkdown でマークダウンエディタを作った - Qiita