Nuxt
2026年現在、Nuxt 4（またはNuxt 3の最新環境）にCKEditor 5を公式ドキュメントの手順通りに導入しようとすると、インラインエディタなどの特定の構成で「CKEditorError: editor-create-attachto-ignored」というエラーが発生し、正常に動作しない問題があります。 これは、公式のVueコンポーネント側のライフサイクルと、最新のCKEditor 5側のマウント処理のタイミングに起因するバグです。日本語の情報が極めて少ないため、導入につまずくエンジニアも少なくありません。 この記事では、Nuxt 4環境におけるCKEditor 5の基本的なインストール手順をはじめ、onMountedフックを利用してインスタンスを直接生成し、上記のエラーを確実に回避する具体的な実装コードを解説します。あわせて、業務でのカスタマイズに必須となる主要なプロパティ（Props）やコンポーネントイベントの挙動についても網羅してまとめています。
Nuxt4とd3.jsで国土地理院のデータをもとにインタラクティブな日本地図を描画して、各都道府県のsvg画像を取得できるツールを作成した際の実装の解説です。国土地理院のデータをmapshaperで軽量化することで、Webページの表示を軽くするなどの工夫についても解説。実際に作ったツールを利用することも可能です。（※国土地理院のデータは利用時に出典を明記する必要があるのでご注意ください。）
サイト内に検索機能を追加するために、Googleのプログラム可能検索エンジンを使用しました。Googleのプログラム可能検索エンジンの設定画面側で何を設定するのかと、Nuxtでサイト内に検索枠と検索結果を表示する方法を実際のコード付きで解説しています。外部の検索ツールを使用することによる、実装コストが低い等のメリットや、記事を登録して即時に反映はされないといったデメリットもあわせて記載しています。
Nuxt3のプロジェクトをNuxt4にアップグレードした際に自分が詰まった「npmのバージョンが古くてエラー」「Piniaのエラー」に対する解決策をまとめました。アップグレード前にパッケージ管理コマンド(npm, yarnなど)を最新にする、古いnode_moduleを削除しておく等。
Nuxt4, GolangでQRコードを作成するオンラインツールを作った際の実装方法の解説と、オンラインツール紹介記事です。golang側ではファイルアップロード処理のセキュリティ対策の解説、Nuxt4側では画面実装の際に詰まった点として、「ユーザーの操作に応じて入力欄を増やす方法」の解説とコード例のリンクをしています。
業務でたまに使うBasic認証ですが、毎回htaccessの構文も、htpasswdのコマンドも忘れるのでまとめて作成出来るオンラインツール（htpasswdに関してはサーバーへの通信無しで実行可能）を作ってみました。ツールを作る際に使った技術（javascriptでのハッシュ化処理を使っているためクライアント上のみで実行可能）、ハマったことや学びの備忘録です。
Nuxtで、サーバーとの通信無で（javascriptオンリーで）使えるオンラインのパスワード作成ツールを作成した時の備忘録です。誰かに見られても問題ないけど別に多数と共有したい訳ではないファイルの共有時などにサクッと使える程度のセキュリティレベルを目指して作成しています。
ページの表示速度が遅ければ遅いほど、ユーザーの離脱率が上がると言われています。ユーザーの離脱率を下げるべく、LighthouseのPerformance（ページ表示速度）スコアを上げるために行ったNuxt4で設定やTailwind cssの導入、Apacheの設定などの対策と、その解説をしています。
Nuxt4でlayoutsでCanonical(カノニカル) URLを設定する処理をシンプルなuseHead関数で行うと、最初に開いたページのURLを維持してしまいます。（ページ遷移で切り替わらない。）useHeadの引数を関数にすることでページ移動でCanonical URLが適切に切り替わるようにする方法と何故切り替わらないかの原因を解説しています。
Nuxtではsortable.jsのような、画面の要素の並べ替えを処理する場合、便利なライブラリが多く存在しています。（vuedraggableなど）ただし、多くのライブラリはオーバースペック気味なので、小規模開発用にライブラリを使わずに並べ替え機能を実装する方法を解説しています。
