Webフロントエンド入門

 Webフロントエンド入門

8/22 Zli × サイバーエージェント 合同LT

9fbbe5d0b8e2ee1cdc3a576b55a2d63d?s=128

uzimaru0000

August 22, 2020
Tweet

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. ありがとうございました!