【Vue.js】について #初心者

本日は、参加するプロジェクトで利用する予定のVue.jsについて勉強をしました。
プログラミングスクールでは、主にRubyを学びましたが、Vue.jsについての理解は低く、JavaScriptが使いやすいくらいなのかなとの認識でした。

Vue.jsとは

UI(ユーザーインターフェース)を構築するためのJavaScriptフレームワーク
MVVMモデル型である
SPA開発ができる
記述を少なく済ませることができる

こんな感じです。

Vue.jsのメリット

他のプログラミング言語と比べて学習コストが低い
MMVVMモデル型のため、レスポンスが早い
DOMを操作するコード量を減らすことができるため、開発スピードが早くなる

まだガイドを読み終えていないので、他にもたくさんあると思いますが、今日１日コードを打ったりガイドを読んでみた感じはこの辺りかなと思います。

実際にガイドで勉強しながら書いてみたコードが以下です。
HTMLファイルに作成するだけで動作します。

veu.html

  <!DOCTYPE html>
  <html lang ="ja">
    <head>
      <meta charset="UTF-8">
      <title>Vue test</title>
    </head>
    <body>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
      <div id= "watch-example">
        <p>
          yes/no で回答するので、質問をどうぞ！
          <input v-model="question">
        </p>
        <p>{{ answer }}</p>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
      <script>
        var watchExampleVM = new Vue({
          el: '#watch-example',
          data: {
            question: '',　// デフォルトの質問は空白
            answer: '質問受付中です^^' // 回答待ち中の質問
          },
          watch: {
            // この関数は　質問が変わる毎に実行される。
            question: function (newQuestion, oldQuestion) {
              this.answer = 'あなたが入力しています。'
              this.debouncedGetAnswer()
            }
          },
          created: function (){
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
            // _.debounce はコストの高い処理の実行を制御するためのlodash の関数
            // この場合、yesno.wtf/apiへのアクセスすべきか制限するために、
            // ユーザー入力が終わるのを待ち ajax リクエストを実行している。
          },
          methods: {
            getAnswer: function () {
              // もし質問の最後に?が入っていない場合の処理
              if (this.question.indexOf('？') === -1) {
                this.answer = '質問は最後に？を入れてください。'
                return
              }
              // 最後に？が入っていた場合、処理に移行する
              this.answer = '考え中です、お待ちください...'
              var vm = this
              axios.get('https://yesno.wtf/api')
              .then(function (response) {
                vm.answer = _.capitalize(response.data.answer)
              })
              .catch(function (error) {
                vm.answer = 'APIにアクセスできませんでした' + error
              })
            }
          }
        })
      </script>
    </body>
  </html>

質問を入れたら[Yes/No]で回答をしてくれる単純な作りですが、HTMLファイルのこの記述量で動作するのはすごいと思いました。

勉強してみた所感

Vue.jsのガイドを勉強してるだけでも、感覚的に操作ができるようになってきたので、楽しいと感じられるようになりました。

非同期コンポーネントの理解を深めていけば、実際の業務でも役に立ちそうな気がしてきたので、引き続き理解を深めていこうと思います。