Vue.jsのチュートリアルで、フロント初心者がいきなりハマったこと

今回は、Vue.jsのチュートリアルサイトに着手してみました。しかし、極めて初歩的な部分でハマり悔しかったので、メモを残すことにしました。

↓チュートリアルサイト↓
https://jp.vuejs.org/v2/guide/index.html

実は以前、Vue.jsを少しだけ勉強したことがあり、色々と参考にしながら（コピペしながら＾＾）簡単なTODOアプリ的な物を作った記憶があります。なのでサクサク進むだろうと思いましたが、ブラウザ（Chrome）の開発者ツールの使い方というVue.js以前のところでハマりました。

チュートリアルでやりたかったのは、

index.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  {{message}}
</div>

<script type="text/javascript">
  var app = new Vue({
    el: '#app',
    data:{
      message: 'Hello Vue!'
    }
  })
</script>

このコードの{{message}}とmessage: 'Hello Vue!'の部分がリアクティブになっていることの確認です。

その方法として、

ブラウザの JavaScript コンソールを開いて、app.message の値を変えてみましょう。描画されたサンプルが、上記に応じて更新されるのが確認できるでしょう。

とのことでした。

まず「JavaScript コンソール」が何を指しているか分かりませんでしたが、どうやらブラウザの開発者ツールのConsoleタブを示すようです。

また、「値を変えてみましょう」と言われても、開発者ツール上でDOM操作できることを知らなかったので、理解できませんでした。

最終的に、Consoleタブでapp.message = "Hello!"と入力してみると、画面表示がリアルタイムで更新され、無事解決できました。