駆け出しrailsエンジニアとして受けたレビューを紹介しました。フロントエンドの実装にも首を突っ込む機会があったので、今回はjs(厳密に言うとtypescriptですが)の実装で受けたコードレビューを紹介しようと思います。晒してばっかりですが、駆け出しのうちは恥をさらしてなんぼではないでしょうか。マークアップとの依存を低くすることを意識しようparentElement等のhtml構造に大きく依存するDOM取得方法は避けること。html構造に依存している=htmlの変更でjsがすぐバグるということなので、マークアップエンジニアやコーダーの人がjsの実装を気にしなければいけなくなってしまう。子→親の直接の取得はhtml構造に必ず依存するので避ける子には親に関する情報をもたせた上で、その情報から改めて親を取得するjsにstyleの情報を持たないようにしようstyleの管理はcssにまとめたほうが煩雑にならない。jsではclassの付け替えをする等にとどめておき、cssでそのclassにたいしてスタイルを振れば良い。document.querySelector("#ok");$div.classList.add('is-hidden')</script>パフォーマンスを意識できるようになろうaddEventListenerを使うときは無名関数は使わないaddEventListenerを使うときは無名関数は使わないようにする。新しくfunctionを切ってそれを呼ぶようにする。不要なeventが残ってしまうのは健全ではない。無名関数だとremoveするのに苦労する。無名関数だと呼ばれるたびにメモリを新たに消費するが、functionとして切り出してあればキャッシュされる。...}appendChildは毎回リフロー・リペイントされるから工夫して使うそもそもリフロー・リペイントとは。算出したスペースのなかに、内容を描画していく「Reflowを制するものはDOMを制す」そしてリフロー・リペイントは以下をトリガーとしておきる。「ブラウザ動作の理解-リフローとリペイント及びその最適化」appendChildはもろにDOMノードの追加にあたるので、連続で呼ぶのはよろしくない。いうときは、createDocumentFragmentを使おう。描画されているDOMにappendされるまではリフロー・リペイントされない。document.createDocumentFragment();$fragment.appendChild($td1);$fragment.appendChild($td2);$fragment.appendChild($td3);$tr.appendChild($fragment);NGの例では3回もDOMノードの更新が走るが、OKの例では1度で済む最後にこういうポイントも意識するべきなどありましたら、ぜひご指摘のほどよろしくお願いします。requestStockLike9@shibadog39rubyのエンジニアです。upLoginユーザーは見つかりませんでした。