「フロントエンドカンファレンス沖縄2023」に参加してきました

勉強会メモ

フロントエンドカンファレンス沖縄2023

Figmaプロトタイプ入門〜インタラクションイメージのつくりかた〜

  • 株式会社necco / 中川 小雪

Figmaのプロトタイプ

  • デザインを繋いで動きを確認できる
    • 画面遷移を確認できる
    • インタラクションも作れる
  • 実機でデザインを確認できる
    • URLの共有で顧客にプロトタイプを共有できる

プライベートプロダクト戦略。Webアプリを起点にしたクロスプラットフォームで大企業が真似できない価値をつくる

Web制作

  • 需要は拡大したが作りても増えている
    • ノーコードツールなども

個人プロダクト

  • アイデア勝負に出ても大企業が入ってきたら負けてしまう
    • 大企業が入ってこないようなターゲットを絞ったものがいい

技術選定

  • 1人で開発運用できること
    • 細部までこだわりすぎない
      • SaaSそのまま乗っかれるのはそのまま使う
    • web/ios/android全部作る
      • アプリストアで検索するユーザが多い
    • sshで入れる環境を持たない
      • セキュリティは妥協できない
    • 認証も外部のSaaSを使う
      • 個人情報を持つだけでリスク
    • 決済は法律が多いのでSaaSに乗っかったほうがトータル安いくらい

Bunで変わるフロントエンドの世界

  • tada

CommonJS/ESModules問題

  • CommonJSとESModulesは混在できない
  • ライブラリ開発者
    • デュアルパッケージで頑張る
    • 片方見捨てる
  • Bunならこれが解決できる

Bun

  • JavaScriptランタイム
  • TS標準サポート
  • Denoと違ってNodeとの互換重視
  • 2023/9/8に正式リリース

今後

  • ESModules前提で作られるライブラリが増えてくる
    • そうしたらBunの次のなにかがくるかも

ビジネスサイドの要望をかなえながらVue2からVue3にアップグレードした話

  • てつえもん

Vue2

  • 2023/12にVue2のサポート終了

Vue3移行

  • Laravel-mix(Webpackラップしてるようなやつ)をViteに移行
  • 技術選定
    • VeeValodateもメジャーVUP必要あり
    • Vue3対応してないライブラリどうするか(DatePickerなど)
  • Vue2を3に
    • 文法書き換え
    • ESLintとTSエラーをignore(いったんこらえてアップグレードに注力)

デザインシステムはじめの一歩

  • yuuri

デザインシステムとは

  • メリット
    • 一貫したデザインや操作性の提供
    • 再利用性の向上
  • 構成要素
  • サービスの成長に伴ってデザインシステムも変化し続ける

リッチなアニメーションを手軽に実装！ Lottieアニメーションの基本と活用事例

  • 株式会社necco / 田口 冬菜

Lottieの基本

  • アニメーションライブラリ
  • AEやFigmaで作ったアニメーションをWebやアプリに取り込める
  • キャラクターやイラストなどのリッチな動きもJSONベースのベクターなので軽量

Lottieの特徴

Lottieで使える表現

  • シンプルなアニメーション
    • 透明度、スケール、回転、位置の変化
  • 背景の透過
  • パスの編集
    • モーフィング、トリミング
  • SVGとしてできることができること

デザインシステムの技術選定・設計の勘所 2023

デザインシステムの構成技術要素

  • デザインの再現性を高め一貫した歯品体験を効率よく表現することを目的に導入される「ドキュメントやリソース群」
  • 設計思想
    • デザインデータが雑でもUI実装できる
    • 標準化にのっとる
    • 更新運用まで組み込む
    • ドキュメントサイトも一部

デザイントークン

  • Figmaで一元管理したい
    • 値と見た目をセットで管理できるのがいい

UIコンポーネント

ビルドツール

  • tsupがおすすめ
    • esbuildをラップしたもの
    • viteと同じような立ち位置?

VisualRegressionTest

  • Chromatic
    • 高い
  • reg-suit + Storycap
    • 自前で作るやつ

Lint

  • 厳しくした方がいい
    • 妥協を輸出しないように

ドキュメントサイト

  • 読まれることが大事
  • 選択肢
    • Notion
      • 実装のpreviewのせるのが大変
    • Zeroheight
      • 高い
    • 自前で構築
      • 初期コストは高いがこれが良さそうとのこと
      • 自動化など運用もしやすい
      • AstroをUbieでは使ってる
      • mdxで管理するといい

フロントエンドエンジニアも知っておきたい HTTP/3 で変わること

HTTP3

  • TCPのかわりにQUIC上で動作する
  • HTTP3になると高速な人がもっと速くなるというより通信環境が悪い人の速度が改善していく

ReactメインのチームにNext.jsを導入した道のり

  • ペンギン丸

対象プロジェクト

  • Reactで作られていた
  • Next入れてSSRしても恩恵はないタイプのプロジェクト
    • SSRせずにstaticな出力で利用するようにした
    • SSRしないならPagesRouterでもAppRouterでも変わらない

イベント設計におけるフロントエンドな考え方、その魅力

進化したWeb技術でPWAをネイティブアプリに近づける

PWAとは

  • 最新のWeb機能を使用して機能と信頼性を強化しどこでもどのデバイスでも単一のコードでインストールできる
  • 3つの柱
    • Capable/機能性
    • Reliable/信頼性
    • Installable/インストール可能

PWAチェックリスト

  • Core
    • 素早く起動し高速
    • どのブラウザでも動く
    • あらゆる画面サイズに応答
    • カスタムオフラインページの用意
    • インストール可能
  • Optimal
    • オフライン機能
    • アクセシビリティ担保
    • 検索で見つけられう
    • すべての入力タイプに対応
    • 権限リクエストのコンテキスト提供
    • 正常なコードのためのベストプラクティスに従う

PWAをネイティブアプリに近づける

Web Share API

  • SNS共有の機能を呼び出すAPI
    • OS標準のUIを表示できる

Web Share Target API

  • 他アプリからの共有を受け取るAPI
  • manifestで設定するだけで使える
  • インストールされてるときじゃないと使えない

Shortcuts API

  • ショートカットメニューを追加する
  • インストールしたアイコンを長押しするとショートカットが出る

フロントエンジニアの戦闘力をエンパワメントするheadlessCMSという選択肢

  • Takuya Takeda

WEBサイト制作の

  • HeadlessCMS
    • APIを介して利用できるコンテンツ管理システム
    • コンテンツ管理者はGUIでデータを投入する
    • そのデータをAPIを介して取得し画面を更新する

GraphQLクライアントの技術選定

GraphQL

  • APIの規格
  • GraphQLのメリット
    • 柔軟なデータフェッチ
    • 型付けされたスキーマ
    • エコシステム
    • FragmentColocation

技術選定

  • 観点 　 - FragmentColocation
    • 型の自動生成
    • キャッシュ機構
    • 学習コスト
  • 候補
    • Relay
    • ApolloClient
    • urql
    • graphql-request
  • 現状FragmentColocationへの最適化を考えるとRelayがいいとのこと

アクセシビリティを理解するとフロントエンドのテストが楽になる！

アクセシビリティのガイドライン

  • WCAG(WebContentAccessibilityGuidelines)
    • シングルA〜トリプルAの3段階基準がある

wai-aria

  • 適したHTMLを使えない場合はwai-ariaで意味を補強する
  • buttonじゃないけどクリッカブルな要素に role="button" をつけたり

roleを使ったコンポーネントのテスト

  • testing-libraryではroleを指定して要素を取得する機能がある

SupabaseとSvelteKitで作るバックエンドレスなサーバーレスWebサイト

svelte

  • write less code
  • no virtual dom
  • truly reactive

sveltkit

Supabase

  • postgreSQLをAPIで呼び出せるDBMS
  • subscriptionもできる
  • 認証認可の仕組みもある
  • SQLクエリをREST APIに変換する機能
  • ストレージ(裏側はS3)
  • サーバーレス関数
  • Firebaseと似た立ち位置？

なぜコピペで利用するコンポーネント集を採用するのか？

コンポーネント集

Unstyledコンポーネント

  • スタイルがなく機能だけを提供する
  • a11yを担保しながら作る観点もある
  • HeadlessUI,RadixPrimitives
  • MUIなどは楽だが縛りは強い、unstyledは自由だけど大変

両方いいとこ取りする

Expo RouterはExpo導入の決め手となるか

Expo使うかどうか

  • Expo使うと
    • 開発環境構築が容易
    • デプロイ配布が楽
    • Expoに含まれないネイティブ機能にアクセスできない
    • アプリサイズが増える
    • 最新のReactNativeを利用できない

Expo Router

Now and Next generation of CSS Cascading Model

CSSの詳細度

  • 詳細度負けて無理やり!importantつけることないか
  • 詳細度で頑張るにしても無理やり属性つけたりすることになっていまいち

Layer

  • 新しく増えた宣言のしかた
  • @layer xxx と定義すると何もつけてないものより優先される(詳細度で負けてても)
  • layerどうしだと宣言順
  • 外部CSSのimport時にlayer指定もできる

Scope

  • stylesheetをどこからどこまで適用するか定義できる
  • @scope (.nav-bar) {} だと .nav-bar 配下だけに適用される
  • 下限も設定できる @scope (.nav-bar) to (.sub-list) {}
  • styleタグにもscopeを書ける

LT: React Native for web導入失敗記

  • sori

LT: Figma Widgetを自作して、デザイナーとエンジニアのコラボレーション強化を図る

  • Toya Yamanishi

LT: Web フロントエンドにおける副作用との向き合い方

LT: フロントエンドエンジニアが「Webサービスアプリ化して」と言われた時にWebViewでリリースした話

  • tada

LT: 2023年のゼロランタイムCSS in JSを考える

LT: ユーザー登録とログインフォームにautocomplete属性を使いましょう

LT: Astro3.0+TranstionAPIでイケてるサイトを爆速開発していく feat. React