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

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

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

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

例えば、

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

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

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

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

AWS Amplify は開発フレームワークおよび開発者用サービスで構成されており、WebアプリやモバイルアプリをAWS上に簡単に構築する方法を提供しています。
Vueのコンポーネントも提供されており、少量のコードを書くだけで煩雑な手順から解放され、Vue.jsで素早くWebアプリを構築することができます。

しかし、提供されているコンポーネントだけでは実現できないことや、つらい点もいくつかあり、カスタマイズする場面に遭遇しました。
今回のセッションでは、Vue.jsとAWS Amplifyで構築したことを松竹梅の構成について得た知見をお話し致します。

• AWS Amplifyでできること
• aws-amplify-vueコンポーネントで構築
• aws-amplifyのAPIで構築
• Vue.jsとAWS Amplifyをカスタマイズして構築
  * 利用してみて感じたことや課題

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 コンポーネントをテストする方法をご紹介します。

現在4000万UUを達成したRettyは9年間運用されているサービスです。
当時、JavaScriptはフルjQueryで書かれていました。
フロントエンド改善活動として、ここ数年でサービス運用をしつつ部分Vue.js、Nuxt.jsに移行した軌跡を紹介できればと思います。

具体的には 部分Vueを運用に乗せ、拡充
jQueryコードやgulp/webpackとの格闘
Jest導入からSEO要件、
アーキテクチャ刷新によりNuxt.jsを導入、拡充していくまでのお話や
施策との相性やログ機構などです。

・jQuery
・Backbone.js
・React, Angular
・React, Vue.js
時代とともにフロントエンドの移り変わりがあるなか
RettyはどのタイミングでjQueryから移行し、
どう運用しているのかをご説明できればと思います。

今年、個人ブログの一部を 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に関するタイトルに変更する可能性あり

Vue.jsの人気が高まっていく中で、アプリケーション作るツールとしてではなく、ウェブサイトを作るツールとして使われることも多くなってきました。その中でも静的ファイルを事前に生成しておくプリレンダリングというアプローチを用いると、Vueの知識で開発者体験の恩恵を受けつつ、サーバー不要でサイトを簡単に配信することができます。

プリレンダリングを行うフレームワークとして選択肢にNuxt.jsのプリレンダリングモード、Gridsome、VuePressが挙げられます。これらのフレームワークを選ぶ際には、データの特徴、テーマの利用、再利用性、高速化、メンテナンス性がポイントになります。これらのポイントと噛み合うシチュエーションで適切なフレームワークを選ぶだけで素晴らしい生産性が得られます。
これらの特徴を理解することで、フレームワークを最大限に活かしたアプリケーション開発が可能になります。

本セッションでは、前半はプリレンダリングの動作とメリット・デメリットについて、後半はフレームワーク選定戦略についてお話します。

2017年、私は初めて「vue-test-utils」を使用しました。その時はavoriazというvue-test-utilsの前身のライブラリからの移行期で当然の如くbetaバージョンでした。
時を経て2019年、vue-test-utilsはVue.js公式テスティングライブラリということもあり、Vue.jsを使用しているプロジェクトではデファクトスタンダートと言っても過言ではない状況だと思います。

しかしvue-test-utilsは未だに正式リリースを迎えておらず、betaバージョンのままです。
一体何がvue-test-utilsの正式リリースを阻んでいるのでしょうか？

本セッションでは、vue-test-utilsが抱える問題点以下2つと、それらを解決するために現在検討されているアプローチについて述べたいと思います。

• 継承コンポーネント問題
• vue-test-utilsの同期設定

RoomClipのWEBサイトを、Nuxt.jsを用いてリニューアルしました。
フロント、サーバー、インフラを担当したので、全体の構成、移行して良かったこと、困ったことを発表できればと思います。
技術的に尖ったことは行ってはいませんが、一つの事例としてコミュニティに知見を提供できればと思います。

構成

• Expressサーバを用いてSSR
• APIサーバはRails
• インフラはECS Fargate

良かったこと

• 開発体験、速度の向上
• style binding等を用いて、アニメーションが容易に実装できた。

困ったこと

• Adsense広告をどうやって表示させるか？
• Nodeサーバのメモリ使用量が、日々増加していく

チーム開発に向けてやっていること

• Storybookの充実
• E2Eテストの充実

今や圧倒的な人気を誇るVue.jsですが、その人気の秘訣は何でしょうか？
エンジニア側からみても実装しやすいフレームワークということは疑いようもないですが、普及の理由のひとつとして、HTMLをかじったことのあるデザイナーや、マークアップエンジニアの方にも理解しやすい「優しい世界」が用意されているからだと思います。

セッションではVue.jsがデザイナーから見て、どういった点が理解しやすく、優れているのかの説明と、
一方で「優しすぎる」ために起きる問題点と、その上で気をつけなければならない、実装上の注意点を簡単にお話します。

• コンポーネントを小さく作れば良い！
• Vuexと単体テストを用意しましょう！
• 堅牢な設計でコードをリファクタリングしよう！

果たしてこれらの言葉に本当に従って良いのでしょうか？

フロントエンド開発の中心はデザイナーだ。多くの場合においてどんなデザイナーがどんなデザイン手法を好んで使うのかがフロントエンドのコードのライフサイクル、書き方を決定する最も重要な要素である。
Vue.jsも例外ではない。
私が設計を学び、複数のデザインナー、プロジェクトでVue.js開発に携わり発見したVueにおけるコード設計の極意をシェアし、Vue.js開発が成功する為の力になります。

「Webアクセシビリティ」とは、あらゆるユーザーが共通のコストで情報にアクセスしたりサービスを利用できるようになることです。

Webの進化によりこれまでには出来なかった表現やUIが登場したり、利用するサービス自体もリッチな体験なものに変化してきています。
しかし実際は、一部のユーザーには特定のコストをかけないと見れなかったり利用ができなかったりと、
世に出ているサイトやアプリがなかなかアクセシブルなものとなっていないことがあります。

Vue.js、Nuxt.jsの開発においてどう担保できるのか、UIコンポーネント開発においてどうやって取り組んでいくのか、
作ったものをどうアクセシブルであるかをチェックしていくか、についてを紹介したいと思います。

そしてこのセッションを通じて今こそ「アクセシビリティをやる意味」についてを知っていただければと幸いです。

フリーランス時や今の会社において、かなりの数のVueとNuxt開発をさせていただきました。今回はそんなVueやNuxtの知見を共有していきます。

最近ではTypeScriptの利用がデファクトになりつつあります。
まだまだ、TypeScript対応は追いついていないのが現状で、日本でもまだTypeScriptにおける知見はネットにまだ全然上がっておらく、企業での事例で見てもかなり少ないかと思います。

Vue v3でclassをやめる発表があり話題になりましたが、Nuxtの公式ではdecoratorが推奨されており、Nuxtがどう対応していくかに注目が集まっております。
また、TypeScriptでいうとVuexをどうするかは未だに物議をかもしております。

最近Nuxt+TypeScriptで新規事業を2つほどやらせていただいているので、今回は実際に現場レベルで使う場合、何に気をつけるべきかどうすればいいのか、Vuexの話、Storybookでのコンポーネント開発などを話していきます。

異世界を舞台としたソーシャルネットワーキングサービスをVue.jsで作っています。
Vue.jsを用いたPWAアプリケーションを開発した実録をお話しできればと思います。

2015年、Pepperの登場からロボットアプリの開発に流れ 、久々にウェブに戻ってきたらそこは異世界。Vue.jsってなに？りあくと？ jQueryは何処に行っちゃったの？ 状態から始めたフルスクラッチPWAアプリ開発の実録です。

Vue.js のみならず、Nuxt.js でコア機能として存在する Vuex。Vue.js アプリケーションに TypeScript を導入するにあたり、Vuex の型定義は誰しもが悩んできた課題です。vuex-module-decorators などによるアプローチもありますが、TypeScript の機能をフル活用すれば、純粋な Vuex であっても、隅々まで TypeScript に最適化することが可能です。これは、既存のVuexコードを TypeScript 化することはもちろん、デコレーターを利用したくないシーンで役にたつ TIPS です。2019年6月に刊行するTypeScript 商業誌に綴った、その手法の全容を紹介します。

管理画面のような複雑なバリデーション機能などをフロントエンドで実現しなければならない時、そのテストはどのように実施するでしょうか？
私達はこれまで、単体テストはもちろん、E2Eテストや画像回帰テストなどを実施してきました。
しかし、プロジェクト内での認識齟齬が原因で「なぜもっと前の工程で問題を見つけられなかったのか？」と思うことが何度もありました。

この課題に対して、私達は「The Testing Trophy」を意識したテスト戦略を整理し「vue-testing-library」を導入した結果、フロントエンド開発の品質向上に貢献することができました。
セッションでは、具体的にこれらのツールをどのように開発フローに装着し、開発プロセスを改善していったのかをお話できればと思います。

• The Testing Trophy と Waterfall model
• Testing Library による Integration Test