React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ

エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそういったライブラリを使うことができないプロジェクトもあるわけです。古すぎて、一部分だけ最新のソースコードにすることが憚られたり、サイズの問題でライブラリを入れることができなかったり。。。 その場合どのように書けばメンテナンス性の高いプログラムを書くことができるのでしょうか。そこでIE6時代からJavaScriptをもりもりと書いている私なりのベストプラクティスを紹介します。 そもそもなぜメンテナンス性の悪いコードとなってしまうのか jQueryではセレクタで

[cpw]

書いた

[mirucons]

Vue, React 使えない状況で他のメンバーがこのレベルのJSを理解できる状況ってなんだろな…

[aike]

むしろReact、Vueがなぜこんな構造になっているのかの説明として役に立ちそう。

[yarumato]

“結局ReactやVueのような3原則で改善。コンポーネント志向で設計（Classで表現しコンストラクタで受け取ったroot要素配下だけ変更）、ViewModelを定義（Viewの更新と処理を切り分け）、画面更新は1箇所で（renderメソッド）”

[gachapining]

Angular「」

[michael-unltd]

“コンポーネント志向”

[efcl]

jQueryなコードのリファクタリング例

[uehaj]

クラスベースjQuery

[sakadon]

ドカンとObject用意してメソッド生やして随時実行を別に用意してinit走らせてしまう派です

[zentarou]

React導入できないレガシープロジェクトがありますよってアピールは採用に良い効果をもたらすのだろうか

[otchy210]

jQuery が使えて、React が使えない状況って想像出来ないんだが、React の再実装めいたことするくらいなら、Webpack 無し JSX 無しの素の React を CDN から読み込んで使うわけにはいかないの？

[braitom]

jQueryで書かれた古いJavaScriptのコードをどのようにメンテナンス性の高いコードにリファクタリングするかについて。コンポーネント思考で設計する、ViewModelを定義する、画面の更新処理は1箇所で行うなど。

[h_taiji]

ためしてみよう

[pokuwagata]

わかる

[bottomzlife]

ポイントなら3行で書けよ･･･なんてメンテナンス性の悪い文章だ

[marisatokinoko]

そこまでやったならlodashのtemplate使おうぜ(そしてBackboneへ)

[ntstn]

上とか顧客を説得するほうが早そう。

[tockri]

knockout.js使えばいいのさ！