Daiki Urata Table of Contents
はじめに
みなさんこんにちは、チーム「Flair」の浦田です。 「Fusicフロントエンド座談会」は、Fusicのフロントエンドエンジニアが、チーム内で気になった記事や技術情報を共有し、ちょっとだけ深ぼりしていく会です。
今回は、TypeScript/JavaScript関連の仕様やReact 19関連が話題にあがりました。
Note
これまでタイトルは「Fusicフロントエンド座談会 from 雅」となっていましたが、組織改編により雅チームではなくなったので今回から「from 雅」が取れました
前回の記事
JavaScript/TypeScript
TypeScriptのモノレポ構成についての記事
TypeScriptでのモノレポ構成を採用する場合どう設計するのが良いか検討している記事になります。 特にモノレポをするにはどのパッケージマネージャが良いとかは言及されておらず、あくまでモノレポの手法について書かれていました。 私も最近React Nativeプロジェクトでモノレポを導入しましたが、React Nativeでモノレポする際は、エントリファイルがnode_modules以下を見る関係で少しつまずくことがありました。
TypeScript 5.5
全人類待望のInferred Type Predicatesがついに使えるようになりました！ これでmapやfilterの後に無駄な型の調整が要らなくなりました。
AI Shift フロントエンドトーク 2024-07
私が購読させてもらっているAI Shiftさんのフロントエンドトーク記事です。 JSのSetで集合演算ができるようになったのは初めて知りました。パッと使うケースが思いつかないですが、便利そうですね。
React
AI Shift フロントエンドトーク 2024-06
こちらもAI Shiftさんのフロントエンドトークで6月の記事になります。
この記事で気になったものとしてReact 18に段階的にReact Compiler導入できることでした。
"use memo"ディレクティブを一部のコンポーネントに指定して、段階的に導入できるのは良さそうでした。
Cybozu Frontend Weekly (2024-07-09号)
次にサイボウズさんの記事です。 React19への移行ツールがあるのを初めて知りました。 forwardRefを自動で削除してくれるようなので、移行する時がきたら使ってみようと思います。
shadcn/ui + React Hook Form + Zod
shadcn/uiのFormコンポーネントをReact Hook FormとZodの組み合わせで使うととても便利だったとメンバーで話していました。
ただ特殊なことをやろうとしてrefを渡したい場合などはセレクトボックスを使う場合、Selectコンポーネント群のどのコンポーネントに渡せば良いかわからなくなるということもあるようでした。
Hono
Drizzleのスキーマを作れば、HonoのCRUDが生えて、型付きのクライントが生えるという提案とPoC
手動でDrizzleのスキーマ作成すると、自動でHonoのCRUDができて、自動で型付きのクライントができるという機能がHonoのGitHub Discussionsに投稿されていました。
例えば以下のようなDrizzleスキーマがあったとします。
import { pgTable, text } from 'drizzle-orm/pg-core'
export const userTable = pgTable('user', {
id: text('id').primaryKey(),
username: text('username').unique().notNull(),
passwordHash: text('passwordHash').notNull(),
})
その場合Hono側で自動で以下のようなCRUDができるというものです。
// create crud endpoints for the userTable, but leave out 'id' when creating the zod schema.
const userCRUDEndpoints = createCRUDRoutes('user', userTable, 'id')
const app = new Hono().route('/api/user', userCRUDEndpoints.routes)
// If inspecting the routes (e.g. via `showRoutes(app, { verbose: true,}`) it will show the following output:
// GET /api/user
// [handler]
// GET /api/user/:id
// [handler]
// POST /api/user
// [handler]
// PUT /api/user/:id
// [handler]
// DELETE /api/user/:id
// [handler]
さらにクライアント側からリクエストする際も自動で型がつくようになります。
import { hc } from 'hono/client'
import type { AppType } from '../backend/index'
export const client = hc<AppType>()
// The following will give a type error, exactly as we wanted:
// Argument of type '{}' is not assignable to parameter of type '{ json: { username: string; passwordHash: string; }; }'.
client.api.user.$post({}) // not OK
// Passes type checking:
client.api.user.$post({json:{username:'test', passwordHash: 'x'}}) // OK
これが実現されたら開発生産性が爆上がりしそうですね！ Ruby on Railsのようなフルスタックフレームワークのようになる未来があるかもしれません。 今のところDiscussionは活発に進んでいるようで、公式ではないのですが似たような機能を持ったHonoHubというOSSも誕生していました。
Honoの今後に期待です。
OAuthの仕組みを説明してHonoで実装してみる
タイトルの通り、Honoを使ってOAuthの仕組みを説明している記事です。 Honoで実装してただ解説しているのではなく、認証・認可の違いや認証方法の説明が詳しく書かれています。
OAuthは大体フレームワークの機能で提供されていてなんとなくで実装しがちですが、Honoのようなシンプルなフレームワークで実装すると認証フロー図とコードがうまくリンクできて理解しやすかったです。
ツール・ランタイム系
JavaScriptの活躍の場を広げる「ランタイム」の今
最近乱立しているJavaScriptランタイムが整理、解説されている記事です。 比較表や図が使われていてとてもわかりやすかったです。
What You Get After Running an SSH Honeypot for 30 Days
SSH Honeypotを30日間動かしてみたらどうなったかについて書かれています。 SSH honeypotは、攻撃者がシステムに不正アクセスしようとした際に、その攻撃を検知・記録するもので、おとり捜査のSSH版です。 どんな攻撃来て、どんなスクリプトが流されているかが解説されていました。
Rust製のWebバンドラー Mako
新しくRust製のWebバンドラーがでてきました。 公式サイトのベンチマークを見ると、Viteはもちろんのこと、同じRust製のRsbuildやFarmよりも速いそうです。 ただ、Webpackの頃に比べるとViteでも十分速いと感じてるので正直そこまで不便を感じてないですが、どれが覇権を取るか引き続き注目していきたいです。
Server Defined Rendering（SDR）
SDRはサーバー側で定義したUIをReact Nativeアプリ上で描画するアプローチとのことです。 詳しい仕組みはわかっていないですが、Rise Toolsを使えば実現できるようです。
Node.jsでTypeScriptの実験的サポートが追加された
--experimental-strip-typesフラグを付けて実行すると、Node.js単体でTypeScriptが実行できるとのことです。
仕組みとしては@swc/wasm-typescriptを使ってトランスパイルしているようです。
Node.js v22.6.0でこのオプションが使えるようになったので、機会があれば使ってみたいです。
モバイルアプリ・Expo
Apple Intelligence時代のApp Intents設計
App IntentsとはiOSで自分のアプリの機能をアプリ外のシステムに使ってもらう機能で、 App Intentsを実装しているとSpotlightやSiriなどから自分のアプリの機能を呼び出すことができます。
この記事ではApple Intelligenceが発表されて、App Intentsを今後どのようにデザインしていけば良いか解説しています。 今後はアプリ開発において、App Intentsに対応するかどうかも重要になってきそうです。
新しいPush Notification Console
Push Notificaiton Consoleが新しくなりました。 元々はデバッグ目的でPush通知送ることができるぐらいだったのですが、配信ログの確認、認証トークンの検証などが可能になりより便利になりました。
From Web to Native with React
React開発者がReact Native開発を行う際に気をつける点についてまとめられていました。 例として以下のような点がありました。
- テキストはTextコンポーネント内に書くこと
- デフォルトのButtonコンポーネントは使わずTouchableOpacityを使うこと
- 論理積 (&&)を使わないこと
特に論理積 (&&)についてはなるほどと思いました。ReactではよくてもReact Nativeだとクラッシュしてしまうケースがありました。 コード例がこちらに載っているのでぜひ目を通してみてください。
Tauri v2 Beta
Tauri v2のBeta版がリリースされました。v2からはモバイルアプリも作れるようになったようです。 さらに8月1日にはRC版もリリースされていました。
デザイン
【新連載・イカしたUIを見る】vol.1 こんなの見たことない！と感動したUI
グッドパッチさんの感動したUIデザインをまとめた記事です。 かなり尖ったUIばかりで面白かったです。特にお天気アプリのUIが参考になりました。
LINヤフーDESIGN
LINEヤフーさんのデザイナーコミュニティ公式Webサイトが公開されました。 デザインに関する記事がまとめられていて、参考になりそうです。
テスト
Playwright本の輪読会
ラクスさんで取り組まれている「［入門］Webフロントエンド E2E テスト PlaywrightによるWebアプリの自動テストから良いテストの書き方まで」という本の輪読会についての記事です。
とても良さそうな本で私も社内制度で購入しました。まだ読み始めたばかりですが、読んでみてよかったらFusic社内でも輪読会開催してみるのも良いかもしれません。
Vitest Browser Modeがアツい
Vitestに新しく追加された機能Browserモードについての記事です。 Browserモードだと今までのjsdomやhappy-dom環境より、実環境に近い形でテストができそうです。 Playwrightを導入してって程じゃないけどコンポーネントテストはやりたいって時に選択肢としてありかもしれません。
AWS
Amazon Bedrock Provider for the Vercel AI SDK now available
Vercel AI SDKでAmazon Bedrockの公式プロバイダが公開されました。
@ai-sdk/amazon-bedrockをインストールして以下のように使用できます。
import { bedrock } from '@ai-sdk/amazon-bedrock';
import { generateText } from 'ai';
const { text } = await generateText({
model: bedrock('meta.llama3-70b-instruct-v1:0'),
prompt: 'Write a vegetarian lasagna recipe for 4 people.',
});
Amplify Functions: TypeScript を用いた AWS Lambda 上のサーバーレス関数の作成
aws.amazon.com
Amplify Gen2でLambda関数をTypeScriptで書けるようになったという記事です。 カスタムクエリのリゾルバーもTypeScriptの関数で実現できるのでかなり便利になりました。
Ge1の時はデプロイ前にトランスパイルする処理を入れるなど一工夫必要だった記憶なので、かなり改善されました。
その他
ChromeのUIを新デザインから旧デザインに戻す方法
そもそも新デザインになっていた事に気づかなかったです。Arcユーザーなので...
State of JavaScript 2023
ついに出ましたState of JavaScript 2023。 結果に関してはそこまでサプライズはなく、強いて言うならMeta-frameworksの項目でGatsbyが意外とランク上位に来ていたことでしょうか...ただアンケートで「Used it」と答えた中の「Negative experience」の比率は高かったので今後需要は減っていきそうかもしれません。
デジタル認証アプリのガイドライン
政府が提供している「デジタル認証アプリ」の行政機関等・民間事業者向け実装ガイドラインが公開されました。
認証・認可はOAuth 2.0とのことで、今後は「Sign with マイナンバー」ボタンを設置しているアプリが世の中に出てくるかもしれませんね。
VSCodeのアップデートでGitグラフが見れるようになった
今までサードパーティの拡張を使う必要がありましが、VSCode単体でグラフが見れるようになりました。
Introducing Structured Outputs in the API
OpenAI APIでは開発者側で定義したJSONスキーマに沿った出力を行えるようになりました。
Function Callingと新しくresponse_formatというオプションの2つの形式で利用できるようになりました。
Node.jsの場合はZodを使って定義できるのも良い点です。
レスポンスフォーマットのコード例を見てみると以下のような感じになります。
import OpenAI from 'openai';
import { zodResponseFormat } from 'openai/helpers/zod';
import { z } from 'zod';
const Step = z.object({
explanation: z.string(),
output: z.string(),
})
const MathResponse = z.object({
steps: z.array(Step),
final_answer: z.string(),
})
const client = new OpenAI();
const completion = await client.beta.chat.completions.parse({
model: 'gpt-4o-2024-08-06',
messages: [
{
"role": "system",
"content": "You are a helpful math tutor. Only use the schema for math responses.",
},
{ "role": "user", "content": "solve 8x + 3 = 21" },
],
response_format: zodResponseFormat(MathResponse, 'mathResponse'),
});
const message = completion.choices[0]?.message;
if (message?.parsed) {
console.log(message.parsed.steps);
console.log(message.parsed.final_answer);
} else {
console.log(message.refusal);
}
ZodのスキーマをzodResponseFormatに噛ませてJSONスキーマに変換して送っているようです。
便利そうなので後で試そうと思います！
イベント系
今回も様々なイベントが話題に上がりました。
![[Astro×Hono×Fresh対談] Next.jsじゃないFWが見据えるフロントエンドの未来 (2024/07/25 19:00〜)](https://media.connpass.com/thumbs/79/c6/79c60c00b00c348c443ba880d8ecff2d.png)
TSKaigi 2024が開催されるとのアナウンスがありました。
福岡でTSの勉強会開催されるのありがたいです！
なんとSupabase Meetupが福岡で開催されます！私も参加予定です。
宣伝
来月の9月12日（木）にFusic Tech Live Vo.21 〜Front-End Tech Live〜が開催されます。
タイトルに反して発表内容はフロントエンドっぽくないかもしれませんが、私含め普段この座談会に参加しているエンジニアが発表します。 オンライン配信ですので興味ある方はぜひご視聴ください！
Daiki Urata
フロントエンド/モバイルアプリなどを主に開発しています。
