React怖い

無知ながら求職条件によくみるので、友人にReactをお勧めしておきながら、Reactの学習から逃げてました。
だって、その友人がものすごく賢いのに、苦戦してるんだもの。
そのため、フロントから逃げ気味になり僕はバックエンドをやるんだと・・・

導入

しかし、node.jsはまあなんとなくできるようになり（基礎だけね）とりいそぎfirebaseを学習しようとしたら、どうしてもフロントが必要なんだよなあ。

svelteをいじってみましたが情報の少なさで怯んでしましました。そのため、プログラミングからも逃げ、Youtubeを見ていたところ、Vue3がsvelteライクだぞ！という情報をみつけました。

楽そうなものは目ざとく取り入れる習性があるため、即Udemy講座を購入。

読める！読める！書ける！動かせる！簡単に書ける！
ともう興奮しっぱなしになり、本記事を書いています。

使ってみて

正直Reactとの比較はできない・・・だってやってないんだもんただ、以前ヴァニラJSで作ったチャットアプリがここまで縮小してかけるのには驚きました。 DOMで死にそうになっていたあの時を懐かしく（１月前）思いながら、DOMいらなくない？
とびびっております。

作ったもの

簡単なチャットアプリ（削除機能付き）を作成してみました。 CSSからはまだ逃げているので、書いていません。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vuetest</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="app">
        <h2>Chat app by Vue3</h2>
        <form v-on:submit.prevent>
            <input type="text" v-model="newItem">
            <button v-on:click="addItem">Add</button>
        </form>
        <ul>
            <li v-for="(todo,index) in todos">
                <input type="checkbox" v-model="todo.flag">
                <span>{{todo.item}}</span>
                <button v-on:click="deleteItem(index)">
                    Delete</button>
            </li>
        </ul>
        <pre>{{$data}}</pre>
 
    </div>
    <script src="https://unpkg.com/vue@3.1.5"></script>
    <script src="js/main.js"></script>
</body>
</html>

v-hoge:hugaとhtmlに直接色々かいちゃってるわけだが、読みやすいし、感覚で書けるのが楽しい！

app.js

const app=Vue.createApp({
    data: ()=> ({
        newItem:'',
        todos:[]
    }),
    methods:{
        addItem: function(event){
            //alert('clickされました')
            if(this.newItem==='')return
            let todo = {
                item: this.newItem,
                flag: false
            }
            this.todos.push(todo)
            this.newItem=''
        },
        deleteItem: function(index){
            this.todos.splice(index, 1)
        }
    }
})
app.mount('#app')

JS！え？こんだけ？

最後に

おそらくVue3がいいのだと思いますが、2との違いは判りません！ Vue3はまだ売っているテキストなども少ないですが、それでもさくっとかけてしまいますので、 Reactに泣いてるそこの方？いかがでしょうか？