Submit Search
なぜ人は必死でjQueryを捨てようとしているのか
•
27 likes
•
80,997 views
Yoichi Toyota
Follow
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Read less
Read more
1 of 15
Download now
Downloaded 38 times
More Related Content
なぜ人は必死で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