React MUIのテーマを永続化する方法 | Next.js、TypeScript使用
MUI(Material-UI)を使用するReactプロジェクトで、ユーザーが選択したテーマ(ライトモード・ダークモード)をページ遷移後も維持する方法を解説する。テーマの永続化により、リロードやページ遷移時にデフォルトの状態に戻る問題を解決できる。動作確認環境@mui/mater
WEB制作で使用するDOM操作から、開発で使用するサーバーサイドとの通信、配列操作などJavaScript全般の技術を解説しています。筆者のコアになる言語です。
MUI(Material-UI)を使用するReactプロジェクトで、ユーザーが選択したテーマ(ライトモード・ダークモード)をページ遷移後も維持する方法を解説する。テーマの永続化により、リロードやページ遷移時にデフォルトの状態に戻る問題を解決できる。動作確認環境@mui/mater
本記事では、react-beautiful-dndを使用して、ドラッグ&ドロップの並べ替え機能を実装する方法について解説する。react-beautiful-dndは、Reactで簡単にドラッグ&ドロップの機能を追加するためのもので、並べ替えやリストの管理に適している。react-beautifu
Vue.jsを使ったフロントエンド開発において、コンポーネント設計は常に悩ましい課題です。単一責任の原則やAtomicデザイン、細かい分割の是非など、多くのアプローチがありますが、正解はありません。しかし、ルールがないとプロダクトの品質が低下するリスクがあるため、「指針」が求められます。
この記事では、Nuxt 3を使ってnuxtjs/sitemapモジュールを導入し、XMLサイトマップを生成する方法を解説する。これにより、検索エンジンがサイトのコンテンツを効率的にクロールできるようになる。前提Nuxtのバージョン: 3.xNode.jsのバージョン: 1
この記事では、Next.jsとMilkdownを使用してカスタムマークダウンエディタを開発する方法を紹介する。Tailwind CSSを使用してスタイルを適用し、Material-UIのコンポーネントでユーザーインターフェースを構築する。ちなみに、Next.jsバージョンは14.0.3公式
シングルページアプリケーションの開発に際し、データの取得、保持、加工をストアに任せる設計を経験した。実際に経験したのはNuxt3のPiniaだが、ReactのReduxでも同じことができるだろうということで忘備録として記録する。参考にしたRedux公式ドキュメント: 『Redux Esse
環境"typescript": "^5""next": "14.0.3","react": "^17.0.0 || ^18.0.0","react-dom
この記事では、Next.jsとTypeScriptを使用して、ページを跨いだ状態管理ができるReduxの実装方法を説明する。参考にした公式ドキュメント: https://redux.js.org/usage/nextjs環境"typescript": &
この記事では、Next.jsを使用してライブラリを使わずにXMLサイトマップを生成する方法と、サイトマップの各要素がSEOにどのような役割を果たすのかについてアウトプットする。開発環境"next": "14.1.0","react
Next.jsのMiddlewareは、リクエストが完了する前にコードを実行する機能である。今回は、リクエストが完了する前にユーザーの認証状態をチェックし、未認証の場合はログイン画面にリダイレクトさせる処理を実装した。私はAWS Amplifyを使用してアプリケーションを開発しているが、a
WordPressをヘッドレスCMSとして利用し、フロントエンドにNuxt3を採用してブログを構築した。この記事では、そのシステム構成やディレクトリ構成、使用したライブラリについて詳しく解説する。さらに、NuxtアプリケーションをAWS Lambdaにデプロイし、静的ファイルをS3にアップロードし
Vue I18n は、Vue.js アプリケーションにおいて国際化(i18n)を実装するためのプラグイン。国際化とは、アプリケーションを多言語化し、異なる地域や文化に適応させるプロセスのこと。Vue I18n を使用すると、アプリケーションのテキストコンテンツを動的に変更でき、ユーザーのロケール設
当記事では、Vue.jsの状態管理ライブラリである「Pinia」を使用して状態管理を行う方法について解説する。筆者は以前「Vuex」を使用して状態管理を行なっていたが、Vue3のプロジェクトに関わるようになり「Pinia」を使用して状態管理を行うようになったため、知識の整理を兼ねてアウトプットする
Vue 3における以下の警告について原因と解決策を提示する。Extraneous non-emits event listeners (emitFunc) were passed to component but could not be automatically inherited b
eslint、コーディング規約を勉強しており、アウトプットを兼ねてAirbnb JavaScript Style Guideを翻訳してみることにした。翻訳は筆者の独断であるため情報が常に最新かつ正確であるとは限らない。以下の公式ドキュメントを元に翻訳を行なっている。サンプルコードも公式ドキュメント
Web開発において、モバイルデバイスやブラウザの種類に応じた挙動の制御は一般的な課題であり、端末の種類に基づいた特定の処理が必要な場合もある。特にiOSとAndroid端末での挙動の違いは顕著である。そこで、ismobilejsを使用して、モバイル端末の判定処理を実装することにした。ism
Vue 3 はリアクティブなデータを監視するために watch と watchEffect の二つの主要なメソッドを提供している。この記事では、それぞれのメソッドがどのように動作するのか、そしてどのようなケースでそれぞれを使用すべきかについて解説する。watch の基本的な使い方w
Vue 3とTypeScriptを使用したvue-virtual-scrollerライブラリの使い方と実装方法を解説する。仮想スクロールの基本から、DynamicScrollerとRecycleScrollerの違い、さらには動的なアイテムサイズへの対応方法まで、実用的なテクニックも紹介している。
本記事では、Google Maps Platformを使用してアプリケーション内に地図を表示する方法を解説している。大きく分けて以下の3つの手順で実装することができる。Google Maps Platformにアクセスしプロジェクトを作成するAPIキーを発行する使用するA
実務のアプリケーション開発でLodashを使っているため、忘備録を兼ねて使い方を記す。LodashとはLodash(ローダッシュ)は、JavaScriptで使用できる便利なユーティリティライブラリ。このライブラリは、配列、オブジェクト、文字列、関数、その他多くのデータ型に対する多く