Slide 1
Slide 1 text
Next.js で Ruby を
プログラミング＆実行できる
アプリを作る
エンジニアの自由研究発表会vol.9
うーたん
Slide 2
Slide 2 text
自己紹介
● うーたん
● 新卒サーバーサイドエンジニア
○ 株式会社ゆめみ
● 趣味
○ アニメを見ること
● X
○ @uutan1108
Slide 3
Slide 3 text
目次
- 作ったもの
- 仕組み
- Server Actions
- @ruby/wasm-wasi
- 終わりに
Slide 4
Slide 4 text
作ったもの
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Ruby のコードを Next.js のみで実行できる
Slide 8
Slide 8 text
仕組み
Slide 9
Slide 9 text
仕組み
・Server ActionsはNext.js 14でStableになった機能です。
サーバー側で関数を実行できます。
・サーバー側の実行結果をクエリパラメータに与えリダイ レクト
させます。
Slide 10
Slide 10 text
実行前 実行後
Slide 11
Slide 11 text
Server Actions
Slide 12
Slide 12 text
Server Actions and Mutations
サーバーアクションは、サーバー上で実行される非同期関数で
す。サーバーコンポーネントやクライアントコンポーネントで使
用し、Next.jsアプリケーションのフォーム送信やデータを処理し
ます。
https://nextjs.org/docs/app/building-your-application
/data-fetching/server-actions-and-mutations
Slide 13
Slide 13 text
Server Actions
・フォームのsubmitが押 さ
れた時にサーバーで 関数
が実行される。
・フォームの入力内容を 受
け取り処理をでき る。
・onAction関数にRuby を
実行するコードを書 く
引
用:https://future-architect.github.io/articles/20231130a
Slide 14
Slide 14 text
wasm
Slide 15
Slide 15 text
WebAssembly とは何か
この機能はウェブプラットフォームにとって大きな意味を持ちま
す。ウェブ上で動作するクライアントアプリで従来は実現できな
かった、ネイティブ水準の速度で複数の言語で記述されたコー
ドをウェブ上で動作させる方法を提供します。
今回はサーバー側でWasmを実行しています。
https://developer.mozilla.org/ja/docs/WebAssembl
y/Concepts
Slide 16
Slide 16 text
@ruby/wasm-wasi
・先ほどのonAction関数内のコー
ド。
・npmでインストールできる。
・wasmを読み込んでユーザーから
受け取ったコードを実行する。
・Rubyで標準入力を与え、標準 出
力を取得するコードを追加す る。
Slide 17
Slide 17 text
終わりに
Slide 18
Slide 18 text
感想
● 意外と簡単に実装できた
● Next.js 14 の新しい機能 Server Actions を使ってみたが、
便利そうな気がする
● OHMORIYUSUKE/ruby-web でコードを公開しているので
見てください！
● 作ってみると楽しい
Slide 19
Slide 19 text
ご清聴ありがとうございました🙇