frontend_to_cli_tool_by_rust

Slide 1

Slide 1 text

3VTUͰϑϩϯτΤϯυ͔Β $-*πʔϧͷ։ൃ·Ͱ΍ͬͯΈͨ࿩ @tascript Fukuoka.rs

Slide 2

Slide 2 text

;͋Έ 森田亘(@tascript) GMOペパボエンジニア(フロントエンド) Rustは初心者(お手柔らかに)

Slide 3

Slide 3 text

3VTUͰԿΛ͢Δ͔

Slide 4

Slide 4 text

3VTUͷकඋൣғ WebAssembly (ほんの少しお話します) FireCracker (もう少しネタ増えたらお話したい) CLIツール (ほんの少しお話します) Webフレームワーク (Rocket) エンジニアのジャンルにとらわれず開発の幅が広い

Slide 5

Slide 5 text

͍͢͝ʂ

Slide 6

Slide 6 text

๻΋3VTUॻ͖͍ͨʂ

Slide 7

Slide 7 text

΍ͬͯΈͨ͜ͱ ͭΛ঺հ͠·͢

Slide 8

Slide 8 text

ᶃ:FX

Slide 9

Slide 9 text

:FX Rust製のフロントエンドwebフレームワーク最終的な成果物をWebAssemblyにコンパイル独自の仮想DOMを所持 ReduxのようにUIの状態管理が可能気軽にWebAssemblyを体験

Slide 10

Slide 10 text

:FXͷجຊ Model(状態管理) Update(状態変更) View(画面表示) 6QEBUF 7JFX .PEFM "DUJPO

Slide 11

Slide 11 text

:FXͷجຊ ॱ൪ ①viewのactionにより ②updateが実施され ③modelを変更し ④viewに反映する 6QEBUF 7JFX .PEFM "DUJPO ᶆ ᶅ ᶄ ᶃ

Slide 12

Slide 12 text

① 構造体に表示に必要なプロパティを用意 ② トレイトでプロパティを変化 .PEFM

Slide 13

Slide 13 text

①イベントとイベントハンドラを定義 ②matchでイベントを選択 ③イベントハンドラを実行 6QEBUF

Slide 14

Slide 14 text

①html!マクロを使用してコンポーネントを作成 ②リアクティブなデータとイベントでコールされる関数をRustで記述 7JFX

Slide 15

Slide 15 text

ͪͳΈʹ .wasmファイルの大きさはリリースビルドで169K + グルーコード31K 計算もしたいし描画もしたいものを再利用しておく場合有効的かも詳しくはQiitaにも(https://qiita.com/wataru-script/items/ 2918ff21772a805930f1)

Slide 16

Slide 16 text

ᶄ$-*πʔϧͷ։ൃ

Slide 17

Slide 17 text

ESBHPOUBJM tailコマンドで特定のキーワードに色を付ける nao-kobayashiさんのrtailから着想 https://github.com/wataru-script/dragontail usage書いてなくてすみません…

Slide 18

Slide 18 text

΍ͬͯΔ͜ͱ (rtailでtailの実装はできていた) ①キーワードごとに1行ずつ文字列をsplit ②分割された文字列がキーワードと一致したら色付け(6色をループ) ③splitによる文字列型の配列をループ ④write(最後の要素以外)とwriteln(最後の要素)で出力

Slide 19

Slide 19 text

໘౗ͩͬͨ͜ͱᶃ 特定のキーワードで文字列を分割して配列化する処理 (一文字だけならバイト文字列で取り扱えばいいけど2文字以上のキーワードに関する splitが簡単にできなかった) [‘hello’ , ’fukuoka’, ‘.rs event!’] (fukuokaがキーワードの場合)

Slide 20

Slide 20 text

໘౗ͩͬͨ͜ͱᶃ ①行内にkeywordが存在すれば一致した箇所のindexの早い順にソート ②行に対しkeywordの一致したindexとkeywordの文字数分の長さでsplitする ᶄ ᶃ

Slide 21

Slide 21 text

໘౗ͩͬͨ͜ͱᶄ 複数のキーワードを指定した場合、あるキーワードが他のキーワードに含まれる場合は内包する側のキーワードを優先する処理 (単純にループ処理が面倒) [‘a’ , ’fukuoka’, ‘.tenjin’, ‘e’] => [‘fukuoka’, ‘tenjin’]

Slide 22

Slide 22 text

໘౗ͩͬͨ͜ͱᶄ 複数キーワードの場合2つのキーワードを比較し、相手に含まれているか、含んでいるかを確認(書き方がなんかイケてない)

Slide 23

Slide 23 text

ৼΓฦΓ とにかく自分の興味のある領域でRustに関するものから手を付ける(守備範囲広め) なにか作ってみたほうがいい(最初はコンパイラにかなり怒られます) コンパイラに怒られてもひたすら書く(緩やかな成長はないのかも) 型が完全に合うと気持ちいい！ CLIツールは標準入力に対して色付けするものでもよかったなー(作成中)

Slide 24

Slide 24 text

5IBOLZPV @tascript Fukuoka.rs