trifle

技術メモ

jQuery しか知らなかった人間が React に触れてみた感想

個人サイト hellorusk.netjQuery から React に乗り換えた. 以前は CDNjQuery を読み込んでいただけだったが, Node.js に慣れてきたので, 今回はローカルの React で create-react-app して雛形を作り, できたアプリケーションを Bitbucket に push している. ホスティングサービスとしては前回同様 netlify を利用している.
Reactを使い始めてから2日しか経っていないが, とりあえず感想.

jQueryではセレクターを指定して, それに関数を引っ掛けてアニメーションを作る感じだが, ReactではそもそもDOM自体をjsで一から記述する. htmlを殆ど全く書かなくて済むが, その代わりにオブジェクト指向チックなjsをめっちゃ書く.
ただ, ページの構造が分かりやすいので修正すべき箇所を発見した際どこを直すべきかが分かりやすい. jQueryは殆どCSSに近いので適宜コメントを入れないとコードのどこで何をやっているかが分かりづらくCSS並みに修正が難しい傾向にあった.

  • 学習コストが高い

例えば, サイトにコンテンツを増やす度に新しくjsを追加するのでどんどんjsが溜まっていく. なので webpack というのを使ってjsを一つにまとめた方が良いらしい. しかしあまりやる気が起きないのでまだ手出しが出来ないでいる. そのうちやります.
そんな感じで, 単にReactを学ぶだけではなくReact周辺の技術が色々あり, それらも習得した方が良いので, 結果的に学習コストは高くなる.
jQueryCSS並に簡単に書けるので, 単一のページを装飾するだけなら絶対にjQueryの方が楽で良い.

  • アニメーションが難しい

そもそも jQuery がアニメーション用ツールというか, jQuery でアニメーションを簡単に書くのにあまりに慣れていた所為か, React でのアニメーション作成が極めて難しく感じる(react-transition-groupというライブラリがわざわざ別に用意されているくらい). 技術力が無いのでCSSアニメーションで誤魔化し誤魔化しやっていくしかない. 多分うまく使えればReactアプリケーション上でjQueryを併用しても大丈夫だとは思うのだがサイトが重くなりそうなのでやらない.
そもそもサイト上でウニョウニョ動く要素があるのが前時代なんですかね. ヤフージオシティーズもじきに無くなってしまうし.



結論としては, 一枚のhtmlから成る個人サイトであれば jQuery で十分で, その後コンテンツを追加していきたいなという気分になったら React に変えればいいと思います.