Submit Search
Upload
なぜ人は必死でjQueryを捨てようとしているのか
•
27 likes
•
80,817 views
Yoichi Toyota
Follow
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Read less
Read more
Technology
Report
Share
Report
Share
1 of 15
Download now
Download to read offline
Recommended
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
オブジェクト指向できていますか?
オブジェクト指向できていますか?
Moriharu Ohzu
NDC 11 자이언트 서버의 비밀
NDC 11 자이언트 서버의 비밀
승명 양
REST API のコツ
REST API のコツ
pospome
デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣
Masahiro Nishimi
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
Recommended
イミュータブルデータモデル(世代編)
イミュータブルデータモデル(世代編)
Yoshitaka Kawashima
強いて言えば「集約どう実装するのかな、を考える」な話
強いて言えば「集約どう実装するのかな、を考える」な話
Yoshitaka Kawashima
イミュータブルデータモデル(入門編)
イミュータブルデータモデル(入門編)
Yoshitaka Kawashima
オブジェクト指向できていますか?
オブジェクト指向できていますか?
Moriharu Ohzu
NDC 11 자이언트 서버의 비밀
NDC 11 자이언트 서버의 비밀
승명 양
REST API のコツ
REST API のコツ
pospome
デキるプログラマだけが知っているコードレビュー7つの秘訣
デキるプログラマだけが知っているコードレビュー7つの秘訣
Masahiro Nishimi
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
ke-m kamekoopa
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
データベース設計徹底指南
データベース設計徹底指南
Mikiya Okuno
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
Observableで非同期処理
Observableで非同期処理
torisoup
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
infinite_loop
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
例外設計における大罪
例外設計における大罪
Takuto Wada
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
More Related Content
What's hot
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
ke-m kamekoopa
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
disc99_
データベース設計徹底指南
データベース設計徹底指南
Mikiya Okuno
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Shuto Suzuki
Observableで非同期処理
Observableで非同期処理
torisoup
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
nasa9084
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
infinite_loop
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
pospome
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
Yoshitaka Kawashima
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
増田 亨
例外設計における大罪
例外設計における大罪
Takuto Wada
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
Yoji Kanno
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
Yoshifumi Kawai
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
What's hot
(20)
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
SQLアンチパターン - ジェイウォーク
SQLアンチパターン - ジェイウォーク
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
マイクロサービスバックエンドAPIのためのRESTとgRPC
マイクロサービスバックエンドAPIのためのRESTとgRPC
データベース設計徹底指南
データベース設計徹底指南
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Cognitive Complexity でコードの複雑さを定量的に計測しよう
Observableで非同期処理
Observableで非同期処理
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
webエンジニアのためのはじめてのredis
webエンジニアのためのはじめてのredis
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
大規模ソーシャルゲームを支える技術~PHP+MySQLを使った高負荷対策~
トランザクションスクリプトのすすめ
トランザクションスクリプトのすすめ
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
イミュータブルデータモデルの極意
イミュータブルデータモデルの極意
オブジェクト指向の設計と実装の学び方のコツ
オブジェクト指向の設計と実装の学び方のコツ
例外設計における大罪
例外設計における大罪
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
Redisの特徴と活用方法について
Redisの特徴と活用方法について
オブジェクト指向エクササイズのススメ
オブジェクト指向エクササイズのススメ
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
CEDEC 2018 最速のC#の書き方 - C#大統一理論へ向けて性能的課題を払拭する
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Viewers also liked
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
Kei Yagi
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
Akira Kubo
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
Takuma Hanatani
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
Mariko Hayashi
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
Kazuhiro Hara
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
Viewers also liked
(10)
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
フロントエンド初学者がSPAに手を出してみた
フロントエンド初学者がSPAに手を出してみた
React を導入したフロントエンド開発
React を導入したフロントエンド開発
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
今からでも遅くない! React事始め
今からでも遅くない! React事始め
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
エンジニアが幸せな人生を過ごすための学び方、関わり方、ありかた
HTML5のAPI群をただひたすらに触ってみた記録
HTML5のAPI群をただひたすらに触ってみた記録
今どきの若手育成にひそむ3つの思いこみ
今どきの若手育成にひそむ3つの思いこみ
React系(別言語含む)の サーバーサイドレンダリング について考えよう
React系(別言語含む)の サーバーサイドレンダリング について考えよう
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
AI and Machine Learning Demystified by Carol Smith at Midwest UX 2017
Similar to なぜ人は必死でjQueryを捨てようとしているのか
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Tokuhiro Matsuno
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
Getting start with knockout.js
Getting start with knockout.js
Akio Ishida
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
yjono Seino
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
yjono Seino
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
Atsushi Harada
レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
Recruit Lifestyle Co., Ltd.
React + Flux
React + Flux
_yukikayuki
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
Mori Shingo
.NETラボ2021年10月 .NETの過去と現在
.NETラボ2021年10月 .NETの過去と現在
TomomitsuKusaba
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
VOYAGE GROUP
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話
Kaoru Kitauchi
Walking front end
Walking front end
Hirata Tomoko
.NET 7におけるBlazorの新機能
.NET 7におけるBlazorの新機能
TomomitsuKusaba
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
parrotstudio
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
Takeshi Akutsu
Vue.jp
Vue.jp
GIG inc.
Similar to なぜ人は必死でjQueryを捨てようとしているのか
(20)
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
Web制作勉強会 #2
Web制作勉強会 #2
Getting start with knockout.js
Getting start with knockout.js
javascript を Xcode でテスト
javascript を Xcode でテスト
Concurrent Programm in JavaScript
Concurrent Programm in JavaScript
Concurrent Programming in JavaScript
Concurrent Programming in JavaScript
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
Titanium Mobile ~本当にあったこわい話~
Titanium Mobile ~本当にあったこわい話~
レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
レガシーと向き合い技術スタックを代謝する(ElasticBeanstalk / Vue.js)
React + Flux
React + Flux
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
2010-10-2 FxUG 名古屋勉強会 HTML5で遊んでみよう
.NETラボ2021年10月 .NETの過去と現在
.NETラボ2021年10月 .NETの過去と現在
JavaScriptトレンド総括(2014)
JavaScriptトレンド総括(2014)
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
AWS Direct Connectの構築を自動化(しようと)している話
AWS Direct Connectの構築を自動化(しようと)している話
Walking front end
Walking front end
.NET 7におけるBlazorの新機能
.NET 7におけるBlazorの新機能
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
これからのJSの話をしよう ~jQueryで作るTwitterアプリ~ (Gunma.web #2 2010/10/9)
S14 t3 yosuke_yamashita
S14 t3 yosuke_yamashita
Vue.jp
Vue.jp
More from Yoichi Toyota
超フランクにスクラムの大事なことの話をする
超フランクにスクラムの大事なことの話をする
Yoichi Toyota
ジャワカレーをおいしく作る最後の一押し
ジャワカレーをおいしく作る最後の一押し
Yoichi Toyota
ライブラリを作る思考回路
ライブラリを作る思考回路
Yoichi Toyota
DynamoDB設計のちょっとした技
DynamoDB設計のちょっとした技
Yoichi Toyota
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
Yoichi Toyota
オブジェクト指向についてあまり知られていないこと
オブジェクト指向についてあまり知られていないこと
Yoichi Toyota
Ruby is comming ractor編
Ruby is comming ractor編
Yoichi Toyota
array.map(&:key)ってなんやねん
array.map(&:key)ってなんやねん
Yoichi Toyota
はじめてのPull Request
はじめてのPull Request
Yoichi Toyota
Railsの開発環境作るぞ
Railsの開発環境作るぞ
Yoichi Toyota
jqで極めるシェル芸の話
jqで極めるシェル芸の話
Yoichi Toyota
足し算をつくろう
足し算をつくろう
Yoichi Toyota
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
Yoichi Toyota
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
Yoichi Toyota
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Yoichi Toyota
Docker in production
Docker in production
Yoichi Toyota
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Yoichi Toyota
Amazon lexを触ってみた
Amazon lexを触ってみた
Yoichi Toyota
More from Yoichi Toyota
(20)
超フランクにスクラムの大事なことの話をする
超フランクにスクラムの大事なことの話をする
ジャワカレーをおいしく作る最後の一押し
ジャワカレーをおいしく作る最後の一押し
ライブラリを作る思考回路
ライブラリを作る思考回路
DynamoDB設計のちょっとした技
DynamoDB設計のちょっとした技
はじめてのDynamoDBスキーマ設計
はじめてのDynamoDBスキーマ設計
オブジェクト指向についてあまり知られていないこと
オブジェクト指向についてあまり知られていないこと
Ruby is comming ractor編
Ruby is comming ractor編
array.map(&:key)ってなんやねん
array.map(&:key)ってなんやねん
はじめてのPull Request
はじめてのPull Request
Railsの開発環境作るぞ
Railsの開発環境作るぞ
jqで極めるシェル芸の話
jqで極めるシェル芸の話
足し算をつくろう
足し算をつくろう
React Hooksでカスタムフックをつくろう
React Hooksでカスタムフックをつくろう
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
サーバーレスアプリケーションの作り方
サーバーレスアプリケーションの作り方
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
AWS WAFでらくらくファイアーウォール生活
AWS WAFでらくらくファイアーウォール生活
Docker in production
Docker in production
How to fight against “full scratch disease”
How to fight against “full scratch disease”
Amazon lexを触ってみた
Amazon lexを触ってみた
なぜ人は必死でjQueryを捨てようとしているのか
1.
なぜ人は 必死でjQueryを 捨てようとしているのか 株式会社エクストーン 豊田陽一
2.
今日のお話の想定するターゲット ● コーディングもやるデザイナー jQuery程度ならちょくちょく触るくらい ● サーバーサイドメインのWebエンジニア フロントは必要に応じて実装するくらい →うっかりjQuery使っていろいろ書くけど、サーバーに比べるとフロント のコードは結構場当たり的な汚いコードになりがち →具体的に言うと俺
3.
はじめに 最近のJavaScript界隈でよく言われていること Do you really
need jQuery? You might not need jQuery
4.
はじめに (cont.) jQueryいらない子? →でもjQuery使わないサンプル、面倒になってない?
5.
jQueryの得意なところ レンダリングされているDOMの操作 →雑に言うと、HTMLを直接書き換えるの得意 機能が貧弱なブラウザに対する互換性の提供 →雑に言うと、IE8でも同じコードが動く
6.
最近のトレンド ページ遷移のないWebアプリケーション JavaScriptで扱う範囲が多くなる 1ページ内の一部の要素→複数のページ全体 IE8(だいたい)死んだ 古いブラウザの互換性、気にしなくてもよくね? ECMAScript6 他のJSフレームワークが使いやすくなってる
7.
ページ遷移のないアプリケーション 今までよくやってたこと ● ベースのページをHTMLでレンダリング ● その後、イベント等に合わせて部分的に書き換え →jQueryで十分 これから必要なこと ●
状態に合わせて適切な画面を組み立てる ● 画面全体を再構築することも頻繁にある →ベースのページがそもそも存在しない?
8.
IE8(だいたい)死んだ HTML5でしか使えない機能使いたい CSS3でしか使えない機能使いたい →jQuery使わずに書いちゃう →DOMノードの不整合に悩む
9.
ECMAScript6 (2015) jQuery自体にはさほど影響ない ブラウザネイティブではまだほとんど動かない コード変換ツールを利用して、ES5に変換して使う →コード変換が必要なフレームワークがついでに使われるようになる (ex: React
w/t JSX)
10.
jQueryを捨てたい理由 まとめると、 ● シングルページアプリケーションに向いてない →そして、その需要が大きくなっている ● 後方互換性を気にする必要が減ってきた ●
ES6の開発環境が整ってきて、他のフレームワークが使 いやすくなってきた …で、いいのかな?
11.
設計の考え方 すべてのDOMをJavaScriptの支配下に置く →AndroidやiOSのNative appに近い考え方 DOMが主→データが主 →旧:DOMを作ってデータによって書き換える。DOM自体が状態を持つ →新:データから動的にDOMを生成する。データが同じならDOMも一緒 コンポーネント指向 →コンポーネント単位での再利用を考える
12.
React View用フレームワーク JSXを利用したVirtual DOM # ES6のclass構文で記述 class
Button extends React.Component { render() { return( <button className=’btn’ onClick={onClickHandler.bind(this)} /> ); } } # もっと横着に const Button = props => <button className=’btn’ onClick={onClickHandler.bind(this)} />
13.
JSX JS内に直接HTMLが書ける? 正確には特定の場所にHTMLっぽい構文が書ける →JSコンパイル時に通常のDOM生成コードに変換 →あああ、onClickとか見て引かないでくださいー →Reactパワーでメルヘンチェンジ☆ const Button =
props => <button className=’btn’ onClick={onClickHandler.bind(this)} />
14.
React導入の障壁 コード変換が必須で、環境作りが大変 ● node.js (フロントエンジニア、デザイナーなど) ○
react-tool ○ browserify ○ webpack ● rails (sprockets) ○ react-rails ○ node.js併用する →近くの優しいエンジニアさんにお願いしよう!
15.
おわりに なぜみんなjQueryを捨てたいのか JavaScriptで作るものが大きくなってきた ブラウザで出来ることが多くなってきた コンポーネント指向の素敵フレームワークが出てきた →jQueryがやろうとしたことの範囲を逸脱している やること変わらないんだったら別にjQueryで問題無いと思う
Download now