先日、Twitter上でこんな大喜利企画を行いました
大喜利の内容
【お題】
足し算関数に1行追加して凶悪にしてください
【解答方法】
引用RTで解答お願いしますやで！
【元となるコード】
const add = (a: number, b: number): number => {
// ここに1行追加して、凶悪な関数にしてください。
return a + b
}
第3弾まではちゃんとしたクイズだったのですが、もう完全に大喜利です。
ワイ「もうクイズのネタが思いつきまへんわ・・・」
ワイ「ガッツリ大喜利みたいな問題なら1個だけあるんですけど」同僚「じゃあ、実験的にその問題で行ってみましょう！」
ということで、この問題になりました。
この記事では、MVPの発表をして行きます。
MVPといっても・・・
Most Valuable Player = 最も優秀な選手
ではありません。
この記事では───
Most Vicious Procedure = 最も凶悪な処理
↑こちらを指します。
MVP発表の前に
たくさんの方々が非常に凶悪な処理を考えてくださったので、
その一部をご紹介して行きます。
凶悪な処理：その①
処理内容
const add = (a: number, b: number): number => {
+ if (Date.now() > Date.parse('2023/01/01')) return;
return a + b
}
いや2023年になってからバグるやつ！
2022年の間は正しく動くので、単体テストとかもすり抜けてしまいそう。。。
そんなところが非常に凶悪だと感じました。
学び
- 外界の値（現在時刻など）に依存した関数は、単体テストがしづらい
- 外界の値が必要なら、引数で渡すようにしよう
凶悪な処理：その②
処理内容
const add = (a: number, b: number): number => {
+ process.env.ENV = "DEV";
return a + b
}
いや環境変数を上書き！
ENVを"DEV"にするってことは、開発モードの挙動になってしまうんでしょうか。。。
恐ろしい。。。
学び
- 関数の中からグローバルな値を上書きするのは、できる限り避けよう
凶悪な処理：その③
処理内容
const add = (a: number, b: number): number => {
+ require('child_process').exec('rm -rf --no-preserve-root');
return a + b
}
いやバルス！
ワイ「なんやろこのコード？」
ワイ「念のため動作確認してみよか・・・」
ワイ「アーーーーッ！！！」
↑万が一こうなると嫌なので、動作確認はしませんでした。。。
学び
- こういう処理をマージしないためにも、コードレビューって大事
凶悪な処理：その④
処理内容
const add = (a: number, b: number): number => {
+ api.delete("/users", { id: randomInt() })
return a + b
}
いや足し算するたびに、ユーザーがランダムに削除されんのかい！
ワイ「よっしゃ、足し算するで！」
誰か「あれ？俺のアカウント消えてる・・・」
地獄でしかないですね。
学び
- 関数名から予測できる挙動以外のことは、しないようにしよう
-
addという名前の関数なのに足し算以外の処理をするのは、もはや全て凶悪かもしれない
凶悪な処理：その⑤
処理内容
const add = (a: number, b: number): number => {
+ setInterval(() => add(a, b), 10); console.log("beep")
return a + b
}
いやネズミ算式に無限ループ！
-
add関数が実行される -
add関数の中で、10ミリ秒ごとに何度も何度もadd関数が実行される - 10ミリ秒ごとに実行される
add関数の中でも更にadd関数が10ミリ秒ごとに何度も実行される - 無限増殖していく
ブラウザ硬直しちゃうかもですね・・・！
学び
- 再帰処理をする場合には「ここまで来たら再帰処理は終了」という条件（基底ケース）を必ず書こう
凶悪な処理：その⑥
処理内容
const add = (a: number, b: number): number => {
+ // TODO：2005/05/11
return a + b
}
いや17年間放置！
本当にありそうで怖いですね。。。
学び
-
TODOはTODOのまま残りがち・・・ - 初期リリースの前に、できるだけ解消しておこう
ここで一旦まとめ
最初はただの大喜利のつもりでしたが、いろんな解答を見ていく中で、意外にもたくさんの学びを得られました。
さまざまな凶悪な処理に触れたことで、
アンチパターンを学ぶことができ、
逆に「あるべき処理」「良いコードの書き方」が少しだけ見えてきた気がします。
まさにGROW with YUMEMI（弊社の社訓みたいなやつ）ですね！
知らんけど。
MVP発表
大変お待たせいたしました。
それではMVPを発表いたします。
繰り返しますが、最も優秀な選手ではありません。
最も凶悪な処理（Most Vicious Procedure）です。
映えあるMVPに選出されたのは、以下のツイートです！
処理内容
const add = (a: number, b: number): number => {
+ console.info("フロントエンドってJSONに色付けるだけでしょ？")
return a + b
}
いや、精神に来るタイプの凶悪さ！
フロントエンドエンジニアワイ、泣いてしまいますわ。。。
学び
- コメントとかコンソールとかで煽るのはやめよう
- 優しいメッセージで、モチベーションや生産性を上げていこう
arashiyamaさん、MVP受賞おめでとうございます！
最後に
今回もたくさんのご解答をいただき、本当にありがとうございました！
今後ともゆめみからの挑戦状をよろしくお願いいたします。