Node.jsのセキュリティリリースをきっかけに、放置していたNext.js 13を片付けた話｜Next.js 15.5・swiper 14への更新とDependabotの設定
Node.jsのセキュリティリリースをきっかけに、放置していたNext.js 13を片付けた記録。.nvmrcとenginesの書き方、Next.js 15.5とswiper 14への更新、矢印が二重になる問題、Dependabotの設定まで。
FRONTEND
フロントエンド
スライダーや計算シミュレーターなど、Web制作の現場でよく使うフロントエンド実装を、コピペで動く形で解説しています。
11件の記事
【Node.js】2026年10月のセキュリティリリースに、Cloud RunのNext.jsでどう対応したか｜Dependabotに出ない脆弱性と、動いている版をdigestで確かめる方法
Node.jsの2026年10月のセキュリティリリースに、Cloud RunのNext.jsで対応した記録。Node本体の脆弱性がDependabotに出ない理由と、権限がなくてもビルドログのdigestで動いている版を確かめる方法を解説。
旧CMSの記事URLを落とさずにNext.jsへ移行する｜sitemapから旧URLを抽出し、proxyで301する設計と正規化の罠
旧CMSで運用していたサイトをNext.jsに置き換えると、旧サイトの記事URLはそのままでは404になります。検索結果や外部サイトからのリンクを失わないためには、旧記事のURLを…
【Next.js 16】middlewareが開発環境だけ動かない原因｜proxyへの改称とsrc配下に置くべき理由
Next.js 16のサイトで、middleware.tsにリダイレクトの処理を追加しました。ところが、開発サーバー（next dev）ではリダイレクトがまったく効かず、エラーも警…
Next.js App Routerのページネーション実装｜URL同期とLenisのスクロールずれ対策
Next.js App Routerでクライアント完結のページネーションを実装し、絞り込み状態をURLに同期する方法を解説。useSearchParamsとhistory.pushStateの使い分け、Lenis環境でページ送り後にスクロール位置がfooterへずれる原因と解決策、SEO上の注意点までまとめました
問い合わせフォームの通知をLINEに飛ばす方法【Next.js × LINE Messaging API 実装コード付き】
Webサイトの問い合わせフォームをメール通知だけで運用していると、迷惑メールフォルダに紛れる・気づくのが翌日になる、といった取りこぼしが起きます。そもそも送信元の設定が原因でメール…
【コピペOK】合計金額シミュレーターの作り方｜チェックボックス・ラジオボタン・セレクトボックス対応（jQuery版・JavaScript版）
チェックボックス・ラジオボタン・セレクトボックスで合計金額を自動計算する料金シミュレーターの作り方。JavaScript版とjQuery版のコピペコード、合計がずれない計算方法、数量や税込の計算、フォームへの送り方まで解説。
【2026年版】Swiper・Slick・VEGASの違いと選び方｜jQuery 4対応の最新版コピペコードで比較
Swiper・Slick・VEGASの違いを最新版で比較。jQueryの要否、ファイルサイズ、得意な動き、更新状況と用途別の選び方、そのまま動くコピペコードをまとめました。jQuery 4対応のSlick 2.0やVEGAS v3にも対応しています。
【Swiper】慣性スライド（freeMode）をコピペで実装｜Swiper 14対応、スマホだけ動かす方法も
Swiperのfree modeで、指を離しても流れる慣性スライドを作る方法。Swiper 14で動くコピペコード、勢いや止まり方を調整するオプション、スマホのときだけスライダーにする方法、npmで使うときの注意を解説します。
【Slick】スライダーをコピペで実装｜jQuery 4対応のslick 2.0の使い方とよく使うオプション
Slick（Slick Slider）の使い方をコピペで動くコードで解説。jQuery 4対応のslick 2.0とjQuery 3向けの1.8.1の選び方、よく使うオプション、画面幅で枚数を変える方法、矢印が見えない・動かないときの直し方まで。
【VEGAS2/v3】背景画像のスライドショーをコピペで実装｜jQueryなしの最新版vegas.jsにも対応
VEGAS（vegas.js）で背景画像をズームしながら切り替えるスライドショーを作る方法。jQuery不要になったv3と従来のVEGAS2の両方のコピペコード、よく使う設定、スマホで画像を変える方法、v2からの移行まで解説します。