「さくらインターネットのエンジニアは Vue.js をこんな風につかってます」レポート #さくらの夕べ

connpass.com 10/25（水）に、さくらインターネットが主催の「さくらの夕べ」にてVue.jsの業務内活用についての発表がありましたのでそれの個人的まとめです。こういう話聞くと久々にやるかみたいなモチベになります。（はやくやれ）

第1部「はじめてのビュウ」

はじめてのビュウ from さくらインターネット株式会社

www.slideshare.net

さくらクラウドの料金シミュレーションをVue.jsで作った https://cloud.sakura.ad.jp/payment/simulation/

経緯

もとはAngular1系。UIはそのままで一部のみ変更。URLでの記憶機能や時間割計算も対応できるようにした。

課題

メンテコストがキツイ。フロントと何故かバックエンドのダブルメンテ。

Vueの採用理由：

1. 覚えることが少ない。久しぶりに手をいれるときにも思い出しやすいんじゃないだろうか
2. 公式のライブラリでまかなえるので継続メンテが期待。vue-routerとかVuexなど
3. 日本語情報が充実している。Vue.jsの公式ガイドは親切丁寧でだいたい分かる https://jp.vuejs.org/index.html
4. 人気と勢いが凄いのでメンテする人は後続ができる期待

実装の時に気をつけること

構成、命名規則について

コンポーネントの構成を決める際に、テストしづらい、使いまわせない、分割できないといったものにならないように気をつける ItemContainerという親を作るとItemGroupの場合はどっちが親？となる

<ItemGroup>
  <ItemContainer> <= こういった構成なら分からなくもないが単体だと分からない
    <Item />
    <Item />
  </ItemContainer>
</ItemGroup>

Catrgory、ItemListなどの的確な名前づけをした。親子関係と役割を想起しやすいようにしよう

<Category>
  <ItemList>
    <Item />
    <Item />
  </ItemList>
</Category>

ディレクトリ構成について

• 単一では意味をなさない組み合わせではじめて意味をなす <components>
• 単一で機能できるコンポーネント <layouts>
  • 関連するものはひとまとめにしておく
  • スタイルも一緒に梱包する

buttons
├─ AddFieldButton.vuw
├─ RemoveFieldButton.vue
└─ SaveButton.vue

bill
├─ bill.vue
└─ bill.scss

• view全体を表すコンポーネント<pages>

VuexでのStoreについて

Store構成 => コンポーネント内部だけで知っておくべきこと（タブの開閉）、全体として知っておきたいもの（合計金額）を洗い出していく。

アプリケーションが大きくなると見通しが悪いが、Vuexのmoduleで見通しをよくするようにしておく。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> `moduleA` のステート
store.state.b // -> `moduleB` のステート

第2部「Vue.js 導入の経緯と実例紹介」

経緯

さくらインターネット上にはさまざまなwebサービスがあるが、実はフレームワークが乱立している問題があった（好きにやっていい裁量がある）

• Angular
• Vue
• jQuery
• prototype
• ember

課題

• 結果としてプロジェクトへの参入コストが増大している問題が起こる
  • 似たような機能開発でもフレームワーク毎に別の実装になったり、技術が分散され共有されにくい
  • いつの間にかフレームワーク使われてたけど知られてなかったのようなことが起きる
  • ほか学習コストや属人性について
• フルスタックフレームワーク（Angular）を使うにしても開発のスタートを切るためには時間がいる
• デファクト・スタンダードとなるものを選定する必要がある

Vue.jsの普及

そんな中、社内SlackにVue.jsを推す影響力のある人がおり、反応してみた。 実はウェブアクセラレータや幾つかの過去のプロダクトにはVue.jsが使用されていた模様。

何とかして良さそうなVue.jsを普及してみたい。が、実績についてはあまり無かった（ウェブアクセラレータくらい）。 そのため、社内での利用事例を増やすために小さいプロダクトからVue.jsを導入してみることにした。

実際に取り入れてみる

さくらインターネット20周年に際して、TOPページのリニューアル案件が立つ。そこで一部にVue.jsを導入してみることにした。

www.sakura.ad.jp

スライダー

Ajax読み取り箇所

Vue-resourceを使用。

Vue.jsでの制作実績

色々ある #さくらの夕べ pic.twitter.com/7XUOfeiJ2l

— 28歳 (@yamanoku) 2017年10月25日

やってみた結果

• デザイナーと協業しやすそう（シンタックスとして分かりやすい）
  • エンジニアとデザイナーが分業しやすい
  • ロジックとhtml、スタイル箇所がtemplete内で分けられるので棲み分けが良さそう
• 導入スピードがダントツでよかった。
• 日本語ドキュメントが充実している、プラグインが豊富なのも良い
• CDNなどでソースに直接入れ込むことが出来るのですぐ使える
• Vue.jsはあくまでもjQueryの置き換えになるわけではない。新たなロジックの書き方を知る必要はある
• 2.5が出るまではTypeScriptの対応が未知数だった
• 他のフレームワークも良い部分があるので、Vue.jsを使うなら「なんでVue.js使うんですか？」に答えられるようにする
• 今後の開発において大きめのコントロールパネルでVue.jsを導入する予定

第3部 「とにかく楽してVue.jsでTypeScriptを使いたい」

ダーシノさん https://twitter.com/bc_rikko

• さくらクラウドのネタ機能担当フロントエンジニア
• Vue1.x系での2行Contributor

とにかく楽してVue.jsでTypeScriptを使いたい from さくらインターネット株式会社

www.slideshare.net

静的型付ができることで最近話題になっている（ことにしてほしい）TypeScript。 Vue.jsでもせっかくなので使ってみたいと思ったけどVue2.4以前ではかなりつらいことが多かったのだが、Vue 2.5からTypeScript統合の改善がされ、だいぶ楽になったよという話。

今回はサーバーサイドエンジニアもメンテナンスができるように、ということで型定義がおそらく好まれているだろうことを推測し、TypeScriptを全面導入。

this や props の型推論ができて、class構文ベースの記述が以前は必要だったがそれがいらなくなるなど改善された箇所が多く、つらくなくなった。 jp.vuejs.org

便利なVue.js + TypeScript体験一式も配布。ありがたい。 github.com

第4部 NUXT.jsでウェブサイトを作れるのか？（未完）

ja.nuxtjs.org

Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。

具体的には何ができるのか？

• SPA
• SSR
• 静的サイトジェネレーター <= 個人的にコレを試したいと思っている

静的ジェネレーターの代替

• WordPress
• Hugo

を他にも検討しているが、Vue記法をつかいたいため、Nuxt.jsを推したい。

コマンドで切り替え可能

"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
}

SPAにする場合は --spa オプションを付与。

問題点

• アプリのヘッダーやHTML属性はvue-metaを使わないと更新できない。
• 新しいため、まだまだ知見が少ない

参考・関連URL

• SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！ - WPJ
• Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 | HTML5Experts.jp