Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

71,575 views

Published on

最近はやりのjQuery Hateの謎に迫る!
(というか、これであってるのか教えてほしいという発表)

Published in: Technology
  • Login to see the comments

なぜ人は必死で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で問題無いと思う

×