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

Next.js で Ruby をプログラミング＆実行できるアプリを作るエンジニアの自由研究発表会vol.9 うーたん

自己紹介 • うーたん • 新卒サーバーサイドエンジニア ◦ 株式会社ゆめみ • 趣味 ◦
アニメを見ること • X ◦ @uutan1108

目次 - 作ったもの - 仕組み - Server Actions - @ruby/wasm-wasi
- 終わりに

作ったもの

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

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 でコードを公開しているので見てください！ • 作ってみると楽しい

ご清聴ありがとうございました🙇

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

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

uutan1108

More Decks by uutan1108

Other Decks in Programming

Featured

Transcript