Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vanilla JS challenge

Vanilla JS challenge

tomoaki kanayama

February 11, 2024
Tweet

Other Decks in Programming

Transcript

  1. Vanilla JS challenge
    金山智昭

    View full-size slide

  2. だれ
    金山智昭 (Kanayama Tomoaki)
    三重県津市在住のプログラマーです
    Frontend(React, Vue, webgl)
    Apps (Electron, ReactNative)
    Cloud (AWS, Firebase, Supabase)
    Backend (django, RoR)
    GeoVisualization
    Agile

    View full-size slide

  3. 去年末のある日
    https://www.youtube.com/shorts/91WgzdDF3yk

    View full-size slide

  4. アプリにしたら楽しそう

    View full-size slide

  5. 作った
    https://6-ro.com

    View full-size slide

  6. 今回開発する上での縛り
    1. ブラウザで動作するWebアプリ
    プラットフォームとか考えるとネイティブ面倒
    HTMLとjsのみで動作する
    2. Vanilla jsで行く
    http://vanilla-js.com/
    要は全部自分で書く

    View full-size slide

  7. モチベーション
    ReactとかVue、Three, p5とか.jsはもうお腹いっぱい
    最近はWeb標準のAPIでも色々出来るようになってきている
    FWを使わずに、Web標準でどこまで快適に行けるか試してみよう

    View full-size slide

  8. 開始10分後

    View full-size slide

  9. ただし、色々面倒なので以下は使う
    Vite
    開発体験向上(HMR, Bundler, unittest)
    Typescript
    WebGL回りはコードがゴチャるのでTypescriptがあった方が安心
    というかChatGPTが吐いたコードが、、、

    View full-size slide

  10. Vanilla.jsで試したい事
    コンポーネント指向の開発
    AngularやVue,Reactでの流行り始めたやつ
    UI(ボタン、フォーム)とかパーツかして使い回せる様にして開発する
    従来はCSSで実現してたが、DOMや振る舞いまで使い回せるところが違う
    Reactive
    値が変わったら勝手にUIが更新されるよ!ってやつ(後述)
    CSS
    SCSSいらん
    CSS in JSもいらん
    WebGL
    WebGPU WebGL2 WebGL

    View full-size slide

  11. コンポーネント指向の開発
    React
    // index.jsx
    function HelloWorld(props) {
    return Hello! {props.name}
    }
    function Root() {
    return



    }

    View full-size slide

  12. コンポーネント指向の開発
    Web component



    class HelloWorld extends HTMLElement {
    connectedCallback() {
    const shadow = this.attachShadow({ mode: 'closed' });
    // このコンポーネント専用のCSSが書ける
    shadow.innerHTML = /* html */ `
    <br/>span { text-align: center; }<br/>
    Hello ${ this.name }!`;
    }
    }
    defineComponent('hello-world', HelloWorld)

    View full-size slide

  13. Reactive
    状態が変わったら勝手にUIが更新される
    Excelの表を想像

    View full-size slide

  14. Reactive
    Web component

    class Counter extends HTMLElement {
    // 属性の値が変わったら更新される
    attributechangedcallback() {
    const shadow = this.shadowRoot;
    const count = this.getAttribute('count')
    shadow.innerHTML = /* html */ `
    Count: ${ count }!`;
    }
    }
    const counter = document.getElementById('counter')
    counter.setAttribute("count", "6")

    View full-size slide

  15. Reactive
    状態管理
    特に目新しい事が無くて、面白味がないので割愛
    いわゆるObserberパターンで実装

    View full-size slide

  16. CSS
    コンポーネントに閉じられるので、名前被りの心配は要らない(BEMとか要らない)
    グローバルなCSSが出来ないのが逆に面倒。色とかは、共通CSSを準備して全ての
    コンポーネントで読み込んでいる。かなり冗長
    CSSのネストもサポートされはじめたしSCSSは不要では?

    View full-size slide

  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;
    }

    View full-size slide

  18. まとめ
    FWのバージョンアップに悩まされないし、趣味で書くにはフレームワーク要らな
    いんじゃね?とはなる
    まともに仕事で開発しようと思ったら、まだまだ辛い
    チームで開発するにはオレオレフレームワークにせざるを得ないので、規律を決
    めるのが面倒そう

    View full-size slide