トーク

昨今デザインツールとして定番となってきた Figma、そんな Figma には API やプラグイン、ウィジェットなどプログラマブルにデザイン要素を操作できる機能の数々があることをご存知でしょうか？

このトークではそんな機能たちを活用して

• タイポグラフィや色のスタイルを生成
• コンポーネントのコードを生成
• デザイン上でアイコンや画像が増えたらレポジトリに自動で Push

などなどフロントエンド開発を楽にする工夫と開発の仕方をご紹介します。

これまでバックエンドにPythonをおいて、機械学習モデルとやり取りするフロントエンドを作るという棲み分けでしたが、ブラウザだけでも簡易に機械学習ができる時代がきました！Tensorflow.jsを使ってフロントエンドだけで機械学習を行う発表をします！！簡易なブラウザゲームでオンラインに学習するAIの作り方を軸にTensorflow.jsの利用方法を紹介します。

• Tensorflow.jsとは
• モデルの構築＆学習＆利用
• 用意したモデルとゲームで勝負

OpenAPI Generator で API Client と型を自動生成して使った場合、エラーハンドリングはどうしたら良いのかについてお話しします。

• OpenAPI Generator を使うとどうなるか
• エラーレスポンスの型について
• エラーハンドリングしてみる

SvelteKitはUIライブラリのSvelteをベースとしたSSRやSPAを作るフレームワークです。
Svelte Summit Fall 2022が2022年9月8・9日に行われた際にSvelteKitはバージョン1.0のRCとなることが発表されました。
トーク時にはRCではなく、リリースされているかもしれません。

• そんなSvelteKitをなぜ採用したのか、
• SvelteKitは他のフレームワークとどう違うのか、何が良いのか
• 開発途上のフレームワークを使った開発はどうだったのか

などのSvelteKitの良さや開発の裏話ができればと思います。

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

フロントエンドエンジニアの方が個人開発をしてみたいと思える発表にします。

• 個人開発の目的
  • 学習か、リリースか
• 楽しさとメリット
  • ものづくりの楽しさ
  • 視野が広がる
    • デザイン、PMF、マネタイズ、マーケティング、イノベーションetc.
  • キャリアを拓いてくれる
    • 私は元々サーバーサイドエンジニアだった
    • 「コードの質」を追求しよう
• 技術選定
  • ツールやフレームワーク
  • ランニングコストを抑えるためのサービス選定
• 私の開発事例
  • ビール画像投稿サイト（Next.js + Tailwind UI + Supabase + Vercel）
  • 技術ブログ（Next.js + Tailwind UI + Storybook + Cloudflare）
    • 元々Gatsby + Sass + Netlifyだった

Figmaのプラグインの1つにFigma Tokensがあります。そのプラグインの結果をJSONに変換し、そのJSONで構成されたデザイントークンからStyle Dictionaryを使用するとCSSプロパティを出力してくれます。その一連の流れのノウハウや出力結果として出てきたCSSプロパティをユーティリティライブラリのTailwindCSSやWeb Componentsなどにどう絡めていくか、最終的にデザイナーとエンジニアの連携でどう役に立つかをお話ししていきたいと思います。

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

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

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

主に下記の内容を話します！

• headlessブラウザを使ったオートメーションの工夫
  • 実行するコード生成
  • セッションを再利用
  • セレクターを指定する際の工夫
  • 任意のJavaScriptを実行
• UIテストの工夫
  • 実行するコード生成
  • セッションを再利用
  • Visual Regression Testingを実施
  • APIへのリクエスト、レスポンスをコントロールする
  • GitHub Actionsで実行
  • HTML Test Reportsの紹介
• Component Testing with Playwright
  • （現在Experimentalなので、本利用出来るようになったら内容に含めたいと考えています）

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

主に下記の内容を話します！

・GraphQLの概要
・GraphQLとは
・Apolloについての説明
・GraphQL + Laravelでバックエンドを開発！