jQueryでゴリゴリ書いたコードをVue.jsで書き換えてみた話

こんにちは。IT界隈に飛び込んで2年弱の見習いエンジニアです。

少し前から現在の自身のスキルセットを鑑みた時に、そろそろJSフレームワークをいじれるようにならなきゃな…と思い始め、なかなか機会を作れずにいました。

そして最近になり、jsのフルスクラッチ開発で【非同期通信で取ってきたjsonデータを各クリックイベントなどで切り替え表示する】というような機能を実装しました。

普段CMSでかろうじてPHPのみを触ってきただけのわたしからすると、そこそこに苦戦しましたが、なんとか機能として実装完了したところで「そうだ！フレームワーク使ったコードも書こう！」と思い、早速書いてみました。

今回は比較的とっつきやすいと噂のVue.jsで組み込んでみました。
全体のコードを説明すると長くなってしまうので、今回はajax通信などの記述は省いた単純な記事表示切り替えの部分だけ比較してみます。

機能としては「おすすめとして設定されている記事だけを表示する」タブと、「記事全件を表示する」タブを用意し、クリックすると該当する記事を表示する機能です。

最初にjs+jQueryのコードです。
上記のCodePenよりjs記述のみピックアップしました。

const $articles = $('.article__wrap')
const $tab = $('.c-tab__child')
let ajaxResultJson = {} //記事全件のjsonを保持
let articleJson = {} //記事絞り込み時のjsonを保持
let showArticleNum = 12 //表示したい記事件数
let tabVal = ''

$(window).on('load', () => {
 appendArticle('最新記事')
})

//クリック
$tab.each((index, el) => {
   //どちらのタブをクリックしたか判定
   let $this = $(el)
   $this.click(() => {
     $tab.removeClass('is-select')

     //クリックしたタブの背景色を変更・表示テキストを変数に入れる
     if($this.attr('class').match('recommend')) {
       $('.recommend').addClass('is-select')
       tabVal = 'おすすめ記事'
     } else {
       $tab.not('.recommend').addClass('is-select')
       tabVal = '記事全件'
     }
     newSort()
   })
})

//jsonを絞り込む関数
const newSort = () => {
   //記事内容を一度全件にリセット
   articleJson = ajaxResultJson

   if($this.attr('class').match('recommend')) {
     // filter関数で記事を絞り込みする
     articleJson = articleJson.filter((item, index) => {
       if(item.popular === true) return true
     })
   }

   $articles.children().remove()
   $articleWrap.hide()
   appendArticle(tabVal)
   $articleWrap.fadeIn()
 }

const appendArticle = (title) => {
 for(let i=0; i<showArticleNum; i++) {
   $articleWrap.append(`
     <article class="c-article__child">
       <p>${title}</p>
     </article>
   `)
 }
}

コメントアウトで細かく説明を添えていますのでそちらと合わせて読んでいただけるとわかりやすいかと思います。

次にVue.jsでのコードです。

//HTML部分
<div class="l-wrapper">
   <div class="c-tab">
     <div
       class="c-tab__child recommend"
       :class="{'is-select': recommendFlg === true}"
       @click="recommendTabClick()"
     >
       {{ recommendText }}
     </div>
     <div
       class="c-tab__child"
       :class="{'is-select': recommendFlg === false}"
       @click="newTabClick()"
     >
       {{ newText }}
     </div>
   </div>
   <div class="c-article">
     <article
       class="c-article__child"
       v-for="i in showArticleNum"
       :key="i"
     >
       <p>{{ tabVal }}</p>
     </article>
   </div>
 </div>

//js部分
export default {
 data () {
   return {
     articleJson: {},
     recommendFlg: false,
     showArticleNum: 6,
     recommendText: 'おすすめ記事',
     newText: '最新記事',
     tabVal: ''
   }
 },
 mounted () {
   this.tabVal = this.newText
 },
 methods: {
   newTabClick () {
     this.recommendFlg = false
     this.tabVal = this.newText
   },
   recommendTabClick () {
     this.recommendFlg = true
     this.tabVal = this.recommendText
   }
 }
}

CodePenのものと全く同様の機能になります。

コードを比較して処理を追うと、変数の変化に応じて変わる部分が格段にわかりやすいなと感じました。

フレームワークってやっぱり便利ですね…これからいろいろなものを試してみたいなと思いました！！