プロポーザル

概要

この度自社サービスのプロジェクトを Vue2 の環境から、 Vue3 へアップグレードする作業をしました。 Vue2からVue3は破壊的な変更も多く、またVue2に依存しているパッケージも多いのでアップグレードに苦戦している人も多いかと思います。

僕自身エンジニアとして開発を担当しながら、ビジネスサイドと技術の世界をつなぐお仕事をしているので、今回どのようにプロジェクト全体のバランスをとってアップグレード作業を進めたのかを発表したいと思っています。

こんな方におすすめします

• Vue2のプロジェクトを運用している
• Vue3にアップグレードしたいがやり方がわからない
• プロジェクトをVue2からVue3アップグレードをしたいけど、ビジネスサイドに金がないと言われた

この話はしません

• Nuxt.jsなどのSPAフレームワークをアップグレードする方法

「RSC の時代を Composition で乗り越える」というテーマで、Reactを用いたフロントエンド開発の新たな展望について話す。React Server Components (RSC) は、クライアントとサーバーのレンダリングを適切に分担し、ユーザーエクスペリエンスとパフォーマンスを同時に向上させる革新的な技術。これにより、私たち開発者はアプリケーションアーキテクチャを再考する必要に迫られる。一方で、Reactの新しいフックAPIやCompositionパターンは、コンポーネントのロジックを再利用し、管理を効率化する強力な手段を提供する。このセッションでは、RSCの基本的なコンセプトとその利点、そしてCompositionを用いた開発パターンに焦点を当て、これらの技術がどのように連携し、フロントエンド開発の未来をどう形作るのかを考察する。

本モバイルアプリとWebフロントエンドの単体テストの考え方の違いについて発表します。単体テストは、アプリケーション開発における品質保証の基石となりますが、モバイルアプリとWebフロントエンドではそのアプローチに違いが見られます。この5分間で、モバイルアプリ開発とWebフロントエンド開発のそれぞれにおける単体テストの主な考え方と実装のポイントを比較しながら、その違いとユニークな挑戦に焦点を当てていきます。また、各プラットフォームが抱える特有の課題と、それに対するテスト戦略の違いについても簡潔に触れます。エンジニアとして、異なるプラットフォーム間でテストの考え方をどのようにブリッジし、品質を確保していくかを一緒に考察していきましょう。

PWA（Progressive Web Apps）は、ウェブ技術を用いてモバイルアプリに近い体験をブラウザ上で提供する技術です。モバイルエンジニアとして、PWAがもたらすユーザーエクスペリエンスや開発の効率性にはどのような印象を持っているのでしょうか。この短い時間ではありますが、PWAの特徴とモバイルアプリ開発との比較、そしてモバイルエンジニアがPWAを選択する際のメリットとデメリットに焦点を当てて考察します。また、実際の開発フローにおいて、モバイルエンジニアがPWA開発にどうアプローチし、どのような価値を見出しているのかについても触れていきたいと思います。共に、モバイルエンジニアリングの新しい可能性を探求していきましょう。

最近話題に上がることが多い「アクセシビリティ」。
だが、いざアクセシビリティについて考えると、紛らわしくなるのが「ユーザビリティ」だと思う。
アプリケーションにおいて、アクセシビリティを担保する上でしっかりと違いを認識した上でアプリケーションを作っていこうというテーマで話していく。
アクセシビリティは、人の状況によって変わるもの。
ユーザビリティは、アプリケーションのターゲットによって変わるもの。
これらについて、具体例を交えて詳しく話していく。

概要

フロントエンドのアプリケーション開発における現代の設計において
コンポーネント分割、状態や関心の分離を行った上でのページ単位でのリグレッションテストをどう行っていくかは開発組織によってさまざまな工夫が見られます。

本トークでは、実際に自身の開発組織でページ単位でのテストを Storybook の UI Test と MSW を使用することによって、
モック用のレイヤーを作成したり、コードを肥大化させないまま、運用まで進めたアプローチについて紹介します。

自分の所属する株式会社 enechain でのソフトウェアアーキテクチャを考慮した実践までの一連の流れを踏まえながら話すので、
実際に明日からでも使える MSW 術を提供します。

Podcastという、音声配信サービスがあるのはご存知でしょうか？
PodcastはApple Podcastsをはじめ、Spotify、Amazon Music、Google Podcastsなどのあらゆる配信サービスで聴くことができ、配信者もSpotify for Podcastersを使うことで手軽に複数のサービスに配信できます。
そんなPodcastを新たな形で触れられるように、我々は配信者に許諾いただいたものをAIのWhisperを使って文字起こしをし、その文字ベースで検索できるサービスを開発しました。
サービスを完成させるために、Next.js、GraphQL、Prisma、Supabase、Figmaを使うことで完成に至れました。
サービス実現のために、主にフロントエンドをどのように実装していったのかをお話しできればと思っております。

• デザインシステムについて興味はあるものの、何から始めれば良いか分からない

そんなお悩みを持つデザイナーさんやエンジニアさんに向けて、1つの考え方として自分の体験談をシェアさせて頂きます！

こんな内容をお話します

• どんな人がこの話をするのか紹介します
• デザインシステムを作ることで何を叶えたいのか、改めて言語化する
• 実現したいことに対してどんなシステムであれば良いのか考える
• 私はこんな状況でこんなところから始めてみました
  • 最低限のカラー定義
  • 最低限のコンポーネント
  • 最低限のタイポグラフィー
  • エンジニアとのコミュニケーション
  • などなど
• 小さく始めたことによって幸せになった話

ついに会社にデザイナーがやってくる！でも、具体的に何からお願いしたら良いんだろう？
そんな状況で模索中の方に、少しでも何か良いアイデアを発見するお手伝いができますと幸いです！

こんな人におすすめな内容です

• 社内で初めてのデザイナーとして入社し、いろいろ模索中なデザイナーさん
• 初めてデザイナーを迎え入れるにあたって、よりよいコラボを模索中なエンジニアさん

こんな内容をお話します

• 入社直後の環境
  • エンジニアはデザイナーとのコラボに興味があるけど具体的にどう関わって行けば良いか分からない
    　- クライアントワークがメインなので、コラボの可能性は無限大
• とにもかくにもお互いを知ることが大切
• 具体的にやったこと
  • 情報収集
  • 提案活動
• 活動を経た変化
  • 得意分野を分担することで開発の効率・質が上がった、その他

発表概要

コードベースに秩序をもたらすため、各種linterを利用している方も多いのではないでしょうか？本セッションでは秩序という観点以外ででも、linterによるアプリケーション特性に沿った独自のlint ruleにより齎される、DXやUXの改善のアプローチや知見についてお話しします。本セッションでは実際の制約の例と効能をいくつか紹介しつつ、皆さんもこうした制約ベースでのフロントエンド改善をおこなっていく足掛かりを提供します。

Agenda

• 独自のlint ruleの開発手法
• 各種具体例
  • HTTP Request Header の安全な取り出しを制約により実現する
  • Bundler,Compilerフレンドリーなコードによる開発者体験の向上を制約により実現する
  • Terserフレンドリーなコードによるビルドサイズの縮小を制約により実現する

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

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

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

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

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

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

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

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

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

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

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

目次

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

対象者

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

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

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

目次

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

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

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

皆さんはフロントエンドの技術をどのように身に着けていますか？
おそらく勉強会に来られるような方であればなにかしらの素振りはしているでしょう。
しかし、新しいフレームワークやライブラリが出る度に毎回ブログを作っていませんか？これでは退屈な気がします。
かといって、個人で運営が必要なWebサービスづくりはハードルが高いでしょう。
その中間、ちょっとしたネタアプリやミニゲーム、ツールづくりは非常にオススメです。実用に近いところで技術的な評価もでき、メンテナンスも強く求められないちょうど良さがあります。

そこで本セッションでは自分が技術的な素振りをするに当たって、テーマ選びや技術選びで意識していること、素振りの実例を紹介します。
仕事ではチームで回せる技術やデザインに落ち着かせるでしょう。個人で作るのであれば、ちょっとだけワクワクするものを作って仕事にも使える技術やスキルを身に着けましょう。

FigmaやMiroのようなGUIでドラッグアンドドロップ出来るようなWebアプリを誰しも一度は作りたくなったことはあるのではないでしょうか？
高度なWebツールやゲームを作成しようとするとWeb上でGUI操作を行いたくなることは多々あると思います。
このセッションではWeb上でドラッグ＆ドロップを実装する幾つかの方法についてサンプルコードを用いながら深掘りしていきます。

Laravel 9.x からバックエンドのバリデーションルールを使ってフロントエンドでリアルタイムバリデーションを行うことができる Laravel Precognition という機能が追加されました。

Precognition ライブラリを使う中で見つけたバグを修正して PR を出した話や、普段見ることの少ないライブラリの裏側で何が起きているのかについて解説しながら、Laravel でのリアルタイムバリデーションのやり方について紹介します。

目次

• Precognition とは
• リアルタイムバリデーションのやり方
• ライブラリの仕組み
  • コアの処理について
  • フロントエンドツールでの差分
  • ライブラリのバグ修正

近年CSSにはlayerやscopeなど大きな新機能が提案・実装されています。これらはCSSのcascadingという基本的なモデルに新しい概念と柔軟さを与え、フロントエンドの開発者にとってはCSS設計のパラダイムを変えるほど大きなものです。
このトークでは、それらCSSのcascadingに影響を与える新しい提案と機能について紹介し、それらが今後の開発にどのように影響を与えるかを考察し、聴講者の皆様が今後のCSSについて考えるきっかけを提供します。

少ない工数で開発を進めなければならない時があります。 そんなとき、フロントエンド開発と既存のサービスを組み合わせると、想像以上に柔軟性を維持でき、早くモノが出来上がる場合があります。このような開発手法は、フロントエンドエンジニアの戦闘力を安易に増大させる具体的なものだと思います。今回は一例としてHeadlessCMSを使った方法を紹介します。

例えば、自社HPやメディアサイト。
顧客が見る画面と運用者が見て管理する画面を用意する必要がある場合について考えてみる。
3つのアプローチ

1. STUDIOなどのノーコードツールを利用したアプローチ
2. フロントエンドとバックエンドをスクラッチで開発するアプローチ
3. フロントエンドはスクラッチ開発して、バックエンドはheadlessCMSを利用するアプローチ

これらの3つのアプローチを比較し3の優位性を示していきたいと考えています。