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.5k
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
「何か」を求めて参加したカンファレンスから持ち帰ってきた「熱」を維持して、活用するために
ohmori_yusuke
2
290
1人150秒、2人で5分 LT
ohmori_yusuke
2
73
Tidy First?個人で実践する経験主義的ソフトウェア設計を読んでみた感想
ohmori_yusuke
2
54
今年始めた 「アニメから得た学びを発表会」
ohmori_yusuke
2
1.9k
行き当たりばったりの二年
ohmori_yusuke
1
360
技書博に参加したら執筆できた
ohmori_yusuke
1
1.8k
開発終了後こそ成長のチャンス!プロダクト運用を見送った先のアクションプラン
ohmori_yusuke
2
300
学生の時に開催したPerl入学式をきっかけにエンジニアが組織に馴染むために勉強会を主催や仲間と参加して職能間の境界を越えていく
ohmori_yusuke
2
660
やりっぱなしで終わらない勉強法
ohmori_yusuke
3
520
Other Decks in Programming
See All in Programming
バッチを作らなきゃとなったときに考えること
irof
1
410
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Spring gRPC について / About Spring gRPC
mackey0225
0
230
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
880
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
200
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
Domain-Driven Transformation
hschwentner
2
1.9k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
Introduction to kotlinx.rpc
arawn
0
740
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Building Your Own Lightsaber
phodgson
104
6.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The Cult of Friendly URLs
andyhume
78
6.2k
Navigating Team Friction
lara
183
15k
Building Adaptive Systems
keathley
40
2.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Music & Morning Musume
bryan
46
6.4k
Building Applications with DynamoDB
mza
93
6.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
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 でコードを公開しているので 見てください! • 作ってみると楽しい
ご清聴ありがとうございました🙇