JavaScript

モジュールの練習ということで、これまで自作したスライダーやモーダルなど、
webサイト制作でも使用頻度高めのあれこれをモジュール化。
ただしこれが正しい方法なのかはまだ何とも言えないので、案件で使用する際は臨機応変に使えるとこだけ切り出していく所存。
バンドラーはwebpack 5を使用。

片道スライダー

仕様

• レスポンシブ対応。
• prevとnextボタンで前後に進めるが、前後のあるときだけ対応するボタンを表示。
• カレントポインターで見たい順番にスキップができる。
• マウス操作、フリック・スワイプ操作可能（スライドする要素にリンクがあっても可）

制作条件

ひな型のカルーセルクラスを継承して、片道スライダーのサブクラスをつくる。

ループスライダー

仕様

• レスポンシブ対応。
• 自動でループさせる。
• prevとnextボタンで前後に進める。
• カレントポインターで見たい順番にスキップができる。
• マウス操作、フリック・スワイプ操作可能（スライドする要素にリンクがあっても可）

制作条件

ひな型のカルーセルクラスを継承して、ループスライダーのサブクラスをつくる。

（別ウィンドウで開きます）

ループクロスフェード

仕様

• レスポンシブ対応。
• フェードタイプ。
• 自動でループさせる。
• カレントポインターで見たい順番にスキップができる。

制作条件

ひな型のカルーセルクラスを継承して、ループクロスフェードのサブクラスをつくる。

モーダル

仕様

• モーダルの背景レイヤーはDOMで生成。
• モーダルを開いているときは画面をスクロールさせない。
• モーダルコンテンツ（パネル）以外をクリックすると閉じる。
• モーダルコンテンツ（パネル）の高さは最大ウィンドウサイズの90%でそれ以上の内容はスクロール表示になる。
• デフォルトで

改善点

chromeでのみ、内容量の多いモーダルコンテンツがぼやける現象を確認。原因調査中。

タブ切り替え

仕様

• レスポンシブ対応。
• 高さは内容によって可変。
• 高さを固定したいときはcssで高さを追加する。

details&summaryカスタマイズ

仕様

• <details>と<summary>の開閉コンテンツをjsでカスタマイズ。
• メソッドは3パターン。
• 折り畳み効果はcssでつける。

改善点

他にもっとスマートな書き方がある気がする。

開いている要素は常にひとつ

折り畳みにエフェクトをつける

折り畳みエフェクト付き＋開いている要素は常にひとつ

スクロールアニメーション

仕様

• スクロールの量に合わせて、動きをつける。
• JavaScriptで処理するのはターゲットの要素（.u-appear）が見えたら、is-showクラスを付けるだけ。
• エフェクトはcssで好きなように追加。その際「data-animation」に任意の値でスタイルを設定する。

非同期処理

仕様

• 非同期処理で外部ファイルから商品のデータを読み込む。
• 商品のデータから絞り込みのセレクトボックスをつくる。
• 商品の種類によって絞り込みができる。
• 新しい商品には「new」アイコンを付ける。
• 商品の金額は税込みの価格に変換し、「¥」マークと3桁カンマをつける。
• 割引商品には、割引率と割り引いたあとの金額も表示。
• 1度に表示されるのはデフォルトで12。
• 「もっと見る」ボタンで更に最大12枚表示。
• 「もっと見る」で表示するものがなくなったらボタンは非表示。
• 商品カードが12枚以下のときは「もっと見る」ボタンは表示させない。
• 1度に表示する数と、税率は任意で変更可能。