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

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

okadak343 okada keisuke

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

構成

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

良かったこと

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

困ったこと

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

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

  • Storybookの充実
  • E2Eテストの充実
ハーフセッション(20分)

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

kgsi Shinichi Kogiso

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

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

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

Vue.js meets Web Accessibility

yamanoku Okuto Oyama

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

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

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

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

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

Nuxt+TSで01開発

masaakikunsan Masaaki Ishioka

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

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

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

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

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

Vue.jsで創る異世界。 ~ The Another universe, build with Vue.js ~

great_software やまうちひろみつ

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

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