Engineering
the Modern Web.
nextTickと非同期のライフサイクルの実行順序（Nuxt 3）
NuxtのnextTickと非同期のライフサイクルの実行順序について解説しています。実例としてcreatedが非同期の場合に意図しない挙動になることがあり、その原因を実際のコードを用いて解説しています。
Nuxt 3 × Storybook 8 × Vitestでインタラクションテストを実行する
Storybook 8でインタラクションテストの実装方法とテストランナーとしてVitestを利用してテストを実行する方法を記載しています。サンプルとしてNuxt 3のプロジェクトを使用しています。
Nuxt 3 × Storybook 8 にMSWの2系を導入する
Storybook 8にMSWの2系をインストールする方法を記載しています。サンプルとしてNuxt 3のプロジェクトを使用しています。
Nuxt 3にStorybook 8を導入して環境を構築する
Nuxt 3のプロジェクトにStorybook 8をインストールして環境を構築する方法を記載しています。Storyの作成やNuxt 3の自動インポートの連携方法も記載しています。
Spring Boot × MyBatisでH2 DataBaseをインメモリで利用する
Spring Bootプロジェクトで MyBatisを使用してH2 DataBaseをインメモリで利用する実装を記載しています。Javaは21を使用しています。
JUnit 5 × MyBatis × DBUnitでRepositoryのユニットテストを実装する
JUnit 5 とMyBatis、DBUnitを使用するSpring BootプロジェクトでRepositoryの動作を確認するユニットテスト(UT)の実装を記載しています。Javaは21を使用しています。データベースにはH2 Databaseを使用しています。
JUnit 5 × Java 21で@ExceptionHandlerのユニットテストを実装する
Java 21とJUnit 5を使用するSpring Bootプロジェクトで@ExceptionHandlerの動作を確認するユニットテストの実装を記載しています。
Nuxt 3でeslintrcとPrettierからFlat ConfigとESLint stylisticに移行する
Nuxt 3プロジェクトでeslintrcとPrettierからFlat ConfigとESLint stylisticに移行する手順を記載しています。VSCodeの保存時の自動フォーマットの方法も併せて記載しています。
GitHubのプロフィールにコントリビューションを食べるヘビを追加する
GitHubのプロフィールにコントリビューションを食べるヘビを追加する方法を記載しています。GitHub Actionsを使用するのでworkflowの実行方法も解説しています。
Spring Boot 3 × Java 21にGradleでCheckStyleを適用する
IntelliJ IDEAでJava 21のSpring Boot 3プロジェクトにGradleでCheckstyleの解析を実行する方法を記載しています。Java 21の初期設定からGradleの設定、Checkstyleの導入までの一連の流れを解説しています。
Nuxt 3 × Storybook 7にTailwindCSSを導入する方法
Nuxt 3の既存プロジェクトにインストールしたStorybook 7にTailwindCSSを導入する方法を記載しています。NuxtプロジェクトへのTailwindCSSのインストールからStorybook 7へのTailwindCSSの適用方法までを解説しています。
Nuxt 3 × Storybook 7で自動インポート（関数・コンポーネント）の設定をする
Nuxtが関数やコンポーネント（components配下が対象）に対して行う自動インポート（Auto import）をStorybookにも適用してStoryを作成する方法を記載しています。
Nuxt 3 × Storybook 7でPiniaを利用したStoryを追加する
Nuxt 3のプロジェクトでPiniaを利用しているVueファイルのStoryを作成する方法を記載しています。Storybookはバージョン7を利用しています。
Nuxt 3にStorybook 7を導入する方法
Nuxt 3のプロジェクトにStorybook 7をインストールして環境を構築する方法を記載しています。Storyの作成と動作確認の方法も記載しています。
Next.js 13 × SonarQubeでソースコードの静的解析と品質管理を行う方法
Next.js 13でSonarQubeを利用してプロジェクトの解析を行い、バグの発見やテストのカバレッジを表示する方法を記載しています。
Next.js 13 × Vitest × Testing Libraryで単体テストの実行とカバレッジを取得する
Next.js 13でVitestとReact Testing Libraryを利用して、Client ComponentsとServer Componentsの単体テストの実行とカバレッジを取得する方法を記載しています。
Next.js 13 × SWR × Route Handlersでデータを取得する
Next.js 13のClient ComponentsでSWR（axios）とRoute Handlersを利用して、クライアントサイドから外部サイト経由でデータを取得する方法を記載しています。
Next.js 13にPrettierとESLintを導入する
Next.js 13のプロジェクトにPrettierとESLintを導入する方法を解説しています。
Nuxt 3 × PuppeteerでE2Eテストを実施する
Nuxt 3プロジェクトでVeeValidate 4を利用した入力フォームに対してPuppeteerを使用したE2Eテストを実施する方法を記載しています。
Nuxt 3 × Piniaでストアの単体テストを実行する
Nuxt 3プロジェクトでPiniaを使用して実装したストアの単体テストコードを作成し、Vitestによるテストを実行する方法を記載しています。
Nuxt 3 × VitestでVeeValidate 4の単体テストを実装する
Nuxt 3プロジェクトでVeeValidate 4を使用するVueファイルの単体テストコードを作成し、Vitestによるテストを実行する方法を記載しています。
Nuxt 3 × Vitest × Vue Testing Libraryで単体テストの実行とカバレッジを取得する
Nuxt 3プロジェクトにVitestとVue Testing Libraryを利用した単体テスト（ユニットテスト）の実行環境を構築し、単体テストの実行とカバレッジを取得する方法を記載しています。
Nuxt 3プロジェクトの作成とTypeScript・ESLintの設定
Nuxt 3プロジェクトへのTypeScriptとEsLintの設定方法を記載しています。エディタはVisual Studio Codeを使用し、拡張機能のVolarをインストールしている想定としています。
SimpleBarを利用してiOS（iPhone）でスクロールバーを常に表示する方法
ライブラリの「SimpleBar」を利用してスクロールバーをカスタマイズし、スクロールバーの常時表示・色変更を行います。PC/スマホ両方に対応しています。
ApacheアクセスログでクライアントのIPアドレスを表示する方法
ユーザーがロードバランサー経由でWebサーバーにHTTP/HTTPSアクセスしてきた際に、アクセスログにロードバランサーのIPアドレスではなく、クライアント（接続元）のIPアドレスを表示します。
WordPress REST APIでJWT認証を利用してWordPressを操作する方法
WordPress REST APIでJWT（JSON Web Token）認証を利用して、認証が必要なエンドポイントへリクエストを行います。JWT認証にはJWT Authentication for WP REST APIプラグインを使用します。
JavaのJETTを利用してエクセルファイルを出力する方法
Apache POIのラッパーライブラリであるJETT(Java Excel Template Translator)を利用してエクセルファイルを出力します。Apache POIよりもコーディング量が少なく扱いがシンプルなのが特徴です。
Strapiで作成したコンテンツをAPI経由で取得する方法
Strapiで作成したコンテンツをAPI経由で取得します。Strapiはコーディングなしで手軽にAPI開発が可能なNode.jsベースのヘッドレスCMSです。
Zabbixでログを監視してエラー発生時にメールを送信して通知する方法
Zabbixでログファイルを監視してエラーが出力された場合に、指定のメールアドレス宛にメールを送信して通知するためのZabbixの設定方法を紹介しています。
LinuxでZabbix 6.4をソースからインストールして環境構築する方法
LinuxでZabbix 6.4をソースからインストールします。MySQL/PHP/Apache/Zabbixのインストール、DB設定、zabbixログインまでの一連の流れを記載しています。
Amazon SESを利用してメールを配信する方法
AWSのAmazon SESを用いてアプリ上からメール配信を行います。AWSのコンソール上での利用方法とアプリ上からメール配信を行う実装の両方を取り扱っています。
MongoDB 6.0のレプリケーション（レプリカセット）をDockerコンテナ上で構築する方法
MongoDB 6.0のレプリケーション（レプリカセット）をDockerコンテナ上で構築します。環境構築、同期確認、フェイルオーバー時の自動昇格の動作確認まで一連の流れを記載しています。
MongoDB 6.0をDockerコンテナで環境構築する方法
Dockerコンテナ上でMongoDB 6.0の環境構築を行う方法を解説しています。ユーザー作成・ドキュメント追加・認証機能の設定等も併せて記載しています。
AWSのCLB（Classic Load Balancer）配下にHSTSとPreload設定を行う方法
SSL化したWebサイトが第三者から中間攻撃を受けないためのHSTS設定を有効にします。HSTS Preloadに関しても、申請方法を含めて手順を記載しています。
AWSでCLB（Classic Load Balancer）のTLS 1.0/1.1を無効化する方法
AWSでSSL証明書がインストールされたCLB（Classic Load Balancer）のTLS 1.0/1.1を無効化し、TLS 1.2に固定する方法を解説しています。TLS 1.0/1.1には脆弱性が発見されており、利用は非推奨になっているので早期の対応が必要です。
Linuxのcronでジョブを設定してタスクを自動実行する方法
Linuxのcronでジョブを設定してタスクを自動実行する方法を解説しています。cron自体の説明から設定方法・注意点・トラブルシューティングも記載しています。
WordPressをMac のローカルに環境構築する方法
MAMPやXAMPP等の外部ツールを利用せずに、Apache/PHP/MySQL/WordPressをMacのローカルにインストール・環境構築する方法を解説しています。
Nuxt.jsのSPAモードでAmazon S3にデプロイする方法
SPAモードで作成したNuxtプロジェクトをAmazon S3へデプロイ（静的ホスティング）します。SPAモード時の注意点やAPIを利用する際に気を付けることに関しても記載しています。
WordPressをWindowsのローカルに環境構築する方法
MAMPやXAMPP等の外部ツールを利用せずに、Apache/PHP/MySQL/WordPressをWindowsのローカルにインストール・環境構築する方法を解説しています。