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
880
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
930
コミュニティに参加したことで起きた変化
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
VS Code をプロダクトにどう取り込むか
onomax
1
780
Goのエラースタックトレースの歴史と今後
sonatard
10
1.9k
Deep Dive into React Stream/Serialize
mugi_uno
3
750
Sheets API使ってみた
toshi0383
2
170
Ruby GitHub Packages
bkuhlmann
0
650
業務ツールとして使うPostman
msys75
0
110
Code Reviews
bkuhlmann
4
900
Implementing Design Systems in Swift
seyfoyun
2
490
GitHub Copilotのススメ
marcy731
1
240
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
210
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Git Rebase
bkuhlmann
11
1.6k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
75
5.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
YesSQL, Process and Tooling at Scale
rocio
165
13k
How to name files
jennybc
65
93k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
A Tale of Four Properties
chriscoyier
153
22k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
A designer walks into a library…
pauljervisheath
201
23k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Infographics Made Easy
chrislema
238
18k
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 でコードを公開しているので 見てください! • 作ってみると楽しい
ご清聴ありがとうございました🙇