トーク

React Aria は、アクセシブルな UI コンポーネントを構築するのに役立つ Headless な React コンポーネントとフックを提供するライブラリです。コントリビューターとしての視点や React Aria を業務で使用した経験をもとに React Aria の魅力と今後の課題について5分間で紹介します。

現代におけるフロントエンド開発ではより良い体験を提供するため、様々なビルドツールを駆使するのが当たり前となっています。
しかしこれらは本当に必要なのでしょうか。「そもそもブラウザではビルド不要でJSが動くんだし、もうちょっとなんとかなってもいいんでない？」と思うことはないでしょうか。
本発表ではフロントエンドにおけるビルドの概要と必要性を検討した後、それを回避する方法を考えます。そしてビルドツールを不要とするフロントエンド開発としてDeno FreshとHotwireを取り上げ、全く異なる流れを汲む両者に共通する思想を検討します。

Reactの状態管理ライブラリ戦国時代の今，新規開発プロダクトでReduxを採用した事例について話したいと思います．
Thunk,Saga，を検討した後にRTK Queryを用いて新規プロダクトをリリースまで持っていった検討経緯について，実際のプロダクトベースでお話したいと思います．

現在、我々のサービスでは複数のプロダクトをフロントエンド・バックエンドともにTypeScriptを用いて開発しています。TypeScriptで統一されていることを活かす事で、OpenAPIやGraphQL、gRPCを採用せず、Zodのみを使用して以下の方針でスキーマ駆動開発を実現することができました。

• Zod（任意のスキーマ定義ライブラリ）を使用して、スキーマを定義する
• FE(フロントエンド)/BE(バックエンド)はそのスキーマを使用する
• FE/BEの各フレームワークに合わせてアダプターを作り、そこで型の補完やスキーマの正しさの保証（バリデーション）ができるようにする

TypeScriptにおける、コード生成を伴わない軽量なスキーマ駆動開発の第三の選択肢を提示します。

我々のサービスの中の、6年以上開発を続けているサービスのフロントエンドのプロジェクトでは、初期の頃に設定されたTSConfigがそのまま運用されています。
そのためanyやnullチェックを怠っている箇所が多く、改修や機能追加のたびにインシデントが発生していました。

そこで、suppress-ts-errorsを使用し、10万行弱のTypeScriptのTSConfigを厳しい設定に一気に変更しました。
その経験をもとに、suppress-ts-errorsでは解決できなかったコードや、レガシーコードを改修する時の考え方を紹介します。

コードレビューは単なるエラー探しではありません。それはチーム全体の成長と製品の品質を高めるための共同作業です。

『コードレビュー、時間がかかりすぎてなかなか進まない...』『レビューで指摘されることが多く、コードの品質に自信が持てない...』『ドキュメントやコメントが不足していて、コードの意図を理解するのが難しい...』こんな悩みを抱えてはいませんか？

このセッションでは弊社におけるコードレビューの効率化と品質向上のために行った取り組みについて紹介します！

最新のCSSの進化により、JavaScriptを使わなくても驚くほど多彩な表現ができるようになりました。
このトークでは、モダンCSSの機能を存分に活用して作った発表スライドを使って、CSSの可能性をご紹介します。
プレゼンテーションソフトの既成テンプレートでは実現が難しい表現も、Web技術を使えばデザインの自由度は無限大です。
本トークを通じて、モダンCSSがプレゼンテーションの表現力を大きく広げる可能性を感じていただければ幸いです。

仕事の都合で、急にFlutterエンジニアとして生まれ変わった俺。
でも前世でReactを触っていたおかげで、コードも読めて機能も実装できちゃう！？

このセッションでは、フロントエンドエンジニアの人たちに気軽にFlutterエンジニアとして転生してもらう話をしたいと思います。

バックエンドの開発は憂鬱...そんなあなたにAWS Amplify Gen2お伝えしたい。
AWS Amplify Gen2を利用すると認証、データベース、ストレージをバックエンドを意識せずにTypeScriptを用いて爆速で用意する事が可能です。

今回はコードを示しながら、バックエンドを意識しないコードファーストなWeb開発を体験して「コードファーストな考え方」に触れます。

フロントエンドの壁の一つになるバックエンドのコントロールをTypeScriptで行い、フロントエンド開発の体験向上を行いましょう！

• 行うこと
  • コードをベースに認証、データベース、ストレージを用意する方法の（高速）デモ
• 目指すこと
  • AWS Amplify Gen2を利用した爆速バックエンド構築体験
  • AWS Amplify Gen2を利用しようと試みる第一歩を後押し

React を使用してSPAとして Web サービスのフロントエンドを提供していますが、
node.js 16 LTS が全然ロングじゃなかった煽りをうけて、フロントエンドをビルド環境も変更を余儀なくされた方も多いはず。
弊社でもならと、以下のような変更を行いました
・ビルド時に使用しているOSのバージョンアップ(Amazon Linux 2 から Amazon Linux 2023)
・Create React App が もう非推奨になっていたため vite に変更
しかし、ローカルで開発している時は、全く問題なかったものの、プロダクションビルドしてみると画面が真っ白に、、、
あれやこれやと試行錯誤をしているうちに、原因がわかってきました
本LTではこの辺りの試行錯誤の過程を端折って、本当に大事な結論としてのviteを使ったビルド時に考慮するべき内容を、その仕様と合わせてお伝えします

Threlte（スレルト）は、ウェブのための3Dフレームワークです。コンポーネントフレームワーク「Svelte」と、WebGLをベースにした3Dコンピューターグラフィックライブラリ「Three.js」をもとに、Grischa Erbeらが開発しています: https://threlte.xyz/

このフレームワークでは、宣言的な形式でThree.jsにある全ての機能を利用できます。また、物理エンジンのRapierや、アニメーションライブラリTheatre.jsも統合されています。加えて、glTFを変換するツールや、VR/ARのための機能も用意されています。

本発表では、Reactの3DライブラリReact Three Fiberや、Svelte GL、Svelte Cubed、Svelthreeといったライブラリとの比較も交えて、Threlteの概要を紹介します。

The windows Subsystem for Linux(WSL) let's developers runs a GNU/Linux environment including most command -lines tools , utilities and application directly on the windows, unmodified without the overhead of a traditional virtual machine or dualboot setup.
The remote -WSL extension lets use VS code on windows to build Linux application that runs on the windows Subsystem for Linux (WSL).

JSON API が「型の割れ窓」と称されることもあるように、エンドポイント ―特に JSON ― の型付けには多くの開発者が頭を悩ませてきました。

世間にはフルスタックの風潮もある中で、技術スタックに手を加えられない環境も多々あることでしょう。
バックエンドが OpenAPI を生成するならそこから型定義も生成できますが、そうでない場合は？手書き？いやいやご冗談を。

本セッションでは、いずれの条件も満たさない「孤独」な環境に焦点を当てます。
まず、フロントエンド技術者が慣れ親しんだ TypeScript を用いて JSON API を型付けする、基本的な手法をおさらいします。
加えて、仕様としてのエラーレスポンスも型を付けて扱えるようにしたり、型定義から開発者向けのドキュメントを生成できるようにすることで、型定義の枠にとらわれない、API の「仕様書」としての未来について考察します。

Reconciliation is the action of making one view or belief compatible with another.The reconciliation process is used in various modern frontend JavaScript libraries and frameworks like React, Vue,Angular , Svelte.Reconciliation is a process of comparing the current and the previous DOMs (Documents Object Mode and applying the necessary updates on the real DOM with a minimal set of required change.

フロントエンド開発者であれば、JavaScriptに真剣に向き合わないといけないシーンが多々訪れると思います。

基本的にはMDNなどを参照するだけでよく、ECMAScript仕様本体を参照しないといけないケースはほぼありませんが、正確な挙動を理解したり、新機能の提案にキャッチアップするために読みたくなるシーンがあるでしょう。

本発表では、「ECMAScriptの仕様を読むには最低限これを知っていれば大丈夫！」という知識について、5分に収まる範囲でなるべく多く解説します。
具体的な仕様については取り上げず、仕様中に登場する概念と、その簡易的な説明を行っていきます。
例えば、仕様中に現れるOperationの種類と、そのアルゴリズムステップ内で現れる概念などについて紹介します。
ECMAScript仕様を完全に読めることを目的とせず、読み始めていくための足がかりを提供します。

フロントエンドエンジニアのみなさん、 週末なにしてますか？

きっとコードが書きたくて書きたくて、個人開発をしているでしょう。

しかしフロントエンドだけだとWebアプリは完成しません、バックエンドやデータベースなども構築する必要があるでしょう。

我々はしがないフロントエンドエンジニア、フロントエンド以外は専門外、個人開発でAWSなどを使うのは金銭的にも厳しいのが現実。

フロントエンドエンジニアのみなさん、 Cloudflare使ってますか？

CloudflareはWorkersやPages以外にもフルスタックな開発が可能な様々なサービスをほぼ無料で利用できます。

これらのサービスをTypeScriptを使って開発できるのです。

フロントエンドエンジニアのみなさん、 フルスタックエンジニアになってもらっていいですか？

静的Webサイト生成（以下、SSG）という、テンプレートからHTMLを生成する技術があります。

SSGにはNext.jsやAstro, Gatsby.jsなどが広く用いられています。いずれもフレームワークとして様々な機能を備えている一方、プロジェクトによっては全ての機能を活かしきれず、むしろキャッチアップコストの増大に繋がる場合があります。

このトークでは、シンプルかつメンテナビリティの高いSSGの基盤をVikeで構築した際のケーススタディを紹介します。
具体的にはMeguro.es ( https://meguro.es ) のWebサイト開発におけるVikeの活用方法を通して、いかに少ない工数で壊れにくい静的Webサイトを作成したのかお話します。

Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。

ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-plugin-jsx-a11yやmarkuplintなどのLinterの活用について紹介します。

また、これらのLinterを実際の既存プロダクトへと導入した際の体験談や、導入において考慮すべきポイントについてお話しします。

モーダルとはウェブアプリケーションにおいて主要な画面の上に表示される少し小さなウィンドウです。このモーダルは現在のウェブアプリケーションの開発において(比較的)切っても切れないものになっています。

従来、Reactでモーダルを表示させるにはモーダルの開閉状態を管理していました。しかし、Nextjs13からParallel Routesが導入されモーダルの状態管理から解放されました。
本セッションではNextjsを使ったモーダルの実装例から状態管理をせずにUIを構築できることの良さについてお話ししていきたいと思います

近年、VueとTypeScriptの組み合わせがフロントエンド開発において注目されていますが、かつてはこの組み合わせに対して懐疑的な見方も存在しました。このセッションでは、初期の課題を乗り越え、現在VueでTypeScriptを効果的に活用する方法とそのメリットを深堀りします。特に、型安全性、開発効率、そしてプロジェクトのメンテナンス性の向上に焦点を当て、具体的な実装例と共にこれらの利点を発表したいと思います。