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
frontend_to_cli_tool_by_rust
Search
Wataru Morita
September 13, 2019
Programming
590
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
thanks_react_router_v7
tascript
0
220
5-things-for-front-end
tascript
0
11k
legacy_code_fukuoka_js
tascript
1
470
svelte_typescript_fukuoka_ts
tascript
1
490
enjoy_mruby_2021
tascript
0
130
TypeScript_BFF
tascript
4
4.9k
nestjs_typeorm
tascript
0
680
Asyncで 非同期処理を 少しだけ楽に書く/ ruby_with_async
tascript
0
250
Other Decks in Programming
See All in Programming
ADKを使って簡単にAIエージェントを作ってみよう
k1mu21
0
270
作って学ぶ、 JSX (TSX) ランタイムの基本
syumai
7
1.6k
軽量Java基盤の設計 DIコンテナに頼らない、長期保守と1秒起動の実現 JJUG CCC 2026 Spring
macha64
0
540
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
170
Even G2とAWSで推しのエージェントを召喚しよう!
har1101
1
120
ユニットテストの先へ:テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
shimashima35
0
410
技術的負債解消で開発者の未来を開く- AIの力でコード刷新
kmd2kmd
0
110
AIで効率化できた業務・日常
ochtum
0
140
DynamoDBには集計系のクエリがないけどなんとかしたい
musan
1
180
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
daitasu
1
260
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
mom0tomo
8
3.3k
Composerを使ったサプライチェーン攻撃の様子を眺めてみる #phpstudy
o0h
PRO
2
250
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.9k
ラッコキーワード サービス紹介資料
rakko
1
3.7M
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
160
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
200
How to Ace a Technical Interview
jacobian
281
24k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
240
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
410
Testing 201, or: Great Expectations
jmmastey
46
8.2k
Typedesign – Prime Four
hannesfritz
42
3.1k
Speed Design
sergeychernyshev
33
1.9k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
170
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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