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

More Related Content

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