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
deck.glで学ぶReact入門 (ハンズオン)
Search
NearMeの技術発表資料です
PRO
October 21, 2022
Programming
0
190
deck.glで学ぶReact入門 (ハンズオン)
NearMeの技術発表資料です
PRO
October 21, 2022
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
2つの曲線を比較する方法ってあるの? 〜フレシェ距離を試してみた〜 with Python
nearme_tech
PRO
1
18
Constrained K-means Clustering (クラスタサイズの制限をしたK-means法) を調べてみた
nearme_tech
PRO
0
16
VRPの近傍操作SWAP*について調べてみた
nearme_tech
PRO
1
49
新人エンジニアが読んでためになった本
nearme_tech
PRO
2
21
Object–relational mapping and query builder battle 1: Intro to Prisma
nearme_tech
PRO
1
29
深層学習モデルの最適化 -Deep Learning Tuning Playbookを読む-
nearme_tech
PRO
1
52
機械学習を支える連続最適化
nearme_tech
PRO
1
44
サードパーティクッキーの終焉と Topics APIによる代替の可能性
nearme_tech
PRO
1
81
ONNXハンズオン
nearme_tech
PRO
2
28
Other Decks in Programming
See All in Programming
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
160
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
しくじり先生 Image Matching Challenge 2024 編
goosehaaan
0
810
【Go言語】golangci-lintの使い方
tomo1227
0
270
リハビリmruby
kishima
1
160
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Introduction to GitOps
hwchiu
0
110
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Featured
See All Featured
Optimizing for Happiness
mojombo
373
69k
Debugging Ruby Performance
tmm1
71
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
52k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Optimising Largest Contentful Paint
csswizardry
18
2.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Done Done
chrislema
179
15k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
GitHub's CSS Performance
jonrohan
1026
450k
Code Review Best Practice
trishagee
58
16k
Transcript
0 deck.glで学ぶReact入門 (ハンズオン) 2022-10-21 第18回NearMe技術勉強会 Kenji Hosoda
1 こちらのリポジトリでハンズオンします https://github.com/kenji4569/hello-deck-gl
2 下準備 • Node.jsをインストールする • リポジトリをダウンロード • npm install (パッケージをインストール)
• npm start (Node.jsを実行)
3 3 https://deck.gl/ ソースの構造を理解しよう • まずはブラウザで表示 • package.jsonの役割 • webpackについて
• index.htmlからどのように javascriptが呼び出されているか • deck.glについて
4 4 02_plane.jsを理解しよう • importの方法 • JSXについて • initialViewStateを変更してみよう •
console.logでデバッグしてみよう
5 5 03_polygon.jsを理解しよう • useStateを理解しよう • 状態が変わった時、 再描画されることを console.logで確認してみよう •
(仮想DOMについて) https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/
6 6 04_trips.jsを理解しよう • Mapboxのキーを設定 • useEffectを理解しよう • 状態が変わった時、 再描画されることを
console.logで確認してみよう
7 Thank you