ローカル開発の中でも、特に不安定だったのが TOP の NEWS カルーセルだった。
見た目の実装だけでなく、
- 投稿データの取り方
- サムネの有無
- ループ挙動
- ボタン操作
- モバイルブラウザ挙動
- Safari 対応
が全部絡んでいた。
11. 空スライド問題
問題
カルーセルに使う投稿の中にサムネ未設定のものが混ざると、
- 空スライドになる
- スライド数の認識と見た目がずれる
- ループ時に「あるはずのスライド」が崩れる
といった問題が起きやすかった。
修正
レンダリング時に、サムネが無いものはカルーセルの <div class="swiper-slide"> 自体を出さない構成にした。
学び
カルーセルは「投稿数」ではなく「実際に描画できるスライド数」で組み立てないと、挙動が不安定になる。
12. ループ境界での詰まり・不自然な挙動
問題
ループカルーセルでは、最後から最初に戻る境界や、最初から最後へ戻る境界で不自然な詰まり方をすることがあった。
特にモバイルや Safari 系ブラウザで起きやすかった。
修正
最終的には Swiper の設定をかなり慎重に調整した。
looploopPreventsSliding: falseslidesPerView: "auto"centeredSlides: falsewatchOverflow: falsewatchSlidesProgress: trueobserverobserveParents
README 上でも、iPhone Safari で loop 境界が詰まりやすかったため centeredSlides を false にしたという意図が残っている。
学び
カルーセルの loop は単に loop: true にすれば安定するものではなく、スライド幅・ブラウザ・コンテンツ量・center設定との相性まで見る必要があった。
13. Swiper 標準ナビゲーションとの競合
問題
Swiper 標準の navigation をそのまま使うと、クラス付与やイベント処理が自前のUIと干渉し、ボタン操作が不安定になることがあった。
修正
ビルトイン navigation に任せず、前後ボタンは自前でイベントを付けて、
slidePrev()slideNext()
を直接呼ぶ実装にした。
その際、stopPropagation() を入れて、Swiper 側のタッチ処理に食われないようにしていた。
学び
ライブラリ標準UIと独自UIを混ぜると、イベント競合で不具合の原因が見えにくくなる。
必要なら最初から手動制御の方が安定する。
14. autoplay と pause / play の状態不整合
問題
自動再生中に一時停止・再開ボタンを押したときに、
- アイコンが実際の状態と合わない
-
aria-labelが合わない - autoplay の状態だけ止まって見た目が更新されない
といったズレが起きやすかった。
修正
ボタン側で isPaused を持ち、クリック時に
newsSwiper.autoplay.start()newsSwiper.autoplay.stop()- アイコン切替
-
aria-label切替
をまとめて管理するようにした。
学び
カルーセルの操作系は、「表示」と「内部状態」を別々に持つので、UI状態を明示的に同期しないとすぐに破綻する。
15. スライド幅とレスポンシブ崩れ
問題
カルーセルは slidesPerView: "auto" を使っているため、CSS 側の幅指定や余白次第で
- 思ったより広い
- スマホで見切れる
- 端末幅ごとに余白が合わない
- ループ時に間延びして見える
などの問題が起きた。
修正
CSS 側で
.news-swiper.swiper-slide.carousel__content- テキストブロック
- ナビゲーション位置
を細かくレスポンシブ調整した。
カルーセル不具合はJSだけでなく、CSSの横幅設計とのセット修正だった。
学び
カルーセルの不具合はJSのバグに見えて、実際にはレイアウトとスライド幅の設計ミスであることが多い。
16. データ供給ロジックとカルーセル挙動の密結合
問題
カルーセルの表示不具合は、Swiper設定だけでなく、そもそもスライドとして渡している投稿データの組み立てにも左右される。
たとえば:
- 非表示にしたい投稿が混ざる
- サムネの無い投稿が混ざる
- 並び順が想定と違う
- 件数が少ないと loop 挙動が不安定になる
修正
TOP側ではカルーセル用の投稿データを一度配列化し、
- 対象投稿の条件
- 並び順
- 最大件数
- サムネ有無
を揃えた上で出力するように整理した。
学び
カルーセルは見た目の部品に見えるが、実際にはクエリ条件・メタ状態・画像有無・HTML出力・JS設定が全部つながっている。
17. 結局カルーセルで大変だったこと
カルーセル実装で本当に大変だったのは、単に「横に流す」ことではなく、
- 不完全な投稿データが混ざっても壊れない
- サムネ未設定で空スライドにならない
- loop 境界で詰まらない
- Safari でも操作しやすい
- 自動再生と一時停止が破綻しない
- 独自UIボタンがSwiperと競合しない
- スマホ幅でも崩れない
という、運用とブラウザ差異込みの安定化だった。
まとめ
ローカル開発時の修正を振り返ると、実装の中心は「機能を増やすこと」よりも、むしろ次のような壊れやすい境界条件を潰すことだった。
- 保存途中で止まる
- タイトル未確定
- サムネ未設定
- temp フォルダ残骸
- 投稿削除後の掃除漏れ
- 同名ファイル衝突
- ドラッグ＆ドロップUIの状態不整合
- ループカルーセルの境界バグ
- モバイル/Safariでの不安定挙動
最終的には、PHP側の保存・削除・移動ロジックと、フロント側のカルーセル制御の両方で、正常系より異常系への対処の方が多くなったと言ってよかった。