Webフロントエンド入門

Transcript

1. Webフロントエンド入門
 8/22 Zli × サイバーエージェント 合同LT


2. 自己紹介
 - 会津大学25期
 - s1250087
 - うじまる
 - Webフロントエンド
 -

   TypeScript
 - Elm
 - 最近VTuberにはまってます
 - Twitter
 - @uzimaru0000
 - GitHub
 - @uzimaru0000


3. 今回話すこと


4. Webフロントエンド


5. 普通のWebフロントエンド？


6. いいえ


7. RustでWebフロントエンド
 をやってみた話


8. Rustとは？
 Rust言語は速度、並行性、安全性を言語仕様として保証するC言語、C++に代わるシス テムプログラミングに適したプログラミング言語を目指している。
 ── wikipediaより
 - 速度：GCやランタイムが無いため高速
 - 安全性：型システムと所有権モデルによるメモリ安全性とスレッド安全性


9. どうやってやるの？


10. WebAssembly


11. WebAssemblyとは？
 WebAssemblyは、ウェブブラウザのクライアントサイドスクリプトとして動作するプログラミ ング言語（低水準言語）である。
 ── wikipediaより
 JSよりも構文解析と実行速度が高速！


12. 全部自分でやると大変なので・・・


13. フレームワークをつかう


14. Yew


15. Yewとは？
 Yew は WebAssembly によってマルチスレッドなWebアプリのフロントエンドを作ることが できる、モダンな Rust のフレームワークです。
 ── 公式Docより


    - コンポーネントベースのフレームワーク
 - ReactとElmから影響を受けている


16. Yewのコード
 カウンターアプリ
 のコード


17. Yewのコード
 - Model
 - アプリケーションの状態
 - Msg
 - アプリケーションの状態を更新するた めのMsg


18. Yewのコード
 - `impl Component for Model`
 - ModelにComponent Traitを実装
 -

    type Message
 - MessageにさっきのMsgを設定
 - type Properties
 - 今回はUnit Type


19. Yewのコード
 - createメソッド
 - 状態の初期化
 - linkはRuntimeにmsgを送るためのもの


20. Yewのコード
 - changeメソッド
 - propsの変更があったかを返すメソッド
 - 今回はpropsが無いので常にfalse


21. Yewのコード
 - updateメソッド
 - msgの内容に応じて状態を変更
 - 返り値はUIを更新するかどうか


22. Yewのコード
 - viewメソッド
 - macroを利用してviewを構築する
 - ほぼHTML


23. ここでElmのコード


24. None

25. 実質Elm！！


26. 実際にアプリを作ってみる


27. 作ったもの
 uzimaru0000/github_repo_list
 - 任意のユーザーのGitHub上のリポジトリを取得出来る
 余談
 CSS頑張ったらRustより多くなってしまった 


28. Elmとの違い
 副作用の扱い方
 - ElmはCmd / Subを利用する
 - Yewは →


29. DEMO
 https://uzimaru.dev/github_repo_list


30. まとめ
 - ビルド周りで詰むかなって思ったけどそんなことなかった
 - Parcelでbuild出来るのでWebフロントエンジニアにも優しい
 - 実質Elmだった
 - Docが日本語訳されていてよかった
 -

    wasmをやりたい人はYewから入ってみても良さそう


31. ありがとうございました！