トーク

このセッションでは、PHPバックエンドエンジニアがフロントエンドの最新技術のひとつである、NextJSへの入門を試みる過程を紹介します。

特に生成AI技術を活用して英語のドキュメントを理解し、コーディング時の疑問は都度解決するという方法に焦点を当てます。
実際に、GatsbyJSで構築したブログサイトをNextJSへ移行したときのことを取り上げ、バックエンドエンジニアがAI技術と共にどうフロントエンド技術を理解していったかを掘り下げてみようと思います。

Swift!Swift!ぅうううわぁあああん!!!

んはぁっ!Swiftたんの型安全な世界をWebフロントエンド開発でも体感したいお！
SwiftWasmたんを使えば、フロントエンドでSwiftたんを使うことができる…?きゅんきゅんきゅい!

ぐああ!生成されるWebAssemblyバイナリのサイズが大きいから、Swift ちゃんをWebフロントエンドで使うのは 現実的 じ ゃ な い?にゃああん!うぁあ!

ちきしょー!やめてやる!現実なんかやめ…て…え!?見…てる?SwiftWasmちゃんが僕を見てる?
よかった…世の中まだまだ捨てたモンじゃないんだねっ!
いやっほぉお!!僕にはSwiftWasmちゃんがいる!やったよケティ!ひとりでできるもん!!

本トークでは、現時点のSwiftWasmは どこまで・何ができるのか探究することを試みます。

DartといえばFlutter専用言語のイメージが強いと思いますが，歴史的経緯によりJSへのトランスパイルをサポートをサポートしています．
しかしながらウェブ開発でDartがメインで使われるといったことはありませんでした．

Dart 3.3からWasmへのコンパイルがサポートされました．
Dart to JSでは実行用JSがアウトプットされていましたが， Dart to Wasmでは実行用のESModuleがアウトプットされるようになったりと，最近のウェブ開発でも利用しやすくなっています．

本セッションではWasmがサポートされたことによりDartをウェブ開発で利用できそうか?という観点での話をしたいと思います．

現在、デザインシステムのUIコンポーネント実装において、スタイリングライブラリとしてPanda CSSを採用しています。
本発表では、Panda CSSの紹介をした上で、Panda CSSを利用した型安全なコンポーネントのスタイリング方法やデザイントークンとの連携について紹介します。
更に利用する上でのTipsや、Dynamic Stylingに関する注意点についても紹介します。

私は普段、開発物を実際にスクリーンリーダーを使って操作して、アクセシビリティ上の問題がないか確認することを習慣にしています。

その活動の中で、スクリーンリーダーを使って初めて気づいたアクセシビリティ上の課題や、コードレビューやブラウザの開発ツール、キーボード操作では見逃しがちなアクセシビリティ上の課題を紹介します。

アクセシビリティに詳しくない方でも理解しやすい内容で、スクリーンリーダーの利用者目線で検証することの価値に気づいていただけるようなお話をします。

日本経済新聞社では Hack The Nikkei という技術ブログを運営しています. ここで日経の技術組織における文化や技術的知見を発信しており, また採用導線も兼ねてあり各種エントリー情報なども纏められています.

その技術ブログは特別のメンテナンスチームなどはなく, 有志によって運用されています. また技術記事や採用情報を追加/更新するメンバーには, エンジニアにとどまらず, デザイナーであったり採用担当であったり, プログラミングに不慣れな方も含まれます. そんな中でどのようにして技術組織の発信を支えているのか, 技術ブログ自体の運用をどのようにして効率化して行なっているか, と言った ops や自動化の取り組みについて, 初期の立ち上げ段階の Hack The Nikkei からの遷移とともにご紹介させていただきます.

React Nativeを用いたモバイルアプリの実装は、普段Reactを使っているエンジニアであれば、スムーズに行うことができます。

しかし、Webアプリ開発ではあまり意識する必要のない、モバイルアプリ特有の注意点・相違点が多数存在し、その一つとして、E2Eテストが挙げられます。

単体テストは、Webと同じような感覚で実装することができるのですが、E2Eテストに関しては、端末のOS・機種の考慮が必要であったり、Webアプリで普段利用するE2Eテストツールが利用できないなど、React Nativeでのモバイルアプリ開発特有の知識が必要になるかと思います。

このトークでは、React Nativeで利用できるE2Eテストツールについてや、E2Eテストの運用方法など、「React NativeにおけるE2Eテスト事情」についてお話しできればと思います。

フロントエンドカンファレンス北海道2024のLPをWebフロント初心者組で開発しました。

私は北海道在住の大学生です。現在Webエンジニアのインターンとして業務でWebバックエンドを主に触っています。Webフロントエンドも触ることもありますが、まだまだ初心者です。今回フロントエンドカンファレンス北海道2024のコアスタッフとしてLPを制作することになり、3人ほどの開発チームを組んで自分主導でLPの開発を行いました。今回は、メンバー構成や技術選定、実際に開発している中でWebフロント初心者の自分が得た気付きなどについてお話します。

【話すこと】

• メンバー構成
• 技術選定
• 開発の進め方
• 小規模なLP開発を通して感じたこと・困ったこと

React コンポーネントライブラリ Mantine をプロダクトで使うにあたり、どんな課題に直面しどう解決を図ったかについてお話します。
例えば以下のような課題です。

• デザイン上のフォントサイズ粒度と Mantine で設定可能な粒度が異なる
• 様々なスタイリング方法が提供されており、柔軟な反面、実装においては複数の方法が混在することを避けたい

Mantine との向き合い方の一例をお話し、UI コンポーネントライブラリを利用した開発の参考になれば幸いです。

関連する複数のアプリやパッケージをまとめて管理するため、ポリレポではなくモノレポにすることがあると思います。
この LT では、初めてモノレポを構築した自分の経験談を話します。
例えば、

• モノレポ構成を取るにあたり、どういった観点で何を検討したか
• 検討事項に対して、どういった決定をしたか
• モノレポを構築するにあたりどんなことをしたか

などについて話し、モノレポ構築において参考になる情報を少しでも提供できれば幸いです。

Remix を使ったアプリケーションにおけるコンポーネントの単体テストでは、 @remix-run/testing パッケージで提供されているスタブを利用すると思います。
しかしこのスタブは useRouteLoaderData を利用しているコンポーネントではうまく動きません。
このように、 Remix 公式から提供されているスタブではカバーできることとできないことがあり、公式ドキュメントには特に記載がありません。
この LT では、

• RemixStub がカバーしていることとしていないこと
• useRouteLoaderData hook を使っているコンポーネントの単体テストをどうやるか
• remix-typedjson を使っている場合に発生する別の課題とその解決方法

などについて話し、Remix を使った開発を行っている方々の助けとなる情報を届けられれば幸いに思います。

チームで開発をしていると、こういうコンポーネントが存在してるかを確認するためにStorybookを見る、どういうAPIが生えているのか確認するためにSwaggerを見るということを頻繁に行うと思います。
その際にいちいちnpm run storybookなど別プロセスで実行して確認するのも実際少し手間ではありますし、devブランチに入っている最新版のAPIを確認しようにもgit pullしないとかぁ…という状況もしばしば。
むしろgit pullのせいでコンフリクトが発生してstorybookが気づかずにエラーで止まっちゃってたということも…
エンジニア以外にも簡単にコンポーネント一覧見てもらうには…などなど。

そこでVercelを活用することによってチームに所属している人間のみが簡単にブラウザ上で見れるような環境を用意できる、そういう方法を発表したいと思います。

shadcn/uiはRadix UIをベースとしたUIコンポーネントライブラリです。コピペして使えることで有名ですが、実際にコンポーネントの中身を見ていくとコンポーネントを設計する上での気付きや発見があります。

そんな気付きや発見を紹介するLTです。

発表内容

• cvaを使った関心の分離
• プリミティブではないコンポーネントがどういう設計になっているかみる（Formコンポーネント）
• コンポーネントがどう振る舞っているか

Vue2の時代には、Reactと並んで、大人気なフロントエンドフレームワークであったいわゆるVue系。Nuxt3はリリースが遅れてしまったことに加え、大規模かつ多数の仕様変更があったこと、そしてインフルエンサー層がこぞってNextに鞍替えしてしまったことなどから、そのユーザー数は大きく減ってしまった。特に、難度が上がった仕様変更の一つとして、Fetcherの使用方法が挙げられる。

Nuxt2まではaxiosを用い、ラッパーとしてasyncDataを用いれば概ねヨシ！といった形であったが、Nuxt3からはuseFetch. useAsyncData + $fetch, useLazyFetch, useLazyAsyncDataなどを使い分ける必要性が出てきた。フレームワークへの依存性を減らしつつ、利便性があり、SSRでも活用できる、そんな理想のFetcherを求める戦いが今ここに始まる。

一時はバズワードにもなったメタバース。バーチャル世界で活用される主たる技術はUnity, Unreal、Vket Cloud、OSSのGodotなどに代表されるゲーム開発エンジンであったり、複数エンドポイント間の高速通信を可能とするRTC(Real Time Communication)技術であり、それらを支えるバックエンドやインフラである。しかしながら、フロントエンド技術が不要であるという話ではない。メタバースまでの導線として、PRの一環として、あるいはWeb VRの世界であれば、ゲームエンジンとWeb APIとのインターフェースとして、フロントエンド技術は多分に活用されているのだ。

本トークでは、VR法人HIKKYにおける、フロントエンド技術の活用例やアーキテクチャ例を紹介するとともに、一般的なWebサービスとの差異、そしてバーチャル世界におけるフロントエンドのこれからを解説する。

外部ライブラリを利用する場合、腐敗防止層を設けることでライブラリ側の変更を吸収したり、今後の別ライブラリへの移行を大いに助けられる場合があります。

今適用している腐敗防止層の概要と、その存在によりアプリケーションコードに差分を出さずに以下のライブラリ移行をおこなえた実例、適用の際のおさえるべきポイントなどをご紹介します。

• SWR -> TanStack Query
• Recoil -> Jotai

生成AI・LLMの登場において、多くの領域で変化を訪れようとしています。
開発者であればGithub Copilotを代表にコード自動生成・開発支援の進化を如実に実感していることでしょう。

そんな状況の中、私が個人的に注目しているのが「生成AI・LLMをUI/UXの改善に利用することはできないか？」ということです。
実際に生成UI(Generative UI)というAIシステムがユーザーのニーズやコンテキストに合わせて、動的にインターフェイスが生成される概念も提唱され始めています。

本セッションでは、生成AI・LLMによって生まれるかもしれない新たなUIの可能性やそれを実現するためのライブラリとしてVercel AI SDKをご紹介します。

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

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

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

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

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

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

Next.jsのAppRouterやRemixの台頭などますますフロントエンド開発においてReactに対する熱が高まってきています。
直近のフロントエンド開発において、もはやReactで作るということは必ず選択肢に上がるといっても過言ではないほどです。

そんな状況下で「いざReactで開発！」となったとき、より効率的に開発を進めるために設定しておきたいことがあります。

このLTでは、Reactを使った開発をするなら設定しておきたいことを時間の許す限りご紹介したいと思います。