プログラマだけど異世界の開発会社に転生した

最適化（オプティマイゼイション）

ジャムス「どうもページの表示が遅いんだ。多分Javascriptが重すぎるんだよ。どうしたらいいんだろう？」

エイダ「しょうがないわね。ふーん。まずJqueryのappendが多いわ。DocumentFragmentやinnerHTMLをもっと効果的に使わないと」

ジャムス「ふーむ」

と言ってジャムスはTeraPadを開くとjsファイルを編集しはじめた。エイダがすかさず口は挟む。

エイダ「待って。前のファイルをちゃんと残しておかないと。」

ジャムスはうっかりしていたとばかりにエクスプローラーで、main.jsをクリック。CTRL+Cでコピーすると、流れるような動きでCTRL+Vを押す。すぐさま「main.js のコピー」ができあがる。

エイダが呆れて言った。

エイダ「それじゃ、いつの履歴かわからないじゃない！。今日の日付main.1281落葉の月21の日.jsとしてリネームしておくこと！」

ジャムスは感心したようにうなり声を上げると、その太い指でキーボードをパチンパチンと叩いてそのようにした。

ジャムス「これでいいな。」

ようやくjsの編集にとりかかったジャムスは、所々つっかえながらだが、JQueryでappendされていた部分を文字列連結に書き換え、li要素のinnerHTMLを代入するように変更すると、それをDocumentFragmentにappendChildしてから、DOMツリーに挿入するようにコードを変更した。

ジャムス「前のコードとのベンチをとってみよう。おお！30msも向上したぞ！」

エイダ「やれやれよね。まだまだコードに改善の余地はあるわ。先に進むわよ」

といって、ファイルのリネームを始めようとする彼らに僕はおずおずと言った。

僕「あの…gitは使わないんですか？」

ジャムス「ギット？」

エイダ「我異亜（ここ竜骸世界で言う現代社会のこと）で使われている履歴管理技法ね。名前は聞いたことあるけど…」

僕は、すぐにコンソールを開いて、叩いた

$ git init

$ git add . && git commit -m 'first'

エイダ「な、なにをしているの！？」

僕「gitの初期化ですよ。」

ジャムス「この黒い画面は魔術師の使うものだ！使い方によってはシステム全体を破壊しかねない威力があると言われてる！」

やれやれ、この世界の住人はコンソールも知らないらしい。僕は構わずにmain.jsを編集し、ジャムスの最適化したmain.jsで上書きする。

エイダ「それじゃ、オリジナルのmain.jsは消えちゃうわ！？」

$ git add . && git commit -m 'modify for optimization(faster) by jyams'

と入力した。main.jsはジャムスの書いたものになったので、それを修正しはじめる。

まず文字列連結ではなく、文字列を配列に代入する。配列をjoinした結果をDocumentFragmentを介さず親要素のinnerHTMLに直接代入する。

僕「オリジナルから、50msの節約ですね」

エイダ「…やるじゃない。」

$ git add main.js && git commit -m 'modify for optimization(faster)'

僕は変更をコミットした。

エイダ「さっきから、黒画面で何をしているの！？私だって一応異端審問官の一人なのよ？危ない真似をするなら貴方を逮捕することだってできるんだからねっ！」

僕「ちっとも危ないことはしていないよ」

$ git checkout HEAD^ main.js

と僕はさらに「黒画面」を叩く

僕「main.jsをみてごらん」

エイダ「あれ？これジャムスのコード…」

$ git checkout HEAD^^ main.js

エイダ「オリジナルのコードだわ！」

僕「こういうふうにgitを使えば、無駄なバックアップファイルなんて使わないで履歴を管理することできるんだよ。」

エイダ「そんな！そんな方法があったなんて！」

ジャムス「・・・」

僕「どうかしたのかジャムス？」

ジャムス「俺は信用できないな。日付リネームって方法はよ、確実にファイルが残っている。だが、お前のいうgitってのは実際にファイルが残っているわけじゃねえ。戦場（納期前）じゃ
実物のコードがすべてだ。どんな手品か知らねえけどよお、履歴が.gitディレクトリのどこに隠れているのかわかんねえような、そんな代物は実戦じゃ使えねえな」

といって腰に差していた、ハンドアックスを抜き払うと、切れ味を確かめるように刃先を僕に向けた。

僕「ふう」

僕は溜息をついた。新しいものに反感を持つ人間はどこの世界にでもいるものだ。

僕「ジャムス。君の言うことには一理ある。全員がタイムスタンプ付きのリネームで乗り切っているワークフローにgitのようなシステムが馴染むとは思っていない。」

当然だ、と腕を組んで得意になるジャムス。しかし僕は決定的な一言を発するつもりだった。

僕「だが、敵ーイスタリアの魔族連合がgitを使っていたとしたら？」

エイダ「っ！」

僕「僕の世界では、開発環境の改善は日進月歩だった、リネームバックアップ、CVS,Subversion,色々な方法が試されては失敗してきた。その中で生き残ったのがgitだ」

僕「ジャムスがgitの力を侮るのも無理はない、だが、これだけは言っておこう。僕が使ってみたgitの機能はgitの機能の1%にも満たない！」

ジャムス「1％だとっ！？」

僕「ああ、ブランチ機能、レポジトリソフトウェアを使ったプルリクエストなどのgit-flow、CI環境との連動。gitは巨大なシステムの開発に欠かせないものになっている」

エイダ「それを魔族連合が使ってきたら…」

ジャムス「俺たちは…」

僕「まあgitの話は後でちゃんとしてやろう。それよりも肝心なのはmain.jsの最適化だろ？まずプロファイルはとったのか？」

エイダ「プロファイル？」

僕「どこが本当に遅いのかっってことを計測することだよ。」

エイダ「それならJavascriptよ。特にこの画像を含んだリストの描写に問題があるわ」

僕「それは計測したのか？」

エイダ「ページの全体の表示にかかる時間は3230msecよ。早いとは言えないわ」

僕「そうじゃない。リスト描写に何msecかかっているのかだ」

エイダ「そんな細かいことまでわかるわけないでしょ！」

エイダはムキになって口を尖らせた。色白の肌がすっかり紅潮している。

僕は黙って、chromeのデベロッパーツールと、console.time命令を埋め込んで簡易的なプロファイリングを行った。結果はざっと以下になった。

• ページのパース 0.2sec
• ajaxロード×20 2.0sec
• リストの描画×2000 1.2sec

エイダ「ほら、リストの描画が遅いのは間違いないのよ。そこでブラウザの描画止まるのが目視できるから。」

僕「それ以上に問題があるのがajaxだろ。なぜ1ページで20回もajaxロードしなくちゃならないんだ？」

エイダ「それは…リストの情報ソースになっているxmlファイルが20ファイルに分かれているからよ…」

ajaxロードにおけるHTTPネゴシエーション（今時ならパイプラインで処理してるにしても高コストだ）、パースコスト、諸々を説明するのも面倒だったので、僕は、一つのphpファイルを記述した。
それは、20個のxmlを順に読み込み、若干の加工を加えて、連結するだけのスクリプトになった。

ajaxで指定されていたxmlはこのphpを参照するように設定する。そして20個のxmlを一気に描画するのだ。

結果は以下になった。

• ページのパース 0.2sec
• ajaxロード×1 0.5sec
• リストの描画×2000 1.2sec

僕「これで、1.5secつまり1500msecの節約になった。」

エイダ「…」

ジャムス「…」

僕「さっき君たちが必死に節約した時間は何msecだったかな？」

エイダ「もういい…私の見立てが間違っていた。と言いたいわけでしょ？」

僕「それはそうだが、本質はそこじゃない。『計測しない最適化は無意味』だということなんだ。王級筆頭魔術師である君なら、下級魔術師を指揮することもあるだろう？そんな時、一番重要なのは何だ？」

エイダ「それは、皆の士気よ。さらにいえば、指揮官の私に対する信頼と言ってもいいわね」

僕「信頼とは何から生まれる？この人についていけば、必ず勝てる。そういう確信だろう？もし指揮官が正確な情報を持っていなかったら？下級魔術師でもこの戦いは危ういと思うんじゃないか？」

エイダ「それは…」

僕「君は正確な情報を得る努力を怠った。だから無駄な戦闘をジャイムに強いることになったんだ。」

エイダ「…」

エイダはうつむいたまま、何も言わなくなってしまった。屈辱からなのか怒りなのか肩が細かく震えているようにも見える。

僕「エイダ。次に進もう」

僕は、さらにリストの描画を改めた。表示されている領域だけリストを描画し、画面外のリストは空白として描画。もしその空白が画面内に入ったら、描画処理が走る。それなりに高度な技法だが、実装自体は彼らに理解できなくもないだろう。

• ページのパース 0.2sec
• ajaxロード×1 0.5sec
• リストの描画×20 0.02sec

ジャイム「1sec以下で最初の表示が出るようなったぞ！奇跡だ！」

僕「肝心なことは計測すること、そして、DOMレンダリングは愚直だということ、その二つだけだ。君たちが知らなかったのはその二つだけなんだよ」

エイダ「そうね…私は間違っていたわ。直感や、慣習で、皆を危険な目に会わせていた…小手先の技術を磨くだけではきっとこのことに気づくことはなかったと思う」

顔を上げたエイダの目は希望に満ち溢れてキラキラと輝いていた。

僕「色々、厳しいことを言ったかもしれないけど」

さえぎるようにエイダは言った。

エイダ「いいえ、あなたは大切なことを教えてくれた…覚悟を決めることができた。あなたを大魔法院主任研究員に任命するわ。私の傍にいて。また私が過ちを繰り返さないように」

そう言ったエイダの視線が僕を直視する。僕はただ、微笑むことしかできなかった。でも今は、それで充分だとも感じたのだった。

続き↓
megamouth.hateblo.jp

デスマーチからはじまる異世界狂想曲(1)<デスマーチからはじまる異世界狂想曲> (ドラゴンコミックスエイジ)