生のJSができれば、reactは必要ない？

Question

現在生のJSをES6で使っているのですが、仕事を請けている会社がSPAをreactとexpressでできてくれるとJSの仕事も
やってもらえるかもといわれて、迷っています。
下記の情報を見ると、生のJSができれば、reactは必要ないような意見もあり、
生のJSだけを極めていけば、レンダリングの速度も一番早いわけですし、バニラjsが一番というのも現在はやっていますよね。

＞＞＞
汎用性は圧倒的にJSです。
生のJSが完璧に書けるなら本来ほかのAltJSやライブラリは必要ありません。
チーム全員が生のJSを理解しきっていて管理が容易なのであればReactにしなければならないということはありませんね。

ただ、楽に書けたりするので利用されることが多いですし、生のJSを必死に書いているプロジェクトはそんなに多くないと思います。
今後いろいろな案件に関わることを想定したら、Reactのようなライブラリやほかのフレームワーク（Angularとか）を扱った経験があったほうが良いと思います。

ただSPAは例外的でhtmlをホトンとJSでいじるので、生のJSでDOMを直接いじるのはあまりに大変すぎるので、
reactやvueなどのバーチャルdomを使わないとたくさん記載しなくてはいけないので、
あまりに作成が大変すぎるのでしょうか？

最後にreactはかなり癖がきついようなので、恐らく生とjqueryしかやったことのないものにとっては、
別の言語を学ぶように、書き方がかなり違う事に戸惑い、学習コストも高いものでしょうか？
vueの方がよほど生に近く、学習コストも低いのでしょうか？

ただ会社がreactを採用しているのでしたら、癖が少ないのでせめてvueでお願いしますといってもまず無理なんでしょうね...

Answer 1

「アセンブリを極めればCやC++はいらない。」という考えに近い物を感じました。

こういう話をするときに重要なのは「理論上可能」「現実的に可能」の区別です。そして、「ある目的を達するために、Aが無くても理論上可能であれば、Aは理論上不要であるが、現実的に__不可能__であれば、Aは現実的に__必要__である」ということに注意すべきです。

JavaScriptという言語を理解しているのであれば、わざわざaltJSを使う必要は無い。JavaScriptだけで全てが作れるのだから、ライブラリやフレームワークを使う必要は無い。はい、確かにJavaScriptのみで全てが理論上可能ですから、理論上必要はありません。しかし現実的にはどうでしょう。それには、なぜ、altJSやライブラリが存在するのか、それは何のために作られているのか、なぜ人々はそれらを使うのかを考えなければなりません。

altJSが作られたのはES5までのJavaScriptの言語仕様がどうしもなくダメダメだったからです。ES6である程度まともになりましたが、IEがES6を完全にサポートする予定はありませんので、しばらく(Win8のサポート期限である2023年1月10日ごろまで)はES5でないと厳しいのが現実です。それぞれのaltJSは目的が異なるため、一概にとは言えませんが、総じてES5で書き続けるよりは効率よく安全に書けるようになっています。そして、多くの人が、デメリットよりもメリットが大きいと判断して採用しています。開発するモノにもよりますが、開発速度の向上やバグ発生率の減少によって、全体の開発工数を下げることができます。

ライブラリやフレームワークは、皆が同じ物を実装するであろうコードの集合です。その内容はバラバラですが、本来、自分で実装すべき物を第三者が作成しておいてくれた物です。もし、同じ事をしようとするのであれば、自分で実装するよりも、ライブラリを使った方が開発効率は圧倒的に違います。もちろん、ライブラリが不安定、遅くなる、といったデメリットがある場合もありますが、開発工数という観点から見ると大幅な削減が見込めます。

そう、大事なのは開発工数の削減です。あるサイトを作成するのに、JavaScriptのみなら100時間かかるけど、TypeScript+Reactで作れば20時間で作れますが、どちらを採用しますか？と言われれば後者を選ばないはずがありません。費用も100万円が20万円になりますと言っているようなものになるからです。そうなると全体の相場もこのサイトなら20万円でとなります。JavaScriptのみの作成にこだわると、100万円の費用で、20万円のものを構築することになり、毎回80万円の赤字です。これは現実的ではありません。

構築する内容にもよりますが、altJSやライブラリを使うことを前提に見積もられた案件において、JavaScriptのみで構築すれば赤字になるでしょう。かといってJavaScriptのみを前提とした見積もりを出したら、他の価格が安い所に案件をとられてしまうでしょう。これでは仕事になりません。つまり、現実的に不可能となります。そして、altJSは現実的に必要ということです。

ただ、altJSやライブラリは多くの選択肢があり、それぞれメリットとデメリットがあります。単純な比較はできませんので、何を採用するかは全体の要件から吟味する必要があります。Reactを使った方が良い場合もあればAngularJSを使った方が良い場合もあるでしょう。中には、全く何も採用しない方がいいという場合もあり得ます。しかし、全体として、altJSやライブラリが全く採用しないとした場合、経営的に不利な戦略であり、市場原理によって排他されてしまってもおかしくありません。

Comments

[spablock]

ありがとうございます。

トランスパイラでES2016を使って生のJS、jquryを現在使っています。
やはりES6をトランスパイルしてもまだまだvue、reacrなどと比べるとソースの量が多く
とてもこれでは仕事では時間がかかりすぎて、使い物にならないのですね。

SPAレベルでないクラウドワークスにある程度の昔からあるWEB制作なら生のJSで十分でしょうが、
それ以上のことをやるんであればjquery以上のバーチャルdom必須なのですね。

svelteというのも生に変えられるのでとても興味深いのですが、
まだ数年は仕事では使えるべれるにならないのでしょうね。

jqueryは生のJSにかなり似ていると思うのですが、バーチャルdomで近くて学習コストも低いのはvue将来はsvelteでしょうか？

Answer 2

はい、もちろんReact.jsはすべてJavaScriptで書かれていますので、理論上「React.jsでなければできないこと」は存在しません。

もっとも、「何のライブラリも使わずにSPAのような、複雑な挙動をするページを作る」となれば、正しく動作するものを作るだけでかなりの労力が必要となり、よほどその術をマスターしている、あるいは工数に相当な余裕がある、という状況でなければ、現実的には難しいです。

そして、フレームワークを使わなかった労力に値するだけの性能向上があるかと言えば、ゲームのような極限までリアルタイム性が要求されるものでなければ、そこまで優位になることもないでしょう（実用十分な性能が出るからこそ、フレームワークが使われているわけです）。

なお、最近では「フレームワークにそって書かれたコードをコンパイルして、出来上がったものはVanilla JSとして扱える」、svelteのようなフレームワークも現れています。

---

「Reactが苦手なのにそういう仕事しか来ない」というのであれば、選択肢はいくつかあります。不満ばかり言っていても、状況は改善しません。

• Reactをマスターしてしまう（便利だからこれだけ流行しているわけで、学習コストもおそらく回収できるでしょう）
• 別な案件の仕事を探す、もしくは「こんな形にしてはどうか」と逆提案する

大きなWebサイトの下請けをやっているのでは、自主的な技術選択の余地はありません。「ちょうどいい機会だった」と新たな技術をマスターする、あるいは自分で1サイトまるごとの案件にかかれるように営業などをしていく、というように道を切り開く必要があります。流されるままでは、どうなってしまうのか誰にもわかりません。

Comments

[spablock]

svelteとても興味深いです。
また新たしいフレームワークが出てきているのですね。

すると、生のJSで書いてsvelteに変換するのも理論上は可能なのですかね。
私のように生のJSでしかわからない人は、生のJSで書いたものをreactなどに変換して、
会社に渡せば問題解決のようにも思えてしまいますが、
やはりreactやvueを使った方が圧倒的に短いソースで簡単にかけるので、
絶対にその方が早くできて管理もしやすいので、会社側はreactにこだわるのですね。

特にSPAはその傾向が決定的で生やjqueryなどありえないのですね。

svelteもおそらくまだできたばかりで使われてないのでしょうから。
会社側としてはreactを絶対やってくれという事なのでしょうね。

この状態は３年くらいは続くのでしょゆね。

[maisumakun]

「SPA級のJavaScriptを生DOM or jQueryで書ける」というのなら、ご自由にどうぞ。

[spablock]

ありがとうございます。

トランスパイラでES2016を使って生のJS、jquryを現在使っています。
やはりES6をトランスパイルしてもまだまだvue、reacrなどと比べるとソースの量が多く
とてもこれでは仕事では時間がかかりすぎて、使い物にならないのですね。

SPAレベルでないクラウドワークスにある程度の昔からあるWEB制作なら生のJSで十分でしょうが、
それ以上のことをやるんであればjquery以上のバーチャルdom必須なのですね。

svelteというのも生に変えられるのでとても興味深いのですが、
まだ数年は仕事では使えるべれるにならないのでしょうね。

jqueryは生のJSにかなり似ていると思うのですが、バーチャルdomで近くて学習コストも低いのはvue将来はsvelteでしょうか？

Answer 3

ただSPAは例外的でhtmlをホトンとJSでいじるので、生のJSでDOMを直接いじるのはあまりに大変すぎるので、

reactやvueなどのバーチャルdomを使わないとたくさん記載しなくてはいけないので、
あまりに作成が大変すぎるのでしょうか？

仮想DOMってそういうもんでしたっけ？
素のJSで同じことを再現しようと思ったら単純に直でDOMをいじるのでは無理だったはず
前回描画した際に反映した内容から今回反映するまでの間の変化・差分をチェックして差分だけを反映させるような処理を行うのであって、そのつど直にDOMをいじっていたら仮想DOMで処理を行うよりも遅くなるはずなんですが
最近かじったばかりで自分の解釈が違うのかもしれないけど仮想DOMで検索したらそういう解説が複数個所で出てきたからそういうもんだと解釈していたんですけど
なので再現するとしたらrequestAnimationFrameあたりを活用して再描画のタイミングでだけ直にDOMをいじってそれ以外のタイミングではDOMはいじらずに前回の再描画との差分情報をいじる形で自作しないとたぶん遅くなると思いますよ

ただとりあえず自分がこの手のフレームワークやツールを使わずに直接自分で書いた方が早いという主張は、専門の職人さんが日夜研鑽して腕を磨いてようやく到達できることを日曜大工を時々やってるだけの人が俺の方がうまいと自慢しているようにしか感じられませんが

Answer 4

初めての回答になるので、的をはずしているかと思いますが。
私の動機はまったく逆で、肥大化するクライアントサイドの処理をどのように明晰化するかということが大きな課題だと思っています。クライアントサーバ系の実装であれば画面表示部品をコンポーネント化するのは常套手段ですがjavascriptにはこういった機構はなく、コンポーネントを作成するには生で頑張る方法もあるでしょう。さて生から作ったコンポーネントですが、様々なコンポーネントを作成するにあたり統一されたインタフェースで提供することは可能でしょうか？それができるということはJavascriptについてとことん詳しいということとは全く別のスキルが必要でしょう。また、新たなコンポーネントを１００個作りたい開発があったとしてこれは一人のプログラマーが手に負える作業量でしょうか？共同開発になるとした場合、統一したインタフェースは維持可能でしょうか？もしこれが可能であるとしたらreactとは別のフレームワークであると言えるでしょう。
つまり、生jsかReactかという選択ではなく、自作を含めてどのフレームワークを使うべきかという問題なわけです。
さてフレームワーク開発者は一日にしてなれるものでしょうか？
最低限フレームワークの評価ができなければフレームワークの開発者としてふさわしいとは言えないと思います。では評価するためには何が必要でしょうか？フレームワークにのっとった開発経験が必要です。
つまりReactである必要はありませんが何らかのフレームワークで開発し、生との違いを経験する必要があるということで回答とさせていただきます。

私もReactは勉強中ですが、なかなかエキサイティングで悪くないと思いますよ。
むしろトランスパイラでES2016とかの仕様を使えるのが刺激的なのかもしれませんが。

Comments

[spablock]

ありがとうございます。

トランスパイラでES2016を使って生のJS、jquryを現在使っています。
やはりES6をトランスパイルしてもまだまだvue、reacrなどと比べるとソースの量が多く
とてもこれでは仕事では時間がかかりすぎて、使い物にならないのですね。

SPAレベルでないクラウドワークスにある程度の昔からあるWEB制作なら生のJSで十分でしょうが、
それ以上のことをやるんであればjquery以上のバーチャルdom必須なのですね。

svelteというのも生に変えられるのでとても興味深いのですが、
まだ数年は仕事では使えるべれるにならないのでしょうね。

jqueryは生のJSにかなり似ていると思うのですが、バーチャルdomで近くて学習コストも低いのはvue将来はsvelteでしょうか？

[yasushi_sapporo]

何らかのフレームワークの意義を認めていただいたようで幸いです。
変換後のjsソースが得られることを重視されているようですがそれもトラブル発生時の対策容易性の評価となるとは思います。回答に書いたとおり私も勉強中の身でえらそうなことはいえませんが、学習容易性を考えるとき情報量も考慮すべきでReactは書籍も発行されており、体系的な学習には有利だと思います。vue.jsも日本語のAPIサイトがあるなどよいのかもしれません。また、シェアも重要かと思いますがそうなるとAnguler2 vs Reactのようですね。習得した技術を長く生かすとしたらこのどちらかなんじゃないでしょうか。あくまで私の感想ですので自由に選ばれたらよいと思います。

[spablock]

シェアや仕事のもらいやすさで考えるとAnguler2 vs React。

生のJSに近く癖が少ないのはvue。

情報が多いので学びやすいのは、vueよりもreatなんですかね？
vueの方がシンプルで簡単とも聞いていましたが、情報量の差があるのでその結果複雑でもreactの方が
学習コストも低いのですね。

Answer 5

新規開発する場合と、それを後々メンテする場合では
判断が多少違ってくることでしょう。
別のとこや自分とこで改修しようと考えてるなら
ある程度のフレームワーク的というかライブラリ的というか
そういうやつでくるんでた方が扱いやすいでしょうからね。

そういうのを使っていると、細かいとこに手が入れられない、
だから生JavaScriptで… という案件もあるかもしれませんが
数的にはそんなにないのかなあってイメージです。

今回の件を好機ととらえるか否かはご自身で判断するものでしょうが
「彼を知り己を知れば百戦殆うからず」
って昔の人もいってますしね。
一度経験してみるのもいいんじゃないでしょうか?

Comments

[spablock]

ありがとうございます。

トランスパイラでES2016を使って生のJS、jquryを現在使っています。
やはりES6をトランスパイルしてもまだまだvue、reacrなどと比べるとソースの量が多く
とてもこれでは仕事では時間がかかりすぎて、使い物にならないのですね。

SPAレベルでないクラウドワークスにある程度の昔からあるWEB制作なら生のJSで十分でしょうが、
それ以上のことをやるんであればjquery以上のバーチャルdom必須なのですね。

svelteというのも生に変えられるのでとても興味深いのですが、
まだ数年は仕事では使えるべれるにならないのでしょうね。

jqueryは生のJSにかなり似ていると思うのですが、バーチャルdomで近くて学習コストも低いのはvue将来はsvelteでしょうか？

Answer 6

生JSかReactかというより、その案件を実現するためにはどの技術を使うのが良いか・・・というように思いますが、そうでもないんですかね・・・

他にも魅力的なライブラリがあるのだからそれを使えば…なんて話も出てくるわけで、案件次第、お客様次第で選択…というのが私の考えです。

確かにフレームワークを使えば開発工数の削減につながるかもしれませんが、お客様側がそのフレームワークを理解しきれなければメンテナンス性がえらく悪いことになりますよね。
また、フレームワークの選択に迷うくらい後から新しいものがでてくるし、すたれると言っては言い過ぎかもしれないけれど、使われなくなった技術で作られたアプリを誰がメンテするんだという話にもなりかねないかと...
とは言うものの、覚えてしまえばホント楽・・・はその通りなので、時間と工数をかけられるならこの際習得するのも良いのではないでしょうか。
ただ、圧倒的に違うかどうかは微妙と思います。
そのフレームワークやライブラリの持つ機能が、案件に合致しているならかなりの工数削減につながるでしょう。
なお、フレームワークやライブラリには余計な機能も抱き合わせになるというマイナス面もあると思いますので、スクラッチで作ったほうがスリムで速いし...という場合もあるかもしれません。

Comments

[spablock]

＞＞＞
生JSかReactかというより、その案件を実現するためにはどの技術を使うのが良いか・・・というように思いますが、そうでもないんですかね・・・

自分が生のJSを勉強したのでこれで作りたいという事ではなく、今作るものに何が適しているかで選ぶべきという事でしょうか？
つまり仕事を請けている会社がreactでやってくれと言ったら、それが適しているのだから、
reatをやったらよいという事ですか？

＞＞＞
なお、フレームワークやライブラリには余計な機能も抱き合わせになるというマイナス面もあると思いますので、スクラッチで作ったほうがスリムで速いし...という場合もあるかもしれません。

ただ生のJSで作った方がいい場合もあるので、その時はそれでいいという事ですね。
すると両方できないとだめという事ですね・

[schi_heil]

選ぶべきというより、選んだ方が良いといった感じです。
Reactでやってくれと言ったからと言って、それが適しているとは限らないですし、他の選択肢のほうが機能の実現、メンテナンス、将来性が高いかもしれません。
なぜ、Reactでやって欲しいのか…にもよるでしょう。
いろいろなプラス面、マイナス面を説明して交渉してみて、それを先方が認めてくれれば生JSでやりますでも別にかまわないと思います。
希望する仕様が満たせるのなら・・・ですが。

なお、両方できないとだめとは思いませんが、どんなものかは知っておいた方が良いと思います。
「彼を知り己を知れば百戦殆うからず」という言葉もありますし。
（それでも発注元の意向に従わなければならないことも多いですが...）

Answer 7

やはりバニラjsは、開発効率の問題と、なにより会社という組織で仕事する場合にメンバー同士やメンテナンスでのコードの「可読性」の問題があると思います。

ES6やjQueryでガリガリDOMを書き換えしてるソースはフレームワークで書くより長めになるので、フレームワークで開発している多くの開発者は読む気が起きない気がします…

ごく短いコードやフリーランスの「お一人様」開発なら「ちゃんと所定の動作さえすればいい」で済みますが、チームでサービスやアプリ開発することを考えると大半の人はバニラjsのコードを読むのはツライと思いますね。

Comments

[spablock]

ありがとうございます。

＞＞＞
ごく短いコードやフリーランスの「お一人様」開発なら「ちゃんと所定の動作さえすればいい」で済みますが、チームでサービスやアプリ開発することを考えると大半の人はバニラjsのコードを読むのはツライと思いますね。

WEB制作、自分一人で作るアプリやゲーム程度であれば生のJSで十分ですが、
チームで行うアプリやspaくらいになると、jqueryでもダメでバーチャルdomが必須になっているのですね。
reactが現在は主流ですが、これからやるならvueが良いのですかね？
ただ元請けがreactを採用しているといわれた場合はreactを使うしかないのでしょうね。

[AnMoreNight]

元請けが発注時にフレームワークを指定するのは、「なんか最近見かける流行みたいだから」という場合と、「うちではそのフレームワークを使ってる人しかいないから納品後のメンテナンスを考慮して」の2通りあると思います。

前者であれば、交渉の余地はありますが、後者は余程自分が使いたい方法に優位性がない限りは無理ですねw
たまに、相手が指定する開発方法が時代遅れやデメリットが大きいなど問題があって自分で別の方法を提案するケースもあるので、相手の要求を鵜呑みにするのはよくないですが。

これから習得するのにReactかVueかAngularかの選択は、ケースバイケースだと思います。当面の案件で指定されているからとか、機能実現のために便利な関連モジュールがあるとか、その辺で判断することになるでしょう。全部覚えるならそれが一番でしょうけど(^0^;)

ちなみに私はNode.jsでAngular2を使っています。

[spablock]

＞＞＞
元請けが発注時にフレームワークを指定するのは、「なんか最近見かける流行みたいだから」という場合と、「うちではそのフレームワークを使ってる人しかいないから納品後のメンテナンスを考慮して」の2通りあると思います。

前者であれば、交渉の余地はありますが、後者は余程自分が使いたい方法に優位性がない限りは無理ですねw

やはり元請けがreactで作ったら考えるといわれた場合は今はvueが流行っているから、
これからやるならvueをやりたいといってもダメなんですね。