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

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

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

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

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

NearMeの技術発表資料です PRO

October 21, 2022

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

See All by NearMeの技術発表資料です
OpenCode Introduction
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
14
【Browser Automation × AI】 Stagehandを試してみよう
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
53
AIを用いた PID制御で部屋 の温度制御をしてみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
60
CopilotKit + AG-UIを学ぶ
Avatar for NearMeの技術発表資料です nearme_tech
PRO
3
280
Tile38 Overview
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
65
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
880
実践で使えるtorchのテンソル演算
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
39
ローカルLLMを⽤いてコード補完を⾏う VSCode拡張機能を作ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
680
初めてのmarimo (ハンズオン)
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
53

Other Decks in Programming

See All in Programming
ネイティブアプリとWebフロントエンドのAPI通信ラッパーにおける共通化の勘所
Avatar for Suguru Ohki suguruooki
0
250
Vibe하게 만드는 Flutter GenUI App With ADK , 박제창, BWAI Incheon 2026
Avatar for JaiChangPark itsmedreamwalker
0
540
Linux Kernelの1文字のミスで 権限昇格ができた話
Avatar for rona rqda
0
2.3k
「速くなった気がする」をデータで疑う
Avatar for Leaf senleaf24
0
150
Go_College_最終発表資料__外部公開用_.pdf
Avatar for xe-pc23 xe_pc23
0
130
それはエンジニアリングの糧である：AI開発のためにAIのOSSを開発する現場より / It serves as fuel for engineering: insights from the field of developing open-source AI for AI development.
Avatar for nrs nrslib
1
830
モックわからないマン卒業記 ~振る舞いを起点に見直した、フロントエンドテストにおけるモックの使いどころ~
Avatar for Tasuku Watanabe tasukuwatanabe
3
440
20260320登壇資料
Avatar for 松井遼(まついはるか) pharct
0
160
ローカルで稼働する AI エージェントを超えて / beyond-local-ai-agents
Avatar for geeawa gawa
1
250
PHP 7.4でもOpenTelemetryゼロコード計装がしたい！ / PHPerKaigi 2026
Avatar for Arthur arthur1
1
520
存在論的プログラミング： 時間と存在を記述する
Avatar for Akihito Koriyama koriym
5
780
Smarter Angular mit Transformers.js & Prompt API
Avatar for Christian Liebel christianliebel
PRO
1
120

Featured

See All Featured
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
290
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
94
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
11k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
160
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
150
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
200
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k

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