YakuHanJPサイトトップにはフォントのシミュレーターを設置している。タブを切り替えることでBefore・Afterのフォントスタイルが切り替わる仕様。開発当初は全パターンの適応したフォントを羅列していただけだったので、それよりは良くなった。

ただ、v3.0.0時点はなんとかjQueryで作れたもの。押したタブにマッチするclassが付与されて他は消えるみたいなJSを大量（250行）に書いてる。追加する場合はHTMLを修正して、CSSを用意して、JSも書いてと結構大変。if文の粗探しも...。

• yakuhanjp/_simulator.js at 3.0.0 · qrac/yakuhanjp

「これって今ならVueでJSONからデータ引っ張って自動展開できるんじゃないの？」と思ったので、サイト移行に合わせて書き直してみることにした。

とはいえ、機能的なVueをほとんど書いたことがなかったので、mioさんのVue本とサイトでタブ切り替え的な書き方を復習。

• 基礎から学ぶ Vue.js | mio |本 | 通販 | Amazon
• 基礎から学ぶ Vue.js → 切り替えタブ

データリストを用意してv-forに流し込むのと、カレント判定するIDで出し分けるって感じかな。classをバインドさせればよさそう。タブはコンポーネント化。簡単そうなウェイト・サイズ変更を実装。

やっかいなのは、font-family に関するタブが3種類に分かれていること。インラインスタイルを変数にして部分的に書き換える？

あ、でも本当はウェイトまで絡めて条件分岐させないとなんだよなー...うーん。

JSONを3重にして呼び出すことにしよう。

"font": [
  {
    "id": 1,
    "label": "Gothic",
    "type": [
      {
        "id": 1,
        "label": "Full",
        "family": [
          {
            "id": 1,
            "label": "Hiragino",
            "switch_before": "is-font-sans-hiragino",
            "switch_after": "is-font-sans-hiragino-yakuhanjp"
          }
          ...

フォントがゴシック体かどうか、タイプはフルサイズかどうか、フォントの種類はヒラギノかどうかなどを、Vueに流し込みカレント判定を入れ子構造にする。また、項目の上限が変わってクラッシュ（undefined）する部分をメソッドでリセットさせるよう書く。

フォントファミリーの条件分岐ができた！

ウェイトの種類も条件分岐に混ぜて対応できたけど、使ってみたらボタンの増減が気持ち悪かったので分けた。あとは、現サイトで強引にpreloadしている処理をどうするかとか、Noto向けのfont-faceどうするかなどを考えていく。

preloadはGoogle Fontsのサブセットファイルの指定が難しいのもあり、結局は強引にやった。Noto向けのfont-faceは実装テスト中。

最後に、シミュレーターで選んだ組み合わせから、CDNリンクとフォントファミリーをその場で表示させるようにした。

使いたい見た目ができたら、その場でコピペできるコードが表示できるというのはWebサービスでは普通だし、長ったらしいコードの羅列をサイトから消せて一石二鳥だった。

これにて、YakuHanJPサイトのリメイクは完了したと言える。