こんにちは、飯野です。
主に社内ツールの開発を行う部署に所属している、アドウェイズ歴1年目のアプリエンジニアです。
昨年まではSIerで客先常駐という働き方をしていたので、エンドユーザに納品しない開発というものを弊社で初めて行っているのですが、まず驚いたことが。
設計書が無い。
Web系の会社でスクラム組んでいるチームだとこういった開発体制も相応にあると思います。
ごりごりのウォーターフォールに浸かっていた私にとっては、なかなか衝撃的なものです。
そんなこんなでNo設計書状態(コードが全てじゃ！)でチーム開発を行っていたのですが、とあるメンバーからこんな提案が。
I氏 「今のクラス設計、複雑で不透明なのでモデリングやってみたいんですけど。」
私 「いいですね、やっちゃってください！」
というわけで、最近抽象について考えまくっているI氏(通称：沼さん)に依頼してクラスのモデリング作業を行ってもらいました。
いやー、いいですね。モデリング。
私の開発チームはDDDを採用している所以もあり1機能に関わるクラス数が多いんですが、UMLがあることで、クラス同士の関連や依存関係が可視化できます。
構造の理解も進みますし、改善すべき点も見つけやすい(はず)です。
今回モデリングの土台が出来たことで、今後は実装前にモデリングを行う開発フローにしました。
ここからが本題なんですが、せっかくモデリング作業を行うなら、日頃から使用しているエディタで行いたいですよね？
私は開発にSublimeText3を使用しているので、今回は SublimeText3 + PlantUML + Windows の構成でモデリング作業を実践する環境を作ってみました。
動作環境
- Windows7 Pro 64bit
- SublimeText3 Build 3126
PlantUMLとは
テキストからダイアグラムを作図できるオープンソースのjava製ツールです。
対応しているUMLも多く、以下のような図がテキストでお手軽に作成できます。
- シーケンス図
- ユースケース図
- クラス図
- アクティビティ図
- コンポーネント図
- 状態遷移図
- オブジェクト図
GUIで図を書かなくともテキストでUMLを表現できるため、バージョン管理しやすいという利点があります。
書き方さえマスターしてしまえば、チームでの共同作業も捗りますね。
セットアップ
前述の通り、PlantUMLはjavaで動作するので、javaが必要です。
「えっ、javaから入れるの、、」と億劫になってしまうそこのアナタ！(＝私)
Chocolateyを使用してお手軽にインストールしてしまいましょう。
Chocolateyインストール
コマンドプロンプトを立ち上げ、公式サイトに掲載されているコマンドを実行します。
赤枠で囲んでいる部分をコピーして貼り付け、実行してください。
無事コマンドが通れば、インストール完了です。
choco -v
インストールとバージョンの確認は上記で。
javaインストール
さっそくChocolateyを使用してjavaをインストールしてみましょう。
同じくコマンドプロンプトで、以下コマンドを実行してください。
choco install -y jdk8
数十秒～数分でインストールが完了します。
java -version
インストールとバージョンの確認は上記で。
パスの設定までしてくれて凄いですね、Windowsでjavaの環境構築に数時間かかっていたあの頃の自分に教えてあげたいです。
Graphvizインストール
PlantUMLを使用するには、描画ツールのGraphvizも必要です。
同じくコマンドプロンプトで、インストールしましょう。
choco install -y graphviz
こちらも数十秒でインストール完了です。
dot -V
インストールとバージョンの確認は上記で。
※Graphvizは自動でパスが通らなかったので、Windowsで実行する方は適宜設定してください。
SublimeText3にPlantUMLを追加
ライブラリのセットアップが完了したら、PlantUMLを動かすためのプラグインをSublimeText3に追加します。
Ctrl + Shift + Pでコマンドパレットを立ち上げてください。
Add Repositoryを選択し、下記リポジトリを追加してください。
続けてコマンドパレットを立ち上げ、Install Packageを選択。
下記プラグインを追加してください。
- sublime_diagram_plugin
インストールが完了したら、セットアップは終了です。
さっそく使ってみましょう
PlantUMLの構文はこちらでは詳しく書きませんが、以下サンプルを用意しました。
ファイルをDiagram形式に指定すると、シンタックスも変化します。
@startuml
class Shape {
+setLocation()
+getLocation()
+display()
+fill()
+undisplay()
}
class Point {
+display()
+fill()
+undisplay()
}
class Line {
+display()
+fill()
+undisplay()
}
class Square {
+display()
+fill()
+undisplay()
}
class Circle {
+display()
+fill()
+undisplay()
}
Shape <|-- Point : 継承
Shape <|-- Line
Shape <|-- Square
Shape <|-- Circle
@enduml
Alt + Mを実行してみると、、
png形式で画像出力してくれます！
調査含めなんと、30分ほどでここまで到達しました。便利。
まとめ
モデリング環境の構築いかがでしたか？
PlantUMLの情報は結構落ちているんですが、Windows + SublimeText3の動作環境は情報が無かったので、今回まとめてみました。
開発で使用するエディタをそのまま設計にも活かせる(AtomもVimも使えます！)のでロスがないですし、何よりテキストで記述できるのでGitで管理すればチーム開発も行いやすいですね。
是非みなさんも開発フローに加えてみてください。
最後に、モデリング実践してくれた沼さん、抽象についていつかブログで熱く披露してくださいね。
