Upgrade to Pro — share decks privately, control downloads, hide ads and more …

deck.glで学ぶReact入門 (ハンズオン)

Avatar for NearMeの技術発表資料です NearMeの技術発表資料です PRO
October 21, 2022
Programming
0
240

deck.glで学ぶReact入門 (ハンズオン)

Avatar for NearMeの技術発表資料です

NearMeの技術発表資料です PRO

October 21, 2022
Tweet

More Decks by NearMeの技術発表資料です

See All by NearMeの技術発表資料です
Box-Muller法
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
9
Kiro触ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
28
今だからこそ入門する Server-Sent Events (SSE)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
4
340
ReactNative のアップグレード作業が （意外に）楽しかった話
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
93
強化学習アルゴリズムPPOの改善案を考えてみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
26
Apple Containerについて調べて触ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
340
Rust 並列強化学習
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
28
並列で⽣成AIにコーディングをやらせる
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
200
希望休勤務を考慮したシフト作成
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
48

Other Decks in Programming

See All in Programming
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1.1k
Flutterで分数(Fraction)を表示する方法
Avatar for kouki.miura koukimiura
0
130
組込みだけじゃない！TinyGo で始める無料クラウド開発入門
Avatar for Kotaro Otaka otakakot
0
250
ポスターセッション: 「まっすぐ行って、右！」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
Avatar for komo_fr komofr
0
1.3k
20251016_Rails News ～Rails 8.1の足音を聴く～
Avatar for Masato Mori morimorihoge
1
130
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
130
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
4
2.1k
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
270
Cursorハンズオン実践！
Avatar for Ikko Eltociear Ashimine eltociear
2
1.1k
CSC509 Lecture 05
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
Avatar for nrs nrslib
3
400
その面倒な作業、「Dart」にやらせませんか？ Flutter開発者のための業務効率化
Avatar for YomEngine yordgenome03
1
130

Featured

See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.5k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
690
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
6.1k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k

Transcript

  1. 0 deck.glで学ぶReact入門 (ハンズオン) 2022-10-21 第18回NearMe技術勉強会 Kenji Hosoda

  2. 1 こちらのリポジトリでハンズオンします https://github.com/kenji4569/hello-deck-gl

  3. 2 下準備 • Node.jsをインストールする • リポジトリをダウンロード • npm install (パッケージをインストール)

    • npm start (Node.jsを実行)

  4. 3 3 https://deck.gl/ ソースの構造を理解しよう • まずはブラウザで表示 • package.jsonの役割 • webpackについて

    • index.htmlからどのように javascriptが呼び出されているか • deck.glについて

  5. 4 4 02_plane.jsを理解しよう • importの方法 • JSXについて • initialViewStateを変更してみよう •

    console.logでデバッグしてみよう

  6. 5 5 03_polygon.jsを理解しよう • useStateを理解しよう • 状態が変わった時、 再描画されることを console.logで確認してみよう •

    (仮想DOMについて) https://codingmedic.wordpress.com/2020/11/10/the-virtual-dom/

  7. 6 6 04_trips.jsを理解しよう • Mapboxのキーを設定 • useEffectを理解しよう • 状態が変わった時、 再描画されることを

    console.logで確認してみよう

  8. 7 Thank you