21 Articles in JavaScript
NFCタグを使ったデジタル名刺をPageCryptを使って作ってみた

NFCタグを使ったデジタル名刺をPageCryptを使って作ってみた

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

Sentry新機能のSession Replayを使ってみる

Sentry新機能のSession Replayを使ってみる

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

自己紹介をnpxでやってみたい

自己紹介をnpxでやってみたい

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

今年も最後だからBlogのBootstrap v3を何とかする

今年も最後だからBlogのBootstrap v3を何とかする

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

depcheckをGitHub Actionで使い、PRコメントに結果を出力させる

depcheckをGitHub Actionで使い、PRコメントに結果を出力させる

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

React Hook FormとGetform.ioを使って、お問い合わせフォームを作ろう!

React Hook FormとGetform.ioを使って、お問い合わせフォームを作ろう!

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

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう!

Netlifyのビルド時間をGitHub Actionsで0時間にして月末のヒヤヒヤから解放されよう!

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

Next.jsとVercelとRecoilとMaterial Tableを使ってAWSのステータスダッシュボードを作ってみた話

Next.jsとVercelとRecoilとMaterial Tableを使ってAWSのステータスダッシュボードを作ってみた話

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

React Iframeを使ってPortfolioサイトにSoundCloudのメディアプレーヤーをつける

React Iframeを使ってPortfolioサイトにSoundCloudのメディアプレーヤーをつける

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

Gatsby.jsで作ったBlogの投稿をGitHubの草にして表示させる

Gatsby.jsで作ったBlogの投稿をGitHubの草にして表示させる

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

Gatsby.jsで作ったブログに読み終わるまで○○分を追加した話

Gatsby.jsで作ったブログに読み終わるまで○○分を追加した話

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

はじめてプログラミングをした時のしょぼいソース見つけた

はじめてプログラミングをした時のしょぼいソース見つけた

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

Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法

Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法

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

Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast Global Option編)

Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast Global Option編)

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

Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編)

Nuxt.jsのmodulesをCompositionAPIで使ってみる(@nuxtjs/toast編)

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

Nuxt.jsでparticles-bg-vueを使う

Nuxt.jsでparticles-bg-vueを使う

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

Google Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る

Google Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る

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

Netlify Formを使って、簡易Contact Formを作ってみる

Netlify Formを使って、簡易Contact Formを作ってみる

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

Sentryを使ってフロントエンドのエラーを確認する

Sentryを使ってフロントエンドのエラーを確認する

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

particles.jsをVue.jsで使ってかっこいいページを作る

particles.jsをVue.jsで使ってかっこいいページを作る

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

Github + Gatsby + Netlify CMS で今更ブログを作る

Github + Gatsby + Netlify CMS で今更ブログを作る

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