GitHub PackagesからAWS CodeArtifactへ移行した理由とその効果
実務プロジェクトで、複数のプロジェクトで共通して使用するUIライブラリを開発した。その過程で、GitHubを使ったソース管理とAWS CodeBuildによるビルド環境の組み合わせにおいて、npm install時に発生する認証エラーという課題に直面した。固定トークンを利用した認証が企業のセキュリ
Ei2faJSDbTPC
記事一覧
記事数
158
GitHub Actions→AWS CodeArtifactへPushする手順【OIDCを使用】
実務のプロジェクトでUIライブラリを開発し、その成果物をGitHub Actionsでビルドし、CodeArtifactにPushするワークフローを構築した。その忘備録として記載する。必要な手順GitHub ActionsからAWS CodeArtifactへPushするためには、
【Storybook GitHub Actions】 “Failed to load native binding” エラーを解決する方法
npm run build-storybook を実行した際、ローカルでは正常に動作するものの、GitHub Actions のワークフロー上で以下のエラーが発生する場合があった。Error: Failed to load native bindingat Object.<anon
React MUIのテーマを永続化する方法 | Next.js、TypeScript使用
MUI（Material-UI）を使用するReactプロジェクトで、ユーザーが選択したテーマ（ライトモード・ダークモード）をページ遷移後も維持する方法を解説する。テーマの永続化により、リロードやページ遷移時にデフォルトの状態に戻る問題を解決できる。動作確認環境@mui/mater
react-beautiful-dndを使ったドラッグ＆ドロップ並べ替え機能【ReactとTypeScriptで実現】
本記事では、react-beautiful-dndを使用して、ドラッグ＆ドロップの並べ替え機能を実装する方法について解説する。react-beautiful-dndは、Reactで簡単にドラッグ＆ドロップの機能を追加するためのもので、並べ替えやリストの管理に適している。react-beautifu
【フロントエンドセキュリティ①】XSSの脅威と防止策の基礎知識
XSS（クロスサイトスクリプティング）は、ウェブアプリケーションにおける代表的な脆弱性の一つであり、これを適切に対策しなければ重大なリスクを引き起こす。この記事では、XSSの概要や攻撃事例、どのようなリスクが伴うかを明確にし、具体的な対策を示す。XSSとはXSSは、悪意のあるスクリ
エンジニアの数が足りないから失敗するのではなく、質が足りないから失敗する
「エンジニアを増やしても、プロジェクトが思うように進まない」これは、多くの企業が直面する問題です。安価なエンジニアを複数雇用しても、結果的に開発が進まない、品質が上がらないと感じているマネージャーや経営者の方もいらっしゃるのではないでしょうか。これは、いわゆる「安かろう悪かろう」という問題
フリーランスエンジニアを直接採用することで実現するチーム強化と確実な成果
社内のエンジニアが疲弊し、スピード感を求められるプロジェクトが次々に増えていく中で、貴社も同じような課題を抱えていないでしょうか？新しい技術導入やリソース不足によるプロジェクトの遅延、そしてその度に増えていく残業の負担…これらの問題は、一時的な対応だけでは根本的な解決には至りません。これま
【Express.js】リクエスト制限（レートリミット）設定
この記事では、express-rate-limitミドルウェアを利用してリクエスト数を制限する方法について解説する。express-rate-limitとはexpress-rate-limitは、同一IPアドレスからのリクエストを制御する仕組みを提供する。これにより、特定のIPアド
GitHub ActionsでStorybookを自動ビルドし、GitHub Pagesへデプロイする手順
今回の記事は、前回の記事「FigmaのデザイントークンからCSSファイルを自動生成し、Storybook化する手順」の続きの記事になる。前回は、ローカル開発環境でデザイントークンをStorybook化したが、今回はGitHub Pagesへデプロイし、URLアクセスでStorybookを閲覧できる
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ファイルを生成する手順をステップバイステップで解説する。全体
個人的なVue.jsコンポーネント設計のベストプラクティス
Vue.jsを使ったフロントエンド開発において、コンポーネント設計は常に悩ましい課題です。単一責任の原則やAtomicデザイン、細かい分割の是非など、多くのアプローチがありますが、正解はありません。しかし、ルールがないとプロダクトの品質が低下するリスクがあるため、「指針」が求められます。
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
