複雑なコードはバグを含みやすくなります。インデントは浅い方が良いですし、関数は短く機能は単機能になっている方が良いでしょう。そうした複雑性の基準はどうやって設けたら良いでしょうか。 一つのアイディアとして使えそうなのがjs2flowchart.jsです。JavaScriptのコードをビジュアル化し、フローチャート化してくれます。

js2flowchart.jsの使い方

左側がコード、右側がそれをビジュアル化したチャートになります。

コードを記述すると、それがリアルタイムに反映されます。

フローチャートがあると、より内部実装の理解が進むかも知れません。そして、それによってどれくらい複雑な処理を行っているかも分かるでしょう。複雑な処理を分割したり、関数化していくことで、よりシンプルな実装が実現できるようになるでしょう。

js2flowchart.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Live code editor Bogdan-Lyashenko/js-code-to-svg-flowchart: js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart. Learn other’s code. Design your code. Refactor code. Document code. Explain code.