# 「実践JS/CSS」を語るフロントエンドTechCafe〜Tips集〜

## 1. アニメーションライブラリ（GSAPメイン）（岩佐）

* 全般
* [現場で使えるアニメーション系JSライブラリまとめ（2022年版）](https://ics.media/entry/14973/)
* GSAPについて
* [基本機能](https://ics.media/entry/220822/)
* [CSSでのイージング](https://developer.mozilla.org/ja/docs/Web/CSS/animation-timing-function)
* [タイムライン・スクロール制御](https://ics.media/entry/220825/)
* Typescript
* 型定義ファイルが含まれている
* [性能比較](https://ics.media/entry/14993/)
* [ライセンス](https://web-children.com/2022/10/16/introduction-of-gsap-license/)
* React
* [Framer Motion](https://www.framer.com/motion/)
* 宣言的にアニメーションが書ける
* [Framer Motionで簡単アニメーション実装](https://qiita.com/cryptobox/items/0e1f0ebc32143152dc70)
* [Example](https://www.framer.com/motion/examples/)
* 内部エンジンは[Popmotion](https://popmotion.io/)を使っている（Framer Motionと同じ作者）
* Vue
* [GSAP + Vue](https://www.twilio.com/ja/blog/create-animation-vue3-gsap-jp?tag=flex)
* transition
* Svelte
* [Motion](https://svelte.jp/tutorial/tweened)
* [Transition](https://svelte.jp/tutorial/transition)
* [Animation](https://svelte.jp/tutorial/animate)

## 2. rippleでのアニメーション表現調査体験談（北嶋）

* 商材で[Vuetify](https://v2.vuetifyjs.com/en/)を利用しているがパフォーマンスの懸念でやめたい
* 独自コンポーネントに置き換える場合、機能は満たせそうだがアニメーションを維持するのが難しそう
* まずは[波紋(ripple)](https://vuetifyjs.com/ja/directives/ripple/)を調査してみる
* rippleの実現方法を調査
* [Vuetifyソース](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/directives/ripple)を読んでみる
* JS + CSSでやってるっぽい
* ripple要素を追加してそこにCSSでアニメーションを当てているよう
* [JS該当ソース](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/ripple/index.ts#L83)
* [CSS該当ソース](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/directives/ripple/VRipple.sass#L17)
* いくつか記事を読んでみる
* [リップルエフェクト解体新書](https://qiita.com/NumLocker/items/5cd3c07d47fde475856c)
* [jQueryとcssで作る波紋アニメーション](https://zenn.dev/harurow/articles/230aa640741dd8)
* JSで要素追加 + CSSでアニメーションが定石っぽい

### まとめ
* これくらいなら独自で作っても良さそう
* 軽量なものであればライブラリを利用するのもあり
* [v-wave](https://www.npmjs.com/package/v-wave)
* [v-ripple](https://vuetifyjs.com/ja/directives/ripple/)だけ利用する

## 3. 実務で使ってみたいモダンCSS機能（北嶋）

* Grid Layouts
* 新しいレイアウト仕様
* Flexboxの代わりになるかと思って調べたが微妙
* デザイン設計がハマれば使えるかも（レスポンシブ対応とか?）
* 参考記事
* https://zero-plus.io/media/grid-layout/
* https://ics.media/entry/15649/
* Cascade Layers
* 詳細度よりも優先してスタイルを当てられる仕組み
* 思ったよりも仕様が複雑なので、すぐに実用は難しそう
* [参考記事](https://zenn.dev/yend724/articles/20221227-fcz1jh70bhnqof2v)

## 4. ドラッグ&ドロップ ライブラリ紹介（庄禮）

* ドラッグ&ドロップとは
* マウスクリックをしたまま目的の場所まで移動させ（ドラッグ）、目的の場所でクリックを離す（ドロップ）操作
* Webサイトでは「要素の並び替え」や「要素の追加／削除」などでよく使われる
* 以下並び替え（sort）に寄った話多め
* 実現手段
1. [draggable](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/draggable) & [HTML ドラッグ & ドロップ API](https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API)
* [サンプル](https://www.htmq.com/dnd/)
* Good: ライブラリを入れなくていい
* Bad: 規模が大きくなればなるほどデータの変更などが煩雑になるため、小規模でない限り現実的にライブラリを使わないケースはほとんどなさそう
1. [jQuery UI / Draggable (+ Sortable)](https://jqueryui.com/)
* [サンプル](https://jqueryui.com/draggable/)
* Good: すでにjQueryやjQuery Uiを使用している場合の導入障壁が低い
* Good: バニラよりシンプル
* Bad: SPAに使いづらい（jQuery自体の話になりそう）
1. ★[SortableJS](https://sortablejs.github.io/Sortable/)
* [サンプル1](http://sortablejs.github.io/Sortable/#simple-list) [サンプル2](https://bsblog.casareal.co.jp/archives/6327) [サンプル3](https://taitan916.info/blog/archives/3309)
* Good: Vue.jsやReactでの使用実績も多い
* Goog: jQueryと合わせての仕様が可能
* Good: 「HTML ドラッグ & ドロップ API」を使いやすくしたイメージ（ [記事](https://github.com/SortableJS/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/)）
* Bad: 上記APIを使える（=高機能だから）こその難しさ（バニラよりはまし）
1. ★[Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)
* [サンプル1](https://david-desmaisons.github.io/draggable-example/) [サンプル2](https://scramblenote.com/article/vue-draggable)
* Good: SortableJSのVue.js用ラッパーでVue.js用に追加やすいようにカスタマイズされている（＝とりあえず動くものが簡単に作れる）
* Bad?: 細かい制御をしようとすると結局SortableJSの設定値を意識する必要がある
1. 以下は知見がないが参考情報とて合わせて紹介
* [Packery](https://packery.metafizzy.co/)
* [shopify draggable](https://shopify.github.io/draggable/)
* [interact JS](https://interactjs.io/)

## 5. lazyload ライブラリ紹介（庄禮）

* lazyloadとは
* Webページ全体を最初にロードや描画せず、スクロールに応じて順次読み込む手法（遅延読込）
* 画面の初期表示が速くなることによりユーザビリティが向上
* 実現手段
1. [loding属性](https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading)
* [サンプル](https://coliss.com/articles/build-websites/operation/work/native-image-lazy-loading.html#:~:text=%3C/script%3E-,loading%E5%B1%9E%E6%80%A7%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%87%E3%83%A2,-100%E5%8C%B9%E3%81%AE)
* Bad: 画像のみ対応
* Note（~~Bad~~）: 対応ブラウザ ([Can I Use](https://caniuse.com/loading-lazy-attr)）
1. ★[Intersection Observer API](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API)
* [サンプル](https://www.wakuwakubank.com/posts/623-javascript-intersection-observer/) (遅延描画ではなくAPI自体のサンプル)
* Note: 画面交差（=現在Webページのどこが表示されているか）を監視するAPI。
* Good: 自前で監視して画面に表示するため、画像以外も遅延描画可能
* 余談: 監視系のAPIは他にも存在
* https://www.mitsue.co.jp/knowledge/blog/frontend/201803/28_1056.html
1. [Lazy Load](https://github.com/tuupola/lazyload) (ややこしいですがライブラリ名)
* [サンプル](https://codepen.io/symm_egashira/pen/Examogb)
* Good: 画像へのclass指定とdata-srcを使用するだけで対応可能
* Bad: 画像のみ対応
* Note: 「Intersection Observer API」を使用したライブラリ
1. [Lozad.js](https://github.com/ApoorvSaxena/lozad.js)
* [サンプル](https://apoorv.pro/lozad.js/demo/)
* Note: 「Intersection Observer API」をラップしたライブラリ
* Good: 画像以外も遅延描画可能
1. [VueUse useIntersectionObserver](https://vueuse.org/core/useIntersectionObserver/)
* [サンプル](https://vueuse.org/core/useIntersectionObserver/)
* Note: Vueのライブラリの「Intersection Observer API」ラッパー
1. ★[(Vue.js/Vuetify.js用) lazyコンポーネント](https://vuetifyjs.com/ja/components/lazy/)
* Good: とりあえず動くものが簡単に作れる（タグで囲うだけ）

## 6. 小ネタ

* CSSでのビジュアル表現（岩佐）
* [pokemon-cards-css](https://github.com/simeydotme/pokemon-cards-css)で使われているCSS
* JSもゴリゴリに使われているのでCSSでどんなことをしているかを中心に
* [background-blend-mode](https://developer.mozilla.org/ja/docs/Web/CSS/background-blend-mode)
* [mix-blend-mode](https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode)
* [filter](https://developer.mozilla.org/ja/docs/Web/CSS/filter)
* [radial-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/gradient/radial-gradient)
* [conic-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/gradient/conic-gradient)
* [repeating-linear-gradient](https://developer.mozilla.org/ja/docs/Web/CSS/gradient/repeating-linear-gradient)
* [will-change](https://developer.mozilla.org/ja/docs/Web/CSS/will-change)
* ページ内リンク関連（庄禮）
* [scroll-margin-top](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-margin-top)
* [scroll-behavior: smooth](https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior)
* [サンプル](https://gihyo.jp/article/2022/08/tfc005-modern_css)
* 日付・時間系ライブラリ（岩佐）
* 今採用するならどれなんだろう？
* やりたいこと
* 日付・時間の計算
* フォーマット変換（任意の文字列からのパース・計算結果を任意のフォーマットで出力）
* [date-fns](https://date-fns.org/)
* Date オブジェクトのヘルパ関数の集合体(Date オブジェクトの lodash みたいな)
* [day.js](https://day.js.org/)
* Moment.js の操作感に近い
* [cdate](https://github.com/kawanet/cdate)
* [moment.js・day.js よりも速くて軽い cdate ライブラリ](https://qiita.com/kawanet/items/7ce867f5b1ad187c2111)
* [Temporal](https://tc39.es/proposal-temporal/docs/ja/index.html)
* 現在、stage3
* @js-temporal/polyfill を使えば利用可能
* 動向を見守る
* ライブラリ系（北嶋）
* [body-scroll-lock](https://zenn.dev/kalubi/articles/75b735fd986584)
* 実際にサービスでも使えそうかも