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
1.7k
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
勉強会から始まった僕のDevRel~新卒エンジニアがつないだ2年間の軌跡~
ohmori_yusuke
1
250
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
180
アニメがエンジニアをつなぐ!「エンジニアニメ」勉強会が巻き起こすCo-Creationの波
ohmori_yusuke
0
140
組織が大きく変わろうとするとき、自分はどうありたいかを考えている
ohmori_yusuke
19
6.6k
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
56
デザインって“感覚”だけじゃないVibe Codingからの気づき
ohmori_yusuke
3
89
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
150
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
1
590
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
380
Other Decks in Programming
See All in Programming
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
260
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
AI Agent 時代的開發者生存指南
eddie
4
2.1k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.5k
理論と実務のギャップを超える
eycjur
0
180
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
12
7.1k
CSC509 Lecture 06
javiergs
PRO
0
270
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
360
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
contribution to astral-sh/uv
shunsock
0
530
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
We Have a Design System, Now What?
morganepeng
53
7.8k
Thoughts on Productivity
jonyablonski
70
4.9k
Music & Morning Musume
bryan
46
6.9k
Making Projects Easy
brettharned
120
6.4k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Context Engineering - Making Every Token Count
addyosmani
8
300
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
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 でコードを公開しているので 見てください! • 作ってみると楽しい
ご清聴ありがとうございました🙇