トーク

近年のfrontend開発においてtypescriptは中心的な技術であり、それを利用した「コード生成」での工数削減や品質向上が一般的になってきています。
本セッションでは、graphql-codegen, pathpida, hygen等のライブラリを使いかながら、codeFirstとschemaFirst両方の「コードからコードを生成する技術」について整理していく内容になります。

また、graphql apiとの型互換性を保って開発するためのschemaFirstな生成や、githubactionsワークフロー内で必要な生成を行う方法などのチーム開発で自動生成を活用する為のテクニックについても解説します。

本セッションでは、防災教育を目的とした「ハザードマップゲーム」というゲームについて、どのようなゲームなのか、また、どのような意図で作ったのかという点について説明します。
ゲームを開発する際に於いて、様々な選択肢がある中、なぜTauri + Web開発の技術を採用したのかという技術選択の決定、およびその詳細について紹介をします。
開発中に直面した課題とその対処法、更により優れた選択肢が無いのかというところにも言及します。
公開が控えているTauriのver.2.0の展望についても述べたいと思います。

分散モノリスによって生まれた技術負債を解決すべくモジュラモノリス＋マイクロサービスの新しい基盤に移行しフロントエンドをNext.js(App router)+PandaCSSにリプレースしているお話

フロントエンドWeb開発には JavaScript を使うのが一般的ではあります。しかし、それ以外のプログラミング言語によるフロントエンドWeb開発も、実は既に実用レベルで使用が普及しています。今回は、スピーカーが特に詳しい C# によるフロントエンドWeb開発の現状を中心に、JavaScript 以外のプログラミング言語によるフロントエンドWeb開発について、現状やメリット・デメリットを解説。参加者に新しい視点を提供します。

昨今のフロントエンドにおける技術選定はReact + ViteやRemix, Next.jsのPages/App Routerなどが普及しており、選択肢の自由度が高くなっております。
その一方、それぞれのプロダクト特性や社内の知見に応じて技術選定することは大切であり、その難易度も難しくなっています。
本発表では、チーム開発の立ち上げに携わった際にフロントエンドの技術選定としてNext.jsのPage Routerを選択した背景と1年間開発・運用していく上でやってきたことをお話ししたいと思います。
・チームの立ち上げと技術選定
・テスト戦略と導入
・OpenAPIの型定義の自動生成とテストへの活用
・開発運用を進めていく中で困ったこと
・これからやっていきたいこと

アプリケーションを開発し、長期にわたって運用するには、収益化が欠かせません。
ソフトウェアをサービスとして提供するSaaSモデルでは、月額や年額での定期的な請求（サブスクリプション）システムの組み込みが重要な要件となります。
しかしシステムの運用と同様に、サブスクリプションでは様々な運用課題がリリース後に発生します。
このセッションでは、サブスクリプションをアプリケーションに導入する際にのポイントについて紹介します。

紹介するポイントの例
・リリース後に発生する「運用課題」の例
・プランの種類と途中での契約変更
・使ってもらうための無料オファーの種類と使い分け
・プランとアクセス権の設計と割り当て

現在TechTrainというサービスを開発していますが、4人いる社員のうち全員が今までバックエンドをメインとして開発してきたエンジニアとなっています。そんなエンジニアたちがNext.jsとLaravelで開発しようとするとどうなるか？そうです。Next.jsの細かなことは調べながら開発することになります。そんな中でも生産性を出すためにこんなこと意識してるよという話をさせていただきます。

このトークで話すこと

• バックエンド中心の組織でフロントエンドのアーキテクチャ
• フロントエンドの実装とデザインの連携
• ちょっと失敗したなーと思っていること

2019年からエンジニアの教育サービスのTechTrainというサービスを作ってきました。
足掛け5年サービスを継続している中で、サービスのデザインリプレイスと技術的なリプレイス(Nuxt.js->Next.js)を何回か行っています。
そんな中、何が辛かったのか？失敗したことは何かなどをお話しします。
このトークでは、次の点をメインお話しします。

• リプレイスではどの単位で進めるのが良いのか？
• デザインリプレイスと技術のリプレイスを一緒に取り扱うのか？
• どうやってリプレイスを短期決戦にしていくのか？
• リプレイスとサービス特性をどう取り扱うのか？
• 技術的に辛くなりやすいところは何か？

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

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

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

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

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

機械的に手を動かして書き換えるだけのリファクタリング作業は、なるべく避けたいものです。
ひとつふたつ書き換えるだけであれば問題ありませんが、それが幾多にも及ぶと手に負えません。

codemod はそういった作業を代行してくれる強力なツールです。
一方で、このツールの実装には抽象構文木(以下、AST) の知識が必要なことから、敷居が高いという印象を持たれてしまいがちです。

このセッションでは jscodeshift という Meta 製のライブラリを用いた codemod の開発方法をご紹介します。
開発を通して、jscodeshift がベースとしている Recast という ASTパーサーへの理解を深めつつ、JavaScript と TypeScript の ASTをマスターし、面倒なリファクタリングを苦もなくこなす便利な codemod を作れるようになりましょう！

Next.js App Routerの安定版がリリースされてから1年以上が経過しました。Next.js Pages Routerのままでよいのか、App Routerに移行するか、あるいは他のフレームワークへ移行するか、皆さんも悩まれていることでしょう。

本講では、開発開始から2年半、運用開始から2年の実稼働アプリケーションである、10万行超のNext.jsプロジェクトを事例としてご紹介します。強く結合したPages Routerを、1年の構想と約1ヶ月の作業期間でApp Routerに移行した手順や、移行によるメリット、デメリットをお話しします。

さらに、App Router化と同時に行った大規模なバックエンドのインフラ変更の実態も併せて、現場の臨場感あふれるWebアプリケーション開発の波乱万丈をお見せします。

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の変換処理を高速化できるようになります。

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

近年、フロントエンド開発の複雑性は増し続けており、サイトのホスティングだけでなく、データベースや認証機能など、バックエンド領域に関わる機能も必要不可欠となっています。
しかし、従来のAWS Amplifyでは、フロントエンドのコードとバックエンドに関する設定が分離されており、特にバックエンド開発に慣れていないフロントエンドエンジニアにとっては、習得にハードルがありました。

そこで今回ご紹介するのが、AWS Amplify Gen2です。Gen2では、待望のTypeScriptサポートが正式導入され、フロントエンドだけでなく、バックエンドの設定や開発も含め、全てをTypeScriptで統一して開発することが可能になりました。

本セッションでは、実際のコードやデモも交え、TypeScriptでパワーアップしたAWS Amplify Gen2の魅力を余すことなくお伝えします。

このセッションでは、OpenAPIを用いてフロントエンド開発におけるバックエンド依存の最小化する開発手法を紹介します。

OpenAPIはREST APIを記述する標準的なフォーマットであり、yamlまたはjsonファイルを用いてAPI仕様を定義します。

OpenAPIに基づき、バックエンドの実装を待たずにモックサーバを立ち上げます。これにより、フロントエンドの開発者は実際のバックエンド完成前にAPIにアクセスし、開発を進めることが可能です。バックエンドの実装とフロントエンドの開発を分離し明確にAPIを定義することで、迅速かつAPIの齟齬なく開発を進めることができます。

本セッションでは、上記で述べたOpenAPIをフロントエンド開発に利用する方法の詳細を紹介します。また、OpenAPIを効率的に共有し運用していく方法についても紹介します。

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

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

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

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

TinaCMSというヘッドレスCMSの概要やその特徴、利点についての話をします。
TinaCMSはGitベースのヘッドレスCMSで、Gitのバージョン管理がそのままコンテンツ管理に活かせたり、実際の画面をプレビューしながら、リアルタイムでコンテンツが編集できたりと、面白い特徴があります。

最近私の関わる周りではヘッドレスCMSを導入するプロジェクトも増えてきており、日本ではもっぱらmicroCMSの話をよく聞きます。この流れにのって、他の面白い特徴を持つヘッドレスCMSについても紹介できればと思います。

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

昨今において、フロント・バックエンドに限らずテストコードは必須のものとなりつつあります。
しかし、このように思ったことがある方は多いのではないのでしょうか？

『プロダクションコードの品質はテストコードが高めてくれるけど、テストコードの品質はどうやって高めればいいの？』

この疑問を解決し、定量的にテストコード品質を測定するための手法がMutation Testです。

このセッションではJestに対して、Mutation TestライブラリであるStrykerを用いて計測を行い、どのようにテストコードの品質を高めていったか？を実際の導入事例を踏まえながらお話ししたいと思います。

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

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

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

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