以前案件で、診断コンテンツのあるサイトを制作することになり、jQueryでjsonを読み込んで作成したのですが、もしかしてVue.jsでできるんじゃないかと思い、Vue.jsの練習がてら作り直してみることにしました。作ったコンテンツはこちらです。demo※見た目はどちらも同じになってます。読み込み用のjson。<strong>名前はまだ無い。</strong><br>どこで生れたかとんと見当がつかぬ。<strong>名前はまだ無い。</strong><br>どこで生れたかとんと見当がつかぬ。<strong>名前はまだ無い。<br>どこで生れたかとんと見当がつかぬ。<strong>名前はまだ無い。</strong><br>どこで生れたかとんと見当がつかぬ。"※選択肢の数が違うバージョンです。<strong>名前はまだ無い。</strong><br>どこで生れたかとんと見当がつかぬ。"text":"ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。<br>この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。"text":"ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。<br>この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。"text":"ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。<br>この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。"text":"ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。<br>この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。"text":"ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。<br>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。<br>この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。}]jQueryでつくったものはじめにjQueryで作ったときのソースを載せておきます。}});htmlは非常にシンプルですが、jQuery側がやたらと長くなって、どこに何を書いてあるのかを探すのが大変です。JS内にhtmlのソースを書くので、修正もしづらいです。Vue.jsで作り直す次にVue.jsで書いたコードです。}});htmlのほうはさっきと比べて長くなりましたが、JSの方は少しシンプルな見た目になりました。htmlも見慣れた形になっているので、修正が入ってもそこまで大変そうな印象はありません。やったことまとめVue.jsを使った方ではaxiosを利用してjsonを読み込むようにしました。html側では、v-forでループさせて、各設問内容を呼び出しています。v-bind:idでそれぞれにid属性を付与し、あとで操作しやすいようにしています。回答の数が設問によって違うので、ボタンのところで再度ループさせています。クリックイベントでは、クリックしたときにjsonから値を取得し、その値を渡して、設問の表示非表示を切り替えるようにしています。is-showというクラスが付与されると表示されるようになっています。苦労したところv-bindで文字列を追加したいv-bindの値を、「文字列+jsonの値」としたいときにどうしたらいいかが、はじめわりませんでした。いくつか調べると、文字列の方をクウォートで囲って繋げばいいとわかりましたが、調べ方が難しく時間がかかりました。ボタンの動作が思い通りいかない次の設問へ移るボタンの動作がなかなかうまくいきませんでした。イベントハンドラでmethodsを設定して・・・というところはなんとなくわかっていたのですが、そこからどうしたら考えていることができるのかがなかなかわからず苦戦しました。結局、引数にjsonから取得した値を入れるようにして、そこから次に表示する要素のidなどを取得するようにしました。この辺りは普通にJSで書いたので、Vue.jsの機能を使ってもう少し効率的に書けないか検討したいと思います。まとめ探り探りでしたが、なんとか動いてよかったです。なんとなくVue.jsで動かせた感じはありますが、実際、もう少しこうした方がいいとかいうところがありそうなので、時間があるときに調べてみたいと思います。jsonでコンテンツを吐き出すのは、Vue.jsで書く方がやりやすいかなと思いました。クリックイベントの方は、これくらいの簡単な動作ならjQueryで十分なようにも思います。(書きなれてるからかもですが)また、Vue.js使って何か作ってみたいので、次のネタ探しを始めます。Reserved.当サイトではクッキーを利用しています。