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

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

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

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

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

NearMeの技術発表資料です
PRO

October 21, 2022
Tweet

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

See All by NearMeの技術発表資料です
並列で⽣成AIにコーディングをやらせる
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
54
希望休勤務を考慮したシフト作成
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
21
Hub Labeling による高速経路探索
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
67
Build an AI agent with Mastra
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
70
Rustで強化学習アルゴリズムを実装する vol3
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
37
Webアプリケーションにおけるクラスの設計再入門
Avatar for NearMeの技術発表資料です nearme_tech
PRO
1
82
AIエージェント for 予約フォーム
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
150
ULID生成速度を40倍にしたった
Avatar for NearMeの技術発表資料です nearme_tech
PRO
2
55
Amazon AuroraとMongoDBの アーキテクチャを比較してみたら 結構違った件について
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
28

Other Decks in Programming

See All in Programming
生成AI時代のコンポーネントライブラリの作り方
Avatar for touyou touyou
1
250
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1.4k
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
410
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
300
iOS 26にアップデートすると実機でのHot Reloadができない？
Avatar for Aoi Umigishi umigishiaoi
0
130
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
550
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
240
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
Avatar for Agata Naomichi agatan
1
450
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
190
ご注文の差分はこちらですか？ 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
Avatar for Kenji Kono konokenj
3
370
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
Avatar for 武田 憲太郎 kentaroutakeda
2
990
PipeCDのプラグイン化で目指すところ
Avatar for Warashi warashi
1
290

Featured

See All Featured
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.5k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.8k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
1.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

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