レギュラートーク 30分

フロントエンドエンジニア・デザイナーこそAPI・DBを設計すべき

yuya_presto ypresto

UIとAPIが噛み合っていない、DB上の概念と異なるのでうまく引いてこれない、UIがAPIに引きずられてしまう、などで開発がうまく進まなかったり、理想のデザインを実現できなかった経験はありませんか?

DB設計にはさまざまなトレードオフがあり、設計時の選択によっては、ほしい情報をほしい順番で返してもらうために、開発者やコンピュータのリソースをより多く必要としてしまうことがあります。またAPIの構造がユーザーが理解する概念と可能な限り合致していると、1:1で対応できて楽になります。一方でバックエンド側の事情とのバランスもとる必要があります。

デザインに関わる人が、モデリングの観点でバックエンドの設計にどのようなところに気をつければ良いのか、事例を踏まえて紹介します。

3
レギュラートーク 30分

新規開発を止めずに挑んだVue3マイグレートとさらなる成長への挑戦

thecoo_jp THECOO株式会社

弊社(THECOO株式会社)のメインプロダクトであるFaniconではこれまではほぼ全てのWebフロントにVue2が使われてきましたが、今年の7月にVue3への移行が完了したのでその際に並行して走ってる開発を止めずにエンジニア1人だけでミニマムに移行を完遂するための登り方を前半では語っていきたいと思います。
・移行ビルドの導入
・エラー解消と代用ライブラリの導入
・チームへの周知
Vue3に移行すればそれで全ての課題が解決されたというわけではありません。
既存コードがJSで書かれていた事、テストが存在しなかった事、UIに統一感が無かった事など依然として課題は残っていました。
そこで、トーク後半では弊社でさらなる成長に向けて取り組んでいる以下の試みについて紹介します。
・ JSのTS移行
・単体テスト + VRTの導入とCIによる自動化
・デザインシステム導入

2
レギュラートーク 30分

ウェブ制作におけるReactのフレームワークを見つめ直す

mottox2 もっと

ここ数年、コーポレートサイトやウェブメディアといったウェブ制作用途におけるReact/Vueの採用が増えてきました。
これらの技術を採用することでより良い開発者体験を得られることはできましたが、ユーザー体験という意味では一部毀損されてしまった点もあります。毀損されてしまった点の中で大きいのが「パフォーマンス」です。
こういった状況もある一方で近年、ページ中の必要な部分だけJSを有効にし小さなJSで動作させるIsland Architectureというアーキテクチャを備えたフレームワークが登場しています。
本セッションではNext.jsとAstro(Island Architectureを採用しているフレームワーク)を例に、開発者体験やユーザー体験を比較しつつ、各フレームワークに適したサイトの例や、Island Architectureがもたらすメリットとデメリットを比較していきます。

3
レギュラートーク 30分

Next.jsで作る業務システムとしてのPWAとその未来

現在ホテルの清掃管理アプリをPWAで開発し、本番運用しています。
実際にPWAを本番運用している事例は多くないと思いますので、
・Next.jsのnext-pwaを用いたPWAの開発方法
・PWAを採用した理由
・何が良かったか、何が大変だったか
などを通して、自分の好きなPWAという技術の未来についてまでお話しできればと思います。

6
レギュラートーク 30分

Testing Trophyに沿ったテストコードをNext.jsのチュートリアルで実践してみる

Testing Trophyとは、Kent C. Dodds 氏が提唱するJavaScript アプリケーションのテストコードに関する投資対効果のガイドです。
このTesting Trophyでは一番投資対効果高いテストはIntegration Testと言われています。
しかし実際にテストコードを実装してみるとどのようになるでしょうか?

当セッションではNext.jsのチュートリアルを題材に、Testing Trophyを意識しつつテストコードを書いて各テストの量がどのように変わっていくかを見ていきたいと思います。

具体的には以下のようなことを話す予定です。
・Testing Trophyとは何か?
・Next.jsのチュートリアルを題材にテストコードを書いてみる
 ・E2E
 ・Integration
 ・Unit
 ・(静的解析)

6
レギュラートーク 30分

WebGLによる表現手法とXR技術

fii1214 新垣 誠

【WebGLによる表現手法とXR技術】
・WebGLとは?
・WebGLの使われているWebページの紹介
・WebGLライブコーディング
・WebGLでXRもできます!!
WebGLとは、Web Graphics Libraryの略称で、ブラウザ上でコンピューターグラフィックをレンダリングするJavaScript APIです。WebGLの登場により、Webページの表現の幅が広がりました。
そんなWebGLで、「どのようなことができるのか」、「どのように活用されているのか」に着目して、実際にWebGLの使われているWebページを紹介しつつ、ライブコーディングを交えながらお話したいと思います。
最後にはWebGL技術をフルに活用し、登壇者自身が作成したXRアプリを紹介することで、「WebGLでこんなこともできます」ということをお伝えしたいと思います。

2