Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

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

  • Identifiez-vous pour voir les commentaires

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

×