プロポーザル

Vueがそうであるように、限定されたスコープのCSSを使ってUIコンポーネントを設計することが世の中の当たり前になってきました。
それを用いてUIコンポーネントを実装する時に必ず突き当たる難題のひとつが「余白」です。
私は、UIコンポーネントの開発時に検討すべき余白設計についてお話します。

余白は、目に見えないがために境界が曖昧ですから、
「このUIはどんなコンポーネントに分割すべきだろうか？」
というような問題に比べて見落とされがちです。
しかし実際に開発を行うとなると
「この余白をどのコンポーネントに実装すべきか？」
「取ることのできる選択肢は何で、それぞれにどんな影響があるのか？」
と悩まされることになります。
そしてひとたび方針を間違えれば、手を入れるたびに複雑化していくUIコンポーネントが出来上がってしまいます。
にもかかわらず余白設計の問題について語られる機会はそう多くはありません。

今回は、実際に開発と運用を行って得られた「何もない」を作るための余白設計の知見を共有します。

プライベートクラウド管理製品のFlash画面をVue.jsで全面改修しました。
70を超える画面数とドラッグアンドドロップで動作する画面など、複雑なUIを実現するにあたってなぜVueを選んだか、Vueを選んでよかったこと、改善したかった事、etcをお伝えできればと思います。

Table of contents
・改修にあたってVue.jsを選定した理由
・導入したフレームワークの紹介（抜粋）
・コンポーネントの分け方、共通化するコンポーネントの選定基準
・使ってみてよかったこと
・困ったこと
・こうしたらもっとよかったなと思うところ

Vue.js/Nuxt.jsをサポートするUIフレームワークには、
Buefy/Element-UI/Vuetify/Onsen UIなど多数あります。

しかし、
・使ってみたけれど自前で実装する方が楽だった。
・フレームワークのコンポーネントと既存のコンポーネントがうまく組み合わせられずデザインが中途半端になってしまった。
など上手く導入できないケースも多いのではないでしょうか。

今回は、
個人開発や社内システムのフロントエンドにUIフレームワークを導入した経験から、
・導入する際にハマったポイント。
・Atocmi Designをと取り入れた設計。
・短い工数で効率よく開発するTips。
などこれからUIフレームワークの利用される方が躓くことなく導入できるような知見を共有します。

本セッションでは、難しく複雑なアーキテクチャのお話しをするのではなく
実際にコードやテストのコードなどを交えながら、
「変更に強くなる」をメインテーマに幅広くお話しする予定です。

大規模となると携わる人数も増えてきます。
他のフレームワークと比べると、Vue.js は自由度が高いため、様々な箇所に処理が散りばめられがちです。
共通の処理がmixin に書かれているにもかかわらず、他のコンポーネントではべた書きされていたり、
コンポーネントのtemplate 内で直接store のstate を呼び出したりなど
自由に書けるからこそ、責務に分かれた構造化が大事だと考えています。

さらにサブテーマとして下記項目について触れる予定です。

• Vuex の使い所
• vue-test-utils を使ったテスティング
• ロジック、描画、通信などそれぞれの責務に分かれた構造
• beforeRouteEnter, created, mounted などの使い分け
• DDD

Rettyは立ち上げから9年間立っているサービスです。
開発当初から１つのモノリシックなリポジトリでPHP + jQueryで開発されてきました。
2017年からページの一部コンテンツに対しVue.jsを採用し、PHP + Vue.jsでSEO対策をしたページを作ってきました。

なぜVue.jsを選定したのか、jQueryからVue.js移行の話、Nuxt.jsを使わない素のVue.jsでのSEO対策の仕方、マイクロサービス化に伴いNuxt.jsに移行した話まで事例と共に紹介できればと思います。

2019年6月、沖縄でVue.jsを盛り上げようとv-okinawaコミュニティを立ち上げました。
Vue.jsの人気ぶりは、地方にも広がっています。

なぜここまで人気なのか、Vue.jsの1ユーザー（フロントエンドエンジニア）として感じていることを語りつつ、沖縄にVue.jsコミュニティを作ろうと思ったきっかけや実現までに苦労した話を紹介します。

地方にいてVue.jsの情報収集ができずに困っている方にとって、技術コミュニティの存在の影響は大きく、その手助けをしたいです。
Vue.jsを勉強し始めた方や、まだ実務で導入できていない方が次のステップへ進めるよう、実務や個人開発でVue.jsを使った事例も紹介していきます。

対象
・地方でもVue.jsを勉強しやすい環境が欲しい方
・Vue.jsをやってみたいけどまだ実務に取り入れることができていない方

Vue CLI, GraphQL, Vue Router, Vuex, Bulmaを用いて、一休.comレストランの管理画面リニューアルプロジェクトを高速に立ち上げてリリースした知見を紹介します。具体的には以下のトピックについてお話しする予定です。
・なぜNuxtではなくVue CLIなのか
・Applo Serverを使いフロントエンドエンジニアがモックを書いてAPI開発をリードするスタイル
・SPAとMPAの混成

Nuxt.jsで構築する管理者向けWebアプリケーションで、複数のロールとそれに紐づく権限を用いてユーザーのアクションをどう制限出来るのか、メンテナブルな設計をするにはどうすれば良いのかの知見を話します。

弊社サービス ChatDealer（https://www.chatdealer.jp）は、Laravel と Vue.js で構築された BtoC チャットボットシステム（SaaS）です。SPA ではない従来型の Web アプリケーションとして開発しています。

従来型は従来型なりに Vue.js を活用する上でのつらみがありました。それらを乗り越えた経験から分かった、不具合を防ぐための実装時のコツを紹介します。

• v-model と v-on:input を併用するべからず
• Vue インスタンスをマウントする要素の HTML は最初から render 関数だと思え
• サーバーサイドでの変数埋め込みは JSON に変換して行え
• Mustache injenction 脆弱性への対策を忘れるな

Mustache injenction 脆弱性とはサーバーサイドのテンプレートエンジン + Vue.js で発生する XSS 脆弱性ですが、知らずに作り込んで緊急対応をする羽目になりました。注意喚起のためにも特に詳しくお話したいと思います。

私が配属された部署では jQuery や Vue.js を用いてフロントエンドの開発を行っています。
配属されるまで JavaScript や jQuery の経験がほとんどありませんでした。
研修で Vue.js を学習し始めて、Vue.js は機能が豊富で、シンプルな記述法がわかりやすいと感じました。

Vue.js を触って、どんな機能が便利だったか、どういう点でわかりやすい記述法だと感じたかお話しします。
また、フロントエンドフレームワーク未経験者が jQuery とVue.js を同時に1年間学習して感じたこと、得られたこと、Vue.js と jQuery を比較してそれぞれの機能や記述法で感じたことをお話しします。
Vue.js の学習として技術書や公式のドキュメントを参照したり、サンプルプログラムを参照しながら実際にコードを書いたりしました。やってきた学習法で良かったこと、悪かったこと、学習でこうすればよかったと思ったこと、学習で何につまづいてどう克服したかについてお話しします。

「楽楽労務」(https://www.rakurakuhr.jp/) はVue.jsを採用した SPA 型の新規プロダクトです。フロントエンド開発者が少ないチームで採用した Vue.js。その背景には、モダンなフレームワークの中でも学習コストが少ないという理由がありました。しかし、実際のアプリケーション開発の現場では、このような Vue.js の恩恵を受けスピーディーな開発が進められた裏側に、フロントエンドフレームワークの経験が浅いゆえに工夫を要する場面も少なくありませんでした。このセッションでは、開発初期からリリースに到るまで、Vue.js だからこそ実現できたこと、SPA 開発には欠かせないノウハウをお話しします。これから Vue.js で開発を行うプロダクトの足掛かりになれば幸いです。
・Flux アーキテクチャを採用した”つもり”で積もったツラミ
・ネストしたコンポーネントにおけるイベント設計
・Vuetify を導入した UI 開発のメリット
・API ファースト設計でバックエンドとの連携をスムーズに
・フロントエンドで行う脆弱性（XSS, CSRF）対策の勘所

リーガルテック スタートアップのGVA TECHでは、
プロダクト上 Microsoft Office Add-insを開発する必要がありました。
Office Add-ins開発は、開発情報が充実しているとは言えず、手探りの中進めていかなければなりません。
また、サービス上、高い信頼性を要求されるため、
TypeScriptとAtomic Design、TDDを選択して開発いたしました。

Office Add-ins開発という情報が少なく狭い領域において、
取り組んだ実例をお話し、知見をシェアできればと思います。

具体的には以下についてお話する予定です。
・プロダクト及び技術選定の背景
・Office Add-insについての説明(開発環境、デバッグ周り)
・Vue及びTypeScript、Atomic Designを用いた開発について
・TDD と テスト用Frameworkを用いた開発について
・現状の課題と今後の見通しについて

クラウドサインでは、
テンプレートエンジン + jQuery の構成から Vue.js への移行を行っています。
ドラスティックに Vue への移行を行っている例が多々あるなか、
私のセッションでは Progressive に移行している話についてご紹介します。

具体的には以下の取り組みについて説明します。

• Vue 導入に至るまでの背景
• 移行方針についての勘所
• 実運用に乗せるための Webpack の構築、開発ルール
• 移行範囲の切り出しと Atomic Design　およびデザインシステムとの兼ね合い
• 実際に 1 画面を通して部分的に導入した例についてご紹介
• 今後の見通しや課題

私はこれまで15件以上Vue案件に関するコンサル＆開発に携わっています。そのうちの一つ、某スタートアップ様Nuxt開発案件に参加した時点で、既にメンテナンス不能状態となっていました。

例えば、

• ページをまたがるグローバルなストアが混沌としている
• 関係ないページ用のストアの冗長なロードが起きパフォーマンスが悪い
• SEOが重要にも関わらずサーバーサイドレンダリングを導入できていない
• Firebase認証に関連し一部のユーザーが永遠にログインできない致命的なバグの発生
• ページ遷移時のUIチラツキが頻発
• などなど

なぜそのようなことが起こってしまったのでしょうか？結果的に、サービスの質の低下に繋がってしまう状況が続き、改善のプロセスを早急に見出していく必要がありました。

開発チームの体制の問題もありましたが、CFP時点で現在進行形でコード・設計レベルで改善を行なっています。

今回の案件を通じて得られた"Nuxtバッドプラクティス"の知見のご紹介と改善方法提案についてお話ししたいと思います。

Nuxt.js を採用する開発現場での、開発体制などを事例とともに紹介します。
Vue.js の魅力を活かしながら、エンジニアだけではなく、
デザイナー、ディレクター、学生アルバイトなど様々な Role の人々を
Nuxt.js 開発の現場に巻き込んでいくための「開発のカタチ」を紹介します。

Vue.js（Nuxt.js）の豊富なライフサイクルフックを余すところなく活用し、理想の女の子が粘着性の強い離脱防止を行ったり、ついつい広告に誘導させようとおねだりしてくる、いわゆるヒューマニティを探求するサービスを作ってみました。その際に思いついた各ライフサイクルフックごとのUSECASEやレシピなど、リアルな開発現場で応用可能な知見ができました。SPAでさくさくとブラウジングしながらコンテンツを楽しみつつ、Googlebot向けにSSRを提供し、SEO FriendlyなNuxt.jsで実装してみました(WIP)。

ここ最近、TypeScript の導入事例が各社で増えてきています。Retty のコードは、9年間運用されており、2017年にjQuery から Vue.js に部分的に移行をしていますが TypeScript は導入していませんでした。大規模サービスになると、型に守られた世界でコードを書きたいですよね。Retty も一部分アーキテクチャの刷新の時に、フロントエンドに Nuxt.js + TypeScript、サーバーとの通信に GraphQL を導入しています。型がある安全な世界になった一方で、型のない世界に型を持ち込んだ辛さもあります。また、型定義ファイルが提供されていない外部パッケージの変化に追従していく大変さもあります。今回は、型のない世界にどのように型を組み込んだかや開発速度、運用コストについてお話しします。具体的には、VueTypes からの移行やAPI のインタフェース などについてになります。

Promise を使った状態遷移を伴う Vue Component は広く見られますが、それらのステップを踏んでテストするのは少々難しさが伴います。
このトークでは、社内で発見された「お漏らし Resolve」という手法を用いて Promise の resolve を待っている間の Vue コンポーネントをテストする方法をご紹介します。

今年、個人ブログの一部を Nuxt.js に移行しました。
個人的に Vue.js が好きで、以前は Ruby on Rails の Webpacker を使用して Vue.js で SPA ページを作成していました。

Vue.js 単独で運用することを考えてはいましたが、SPA となると、どうしても OGP の問題が付きまといます。
すでにその問題に対応したドキュメントや記事を拝見しましたが、私は Rails で head を レンダリングする選択をしていました。
ただ、 Nuxt.js により、サーバーサイドレンダリングを含め、選択肢がとても広がったと思います。

現在は、静的ファイルを生成する方法で運用しています。
今回の発表では、Nuxt.js でブログを作成したことを踏まえ、サーバーサイドレンダリングや静的ファイル生成など、個人的に検討したことの共有をさせていただきたいと思います。

Vue.jsとAngularでそれぞれ違うアプリケーション作成した時の比較を行います。
※もしかしたらAtomic Designに関するタイトルに変更する可能性あり