トーク

React Hook Formはバリデーション機構を備えた、パフォーマンスが高く柔軟なフォームを開発するためのライブラリです。

我々のサービスでは、フォームを提供する画面にReact Hook Formを使用しています。改修を重ねて複雑になっていたフォームのコードを整理した経験をもとに、複雑さを抑えるためのフォームの設計方法や、ライブラリ標準の機能では実現できなかった課題を解決するための実装を紹介します。

具体的には、以下の内容についてお話しします。

• Contextを用いたコンポーザブルなフォーム設計
• バリデーション用スキーマを動的に "切り替える" 方法
• フォームが変わった時に、変更の差分を通知する方法

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では解決できなかったコードや、レガシーコードを改修する時の考え方を紹介します。

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

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

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

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

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

北海道内では現在フロントエンドと呼ばれる領域が十分に広まっておらず、どう取り入れるべきか、どのようにして取り組めばいいのかが適切に伝わってないような気がしています

この登壇では登壇者個人の視点でありながらも、北海道内の地場企業がフロントエンドと呼ばれる領域に自社の開発リソースを投じ、事業利益に繋げるステップバイステップのやり方を提案してみようという試みです

これを契機に北海道内企業が今の形にあった最適なフロントエンド文化を築ければと思っています

Webアプリケーション開発にはデータを取り出すバックエンド開発が不可欠です

そのバックエンド開発にはフロントエンドの領域以外の知識が要求されることが多数存在します

今回はフロントエンドエンジニアの目線に立ち、認証、データベース、ストレージ、SSRをバックエンドを意識せずにTypeScriptを用いてコードファーストなアプローチを行います。

このトークでは実際のコードと動作を確認しながらAWS Amplify Gen2を利用して「コードファーストな考え方」を理解を行います。
その結果バックエンドが苦手なエンジニアがコードでバックエンドの領域をコントロールし、フロントエンドの開発体験を向上させることを目指します。

• お話すること
  • コードをベースに認証、データベース、ストレージを用意する方法
  • TypeScriptをベースにバックエンドを用意する方法

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

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

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

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

昨今バックエンドのAPIと連携したフロントエンド開発は当たり前となってきています

そうするとバックエンドAPI開発と並行して開発が行われることがほとんどで、
開発途中でのお互いの仕様変更の取り込みをどのように行うのかという課題が出てきます

今回はその課題を解決するために、OpenAPIを中心にした開発を行い、コード生成によりインターフェースの統一を行いました
結果として、結合部分の認識齟齬を最小限にしたReactとPHPのプログラムを同時に開発を進めることが出来ました

OpenAPIを中心に据え、その周辺ツールも最大限利用することでみなさまの開発体験が向上することを目指します

• お話すること
  • OpenAPIを利用するメリット
  • OpenAPIを利用した具体的な開発手法

コストがかからないWebアプリケーション開発を行いたい、エンジニアなら誰しもが考えることだと思います

今回はフロントエンドエンジニアと相性が良い、Cloudflare PagesとCloudflare Workersを中心に据えて、
TiDB ServerlessとMomentoを利用したコストメリットが高いWebアプリケーション開発を考えます

無料枠存分に利用しながら開発を進める事で、Webアプリケーションを世の中に気軽に公開しましょう

無料枠で収まらなくなった...？その時はあなたのアプリケーションがマネタイズを考えるときです
コストメリットの高いアプリケーションを用いて世の中を支えながらマネタイズを検討しましょう

• お話すること
  • Cloudflare、TiDB Serverless、Momentoの利用方法
  • TypeScriptをベースとした開発手法

コードリファクタリングをしたい...！エンジニアなら誰しもが通る道だと考えます

今回はSvelteのコードを題材に、テストを利用して安全にコードリファクタリングする手法を考察します

基本になるテストピラミッドを振り返りながら、
開発を進める中でどうしても辛くなってしまう、辛くなってしまったコードを救う方法を考えます
また具体的な手法を提示することで、みなさまのコードリファクタリングライフに一助になることも目指します

テストを利用して安全にコードリファクタリングを行って、自分たちのWebアプリケーションを守りましょう

• お話すること
  • Unitテスト、Integrationテスト、E2Eテストの概要とアプローチ方法
  • テストを利用したコードリファクタリング手法
  • Svelteはいいぞ！

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.

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

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

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

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

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

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

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

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

フロントエンド刷新に React Aria を導入し、製品全体の性能向上への取り組みについてお話しします。

多様なブラウザやデバイス、キーボードでの操作にスクリーンリーダーによる読み上げなど、コンポーネントを実装する上で注意すべき点は数多くあります。
React Aria は、これらの要件を包括的にサポートしており、アクセシブルな UI コンポーネントの構築に適しています。

本発表では、React Aria を活用した多言語対応の DatePicker、キーボードやスクリーンリーダーで操作可能なドラッグアンドドロップ機能付きのコンボボックスなどの具体例を通じて、
カスタマイズの容易性、学習コストと実装効率など、実践から得た知見を共有します。

デザインシステムは、一貫性のあるユーザー体験を提供し、製品開発の効率を向上させるために、デザインの原則や再利用可能なコンポーネントをまとめたものです。

このセッションでは、弊社で取り組んでいるデザインシステムの構築を支えるデザインツールやプロジェクト構成、コーディングとデザインの連携方法について紹介します