Daiki Urata Table of Contents
はじめに
みなさんこんにちは、チーム「Flair」の浦田です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドエンジニアが、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。
今回は、TypeScriptやExpo/React Native関連が話題にあがりました。
前回の記事
TypeScript
Type-safe raw SQL in Prisma ORM
Prismaに新しくTypedSQLという機能が追加されました。 生のSQLをPrisma Clientに読み込ませると返ってくる結果に型がつくようになるようです。
すごく便利だなとは思いつつ、どういう仕組みで実現しているのかは気になります（SQLパーサーで頑張る！？）。
TypeScript-Sudoku
TSの型定義で数独ゲームを実現したソースコードです。 実装もそうですが、まず型で数独を作ろうという発想がすごいです！
TypeScriptなので正解を入力するとエラー表示が消えて即時に答えがわかるので快適にプレイできそうです。
TypeScript 5.6
TypeScriptにもESLintの no-constant-binary-expression のような設定ができるようになりました。
例えば、必ずtrueにしかならないようなifの条件分があるとエラーになります。 これによりバグの発見につながることもあると思います。
その他にはInteratorの改善などがこのリリースに含まれています。
ランタイム関係
Node.js Takes Steps Towards Removing Corepack
Node.jsからCorepackが削除される予定とのことです。 pnpmやyarnを入れる際にそれぞれのドキュメントにCorepackを使用してインストールする方法が書かれていたので、弊社メンバーもよく活用していたそうです。
しかし今後は別途Corepack自体をインストールする必要が出てくるので、使いづらくなってきますね。
早速↓のような記事も投稿されていました。
https://zenn.dev/monicle/articles/b7a9314f9f1efb
Vue.js
Reactive Props Destructure を支える技術
Vue 3.5.0で新しく追加された機能Reactive Props Destructureについて解説されている記事になります。 これまでVueコンポーネントのpropsの中の値をリアクティブに扱いたい場合は以下のように各必要がありました。
const props = withDefaults(
defineProps<{
count?: number
msg?: string
}>(),
{
count: 0,
msg: 'hello'
}
)
しかしReactive Props Destructureに対応したことで以下のように分割代入を使用してもリアクティブになります。
const { count = 0, msg = 'hello' } = defineProps<{
count?: number
message?: string
}>()
これによりwithDefaultsも不要になるのでかなりシンプルに書けるようになりました。
これをどうやって実現したかについて詳しく書かれています。 私もざっとしか読めてないので、後で時間をかけて読みたいと思います。
Mobile & Expo
CocoaPodsがメンテナンスモードになる
CocoaPodsがメンテナンスモードに入るというお知らせの公式ブログです。 今後はCocoaPodsは新機能の追加はしなくなり、セキュリティやXcodeのアップデートなどのメンテナンス対応だけになるとのことです。
これは普段React NativeやFlutterで開発を行っているエンジニアには話題になったのではないでしょうか。 弊社でも普段React NativeやFlutterでアプリの開発を行なっているので、メンテナンスサポートが止まるまでにReact NativeやFlutterがSwift Package Managerへ移行することを願っています。
React NativeのSwift Package Manager対応の展望
こちらも先ほどのCocoaPodsの記事に関連したもので、React NativeのSwift Package Manager対応の状況について書かれている記事になります。
この記事の中でFlutterはすでにSwift Package Manager（SPM）対応が進んでいるとのことでした。
React Nativeの対応状況としては.podspecファイル経由でSPM依存が書けるようになるとのことでした。
React Native v0.75やExpo 52で上記対応が入ってくきて、不安定になるライブラリが出てくる可能性があるとのことで弊社でも覚悟しておきたいと思います。
Expo DOM components
ReactコンポーネントがReact Nativeで動かせるExpo DOM componentsというものが発表されました。
use domというディレクティブをファイルの先頭に書けばReact Nativeコンポーネント内でReactコンポーネントをimportして使えるというものです。
実際にshadcn/uiをExpoアプリで動かしたサンプルコードが公開されており、フロントエンドメンバー内でも話題になりました。 Reactのエコシステムが使用できるようになるので、実装の幅が広がりそうです。
BLEを使ったExpoアプリの作り方
BLE（Bluetooth Low Energy）機能を活用したExpoアプリの開発方法について書かれたExpo公式のブログになります。
記事内ではreact-native-ble-plxというライブラリを使用してスマホとArduinoとをBLEで接続していました。
弊社メンバーも技術時間（業務内で自分の興味ある技術を自由に試したり勉強できる時間）を利用してこの記事を参考にスマホからBLE接続してデバイスをLEDを光らせていました。 これは何かの案件に活用できるかもしれません。
iOSの標準APIで翻訳できる
iOSの標準APIを利用したReact Nativeライブラリを著者が作成したので、その使い方を解説している記事です。 有償APIを使わずにそれなりに精度の高い翻訳ができるようで、そこがメリットではあるなと思いました。 一方でAndroidも似たような標準APIがあれば良いなと思いました（MLKitで実現できるのかも！？）。
Expoアプリでアニメーションを実装方法
色々な数式を使って、アニメーションを実装してるExpoの公式ブログ記事になります。
複雑数式を考えて実装するのは難しいかもしれませんが、react-native-reanimatedが活用できればReact Nativeでもヌルヌルしたアニメーションが実現できそうだなと感じました。
デザイン
イカしたUIを見るシリーズの第２弾が出てた
Goodpatchさんによる、イカしたUIを紹介する記事第2弾が出てました！ 過去のこの座談会でも第1弾を取り上げましたが引き続き第2弾も良い記事でした。
この記事でボトムシートを掴むところを「グラブハンドル」と呼ぶの初めて知りました。
管理画面のUIデザインにおける25の改善ポイント
管理画面のUIデザインにおけるよくある改善ポイントをまとめた記事になります。 管理画面以外にももちろん当てはまるポイントもありますが、記事内でもある通り「大量の情報と複雑な機能」を有することが多い管理画面では特に気を付けると良さそうでした。
内容がとても充実していて、とても分かりやすい記事でした。
その他
postres.new
Supabaseが発表したAIアシスタント付きin-browser Postgresサンドボックスです。 以下の機能が使えるようです。
- D&DでCSVインポートできて自動でテーブルが作成できる
- レポート出力ができる
- チャートの生成ができる
- DBダイアグラムの作成ができる
私も実際に試してみたんですが、「〇〇のようなシステムを作りたい」のようなプロンプトを入力するだけで、ER図を作成してくれたのでとても便利だなと思いました。今後DB設計が楽になりそうです。
FindyでのGitHub Actions活用事例
FindyさんでのGitHub Actions活用事例を紹介したスライドになります。 GitHub Actionsを活用した開発効率化のノウハウが詰まっていてとても参考になりました。
最後の方にPR作成されてからCloseされるまでのリードタイム計測に使っていると書かれていて、これは弊社でも活用できそうだなと思いました。
イベント
Supabase Meetup at Fukuoka
福岡で開催されたSupabase公式のMeetupイベントでした。 私も参加しましたが、残念ながらSupabaseの人は来ませんでした...（Tシャツもらえました！）
ただ参加してわかったこととして、SupabaseはMeetupを各地で開催することでコミュニティを広げ、ユーザーを拡大していく戦略をとっているということです。
フロントエンドカンファレンス北海道まとめ
夛田くん登壇お疲れ様でした！（「2024年にガラケー・ガラホをサポートするWebフロントエンド」という内容で発表）
全て面白そうな内容ばかりで、私も後で資料を見返そうと思います。
エンジニア出身デザイナーusagimaru氏と学ぶ ロジカルに考える エンジニアのためのUIデザイン
こちらは10月15日開催のオンラインイベントです。 結構珍しいエンジニア出身デザイナーの方ということで、私もエンジニアですがUIデザインには興味があるのでぜひ視聴したいと思います。
各社の事例から学ぶウェブアクセシビリティ
こちらは8月23日に開催されたウェブアクセシビリティに関する勉強会でした。
印象に残ったポイントがいくつかありました。
- Headless UI使うとアクセシビリティ良くなるのでオススメ
- Linterなど活用することで実装時にチェックできる（eslint-plugin-jsx-a11yなど）
- 画像にAlt入れるなどの小さいところから始めると良い
アクセシビリティカンファレンス名古屋
9月7日に開催されたアクセシビリティのカンファレンスで、こちらも夛田くんが参加しました。
アクセシビリティ支援アプリの話や、受託でのアクセシビリティ対応の話、キャリアの話など色々な話が聞けたとのことです。
宣伝
前回の座談会記事で告知していました「Fusic Tech Live Vol.21 〜Front-End Tech Live〜」が昨日（9月12日）開催されました！
Youtubeでのアーカイブ配信されていますので、見逃した方はぜひご視聴いただけたらと思います！
Daiki Urata
フロントエンド/モバイルアプリなどを主に開発しています。
