GitHub ActionsでStorybookを自動ビルドし、GitHub Pagesへデプロイする手順
今回の記事は、前回の記事「FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順」の続きの記事になる。前回は、ローカル開発環境でデザイントークンをStorybook化したが、今回はGitHub Pagesへデプロイし、URLアクセスでStorybookを閲覧できる
開発・運用
記事数
49
FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順
この記事では、Figmaで定義したデザイントークンをCSSファイルに自動生成し、その結果をStorybookで視覚的に表示する手順を解説する。前提この記事は、前回記事「FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】」が完了していることを前提に
FigmaのデザイントークンからCSSファイルを自動生成する手順②【GitHub Actions】
今回は、GitHub Actionsを使って、FigmaのデザイントークンからStyle Dictionaryを用いて自動的にCSSとSCSSを生成し、ビルド結果をアーティファクトとして保存する手順を紹介する。1. 前提条件本記事では、Figmaからエクスポートされたデザイントーク
FigmaのデザイントークンからCSSファイルを自動生成する手順①【ローカル開発環境】
この記事では、Figmaのデザイントークンを活用して、CSSファイルを自動生成する方法を紹介する。FigmaからJSON形式でトークンを出力し、Style Dictionaryを使って各プラットフォームで利用できるCSSやSCSSファイルを生成する手順をステップバイステップで解説する。全体
JestのユニットテストをCI（GitHub Actions）で実行する方法【Nuxt3×TypeScript】
Nuxt3とTypeScriptを使用したプロジェクトにJestを導入し、GitHub Actionsでテストを自動化する手順を解説する。この記事では、Jestのインストールから設定、テストの作成と実行、そしてCI/CDパイプラインに組み込む方法までを詳しく説明する。テストカバレッジレポートの確認
E2Eテストの「目的」と「粒度」の決め方
この記事では、複数のプロジェクトでE2Eテストの構築に関わった経験から、E2Eテストの「目的」と「粒度」はどうあるべきか。個人的な主観を書いていきます。これからE2Eテストに取り組む方や、テストの粒度を決めかねている方の参考になれば幸いです。※この記事は、技術的な事実ではなく私の主観を述べ
【チーム開発】E2Eテスト導入と運用をスムーズに進めるために意識していること
この記事では、複数のプロジェクトでE2Eテストの構築に関わった経験から、自分が設計したE2Eテストを、メンバーがスムーズに使えるように意識していることを紹介します。※この記事は、技術的な事実ではなく私の主観を述べているため、他の記事とは表現を変えています。結論: やることの全体像
【Playwright.10】ネットワークインターセプトとモック
この記事では、Playwrightを使用してネットワークリクエストをインターセプトし、モックデータを使ってテストを行う方法を解説する。この技術を活用することで、実際のAPIエンドポイントに依存せずに、安定したテストを実行できる。ネットワークインターセプトとモックの重要性ネットワーク
【Playwright⑨】クロスブラウザとデバイス別のテスト
この記事では、Playwrightを使ってさまざまなブラウザやデバイスでの動作確認を自動化する手法を紹介する。クロスブラウザおよびデバイス別テストは、ユーザーエクスペリエンスの一貫性を保ち、問題を早期に検出するために役立つ。これらのテストを効率的に行うための設定方法と、実際のテストシナリオを具体的
【Playwright⑧】スクリーンショットの撮影と比較
この記事では、Playwrightを使用したスクリーンショット撮影と比較方法を詳しく解説する。ページ全体や特定の要素をキャプチャする基本的なメソッドから、テスト中にUIが期待通りに表示されているかを確認するためのtoHaveScreenshotの使用方法まで、実際のコード例を交えて紹介する。Pla
【Playwright⑦】非同期処理とイベント待機
非同期処理は、UI操作やネットワークリクエストなど、時間のかかる処理を管理するために不可欠だ。E2Eテストにおいても、非同期処理を正確に扱うことで、予期せぬエラーやタイミングのずれを防ぎ、より信頼性の高いテストを実現できる。この記事では、Playwrightを使った非同期処理とイベント待機のテクニ
【Playwright⑥】適切なアサーション: 検証タイプ
適切なアサーションを使いこなすことは、テストの精度と信頼性を高める。本記事では、自動リトライアサーションと非リトライアサーションの違いや、否定マッチャー、ソフトアサーション、カスタムメッセージの活用方法など、テストの幅を広げるさまざまなアサーションの使い方を解説する。公式ドキュメント: h
【Playwright⑤】ファイルアップロードのテスト (Actions)
ファイルアップロード機能のテストは、ウェブアプリケーション開発において重要なステップの一つ。特に、ユーザーが正しくファイルをアップロードできるかどうか、複数ファイルのアップロードやファイルクリア操作が正常に動作するかを確認する必要がある。この記事では、Playwrightを使ってファイルアップロー
【Playwright④】DOM操作を効率化するテクニック (Actions)
Playwrightを使ったテスト自動化では、DOM操作が重要なステップとなる。Playwrightの強力な「Actions」機能を使うことで、DOM要素に効率的かつ正確にアクセスし、操作が可能。本記事では、DOM操作を効率化するためのテクニックを紹介する。具体的には以下のDOM操作に焦点
【Playwright③】 効率的なDOM要素のアクセス方法(Locators)
Playwrightを使ったエンドツーエンド（E2E）テストでは、DOM要素へのアクセスが重要なステップとなる。Locatorsは、Playwrightが提供する強力なツールであり、これを使って正確かつ効率的にDOM要素を操作できる。本記事では、PlaywrightのLocatorsについて詳しく
【Playwright②】認証の自動化 | E2Eテスト
エンドツーエンド（E2E）テストを行う際、認証は避けて通れない課題の一つ。特に、複数のテストケースで毎回ログインを行う必要があると、テストの実行時間が増え、効率が低下する。しかし、Playwrightを使えば、この認証プロセスをキャッシュして使い回すことが可能になる。本記事では、Playw
【Playwright①】E2Eテストの基礎とセットアップ手順
実務のプロジェクトにて「Playwright」をがっつり触る機会があった。これから複数の記事に分けてエンドツーエンド（E2E）テストのノウハウを解説していく。この記事では、まずPlaywrightとは何か、E2Eテストの重要性、Playwrightを既存のプロジェクトにインストールし、サンプルテス
【Express】IAMの一時的な認証情報（STS）を使用してS3にアクセスする
この記事では、ExpressアプリケーションからAWSの一時的な認証情報（STS）を使用してS3にアクセスする方法を解説する。IAMロールを利用した一時的な認証情報の取得から、取得したクレデンシャルを使ってS3バケットにアクセスするまでの手順を具体的に示し、AWSリソースを操作する方法を紹介する。
DockerイメージをGithub ActionsからAWS ECSに自動デプロイする手順
この記事では、GitHub Actionsを使ってAmazon ECSへの自動デプロイを行う手順を解説する。GitHub ActionsからAWSへの安全な接続方法、ECRへのコンテナイメージのプッシュ、ECSサービスの更新までの一連のプロセスを具体的に示し、効率的なCI/CDパイプラインの構築方
【Express.js】AWS SDKを使用したS3へのファイルアップロードと署名URLの取得
この記事では、Express.jsを使用してAWS SDKを利用し、S3バケットにファイルをアップロードする方法と、署名付きURL（Presigned URL）を生成する方法を紹介する。全体像実装の流れパッケージインストール環境変数設定S3に接続す
