プロポーザル

Gridsome は、Vue.js のフレームワークで、高速で、SEO フレンドリーなサイトを作れます。

Gridsome、静的なウェブが得意ですが、もう１つ。GraphQL で豊富な入力を扱います。例えば WordPress、これは多くの運用とノウハウが必要。テーマには相応の WordPress力。

もし WordPress の テーマを、既存のウェブフロントの技術で実現できたら。テーマに Vue.js を使うのではなく、Vue.jsのままに使う方法です。

本セッションでは、Gridsome をベースに、Serverlessr WordPress を活用した、WordPress のサイトをウェブフロントの技術だけで、まったく新しく作り出す方法についてお話します。

WordPress は 全ウェブサイトの 30%超、それを Vue.js ファミリーが全く新しい世界に作りだすお話をします。

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

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

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

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

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

大規模開発（2年1000人月Over）でのVue.jsの採用について、工夫した点を共有できればと思います。

・大規模開発でVue.jsを採用した理由
・モジュール分割とディレクトリ構造
・アーキテクチャー設計のポイント
・開発環境とツールを活用したバックエンドエンジニア、オフショアエンジニアの底上げ
・TypeScriptの活用とTypeScript化で使用したライブラリ
・モック化による早期検証

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

Vue.jsやReact.js、最近ではNuxt.jsを利用したSPA開発は現在では当たり前のものとなっています。
初回ロードが完了すればその後の動作が軽快であるなどの理由で採用され、最近ではPWAによるネイティブに近い体験の実現などが目的となることもしばしばあります。

しかし、本音を言えばSPAの機能面での優位性ではなく、Developer Experienceを目的に採用している場合も多いのではないでしょうか。
フロントエンド開発者には、モダンJavaScriptフレームワークも、モジュールバンドラも、HMRも今やなくてはならない存在ですし、当面SPAが優位な状況は続くでしょう。

一方で、自身が取り巻く技術のバックグラウンドと妥当性を常に意識するのは重要なことです。
例えば、アクセス頻度は多いが滞在時間は短いメディアのようなサイトで起動コストが重いSPAは妥当なのでしょうか。例えば、Universal Applicationにに、複雑な状態管理は求められているのでしょうか。

このセッションでは、なぜ私達がSPAで開発するのかを、今あらためて言語化してみます。

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の混成

近年盛り上がりを見せているPWA(Progressive Web App)ですが、Nuxt.jsにはPWA ModuleというPWAを実装するためのモジュールがあります。
このモジュールを使えば簡単にPWAを実現することができますが、簡単すぎるためにどんなことをしているのか理解して利用している人は多くないように感じます。

今後、PWA開発の需要や事例が増えていく中で、PWAに関する理解や知識は、更に必要なスキルになっていきます。

個人でNuxt.jsを使い何本かPWA開発をして得た経験とスキル、PWAのコミュニティ運営をして得た知見を元に、以下のようなことを紹介できればと考えています。

• PWAの現状とこれから
• Nuxt PWA Moduleを通して見る、PWA開発に必要な実装
• Nuxt PWA Moduleをカスタマイズしていく手法
• 導入事例とカスタマイズ例

PayPayモール（※1）というECにて、将来的なAMPキャッシュ（主にトップ, 製品ページ）を見据えてAMPコンポーネントをVueコンポーネントの上に乗せてコンポーネントを実装した。
それをNuxt hooksのgenerateを拡張し、AMPValidatorに通る形でスタイルやスクリプトを最適化させてテンプレート（※2）を生成している。
単純なamp-imgのみならず、amp-list, amp-carousel, amp-stateやamp-lightboxといったAMPでサービスを作る上で重要なコンポーネントもVueに乗せてエコシステム化している。

Hooks拡張のNuxt（Vueコンポーネント）とAMPコンポーネントの親和性の高さ、
細かな手法や設計、実装のTipsなどについても事例をご紹介できたらと思います

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 脆弱性ですが、知らずに作り込んで緊急対応をする羽目になりました。注意喚起のためにも特に詳しくお話したいと思います。

「STUDIO」はコード書かないでWebサイトを作れるデザインツールです。（もちろんVue.js製！）
別の視点から見るとGUIでコードを生成するジェネレータでもあります。

これまで静的なWebサイトしか作れなかったSTUDIOが、今年に入ってから動的なものを作れるように開発を進めています。
この時重要になってくるのがVue.jsやReactなど昨今のフロントエンド開発で登場する「Component」の概念の可視化（GUI化）でした。
また、GUI化によってVue.jsとReactのComponentの設計思想の違いが見える形で現れてきました。

「Component」のGUI化を通じて見えてきた知見を中心に、
実際にデモをしながら新しいデザインプロセスの提案もしようと考えています。

私が配属された部署では 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）対策の勘所

2019年10月1日、日本では消費税の軽減税率が実施され、
多くの金額を取り扱うサービスが影響を受けることになります。

とある請求書の発行・管理サービスにて、コアとなる金額計算のフロントエンドコードは、
グローバル依存かつDOM依存も強く「魔境」と化しており、誰も触れたくない状態でした。
そんな中、軽減税率対応のために大幅な改修が必要となり、
並行して機能開発が進むことを考慮するとVue.jsへの置き換えが必要であると判断しました。

ゼロからのVue.jsアプリケーションの構築であれば、書籍やWeb等で参考となる貴重な情報を多く存在しますが、
すでに稼働している環境への導入ノウハウはあまり存在しません。

軽減税率対応を乗り切った経験から、本セッションでは次のような内容をご紹介できればと思います。

• リスクの高いレガシーコードをいかにして段階的にVue.jsに置き換えたか
• 置き換え時に安全を確保するために何をしたか
• 並行する機能開発への影響をどう抑えるか
• 得られた学びやノウハウ・今後の展望

概要
私はこれまで教わったデザインフレームワークやプラクティスをそのまま現場に適応しようすることが多かったです。
これはフロントエンド開発に限らずアジャイル開発やインフラ設計など普遍的な問題でした。
今回は私がVue.js & Atomic Designをフレーム通りにそのまま導入、実践をしてどう失敗したのかとそこから得られた学びを発表します。
さらにAtomic Designを発展させて、プロダクトやチーム・Vue.jsに適応させた例を共有していきます。

TL;DR

• 思考を停止してAtomicDesignを導入した結果の発表
  　- ロジックの集中、コンポーネントの量産
• 導入するときは現場との差分(Vue.js, チーム、プロダクトの性質 etc..)を考えて追加する
• 視座をプロダクトのレベルまで高めて、設計判断をする
• 改めてVue.js & Atomic Designベースでコンポーネント開発を実践した時に考えたこと
  　- ドメインを持たせたコンポーネントの組み合わせ
  　- ロジックをリポジトリパターンで組み直す

リーガルテック スタートアップの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を用いた開発について
・現状の課題と今後の見通しについて