Codecrumbs - システム理解を高める可視化システム
システムが大規模になるとファイルを分割し、各機能が分割して管理されるようになります。一つのファイルで長大なコードが書かれているよりも分かりやすいですが、定義元がどこで、何の変数を見ているのか分からなくなることもしばしばです。 そこで使ってみたいのがCodecrumbsです。コードに印をつけることで、コード同士の関連性が可視化されます。
Codecrumbsの使い方
デザイン例です。
折りたたむこともできます。
フローチャートで確認することもできます。
コードには以下のような独自のコメントを定義する必要があります。
function authenticate(provider) {
return dispatch => {
//cc:signin#1;firebase sign in;+2;call to firebase with auth provider, proceed if success response
firebaseAuth.signInWithPopup(provider)
.then(result => dispatch(signInSuccess(result)))
.catch(error => dispatch(signInError(error)));
};
}
独自のコメントを覚えなければならないので、かなり敷居は高いです。しかしチュートリアルなどで一旦できあがったコードに対して追加することで、全体の見通しがよくなったり、学びやすくなると言った効果はありそうです。
CodecrumbsはJavaScript製のオープンソース・ソフトウェア（BSD）です。