Vue Fes Japan 2019 プロポーザル一覧

ハーフセッション(20分)

Vue + Rails で運用していたブログの一部を Nuxt.js に移行した話

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

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

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

(仮)現場でVue.jsとAngularそれぞれアプリケーション作成してどうだったか

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

Vueのプリレンダリングとフレームワーク選定戦略

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

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

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

[WIP] vue-test-utils ~~Road of 1.0.0~~

村上大和 pipopotamasu3
■ 背景
2017年、初めて「vue-test-utils」を触った。その時はavoriazからの移行期で当然の如くbeta版であった。
時を経て2019年、vue-test-utilsはVue.js公式ということもありかなりの普及率を誇っている。Vue.jsのテストではデファクトと言ってもいいだろう。
しかし、vue-testは未だにbetaである。

一体何がvue-test-utilsの正式リリースを阻むのか?
私は自然とvue-test-utilsの中に潜っていくことになった...

■ 正式リリースまでのロードマップ
以下正式リリース(1.0.0)までのTODOリストと称されたissueの紹介
https://github.com/vuejs/vue-test-utils/issues/246

どのようなTodoがあり、どのように解決されてきたのかを解説(全部解説すると時間がないのでいくつかだけ)。


■ 正式リリースを阻害する要因
正式リリースまでの障害になっているものの解説
ハーフセッション(20分)

RoomClipをNuxt.js でリニューアルした話

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

# 構成
- Expressサーバを用いてSSR
- APIサーバはRails
- インフラはECS Fargate

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

# 困ったこと
- Adsense広告をどうやって表示させるか?
- Nodeサーバのメモリ使用量が、日々増加していく

# チーム開発に向けてやっていること
- Storybookの充実
- E2Eテストの充実
ハーフセッション(20分)

デザイナーから見たVue.jsの世界

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

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

フレキシブルコンポーネント設計

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

### 果たしてこれらの言葉に本当に従って良いのでしょうか?
フロントエンド開発の中心はデザイナーだ。多くの場合においてどんなデザイナーがどんなデザイン手法を好んで使うのかがフロントエンドのコードのライフサイクル、書き方を決定する最も重要な要素である。
Vue.jsも例外ではない。
私が設計を学び、複数のデザインナー、プロジェクトでVue.js開発に携わり発見したVueにおけるコード設計の極意をシェアし、Vue.js開発が成功する為の力になります。
1
ハーフセッション(20分)

Vue.js で考える非機能要件 〜 Security & Performance & Accessibility 〜

Okuto Oyama yamanoku
Webの進化によりこれまでには出来なかった表現やUIが登場したり、利用するサービス自体もリッチな体験なものに変化してきています。

それに伴う、ユーザーやデバイスの多様化、使用されている状況、セキュリティインシデントなど
非機能要件で求められているものはこれからのアプリケーションやサイト構築において、
「知識がないから」「リソースが足りないから」「一時的に対応するだけ」
としているだけでは、望ましくない状況になりつつあります。

今回の題材として「セキュリティ」「パフォーマンス」「アクセシビリティ」の3つの非機能要件を取り上げ、
Vue.js(またはNuxt.js)において、そうした非機能要件についてを
どう担保できるのか、どうやって取り組んでいくのか、についてを紹介します。

そしてこのセッションを通して「なぜ今それらが求められているのか?」の気付きや重要性を知っていただければと思っています。
1
ハーフセッション(20分)

Nuxt+TSで01開発

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

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

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

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

vue.js初心者がvue.jsベースのソーシャルアプリを開発した実録

やまうちひろみつ great_software
Vue.js 初心者が PWAソーシャルアプリを作ってみました実録です。

ここ数年間Pepperアプリなどコミュニケーションロボット等に取り組み、久々にWeb畑に戻ってきたら浦島太郎状態・・vue.jsなにそれおいしいの?状態から始めた趣味で作っているスマホ向けPWAソーシャルアプリが完成するまでの功績・・・をお話できる予定です。
(多分10月なら完成しているはずです・・・)

トーク内容はVue.jsの踏み込んだ内容は話せないと思いますので開発を始めるまで〜技術選定でなぜVueを選んだか〜初心者なりに苦労した点などをお話したいです。
フルセッション(40分)

型定義のみで挑む Vuex の型推論

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

vue-testing-libraryで始める大規模Webアプリケーション開発のテスト戦略

Yuji Yamaguchi YuG1224
たくさんのボタンやフォームが並び、複雑な機能をフロントエンドで実現しなければならない時、そのテストはどのように実施するでしょうか?

E2E TestやVisual Regression Testなどの自動化を行う事例も増えてきましたが、テスターが打鍵して確認することもまだまだ多いと思います。

私達もUnit Testやモックアップでの確認は実施していましたが、プロジェクト内での認識合わせが不十分なことなどが原因で、結合テスト時に問題が発覚することが何度もありました。

「なぜもっと前の工程で問題を見つけられなかったのか?」

このセッションでは、この課題を解決するための1つの方法として、vue-testing-libraryを利用したテスト戦略を紹介します。
2