Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
0
570
frontend_to_cli_tool_by_rust
Wataru Morita
September 13, 2019
Tweet
Share
More Decks by Wataru Morita
See All by Wataru Morita
thanks_react_router_v7
tascript
0
170
5-things-for-front-end
tascript
0
10k
legacy_code_fukuoka_js
tascript
1
450
svelte_typescript_fukuoka_ts
tascript
1
460
enjoy_mruby_2021
tascript
0
110
TypeScript_BFF
tascript
4
4.8k
nestjs_typeorm
tascript
0
660
Asyncで 非同期処理を 少しだけ楽に書く/ ruby_with_async
tascript
0
220
Other Decks in Programming
See All in Programming
認証・認可の基本を学ぼう後編
kouyuume
0
180
Why Kotlin? 電子カルテを Kotlin で開発する理由 / Why Kotlin? at Henry
agatan
2
6.9k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
pd1xx
1
700
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
tomokon
0
120
AIコーディングエージェント(skywork)
kondai24
0
150
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
1
210
愛される翻訳の秘訣
kishikawakatsumi
1
310
無秩序からの脱却 / Emergence from chaos
nrslib
2
13k
DSPy Meetup Tokyo #1 - はじめてのDSPy
masahiro_nishimi
1
160
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
selcukusta
0
110
connect-python: convenient protobuf RPC for Python
anuraaga
0
380
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
38
25k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.4k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Facilitating Awesome Meetings
lara
57
6.7k
Context Engineering - Making Every Token Count
addyosmani
9
490
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
355
21k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
1
93
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Rails Girls Zürich Keynote
gr2m
95
14k
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