こんにちは、フロントエンジニアのまろ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なら思ったより軽く使えるので、そこのハードルは下がってくるのではないでしょうか。
フロントエンド求む！
最後にお知らせです。
先日公開したメンバー募集記事の通り、僕らのチームではフロントエンジニアを募集中です。 【Dir/De/エンジニア募集】クライアントの近くで、チームで、いいものをつくっていきましょう。
北川パーヤン
僕らは新しいことに挑戦しつつ、コンセプト設計を大事にできる人と仕事がしたいと思っています。技術的な面だけでなく、クライアントの想いを汲みながら、一緒に課題解決の方法を考えていきましょう。
採用にご興味がある方はコチラまで。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
