モミキん更新情報ブログ

パズドラのスキル検索サイト『モミキん』の情報発信ブログ

古いjavascriptからの脱却。

どうも、モミジの「スキル、なんだっけ?」の管理人ことかまぼこです。 開始2日目にして既に何を書くか思いつかなかったダメ執筆者です。 (無理に書くものでもないですが)

モミキんの構成要素の中で大きな役割を占めているものについて考えた結果、Vue.jsとService workerの2つかなと思ったので、今回はVueについて思ったことを書いていこうと思います。

Vue.jsとはMVVM的にHTMLとjavascript(ロジック)を結びつけるためのフレームワークと呼べばいいのでしょうか。(実はMVVMがどういうものかよく分かっていない民)

MVVMについて詳しく語れない身ですがVue.jsを使う上で自分が感じたのは、ロジックを主体にしてコードを書きやすい、ということです。 (プログラムを書いたことがない人だと想像しにくいかもしれません。。)

かつて引きこもり時代に、jQueryを多用した自分用ツールやウェブサイトを作ったことがあるのですが、この時、ある問題に陥っていました。 作ったサイトは言ってしまえば単に、動画像をアップロードするとタグ情報に応じて分類し、表示するだけのものだったのですが、一覧ページを作るためのロジック、div内に要素を並べるロジックなど、見た目を制御するロジックが大量にあり、プログラミングと言いつつ、その実HTMLを生成するスクリプトを書いている気分でした。

一方、Vueを利用したモミキんでは見た目を制御するロジックは、文字サイズのシークバーによる変更とモンスター一覧の幅を自動計算する部分だけです。(これも元々はCSSで解決していましたが、競合する設定を回避するためにjsで対応しました) 他の見た目に関する設定はすべてHTMLとCSSに一任されています。 このため、ロジック側は単にデータを配列やオブジェクトに格納するだけで良くなり、見た目とロジックを同時に考えさせられる苦痛から解放されました。

Vueである必然性はないかもしれませんが、素のjavascriptjQueryによるHTMLの改造から脱却できたのはとてもいい経験でした。 今回はこの辺りでおしまい。Service workerについてはまたそのうち。