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
870
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
OpenAPI を守るのは難しい
ohmori_yusuke
2
920
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
150
Laravel を学ぶ前に書いていた require と Laravel 使い始めてから躓いた use 宣言と namespace
ohmori_yusuke
1
290
未来を拓く若手エンジニアの興味関心と目指すキャリア
ohmori_yusuke
1
260
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
460
技書博に参加したら執筆できた
ohmori_yusuke
1
420
PHPを勉強してからプログラミングが好きになった話
ohmori_yusuke
1
620
「石蒜模拟器」にコントリビュートしてみた
ohmori_yusuke
1
440
新卒研修で取り組んだスクラム開発で苦戦したところと学んだこと
ohmori_yusuke
4
1.9k
Other Decks in Programming
See All in Programming
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
440
Git Lint
bkuhlmann
4
760
Open standards for building event-driven applications in the cloud
meteatamel
0
190
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
190
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
560
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Hanami and htmx
bkuhlmann
0
230
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
190
Code Reviews
bkuhlmann
4
900
Ruby Pattern Matching
bkuhlmann
0
930
Git Rebase
bkuhlmann
11
1.6k
Milestoner
bkuhlmann
1
420
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Producing Creativity
orderedlist
PRO
338
39k
Statistics for Hackers
jakevdp
790
220k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
What's in a price? How to price your products and services
michaelherold
238
11k
Design by the Numbers
sachag
274
18k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Fireside Chat
paigeccino
22
2.6k
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 でコードを公開しているので 見てください! • 作ってみると楽しい
ご清聴ありがとうございました🙇