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
Webフロントエンド入門
Search
uzimaru0000
August 22, 2020
Programming
1
410
Webフロントエンド入門
8/22 Zli × サイバーエージェント 合同LT
uzimaru0000
August 22, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
150
git入門
uzimaru0000
1
290
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
340
BrainFuckをつくった
uzimaru0000
0
350
Elmで作るCLI
uzimaru0000
0
120
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
160
Compression Vue App
uzimaru0000
0
110
好きなライブラリ_OSS
uzimaru0000
0
200
Other Decks in Programming
See All in Programming
メール認証とRuby
uvb_76
0
110
PHPカンファレンス関西2024でLTとスタッフした
ohmori_yusuke
2
120
ISUCONってなんだか難しそう……!!でも、初めてのISUCONにPHPで挑戦してきました!
kotomin_m
0
270
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
0
630
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
840
PHP で読む楽しいコアダンプ
sji
0
220
WasmOS: Wasmを実行する自作Microkernel
riru
0
360
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
2
490
GitHub Copilot Tips and Tricks
yuichielectric
2
270
品質が高いコードって何?Rev2.1
ickx
1
390
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
180
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
310
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
11
1.4k
Designing for Performance
lara
601
67k
Product Roadmaps are Hard
iamctodd
43
9.6k
Music & Morning Musume
bryan
39
5.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
How to train your dragon (web standard)
notwaldorf
71
5k
Building an army of robots
kneath
300
41k
Transcript
Webフロントエンド入門 8/22 Zli × サイバーエージェント 合同LT
自己紹介 - 会津大学25期 - s1250087 - うじまる - Webフロントエンド -
TypeScript - Elm - 最近VTuberにはまってます - Twitter - @uzimaru0000 - GitHub - @uzimaru0000
今回話すこと
Webフロントエンド
普通のWebフロントエンド?
いいえ
RustでWebフロントエンド をやってみた話
Rustとは? Rust言語は速度、並行性、安全性を言語仕様として保証するC言語、C++に代わるシス テムプログラミングに適したプログラミング言語を目指している。 ── wikipediaより - 速度:GCやランタイムが無いため高速 - 安全性:型システムと所有権モデルによるメモリ安全性とスレッド安全性
どうやってやるの?
WebAssembly
WebAssemblyとは? WebAssemblyは、ウェブブラウザのクライアントサイドスクリプトとして動作するプログラミ ング言語(低水準言語)である。 ── wikipediaより JSよりも構文解析と実行速度が高速!
全部自分でやると大変なので・・・
フレームワークをつかう
Yew
Yewとは? Yew は WebAssembly によってマルチスレッドなWebアプリのフロントエンドを作ることが できる、モダンな Rust のフレームワークです。 ── 公式Docより
- コンポーネントベースのフレームワーク - ReactとElmから影響を受けている
Yewのコード カウンターアプリ のコード
Yewのコード - Model - アプリケーションの状態 - Msg - アプリケーションの状態を更新するた めのMsg
Yewのコード - `impl Component for Model` - ModelにComponent Traitを実装 -
type Message - MessageにさっきのMsgを設定 - type Properties - 今回はUnit Type
Yewのコード - createメソッド - 状態の初期化 - linkはRuntimeにmsgを送るためのもの
Yewのコード - changeメソッド - propsの変更があったかを返すメソッド - 今回はpropsが無いので常にfalse
Yewのコード - updateメソッド - msgの内容に応じて状態を変更 - 返り値はUIを更新するかどうか
Yewのコード - viewメソッド - macroを利用してviewを構築する - ほぼHTML
ここでElmのコード
None
実質Elm!!
実際にアプリを作ってみる
作ったもの uzimaru0000/github_repo_list - 任意のユーザーのGitHub上のリポジトリを取得出来る 余談 CSS頑張ったらRustより多くなってしまった
Elmとの違い 副作用の扱い方 - ElmはCmd / Subを利用する - Yewは →
DEMO https://uzimaru.dev/github_repo_list
まとめ - ビルド周りで詰むかなって思ったけどそんなことなかった - Parcelでbuild出来るのでWebフロントエンジニアにも優しい - 実質Elmだった - Docが日本語訳されていてよかった -
wasmをやりたい人はYewから入ってみても良さそう
ありがとうございました!