CSS叩いて返り討ちになる話

2. 自己紹介
• 暁の流星
• 奈良高専情報科
• 普段JSで色々してる
• Twitter @nomber1910 @1910akatsuki
• GitHub Akatsuki1910

3. 注意事項
• 奈良高専TalkCafeでの改良版です
• JavaScriptをひいきした内容です
• 決して戦争を起こすわけではないのであしからず
• 出てくる登場人物や名前は全てノンフィクションだったりします
• 頭が弱いです

4. 政党公約文(あらすじ)
• CSSAnimationとかいうものが最近(党設立当時)できたので、JavaScript(以下
JS)を愛する上級国民様方から守るというものです
• JSにはcanvasタグというものがあり、ライブラリを使うことによってアニ
メーションができる
• また、requestanimationframeで色んなことができる
• CSSでできないような芸当をみせてJSの格の違いを見せつける
CSSをぶっ壊す!!!

5. それでは見ていきましょう

6. • 説明
• WebGLを簡単に使えるようにしたやつ
• Adobe Flashの代わりになる
• 2D
• 利点
• めちゃめちゃ軽い(WebGLだから)
• 欠点
• 公式リファレンスが読みにくい(サンプル解読がデフォ)
• 書き方がすぐかわるのでバージョンあげるのが怖い
まず使用するスクリプト

7. 三角形まわしてみた
css pixi.js

8. CSSスキャンダル
1. borderで四角を作る
2. 上の太さを0にする
3. 右と左を透明にする
4. 高さを下の幅×√3をする
↑
手計算で出さなければならない

9. へっ!!CSSめんどくさいな!!!!!!!!

10. ルートの計算式

11. まあまあ次見てみよう

12. • 説明
• WebGLを簡単に使えるようにしたやつ
• 3D
• 利点
• めちゃめちゃ軽い(WebGLだから)
• サンプルが面白い
• 欠点
• ゴリゴリやると重い
まず使用するスクリプト

13. 立方体回してみた
css Three.js

14. なんで回るんだよお前
MDN web docs https://developer.mozilla.org/ja/docs/Web/CSS/transform-style

15. 本来ならここでボキボキに折られるところだが
そうはいかない
JavaScriptもCSSも実用性があるように見える
ここは実用性を求めて対抗してやる!!!

16. 花びら(のつもり)
CSS JavaScript

17. 何がどうなってるか(CSS)
• みんなの味方SCSSを使用
• カッコ大事
• 四角を作る … ①
• 角を直径が四角の幅になるような円にする … ➁
• 二個 対角に角を作る … ③
①
➁
③
ここまでが花びらを作成する方法

18. 何がどうなってるか(CSS)
animationの全貌
sinやcosが使えないので全部手打ち

19. 何がどうなってるか(CSS)
SCSSにはforがある
つまりテイラー展開すればなんとかなる
これには階乗と指数計算ができればなんとかなる
上二つはforを使うことで再現可能
つまり長々とかかなくてもかけてしまう
(ここでは書きません)

20. 何がどうなってるか(JavaScript)
なんとなくライブラリ使わずに設計
円を二個作り、その間だけ色を付けてる
枠線にも色を付けないといけない
一回canvasを消さなければならない

21. 何がどうなってるか(JavaScript)
しかしながら複雑な動きが可能
また、複雑な図形を描くのに適している

22. この結果より
• CSSは簡単なアニメーションに向いている
• JavaScriptは複雑なアニメーションに向いている
• どちらも図形を描くのには一苦労
• よってJavaScriptはCSSより上回ってる(暴論)

23. では実際CSSとJSのアニメーションを見比べてみよう

24. どっちがどっち?

25. どっちがどっち?
https://tech-dig.jp/js-fuwatto-animation/
JavaScriptCSS

26. なんかおかしくね?
• 簡単なアニメーション(ふわっとなるやつ)はJavaScript
• 複雑なアニメーション(グルグル動き回るやつ)はCSS

27. おいおいどうなってんだよ
https://developers.google.com/web

28. CSSとJavaScriptではほぼ同等に見られていて
用途において使い分けを進められているのです

29. どういうことだってばよ
• CSSでは止めたり動かしたりといった複雑な動きをするのが難しい
• いちいち%で指定しなければならない
• いい感じにヌルヌルさせるためには実行時間や間隔を決めなければならない
• でもJavaScriptなら全部できるよね
• ↑でもお前フェードインとかできないよね

30. 絶対に使用しないわけではない
CSS
JavaScript
使用率(%)
animationの難しさ(%)0
100
100
寝たら夢の中で出来てたグラフ

31. 党(JavaScript)の今後について
• どうしてもスクリプトを使用しないといけない
• WebGLを直書きできるようになる
• CSSで出来ることをJavaScriptで出来るようにする
• jQueryは…ちょっと…
• animationを書きやすくする
• 時間諸々の管理がめんどくさい

32. 政党の幕を閉じた