なぜ人は必死でjQueryを捨てようとしているのか
27 likes81,030 views
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）
More Related Content
What's hot (20)
Viewers also liked (10)
Similar to なぜ人は必死でjQueryを捨てようとしているのか (20)
More from Yoichi Toyota (20)
Recently uploaded (13)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
なぜ人は必死でjQueryを捨てようとしているのか
- 3. はじめに 最近のJavaScript界隈でよく言われていること Do you really need jQuery? You might not need jQuery
- 7. ページ遷移のないアプリケーション 今までよくやってたこと ● ベースのページをHTMLでレンダリング ● その後、イベント等に合わせて部分的に書き換え →jQueryで十分 これから必要なこと ● 状態に合わせて適切な画面を組み立てる ● 画面全体を再構築することも頻繁にある →ベースのページがそもそも存在しない？
- 10. jQueryを捨てたい理由 まとめると、 ● シングルページアプリケーションに向いてない →そして、その需要が大きくなっている ● 後方互換性を気にする必要が減ってきた ● ES6の開発環境が整ってきて、他のフレームワークが使 いやすくなってきた …で、いいのかな？
- 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併用する →近くの優しいエンジニアさんにお願いしよう！