会場提供：株式会社プレイド

CFPの応募は40名（倍率8倍）

不採用になったものでもぜひ聞いてみたい！

その中でも厳選させてもらった

https://twitter.com/hirodeath

https://github.com/takahiro-saeki

Web Components

HTML Template

Shadow DOM

customElements

ES Modules

Browser Support

Edge以外はStable

素のものだと attribute が変更された時にDOMが再描画されてしまう

その欠点をおぎなう

Hot Module Replacement （HMR）が効かない

webpackやparcel環境で開発していると

ファイルを変更してもブラウザ上のDOMは変更されない

Vue.jsが解消してくれる

Vue.jsでWeb Componentsを使う

例： vaddin-button

https://www.npmjs.com/package/@vaadin/vaadin-button

https://github.com/vaadin/vaadin-button

importしてcomponents登録すると使える

Vue.jsでWeb Componentsを作る

vue-cli 3

メリット

VueコンポーネントをそのままWeb Componentsが生成できる

HMRが有効化で開発できる

再描画されるので素手作るよりもパフォーマンスがよい

デメリット

Vue.jsで内包しているため、ファイルサイズが重くなる

Micro Frontendsとは

マイクロサービスの考え方をフロントエンドに拡張

UIコンポーネントをWeb Componentsで配布することで

流用できる

各部署で使いまわしができる

WebComponetnsを使用していると

VueやReact.jsなどライブラリ・フレームワークの対応にもよるが

内部で使用することができるので将来的なアーキテクチャ変更があったときもUIが負債になりづらい

とはいえVueやReactの環境下でSPAやwebアプリを開発していたらそのまま構築しておいたほうがいい

wired Elements

感想

Vueの開発がなれていたら気軽にWebComponentsを提供できそう

Vueでのサポートが厚い

Reactではあまりないらしい

他のライブラリ・フレームワークを使用するより速くやれる

https://twitter.com/onigra_

https://github.com/onigra

きっかけ

フロントとバックエンドを分離させたい

サーバー：Kotlin

認証処理を自分で作ってますか？

Firebase Authentication

便利だが

SDKをつかっているだけだと中身が気になる

base64で認証コードが返ってくる

Open ID Connect

最近のクラウドサービスはこれがほとんど使われている

Identity Provider Keycloak

Identity Provider

認証を外部にまかせる

SNSアカウントでログイン

Identity ProviderはIdentity Provider内で必要な情報だけを管理する

Identity Provider as a Serviceはお高め

1Active Userあたり

自分でプロバイダをたてるとき

Keycloak

Java

機能が豊富

Web API

CLI

JS Cliがついてる

コンソールからセッションオフ機能

KeyCloack JS Adaptor

Nuxtとライフサイクルと噛み合わない

Implicit Flow

AdapterからTokenは取れるが、タイミング次第で生成されてない場合がある

別にOIDC Clientを使う

デモ

問題点

loginはできるがsignupがない

改善：https://github.com/onigra/keycloak-signup-url

Access Tokenには有効期限がある

ある程度の時間になったら切れる（ログアウト）

デフォルトは15分

ユーザー体験がよくない

Silent Refresh

Access Tokenを更新して上書き

axiosでのAPIリクエスト時にAuthorizationヘッダをつける

Javaでは馴染みのある作法

リダイレクト問題

Nuxtのmiddlewareで認証したときある問題

ページが一瞬表示される

return Promise を返すと消える

まとめ

OpenID Connectはやや難しい

難しい部分をSDKにうまく隠蔽されている

Auth0のドキュメントはわかりやすいのでおすすめ

Identity Provider Keycloakは機能が豊富

自分で立てるときは有力

単に認証だけだとオーバーキル感がある

Keycloakは、OpenIDのプロトコルがあるところだと、色々使える

https://twitter.com/lulzneko

https://github.com/lulzneko

https://twitter.com/lopburny

https://github.com/lopburny

Riotz Works

https://github.com/riotz-works/rap-tap-app

ハッカソン制作作品

全国規模のモバイルアプリ開発ハッカソン

共演者２名での動画中継と感染者への同時配信

リアルタイム

採用した経緯

普段の開発

サーバーレス開発

Java、TypeScript、Webが中心

モバイルアプリはAndroidネイティブ

フロント開発はRiot.js

ハッカソンでは当時話題に上がり始めたPWAへの挑戦

PWAに挑むに当たりVue.jsを使う

Nuxtが便利

vue-cliは開発経験が少なく苦戦

そのほか使用技術

Notification

GitHub deploy

GitHub build

Nuxt.js

型定義ファイル

https://github.com/riotz-works/rap-tap-app/tree/source/types

機能

バトルを募集

バトルを開始

対戦・観戦ルームのURLが発行

対戦

STARTを押して、対戦者が入場したら対戦開始

観戦

対戦者が揃ったら観戦開始

メッセージでやじも飛ばせる

NuxtのPWA対応

WebRTCのリアルタイム通信

P2Pが基本

SFU（Selective Forwarding Unit）によって端末やネットワーク負荷を抑えられる

サーバーを立てる

SkyWay Javascript SDK

Safariの対応状況がまだ利用できない

Firebaseのリアルタイムデータ同期

Realtime Database

スピード

シンプル

モバイル最適

プレゼンスライドのCI・CD

GitHub Pages

静的ホスティング

CI/CDが簡単に回せるのがPWAの強み

ハッカソンではこういった仕掛け・仕組みが有用

GitPitch, reveal.js

Markdownで記述

スライド内で iframe でデモ画面が連携できる

https://github.com/anneau

ブロックチェーンの特徴

データが時系列で保存されるので書き換えられない

いわゆる著作権のようにそこになにがあったかのように証明できる

暗号通貨、公的文書などに利用

ブロックチェーンとフロントエンドの関わり

技術

バックエンド

インフラ

ブロックチェーン

Blockchain Ethereum

フロントエンドから直接アクセスできる

改ざんさせる余地を与えないためにブロックチェーンのアプリはサーバー通さないため

フロントエンド

Vue.js

TS

データが格納されたら改ざんは不能

データを格納する前であれば改修できそう

クライアントから叩く場合

改ざんされてはいけないデータ

改ざんが問題ないデータ

お金と機能面で分けたい

自分だけのブロックチェーンアプリを作る

Ethereum

Contractと呼ばれるプログラムをブロックチェーンに格納

自動実行させることができる

開発環境

仮想通貨を簡単に作れる

全世界に公開

Ethereumネットワークにデプロイ

プライベートネットワーク

AWSのBlockChain Templateにデプロイ

ローカル

Ganacheでテスト

VueとTSで動かす

ブロックチェーンへのアクセスは Web3 を使う

axios

vue-router

actionsで非同期処理

型定義ファイル（TS用）

https://twitter.com/yomotsu

https://github.com/yomotsu

受託制作

Vue＋WebGLで作ったアプリケーション

※試した例の紹介

ベストプラクティスではない

なぜWebGLで？

レンダリングパフォーマンス

アドバンスドな描画効果

データの流れはVue.js

WebGLとVueを切り離す

WebGLは非同期

ピュアなclassを作った

欠点

同じデータが２箇所

双方バインドで無限ループに

解決

templateのないコンポーネントをつくる

https://github.com/yomotsu/vue-webgl-non-dom-component-example

<canvas> の中にtemplateのないコンポーネントを配置

WebGL Rendererをmountedで初期化

Destoryed時に破棄

render() には記述しない

もしくはnullを返す

レンダーする

Virtual DOMには頼らない

その他やったこと

混合propsはcomputedで管理

watchで単体で管理すると複数動いてしまうので

１つのfunctionにしてその中でオブジェクト管理

非同期前提で考える

テクスチャアップロード

メッシュ情報

レンダリング

DOM使えないかを再検討

DOMインスペクターが使えないので

開発が大変になる

手動マウント

テスト用にやってみた

Vue 3.0

Custom render API

WebGL向けのカスタムレンダラー作れそう？

https://twitter.com/suusan2go

https://github.com/suusan2go

リニューアルプロジェクトについて

医師・薬剤師のキャリア支援の企業向け画面

10年前の技術スタック

独自Java FW

IE 6.0以上推奨

IE10でうまく動かない…

リニューアル後

Kotlin + Spring Boot（サーバー）

APIサーバー

Nuxt.js（フロント）

開発チームとはべつでリニューアルチームを発足

コードや出力するSQLログよりフルスクラッチ

Viewの画面構成自体はそのまま

なぜNuxtを使うか

Rails + Vue.jsの経験はあり

SPAではなくマルチページアプリケーション

メリット

セッション管理はRailsにまかせられる

サーバーサイド中心なのでキャッチアップしやすい

デメリット

エコシステムに乗り切れない

責務が曖昧になってくる

そこでNuxtをつかってみる

リリース中はβ版だったが1.0に

メリット

実用的なアプリケーションがすぐできる

設計のベストプラクティスに乗れる

ドキュメントが豊富

フロントの開発レールに乗れた

セットアップが爆速でできる

SPA開発のコストが下げられた

開発におけるTips

TypeScript

サーバーサイドのロジックをできるだけ変えたくない

サーバーサイドのレスポンス・リクエスト追従するのはつらい

そういうサーバーサイド連携するために使用したい

サーバーサイドからTSクライアントを自動生成

レスポンスのプロパティが自動補完されている

Nuxt公式でサンプルあり

ビルドの設定のみ

型定義は自前で拡張

公式の型定義が近々出そう？

2.5からTSサポート強化

fork-ts-checker-webpack-plugin で型チェックを別プロセスにするとビルドが早くなる

eslint-plugin-vue + typescript-eslint-parser

メリットは多かったが、テンプレートにも型が欲しい

components/ 配下の管理

ElementUIを使っていったが、コンポーネントが増えてくると粒度が大きくなる

Atomic Designの考え

ElementUIのデメリット

Edgeだけパフォーマンスがわるい

Win + Chromeのみの不具合

管理画面・業務アプリ色の強いアプリケーションで使えるコンポーネントが多い

input周り以外はほぼ問題なし

SSR

環境の違いを意識しないとハマりポイントあり

fetchAPIをcookieでやっているとき

サーバーとクライアントでheaders付与の仕方が違う

windowとdocumentへのアクセス

ssr:false で解決

結局やるのは途中でやめた

mode:spa に切り替え

テスト

componentsとpagesの棲み分けを理解する

componentsでマウントしただけでアクセスするコンポーネントがあるとテストしづらい

pagesは薄く保っておく

感想

Vue Fes Japan 2018と比較すると、より実用的というか実務における知見などがより詰められていた感じ

まさかブロックチェーンの話が聞けるとは思わなかった

みんなTypeScript頑張ってる感じで「徹底的に」付き合っていこうという姿勢が見られた