Suche senden
Hochladen
まだ DOM 操作で消耗してるの?
•
26 gefällt mir
•
68,585 views
Yuki Ishikawa
Folgen
(だいたい)新卒エンジニア向け技術交流会 vol.3 での発表内容です
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 50
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
FlutterでGraphQLを扱う
FlutterでGraphQLを扱う
IgaHironobu
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書く
mametter
MvcのFatモデルに立ち向かう
MvcのFatモデルに立ち向かう
Shun Hikita
React Tech Salon
React Tech Salon
Chenguang ZHANG
Weitere ähnliche Inhalte
Was ist angesagt?
概念モデルって難しいですよね
概念モデルって難しいですよね
Takuya Kawabe
serviceクラスをやめようサブクラスを使おう
serviceクラスをやめようサブクラスを使おう
よしだ あつし
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
Lisperの見る世界
Lisperの見る世界
fukamachi
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
Koichi Tanaka
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
Shunji Konishi
RESTful API 入門
RESTful API 入門
Keisuke Nishitani
Laravel の paginate は一体何をやっているのか
Laravel の paginate は一体何をやっているのか
Shohei Okada
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
Y Watanabe
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
Yuta Hiroto
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
Koichiro Matsuoka
そんなリザルトキャッシュで大丈夫か? #jjug
そんなリザルトキャッシュで大丈夫か? #jjug
Toshiaki Maki
型プロファイラ:抽象解釈に基づくRuby 3の静的解析
型プロファイラ:抽象解釈に基づくRuby 3の静的解析
mametter
인프콘 2022 - Rust 크로스 플랫폼 프로그래밍
인프콘 2022 - Rust 크로스 플랫폼 프로그래밍
Chris Ohk
例外設計における大罪
例外設計における大罪
Takuto Wada
リアルタイムサーバー 〜Erlang/OTPで作るPubSubサーバー〜
リアルタイムサーバー 〜Erlang/OTPで作るPubSubサーバー〜
Yugo Shimizu
React JS & Functional Programming Principles
React JS & Functional Programming Principles
Andrii Lundiak
Was ist angesagt?
(20)
概念モデルって難しいですよね
概念モデルって難しいですよね
serviceクラスをやめようサブクラスを使おう
serviceクラスをやめようサブクラスを使おう
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
Lisperの見る世界
Lisperの見る世界
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
良質なコードを高速に書くコツ
良質なコードを高速に書くコツ
RESTful API 入門
RESTful API 入門
Laravel の paginate は一体何をやっているのか
Laravel の paginate は一体何をやっているのか
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ツール比較しながら語る O/RマッパーとDBマイグレーションの実際のところ
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
そんなリザルトキャッシュで大丈夫か? #jjug
そんなリザルトキャッシュで大丈夫か? #jjug
型プロファイラ:抽象解釈に基づくRuby 3の静的解析
型プロファイラ:抽象解釈に基づくRuby 3の静的解析
인프콘 2022 - Rust 크로스 플랫폼 프로그래밍
인프콘 2022 - Rust 크로스 플랫폼 프로그래밍
例外設計における大罪
例外設計における大罪
リアルタイムサーバー 〜Erlang/OTPで作るPubSubサーバー〜
リアルタイムサーバー 〜Erlang/OTPで作るPubSubサーバー〜
React JS & Functional Programming Principles
React JS & Functional Programming Principles
Andere mochten auch
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
Akira Kubo
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
Takuma Hanatani
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
Mariko Hayashi
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践
JustSystems Corporation
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例
JustSystems Corporation
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Carol Smith
Andere mochten auch
(9)
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
React を導入したフロントエンド開発
React を導入したフロントエンド開発
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10 React開発における自動テスト実践
JustTechTalk#10windowsアプリでのテスト自動化事例
JustTechTalk#10windowsアプリでのテスト自動化事例
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Ähnlich wie まだ DOM 操作で消耗してるの?
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
Takumi Ohashi
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
Masakazu Muraoka
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
Kazuya Hiruma
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Yasunobu Ikeda
Html5制作の現在
Html5制作の現在
Masakazu Muraoka
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Yasunobu Ikeda
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
Masakazu Muraoka
テスト
テスト
Masashi Sato
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Yusuke Hirano
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
Yusuke Hirano
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
スクレイピングその後
スクレイピングその後
Tomoki Hasegawa
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
Takashi Endo
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
Katsuaki Sato
Ähnlich wie まだ DOM 操作で消耗してるの?
(20)
HTML5でスマートフォン開発の理想と現実
HTML5でスマートフォン開発の理想と現実
HTML5時代のwebクリエイターに必要なこと
HTML5時代のwebクリエイターに必要なこと
JavaScript 研修
JavaScript 研修
HTML5でサイネージは作れる!!
HTML5でサイネージは作れる!!
インタラクティブコンテンツにおけるHTML5とFlash
インタラクティブコンテンツにおけるHTML5とFlash
Html5制作の現在
Html5制作の現在
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
F-site発表資料「Flashユーザーが今覚えておきたいHTML5」
Rdbms起点で考えると見えない世界 okuyama勉強会
Rdbms起点で考えると見えない世界 okuyama勉強会
テスト
テスト
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
HTML5 ~よくわからないけど言葉だけはよく聞きます~
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Web制作勉強会 #2
Web制作勉強会 #2
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
スクレイピングその後
スクレイピングその後
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Mochrom - スマートフォンビジネスサミット
Mochrom - スマートフォンビジネスサミット
Mehr von Yuki Ishikawa
Introduction to GPU Programming in Python
Introduction to GPU Programming in Python
Yuki Ishikawa
新婚旅行を支える技術
新婚旅行を支える技術
Yuki Ishikawa
ラマダーン入門
ラマダーン入門
Yuki Ishikawa
ステージング環境のつくりかた
ステージング環境のつくりかた
Yuki Ishikawa
マッカレル de おうちハック
マッカレル de おうちハック
Yuki Ishikawa
スタートアップのくせになまいきだ
スタートアップのくせになまいきだ
Yuki Ishikawa
JavaScript over HTTP/2
JavaScript over HTTP/2
Yuki Ishikawa
コンポーネント時代の CSS 設計
コンポーネント時代の CSS 設計
Yuki Ishikawa
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
闇の魔術に対する防衛術
闇の魔術に対する防衛術
Yuki Ishikawa
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Yuki Ishikawa
Apple に依存する僕の生存戦略
Apple に依存する僕の生存戦略
Yuki Ishikawa
gulp芸
gulp芸
Yuki Ishikawa
アニメーションしたい
アニメーションしたい
Yuki Ishikawa
趣きのある Bot
趣きのある Bot
Yuki Ishikawa
Bot に家計を任せる
Bot に家計を任せる
Yuki Ishikawa
時をかけるほと
時をかけるほと
Yuki Ishikawa
peco活用術
peco活用術
Yuki Ishikawa
Botと対話する
Botと対話する
Yuki Ishikawa
端末ビジュアライゼーションのすゝめ
端末ビジュアライゼーションのすゝめ
Yuki Ishikawa
Mehr von Yuki Ishikawa
(20)
Introduction to GPU Programming in Python
Introduction to GPU Programming in Python
新婚旅行を支える技術
新婚旅行を支える技術
ラマダーン入門
ラマダーン入門
ステージング環境のつくりかた
ステージング環境のつくりかた
マッカレル de おうちハック
マッカレル de おうちハック
スタートアップのくせになまいきだ
スタートアップのくせになまいきだ
JavaScript over HTTP/2
JavaScript over HTTP/2
コンポーネント時代の CSS 設計
コンポーネント時代の CSS 設計
React+fluxを導入した話
React+fluxを導入した話
闇の魔術に対する防衛術
闇の魔術に対する防衛術
サーバを運用する時代は終わった
サーバを運用する時代は終わった
Apple に依存する僕の生存戦略
Apple に依存する僕の生存戦略
gulp芸
gulp芸
アニメーションしたい
アニメーションしたい
趣きのある Bot
趣きのある Bot
Bot に家計を任せる
Bot に家計を任せる
時をかけるほと
時をかけるほと
peco活用術
peco活用術
Botと対話する
Botと対話する
端末ビジュアライゼーションのすゝめ
端末ビジュアライゼーションのすゝめ
Kürzlich hochgeladen
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
Kürzlich hochgeladen
(12)
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
2024 03 CTEA
2024 03 CTEA
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 04 minnanoito
2024 04 minnanoito
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
まだ DOM 操作で消耗してるの?
1.
まだ DOM 操作で 消耗してるの? 2015.06.06 (だいたい)新卒エンジニア向け技術交流会
vol.3
3.
!?
4.
こんばんは hoge17296 です!!!!!
5.
hoto 17296
6.
とうとうプログラマ歴 10 年目に突入
8.
それでも 10 年で いろいろなものを見てきた
9.
クライアントサイド JS 近代史
10.
∼ 2004 年 •
JS は「 Web にちょっと動きを加えるもの」 • 「JSが動かない環境のことも 考えなきゃダメでしょ!!!」 • リッチなことは Flash でやれ
14.
Flash 黄金時代
15.
人生の絶頂
16.
2005 年
18.
Ajax の誕生 • 実は昔からあったけど知られていなかった XMLHttpRequest
が Google Maps によって 再発見されて一躍有名に • Ajax (Asynchronous JavaScript + XML) という 言葉が生まれる • しかしまだまだ敷居が高い
19.
2006 年
21.
jQuery の衝撃 • クライアントサイドプログラミングの敷居を 圧倒的に下げた •
DOM 操作 • イベント処理 • クロスブラウザ • Ajax
22.
$()
23.
あまいあまい シンタックス シュガー
24.
jQuery 職人が社会問題に 「これグーグルみたいに ギュイーンって感じで できるよね?」
26.
...とは言えない • なまじ jQuery
があればそこそこ出来てしまう • ちょっとググればプラグインが落ちてる • 出来るような気がしてしまう • 「出来て当たり前」として要求される
27.
なにがつらいか
28.
すべての DOM の状態管理 •
どの DOM が今どんな値を持っているか • どの DOM から何のイベントが発火するか • この値が変わったらどの DOM を 書き換えないといけないか
29.
コンポーネントが増えるたび 考えるべきことが 指数関数的に増えていく プログラミング
30.
一部の優れた職人にしか 成し得ない超絶技巧
31.
そして 2010 年
32.
Single Page Application
33.
Single Page Application •
HTML5 の history.pushState によって URL の動的書き換えが可能に • ページ遷移という概念を超越した クライアントサイドプログラミングの極地
34.
例 「SPAで作ってね!!!」 「でも history.back しても前のビューの スクロール位置保持してるの当然だし 情報も更新されてるよね!!!」
35.
もはや 人間業ではない
36.
こんなものが ”当たり前”として 要求される世の中は 絶対に間違っている
37.
俺は もう
38.
2014 年
40.
React • Facebook 製の
UI ライブラリ • フレームワークじゃない • 特徴 • リアクティブプログラミング • Virtual DOM
41.
もう DOM 操作しなくていい •
変更があったら HTML 全体を書き換える • 常に最新の状態の DOM を レンダリングし続ければいいだけ • React が内部で diff / patch してくれるから 遅くない
42.
DEMO http://bit.ly/mtg_timer
43.
「事ある毎に最新の HTML を レンダリングする」 ???
44.
これって昔ページ遷移で やっていたことじゃないか
45.
シンプルで古い この概念こそ 正しかった
46.
ぼくたちは ちょっと歪んでいた だけだったんだ
47.
まとめ • ぼくたちは DOM
操作という 苦痛を強いられている • 麻薬 (jQuery) による対症療法も限界が来ている • React によってぼくたちは解放される
48.
楽しかったあの頃に戻ろう
50.
まだ DOM 操作で 消耗してるの?
Jetzt herunterladen