【個人開発】フォルダ構成図を作るWindowsアプリを作った #C#

個人開発で、テキスト形式の樹形図を編集する「アスキーツリーメーカー」を作りました。exeファイル単体で機能するWindowsアプリになります。直感的な操作で樹形図を編集できる ように工夫しました。フォルダ構成図 の作成を支援します！

アプリの使い方

1. 樹形図を編集する

ボタン操作で 直感的に樹形図を編集できます。

子ノードを追加

選択したノードを親としたとき、子供にあたるノードを追加することができます。

兄弟ノードを追加

選択したノードと兄弟関係にあるノードを追加することができます。

ノードを移動

選択したノードを上下に移動させることができます。
ノードの移動は、親が等しい、かつ親からの距離が等しいノード間でのみ可能です。

ノードを削除

選択したノードを削除することができます。
選択したノードに他のノードがぶら下がっていた場合、それらもすべて削除されます。

2. テキストベースの樹形図を出力

作成した樹形図はテキストベースの樹形図へ変換でき、すぐにコピペできます。

テキスト形式の樹形図の枝の長さは、ファイルタブの「設定」から調節することができます。

枝の長さを変えてみると、以下のような見栄えになります。

枝の長さ: 5

root
├───── bin
├───── etc
├───── usr
│      └───── local
│             └───── bin
└───── lib

枝の長さ: 0

root
├ bin
├ etc
├ usr
│ └ local
│   └ bin
└ lib

3. ファイル保存、読み込み

作成した樹形図をXMLファイルとして保存しておけば、再度編集することができます。

（随時更新）v1.0.0 以降の追加機能

ここでは v1.0.0 リリース後に追加した機能について随時記述していきます。
この場を借りて Contributor の皆様にお礼申し上げます。

フォルダ構成から樹形図を生成（v1.1.0 以降）

フォルダ構成を表す樹形図を自動で生成できるようになりました！

ファイルタブの 「フォルダから樹形図を生成」 を押下してください。

起点となるフォルダを選択してください（下図では root）。

OK を押下すると、フォルダ構成を表す樹形図が生成されます。

コピペのボタンを押下すると、テキスト形式のフォルダ構成図が得られます。

作成されたフォルダ構成図

root
├── bin
├── etc
│   ├── Debug
│   │   └── debug.txt
│   └── Release
│       └── release.txt
├── lib
└── usr
    └── local
        └── bin

開発について

ここでは、本アプリの開発に用いた技術や設計に関することについて記述します。

使用技術

言語：C#
開発環境：Visual Studio Community 2022
開発フレームワーク：.NET Framework 4.8.1

樹形図の編集に使えそうな TreeView というツールが用意されていたため、こちらに決定しました。TreeViewのおかげで、樹形図の編集機能やテキスト変換のアルゴリズムは簡便に実装することができました。

開発工数と所感

約100 時間 で作成しました。
.NET Frameworkを用いたWindows Formアプリの製作は学習コストが低めで、私のようなオブジェクト指向初心者にはもってこいだと思いました。加えて、初歩的な質問はChat-GPTがすべて答えてくれるので、特段詰まることなく実装を進めることができました。

経験が少ないこともあり、設計には時間を要しました。そもそも何をクラスにすればいいか、どんなメソッドを持たせればいいか、イベントをどう伝えるかなど、納得のいく設計になるまで時間がかかりました。本アプリを作る中で、技術書の中でも評判の高い『良いコード/悪いコードで学ぶ設計入門』（著：仙塲大也）を拝読し、設計のヒントを得ました。良い例と悪い例が多く記載されているため、リファクタリングを実践しやすく、大変有益な本でした。

今後も設計に関するインプットと実際の開発を通じたアウトプットの機会を設けて、設計スキルに磨きをかけていきたいです。

クラス図

設計の勉強も兼ねて、クラス図を作成しました。すべてのクラスを1枚の図にまとめると訳が分からないので、機能ごとに分割して記述します。図は astah を用いて作成しました。

注意事項

クラス図を描くのが初めてなもので、色々間違いがあるかと思いますがご了承ください（保険）
戻り値は省略しています
下線を引いたものは static 属性です

樹形図の編集機能

樹形図のノードを編集する機能を NodeEditor クラスに凝集させました。ノードのラベルが空だとクリックしにくくなるなど都合が悪いので、NodeLabel なるクラスを用意し、空の場合は「テキストを入力」が設定されるようにしています。
点線の矢印は依存 ¹ 関係を表します。

「NodeEditor が NodeLabel に依存する」という関係になります。矢印の向きを混乱しがちなのですが、"NodeEditor depends on NodeLabel." のように英語で考えると、主語が始点、目的語が終点になるのでわかりやすいです² ³ 。

テキスト形式の樹形図への変換機能

テキスト形式の樹形図へ変換する機能は TreeConverter クラスに凝集させました。

変換後の文字列は ConvertTreeToText メソッドからもらいます。引数の textFormatTreeDesigner はテキスト形式の樹形図のデザインを決める役割を果たします。デザインはユーザの設定した枝の長さ TextFormatTreeBranchLength によって決まります。枝の長さを int 型ではなく、TextFormatTreeBranchLength 型として定義することで、範囲外の値が代入されるのを防ぐことができます ⁴ 。

ファイル関連の機能

XMLファイルの読み込み、書き出し操作、保存状態の監視などは FileManager クラス⁵に凝集させました。XMLファイルから樹形図への読み込みは ImportXmlFile クラスが、XMLファイルの書き出しは ExportXmlFile クラス⁶が行います。

EditingFile クラスは、今編集している樹形図が保存済みなのか否かを管理します。これにより、アプリのウィンドウの上部に表示されている保存状態の表示切り替えが可能になります。

↓ 初期状態から編集中へ

なお、初期状態は保存先のパスも存在しないため、編集中のファイルが定義されているかを返す IsNotDefined() のようなメソッドも用意しています。

おわりに

個人開発で、テキスト形式の樹形図を編集する「アスキーツリーメーカー」を作りました。直感的な操作で樹形図が作成できるように工夫しました。フォルダ構成図 を作りたいときなどに、是非とも使ってみて頂けますと大変嬉しいです！

設計については至らぬ点が多々あるかと思います。ご指摘等あれば、記事のコメントなどにいただけますと大変助かります！

ここまでお読み頂きありがとうございました。
もしよければぜひ、いいねやリツイートなど頂けるととても励みになります！！
よろしくお願いいたします！！！

Qiita【新人教育資料】第3章 UMLまでの道〜図種類紹介とクラス図の解説編〜
クラス図の基本についてわかりやすく解説されています。 ↩
Qiita【あなたの知らない世界シリーズ】UMLの依存の方向性は、こう覚える
UML図が英語をベースとしているため、S+V+Oで考えると矢印の向きが把握しやすくなることを指摘しています。 ↩
IBM Dependency relationships
具体例で "the client uses or depends on the supplier." と書かれています。 ↩
p.37 仙塲大也(2022)『良いコード/悪いコードで学ぶ設計入門』
不正状態から防護するようなコンストラクタを「完全コンストラクタ」と呼びます。今回実装したクラス TextFormatTreeBranchLength はコンストラクタで不正値をはじくようになっていますが、Update メソッドで値を更新できるため、いわゆる"完全コンストラクタ"ではありません（それでもTextFormatTreeBranchLengthの値を参照するため、不正状態にはならないはず...）。 ↩
p.229 仙塲大也(2022)『良いコード/悪いコードで学ぶ設計入門』
一般に「～Manager」という名前のクラスは広い意味で捉えられる傾向があり、クラスが巨大化しがちなので、あまり良しとされません。ですが、ここでの責務はそこまで多くないので良しとしました。 ↩
ExportXmlFile、ImportXmlFile クラスは、名前がメソッド名みたいでちょっと微妙ですね...。 ↩