Fusicフロントエンド座談会 from 雅 2023/04/14

TL;DR

• Figma GPT
• Nuxt Devtool
• iOS 16.4 にて、Web Push Notificationがリリース
• GitHub Actions extension for VS Code
• React.gg が今年の夏リリース予定
• Streaming for Vercel Functions
• Nintendo Systemsの採用サイトがスゴイ
• Voltaでのnodeバージョン管理が便利
• Laravel Zodgen (弊社の浦田が作成したライブラリ)
• magicast
• Vercel joins AWS Marketplace
• Next.js 13.3 リリース
• Hono
• Hermesエンジンが人気
• Supabase Edge Runtime
• Cygamesのスライド
• Nuxt 3.4
• Storybook 7.0 正式リリース
• AgentGPT 公開
• Pretty TypeScript Errors でエラーの視認性が劇的に向上

議事録

Figma GPT

• https://www.figma.com/community/plugin/1213050091855586023/Figma-GPT
• chatGPTがいい感じのデザイン・コードを書いてくれる
• chatGPTのAPIキーが必要
• figmaで既にダミーデータをプラグインは存在するが、FigmaGPTはダミーデータも込でデザインを作ってくれる

Nuxt Devtool

• https://nuxt.com/blog/introducing-nuxt-devtools
• Vuejsはchromeでdevツールがあるが、それのNuxt版？
• 使用しているplugin・componentの情報を簡単にリッチに可視化
  • componentツリーや、依存関係を可視化出来るっぽい
  • Assetsの画像一覧、path一覧を確認できる
  • 昔のVueCliに似ている（＊VueCliはメンテモードになっていて今は開発されていない）
  • Hooksの一覧
• 分析に使えそう
• Vitestのモジュールグラフも見れる

iOS 16.4 にて、Web Push Notificationがリリース

• https://gigazine.net/news/20230328-ios-16-4/
• webでもpush通知飛ばせるのは案件での影響大きそう。ただtoCの案件では、スマホのHome画面に設定するハードルが高そう（ユーザーのリテラシーが求められる）
• APNsではなく、service workerでハンドリングしてトリガーしてる模様。web api使ってる模様。
• 実際に使う時は、この記事 読んだら良さそう
• 案件で実践投入するには、前もって要技術調査が必要そう
• FCM使うと楽そう この記事 が詳しそう。

GitHub Actions extension for VS Code

• https://www.publickey1.jp/blog/23/github_actions_extension_for_vs_codevscode.html
• github actionsの実行状態をvscode上で確認出来る
  • log ・ Variables・Secretsなども確認できる
• github actionsのyamlファイルの補完が効くようになるので、新しいWorkflow作成も捗る

React.gg が今年の夏リリース予定

• https://react.gg/
• Reactの学習ロードマップサイト
• 夏から公開される。今は一部の使える模様
• 新卒とかの研修で使えそう

Streaming for Vercel Functions

• https://vercel.com/blog/streaming-for-serverless-node-js-and-edge-runtimes-with-vercel-functions
• https://beta.nextjs.org/docs/data-fetching/streaming-and-suspense
• serverlessでストリーミング出来るようになった。
• 使い所がよくわからない。使いこなしてる事例を見てみたい。エッジでServer Side Componentを使いたい時？

Nintendo Systemsの採用サイトがスゴイ

• https://www.nintendo-systems.com/
• Nintendo Systemsのコーポレートサイト
• スクロールすると、後ろでTypeScriptのコードが流れていく
• 画面下にブランチ名なんかが表示されていて細部にこだわりが見える

Voltaでのnodeバージョン管理が便利

• https://volta.sh/
• Rust製のnodeのバージョン管理ツール
• ディレクトリごとに自動で切り替えられる
• asdf使ってるユーザーが多いが、node.js以外の管理をどうするか悩ましい
• nodejs特化なのは良さそう

Laravel Zodgen (弊社の浦田が作成したライブラリ)

• https://github.com/7nohe/laravel-zodgen
• 弊社の浦田が作ったOSS
• Laravelのバリデーションを自動で、Zodのスキーマに変換してくれるOSS
• フロントエンドとAPIの両方でバリデーションを書く手間を省ける
• Laravel側からフロントエンドのバリデーションを生成するので、フロントエンドとAPIでのバリデーションのズレなども防げる
• Inertia使ってるユーザーにはかなりささりそう
• phpカンファレンスのプロポーザルにも出しているので、機会があれば発表するかも

magicast

• https://github.com/unjs/magicast
• config.jsなんかを実行前に改変してくれるツール
• https://github.com/unjs/magicast#examples参照

Vercel joins AWS Marketplace

• https://vercel.com/blog/vercel-joins-aws-marketplace
• MarketplaceでVercelを使うと凄く高くなる可能性があるため、要調査

Next.js 13.3 リリース

• https://nextjs.org/blog/next-13-3
• そこまで大きい変更はないが、Dynamic Open Graph Images が凄く良さそう
  • 内部では、@vercel/og and Satori が使われている模様
  • 大量の記事が生成されるようなサイトなんかではかなり役立ちそう

Hono

• https://hono.dev/
• https://speakerdeck.com/yusukebe/dokodemodong-kuwebhuremuwakuwotukuru
• 日本人の方が作者
• jsランタイム何でも動くらしい。かつ速い
• edgeで処理する必要がある案件で使ってみたい

Hermesエンジンが人気

• https://twitter.com/expo/status/1645540179724353536?s=46&t=-iFV0JJ9bvzs4iG6VfWEIQ
• Hermesになってかなり早くなった
• 開発時はあまり意識することがない

Supabase Edge Runtime

• https://supabase.com/blog/edge-runtime-self-hosted-deno-functions
• Supabaseは、FireBaseライクなオープンソースBaaS。
• DBにPostgresを利用できる
• edge処理に対応

Cygamesのスライド

• https://twitter.com/ui_nyan/status/1645968472760029184?s=46&t=-iFV0JJ9bvzs4iG6VfWEIQ
• Cygames開発者の方によるスライド
  • 高負荷のさばき方、技術選定の方法、インフラ構成、テストなど学べるところが多い

Nuxt 3.4

• https://nuxt.com/blog/v3-4
• https://nuxt-view-transitions.surge.sh/
• **Transitions API**がサポートされた。
  • 設定で viewTransition: true にするだけで、リッチなアニメーションを使える
  • 現状はChromeのみ対応
  • 未対応ブラウザでは画面遷移する

Storybook 7.0 正式リリース

• https://storybook.js.org/blog/storybook-7-0/
• 記法がだいぶ楽になったらしい
• storybookがあると途中からジョインした案件ではかなり助かる

AgentGPT 公開

• https://vercel.com/templates/next.js/agent-gpt
• https://agentgpt.reworkd.ai/
• https://note.ambitiousai.co.jp/n/n870bfa0e5280
• 自立型のAIエージェント
  • エージェントの名前と、ゴールを設定すると、ゴール達成までのタスクを切り出し自立式で考えてくれる
  • chatGptを使用してTypeScriptだけで完結してる。（Nextjs、LangChain）
  • プロンプトエンジニアリングの部分が参考になる。
    • JSON.parse()で解析可能な文字列で出力されるようにプロンプトエンジニアリングしている

Pretty TypeScript Errors でエラーの視認性が劇的に向上

• https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
• TSエラーがかなり読みやすくなる。
  • TSのエラーが一生ユニオンされていて読めないが無くなりそう
  • TSのデフォルトのエラーは長すぎて、読むのが大変だった