プロポーザル

概要

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

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

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

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

この話はしません

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

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に向くのかを考察していきます。

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

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

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

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

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

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

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

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

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

対象者

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

話すこと

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

話さないこと

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

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

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

概要

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

本トークでは、実際に自身の開発組織でページ単位でのテストを 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フレンドリーなコードによるビルドサイズの縮小を制約により実現する

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

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

アトミックデザイン（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プロジェクトに依存パッケージを更新することの重要性について触れた上で、中規模なチームにおける効果的な依存パッケージ管理のストラテジーを紹介します。