
It's my life

NFCタグとPageCrypt(AES256暗号化)を組み合わせたデジタル名刺の作り方を解説。AstroでペライチHTMLをビルドし、Renderにホスティングすることでスマホをかざすだけでアクセスできる電子名刺を実現します

Sentry Session Replayのβ版をGatsby.jsブログに導入し、ユーザー操作の動画再現・Network/Console確認・ヒープメモリ計測を実際に検証。導入手順とマスキング挙動の注意点を解説します

npxコマンド一発でターミナルにカラフルな自己紹介カードを表示するnpmパッケージの作り方を紹介します。TypeScript化やESLint導入、GitHub ActionsによるCI/CD自動パブリッシュの設定手順も解説します。

Gatsby.jsブログのBootstrap v3をv5に移行した年末リライト記録。Tailwind CSS導入を断念した経緯、jQuery依存の解消、gatsby-plugin-purgecssによるCSS最適化、Lighthouseスコア改善まで実践的なノウハウをまとめました。

depcheckでpackage.jsonの未使用ライブラリを検出し、GitHub ActionsでPRコメントに自動出力するActionを自作。node_modulesの肥大化対策として、CIに組み込んで依存関係を継続的にチェックする方法を紹介します。

React Hook FormとGetform.ioを組み合わせたお問い合わせフォームの実装方法を解説。useFormによるバリデーション、handleSubmitでのフォーム送信、FormDataを使ったGetform.ioへのPOST処理など、実コード付きで具体的に紹介します。

Netlify無料枠の月300分ビルド制限をGitHub Actionsに移行して解消する方法を解説。gatsby-plugin-minifyによるAsset最適化、imgurでの画像リサイズ、Getform.ioでのフォーム代替、netlify-cliによるデプロイ自動化の具体的な手順を紹介します。

Next.jsとVercelを使ってAWS障害情報を見やすくするステータスダッシュボードを構築した記録。RecoilによるGlobal State管理、Material Tableでのデータ表示、Chart.jsでの障害可視化、Vercelへのデプロイ方法まで解説します。

React Iframeライブラリを使って、Gatsby.js製PortfolioサイトにSoundCloudのメディアプレーヤーを埋め込む方法を紹介します。iframeタグをReactコンポーネントに変換するだけの簡単な手順でSoundCloudプレーヤーを実装できます。

Gatsby.jsブログにReact Calendar Heatmapを導入し、記事の投稿日をGitHub風の草(ヒートマップ)として表示する方法を解説。StaticQueryでGraphQLからデータを取得し、ツールチップやクリック遷移も実装する手順を紹介します

Gatsby.jsのブログにEstimated Reading Time(読了時間)を実装する方法を解説。gatsby-remark-reading-timeプラグインの導入手順に加え、滞在時間が13.8%向上したBrian Crayの実験結果など、読了時間表示の歴史と効果も紹介します

大学時代に初めてJavaScriptで書いたプログラムを振り返るエッセイ。学籍番号のチェックディジット計算ロジックを解明し、HTMLとJSで計算機を実装した体験談を通じて、未経験からプログラミングに踏み出す大切さを伝えます。

Nuxt.jsとVue Composition APIでVuexのStateをReactiveに扱う方法を解説。toRefsを使ったリアクティブなストア作成、setup内でのstore取得パターン、TypeScriptでの型定義の課題と解決策を実践コード付きで紹介します。

Nuxt.jsの@nuxtjs/toastモジュールでGlobal OptionとRegister機能を活用し、toast設定を共通化する方法を解説。nuxt.config.tsでの一括設定やtoast.global呼び出しにより、コンポーネント側のコードを大幅に簡潔にできます。

Nuxt.jsのmodulesをVue Composition APIで利用する方法を@nuxtjs/toastを例に詳しく解説。ClassAPIとの書き方の違いや、setup内でContextからモジュールにアクセスする実装パターン、エラーハンドリングとの組み合わせ方を紹介します。

Nuxt.jsでparticles-bg-vueを導入してかっこいいパーティクル背景を実装する方法を解説。pluginsでの読み込み、layoutsでの共通適用、Composition APIでの利用例に加え、canvasObjectによるスタイル調整方法も紹介します。

GASとAPI FLASHでWebページのスクリーンショットを定期取得し、SlackAPIで通知するシステムの構築方法を解説。ClaspによるTypeScript開発環境、JestでのURLFetchAppモック化テスト、GitHub Actionでの自動デプロイまで紹介します。

Netlify Formを使ってGatsby.js製の静的サイトにお問い合わせフォームを実装する方法を解説。data-netlify属性の設定、スパムBot対策のhoneypot設定、フォーム送信通知の確認手順まで、コード付きで紹介します。

SentryをVue.js(TypeScript)プロジェクトに導入してフロントエンドのエラーをリアルタイムに検知する方法を解説。main.tsへのSentry初期設定、エラー発火時の通知確認、Slack連携によるリアルタイム通知まで、実装手順をコード付きで紹介します。

Vue.jsでparticles.jsを手軽に導入してかっこいいパーティクルエフェクトを実装する方法を紹介。vue-particlesのインストールからmain.tsでの設定、CSSによるz-indexの調整まで、コード例付きでわかりやすく解説します。

Netlify CMSとGatsbyを使ったブログ構築の手順を解説。GitHubとの連携、CMS管理画面の設定、独自ドメインの適用まで、静的サイトジェネレーターを使ったHeadless CMSブログの作り方を初心者向けにまとめました。