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