Vanilla JS challenge

Transcript

1. Vanilla JS challenge 金山智昭
2. だれ 金山智昭 (Kanayama Tomoaki) 三重県津市在住のプログラマーです Frontend(React, Vue, webgl) Apps (Electron, ReactNative) Cloud (AWS, Firebase, Supabase) Backend (django, RoR) GeoVisualization Agile
3. 去年末のある日 https://www.youtube.com/shorts/91WgzdDF3yk
4. アプリにしたら楽しそう
5. 作った https://6-ro.com
6. 今回開発する上での縛り 1. ブラウザで動作するWebアプリ プラットフォームとか考えるとネイティブ面倒 HTMLとjsのみで動作する 2. Vanilla jsで行く http://vanilla-js.com/ 要は全部自分で書く
7. モチベーション ReactとかVue、Three, p5とか.jsはもうお腹いっぱい 最近はWeb標準のAPIでも色々出来るようになってきている FWを使わずに、Web標準でどこまで快適に行けるか試してみよう
8. 開始10分後
9. ただし、色々面倒なので以下は使う Vite 開発体験向上(HMR, Bundler, unittest) Typescript WebGL回りはコードがゴチャるのでTypescriptがあった方が安心 というかChatGPTが吐いたコードが、、、
10. Vanilla.jsで試したい事 コンポーネント指向の開発 AngularやVue,Reactでの流行り始めたやつ UI(ボタン、フォーム)とかパーツかして使い回せる様にして開発する 従来はCSSで実現してたが、DOMや振る舞いまで使い回せるところが違う Reactive 値が変わったら勝手にUIが更新されるよ！ってやつ(後述) CSS SCSSいらん CSS in JSもいらん WebGL WebGPU WebGL2 WebGL
11. コンポーネント指向の開発 React // index.jsx function HelloWorld(props) { return <span className="title">Hello! {props.name}<span> } function Root() { return <div> <HelloWorld name="world"> <HelloWorld name="vanilla js"> </div> }
12. コンポーネント指向の開発 Web component <!-- DOMを独自に定義 --> <hello-world name="world"> <hello-world name="Vanilla JS"> class HelloWorld extends HTMLElement { connectedCallback() { const shadow = this.attachShadow({ mode: 'closed' }); // このコンポーネント専用のCSSが書ける shadow.innerHTML = /* html */ ` <style> span { text-align: center; } </style> <span>Hello ${ this.name }!</span>`; } } defineComponent('hello-world', HelloWorld)
13. Reactive 状態が変わったら勝手にUIが更新される Excelの表を想像
14. Reactive Web component <Counter id="counter" count="0"></counter> class Counter extends HTMLElement { // 属性の値が変わったら更新される attributechangedcallback() { const shadow = this.shadowRoot; const count = this.getAttribute('count') shadow.innerHTML = /* html */ ` <span>Count: ${ count }!</span>`; } } const counter = document.getElementById('counter') counter.setAttribute("count", "6")
15. Reactive 状態管理 特に目新しい事が無くて、面白味がないので割愛 いわゆるObserberパターンで実装
16. CSS コンポーネントに閉じられるので、名前被りの心配は要らない(BEMとか要らない) グローバルなCSSが出来ないのが逆に面倒。色とかは、共通CSSを準備して全ての コンポーネントで読み込んでいる。かなり冗長 CSSのネストもサポートされはじめたしSCSSは不要では?
17. WebGL WebGPUを使ってみたかったが、Safariとかが未対応だったのでWebGL2を採用 正直、簡単に書きたいならライブラリ使った方が良い Shaderで細かく調整したいなら、生で書いた方が楽そう 特に今回は全体を回転させたり、特殊な事を色々したかったので、ライブラリ使 わずにやったのは正解だった気がする # vertex ... void main() { ... mat2 rotation = mat2(c, -s, s, c); gl_Position = vec4(rotation * a_position, 0.0, 1.0); } # fragment void main(){ gl_Frag_color = v_color; }
18. まとめ FWのバージョンアップに悩まされないし、趣味で書くにはフレームワーク要らな いんじゃね？とはなる まともに仕事で開発しようと思ったら、まだまだ辛い チームで開発するにはオレオレフレームワークにせざるを得ないので、規律を決 めるのが面倒そう