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
450
Webフロントエンド入門
8/22 Zli × サイバーエージェント 合同LT
uzimaru0000
August 22, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
170
git入門
uzimaru0000
1
340
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
530
Elmで作るCLI
uzimaru0000
0
140
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
190
Compression Vue App
uzimaru0000
0
130
好きなライブラリ_OSS
uzimaru0000
0
230
Other Decks in Programming
See All in Programming
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
110
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
マンガアプリViewerの大画面対応を考える
kk__777
0
370
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
280
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
品質ワークショップをやってみた
nealle
0
650
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How GitHub (no longer) Works
holman
315
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Navigating Team Friction
lara
190
15k
Speed Design
sergeychernyshev
32
1.2k
Become a Pro
speakerdeck
PRO
29
5.6k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
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から入ってみても良さそう
ありがとうございました!