旧CMSの記事URLを落とさずにNext.jsへ移行する｜sitemapから旧URLを抽出し、proxyで301する設計と正規化の罠
旧CMSで運用していたサイトをNext.jsに置き換えると、旧サイトの記事URLはそのままでは404になります。検索結果や外部サイトからのリンクを失わないためには、旧記事のURLを…
FRONTEND
フロントエンド
スライダーや計算シミュレーターなど、Web制作の現場でよく使うフロントエンド実装を、コピペで動く形で解説しています。
9件の記事
【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からの移行まで解説します。