トーク

チームで開発をしていると、こういうコンポーネントが存在してるかを確認するためにStorybookを見る、どういうAPIが生えているのか確認するためにSwaggerを見るということを頻繁に行うと思います。
その際にいちいちnpm run storybookなど別プロセスで実行して確認するのも実際少し手間ではありますし、devブランチに入っている最新版のAPIを確認しようにもgit pullしないとかぁ…という状況もしばしば。
むしろgit pullのせいでコンフリクトが発生してstorybookが気づかずにエラーで止まっちゃってたということも…
エンジニア以外にも簡単にコンポーネント一覧見てもらうには…などなど。

そこでVercelを活用することによってチームに所属している人間のみが簡単にブラウザ上で見れるような環境を用意できる、そういう方法を発表したいと思います。

shadcn/uiはRadix UIをベースとしたUIコンポーネントライブラリです。コピペして使えることで有名ですが、実際にコンポーネントの中身を見ていくとコンポーネントを設計する上での気付きや発見があります。

そんな気付きや発見を紹介するLTです。

発表内容

• cvaを使った関心の分離
• プリミティブではないコンポーネントがどういう設計になっているかみる（Formコンポーネント）
• コンポーネントがどう振る舞っているか

Vue2の時代には、Reactと並んで、大人気なフロントエンドフレームワークであったいわゆるVue系。Nuxt3はリリースが遅れてしまったことに加え、大規模かつ多数の仕様変更があったこと、そしてインフルエンサー層がこぞってNextに鞍替えしてしまったことなどから、そのユーザー数は大きく減ってしまった。特に、難度が上がった仕様変更の一つとして、Fetcherの使用方法が挙げられる。

Nuxt2まではaxiosを用い、ラッパーとしてasyncDataを用いれば概ねヨシ！といった形であったが、Nuxt3からはuseFetch. useAsyncData + $fetch, useLazyFetch, useLazyAsyncDataなどを使い分ける必要性が出てきた。フレームワークへの依存性を減らしつつ、利便性があり、SSRでも活用できる、そんな理想のFetcherを求める戦いが今ここに始まる。

一時はバズワードにもなったメタバース。バーチャル世界で活用される主たる技術はUnity, Unreal、Vket Cloud、OSSのGodotなどに代表されるゲーム開発エンジンであったり、複数エンドポイント間の高速通信を可能とするRTC(Real Time Communication)技術であり、それらを支えるバックエンドやインフラである。しかしながら、フロントエンド技術が不要であるという話ではない。メタバースまでの導線として、PRの一環として、あるいはWeb VRの世界であれば、ゲームエンジンとWeb APIとのインターフェースとして、フロントエンド技術は多分に活用されているのだ。

本トークでは、VR法人HIKKYにおける、フロントエンド技術の活用例やアーキテクチャ例を紹介するとともに、一般的なWebサービスとの差異、そしてバーチャル世界におけるフロントエンドのこれからを解説する。

生成AI・LLMの登場において、多くの領域で変化を訪れようとしています。
開発者であればGithub Copilotを代表にコード自動生成・開発支援の進化を如実に実感していることでしょう。

そんな状況の中、私が個人的に注目しているのが「生成AI・LLMをUI/UXの改善に利用することはできないか？」ということです。
実際に生成UI(Generative UI)というAIシステムがユーザーのニーズやコンテキストに合わせて、動的にインターフェイスが生成される概念も提唱され始めています。

本セッションでは、生成AI・LLMによって生まれるかもしれない新たなUIの可能性やそれを実現するためのライブラリとしてVercel AI SDKをご紹介します。

フロント開発の自動テストでやったこと

ぼくはNext.jsを今年から触り始めたんですが、フロント側のテストって何を書いていいかわからない、UI部分のテストって書くのが難しそう、と思っていました。

そこでフロント開発（Bext.js)の自動テストについて調べて、実際に作成した時、こんなライブラリやツールを使ってこんなテストをしたよ、っていうようなことを話したいと思います。

具体的には以下のような内容を話す予定です。

•Storybookを使った自動テストの作成
•Jestを用いたテストの作成
•Chromaticを用いたUIの変更点のテスト作成
•Codecovを用いてコードカバレッジを取る

Next.jsのAppRouterやRemixの台頭などますますフロントエンド開発においてReactに対する熱が高まってきています。
直近のフロントエンド開発において、もはやReactで作るということは必ず選択肢に上がるといっても過言ではないほどです。

そんな状況下で「いざReactで開発！」となったとき、より効率的に開発を進めるために設定しておきたいことがあります。

このLTでは、Reactを使った開発をするなら設定しておきたいことを時間の許す限りご紹介したいと思います。

Fast JSX: Don't clone props object #28768というPRがマージされました。これはReact19からjsxが高速になると言うPRです。

React19からpropsをクローンしていました。それには以下のような理由があります。

1. key, refの予約語をpropsから削除すること
2. createElementがpublic apiである

これらを二つの問題がReact19からは解消できるので、propsをクローンする必要がなくなり、jsxの変換処理を高速化できるようになります。

このトークでは、二つの問題をどのようにして解消できたのか、そして実際のコードを見てどのように高速化したのかについて簡単にお話しできればと思っています。

フロントエンド開発において、レスポンシブ対応はとても重要です。

レスポンシブデザインを実現する方法として、メディアクエリが使われると思います。
Reactでメディアクエリの真偽値を受け取れるhook（useMediaQuery）を、useSyncExternalStoreを使って実装したことについてお話しします。

新卒の初学者である私がuseMediaQueryを実装していく中で、Hydration Errorや画面のチラつきなどに遭遇し、つまづいた過去があります。
つまずきを解消していき、辿り着いたuseSyncExternalStoreを用いてどのように実装したのかを紹介します。

初学者だからこそ気づけたつまずきポイントなども、お話しできればと思います。

みなさんJavaScriptの創始者、ブレンダンアイク氏を知っていますか？
20年以上前, Netscapeによって生まれた「JavaScript」.
その創始者たるブレンダンアイク氏が書いたJavaScriptが生まれた経緯や今までどのような進化を遂げてきたか.
彼自身が書いているからこそわかる「JavaScript誕生から標準化、現在までの歴史」について書かれた全189ページのPDF「JavaScript: The First 20 Years」を読んだ感想を皆さんにシェアします。

環境構築の容易さ、開発速度、ランニングコスト等々、個人でWebサービスをやっていく上で「ユーザーへの価値提供」以外の様々な要素があり、個人開発者にこんな悩みを与えがちです。

• モダンなSPAで作りたいけど知識と時間が足りない...
• 少し軌道に乗ってきたけどfrontとapiでサーバを二つ運用していてコストが高い...
• 開発速度を優先してテンプレートエンジンで作ったけど、流石にパフォーマンスが気になる...

これらの悩みへの解決策として 「Rails × Hotwire」の技術構成を提案する発表になります。

railsの開発効率、hotwireを使用することによるサイトのパフォーマンス & 開発速度の両立、AWS Pricing Calculatorを使用した予想コスト比較を通して、個人サービスの開発体験に求める要件をみんなで考えましょう🧐

注意：Lighthouseをはじめとする検査ツールは、全てのアクセシビリティの問題を検査できるものではありません。また、アクセシビリティ改善の目的は「Ligthouseの点数を上げること」ではなく「より多くの状況から使えるようにすること」です。あくまでもアクセシビリティの伸びしろを見つけるための手段として使用してください。

あるコンシューマー向けのアクセシビリティが必須要件でないWebサイトを開発中、Webページの品質測定ツール「Ligthouse」のを初めて実行したときにほとんどのサイトでアクセシビリティ（使える状況の幅広さ）が90点以上になりました。この発表では、この開発において以下のことを紹介します。

• 使用していた技術（ツール、ライブラリなど）
• 気をつけていたこと
• Lighthouseで発見できた、できなかった「アクセシビリティの伸びしろ」

「Astro」は、ブログやマーケティング、eコマースなど比較的シンプルな構成のウェブサイトに向いたフレームワークです。
「Astroアイランド」という仕組みを持っており、JSによるクライアントサイドのレンダリングを最小限に抑えつつ、様々なUIライブラリ（React、Vueなど）を導入することができます。

今回は「Qwik」というUIライブラリをAstroと合わせて表示爆速なサイトを作ってみました、
Qwikも独自の手法で最適化を行っている注目の技術です。

今回は、なぜReactやVue.jsではなくQwikを採用したのか？実際に利用してみてどうだったのか？、このあたり着いてお話する予定です！

簡単なWEBアプリケーションの画面を作るときにJavaScriptやCSSを書いて疲れていませんか？

簡単なアプリケーションを作るのに最適なStreamlitを紹介します。
Streamlitは、すべて Python で開発することができ、CSSやJavaScriptなどのフロントエンドの経験は必要ありません。そしてバックエンドで行う処理もPythonで書くことができます。
画像の処理やグラフの描画など Python でよく行う処理の結果を簡単に画面に表示することができます。

本セッションでは、データ処理や画像処理などの具体的な機能を実際にお見せしながらStreamlitについて時間いっぱいお話しいたします。

JavaScriptと同じようなシンタックスで、型付けされた関数型言語ReScriptを紹介します
OCaml由来の信頼性の高いコンパイラーで高速に高効率なJavaScriptにトランスパイルされ、null、undefineが発生しない信頼性の高いプログラミングを実現できます

■シンタックス
・JavaScriptと同様なシンタックスでありながら強力な型推論
・高機能なパターンマッチなどの高度な関数型言語の実現
～
■コンパイラ
・読みやすいJavaScriptへとトランスパイル
・高効率なソースを生むコンパイラ
～
既存のJSライブラリと連携したReScriptの実例も交えて紹介します