はじめに
jQueryは簡単にDOMの操作が可能Javascriptライブラリです。
今現在も現役で使われているWebサイト・アプリケーションは沢山ある中、昨今VueやReactといったフレームワークの登場やQueryUIやjQuery Mobileといったブライ ンが終了を迎えていることを踏まえ、ちらほらと終わったのでは?という声が挙がってきています。 実際には現在もバージョンアップを続けているのは事実であるため、終わったという表現は早計であろうかと思います。
とはいえ、VueやReactといったフレームワークでの開発を主流としたい!という開発者達の意向がビシビシと感じられるのも事実であり、これを無視するのは取り残さ れた技術者になってしまうリスクがあるため、脱jQueryを検討してみました。
jQueryへの不満
実は・・・個人的にはあまりないです。
自信が扱うアプリケーションの規模感によるものもありますし、これまで指で覚えてきた$ (セレクタ)の馴染みもあります。 他の要素との整合性についてはすべて手でやる必要性がありますので、バグの元となります。
一方でなんでもできてしまう反面、 こういった問題は双方向バインディングを用いることで解消しますし、双方向バインディングを用いることができるフレームワークを利用すればこういったバグは発生 しなくなります。
一般的には重い・・・といった意見でしょうか。 大衆向けのWebサイトのエンジニアにとってはこれは由々しき問題でしょうし、立場によって不満を持つ部分は異なりそうです。
選択としてはVueを選択
React と Vueのどちらか迷いましたが、Vue を選択しました。
特に深い思いがあるわけではないのですが小規模(小規模ってなんだろうってところからですが)開発向けである、公式サポートが充実している、独学でも身に着けや すい。といった記事を信じてみることにしました。
jQueryを使わないことへの不安
これまで、取得したデータをここの要素に挿入!など好き放題できたのが実現できるのか?という点です。 特にSSRであれば描画前に「ここの要素」というのが特定できるの?などといった点について心配しておりました。
また、これまでセレクタを用いてまとめてデータ設定・取得などもできましたが同様のことが実現できるのかについては不安でした。 (よく使うのは列にnameをつけるなどした現在の見た目上でのテーブル集計値です。)
結果
上記完全に杞憂でした。
データバインディングへの理解が乏しくこんな心配をしていましたが、v-modelに設定してしまえばセレクタ指定するのと大きく変わりませんね。 また、双方向バインディングにより値変化時にいちいち設定する必要もないため、「メモリは変更したが、表示に反映するのを忘れた」 などというケアレスミスは存在しなくなります。
もう一点心配していたテーブルデータ集計に関してはそもそも見た目のデータがバインディングされているため、メモリ上で集計= 見た目上の集計ができるためこちらも杞憂でありました。
一方、習得には苦労しました。 これまでUIフレームワークでの開発は行ってこなかったことに加え、せっかくなのでtypescript で書きたいという欲求が生まれたためです。 どちらかというとtypescriptに苦労したと思います笑
一つだけできなかったことがある・・・
紙形式のUIです。
業務系アプリケーションを作成する上で、見た目上紙を模したものというのは需要があります。 こういった場合Vueだけではどうしてもできないことがあり断念しました。
この話は別の機会にしたいと思います。
終わりに
結果とjQueryはまだ利用していますが、jQuery しか知らないから他の手段が取れないといった将来をつぶすことができました。 jQueryの技術はもっともっと先でレガシーシステムとして需要がありそうな気がしますので大切ですが、新しいことへのチャレンジも大事ですね。