RemoteFunctionを使ったコロケーション

Transcript

1. 1 1 Copyright© Explaza, inc. All rights reserved. RemoteFunctionを使ったコロケーション 
 Svelte Japan Offline Meetup #5 
 
 株式会社エクスプラザ 
 松本 和高

2. 2 Copyright© Explaza, inc. All rights reserved. 自己紹介
 松本和高(まつもとかずたか)
 
 Twitter: _mkazutaka
 Github: mkazutaka
 
 2018年株式会社メルカリに入社。バックエンドエンジニアとして、
 リアーキテクチャやマイクロサービスを使った開発などに携わる。
 その後、フリーランス等を経て、株式会社エクスプラザに入社。
 2024年8月CTOに就任、生成AI Partner、Markといった
 新規サービスの立ち上げ等を行っている。趣味、仮想通貨。 
 執筆・登壇
 ▪ PHPWebのTemplateEngineをWebAssemblyに置き換えてみる 
 ▪ 0からRust/Wasmを使ってブラウザで動くバーコードリーダを作ってみた話 
 ▪ GPT-4 Turboにドキュメントのチャンク分けを任せてみる 
 ▪ 問い合わせメールをChatGPTで解析してSpreadsheetとNotionに転記する方法の紹介 
 ▪ 人形町生成AI忘年会「 LLMと連携したブログ書くエディタを作ってみた 」
 ▪ LLM Application Meetup vol.4: 「 社内情報検索システムで用いられるRAGの4つの実装方法 」
 ▪ LLM Application Meetup vol.5: 「 GPTsより精度の高いRAGシステムの構築 」
 ▪ Software Design 2024年8月号: 第1特集「LangChainではじめるLLMアプリ開発入門 
 ▪ CTOがエンジニアにコーディング禁止というお触れを出した 

3. 3 Copyright© Explaza, inc. All rights reserved. 目次
 • 会社紹介
 • Formの実装
 ◦ Superformsを使った実装 
 ◦ RemoteFunctionをつかった実装 
 • リモートファンクションをつかったフォームの実装例 
 • AIによる自動化

4. 4 Copyright© Explaza, inc. All rights reserved. 会社紹介

5. 5 Copyright© EXPLAZA Inc. All rights reserved. 00 01 Company 生成AIに関する 多種多様な問い合わせをいただいており、 お客様のニーズに合わせた 最適なソリューションを提案可能。 国内最大級AIメディアのAISmileyでも ”PRODUCT AWARD”を2冠受賞。 豊富な支援実績 一部取引先 生成AIをつかったプロダクトを作っております
6. 6 Copyright© Explaza, inc. All rights reserved. Formの実装どうやってますか？ 

7. 7 Copyright© Explaza, inc. All rights reserved. Form実装の悩み 
 • APIでリクエストするよりかは、formタグを使いたい 
 • Superformsを使っているがコードが複雑になる 
 ◦ 特に一つのページに複数のフォームがあるときにコード量が多くなる 
 ◦ てなるとフォーム部分をコンポーネント化したいが... 
 ▪ UI側はコンポーネント化できるがサーバ側の処理は、+page.server.ts にあり 
 見通しが悪い

8. 8 Copyright© Explaza, inc. All rights reserved. それRemoteFunctionで解決できますよ 

9. 9 Copyright© Explaza, inc. All rights reserved. Remote Functionとは 
 • 2025年08月に発表
 • あらゆるコンポーネントからサーバサイド上の関数を呼ぶことができる 
 ◦ 今まで: +page.svelteでデータを取得、コンポーネントにバケツリレー 
 ◦ Remote Functionによって コンポーネント単位で必要な情報をサーバサイドから取得可能 
 ▪ これはコロケーション だ！！

10. 10 Copyright© Explaza, inc. All rights reserved. コロケーション(co-location) 
 • コロケーション: co-location 
 ◦ 広義な意味だと
 ▪ 関連するリソース同士を近くに置く、という考え方 
 ▪ 例えば、テストファイルとテスト対象ファイルは同じディレクトリに 
 置きましょうみたいな形 
 • React + GraphQLには、Fragment Colocationという考え方もある 
 ◦ => 次ページで紹介

11. 11 Copyright© Explaza, inc. All rights reserved. Fragment Colocation 
 • GraphQL
 ◦ クライアントが「必要なデータだけ」をクエリとしてリクエストし、それらのみを取得できる 
 • GraphQLのFragment 
 ◦ クエリの一部を再利用可能にしたもの 
 ◦ 様々なクエリからFragmentを利用することができる 
 • Fragment Colocation: React Relayなら 
 ◦ GraphQLのFragment機能をつかってつかってコンポーネント単位で 
 要求する情報を制御できる 

12. 12 Copyright© Explaza, inc. All rights reserved. Fragment Colocationの実装例 1/2 
 • 子コンポーネントの実装 
 • 子コンポーネントファイル内で 
 Fragmentとコンポーネントを定義 
 参考: https://zenn.dev/gemcook/articles/2c8796761f2d02 Friend.tsx
13. 13 Copyright© Explaza, inc. All rights reserved. Fragment Colocationの実装例 2/2 
 • 親コンポーネントで子コンポーネントの Fragmentを使う
 • 親コンポーネントは子コンポーネントが 
 何を必要としているかは知らなくて良い 
 ◦ 理想的だ 
 参考: https://zenn.dev/gemcook/articles/2c8796761f2d02 SomePage.tsx
14. 14 Copyright© Explaza, inc. All rights reserved. これがRemote Functionでできる 

15. 15 Copyright© Explaza, inc. All rights reserved. Form実装を比較する 

16. 16 Copyright© Explaza, inc. All rights reserved. Superformsを使った実装 
 Dialogの例 

17. 17 Copyright© Explaza, inc. All rights reserved. Superformsを使った実装例 / Dialogコンポーネントの定義 
 • shadcn-svelteのDialogコンポーネントを使っている 
 DialogExampleBySuperform.svelteのScript部 DialogExampleBySuperform.svelteのBody部
18. 18 Copyright© Explaza, inc. All rights reserved. Superformsを使った実装例 / 親コンポーネント 
 • +page.server.tsからform値を渡す 
 ◦ 処理の流れ
 +page.server.ts => +page.svelte => DialogExampleBySuperform.svelte => +page.server.ts 
 +page.svelte +page.server.ts
19. 19 Copyright© Explaza, inc. All rights reserved. Superformsを使った実装の問題点 
 • +page.svelteからform valueを引き回さないといけない 
 • +page.svelteに紐づくフォームが複数になった場合に処理が複雑になる 
 ◦ フォームごとの命名 / 引き回す処理 
 ◦ フォームが増えるたびに、+page.svelteのactionの項目が増える 
 ▪ +page.svelteのactionとform コンポーネントが暗黙的に紐づく 
 参照: https://claude.com/pricing#api
20. 20 Copyright© Explaza, inc. All rights reserved. RemoteFunctionを使った実装 
 Dialogの例 

21. 21 Copyright© Explaza, inc. All rights reserved. Remote Functionを使った実装 
 • shadcn-svelteのDialogコンポーネントを使っている 
 DialogExampleByRemotefunction.svelteのScript部 DialogExampleByRemotefunction.svelteのBody部
22. 22 Copyright© Explaza, inc. All rights reserved. Remote Functionを使った実装 
 DialogExampleByRemotefunction.remote.ts • form関数をつかって関数をエクスポート 
 ◦ 処理の流れ: Component.svelte => Component.remote.ts 

23. 23 Copyright© Explaza, inc. All rights reserved. RemoteFunctionを使った実装 
 • Formの変更に+page.svelteが絡まない 
 ◦ form valueを引き回さなくて良い 
 • フォームが複数になってもコンポーネント単位で境界づけられている 
 
 参照: https://claude.com/pricing#api
24. 24 Copyright© Explaza, inc. All rights reserved. 表で比較

25. 25 Copyright© Explaza, inc. All rights reserved. 表にまとめる 
 参照: https://claude.com/pricing#api Superformsによる実装 RemoteFunctionによる実装 +page.svelteの変更 必要 不要 +page.server.tsの変更 必要 不要 +xxx.remote.tsの実装 不要 必要
26. 26 Copyright© Explaza, inc. All rights reserved. AIで活用する 

27. 27 Copyright© Explaza, inc. All rights reserved. ClaudeCodeのAgent Skills(Claude Skills)でスキル化する 
 • Agent Skills
 ◦ ClaudeもしくはClaude Codeの機能を拡張する機能の一つ 
 ▪ Claudeが参照するディレクトリの中に SKILL.mdを置き、それを起点に 
 スクリプトや複数のマークダウンを一つのディレクトリに格納する 
 ▪ それぞれもまとめりをモジュールとして扱えることができ、配布や利用ができる 
 • Agent Skillsには、Agent Skillsを作るためのAgent Skillがある 
 ◦ skill creator: https://github.com/anthropics/skills/tree/main/skill-creator 
 参照: https://claude.com/pricing#api
28. 28 Copyright© Explaza, inc. All rights reserved. skill-creatorを使ってスキルを作成する 
 • プロンプトはシンプル 
 ◦ いくつかの選択項目をセレクトするとスキルを作成してくれる 
 参照: https://claude.com/pricing#api
29. 29 Copyright© Explaza, inc. All rights reserved. skill-creatorを使ってできたスキル: dialog-creator 1/2 
 SKILL.md assets/dialog-component.template.svelte
30. 30 Copyright© Explaza, inc. All rights reserved. skill-creatorを使ってできたスキル 2/2 
 assets/remote-function.template.ts
31. 31 Copyright© Explaza, inc. All rights reserved. dialog-creatorを実行する 
 • プロンプトはシンプル 

32. 32 Copyright© Explaza, inc. All rights reserved. 結果 • テンプレートを与えているのでいい感じにできる 
 CompanyRegistration.remote.ts CompanyRegistration.svelte
33. 33 Copyright© Explaza, inc. All rights reserved. まとめ
 • Dialogの実装をRemoteFunctionでコロケーション化したよ 
 ◦ コード量が少なくなったよ 
 ◦ コンポーネントと関係ないところの編集が減ったよ 
 • Claudeのskill-creatorでスキル化したよ 
 ◦ コロケーションによって変更範囲が特定のディレクトリに収まるので 
 AIでも書きやすい
 参照: https://claude.com/pricing#api
34. 34 Copyright© Explaza, inc. All rights reserved. 宣伝

35. 35 Copyright© Explaza, inc. All rights reserved. 宣伝: エクスプラザでは絶賛採用中です！ • AIつかったプロダクト開発をしています 
 ◦ 自社SaaS / クライアントワーク 
 ◦ クライアントワークは自由に技術選定して開発できる自由度の高いもの 
 ◦ 気になった方は、ぜひカジュアル面談 / このあとの懇親会でぜひお声がけください！ 
 ▪ ホームページもSveltekitつかっているよ: explaza.jp 
 

36. 36 Copyright© Explaza, inc. All rights reserved. ありがとうございました