Vue.jsでCSSスタイルガイド作成に挑戦！！残課題解決編２
近所のファミマで支払いを「ペイペイで」と言ったら「え！？」と2度聞された kouraku です。
おはこんばんちは。（いつもはSuicaで支払ってる）
さてさて前回は、『Vue.jsでCSSスタイルガイド作成に挑戦！！』の残課題解決準備と原因を探り、結果 script.js 再実行のタイミングと方法が分かれば解決に近づくはず！という結論に達しました。
【前回】Vue.jsでCSSスタイルガイド作成に挑戦！！残課題解決編１
script.js の内容を再実行するタイミングを考える
では、まず script.js を再実行させるタイミングを考えて見たいと思います。
Vue.js の公式ページより、ライフサイクルダイアグラムを見て見ます。
new Vue() から始まって、諸々要素が整い表示される時点が mounted で、この時「外部JSから実行」のメッセージを流しています。
libs ボタンをクリックして画面が切り替わる状態は、「when data changes」により派生するタイミング updated に該当します。
つまり、ここで script.js を再実行することができれば・・・問題は解決できそうです。
script.js の再実行方法を考える
考え方として気をつける点は、CSSスタイルガイドで使用するJSは、どんな処理が書かれているか全くわからない、言い換えると、CSSスタイルガイドのために作ったものではない、ということです。
よって、あらかじめ Vue.js 側に slick を表示させる処理を入れる、とかは全く意味がないのです。CSSスタイルガイドを用意するサイト（本体）で使うJSを動かさないとダメなのです。
ということで、試しに updated のタイミングで毎回 script.js を読み込ませる処理を入れて見ます。
お、なんか重いけど、slick が動きました！！！
ただし、生成されたHTMLを見てみると・・・
当然、updated の度に script.js が追加されているわけですから、どんどん増殖してこんな状態になってしまいます。 ・・・これは、なんとかしたいですね。
力技で解決！？
ということで、増殖を止めるために、以下の処理を加えたいと思います。
- update が走る度、クラス 'add-js' がいたら削除。
- クラス 'add-js' を付与した形で JS を追加。
これで、増殖することがなくなりました。
しかし、新たな問題が・・・！？slick を使っている libsカテゴリを開いた状態で再度 libs をクリックすると、エラーが出てしまいます。
ということで、小手先の技術で、現在開いている画面のボタンはクリックできないようにしてしまいましょう。
current の状態を追加する
guide.js には以下を追加します。
- data に 「current: 0」（初期状態は0）。
- methods内に、current を設定する setCurrent、current を判定する isCurrent。
html には、ボタンクリック時に setCurrent を走らせ、current の状態によりクラス付与させるコードを追加します。
最後に、ボタンに .current が付与されている時に、色が変わり、クリックできないよう CSS に定義を追加します。
結果は以下の通りです。
これで、同じ画面のボタンを押せなくなり、エラーが出なくなりました。
（plunkerだと、処理が遅くなってエラーが頻発することはあります・・・）
まとめ
とりあえず形にはなったので、解決編はここまでとします。
読み込ませるJSによっては、まだまだ不都合な点がいくつか出てきたりします。
例えば、JSでタグを追加していたりすると画面が切り替わるごとにそのタグが増殖していく・・・とか。色々と厄介な問題は尽きません。
もっとスマートなやり方がきっとあるんだと思います。見つけ次第、また改めて報告できれば・・・と思っています。
にしても、チャージ不要でクレジットカードで直接支払うことができるペイペイ、便利ですよね。しかも今ならポイントバックがでかいでかい。
ただひとつ難点を挙げるとすると・・・クレジットカードの明細が細かすぎて見辛くなるということ。まぁ、逆を言えば何を買ったかが分かりやすくなる、というメリットにもなるわけですが。
ペイペイ、しばらく使って行こうかと思います。
