トーク

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を用いてどのように実装したのかを紹介します。

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

テキストエディタ（WYSIWYG）をあなたのアプリに導入したいときに、技術選定で困ったことはありませんか？

私は散々探索した結果「BlockNote」というリッチテキストエディタのライブラリに辿り着きました！これは従来の古めかしい見た目ではなく、まさにNotionのようなシンプルな見た目でわかりやすい操作性を持ったリッチテキストエディタです。

これはさらに、リアルタイム同期が可能なyjsというライブラリを組み合わせることで、共同編集エディタにすることができます。
yjsはCRDTを利用し、競合が起こらないデータ同期を実現するフレームワークです。

あなたもこの2つのライブラリを使って、おしゃれで機能性のある共同編集エディタを作りませんか？

みなさん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について時間いっぱいお話しいたします。

Webサイトのスタイリングを修正後、どこがどのように変更されたか確認する作業は辛いものがあります。
修正箇所の一覧を眺めつつ、Figmaや変更前のサイトと比べて…
漏れなく人間がチェックするのはなかなか大変です。

加えて、意図しない箇所（同じコンポーネントを使うの箇所や全く別のページ）が変更されていた場合、気づくことなくリリースなんてことも…

そこで、Visual Regression Testing（画像比較テスト）

ということで、Visual Regression Testingを導入して安心感をもって開発してみませんか？
今回はPlaywrightを利用したシンプルな構成の運用についてお話します。

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

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