CATEGORY

ようこそ ようこそ

当サイトでは、Vue.js（Nuxt）やReact.js（Next）を活用したフロントエンド開発に関する技術、AWSなどのクラウドサービスとの連携、CI/CD構築、テスト自動化などの運用スキルなど、エンジニアの業務で経験したことを発信しています。このブログがあなたのお力になれば幸いです。 当サイトでは、Vue.js（Nuxt）やReact.js（Next）を活用したフロントエンド開発に関する技術、AWSなどのクラウドサービスとの連携、CI/CD構築、テスト自動化などの運用スキルなど、エンジニアの業務で経験したことを発信しています。このブログがあなたのお力になれば幸いです。

  1. 新着記事
  • Vue.js

個人的なVue.jsコンポーネント設計のベストプラクティス

Vue.jsを使ったフロントエンド開発において、コンポーネント設計は常に悩ましい課題です。単一責任の原則やAtomicデザイン、細かい分割の是非など、多くのアプローチがありますが、正解はありません。しかし、ルールがないとプロダクトの品質が低下するリスクがあるため、「指針」が求められます。

  • コンポーネント設計・テスト
  • テスト

E2Eテストの「目的」と「粒度」の決め方

この記事では、複数のプロジェクトでE2Eテストの構築に関わった経験から、E2Eテストの「目的」と「粒度」はどうあるべきか。個人的な主観を書いていきます。これからE2Eテストに取り組む方や、テストの粒度を決めかねている方の参考になれば幸いです。※この記事は、技術的な事実ではなく私の主観を述べ

  • Playwright
  • テスト

【チーム開発】E2Eテスト導入と運用をスムーズに進めるために意識していること

この記事では、複数のプロジェクトでE2Eテストの構築に関わった経験から、自分が設計したE2Eテストを、メンバーがスムーズに使えるように意識していることを紹介します。※この記事は、技術的な事実ではなく私の主観を述べているため、他の記事とは表現を変えています。結論: やることの全体像

  • Playwright
  • テスト

【Playwright.10】ネットワークインターセプトとモック

この記事では、Playwrightを使用してネットワークリクエストをインターセプトし、モックデータを使ってテストを行う方法を解説する。この技術を活用することで、実際のAPIエンドポイントに依存せずに、安定したテストを実行できる。ネットワークインターセプトとモックの重要性ネットワーク

  • Playwright
  • テスト

【Playwright⑨】クロスブラウザとデバイス別のテスト

この記事では、Playwrightを使ってさまざまなブラウザやデバイスでの動作確認を自動化する手法を紹介する。クロスブラウザおよびデバイス別テストは、ユーザーエクスペリエンスの一貫性を保ち、問題を早期に検出するために役立つ。これらのテストを効率的に行うための設定方法と、実際のテストシナリオを具体的

  • Playwright
  • テスト

【Playwright⑦】非同期処理とイベント待機

非同期処理は、UI操作やネットワークリクエストなど、時間のかかる処理を管理するために不可欠だ。E2Eテストにおいても、非同期処理を正確に扱うことで、予期せぬエラーやタイミングのずれを防ぎ、より信頼性の高いテストを実現できる。この記事では、Playwrightを使った非同期処理とイベント待機のテクニ

  • Playwright
  • テスト

【Playwright⑥】適切なアサーション: 検証タイプ

適切なアサーションを使いこなすことは、テストの精度と信頼性を高める。本記事では、自動リトライアサーションと非リトライアサーションの違いや、否定マッチャー、ソフトアサーション、カスタムメッセージの活用方法など、テストの幅を広げるさまざまなアサーションの使い方を解説する。公式ドキュメント: h

  • Playwright
  • テスト

【Playwright⑤】ファイルアップロードのテスト (Actions)

ファイルアップロード機能のテストは、ウェブアプリケーション開発において重要なステップの一つ。特に、ユーザーが正しくファイルをアップロードできるかどうか、複数ファイルのアップロードやファイルクリア操作が正常に動作するかを確認する必要がある。この記事では、Playwrightを使ってファイルアップロー

  • Playwright