1.1　改善作業に伴うさまざまなリスク

　改善作業にはさまざまなリスクが伴います。メリットとデメリットを天秤にかけた上で着手すべきでしょう。そのために、まずはどのようなリスクがあるかを考えてみましょう。

挙動を壊してしまう

　改善作業の結果、稼働しているシステムの挙動を壊してしまう可能性があります。いわゆる、リグレッション/デグレードです。これは多くのエンジニアが恐れるものです。

　エンドユーザーや関係者に影響が出ることも勿論ですが、なにより一度壊してしまうと「次」の改善作業への心理的な障壁が高くなりがちです。リスクばかりが目について、身動きが取りづらくなってしまいます。

改善が中途半端な状態で頓挫する

　改善作業は長い道のりになる可能性もあります。勢いよく最初の一歩を踏み出したものの、途中で心が折れてしまうかもしれません。メンバーの入れ替えなどの外部的な要因で、続行が困難となってしまうこともあります。

　その結果、改善の前と後のコードが入り混じった状態で残ってしまうことになり、メンテナンス対象が増えて複雑化してしまいます。頓挫した場合には、改善の着手前より状況が悪化する可能性がある、ということを知っておくべきでしょう。

改善後の状態をメンバー間で共有できていない

　アーキテクチャーの部分を書き換えると、それだけエンジニアは新たに必要な知識や覚えるべきことが増えます。人数が多ければ多いほど、そのコストは大きくなることでしょう。

　改善を行うのであれば「現状の何が問題か」「どのように変更するか」「何を使うか」といった情報を、適切に関係者に展開していかねばなりません。地味で手間な部分ですが、これを怠った結果、チームメンバーの負担が大きくなり「リファクタリングをしたら開発コストが上がった」といった結果を招きかねません。

1.2　改善で得たいものは何か？

　リファクタリングそのものが、エンドユーザーに直接的に価値を与えることはほぼありません。それでも改善作業をやりたいということは、何か得たいものがあるはずです。

　・開発速度を上げたい

　・メンテナンスコストを下げたい

　・モダンな環境を整えてエンジニアのモチベーションを上げたい

　・テストコードを書きやすくしたい

　これらはほんの一例です。自分達がなんのために改善作業を行うのかをきちんと明文化しましょう。これによって、作業の中で何を優先すべきかや、いざとなった場合に何を諦めるかが見えてきます。そして何より、改善作業を続ける上でのモチベーションに繋がります。

1.3　「安全」な改善とは

　では、「安全に改善を進める」とは一体どういうことでしょうか。少し考えてみましょう。

小さく進める

　安全に進めるうえにおいて重要なのが、とにかく小さくすることです。

　作業のボリューム量とリスクの大きさは比例します。大きければ大きいほど、トラブル発生時のロールバックにも時間がかかったり、調査にも手間取るかもしれません。

　改善作業は、すべてがうまくいくとは限りません。一度で修正するコード量を、できるだけ小さくしましょう。また、コード量だけでなくひとつひとつの作業サイクルも短いものとし、小さいスコープでリリースできるようにしましょう。ありとあらゆる改善に広く浅く手をつけるのではなく、ある特定の狭く小さい改善作業を完全に終わらせ、それを積み上げて大きな改善としていくことが、安全に進めるためのコツです。

コード変更前の準備を入念にする

　改善作業は往々にして、着手してからその山の大きさに気付きます。軽い気持ちで手をつけると、途中で「これ全然終わらないのでは……？」と思うことも多いでしょう。そうならないために、事前の入念な準備が重要です。

　まったく終わる見込みがないのであれば、最初から「やらない」のも価値のある決断です。中途半端に投げ出されて、より難解なコードを生み出してしまうよりは遥かによいでしょう。そのためには、着手する前の段階で全体像をしっかり把握しておく必要があるのです。

心理的安全

　小さく進めることや準備を入念にしていくこと根本的な目的は、作業をするあなたが「改善に自信をもつ」ことにあります。

　改善作業ではすでに動いているコードを直していくため、つねに不安や恐怖との戦いになります。これを払拭するために、資料化などを経て自分の理解を確認し、テストコードを書いて機会的に動作を保証する必要があります。そしてできるだけ小さく進めることで影響範囲を掌握しながら進めていくのです。

　安全とは改善対象を壊さないという意味もありますが、何よりも作業するあなた自身が「心理的に安全」であることがもっとも重要なのです。

1.4　リスクを軽減する

　さて、散々脅すようなことを述べましたが、技術的な負債を返済することには大きな価値があります。先に説明したさまざまなリスクは、完全に打ち消したり無視することはできません。しかし、うまく進めることで軽減していくことは可能です。

　本書では、ひとつひとつの改善作業のコスト自体は高くなる可能性はあるものの、可能な限りリスクを減らしながら、一歩ずつ「石橋を叩いて渡り」改善を進めることにフォーカスします。注意点として、すべてをそのまま実践していくと時間がかかりすぎる可能性もありますので、実際に改善作業と向き合った際に、もっともリスクと感じる部分にうまく取捨選択して適用していただければと思います。

2.1　いきなりコードを変更しない

　「彼を知り己を知れば百戦殆うからず」という故事成語があります。安全に書き換えるためには、対象となるコードを誰よりも理解していなければなりません。

　もしかすると、想像を遥かに超えて整理や分類が困難なほどに複雑なコードかもしれません。はたまた、ボリュームが巨大で到底終わりそうもない修正量かもしれません。これら自体は仕方のないことですが、先に状況を把握して、正しく知ることが重要です。

　到底無理であるなら対象範囲を削る、やることを絞るなど、現実的な落とし所を探すことができます。新しいフレームワークを導入する前に一度リファクタリングを実施する、といった戦略も考えられます。

　理解しないまま、とりあえずコードを触りはじめるのは大きなリスクです。戦う前に、まずはコードを正しく知るところから始めてみましょう。

2.2　DOMの扱いで分離する

　レガシーなフロントエンドコードを読み解く場合、まずはDOMをどのように取り扱っているかを把握するとよいでしょう。理解しづらい大きい要因のひとつは、DOMと処理の関係性が見えづらいことにあります。最終的にVue.jsやReactといったフレームワークに書き換えるときも、DOMとそれに関連する処理のまとまりごとに書き換えていきます。つまり、逆に考えれば意味のあるまとまりを把握できていないと、書き換えもまた困難になるのです。

　DOM操作コードは大きく分けて次に分類していくことができます。

Write/書き込み

　DOMへ破壊的な値の書き込みを行う処理です。HTMLやテキストを直接書き換えているものが代表的でしょう。

Write/書き込み処理 - HTMLやテキストの書き換え

// jQueryによるHTML・テキストの書き込み
$(".el").text("新しいテキスト");
$(".el").html("<span>コンテンツ</span>");

// DOM APIによるHTML・テキストの書き込み
document.querySelector(".el").innerText = "新しいテキスト";
document.querySelector(".el").innerHTML = "<div>コンテンツ</div>";

　DOM要素自体の追加や削除も該当します。

Write/書き込み処理 - DOM要素の追加や削除

// jQueryによるDOMの追加・削除
$(".el").append($("<div>"));
$(".el").remove();

// DOM APIによるDOMの追加・削除
document.querySelector(".el").append(document.createElement("div"));
document.querySelector(".el").remove();

　クラス・属性・スタイルの更新もDOMを書き換えています。

Write/書き込み処理 - クラス・属性・スタイル

// jQueryによるクラス・属性・スタイルの書き換え
$(".el").addClass("myclass");
$(".el").removeClass("myclass");
$(".el").attr("myattr", "abc");
$(".el").css("color", "red");

// DOM APIによるクラス・属性・スタイルの書き換え
document.querySelector(".el").classList.add("myclass");
document.querySelector(".el").classList.remove("myclass");
document.querySelector(".el").setAttribute("myattr", "abc");
document.querySelector(".el").style.color = "red";

　jQueryなどのライブラリー利用時には「実はDOMを操作している」というAPIもあるので注意が必要です。

Write/書き込み処理 - 実はDOMを操作するAPI

// 実はstyleに"display: none;"を付与している
$(".el").hide();

// 実はstyleに"height: 100px;"を付与している
$(".el").height(100);

Read/読み込み

　DOMから何らかの値の読み込みを行う処理です。書き込みと同様、HTMLやテキストの読み込みが代表例でしょう。

Read/読み込み処理 - HTMLやテキストの読み込み

// jQueryによるHTML・テキストの読み込み
var text = $(".el").text();
var html = $(".el").html();

// DOM APIによるHTML・テキストの読み込み
var domHtml = document.querySelector(".el").innerHTML;
var domText = document.querySelector(".el").innerText;

　クラス・属性・スタイルの参照も該当します。

Read/読み込み処理 - クラス・属性・スタイルの読み込み

// jQueryによるクラス・属性・スタイルの読み込み
var myclass = $(".el").attr("myattr");
var hasclass = $(".el").hasClass("myclass");
var height = $(".el").css("height");

// DOM APIによるクラス・属性・スタイルの読み込み
var classList = document.querySelector(".el").classList;
var domAttr = document.querySelector(".el").getAttribute("myattr");
var domHeight = document.querySelector(".el").style.height;

　要素数自体を取得している場合も読み込み処理に分類されるでしょう。

Read/読み込み処理 - 要素数の取得

// jQueryによる要素数の取得
var length = $(".el").length;

// DOM APIによる要素数の取得
var domLength = document.querySelectorAll(".el").length;

Event/イベントハンドリング

　クリック・入力といったイベントに応じて他の処理に繋げる処理です。

Event/イベントハンドリングの例

// jQueryによるイベントハンドリング
$(".el").click(function() {
  eventHandler();
});
$(".el").on("click", function() {
  eventHandler();
});

// DOM APIによるイベントハンドリング
document.querySelector(".el").addEventListener("click", function(){
  eventHandler();
});