Vue 3 で行こう!

なんだかんだで後回しにしていたフロントエンド系の知識。

バックエンド系の仕事多めの人間にとって、なぜフロントの仕事がイヤかというと仕様がコロコロ変わるから。

C++ や Java だって文法上の変化はあったじゃないかと言われそうだが、基本にあるオブジェクト指向の思想はそうそう変わっているわけではないとワイは信じているし、追加された機能などもある程度納得すべき理由があるので強い拒否反応はおきない。

JavaScript なんてちょっと前まではクラスすら使えなかったではないか?

そういう言語をやすやすと信じるわけにはいかないし(偏見)、仕様の変更の必然性が見えにくいのだ。

例えば、この記事を書くにあたってブラウザに「ハロー」を描画する某書籍の Vue のサンプルを走らせようとした。

見事に動かないんだな(笑)

なんでも Vue2 → Vue3 で言語の仕様がけっこう変わったとか。

なお、Vue3 ではこう書くらしい。

<!DOCTYPE html>
<html>
    <head>
        <title>First Vue</title>
        <script src ='https://unpkg.com/vue'></script>
    </head>
    <body>
        <h1>Vue.js</h1>
        <div id = "app">{{ message }}</div>

        <script>
            const app = {
                data() {
                    return {
                        message: 'Hello Vue!'
                    }
                    }
                }

            Vue.createApp(app).mount('#app')
        </script>
    </body>
</html>

まあ、なんか app をインスタンス化して id=app の div ブロックに渡している”雰囲気”はわかるんだけどさ。
あくまで雰囲気よ。

くぅー。

補足

html のコードのエスケープ処理は『HTMLエスケープツール』使ってます。

短いやつなら手動で変換してたけど、今後大量に出てきそうなんでお世話になりそう。