【Ringee開発記 #7】ナビゲーションバーを楽に使い回すためにVue.jsを導入してみる【夏休み毎日投稿 Day19】

こんにちは。小川智也です。

今回は夏休み毎日投稿 Day19ということで、Ringee開発の7回目を行っていこうと思います！

Vue.jsとは

そもそもVue.jsというのは、Web開発でよく用いられるフレームワークのことで、SPAや動的なUIを楽に作ることが出来ます。

Node.jsとかいろいろと組み合わせて使うのが一般的ですが、今回はSPAというよりかは後述するコンポーネント化系の機能を使いたいので普通にCDNから読み込んで使います。

導入方法

導入方法はバチクソ簡単で、cdnjsとかから vue.global.min.js を持ってきてサイトに貼り付けるだけです。

プロダクション環境用の vue.global.prod.min.js というものもありますが、開発版のprodがついていないもののほうがログが出たりといろいろやりやすいので今回は開発版の方で作業を進めていきます。

Wappalyzerでもちゃんと認識されています。（本来の使い方ではないかも？）

コンポーネント

ということでここからはお待ちかねのコンポーネントを触っていきます。

そもそもコンポーネントが何かというと、例えば静的サイトでたくさんページが有るときとかに、ヘッダーとフッターだけ別部品にしといたら一箇所の更新で全部変えれてめちゃくちゃ楽だしエコだよね？ってやつです。

一応ApacheとかPHPのincludeを使うことでもある程度出来ますが、Vue.jsをわざわざ入れるのには意味があります。

今回のRingeeではヘッダーにログイン名を表示しているのですが、ApacheとかPHPのincludeだと全部同じ内容になってしまうので名前を動的に書き換えることが出来ません。

多分無理やりゴニョゴニョなったらできるのかもしれませんが面倒くさいです。

しかしなんとVue.jsはこんな感じでdata属性として好きなデータを渡せるので、それを元にコンポーネント側で表示する内容をいい感じに変えることが出来ます。

今回のこの場合だとユーザー名をヘッダーナビゲーションのコンポーネントに渡しているので、こんな感じでコンポーネント側に変数を割り当てておくとしっかりユーザー名だけ変えることが出来ます。

Ringeeに導入してみた

Vue.jsを触るのがまあまあ久しぶりで忘れかけていたので、以前おがともの自宅鯖研究室というサイトを制作したときのファイルをGitHubから漁っていい感じに変えたらうまくいきました。

ちょろっとコードを書くだけで全部使い回せるのでマジで楽です。

ナビゲーションバーを動的にJavaScriptで読み込んでいる関係上、再読込すると一瞬だけナビゲーションバーが表示されない時間があって気持ち悪かったのですが、v-cloakという属性を付けてそれをdisplay;none;したらいい感じに治りました。読み込みが終わるまで非表示にするみたいなやつらしいです。

まとめ

いかがだったでしょうか。今回はRingee開発の7回目ということでVue.jsを導入し、コードの可読性と開発の生産性を上げてみました。

次回は請求管理画面を実装していきます！乞うご期待

最後まで見ていただき、ありがとうございました。