技術ブログやドキュメントを書く際に役立つ【文字】

はじめに

ドキュメントやブログ記事を作成する際に、空白文字やディレクトリ構造をわかりやすく表現することは重要です。

本記事では、空白文字、タブ、改行の可視化方法とディレクトリ構造やフローチャートの表現方法について説明します。

空白文字の可視化

スペース（空白）

通常の空白文字は可視化しにくいため、以下のように明示することがあります。

␣（Unicode の可視空白記号）

表記例

hello␣world!

タブ

タブは、テキストエディタや表示環境によって異なる幅を持つため、明示的に表現することが重要です。

→ や ⇥（タブを示す記号）

表記例

column1→column2→column3

⇥ Level 1
⇥⇥ Level 2
⇥⇥⇥ Level 3

改行の可視化

↵（キャリッジリターンまたは改行を示す記号）

表記例

Newline↵
character.

ディレクトリ構造

ツリー構造の記号

垂直線: │ または | を使用してディレクトリ間の縦の接続を示します。
横線と分岐: ─, ├, └ を使用してディレクトリやファイルの枝分かれを示します。
スラッシュ: / を使用してディレクトリとファイルを区切ります。

表記例

$ tree project
project/
├── src/
│   ├── main.py
│   ├── utils.py
│   └── config/
│       ├── settings.py
│       └── dev/
└── README.md

インデント

インデント: スペースまたはタブを使用して階層を示します。

表記例

project/
    src/
        main.py
        utils.py
        config/
            settings.py
            dev/
    README.md

表やフローチャート

表やフローチャートを作成するには以下の文字を使用して表します。

文字	説明
┌	上左角
┐	上右角
└	下左角
┘	下右角
─	水平線
│	垂直線
├	左分岐
┤	右分岐
┬	上分岐
┴	下分岐
┼	交差点

表記例

┌───────────┬────────────┬───────────┐
│ Column 1  │ Column 2   │ Column 3  │
├───────────┼────────────┼───────────┤
│ Value 1.1 │ Value 2.1  │ Value 3.1 │
├───────────┼────────────┼───────────┤
│ Value 1.2 │ Value 2.2  │ Value 3.2 │
└───────────┴────────────┴───────────┘

表記例

┌────────────┐
│  Start     │
└─────┬──────┘
      │
      v
┌─────┴──────┐
│  Process 1 │
└─────┬──────┘
      │
      v
┌─────┴──────┐
│  Decision  │
│  Yes / No  │
└─────┬──────┘
      │
      v
┌─────┴──────┐
│  Process 2 │
└────────────┘

まとめ

これらの文字を適切に使用することで、ドキュメントやブログ記事の読みやすさと理解しやすさを向上させることができます。