DOMをブラウザAPIで直接操作する「DOMスクリプティング」は古い技術だと思われがちですが、PlaywrightやReactなどモダンFEスタックを支える現役の重要技術です👶

本セッションでは、ブロック崩しのように、webページ上の要素にボールを当てて消すゲーム「webページ崩し」(動画: https://x.com/i_am_canalun/status/1707700748610629911)の実装の紹介を通じて、Playwrightの要素探索の手法や最新のブラウザAPIなど、実践的かつ興味深いDOMスクリプティングを扱います！

特に下記を見ていく予定です🌞

• Shadow DOMやiframeの中の要素の当たり判定
• visibility等だけではできない、要素の可視性判定
• レイアウトを極力保つ、要素の消去方法

「DOMって面白いな」と思って頂ければ幸いです🌴

React Nativeで画面遷移を実装するにはReact Navigationを使用するのが一般的ですが、Expoで使用できるExpo Routerが登場しました。
Expo RouterはNext.jsのようなファイルシステムベースのルーティングを実現してくれるライブラリです。
これにより、Expoを使用した開発が、よりWeb開発に近づくと言えます。
とは言っても、Expoを導入することでネイティブ開発に制約が加わることは事実です。
本トークでは、サンプル実装を例にReact NavigationとExpo Routerの機能を紹介・比較しながら、Expo Routerのメリット・デメリットを紹介します。
その上で、Expoでできることとできないことを整理し、どのようなアプリがExpoに向くのかを考察していきます。

「Elixir Phoenix LiveViewで構築する音声投稿SNS」

初めに、Phoenix LiveViewの基本的な概要について簡単に説明を行います。LiveViewは、ElixirとPhoenixフレームワークを使用して、サーバーサイドでリアルタイムなインタラクションを実現するためのライブラリです。

また音声投稿SNSの開発におけるUI/UXの工夫に焦点を当てます。音声コンテンツはテキストとは異なり、再生や一時停止などのユーザーインタラクションを必要とします。また、投稿された音声コンテンツを視覚的にどのように表現し、ユーザーがストレスフリーな体験を得られるかについても触れます。どのようなデザインがユーザーにとって体験が良いかという工夫も紹介します！

最近「デザイントークン」という言葉をよく目にするようになりました。
デザイントークンを設計することで柔軟なデザインシステムを構築することができると考えられています。

私が所属する企業ではルック・アンド・フィールが異なる複数のサービスを運営しており、以前はそれぞれが異なるデザインシステムを構築しようとしていました。
それらの共通部分を基盤となるデザインシステムとして再編成し、デザイントークンを差し替え可能なコンポーネント群を開発しましたので紹介いたします。

対象者

• 独自のデザインシステムやコンポーネントライブラリを実装したい方
• デザインに興味があるエンジニア

話すこと

• コンポーネントライブラリの技術選定
• モジュラーなコンポーネントライブラリの作り方（実例としてDart SassとNPMを用いる）
• ユニットテストとCI

話さないこと

• デザイントークンの設計方法

昨今ではデザインシステムやデザインエンジニアなど、デザインと（フロントエンド）エンジニアに架け橋をかける職種や言葉をよく耳にするようになりました。
私はフロントエンドエンジニアからキャリアをスタートし、その後UIデザイナー＆UXリサーチャーへ転身、そこからまた更にエンジニアへと転身しました。
エンジニアリングとデザインを越境するだけでは飽きたらず、往復する道を選びました。

エンジニアからデザイナーへ越境した時の経験。
デザイナーからエンジニアへ往復した時の経験。
このトークでは、2つの世界の話を通じて、エンジニアリングとデザインの狭間で見つけたものをお話します。
また、私自身の失敗談も踏まえながら、越境するためのスキルや知見、背中を預けるためのコミュニケーションなどを皆さまにお届けします。

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

そんな方の選択肢の一つとして、SupabaseとSvelteKitを利用したバックエンドレスなWebサイト構築についてお話します。
Supabaseを利用することでバックエンドのコードを書くことなく動的な情報を更新出来ます。

そこにUIを作成することが得意なSvelteKitを組み合わせることで、
リアクティブな動的なサイトとして、サーバーレスなWebサイトの公開する方法まで解説します。

この手順によりゼロスケールが可能なサーバーレスのWebサイト構築を実現して、低コストなWebサイト運営を実現します。
本セッションではその技術要素まで可能な限り解説を行います。

• 対象の聴講者
  • Supabaseに興味がある方
  • SvelteKitに興味がある方
  • 低コストなサーバー運営に興味がある方

発表概要

現代のフロントエンド開発においては、Next.js, Remix, Nuxt.jsなどの包括的なフレームワークを用いるのが主流になっています。これらのフレームワークはルーティング、ビュー、ビルドチェインの機能を提供し、開発プロセスを簡略化し効率化します。
しかし、日経電子版では、これらの主流フレームワークを用いず、様々なライブラリを組み合わせた独自のフレームワーク上で開発を2020年より継続しています。

このトークでは、我々がフレームワークを採用しなかった理由と、その決定が開発に与えた影響を掘り下げます。3年間の運用を経て、フレームワークを利用しなかったことによって生じた課題と、逆に得られた利点を共有します。
聴講者の皆様に主流から外れた技術選定の影響と未来に向けての技術選定についての考察を提供し、フロントエンド開発の技術選定における新たな視点を示すことを目指します。

「利用者の障害の有無やその程度、年齢、利用環境に関わらずそのWebで提供されているサービスを等しく利用できること」を指すアクセシビリティ。言葉は知っていても実際の開発で意識しながら行うことは容易ではなく、気づいたら誰かにとって障壁のあるWebサービスになっていたりします。
自分の開発しているサービスがWebアクセシビリティにどのくらい対応できていて、できていないならばどこをどのように改善していくべきか、考えるきっかけになればと思います。

目次

• アクセシビリティとは
• ガイドラインと規格
• 確認・計測方法
• どこから・どのように改善していくべきか

対象者

• アクセシビリティを考えた実装をあまりしたことがない方
• 障害があるためにWebサービスを利用することすらできないという理不尽が存在していることに納得がいかない方

昨今のフロントエンド領域はとてもカバー範囲が大きくなっています、開発者としてはバックエンド方向へ越境することはもう珍しくありません。
私はそんな中、デザイン方面への越境をし、職種もフロントエンドエンジニアからデザインテクノロジストへ。

実際にわたしがデザイン方面へ越境した経験から、デザインテクノロジストという新しいキャリアの選択肢とデザイン方面へ越境するためのスキルや学びをお話し、
フロントエンドのキャリアの先の選択肢を得るためのセッションをお届けします。

概要

昨今デザインシステムを構築する機会は増えていると思いますが、デザインシステムを構成する要素は多岐にわたるため、どのような技術選定をするのが良いか迷うことも多いと思います。
このトークではデザインシステムの技術選定や設計方針をどのように決定していくとより使いやすくメンテナンスしやすいデザインシステムを構築できるのか、ということについて話す予定です。
私が所属しているUbie株式会社での実例も交えつつ、なるべく実践的な内容をお届けします。

目次

• デザイントークンの技術選定
• コンポーネントライブラリの技術選定
  • テスト設計
• アイコンライブラリ
• ドキュメントサイト
• デザインシステム全体の構成について
  • モノレポにするか否か

受託中心で仕事しているWeb制作者が「いずれ自分でプロダクトを」というのをよく聞きます。けれど実際に話を聞いてみると、漠然と作りたいという思いはあっても、Webをバックグラウンドとした自分自身の強みや他社が追随できない戦略から、つくるものをイメージできていることはまずありません。

Webというオープンプラットフォームは、スモールビジネスにとても適しています。特に近年、Capacitor、React Nativeというモダンなクロスプラットフォームが生まれたことにより、Webブラウザ内に留まらないビジネス展開が可能となりました。

BtoCでは25万人以上のユーザ登録がある定番SNS、BtoBではミシュラン掲載店も利用するワイン管理アプリを企画から開発運営まで一貫して行った経験から、Webアプリを起点としたプライベートプロダクト戦略についてお話します。

数ヶ月前からフロントの業務に関わるようになり、そのプロジェクトではviteを使用しています。
ただ、viteが何者で何を行ってくれているのか全く理解できていませんでした。viteを使うといい感じにWebページが見えるようになる... そのような認識です。
ある日、突然的に"いい感じにWebページが見えるようになる"という謎が気になりだし、同時にviteの中身を知るのは楽しそうだなと思うようになりました。
そこで、viteそのものの役割や内部処理の仕組みを解き明かし、このトークでみなさんと共有できれば良いなと思っています。
また、内部処理を追う方法として、今回はデバッガを使用してソースコードを読んでいくため、viteのデバッグ環境の整え方も説明します。

本セッションでは、以下のことをお話しします。

• viteの概要
• viteのデバッグ環境の整え方
• viteの内部処理について

皆様は普段どのようなチームでどのように仕事へ取り組んでいますか？

私はエンジニアリングマネージャーとしてWebフロントエンドエンジニアのチームに所属しています。
一言にフロントエンド開発チームと言っても、組織や事業によって様々な形があると思います。
担当プロダクト、技術的な制約、歴史的経緯など色々な条件や状況によって発生する課題と対応は変わります。

本発表では、あるチームがぶつかった課題とそれにどう立ち向かっているかを、
なるべく具体的な例を用いてお話しようと思います。

発表目次予定

• この人数でこの業務範囲？フロントエンド開発チームの責任範囲をどう定義したかの話。
• 見た目は同じだけど中身はそんなに違うの？ フロントエンドならではの技術的負債の話。
• その他の例

この非常に限定的なチームの経験を共有することで誰かの参考に少しでもなれば嬉しく思います。

2023年9月8日、JavaScriptランタイムであるBunが正式リリースされました。
このセッションではBunのパフォーマンスによるビルド時間短縮やTypeScriptネイティブサポートによる手軽な環境構築など
Node.jsでは得られなかったフロントエンドの開発体験についてお話しします。

▼ こんな人が対象者

• 普段TypeScriptやSPAフレームワークで開発してる人
• プロジェクトが肥大化してビルド時間に悩まされている人

▼ 内容

• Node.js/Denoと比較したBunのJavaScript/TypeScriptのランタイム機能
• Bunによる開発体験向上
• Bunに付属するトランスパイラ、バンドラ、タスクランナー等の周辺機能
• Node.js環境からの移行と導入ハードル
• SPAフレームワークの対応状況
• CI/CD及びクラウドサービス上での活用

概要

「PWA」という言葉が誕生したのが2015年、Webの進化とともにPWAに対応したWebサイトも増えてきました。
ここ最近はあまりPWAというワードを聞く頻度も少なくなってきていますが、着実にWebで出来ることは増えてきています。
また、WWDC23でSafariのPWA対応が発表されるなど、PWAのサポート範囲も広がってきました。

このセッションでは、PWAが何なのか改めて復習し、ブラウザが提供するAPIなどを活用してPWAをネイティブアプリに近づけるための方法を紹介いたします。

目次

• PWAのおさらい
• PWAの導入方法
• manifest.jsonによる機能の拡張
• ブラウザのAPIによる機能の拡張

こんな人におすすめ

• これからWebアプリをPWA対応していきたい方
• PWAをよりネイティブアプリに近づけたい方

GraphQLを採用することにより、型安全性やデータフェッチの柔軟性などの恩恵を享受することができます。
一方で、GraphQLのメリットを最大限活用するためには、キャッシュ戦略やFragment Colocationなど、考慮するべきこともいくつかあります。これらを踏まえてどのGraphQLクライアントを採用するかは非常に重要です。
そこで、このセッションではGraphQLクライアントに求められる要件と、技術選定の観点を具体的な事例を交えて紹介しようと思います。

具体的には下記の内容をお話しする予定です。

• GraphQLのメリットとユースケース
• キャッシュとFragment Colocationの重要性
• GraphQLクライアントに求められる要件
• GraphQLクライアントの紹介と比較
  • Relay, Apollo Client, urql
• 具体的な選定事例

株式会社ヒューマンサイエンスが提供するJamstackサイト構築において、ヘッドレスCMS『storyblok』をオフショア開発先との協議において選定しました。日本ではあまり知られていないstoryblokの特徴や機能を紹介したいと思います。
また海外の開発先とのJamstack構築の経験を共有したいと思います。

1．storyblokの紹介
機能概要
ビジュアルエディターでの管理画面デモ
2．Jamstackをオフショア開発した知見
どこにどんな風に
プロジェクト詳細
苦労話と学んだこと

実際に使用してみた上でのstoryblokのヘッドレスCMSとしての魅力と、グローバルな視点でのプロジェクト実施の経験を紹介したいと思います。

概要

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

目次

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

内容

RSCのデータ取得周りの特徴を活かして、UX向上のためのTipsを紹介します。
まずはクライアントコンポーネントを使用した場合の実装を紹介します。
その後に「サーバーでのデータ取得」に着目した惜しいRSCの使い方を紹介して、その上で抱えている問題点を明示します。
そして、結論としてこれまでに提起した問題点に対する解決策として「非同期を解決しない」RSCの使い方を紹介し、まとめに入ります。