なぜ人は必死でjQueryを捨てようとしているのか

なぜ人は必死でjQueryを捨てようとしているのか

1. 1. なぜ人は 必死でjQueryを 捨てようとしているのか 株式会社エクストーン 豊田陽一
2. 2. 今日のお話の想定するターゲット ● コーディングもやるデザイナー jQuery程度ならちょくちょく触るくらい ● サーバーサイドメインのWebエンジニア フロントは必要に応じて実装するくらい →うっかりjQuery使っていろいろ書くけど、サーバーに比べるとフロント のコードは結構場当たり的な汚いコードになりがち →具体的に言うと俺
3. 3. はじめに 最近のJavaScript界隈でよく言われていること Do you really need jQuery? You might not need jQuery
4. 4. はじめに (cont.) jQueryいらない子？ →でもjQuery使わないサンプル、面倒になってない？
5. 5. jQueryの得意なところ レンダリングされているDOMの操作 →雑に言うと、HTMLを直接書き換えるの得意 機能が貧弱なブラウザに対する互換性の提供 →雑に言うと、IE8でも同じコードが動く
6. 6. 最近のトレンド ページ遷移のないWebアプリケーション JavaScriptで扱う範囲が多くなる 1ページ内の一部の要素→複数のページ全体 IE8(だいたい)死んだ 古いブラウザの互換性、気にしなくてもよくね？ ECMAScript6 他のJSフレームワークが使いやすくなってる
7. 7. ページ遷移のないアプリケーション 今までよくやってたこと ● ベースのページをHTMLでレンダリング ● その後、イベント等に合わせて部分的に書き換え →jQueryで十分 これから必要なこと ● 状態に合わせて適切な画面を組み立てる ● 画面全体を再構築することも頻繁にある →ベースのページがそもそも存在しない？
8. 8. IE8(だいたい)死んだ HTML5でしか使えない機能使いたい CSS3でしか使えない機能使いたい →jQuery使わずに書いちゃう →DOMノードの不整合に悩む
9. 9. ECMAScript6 (2015) jQuery自体にはさほど影響ない ブラウザネイティブではまだほとんど動かない コード変換ツールを利用して、ES5に変換して使う →コード変換が必要なフレームワークがついでに使われるようになる (ex: React w/t JSX)
10. 10. jQueryを捨てたい理由 まとめると、 ● シングルページアプリケーションに向いてない →そして、その需要が大きくなっている ● 後方互換性を気にする必要が減ってきた ● ES6の開発環境が整ってきて、他のフレームワークが使 いやすくなってきた …で、いいのかな？
11. 11. 設計の考え方 すべてのDOMをJavaScriptの支配下に置く →AndroidやiOSのNative appに近い考え方 DOMが主→データが主 →旧：DOMを作ってデータによって書き換える。DOM自体が状態を持つ →新：データから動的にDOMを生成する。データが同じならDOMも一緒 コンポーネント指向 →コンポーネント単位での再利用を考える
12. 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. 13. JSX JS内に直接HTMLが書ける？ 正確には特定の場所にHTMLっぽい構文が書ける →JSコンパイル時に通常のDOM生成コードに変換 →あああ、onClickとか見て引かないでくださいー →Reactパワーでメルヘンチェンジ☆ const Button = props => <button className=’btn’ onClick={onClickHandler.bind(this)} />
14. 14. React導入の障壁 コード変換が必須で、環境作りが大変 ● node.js (フロントエンジニア、デザイナーなど) ○ react-tool ○ browserify ○ webpack ● rails (sprockets) ○ react-rails ○ node.js併用する →近くの優しいエンジニアさんにお願いしよう！
15. 15. おわりに なぜみんなjQueryを捨てたいのか JavaScriptで作るものが大きくなってきた ブラウザで出来ることが多くなってきた コンポーネント指向の素敵フレームワークが出てきた →jQueryがやろうとしたことの範囲を逸脱している やること変わらないんだったら別にjQueryで問題無いと思う