Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Svelte初心者がSVELTEKITで作るワークフローシステム
Search
miko3
March 22, 2024
Programming
2
140
Svelte初心者がSVELTEKITで作るワークフローシステム
miko3
March 22, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
340
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
180
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
940
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
190
CSC509 Lecture 12
javiergs
PRO
0
160
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
1
100
Featured
See All Featured
Fireside Chat
paigeccino
34
3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Producing Creativity
orderedlist
PRO
341
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
Statistics for Hackers
jakevdp
796
220k
Become a Pro
speakerdeck
PRO
25
5k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Making Projects Easy
brettharned
115
5.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Transcript
2024.03.22 SVELETE JAPAN SVELTE初心者が SVELTEKITで作る ワークフローシステム 株式会社コラボスタイル 御古 堅士
Profile 御古 堅士(MIKO ) 株式会社コラボスタイル 開発部 マルチスタックエンジニア 趣味:ロードバイク、プログラミング Svelte 歴:1ヶ月🔰 Svelte に興味を持った理由:
・Simple is best!! ・Skeleton UI 推し
アジェンダ Key topics for discussion ・作成したワークフローシステムの紹介 ・Svelteで開発してみてどうだった? ・使用したライブラリ ・初心者がどう学んでいった?
SVELTE で作るワークフロー Svelte Workflow System
Svelte Workflow (通称:スベフロ) Zapier みたいなワークフローサービスを自分で作ってみたかった。 目的:ワークフローシステムを作りたかった 詳細は後で説明します。 ワークフローエンジンはCHAT GPT なんか良い感じにやってくれるワークフロー
細かいところは未実装です🙏 実際の動作を ご覧ください!!!👀
None
実行ノードに紐づくエッジを全て取得 始点ノードからは 2 本のエッジ(辺)が紐づいていているので、 それらを取得する。 エッジに書かれているテキストを取得 する。 ・検索結果を確認し、1 冊のみの場合 ・検索結果を確認し、2
冊以上の場合 どうやって動いてる? 動作仕様 実行ノードに設定した処理を実行する バックエンドでGoogle Books APIs を実行して、 日本語のSvelte 本の情報を取得しています。
結果を取得し、次のノードへ移動する ヒットしたのは1件だったので、ChatGPT からは 「answer_id[2] 」と回答!ノード2へ移動! 末端ノードへ達するまで 処理を繰り返す 結果を画面/ ファイルに出力する どうやって動いてる?
動作仕様 CHAT GPT に判断を委ねる GoogleBooksAPI からの本情報の取得結果を Json 形式で渡します。その検索結果を分析し、 以下のanswer_id のいずれかであるかを判断し てください。回答形式はanswer_id[x] という形 式でお願いします。answer_id[2]: 検索結果を確 認し、1 冊のみの場合, answer.......
Svelte 使ってみて どうだった?
ルーティングが直感的で好き ファイルシステムベースのルーターなの で、直感的で好き。 src/routes/about -> /about ルート (Next.js のApp Router
も好き… ) SVELTE 開発の感想 WebStome も対応 公式リファレンスが翻訳されている 日本語翻訳マジ感謝!!🙏 Svelte 自体が簡単なことに加えて、 翻訳する手間が省ける。 ライブラリが豊富 React と比較すると… と言われがち? 欲しいライブラリは用意されており、 無ければ作っちゃって界隈を盛り上げよう! と思った。
SVELTE 開発の感想
使用した主なライブラリ https://www.skeleton.dev/ ❤️SKELETON UI https://authjs.dev/reference/sveltekit AUTH.JS https://svelteflow.dev/ SVELTE FLOW https://sdk.vercel.ai/docs/guides/fra
meworks/sveltekit VERCEL AI SDK
Github にて、 Document ページの コードを読み漁ってた Skeleton UI
今回の主役です! Svelte Flow
Svelte Flow
ChatGPT にDB 設計を 全て任せて、 dbdiagram.io を利用して ER 図を作成していました。 おまけ:dbdiagram.io
どう学んだのか? How to Learn ?
まず説明書を読むべし 日本語翻訳マジ感謝🙏 チュートリアルも充実している! コードのコピペは絶対に 許さないっていう強い意志を感じる。 実践Svelte 入門も買って読んだ。 公式リファレンス
ChatGPT / Claude とりあえず、聞いてみる。 参考になることを言ってくれる。 (堂々と嘘を吐かれることもあるけど) GPTs プロジェクトのディレクトリ構成 を提案してくる。 サンプルコードを生成してくれる
やつ。 etc... AI の活用
気になったライブラリの コードを読んで、 解読してみる。 Github にてコードを読む
最新情報を取得するためのアンテナを用意しておく RSS リーダーによる情報収集
最後に伝えたいこと
Svelte楽しいやん! 使い続けてみるし、PR も出してみる!! ライブラリも作成する!
コラボスタイル 開発部 アウトプットしてます! Svelte の記事も増えるかも?! ぜひご覧ください!
ご清聴ありがとうございました!