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

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

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

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

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

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

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

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

この手順によりゼロスケールが可能なサーバーレスのWebサイト構築を実現して、低コストなWebサイト運営を実現します
※本セッションは、ひたすら構築手順のみ説明して、最初の一歩を踏み出す事を目的とします

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

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

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

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

この手順によりゼロスケールが可能なサーバーレスのWebサイト運営を実現します。
※本セッションは、ひたすら構築手順のみ説明して、最初の一歩を踏み出す事を目的とします

• 対象の聴講者
  • AWS Amplifyに興味がある方
  • 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アプリを起点としたプライベートプロダクト戦略についてお話します。

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

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

内容

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

オブジェクト指向UIはタスクではなくモノを起点としたUIであり非常に直感的であるため、最近のWebでは当たり前のように使われている考え方です。
そんなオブジェクト指向UIがなぜ直感的なのかを説明し、そのようなUIをデザインするためにどのような手順・方法で実践したら良いかを紹介します！

目次

• オブジェクト指向UIとは
  • なぜ直感的に感じるのか
• オブジェクト指向UI実践

対象者

• デザイナーの方
• フロントエンドエンジニアの方
• UI/UXを考えている方
• 使いにくいUIに疲れている方

背景

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

Agenda

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

フロントエンドの意味をご存知でしょうか？
Wikipediaによると「各種入力をユーザーから収集し、バックエンドが使える仕様に合うようにそれを加工する」とあり、特に開発に限定されない広い意味を持ちます。
イベントは「人が集まる場を作り、場にあった情報、発表を加工して伝える」ことであり、イベント設計はその全体像を描くことです。つまりこれは"フロントエンド"と呼べるのではないでしょうか？
2023年はイベントが活発に開催される世界が戻り、それを契機に私は様々なきっかけを経て、10月に100人規模のデザインイベントを開催、個人事業主としては他社のイベントを企画、デザインの担当をさせてもらうまでになりました。
本セッションではプロダクトデザイナーである自分がなぜ「場」作りをはじめたのか、イベントを「フロントエンド」と見立てたとき、どんな設計ができるのか、その魅力などをお伝えできればと思います。

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

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

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

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

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

アクセシビリティは「利用者の障害の有無やその程度、年齢、利用環境に関わらずそのWebで提供されているサービスを等しく利用できること」を指します。このことからアクセシビリティ=障害者・高齢者と捉えられがちですが、実はこれだけでは誤りです。本トークでは、アクセシビリティで考慮すべき環境・対象を確認し、どのような点に気をつけるべきかを説明します。
また、Webアクセシビリティを考慮した開発によるメリットはユーザーだけでなく、実は開発者や運用者にとっても副次的なメリットを得ることができます。そういった利用者以外にとってのメリットも紹介していきます。

目次

• アクセシビリティって何？
• あなたのアクセシビリティ合ってる？
• Webアクセシビリティの副次的メリット

こんな方に聞いて欲しい！

• フロントエンドの開発を行っている方
• デザイナーの方
• 日々UI/UXを考えている方

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

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

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

発表目次予定

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

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

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

▼ こんな人が対象者

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

▼ 内容

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

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をよりネイティブアプリに近づけたい方

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

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

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