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の技術発表資料です
Claude Code × git worktree で並列開発 (続き) -差分のサービスだけを併設する-
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
50
Claude Code × git worktree で並列開発 — サブモジュール構成のリポジトリで成立させる —
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
54
LLM + 強化学習
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
31
PosthogのA/Bテスト機能の紹介
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
45
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
Claude Codeを組織的に動かして月400PRを実現した話
Avatar for happy_ryo happy_ryo
0
260
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
130
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
110
AWS DevOps Agentで インシデント対応をAIに任せたい
Avatar for HonMarkHunt honmarkhunt
6
2.5k
【デモ】Kiroで体験する仕様駆動開発｜設計からコーディングまでAIと進める開発フロー
Avatar for 工藤皓夢 cmkudo
0
600
AIは賢い。でも実行環境は？ CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
Avatar for curekoshimizu curekoshimizu
1
160
Pythonの実行はどこまで賢くなったのか？ CPythonとPyPyから見る最適化のしくみ
Avatar for curekoshimizu curekoshimizu
4
2.8k
LoopHub - ローカルで動く GitHub で、AI と共同開発
Avatar for jugyo jugyo
0
460
typoなんかねぇよ
Avatar for らすぴー raspython3
0
670
ソフトウェアラスタライザ
Avatar for Fadis fadis
1
790
【DroidKaigi 2026】「アクセシビリティを利用するとき、 アクセシビリティもまたこちらを利用している」 〜マルウェアによる攻撃と防衛について〜
Avatar for HalunoYo. halunoyo
0
410
Can LLMs Replicate 4 Years of Compose Migration? Exploring the boundaries of automation with 279 XML files from a real product
Avatar for makun makun
0
130

Featured

See All Featured
How to make the Groovebox
Avatar for あそなす asonas
2
2.4k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
340
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
300
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.6k
Faster Mobile Websites
Avatar for Dean Hume deanohume
310
32k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.1k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
260
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
2
14k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
370
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k

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