Fusicフロントエンド座談会 from 雅 2023/12/1

TL;DR

• Next.jsのv14リリース
• Expoの機能について
• Nuxtの機能について
• Appleが開発にVue.jsを使っている
• server-action-system-reboot
• Remix Vite対応
• Svelte Japan
• Rakuten Technology Conference
• Vue Fes Japan資料まとめ
• WasmGC
• Deno playground
• 次世代カンファレンス
• ExpoのランタイムがNode.jsのv18へ
• Angularリブランド
• Tauriエンジン内製化
• Write a JavaScript Parser in Rust
• FigJam AI
• React Native製アプリ
• figみたいなライブラリ
• Astro 3.5
• Play Console個人デベロッパーアカウントのテスト要件
• TailwindみたいなUtilityファーストなCSS Framework
• Mantine
• OOUI実践記事
• Vue Fes Japan After meetup
• unplugin-time-stat
• UnJsまとめ
• React vs Vue
• プラットフォーム開発の真実
• NativeBaseがgluestack-uiへ
• tldraw AI
• 大規模デザインシステムを作る
• フロントエンドカンファレンス沖縄まとめ
• React Nativeアドベントカレンダー
• JSConf JPまとめ
• TypeScript 5.3
• ChatGPT活用したUI勉強会
• Flutter dart defineの削除

議事録

Next.jsのv14リリース

• https://x.com/nextjs/status/1717596665690091542?s=20
  • Server Actionsが、stableになる!
  • Next Learn Course充実
    • App Router
    • AuthenticationのLearn Courseもあるの良さそう
• https://x.com/AdamRackis/status/1717607565260124613?s=20
  • buttonのformActionからServer Actionを実行することで、直接SQL叩ける!!
• Amplify対応
  • https://github.com/aws-amplify/amplify-hosting/issues/3773
  • https://x.com/AWSAmplify/status/1726661768779268449?s=20
  • もともとAmplifyのNode.jsバージョンが低すぎて動かなかった
  • 後で正式対応されたので今は動く
  • キャッシュの話
    • https://zenn.dev/coconala/articles/d23fe8701ce10b
    • キャッシュ周りつらそうな話はよく聞く
    • これを乗り越えたらApp Router使いこなせそう

Expoの機能について

• Rich Text
  • https://docs.expo.dev/guides/editing-richtext
  • Textタグの中にTextタグを埋め込むことが推奨された
  • 一方でなんかもっと上手く実現できそう
• Expo Orbit v1
  • https://x.com/expo/status/1724523104175857903?s=20
  • これは便利
  • ツールバーからExpoのビルドを利用してsimulatorが起動できる！
• Supabase
  • https://x.com/expo/status/1719423411691377071?s=46
  • https://docs.expo.dev/guides/using-supabase
  • ExpoがSupabaseを推している...
• Build Trigger
  • https://docs.expo.dev/build/building-from-github/#build-automatically-when-code-is-pushed-to-repository
  • Expo公式でGitHubからビルドトリガーできる対応がされた
  • 今までGithub Actions自作してたのでありがたい
  • 次の案件で使っても良いかも
• Expresso
  • https://shift.infinite.red/announcing-ignite-9-0-exp-ress-o-89ab5801937d
  • Expoフォーカスなスターターキット的なもの？
  • これを使うメリットが知りたい

Nuxt

• Nuxt useSeoMeta
  • https://nuxt.com/docs/api/composables/use-seo-meta
  • SEOのメタタグをTypeScriptで書ける！
• Nuxt DevTools v1
  • https://nuxt.com/blog/nuxt-devtools-v1-0
  • UIカッコいい
  • NuxtはDXにフォーカスしてるイメージ

Apple uses Vue.js

• https://x.com/icarusgkx/status/1719083218819747960?s=46
  • 公式で宣言してくれたのはエビデンスとしてありがたい

server-action-system-reboot

• https://github.com/Brooooooklyn/server-action-system-reboot
• Server Actionでマシン再起動できるライブラリ
• Server Action出てきて、こういう系のライブラリ出てきた

Remix Vite対応

• https://remix.run/blog/remix-heart-vite
• Vite対応したので、Viteのエコシステムが使えるので良さそう

Svelte Japan

• https://svelte-jp.connpass.com/event/297474
• オンラインのみ
• 第1回なので観てみるの良いかも

Rakuten Technology Conference

• https://rakuten-tech-fukuoka.connpass.com/event/297009
• AI系の話がメインだった

Vue Fes Japan資料まとめ

• https://zenn.dev/punkshiraishi/scraps/bf3829dc79466b
• Nuxt2→Nuxt3移行の話は面白かった。iframe使う話

WasmGC

• https://developer.chrome.com/blog/wasmgc
• WasmGCがChromeでデフォルト有効になった

Deno playground

• https://unyt.land
• TypeScript playgroundでDenoのパッケージが動く

次世代カンファレンス

• https://nextwebconf.connpass.com/event/300174
• 面白そう

ExpoのランタイムがNode.jsのv18へ

• https://x.com/expo/status/1721649529358029031?s=20

Angularリブランド

• https://angular.dev
• ロゴやサイトが一新された

Tauriエンジン内製化

• https://www.publickey1.jp/blog/23/rustservowebviewelectrontauri.html

Write a JavaScript Parser in Rust

• https://oxc-project.github.io/javascript-parser-in-rust/ja

FigJam AI

• https://twitter.com/figma/status/1721936196996350387
• ブレストとかの時に使えそう
• 表やアジェンダも作ってくれる便利!

React Native製の有名アプリが公表

• https://x.com/reactnative/status/1722025802974277983?s=20
• お客さん提案時に説得材料に使えそう

figみたいなライブラリ

• https://github.com/microsoft/inshellisense
• EC2とかに入った時にnpm installでfigみたいに補完が効くようになる

Astro 3.5

• https://astro.build/blog/astro-350
• 3.6や4.0betaが出ている

Play Console個人デベロッパーアカウントのテスト要件

• https://support.google.com/googleplay/android-developer/answer/14151465?hl=ja

mastercss

• https://css.master.co
• TailwindみたいなUtilityファーストなCSS Framework
• Tailwindの上位互換的な感じ
• 検索に出にくいが、名前大丈夫かな…

Mantine

• https://mantine.dev
• コンポーネントライブラリ
• Server Componentにも対応してる？

OOUI実践記事

• https://note.com/pizz0a/n/n8d5b72979c1f
• かなりわかりやすく解説・まとめられているのでオススメ

Vue Fes Japan After meetup

• https://fukuokajs.connpass.com/event/302013
• 夛田くん登壇！

unplugin-time-stat

• https://github.com/kazupon/unplugin-time-stat
• kazuponさん作
• パフォーマンス計測のライブラリ

UnJsまとめ

• https://zenn.dev/ytr0903/articles/c6c42147ed29be
• あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群

React vs Vue

• https://timeedev.connpass.com/event/300375/
• ReactとVue.jsの良さがわかりそう！

プラットフォーム開発の真実

• https://youtu.be/iulx7Sykm4I?si=TQiTp-T6snH1gRsw

NativeBase→gluestack-ui

• https://nativebase.io/blogs/road-ahead-with-gluestack-ui
• https://gluestack.io/
• NativeBaseからgluestack-uiに移行が必要
• gluestack-uiはHeadless UIっぽい

tldraw AI

• https://x.com/tldraw/status/1724892287304646868?s=20
• https://github.com/tldraw/draw-a-ui/blob/8a889bf36afc06fbb0cc2d5d5a0687518c5c8e68/app/api/toHtml/route.ts#L2
• 生成AI系とTailwindCSSの相性が良いよね

大規模デザインシステムを作る

• https://www.catapultsuplex.com/entry/building-a-large-scale-design-system
• この記事を読むとデザインシステムとは、というのがわかる
• デザインシステムは制約作り→へんなデザインを生み出さない

フロントエンドカンファレンス沖縄まとめ

• https://zenn.dev/yumemi_inc/articles/2023-11-18-frontend-conf-okinawa-2023
• 清家さん,礒谷さん,山西さん,夛田さん発表お疲れ様でした！

React Nativeアドベントカレンダー

• https://qiita.com/advent-calendar/2023/react-native
• いい内容ばかりなので是非！

JSConf JPまとめ

• https://zenn.dev/yumemi_inc/articles/2023-11-19-jsconf-jp-2023
• 気になる発表多め

TypeScript 5.3

• https://devblogs.microsoft.com/typescript/announcing-typescript-5-3
• switch (true) narrowingが便利

ChatGPT活用したUI勉強会

• https://note.com/tsumura_design/n/n2d2b5de6be61?sub_rt=share_h
• ペルソナやユーザーストーリー作成とかに活用していた

Flutter dart defineの削除

• https://github.com/flutter/flutter/issues/138793
• stagingやproductionを分けるときに使ってたけど、使えなくなった

まとめ

今回はNext.jsのアップデートやExpoの機能追加から始まりフロントエンドカンファレンスなどの情報というフロントエンドの技術に振り切った内容になりました。 これからもどんどんアップデートが進み、誰でもアプリが作れる時代になるといいですね！