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の技術発表資料です
Claude Code × git worktree で並列開発 (続き) -差分のサービスだけを併設する-
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
52
Claude Code × git worktree で並列開発 — サブモジュール構成のリポジトリで成立させる —
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
55
LLM + 強化学習
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
32
PosthogのA/Bテスト機能の紹介
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
49
AIフレンドリーなプロダクトに向けて
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
65
初めてのLean言語
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
100
Apache Airflow Workflow orchestration without turning cron into spaghetti
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
37
実務で役立つ幾何学 ボロノイ図の基礎から グラフ・ネットワーク応用まで
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
76
SQL/ID抽出タスクから考える 実践的なハルシネーション対策
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
88

Other Decks in Programming

See All in Programming
AIと壁打ちしながら進めるコスト管理
Avatar for Ryoma Fujiwara fufuhu
2
2k
PHPプロジェクトの結合バランスを可視化する #php_night
Avatar for Takuma Kajikawa kajitack
0
230
LL言語やWebフレームワークの PostgreSQL対応 〜DBの機能がユーザーに届くまで〜
Avatar for 武田 憲太郎 kentaroutakeda
0
140
iOS開発×AI駆動開発 〜最近使って便利だったスキルの話〜
Avatar for nogu nogu66
0
140
[DroidKaigi 2026] Bring your own phones to Gradle Managed Devices
Avatar for Yury f2lk
0
110
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
4
3.6k
Kiroで創り、AgentCoreで繋ぐ！AWSで実践する「AI-DLC」から「AIエージェント統合」までの最新地図
Avatar for matsukada licux
3
380
新卒PdEのリアル
Avatar for ryu ryu1013
1
470
AIエージェント時代のコードレビューを設計する
Avatar for nogu nogu66
6
2.6k
Intent as Code
Avatar for Shoppingjaws shoppingjaws
4
610
go-spidermonkeyでAIエージェントのCode Modeを実装する
Avatar for syumai syumai
3
1.5k
業務時間外もAIに働いてもらう話
Avatar for taki colorful12
3
10k

Featured

See All Featured
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.8k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
820
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
550
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
370
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
980
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.4k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
380

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