テーマ

The frontend framework is a backend framework.といった形でフロントエンドの価値を再定義し、T3 Stackなどの話題にも触れながらフロントエンドの最近の技術と潜在的な魅力を伝えること
（普段はほぼNext.jsしか使ってないですが、NuxtやSveltekit、freshなども話題に盛り込めたらと思います）

目次

はじめに
フロントエンドとバックエンドの比較
フロントエンドフレームワークの実態
フロントエンドエンジニアにできること
T3的な思想と技術
まとめ

背景

Next.jsなどのフロントエンドフレームワークでは、フロントエンドといいつつAPI作成などバックエンド領域の機能が備わっていて、フロント完結でも多様なアプリケーションを作れるようになりました。
その中でのフロントエンドの楽しさを体系化します。

概要

流れの早いフロントエンド界隈で、さまざまな技術が日々進化しています。
その中でも注目を浴びたトピックである「RSC」。
そんなRSCをいち早く使いこなすためのTipsを紹介します。

目次

• はじめに
• RSC とは
• RSC の特徴
• 実際の実装とコード（クライアントコンポーネント）
• 実際の実装とコード（RSC①）
• 実際の実装とコード（RSC②）
• まとめ

概要

普段Androidアプリエンジニアをしている私ですが、趣味でフロントエンドエンジニアの友人と開発する機会がありました。
その際に「型」という言葉の解釈で話が噛み合っていないことに気付きました。
その理由はTypeScriptとKotlinの型システムが異なっているという点にありました。
TypeScriptの型システムを「構造的部分型」、Kotlinの型システムを「公称型」といいます。
本トークではUIの実装例を題材としながら、それらの型システムの違いを学んでいきます。

目次

• はじめに
• 公称型（Kotlin）での型定義
• 構造的部分型（TypeScript）での型定義
• Jetpack Compose（Kotlin）でのUIの実装
• React Native（TypeScript）でのUIの実装
• 結論（公称型と構造的部分型の違い）

フロントエンドのテストは壊れやすい、めんどくさいなどの理由でやらない選択してました。
みなさんもそんな経験ありませんか？

アクセシビリティを理解するとフロントエンドのテストが楽になる！し、
フロントエンドのテストを書くとアクセシビリティが理解しやすくなる！

話すこと

• WAI-ARIAとは
• アクセシビリティを理解するとテストが楽になる仕組み
• テストを書いていて気づいたWAI-ARIAの誤解

Storybookのstoryは、Vitestなどにimportして、テストで再利用することでテスト用に改めてモックを作成する必要がなくなります。
セットアップをするにあたり、エラーや手間取ったことがあったので共有できればと思います！

話すこと

• UI テスト
• storybookを使ったテスト
• Vitest + Storybookのテスト実施の際に必要な設定とはまりポイント

Astro3.0からTransitionAPIがサポートされ、MPAでもページ間の遷移アニメーションがリッチになりました。
様々なフロントエンドフレームワーク・ライブラリーをサポートしているAstroの特色を生かして、ReactベースでリッチなMPAサイトを爆速で実装したこと、実装にあたってのtipsなどの共有がメインです。

• Astroとは
• Astro + TransitionAPI を使ったページ遷移の実装例
• 今後のAstroの動向

主に下記の内容を話します！

・GraphQLの概要
・GraphQLとは
・Apolloについての説明
・GraphQL + Laravelでバックエンドを開発！