ITエンジニア/デザイナ向けにオープンソースを毎日紹介

システムが大規模になるとファイルを分割し、各機能が分割して管理されるようになります。一つのファイルで長大なコードが書かれているよりも分かりやすいですが、定義元がどこで、何の変数を見ているのか分からなくなることもしばしばです。

そこで使ってみたいのが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)です。

GitHub - Bogdan-Lyashenko/codecrumbs: Learn, design or document codebase by putting breadcrumbs in source code. Live updates, mu

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2