【D3.jsで日本地図描画②】GeoJSONとd3.jsを使って日本列島を描画する方法
この記事では、前回の記事「【D3.jsで日本地図描画①】Natural Earth からGeoJSONを作成するスクリプト」で生成したGeoJSONとD3.jsを使用して画面上に日本地図を描画する方法を解説する。この記事の実装は、単なる静的な地図表示ではなく、都道府県のホバー・クリックイベントに対
ようこそ ようこそ
- 新着記事
【D3.jsで日本地図描画①】Natural Earth からGeoJSONを作成するスクリプト
Natural Earth からダウンロードした Shapefile データを使用して、D3.js で表示可能な日本地図データを作成する手順を説明する。私の実行環境はNext.js v15.3.3だが、NuxtやVueでも動作する汎用的な内容になっている。全部で2記事構成になっており、当記
GitHub PackagesからAWS CodeArtifactへ移行した理由とその効果
実務プロジェクトで、複数のプロジェクトで共通して使用するUIライブラリを開発した。その過程で、GitHubを使ったソース管理とAWS CodeBuildによるビルド環境の組み合わせにおいて、npm install時に発生する認証エラーという課題に直面した。固定トークンを利用した認証が企業のセキュリ
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を閲覧できる
