Next.js で Ruby をプログラミング＆実行できるアプリを作る

エンジニアの自由研究発表会vol.9
https://tech-street.connpass.com/event/305362/

Transcript

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