ポートフォリオページ
ポートフォリオページ
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/PlantUMLでクラス図を作成！Swiftで学ぶ初期設計の可視化

PlantUMLでクラス図を作成！Swiftで学ぶ初期設計の可視化

Swiftを例にPlantUMLでクラス図を作成する方法を解説。初期設計の可視化や既存コードのクラス図自動生成の手順も紹介！

はじめに

この記事は、KIT Developer Advent Calendar 2020 初日の記事になります！

クラス図を書く際に使うツールに関して

クラス図を作成する際に便利なツールとして、様々なものがあります。
簡単にいくつかご紹介していきます。

PlantUML

VSCodeの拡張で、リアルタイムプレビューしながらプログラムベースでクラス図を書くことが出来ます。
CUI上で簡潔する点がとても良いです。また、をGit等でバージョン管理することもできるため、チームで差分を共有しやすい側面もあります。

draw.io

Webベースの作図ツールでPNG, JPEG, SVGなどの画像ファイル・PDF形式で保存することもできます。
また、GitHubのファイルと紐づけて使用することも可能です。

GitMind

こちらもWebベースの作図ツールで、GUI上で用いることができ、クラス図の作成の他に、ブレスト・プロジェクト計画などでも使用できます。

PlantUMLを使えるようにする

Javaのインストール

コマンドを使っている理由は、コマンド経由でjavaを入れることでパスを通す必要がなくなるため、用いています。

VSCode上でダイアグラムを描画するためにをインストール

VSCodeにPlantUMLをインストール

以下の手順でインストールできます。
  • VSCodeを起動し、 +
  • と入力

PlantUMLの構文について

前提事項

以下のドキュメントより、可視性の定義など厳密にはUMLのクラス図記法に沿っていない部分があります。今回は各プロパティをそのままSwiftのコードに書き起こしやすいようにクラス図を可視化している旨をご了承ください🙏
本来はなど書かずにで表現します。
クラス図の構文と機能
report this ad report this ad クラス間の関係は次の記号を使用して定義されています : Type Symbol Drawing Extension <|-- Composition *-- Aggregation o-- これらのルールを知ることで、以下の図面を描くことができます: : にテキストを続けることによって、関係へラベルを追加することが可能です。 多重度を示す為に関係のそれぞれの側にダブルクォーテーション"" を使うことができます。 ラベルの最初または最後に を使って、他のオブジェクトへの関係を示す矢印を追加できます。 : に続けてフィールド名やメソッド名を記述すると、フィールドやメソッドを宣言できます。 システムは括弧をチェックしてメソッドとフィールドのどちらなのかを選択します。 波括弧 {} を使って、フィールドやメソッドをくくることもできます。 構文はタイプや名前の順番について非常に柔軟であることに注意してください。 {field} や {method} 修飾子を用いれば、構文によりフィールドやメソッドだと通常は解釈されるものを強制的に変更することができます。 メソッドやフィールドを定義するときに対応する項目の可視性を定義する記号を使用することができます。 コマンド skinparam classAttributeIconSize 0 を使用してこの機能を切ることができます。 静的または抽象的なメソッドまたはフィールドは {static} または {abstract} 修飾子を使用することで定義することができます。 これらの修飾子は行の始めまたは終りに使用することができます。 {static} の代わりに {classifier} もまた使用できます。 デフォルトでは,メソッドやフィールドは PlantUML によって自動再編成されます。メソッドやフィールドに独自の順序付けを定義するためのセパレータを使用できます。以下のセパレータが使用できます： -- ..
https://plantuml.com/ja/class-diagram
構文に関してはドキュメントの通りになるのですが、実際に初期設計を行う様子をイメージしやすいように、コードが公開されているABEMA iOS チュートリアルのタスク4 お気に入り機能を実装する際に新たに登場するプロパティを示すクラス図をPlantUMLで書いていこうと思います。
abema/abema-ios-tutorial-public
このプロジェクトは、ABEMA の iOS アプリ開発で用いられている開発環境やライブラリ、開発フローに慣れるためのサンプルプロジェクトです。 Xcode 11.3.x / Swift 5.1.x ツールやライブラリの導入は 開発をはじめる を参考にしてください。 チュートリアルの進め方 を参考に開発環境を整え、下記のタスクに取り組んでください。 master ブランチの実装には不具合があり、一部動作しない機能があります。 ⌘+ U でテストを実行すると、失敗している箇所があるはずです。 テストが通るように実装を修正してください。 セルにリポジトリの説明文を追加してください。 追加したロジックについてのユニットテストを追加してください。 APIClient は、時々エラーを返します。 エラーが返ってきたときにアラートを表示するようにしてください。 アラートを閉じたときに、データを再取得するようにしてください。 追加したロジックについてのユニットテストを追加してください。 以下の仕様を満たすお気に入り機能を実装してください、 セルか、セル上のボタンをタップしてお気に入りに追加/削除できるようにしてください。 同じセルは一度のみお気に入りに追加できるようにしてください。 お気に入りに追加したリポジトリのみを表示する機能を追加してください。 別のタブにするかフィルタを付けるかなど、表示方法は任意です。 アプリを再起動しても、お気に入りデータが消えないようにしてください。 Issue に仕様がある程度わかるような説明文を書いてください。 追加したロジックについてのユニットテストを追加してください。 以下のコマンドで、本リポジトリを Clone できます。 $ git clone https://github.com/abema/abema-ios-tutorial-public.git brew.sh に記載の手順に従って Homebrew をインストールしてください。 また、以下のコマンドで各種ツールをインストールしてください。 $ make
https://github.com/abema/abema-ios-tutorial-public#%E3%82%BF%E3%82%B9%E3%82%AF-4
以下のディレクトリに関するロジックに関するクラス図を示していきます。

Flux/Repository

Action, Dispatcher, Storeそれぞれに対して、新たに追加する必要があるプロパティを示している様子です。
Flux/RepositoryをPlantUMLで可視化している様子 | Flux/RepositoryをPlantUMLで可視化している様子
Flux/RepositoryをPlantUMLで可視化している様子 | Flux/RepositoryをPlantUMLで可視化している様子
上記のクラス図をPlantUMLで示すと
といった感じになります。

アレンジしている部分について

どのディレクトリに相当するのか分かりやすくするために
とタイトルをつけています。
また、どのswiftファイルに記述するのか分かりやすくするために
と注釈をつけています。
structを示すために
とすることで表記をに変更しています。
なぜ型キーワードにclassを使っているかというと、PlantUMLの型キーワードは, , のみでstructに対応するものが存在しなかったため、classにステレオタイプをつけ、文字をに変更しています。
 
参考：ステレオタイプとスポット

Views/FavoriteRepositoryList

ViewStream, ViewController, DataSourceそれぞれに対して、新たに追加する必要があるプロパティを示している様子です。
Views/FavoriteRepositoryListをPlantUMLで可視化している様子 | Views/FavoriteRepositoryListをPlantUMLで可視化している様子
Views/FavoriteRepositoryListをPlantUMLで可視化している様子 | Views/FavoriteRepositoryListをPlantUMLで可視化している様子
上記のクラス図をPlantUMLで示すと

Views/FavoriteRepositoryList/Cell

Cell, CellStreamに対して、新たに追加する必要があるプロパティを示している様子です。
上記のクラス図をPlantUMLで示すと
このような感じでクラス図を可視化することができます。

既存のSwiftコードからクラス図を自動生成する

上記では、コードを書き始める前の初期設計についてお話をしてきましたが既に書かれたコードから自動的にクラス図を作成する方法もあります。
既存のコードを自動生成して可視化する際は、swiftumlのスクリプトを用います。
以下の記事を参考にしてみると導入がスムーズかと思います。

まとめ

コードを書き始める前にクラスの初期設計を行い、可視化することは自分がどのような実装を行うのか整理でき責務が明確な良いコードを書くことに繋げやすいです。
採用している・されているアーキテクチャに慣れていない場合などにも、クラスの初期設計を行う恩恵は十分にあると思います。
TDDなどでテストコードを先に書く場合も、必要となるクラスを先に列挙することで行いやすくなると感じました。

最後に

読んでいただきありがとうございました！
PlantUMLは直感的に書くことができ、構文もそれほど複雑ではないということが少しでも伝われば嬉しいです😄
簡単に可視化することができるので、みなさんもぜひ使ってみてください。
次の日は、@daikimare さんのNode.jsのバージョン管理で困ったお話しです！
それでは！
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる ── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。 「自分の可能性をもっと広げたい」 「モヤっとしたアイデアがあるけど、どう進めていいかわからない」 そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。 「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
📷 Instagram（リアルイベントや趣味の発信中心）： https://www.instagram.com/tomu28creator
🌐 詳しいプロフィールはこちら https://obata-tomu.jp/
Xでポスト
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/PlantUMLでクラス図を作成！Swiftで学ぶ初期設計の可視化