「さくらインターネットのエンジニアは 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の採用理由：
- 覚えることが少ない。久しぶりに手をいれるときにも思い出しやすいんじゃないだろうか
- 公式のライブラリでまかなえるので継続メンテが期待。vue-routerとかVuexなど
- 日本語情報が充実している。Vue.jsの公式ガイドは親切丁寧でだいたい分かる https://jp.vuejs.org/index.html
- 人気と勢いが凄いのでメンテする人は後続ができる期待
実装の時に気をつけること
構成、命名規則について
コンポーネントの構成を決める際に、テストしづらい、使いまわせない、分割できないといったものにならないように気をつける 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を導入してみることにした。
スライダー
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
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でウェブサイトを作れるのか？（未完）
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を使わないと更新できない。
- 新しいため、まだまだ知見が少ない
