Edited at

bootstrap + jQuery 環境のプロジェクトに Vue を導入したときの苦労話


概要

既存の bootstrap + jQuery でフロントがんばってるプロジェクトに Vue.js を導入した話です

その導入経緯とか色んな詰まったとこ書きます


構成と背景


  • サーバーはPHP(Symfony 系譜のフレームワーク)

  • テンプレートエンジンは smarty

  • bootstrap

  • jQuery

  • webpack でビルド(js はローダーなし)

僕は該当プロジェクトにほぼほぼ未経験者として途中から参加したのでスタートアップの経緯を深く理解してるわけではないですが、

極端にシンプル構成には経緯があったと聞いてます

リリースまでの期間がかなり限られていた、人員不足のためあまり経験のない人も入りやすくする必要があったり、バイトでも気軽に参加できるよう、保守し続けれるよう学習コストを優先していた ...... etc

そのため、本投稿は別に既存の bootstrap + jQuery な環境をディスるものではないのでお見知りおきをば


導入経緯

じゃあなんで Vue 入れようと思ったんや?って話ですが

単純にリリースして時間が余って暇だった 工数にゆとりが出てきて複雑な要件にも対応する必要があって、、、という感じです

特に以下のようなつらさがあったため、今後のフロントサイドの複雑な要件を叶えるためにも必要となりました


つらさ① 直DOM操作

技術選定の中で最優先したことは、「見通しのよさ」です

この時点で仮想DOMにしよって決めました

$("#sample")

.append("<table>")
.append("<tr><td>サンプル</td></tr>")
...
...

俗に言う、直DOM操作です

プロジェクト内ではまだ限定的な使われ方しかされてなくまだ見通しがよかったですが、今後 ... を考えると辛かったです

仮想DOM操作を知ってしまうと、列数+行数の違うデータを動的に ... なんてのを直DOMでやると死にます

何がつらいかって理由のひとつは、あとでどういう DOM になるのか?を脳内で結構がんばって構築する必要がある点です

特にエンジニアって 3 ヶ月前の自分が書いたコードを忘れる鳥頭集団じゃないですか?(偏見)

これ何書いてたっけの思い出すコストが高いです

これが Vue だと

<template>

<div>
<table>
<tr v-for="item in items">
<td>{{ item.title }}</td>
</tr>
</table>
</div>
</template>
...
...

簡易ですがこんな感じの見通しの良い感じにまとめられます

これだと後々の改修にも柔軟に対応できますね :thumbsup:

これで後で見返すことになる未来の自分やメンバーに恨まれずに済みます

この見通しのよさが Vue を導入するに至った経緯の一つです

そして Vue の導入により複雑な要件に対応しやすくなりました


学習コストがつらい

背景で説明した通り、保守を続ける上で学習コストは外せません

特に属人化が進んで同じプロジェクトに縛り付けられるってのはコリゴリだったので、技術選定をする段階では、見通しのよさ以外に「学習コスト」も優先して考えました

同じ仮想DOMのReactももちろん技術選定の中には含まれていたのですが、Vue と比較すると覚えるところが多い印象でした

Vue は単体で扱う場合、覚えることが極端に少なく済みドキュメントやコミュニティも充実してます

そういうとこも選定理由の一つでした


Vue の導入にあたって

同じ学習コスト面で言うと riot.js も候補として上がってました

riot.js は公式で、「Simple and minimalistic」をうたってる通り、シンプルで小さいです

覚えることもめっちゃ少なくて、実際既存のちょっとしたタグを riot に置き換えるということをやってみました

ただ、もっとがっつり何かやりたいと言うときにちょっとシンプルすぎるなと言う点がありました

後大きかったのが、 PHPStorm への対応です

エディタは PHPStorm を使ってたんですが、 PHPStorm って *.tag に対応してないんですよね

*.tag を *.html として読み込ませることで多少マシになるものの、いや、ハイライトそうじゃないやん ...... みたいな感じになってました

その点 *.vue は PHPStorm に対応してるのがデカかったです

とは言っても、後述の webpack の問題があり、しばらくは Vue を素の javascript から使ってました

素の js からも使えるという点が vue の良いところのひとつですね


ES6構文が使えなくてつらい

Vue を導入するというところと直接的な関係はない ... というかそれ以前の問題です

なぜか webpack が導入され js のビルドが行われていましたが、babel を代表とするコンパイラを使ってなかったです

js 管理ディレクトリに入れると *.js にビルドされる仕組みでしたが、

js ファイルに es6 構文を記述するとビルドの過程で対応してる loader 使ってね !! っていうエラーで怒られてビルドが通らなくなります

例えば vuex とかでも頻出するスプレッド構文とかは外せない ... と思って babel を導入するに至りました

でプロジェクトに導入する時に知ったんですが、babel-present は es2015 から env っていう自動で判別してくれる便利なやつに変わったみたいです

https://babeljs.io/docs/en/env

こういう記事をみるとリリース自体は結構前からあったんですね

https://qiita.com/ryuone/items/13f5d450c3865709ba10

一体、いつになったら自分は現代に追いつけるのか ......


ビルド時間がつらい

さて、Vue も導入した es6 構文も使えるようになった

とここで気になりましたわ、「ビルド時間 !!」です

結構リリースまでの過程でビルド項目も増えていて、めちゃめちゃビルドが遅いです

(一回で 5 分とかかかってた気がします)

こんなんじゃいくら便利なライブラリ使ってても開発ツライダケだよ !!って嘆いてて

この時間が毎回ほんとイライラで、vuecli なら ... laravel なら ... と音叉の念を吐き出す日々でした

そんなときにこの記事と出会いました

https://blog.box.com/blog/how-we-improved-webpack-build-performance-95


Result: build performance improved by 95% (from 3 hours 21 minutes to 9 minutes)


結果が何よりもすごいですが、before のビルド時間を見て世界って広いなって思いました

結果的にここに書かれているキャッシュを試してだいぶ改善されました

ビルド時間の改善の影響で webpack --watch での差分ビルドも早くなりストレスフリーになりました


最終的に


  • babel を通すようになって es6 構文を始めとする新しめ構文に対応できた

  • vue-loader で *.vue 使えるようになった

  • キャッシュ化でビルド時間の高速化

当たり前のように vuecli とか nuxt.js とか laravel みたいな快適環境を享受していましたが、今回の体験でそういった便利ツールのありがたみをより感じました :thumbsup: