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.4k
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
1人150秒、2人で5分 LT
ohmori_yusuke
2
57
Tidy First?個人で実践する経験主義的ソフトウェア設計を読んでみた感想
ohmori_yusuke
2
41
今年始めた 「アニメから得た学びを発表会」
ohmori_yusuke
2
1.9k
行き当たりばったりの二年
ohmori_yusuke
1
340
技書博に参加したら執筆できた
ohmori_yusuke
1
1.8k
開発終了後こそ成長のチャンス!プロダクト運用を見送った先のアクションプラン
ohmori_yusuke
2
290
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
640
やりっぱなしで終わらない勉強法
ohmori_yusuke
3
500
OpenAPIにも静的解析とフォーマッターを導入して快適にスキーマ定義する
ohmori_yusuke
2
410
Other Decks in Programming
See All in Programming
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
220
functionalなアプローチで動的要素を排除する
ryopeko
1
930
CNCF Project の作者が考えている OSS の運営
utam0k
5
620
SpringBoot3.4の構造化ログ #kanjava
irof
2
770
HTML/CSS超絶浅い説明
yuki0329
0
210
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.3k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
500
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
380
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
3
310
Оптимизируем производительность блока Казначейство
lamodatech
0
990
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
190
DMMオンラインサロンアプリのSwift化
hayatan
0
270
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
40
2.5k
RailsConf 2023
tenderlove
29
980
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
19k
Building Adaptive Systems
keathley
39
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Designing for humans not robots
tammielis
250
25k
Building an army of robots
kneath
302
45k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Mobile First: as difficult as doing things right
swwweet
222
9.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Visualization
eitanlees
146
15k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
113
50k
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 でコードを公開しているので 見てください! • 作ってみると楽しい
ご清聴ありがとうございました🙇