Vue.jsを実案件で使ってみて感じた、いいところとつまったところ(解決策あり)

Vue.jsを実案件で使ってみて感じた、いいところとつまったところ(解決策あり)

まろ

まろ

こんにちは、フロントエンジニアのまろCです。

実家に帰省するたびに、大体同じメンバーと再会しています。さて、年が明けてから時間が経ってしまいましたが、昨年関わった案件でVue.jsを導入したので、今回はその所感をまとめてみました。

Vue.jsとは

まずは、公式サイトでどんな説明がされているのか、確認してみましょう。

モダンな Web インタフェース向けのリアクティブコンポーネント

Vue.js公式サイト:http://jp.vuejs.org

非常にシンプルですね!

データバインディングに機能が絞られているため、フルスタックのフレームワークより学習コストは低いです。公式サイトは日本語対応されており、事例コンテンツもあるので、気になった方はのぞいてみてください。

なぜVue.jsだったか

Vue.jsを導入した案件の概要が下記のとおり。

案件概要
  • 開発期間が短い
  • フロントエンド、バックエンド設計を自分で担当
  • 1ページ内の情報量から、サーバサイドで全てレンダリングするのは重い
  • 仕様から無限スクロールでのデータバインディングが必要だった
  • 今後の拡張性が求められる

これらの理由から、情報のほとんどをAPIで取得し、レンダリングをフロント側でおこなう方がいいと判断しました。

また、それならフロントのフレームワーク導入という結論に至り、「以前MQTTでLINEっぽいWebアプリを作ったときに使ったVue.jsなら学習コストを下げられる」と思い、Vue.jsを採用しました。

実際使用しているのはAjaxでデータを取得して表示するというところがメインです。ディレクティブは使っていません。

そして今回からES6での開発に切り替えました。これも慣れるとすごくいいなという感想です。

Vue.jsを使って感じたいいところ

まずは、いいところから紹介していきます。

テンプレートをHTML上に書ける

もともとサーバ屋だからか、フレームワークというとMVCの頭になっているんです。ですから、viewをHTML上に書けることとコントローラとビューを分離することがすんなり入ってきて、書きやすかったです。

テンプレート部分でつまづかない

普段はHTMLをEJSで開発しています。Underscoreテンプレートを使っていた頃は、タグがバッティングして独自の設定をしていたのですが、動的部分が{{}}で書けるので、それがなくなりました。

Vue.jsを使ってつまったところとその解決策

次に、つまったところとその解決策を紹介していくので、Vue.jsを使う際に参考になれば幸いです。

テンプレートが一瞬表示される

下記のように記述して非表示にすることで対応できました。

<li class="list-item is-load" v-for="item in items" id="{{item.id}}">
~中略~
</li>
.list-items {
    display: block;
    ~中略~
    &.is-loading {
        opacity: 0;
    }
}

テンプレート内のimgタグでsrc属性が404エラーになる

v-bindという書き方で記述することで対応できました。

~中略~
<img v-bind:src="item.post_image" alt="">
~中略~

PC、SPをワンソースで開発していたため、touchendとclickでv-on:にバインドさせるときに困った

documentにonでイベントを設定することで対応しました。

~中略~
let event = (isSP === true)? 'click.itemlist': 'click.itemlist';
$(document).on(event, '#js-posts .list-item-btn.items', {_this: this}, this.toggleItemList);
~中略~

dataの配列を更新するときに、ループさせないとデータが入らない

下記のように記述して対応しました。

~中略~
for(let i = 0; i < items.length; i++) {
    //ひとつずつ追加
    this.items.push(items[i]);
}
~中略~

ちなみに、ES6の記述でfor(var val of list)の書き方だと、vuejsのデータ配列にうまく追加できませんでした。

改行コード(\n)をbrタグで表示させるときに、独自の関数とmustache(カッコ3つ{{{}}})で囲まなければならない(htmlエスケープ)

br2nlという関数を、フィルターでかけて対応しました。

<h2 class="list-item-comment">{{{item.post_comment | br2nl}}}</h2>

pjaxとの連携

ES6の書き方で各ページのクラス内でvueをnewにして使っていたので、pjaxで画面を更新したとき、リフレッシュさせる動作を書くのに、もっといい方法があった気がします。

Vue.jsのクラス内で作った関数をコントローラーで呼び出せるように、など……。

まとめ

実際に、これまでUnderscoreテンプレートで書いていた部分を書き換える感覚で導入したのですが、データバインディングと描画の部分を自動でやってくれるので、幾分か効率よく開発できたと思います。

AngularJSやReact.jsと言うと、コーポレートサイトをメインで制作している僕らには実案件導入のハードルが高いです。しかし、Vue.jsなら思ったより軽く使えるので、そこのハードルは下がってくるのではないでしょうか。

フロントエンド求む!

最後にお知らせです。

先日公開したメンバー募集記事の通り、僕らのチームではフロントエンジニアを募集中です。

僕らは新しいことに挑戦しつつ、コンセプト設計を大事にできる人と仕事がしたいと思っています。技術的な面だけでなく、クライアントの想いを汲みながら、一緒に課題解決の方法を考えていきましょう。

採用にご興味がある方はコチラまで。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

フロントエンドエンジニアのまろCです。 コンセプト設計中心でものづくりしています。

このメンバーの記事をもっと読む