【超入門】vue-cliでJavaScriptデビュー！

みなさんJavaScriptをご存知ですか？

JavaScriptはWebページを動的に作ることができる言語です。

ユーザーの動きに合わせてコンテンツを表示したり、UIを変更したりする際に使われいて、WebサイトやWebアプリケーションを作る際には欠かせないものです。

JavaScriptには様々なフレームワークがあるため、一体どれから勉強すればいいのかわからない方も多いかと思います。

そんな方のために、今回はJavaScript入門者におすすめな「Vue.js」の使い方をご紹介したいと思います！

簡単なチュートリアルもあるのでよろしければ挑戦してみてください！

Vue.jsってどんなフレームワーク？

Vue.jsはとにかく「シンプル」なフレームワークです。

他のJavaScriptのフレームワークに比べて文法の制約が少なく、学習コストが低いです。そのためJavaScript入門者には非常におすすめなフレームワークになっています。

Vue.jsは初めから備わっている機能は必要最低限で、必要なものがあればパッケージを追加でインストールする必要があります。

ですが入門したてのうちは高度なパッケージが必要になることはあまりないと思うので、少しづつ慣れながら機能を増やしていけば特に問題はないかと思います。

逆に初めから大規模な開発で使う目的でJavaScriptのフレームワークを学びたい方にはあまりVue.jsはおすすめできません。

そのような方には、少し学習コストは高くなりますが、ReactやAngularJSがおすすめです。

vue-cliでなぞなぞアプリを作ろう

vue-cliをインストールしよう！

vue-cliとはVue.jsの開発を手軽に始めるための環境が備わっているシステムです。

これをインストールすることですぐにVue.jsを使うことができます。

vue-cliをインストールするためにはnpmとnodeが必要なので、もしインストールしていない方は別途インストールする必要があります。

ターミナルやコマンドプロンプトで以下のコマンドを実行し、バージョンが確認できればインストール完了です

$npm install -g vue-cli  
$vue --version
2.9.6

$vue init webpack <プロジェクト名>でプロジェクトを作成します。

今回はnazonazo_appというプロジェクト名で作成したいと思います。

$vue init webpack nazonazo_app

Project name #<エンター>
? Project description #<エンター>
? Author #<エンター>
? Vue build #standalone
? Install vue-router? #Yes
? Use ESLint to lint your code? #Yes
? Pick an ESLint preset #Standard
? Set up unit tests #No
? Setup e2e tests with Nightwatch? #No
? Should we run `npm install` for you after the project has been created? (recommended) #npmかyarn

プロジェクト作成の際に色々聞かれると思いますが、プロジェクト名やAuthorはエンターを押してデフォルトのまま、あとは上記の通りに設定してインストールしてもらえばいいかと思います。

最後のインストーラーの選択はお好みのものを選んでもらって構わないです。

ではTo get startedに従ってローカルサーバーに立ち上げてみましょう！

表示された http://localhost:8080  にブラウザでアクセスすると以下の画面が出てくるかと思います。

これでvue-cliを使う準備は完了です！

2-2. ファイルを編集してみよう！

では早速vue-cliを編集していきます！

vue-cliをエディタで開くと「src」というディレクトリがあり、そこを開くと以下のようなディレクトリ構成になっているかと思います。

このcomponentsディレクトリに入っているコンポーネントがVue.jsでは非常に便利なものになっています。

VueのコンポーネントはHTML要素をインスタンス化し、再利用可能にします。

また今回の内容には含まれていませんが、routerを使うことでコンポーネント間を簡単に遷移できます。

vue-cliをインストールした段階で入っている「HelloWorld.vue」はローカルサーバーにアクセスした際に表示されるトップページに使われています。

では試しにHelloWorld.vueを開き<template></template>の中身を全て削除してみましょう。

そうするとトップページが以下のようになるかと思います。

HelloWorld.vueに書いてあった内容がごっそり抜けてしまいました。

これでトップページにHelloWorld.vueがコンポーネントとして使われていることがわかりました。

なぞなぞを出題しよう！

ではいよいよなぞなぞアプリを作っていきましょう！

今回はHelloWorld.vueを編集してアプリの画面を作ります。

vue-cliのコンポーネントは

<template></template>

<script></script>

<style></style>

の３つに分かれていて、<template></template>の中にHTML、<script></script>の中にJavaScript、<style></style>の中にcssを書いていきます。

ちなみにstyle で、<style lang=”scss”>と指定するだけでsassが使えるようになるので、sassに慣れている方は使ってみてください。

SASSについてまとめている記事はこちら

ではまず<script></script>の中身を以下のように編集していきます。 

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      hide_answer: true,
      true_or_false: null,
      your_answer: null,
      selected_question: null,
      questions: [
        {
          question:"リンゴとみかんと桃をトラックの荷台に積んで走っている。 このトラックが急カーブで落としたものは?",
          correct_answer:"スピード",
          explain:"カーブはスピードを落とさないと危ないから"
        },
        {
          question:"幼稚園、小学生、中学生、高校生、大学生、専門学生、大学院生。 一番大きいのは?",
          correct_answer:"幼稚園",
          explain:"幼稚園以外の選択肢は人間"
        },
        {
          question:"登山した人が必ずすることは？",
          correct_answer:"下山",
          explain:"山を登ったら山を下るから"
        }
      ]
    }
  },
  methods:{
    trueOrFalse: function(){
      if(this.selected_question.correct_answer == this.your_answer){
        this.true_or_false = "せいかい！！！"
      }else{
        this.true_or_false = "はずれ"
      }
      this.hide_answer = false
    }

  },
  mounted: function(){
    var random = Math.floor( Math.random() * this.questions.length );
    this.selected_question = this.questions[random]
  }
}
</script>

dateの中では変数を定義しておきます。

hide_answer: true →trueの時に解答を表示しないようにします。

true_or_false: null →解答が正解かはずれかを出力します。

your_answer: null  →入力された回答がバインディングされます。

selected_question: null →questionsからランダムに選択された問題が代入されます。

questionsにはなぞなの問題文、答え、解説を入れておきます。

trueOrFalseメソットは「答える」ボタンが入力された時に発火します。

dataの中の値を参照するときはthisをつけます。このメソットでは、入力された回答と問題の答えが一致してるかを確認し、一致していれば「せいかい！！！」を表示し、正しい解答と解説を表示します。

一致していないときは「はずれ」を表示し、同じく正しい解答と解説を表示します。

mountedの中に書かれた処理はページが読み込まれるたびに実行されます。

mountedの中ではquestionsからランダムに問題を選んで、selected_questionに代入しています。

<style></style>の中身は以下のように編集します。

<style scoped>
input{
  border: solid 1px black;
}
.hide{
  display: none;
}
</style>

デフォルトのcssとほぼ変わりないですが、

.hide{
  display: none;
}

で正誤と正しい解答・解説を隠しているところが重要なポイントです。

最後に<template></template>の中身です。

<template>
  <div>
    <p>問題</p>
    <p>{{selected_question.question}}</p>
    <p>回答</p>
    <input type = "text" v-model = "your_answer"><br>
    <input type="button" value="答える" @click="trueOrFalse()">
    <div :class = "{hide:hide_answer}">
      <p>{{ true_or_false }}</p>
      <p>答え：{{ selected_question.correct_answer }}</p>
      <p>解説：{{ selected_question.explain }}</p>
    </div>
  </div>
</template>

templateではます、テキストボックスに入力された値で「v-model」でdataの中にあるyour_answerをリアルタイムで書き換えています。

これはVue.jsで大活躍する「双方向データバインディング」という機能です。データの変更をUIにリアルタイムで反映させることができるため、動的なWebページを作る際に非常に便利です。

@clickではボタンがクリックされた時にtrueOrFalseメソットが呼び出されるようになっています。

その下にある「:class = “{hide:hide_answer}”」は少し見慣れない書き方ですが、これもVue.jsの便利な機能です。

これは「dataにあるhide_answerがtrueの時、hideクラスが付与される」という意味です。

hide_answerの初期値はtrueになっており、hideクラスが付与された状態のため、ページが読み込まれた時点では正誤や解答・解説は隠れている状態です。

「答える」ボタンが押された時にtrueOrFalseメソットによってhide_answerがfalseになるとhideクラスが外れるため、正誤と解答・解説が表示されるようになるという仕組みです。

Javascriptでは　{{}} の中身に変数を入れることでhtmlに埋め込むことができます。

<script></script>に書いたmounted内の処理のおかげでページを読み込むたびにランダムで問題が選択されるので何度かリロードしてみてください。

これでなぞなぞアプリの完成です！

最後に

いかがでしたでしょうか。Vue.jsとvue-cliを使えば少ないコードで簡単なwebアプリを作ることができます。

vue.jsには他にも便利な機能がたくさんあるので、これを機にVue.jsに挑戦してみてはいかがでしょうか？