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
Next.js で Ruby をプログラミング&実行できるアプリを作る
Search
uutan1108
January 18, 2024
Programming
0
1k
Next.js で Ruby をプログラミング&実行できるアプリを作る
エンジニアの自由研究発表会vol.9
https://tech-street.connpass.com/event/305362/
uutan1108
January 18, 2024
Tweet
Share
More Decks by uutan1108
See All by uutan1108
企業主催勉強会をきっかけに職能間の境界を越える ロングver
ohmori_yusuke
1
230
企業主催勉強会をきっかけに職能間の境界を越える
ohmori_yusuke
1
100
OpenAPIに静的解析とフォーマッターを導入する
ohmori_yusuke
3
260
Next.jsのClient-side RenderingでPHPを動かす
ohmori_yusuke
1
210
プログラミング&実行できるWEBアプリを手作り
ohmori_yusuke
3
460
社外向け勉強会とプライベートの勉強会を開催してみて
ohmori_yusuke
2
310
勉強会に楽しさワクワクは重要
ohmori_yusuke
2
420
OpenAPI を守るのは難しい
ohmori_yusuke
2
1.2k
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
180
Other Decks in Programming
See All in Programming
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
【Go言語】golangci-lintの使い方
tomo1227
0
270
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
生成AIをkintoneに連携してみた
hideg
0
230
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
CSC307 Lecture 12
javiergs
PRO
0
220
Android開発者のための Kotlin Multiplatform入門
ntaro
0
190
CSC307 Lecture 13
javiergs
PRO
0
150
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Statistics for Hackers
jakevdp
792
220k
How GitHub (no longer) Works
holman
305
140k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Raft: Consensus for Rubyists
vanstee
134
6.5k
How to name files
jennybc
67
96k
Being A Developer After 40
akosma
72
580k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
How to Think Like a Performance Engineer
csswizardry
4
590
It's Worth the Effort
3n
181
27k
Transcript
Next.js で Ruby を プログラミング&実行できる アプリを作る エンジニアの自由研究発表会vol.9 うーたん
自己紹介 • うーたん • 新卒サーバーサイドエンジニア ◦ 株式会社ゆめみ • 趣味 ◦
アニメを見ること • X ◦ @uutan1108
目次 - 作ったもの - 仕組み - Server Actions - @ruby/wasm-wasi
- 終わりに
作ったもの
None
None
Ruby のコードを Next.js のみで実行できる
仕組み
仕組み ・Server ActionsはNext.js 14でStableになった機能です。 サーバー側で関数を実行できます。 ・サーバー側の実行結果をクエリパラメータに与えリダイ レクト させます。
実行前 実行後
Server Actions
Server Actions and Mutations サーバーアクションは、サーバー上で実行される非同期関数で す。サーバーコンポーネントやクライアントコンポーネントで使 用し、Next.jsアプリケーションのフォーム送信やデータを処理し ます。 https://nextjs.org/docs/app/building-your-application /data-fetching/server-actions-and-mutations
Server Actions ・フォームのsubmitが押 さ れた時にサーバーで 関数 が実行される。 ・フォームの入力内容を 受 け取り処理をでき る。 ・onAction関数にRuby を 実行するコードを書 く 引
用:https://future-architect.github.io/articles/20231130a
wasm
WebAssembly とは何か この機能はウェブプラットフォームにとって大きな意味を持ちま す。ウェブ上で動作するクライアントアプリで従来は実現できな かった、ネイティブ水準の速度で複数の言語で記述されたコー ドをウェブ上で動作させる方法を提供します。 今回はサーバー側でWasmを実行しています。 https://developer.mozilla.org/ja/docs/WebAssembl y/Concepts
@ruby/wasm-wasi ・先ほどのonAction関数内のコー ド。 ・npmでインストールできる。 ・wasmを読み込んでユーザーから 受け取ったコードを実行する。 ・Rubyで標準入力を与え、標準 出 力を取得するコードを追加す る。
終わりに
感想 • 意外と簡単に実装できた • Next.js 14 の新しい機能 Server Actions を使ってみたが、
便利そうな気がする • OHMORIYUSUKE/ruby-web でコードを公開しているので 見てください! • 作ってみると楽しい
ご清聴ありがとうございました🙇