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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for NearMeの技術発表資料です NearMeの技術発表資料です PRO
October 21, 2022
Programming
270
0

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

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

NearMeの技術発表資料です PRO

October 21, 2022

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

See All by NearMeの技術発表資料です
PosthogのA/Bテスト機能の紹介
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
21
AIフレンドリーなプロダクトに向けて
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
50
初めてのLean言語
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
76
Apache Airflow Workflow orchestration without turning cron into spaghetti
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
21
実務で役立つ幾何学 ボロノイ図の基礎から グラフ・ネットワーク応用まで
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
59
SQL/ID抽出タスクから考える 実践的なハルシネーション対策
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
67
OpenCode & Local LLM
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
200
OpenCode Introduction
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
59
【Browser Automation × AI】 Stagehandを試してみよう
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160

Other Decks in Programming

See All in Programming
AIキャラアプリkaiwaの低遅延音声通話基盤をどう作ったか - AWS Gravitonで支える低遅延・低コストAI Agent基盤
Avatar for 最上土川 mogamit
0
190
AI時代、エンジニアはどう育つのか -未経験エンジニアの成長を間近で見て考えたこと-
Avatar for ta-hasunuma thasu0123
0
150
GDG Korea Android: 2026 I/O Extended ~ What's new in Android development tools
Avatar for pluulove (노현석) pluu
0
150
霧の中の代数的エフェクト
Avatar for funnycat funnyycat
1
430
AIエージェントで 変わるAndroid開発環境
Avatar for takahirom takahirom
2
720
人間の目はかわらない、だからJPEGは30年もつ
Avatar for yuzneri yuzneri
8
14k
Apache Hive: Toward a Cloud Native Lakehouse
Avatar for okumin okumin
0
160
えっ!!コードを読まずに開発を!?
Avatar for はなのうち hananouchi
0
230
php-fpmのプロセスが枯渇した日-調査・対処・そして本当にやるべきだったこと-
Avatar for にわ shibuchaaaan
0
140
言語を使う側から、作る側へ。 自作 Lisp で得た新たな気づき。
Avatar for ANDPAD inc andpad
0
130
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
390
2年かけて Deno に DOMMatrix を実装した話 / How I implemented DOMMatrix in Deno over two years
Avatar for petamoriken / 森建 petamoriken
0
160

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
260
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.7k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.8k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.4k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
170

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