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

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

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

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

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

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

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

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

12 Copyright© Explaza, inc. All rights reserved. Fragment Colocationの実装例 1/2
  • 子コンポーネントの実装   • 子コンポーネントファイル内で   Fragmentとコンポーネントを定義   参考: https://zenn.dev/gemcook/articles/2c8796761f2d02 Friend.tsx

13 Copyright© Explaza, inc. All rights reserved. Fragment Colocationの実装例 2/2
  • 親コンポーネントで子コンポーネントの Fragmentを使う  • 親コンポーネントは子コンポーネントが   何を必要としているかは知らなくて良い   ◦ 理想的だ   参考: https://zenn.dev/gemcook/articles/2c8796761f2d02 SomePage.tsx

17 Copyright© Explaza, inc. All rights reserved. Superformsを使った実装例 / Dialogコンポーネントの定義
  • shadcn-svelteのDialogコンポーネントを使っている   DialogExampleBySuperform.svelteのScript部 DialogExampleBySuperform.svelteのBody部

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 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

21 Copyright© Explaza, inc. All rights reserved. Remote Functionを使った実装  
• shadcn-svelteのDialogコンポーネントを使っている   DialogExampleByRemotefunction.svelteのScript部 DialogExampleByRemotefunction.svelteのBody部

22 Copyright© Explaza, inc. All rights reserved. Remote Functionを使った実装  
DialogExampleByRemotefunction.remote.ts • form関数をつかって関数をエクスポート   ◦ 処理の流れ: Component.svelte => Component.remote.ts  

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

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

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

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

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

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

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

More Decks by Matsumoto Kazutaka

Other Decks in Technology

Featured

Transcript