1.
なぜ人は
必死でjQueryを
捨てようとしているのか
株式会社エクストーン 豊田陽一

2.
今日のお話の想定するターゲット
● コーディングもやるデザイナー
jQuery程度ならちょくちょく触るくらい
● サーバーサイドメインのWebエンジニア
フロントは必要に応じて実装するくらい
→うっかりjQuery使っていろいろ書くけど、サーバーに比べるとフロント
のコードは結構場当たり的な汚いコードになりがち
→具体的に言うと俺

3.
はじめに
最近のJavaScript界隈でよく言われていること
Do you really need jQuery?
You might not need jQuery

4.
はじめに (cont.)
jQueryいらない子？
→でもjQuery使わないサンプル、面倒になってない？

5.
jQueryの得意なところ
レンダリングされているDOMの操作
→雑に言うと、HTMLを直接書き換えるの得意
機能が貧弱なブラウザに対する互換性の提供
→雑に言うと、IE8でも同じコードが動く

6.
最近のトレンド
ページ遷移のないWebアプリケーション
JavaScriptで扱う範囲が多くなる
1ページ内の一部の要素→複数のページ全体
IE8(だいたい)死んだ
古いブラウザの互換性、気にしなくてもよくね？
ECMAScript6
他のJSフレームワークが使いやすくなってる

7.
ページ遷移のないアプリケーション
今までよくやってたこと
● ベースのページをHTMLでレンダリング
● その後、イベント等に合わせて部分的に書き換え
→jQueryで十分
これから必要なこと
● 状態に合わせて適切な画面を組み立てる
● 画面全体を再構築することも頻繁にある
→ベースのページがそもそも存在しない？

8.
IE8(だいたい)死んだ
HTML5でしか使えない機能使いたい
CSS3でしか使えない機能使いたい
→jQuery使わずに書いちゃう
→DOMノードの不整合に悩む

9.
ECMAScript6 (2015)
jQuery自体にはさほど影響ない
ブラウザネイティブではまだほとんど動かない
コード変換ツールを利用して、ES5に変換して使う
→コード変換が必要なフレームワークがついでに使われるようになる
(ex: React w/t JSX)

10.
jQueryを捨てたい理由
まとめると、
● シングルページアプリケーションに向いてない
→そして、その需要が大きくなっている
● 後方互換性を気にする必要が減ってきた
● ES6の開発環境が整ってきて、他のフレームワークが使
いやすくなってきた
…で、いいのかな？

11.
設計の考え方
すべてのDOMをJavaScriptの支配下に置く
→AndroidやiOSのNative appに近い考え方
DOMが主→データが主
→旧：DOMを作ってデータによって書き換える。DOM自体が状態を持つ
→新：データから動的にDOMを生成する。データが同じならDOMも一緒
コンポーネント指向
→コンポーネント単位での再利用を考える

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併用する
→近くの優しいエンジニアさんにお願いしよう！

15.
おわりに
なぜみんなjQueryを捨てたいのか
JavaScriptで作るものが大きくなってきた
ブラウザで出来ることが多くなってきた
コンポーネント指向の素敵フレームワークが出てきた
→jQueryがやろうとしたことの範囲を逸脱している
やること変わらないんだったら別にjQueryで問題無いと思う