高度に構造化されたテキストの読みやすさを向上させる方法
注：この質問では、ターゲットユーザーグループの 読みやすさ を増やす方法を探ります。
背景：大量のテキストを扱う場合、読みやすさは非常に重要です。一部のユーザー、プログラマーにとって、そのテキストはコンピューターシステムの「オブジェクト」を表します。これらのオブジェクトは、しばしば階層構造を持っています（つまり、オブジェクトには他のオブジェクトとの親子関係および兄弟関係があります）。従来、これらの「ネスト」関係は、左マージンを増やして、どのオブジェクトがどのオブジェクトに属しているかを示すことでユーザーに伝えられていました（子オブジェクトは親よりもインデントが大きく、兄弟は互いに同じレベルで始まります）。
問題：一方で、深くネストされたコードは読みにくいです。一方、コードを理解するには、ネストレベルを視覚化する必要があります。 code/htmlをネスト解除するには多くの労力が必要です。これにより、読みやすさが向上するだけで、実際のコードの有効性や精度などは向上しません。
インデントを調整する以外に階層を通信する方法はありますか？
いくつかの色、形などを使用して読みやすくするための最初の試みとともに、サンプルテキストの小さな断片を提供します。誰かがより良い仕事をできると確信しています。一緒にブレイクスルーを作ろう！
空白を使用した通常のネスト（ テキストバージョン ）：
試行1：マージンの入れ子を表示：
試行2：レベルを表示するコードにシェイプを追加します：
試行3：塗りつぶされたオーバーレイを境界領域マーカーで置き換えます： 
"問題：一方で深くネストされたコードは読みづらい。他方では、コードを理解するためにネストレベルを視覚化することが必要である。実際のコードの有効性、精度などではなく、読みやすさを向上させます。」
最初のこと：「ネスト解除」は読みやすさを確実に向上させることを知っていますか？つまり、あなたまたは他の人が、プログラムが実際に難しいことを理解するだけでなく、インデントが問題を引き起こすことを示すテストを実行しました。うまく整列させれば、テキストを読む方が一般的には簡単かもしれませんが、プログラムは別のやかんです。コードは必ずしも1つずつシーケンシャルではありません。条件、コールバックなどがあり、コード構造がシーケンスと同じくらいの役割を果たすことを意味します。
通常、プログラムコードはインデントされたツリー（空白を使用）として表示され、最初の方法と同様に、構造のネストレベルを示します。空白をカラーコーディングに置き換えようとすることで、定量的情報（位置、この場合は水平成分）の最も強力な知覚的キューを、より有用であると一般に認められているカラーコーディングキューに置き換えようとしています。非定量的データ（つまり、カテゴリデータ）の場合。次の2つのソリューションでは、コードが完全に左揃えされている場合でも、余白の色分けされたバーをインデントすることにより、暗黙のうちにその事実を受け入れました。
この過去の作業を見て、あなたがしていることが実際に良いアイデアであるかどうかを確認してください：
プログラムのインデントとわかりやすさ著者：リチャードJ.ミアラ大学メリーランド大学カレッジパークジョイスA.マッセルマン大学メリーランド州、カレッジパークファンA.ナバロ大学メリーランド州、カレッジパークベンシュナイダーマン大学メリーランド州、カレッジパーク
http://doi.acm.org/10.1145/182.358437
彼らの発見は：
インデントの4つの可能なレベル（0、2、4、6スペース）に加えて、2つのスタイルのインデントスタイル（ブロックと非ブロック）が使用されました。経験者と初心者の両方が使用されました。ブロックスタイルは違いを生じませんが、インデントのレベルはプログラムの理解に大きな影響を与えました。 （2〜4個のスペースがプログラム理解度の平均スコアが最も高かった。）プログラムの理解度とユーザーの満足度を高めるために、適度なレベルのインデントを使用することをお勧めします。
ほとんどの場合、インデントはゼロであると評価されています。それは確かに古い紙ですが、そこにはそれほど良い/新しいものはありません
私はプログラミングを勉強している人として、それを広く適用できる問題ではなく、ユースケースのサブセットに影響を与える問題だと思います。
たとえば、オブジェクト指向言語（Java、Kotlin、C++など）は、コードをアトミック関数に分割するのに適しているため、非常に深くネストされた要素がある場合は、コードを再構築するだけで済みます（そして、それのための）。
さて、XMLのようないくつかのマークアップ言語で、あなたはポイントを持っています。
覚えておいてください、あなたが持っているどんな解決策も特定のユースケースに合うだけになります。 OOPでは、ネストを減らすことは機能であり、バグではありません。
階層を表示する別の方法については、頭の上から：
- タイポグラフィ。タイプを使ってできることはたくさんあります。標準文書の見出しを考えてください。 サイズを変更したり、色と不透明度を調整したり、ケースを変更したり、さまざまなフォントの重みで遊んだりできます。 。色と不透明度を除いて、他のインジケーターがうまく機能するとは思いませんが、試してみるのに害はありません。
- Spacing。階層レベルごとに異なるマージンを使用できます。
- エンクロージャー例線と形状を使用してセクションを描きます。
- Interaction。インタラクティブ機能で遊びます。相互作用により、インデントを手掛かりとして削除することなく、深くネストされたコードをより使いやすくすることができます。頻繁に使用されるパターンの1つは折りたたみ可能なセクションですが、ここで止める必要はありません。ここにリストされている他の階層インジケーターはどれもインタラクティブにすることができます。例えば：
- Color。アクティブなラインとその子はその色を維持できますが、残りは淡い灰色になります。
- Spacing。アクティブなセクションは垂直マージンで区切ることができます。
- 個別の領域。これは対話性と結びついています。列を使用して階層を表示することができます。最初の列は最上位レベル、2番目の列はその子、そしてそれ以降です。別のページ、ダイアログ、または展開可能なセクションに子を表示できます。
最後に、ゲシュタルト心理学についてもっと読むことをお勧めします。アイテムを精神的にグループ化する方法を扱います。
これが単にページ上のテキストである場合、フォントサイズとテキストの行間の間隔を変更する通常の規則は、階層と構造のレベルを処理するのに十分以上です（確かにそれの一部を適用することもできます） ）。ただし、この例では、階層の最上位のコンテンツが、より深くネストされたコンテンツよりも重要であるとは限りません（たとえば、すべてをラップするだけです）。
あなたが提供した例を使用して、階層でコンテンツを視覚化するときに何が重要であるかを説明するためにそれらがどのように改善できるかを見てみましょう。
通常の空白
ここでの問題は、空白で表される唯一の階層はネストの深さであり、ページの階層ではないということです。これは、各行を調べて構造を理解することによって解釈する必要があり、さらに区別するのがより難しくなります。ネストのレベルが増えるにつれて、コードに階層が導入されます。明らかに、視覚化する次元が多く、それを表現する方法があるため、より多くの要素を導入する必要があります。
入れ子をマージンで表示
垂直バーを使用して同じ階層レベルでコードを表すことは、空白を使用するだけの問題に対処する方法であり、色を追加すると、異なるレベルをさらに区別しやすくなります。ただし、これは深くネストされたレイヤーが多すぎると簡単にスケーリングできないソリューションであり、階層のセマンティクスではなく、ネストの深さを特定するのに役立つ問題のみを解決します。
形状と境界マーカー
マージンのバーですでに行われていることにより、はるかに多くの価値が追加されることは本当にわかりません。実際、これはおそらく、視覚的表現をオーバーロードして、処理する必要のある視覚的情報の量を実際に増やす例です。追加のメリットがあまりない。これを以前のソリューションと比較すると、色、形、境界線をコードに混ぜ合わせるよりも、コードを見る必要なしに階層情報を処理する方が簡単であることがわかります。
代替
マージンを表す垂直バーを使用して階層を表示します。これは、階層を表すための最小の方法だと思うからです。コードのブロック（垂直バーと形状/境界線の両方）をカラーコーディングするアイデアが好きですが、階層ではなくHTML要素のタイプと一致させる必要があります。これにより、2つの異なるタイプのコードをエンコードできなくなります。同時に情報。この例では、同じ階層の2つの要素が同じ色である可能性があるが、縦棒の深さが異なる場合に、異なる階層で同じ要素であることを示すために、異なる色でコード化されています。
実際、コンテンツの構文が指定されているときにネストされたコードを展開したり折りたたんだりできるHTMLエディター（または一般にテキストエディター）を見てきました。これらのエディターを使用すると、指定した階層レベルでコードを展開したり折りたたんだりできるため、コンテンツにアクセスするためのより効率的な方法になります（つまり、視覚化するだけでなく、階層内を移動できます）。
ティンマンによる不透明度の提案は非常に興味深いものです。これは、ネストの深さを示す方法と、ユーザーが関心を持っている領域にユーザーの注意を集中させる方法を提供するためです。しかし、固定された視覚的な合図ではなく、いくつかの相互作用を導入できます。これを現在の階層のレベルに関連させて、階層を下に移動すると下のレベルの不透明度が下がるようにします。
1つのオプションは、コードブロックに「折りたたむ」および「展開する」機能を使用することです。このようなもの - 
左マージンを使用してコード階層を示すことは、効果的であるため一般的です1、とはいえ、作業が面倒になる可能性があるというあなたの見方には共感します。したがって、私たちが試して解決する必要がある問題は、他の方法で階層を説明することではなく、このコードをナビゲートする手間を軽減するツールを提供することだと思います。
Visual Studioには、ユーザーがスクロールバーにカーソルを合わせたときにコードのプレビューを表示するオプションが用意されています。このプレビューは自動的にコードをシフトし、でホバーされた領域に最も効果的な「フィット」を提供します。
この同じ自動調整メカニズムを組み込んで、エディターで現在表示されているコンテンツに基づいて左マージンを自動的に減らすことができます。
または、ユーザーがこの動作をにリンクできるようにすることもできます。 hotkey +クリックアクション水平スクロールバーを自動的に調整して、選択した行の先頭をエディターの左端に配置します。
たとえば、このショートカットを Shift +クリック：
<div>
<ul class="list">
<li> <!-- Shift-click here -->
Hello World
</li>
</ul>
</div>
Scrollbar position:
[<][=====] [>]
<li>行はウィンドウを自動スクロールして表示します
class="list">
<li> <!-- Shift-click here -->
Hello World
</li>
>
Scrollbar position:
[<] [=====] [>]
1 出典：個人的な意見/経験。