スピーカーがReact Native for webの導入を決定し、開発し、運用開始を断念するまでの試行錯誤をお話します。

• React Native for webの導入決定まで
• 順調に開発が進んでいた間の話
• Mapbox GLの使用に行き詰まった話
• どのように方針転換したか

アトミックデザイン（Atomic Design）とは、パーツ単位でUIデザインを設計する手法のことです。
弊社でどのようにAtomic Designを導入したか？どの粒度でコンポーネントを分けているかなどを話します。

Figmaは、エンジニアにとっても大変便利なデザインツールですが、”Plugins”, "Widgets"と呼ばれる、自分の用途にあった便利機能を後から加えることで、より強力なデザインツールとなります。

”Plugins”, "Widgets"は、自ら開発して公開・共有することができ、特にReact等のフロントエンドの開発経験がある方であれば、とても簡単に作ることができます。

今回は、Figmaを通したコミュニケーションをちょっぴり楽にする”Figma Widget”を自作しましたので、
開発の経緯・内容、利用事例についてお話しさせていただきます。

▼ 内容

1. なぜ、Figma Widgetを自作したのか？
2. Figma Widgetってどうやって自作するのか？
3. 自作したFigma Widgetが、どのように使われているのか？

フロントエンドは得意なのだけど、バックエンドを作るのは苦手...

そんな方のへ選択肢の一つとして、Supabaseのいいところを紹介します！
Supabaseを利用することでバックエンドのコードを書くことなく動的な情報を更新出来ます！

この手順によりゼロスケールが可能なサーバーレスのWebサイト構築を実現して、低コストなWebサイト運営を実現します。
みなさんもぜひSupabaseを利用しましょう！

• 対象の聴講者
  • Supabaseに興味がある方
  • バックエンドが苦手な方

フロントエンドやNode.jsアプリケーションの開発においては、多くの外部パッケージに依存することが避けられません。
しかし、多くのパッケージに依存するということはそれらを最新の状態に保つことにもコストがかかり、そのコストはプロダクトの規模とともに増大していきます。
このLTでは、JavaScriptプロジェクトに依存パッケージを更新することの重要性について触れた上で、中規模なチームにおける効果的な依存パッケージ管理のストラテジーを紹介します。

Next.jsの開発時に、クライアントとサーバーのレンダリング結果の差異を解消する「Hydration」の過程でエラーが起こることがあります。これをHydration Errorといい、React18からエラーとして扱われるようになりました。

今回はこのHydration Errorについて、原因や解決方法などをご紹介します！

内容

• 具体的なシチュエーションと、なぜ問題なのか
• エラーに対する効果的な解決策
• 共存するためのtips

背景

プログラムの副作用という言葉があります。Webフロントエンドにおいて副作用は意図しないバンドルサイズの肥大化につながり、結果として読み込み速度が遅くなりユーザー体験を悪くしてしまう要因になり得ます。本トークではなぜバンドルサイズ肥大化につながるのかと、それへの検知、対処法を紹介します。

Agenda

• プログラムの副作用とは
• Web フロントエンドにおける副作用の影響
• 副作用の検知する手法について
• 副作用への対処法について

Webアクセシビリティを考慮した開発をすべきというのは言うまでもないことですが、知らず知らずのうちにユーザーにとって障壁になってしまうようなUIを作ってしまうことがあります。
そんなアクセシビリティ観点でやってはいけないUI/UXを紹介していきます！

• 絶対にやってはいけないこと
  • 非干渉の達成基準
• あったら優先的に直すべきこと
• 状況に応じて確認すべきこと

スマホネイティブの世の中、「このWebサービスアプリ化して」となるケースは少なからず発生するかと思います。
このセッションでは、react-native-webviewとExpoを用いて既存Webサービスの資産を最大限活用しながら
スマホアプリ開発経験ナシにApple/Googleのストアにアプリを公開するテクニックについてお話しします。

▼ こんな人が対象者

• 「うちのWebサービスアプリ化して」と言われてしまったフロントエンドエンジニア
• スマホアプリ経験がないのに開発を迫られた人
• PWAを用いたリリースを検討している人

▼ 内容

• WebViewでアプリ化することについて
• PWAと比較したメリット・デメリット
• react-native-webviewとExpoのWebViewアプリ開発について
• WebViewアプリ化特有の開発について

2023年には、vanilla-extractやlinariaなどのゼロランタイムCSS in JSが多く登場しました。従来のCSS in JSでは、JSによる動的なスタイリングが行われるため、レンダリング時のオーバーヘッドが課題でした。ゼロランタイムは、ビルド時にCSS in JSのコードからCSSを抽出することで、ランタイムオーバーヘッドを取り除く仕組みです。

Panda CSSやKuma UIなど、ビルド時の静的解析と、レンダリング時の動的実行を両立させるハイブリッドなCSS-in-JSも登場しました。フレームワークの技術選定には一つのベストプラクティスは存在しませんが、適切な選択肢を理解することは非常に有益です。

それぞれのライブラリを実際に使用し、パフォーマンスや使いやすさの観点で定量・定性的に評価した結果についてお話ししたいと思います。

日経電子版は法人および個人のお客様から多くの環境でアクセスされており、私たちは、Webアプリケーションのユーザー体験と開発効率を向上させながら、より多くのユーザーに安全な利用環境を提供することを目指しています。 そのため、開発チームではブラウザのサポートポリシーを継続的に検討し、アプリケーションのビルド設定を最適化しています。

このLTでは、toC Webサイトにおいてエンドユーザーに提示する理想的なブラウザサポートポリシーと、実際のアクセス状況を考慮した現実的なブラウザポリシーのバランスについて議論します。また、各ブラウザベンダーのリリースサイクルを考慮し開発チームがどのようにブラウザサポートポリシーを調整しているかの知見も共有します。

概要
HTMLでユーザー登録のフォームを作成するとき、正しく<input>のautocomplete属性を指定すると、入力したパスワードとユーザー名をパッスワードマネージャーに保存されて、 ログインの場合はパスワードマネージャーからユーザー名とパッスワードが取得されます。 このトークでその属性を紹介します。

内容

1. autocomplete属性について
2. ユーザー登録フォームに使えるautocompleteのvalues紹介
3. ログインフォームに使えるautocompleteのvalues紹介

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でバックエンドを開発！