ウェブ制作 Next.js SSGビルドサイトで遷移の検知方法とエラーの回避策
Next.js で SSG (静的サイト生成) を使用する際、クライアントサイドでのページ遷移や URL のクエリパラメータの変更を検知するために、useSearchParams や usePathname フックを使うことができます。ただ...
ウェブ制作 
ウェブ制作 次世代のコーディング体験！Haystack Editorの導入方法
はる 新しいタブ地獄の悩みが解決かもしれない新しいエディターのHaystack Editorを使ってみました。VSCodeをすでに利用している方はすぐに移行できるのでインストールから設定までの手順を紹介します！ Haystack Edito...
ウェブ制作 無料でAIがコードを生成！CodeiumのVSCode拡張機能インストール＆活用法
はる 今回は、Visual Studio Code（VSCode）にCodeiumの拡張機能を導入し、無料でコード生成AIを活用する手順をご紹介します。個人開発では無料とのことなので使ったことない人はぜひ使ってみてください。 Codeium...
ウェブ制作 Next.jsとJestの設定と実践テストの手順
はる Next.jsプロジェクトにJestを導入し、Reactコンポーネントをテストする方法を説明します。Jestを設定し、簡単なテストを実行できるところまでやってみましょう。 以前、Next.jsの環境を作り自動整形機能とSotryboo...
ウェブ制作 初心者でも安心！Next.js・Storybook・Prettierで作るモダン開発環境
はる 今回は最新のNext.jsとStorybookを活用した開発環境の構築方法を紹介します。この環境では、モダンなフロントエンド開発を効率的に進めるためのツールと構成を整えます。 開発環境の構成 Next.js: バージョン14を使用し、...
ウェブ制作 Next.js (AppRouter) で環境(env)の値をSCSSの変数に渡す方法
Next.jsのenvに設定された値をSCSSの変数に渡して利用する方法を紹介します。 next.config.js の設定 // next.config.js module.exports = { sassOptions: { addit...
ウェブ制作 Next.js App Routerとカスタムメタデータの追加方法
Next.jsのApp Routerを使ってサイト運営を始めたら、SEO効果を高めるためにさまざまなメタタグの追加にチャレンジすることになるでしょう。特に、TypeScriptを駆使してMetadataの型定義を活用する場面では、gener...
ウェブ制作 Next.jsでStylelintとPrettierを使ってコード整形を行う方法
前提条件 Prettier の設定は既にしておく ↓Next.jsの場合はこの記事を参考 必要モジュールのインストール yarn add -D stylelint stylelint-config-prettier stylelint-co...
ウェブ制作 Next.jsでprettierの設定
Next.jsでprettierを設定する最低限の設定をまとめます。 モジュールのインストール yarn add -D eslint-config-prettier prettier @typescript-eslint/parser .e...
ウェブ制作 CSS Modulesで本格的に業務で使って気をつけたいこと
CSS Modulesは、React.jsをはじめとするフロントエンドのフレームワークでのスタイル適用において、非常に人気のある方法となっています。しかし、実際に業務で使用する際には、いくつかの注意点やベストプラクティスが存在します。本記事...
ウェブ制作 Astro × React.js: useContextの問題とnanostoresを使った解決策
はる Astroは、モダンなフロントエンド開発のための新しい静的サイトジェネレータです。しかし、AstroとReact.jsを組み合わせて使用する際に、ReactのuseContextが期待通りに動作しないことがあります。この記事では、その...
ウェブ制作 Astro環境【scss】Stylelint設定 CSSプロパティーの自動設定まで
はる Astro環境で、Stylelintの設定をして自動でCSSのプロパティーを整列してくれるようにする設定をメモメモ！Astro環境以外も同じですが私がよくAstroを使うのでその設定に一部なってますがよしなに調整してください。 前提条...