Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
frontend_to_cli_tool_by_rust
Search
Wataru Morita
September 13, 2019
Programming
610
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
frontend_to_cli_tool_by_rust
Wataru Morita
September 13, 2019
More Decks by Wataru Morita
See All by Wataru Morita
JMAPが描くメールの未来
tascript
0
200
thanks_react_router_v7
tascript
0
240
5-things-for-front-end
tascript
0
11k
legacy_code_fukuoka_js
tascript
1
490
svelte_typescript_fukuoka_ts
tascript
1
500
enjoy_mruby_2021
tascript
0
130
TypeScript_BFF
tascript
4
5k
nestjs_typeorm
tascript
0
700
Asyncで 非同期処理を 少しだけ楽に書く/ ruby_with_async
tascript
0
270
Other Decks in Programming
See All in Programming
GemmaをJevのように使ってみる / Use Gemma like Jev
kishida
5
820
AI時代のコードレビューは人に向けるな、仕組みに向けろ
texmeijin
5
3.7k
気持ちぃ〜角丸 Squircle
ryu1013
0
320
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
nao_randd
0
170
残高管理から台帳サービスへの進化
artoy
1
210
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.2k
iOS 27でニュースアプリはどう変わる!? 〜日経電子版の新機能対応と、開発事例から〜
lynnswap
7
13k
パスワード再設定メールのURLについて知っておこう
uyuki234
0
170
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
marcoroth
2
310
S3 TablesのIcebergデータに、AIエージェントからアクセスしてみた / 20261016developersio2026joetsu-accessing-iceberg-in-s3tables-via-agent
kasacchiful
PRO
0
190
Jetpack Compose Mechanisms
skydoves
3
840
ChromeでローカルLLM
ryu1013
0
160
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
370
Large-scale JavaScript Application Architecture
addyosmani
516
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
20k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
500
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
460
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.6k
Building Flexible Design Systems
yeseniaperezcruz
330
41k
Agile that works and the tools we love
rasmusluckow
331
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
33
5.3k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
710
Believing is Seeing
oripsolob
1
250
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Transcript
3VTUͰϑϩϯτΤϯυ͔Β $-*πʔϧͷ։ൃ·ͰͬͯΈͨ @tascript Fukuoka.rs
;͋Έ 森田 亘(@tascript) GMOペパボエンジニア(フロントエンド) Rustは初心者(お手柔らかに)
3VTUͰԿΛ͢Δ͔
3VTUͷकඋൣғ WebAssembly (ほんの少しお話します) FireCracker (もう少しネタ増えたらお話したい) CLIツール (ほんの少しお話します) Webフレームワーク (Rocket) エンジニアのジャンルにとらわれず開発の幅が広い
͍͢͝ʂ
3VTUॻ͖͍ͨʂ
ͬͯΈͨ͜ͱ ͭΛհ͠·͢
ᶃ:FX
:FX Rust製のフロントエンドwebフレームワーク 最終的な成果物をWebAssemblyにコンパイル 独自の仮想DOMを所持 ReduxのようにUIの状態管理が可能 気軽にWebAssemblyを体験
:FXͷجຊ Model(状態管理) Update(状態変更) View(画面表示) 6QEBUF 7JFX .PEFM "DUJPO
:FXͷجຊ ॱ൪ ①viewのactionにより ②updateが実施され ③modelを変更し ④viewに反映する 6QEBUF 7JFX .PEFM "DUJPO
ᶆ ᶅ ᶄ ᶃ
① 構造体に表示に必要なプロパティを用意 ② トレイトでプロパティを変化 .PEFM
①イベントとイベントハンドラを定義 ②matchでイベントを選択 ③イベントハンドラを実行 6QEBUF
①html!マクロを使用してコンポーネントを作成 ②リアクティブなデータとイベントでコールされる関数をRustで記述 7JFX
ͪͳΈʹ .wasmファイルの大きさはリリースビルドで169K + グルーコード31K 計算もしたいし描画もしたいものを再利用しておく場合有効的かも 詳しくはQiitaにも(https://qiita.com/wataru-script/items/ 2918ff21772a805930f1)
ᶄ$-*πʔϧͷ։ൃ
ESBHPOUBJM tailコマンドで特定のキーワードに色を付ける nao-kobayashiさんのrtailから着想 https://github.com/wataru-script/dragontail usage書いてなくてすみません…
ͬͯΔ͜ͱ (rtailでtailの実装はできていた) ①キーワードごとに1行ずつ文字列をsplit ②分割された文字列がキーワードと一致したら色付け(6色をループ) ③splitによる文字列型の配列をループ ④write(最後の要素以外)とwriteln(最後の要素)で出力
໘ͩͬͨ͜ͱᶃ 特定のキーワードで文字列を分割して配列化する処理 (一文字だけならバイト文字列で取り扱えばいいけど2文字以上のキーワードに関する splitが簡単にできなかった) [‘hello’ , ’fukuoka’, ‘.rs event!’] (fukuokaがキーワードの場合)
໘ͩͬͨ͜ͱᶃ ①行内にkeywordが存在すれば一致した箇所のindexの早い順にソート ②行に対しkeywordの一致したindexとkeywordの文字数分の長さでsplitする ᶄ ᶃ
໘ͩͬͨ͜ͱᶄ 複数のキーワードを指定した場合、あるキーワードが他のキーワードに含まれる場合は内包す る側のキーワードを優先する処理 (単純にループ処理が面倒) [‘a’ , ’fukuoka’, ‘.tenjin’, ‘e’] =>
[‘fukuoka’, ‘tenjin’]
໘ͩͬͨ͜ͱᶄ 複数キーワードの場合2つのキーワードを比較し、 相手に含まれているか、含んでいるかを確認(書き方がなんかイケてない)
ৼΓฦΓ とにかく自分の興味のある領域でRustに関するものから手を付ける(守備範囲広め) なにか作ってみたほうがいい(最初はコンパイラにかなり怒られます) コンパイラに怒られてもひたすら書く(緩やかな成長はないのかも) 型が完全に合うと気持ちいい! CLIツールは標準入力に対して色付けするものでもよかったなー(作成中)
5IBOLZPV @tascript Fukuoka.rs