Vue.js FizzBuzz問題挑戦

今回は、Vue.jsを利用してFizzBuzzのプログラムを書いてみようと思います。

Vue.jsも少し、案件で利用したことがあるのですが、

他の言語に比べると経験が浅いので、練習したいと思います。

 

〇過去のFizzBuzz

しすろぐ タグ -FizzBuzz-

Bash(ShellScript) FizzBuzz問題挑戦

Go言語 FizzBuzz問題挑戦

 


FizzBuzz問題について

FizzBuzz問題の一般的な仕様は、以下の通りです。

■wikiより引用

3で割り切れる場合は「Fizz」(Bizz Buzzの場合は「Bizz」)、5で割り切れる場合は「Buzz」、両者で割り切れる場合(すなわち15で割り切れる場合)は「Fizz Buzz」(Bizz Buzzの場合は「Bizz Buzz」)を数の代わりに発言しなければならない。


今回は、一般的な仕様に加えて、

Fizz、Buzz、FizzBuzzの表示を、スタイルを変えて表示してみようと思います。

また、全てのパターン表示時に数字を表示しようと思います。

以下が、コードになります。

<html>
<head>
<script src="vue.js"></script>
</head>
<body>
    <div id="loop">
        <div v-for="count in 100">
          <div v-if="count % 15 === 0" v-bind:style="fizzBuzzStyle">FizzBuzz {{ count }}</div>
          <div v-else-if="count % 5 === 0" v-bind:style="fizzStyle">Fizz {{ count }}</div>
          <div v-else-if="count % 3 === 0" v-bind:style="BuzzStyle">Buzz {{ count }}</div>
          <div v-else>{{ count }}</div>
        </div>
    </div>
</body>
<script>

let loop = new Vue({
  el: '#loop',
  data: {
    fizzBuzzStyle: {
      color: 'red',
      fontSize: '13px',
      "font-weight": "bold",
    },
    fizzStyle: {
      color: 'blue',
      fontSize: '13px'
    },
    BuzzStyle: {
      color: 'green',
      fontSize: '13px'
    }
  }
})
</script>
</html>

 

〇実行結果

コードを細かく確認してみると、

まず、Vue.jsを利用するためにheadタグ内で、コアファイルを読み込んでいます。

<head> <script src="vue.js"></script> </head>

そして、bodyタグ内で、

描画するdivに、ループテンプレート(v-for)、条件付きレンダリング(v-if)、スタイルバインディング(v-bind:style=””)を指定します。

<div id="loop">
  <div v-for="count in 100">
    <div v-if="count % 15 === 0" v-bind:style="fizzBuzzStyle">FizzBuzz {{ count }}</div>
    <div v-else-if="count % 5 === 0" v-bind:style="fizzStyle">Fizz {{ count }}</div>
    <div v-else-if="count % 3 === 0" v-bind:style="BuzzStyle">Buzz {{ count }}</div>
    <div v-else>{{ count }}</div>
  </div>
</div>

cssスタイルは、Vueオブジェクトに含めておけば、自動的にスタイルがバインディングされます。

let loop = new Vue({
  el: '#loop',
  data: {
    fizzBuzzStyle: {
      color: 'red',
      fontSize: '13px',
      "font-weight": "bold",
    },
    fizzStyle: {
      color: 'blue',
      fontSize: '13px'
    },
    BuzzStyle: {
      color: 'green',
      fontSize: '13px'
    }
  }
})

今回は、divタグで実装しましたが、

リストで実装すれば、わざわざ{{ count }}でNumber表示を行わなくても済むかもしれません。

(Numberを後方に表示させることは難しいかもしれませんが)

 

やはり、学習コストがそこまで高くないことがVue.jsの良いところですね。

プログラム経験者が、以下を参考に頂ければ、

Vue.jsの知識が無くても、FizzBuzzくらいなら実装できると思います。

〇参考

Vue.js 公式 範囲付き v-for

Vue.js 公式 条件付きレンダリング

Vue.js 公式 インラインスタイルのバインディング

参考に頂ければと思います。

都内でエンジニアをやっています。 2017年に脱サラ(法人設立)しました。 仕事で調べたことや、気になったことをメモしています。
投稿を作成しました 163

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る