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
430
Webフロントエンド入門
8/22 Zli × サイバーエージェント 合同LT
uzimaru0000
August 22, 2020
Tweet
Share
More Decks by uzimaru0000
See All by uzimaru0000
OGPを使いたい
uzimaru0000
0
160
git入門
uzimaru0000
1
320
WebフロントエンジニアはOSの夢を見る
uzimaru0000
0
360
BrainFuckをつくった
uzimaru0000
0
480
Elmで作るCLI
uzimaru0000
0
130
Blogを作った話 -Zli x DeNA-
uzimaru0000
1
180
Compression Vue App
uzimaru0000
0
120
好きなライブラリ_OSS
uzimaru0000
0
220
Other Decks in Programming
See All in Programming
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
Immutable ActiveRecord
megane42
0
130
GAEログのコスト削減
mot_techtalk
0
110
sappoRo.R #12 初心者セッション
kosugitti
0
230
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Side Projects
sachag
452
42k
RailsConf 2023
tenderlove
29
1k
Designing for Performance
lara
604
68k
Facilitating Awesome Meetings
lara
51
6.2k
It's Worth the Effort
3n
184
28k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
Making Projects Easy
brettharned
116
6k
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から入ってみても良さそう
ありがとうございました!