Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

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の技術発表資料です
AIエージェントのための 隔離された安全なインフラ設計
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
22
Claude Code × git worktree で並列開発 (続き) -差分のサービスだけを併設する-
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
69
Claude Code × git worktree で並列開発 — サブモジュール構成のリポジトリで成立させる —
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
79
LLM + 強化学習
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
37
PosthogのA/Bテスト機能の紹介
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
110
AIフレンドリーなプロダクトに向けて
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
70
初めてのLean言語
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
110
Apache Airflow Workflow orchestration without turning cron into spaghetti
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
50
実務で役立つ幾何学 ボロノイ図の基礎から グラフ・ネットワーク応用まで
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
93

Other Decks in Programming

See All in Programming
気持ちぃ〜角丸 Squircle
Avatar for ryu ryu1013
0
310
なぜCTOを降りてFDEを選んだのか？〜なぜプロダクト企業がFDEで顧客の現場に踏み込むのか〜
Avatar for ryuta sakamoto gonta
1
210
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
190
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
Agentic Software Factoryに、すごく賢いIF文を。 / super smart IF statement into the Agentic Software Factory.
Avatar for r-kagaya rkaga
8
2.2k
RAG の “R” を Swift で覗いてみる 〜「意味から探す」検索の仕組み〜
Avatar for Nao-RandD nao_randd
0
160
コードで差別化できない時代の ソフトウェアエンジニアリング / Software Engineering in an Era Where Code Doesn’t Differentiate
Avatar for Naoki Kishida kishida
2
180
自サークルのIdPからログアウトできるようになるまで
Avatar for taiseiue taiseiue
1
140
Kotlinの15年とServer-Side Kotlin
Avatar for Takehata Naoto n_takehata
1
150
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
430
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
230
Next.js: The final boss of Web Performance
Avatar for Estela Franco guaca
0
260

Featured

See All Featured
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
4
540
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
18k
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2.1k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
433
67k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
Applied NLP in the Age of Generative AI
Avatar for Ines Montani inesmontani
PRO
4
2.5k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
53
4k

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