【連続講座3】デザインパターンを学び、ソフトウェア設計に生かそう（Facade・Observer・State）

2025/1/23 社内勉強会の資料
Facade・Observer・Stateパターンをテーマにしている。

※URLリンクを多数、書いています。
URLリンクが有効な資料はこちらを参照ください。
https://www.docswell.com/s/juraruming/5XE9NG-2025-01-22-221337

1. 【連続講座3 】デザインパターンを学 び、ソフトウェア設計に生かそう Facade ・Observer ・State パーソルクロステクノロジー株式会社 エンジニアリング事業管掌　設計統括本部 第2 電子・制御設計本部　第1 設計部　4G 　阿部耕二
2. 目次 自己紹介 開発環境構築 設計、してますか? 良い設計とはどういう設計か? デザインパターンの学び方のススメ Facade Observer State 参考資料 2
3. 自己紹介 名前: 阿部　耕二（あべ　こうじ） 所属: パーソルクロステクノロジー株式会社 エンジニアリング事業管掌　設計統括本部 第2 電子・制御設計本部　第1 設計部　4G 医療機器の組込みソフトウェア開発。C 言語。 趣味: 宇宙開発（リーマンサットプロジェクト広報メンバー） LAPRAS ポートフォリオ: https://lapras.com/public/k-abe Twitter: @juraruming 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 3
4. 開発環境構築 サンプルコードのコンパイル、実行にjava （JDK ）のインストールが 必要です。 下記のページなどを参照し、ご自分のPC のOS に合わせてインストー ルしてください。 【2024 年版】Java JDK のインストール方法（Windows & Mac 対応） 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 4
5. つぎのコマンド実行でバージョンが表示されていればOK です。 私はつぎのバージョンで確認しました。 $ javac -version javac 17.0.8 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 5
6. サンプルプログラムのビルド方法 サンプルプログラムのディレクトリ（Main.java があるディレクトリ） に移動しつぎのコマンドでビルドする。 $ javac Main.java プログラムの実行はつぎのコマンドで行う。 $ java Main 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 6
7. 講座のGitHub リポジトリ https://github.com/grace2riku/design_pattern_lesson 今回の講座のディレクトリ https://github.com/grace2riku/design_pattern_lesson/tree/main/le sson_3 参考資料1 　ソースコードのダウンロード先 Java 言語で学ぶデザインパターン入門　第3 版 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 7
8. 設計、してますか? 設計してますか? 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 8
9. こんなことになってませんか? おばあちゃんのプログラミン グ教室（ばあプロ）As A Service @Pythonist19 より引 用 https://x.com/Pythonist19/sta tus/1845794841269055543 【連続講座3 】デザインパターンを学び、ソフトウェ 9
10. 設計の重要性 要素技術にフォーカスしがち、注力しがち →　再利用しにくい、変更しにくいソフトウェアのできあがり 他社との違い・自社の強みを活かしていないソフトウェアが誕生 ビジネス競争力の低下　→　技術的負債に!!! 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 10
11. 設計の難しさ お手本がない。 対象製品、装置で個別の事情がある。 製品の特性、開発期間、製品寿命、etc Web システムと組込みソフトウェア 自動車と医療機器では設計思想も違ってきそう。 自動車：変化が早い、開発期間短い、大量生産 医療機器：開発期間長い印象、少量生産 ソフトウェアは柔軟で、自由度が高すぎる。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 11
12. 対象システム、装置に応じた設計手法を学び、身につける そしてチームメンバーと共通認識を持ちたい。 デザインパターン 設計の古典、教科書ともいえる。 プログラミング言語の中に取り込まれて、見えない。 　 　→　学ぶことは意味があると考える。 　→　開発時のコミュニケーションに活用する。 　ここは「xxx 」パターンを適用してみようか? 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 12
13. 良い設計とはどういう設計か? 良い設計のために個人的に大事だと思うキーワード 1. 凝集度 2. 結合度 3. 関心の分離 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 13
14. 1. 凝集度 関心ごとの集まり 凝集度が高い方（関心ごとが一箇所に集まっている）が良い設計と 言われる 1 つの目的・責務になっていることが望ましい 例）料理を作る場面 キッチン周りには料理に必要な設備が配置される（水道、冷蔵庫、コ ンロ、食器棚、その他） 。 →必要なものが凝集している状態 キッチン周りに洗濯機はいらない。料理をつくるという関心ごとに洗 濯機は不要。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 14
15. 2. 結合度 他のモジュールとの関連の度合い 結合度が低い方（他のモジュールとの関連が少ない方）が良い設計 と言われる あるファイルのグローバル変数が他の複数のファイルから参照され ている状況は結合度が高い。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 15
16. 3. 関心の分離 関心ごとを分離し、境界を設ける 関心の分離が表現されている例としてOSI 参照モデル・TCP/IP に注 目する 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 画像引用元 OSI 参照モデルとは？TCP/IP との違いを図解で解説 “ “ 16
17. 役割ごとに階層が分かれている 下の層がハードウェアに近い 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 17
18. 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 18
19. 上の階層ほど抽象的。目的・知識・Why 。 下の階層ほど具体的。目的を達成する手段・How 。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 19
20. デザインパターンの学び方のススメ デザインパターンがどんな課題を解決できて、どのような構成なの かイメージを捉える 参考資料1 の章題はデザインパターンを短く端的に表現してい る。 参考資料3 では各デザインパターンを短く、わかりやすく解説し てくれている。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 20
21. クラス図とコードの写経をセットで行う コードだけ見ていても各クラスの全体の関係性がわかりずらい。 クラス図だけを見ていても抽象的で本当に動くのか疑問がわく。 設計図（抽象） 　⇔　コード（具体的）の世界を行ったり来たり することで整理できたり、気づきが得られることがあると思う。 今回のサンプルコードはJava 。デザインパターンの考え方・実装 は特定のプログラミング言語に限定されないと思うので自分が得 意な言語で実装してみると理解が深まると思う。 参考資料2 ではC# 、 C++ 、 Go 、 Java 、 PHP 、 Python 、 Ruby 、 Rust 、 Swift 、 TypeScript で実装例を提示してくれている。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 21
22. デザインパターンに登場するクラスの相互関係に注目する 複数のクラスが関係してパターンを構成している。各クラスの役 割、関係性に注目する。 デザインパターンがどのように振る舞うか? に加えて、デザインパタ ーンはどのように使われるか? の視点も大事だと思う。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 22
23. Facade 参考資料1 　章題　 【シンプルな窓口】 Facade のクラスはクラインアントにシンプルな処理の窓口を提供す る。 Facade のクラスはシステム内部のクラスを正しく利用する（システ ム内部のクラスの依存関係を理解・把握し、正しい処理の順番で実 行する） 。システム内部のごちゃごちゃをクライアントに見せな い。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 23
24. サンプルプログラム例 テーマ：参考資料1 のWeb ページ（ユーザ名を表示するシンプルなも の）を作成するプログラム。 Web ページは以下の構造を持つ。 タイトル 段落 リンク メールアドレスのリンク 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 24
25. サンプルプログラムのクラス図 サンプルプログラムのディレク トリ https://github.com/grace2riku /design_pattern_lesson/tree/ main/lesson_3/Facade 【連続講座3 】デザインパターンを学び、ソフトウェ 25
26. サンプルプログラムのビルド方法 サンプルプログラムのディレクトリ（Main.java があるディレクトリ） に移動しつぎのコマンドでビルドする。 $ javac Main.java プログラムの実行はつぎのコマンドで行う。 $ java Main 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 26
27. サンプルプログラムの実行結果 $ java Main welcome.html is created for k-abe@example.com (Koji Abe) welcome.html の内容 <!DOCTYPE html><html><head><title>Koji Abe's web page</title></head> <h1>Koji Abe's web page</h1> <p>Welcome to Koji Abe's web page!</p> <p>Nice to meet you!</p> <p><a href="mailto:k-abe@example.com">Koji Abe</a></p> </body></html> 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 27
28. welcome.html をブラウザで表示したところ 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 28
29. サンプルプログラムの解説 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 29
30. Facade パターンの登場人物を 抽象的に書く 【連続講座3 】デザインパターンを学び、ソフトウェ 30
31. Facade パターンのまとめ システム内部の複雑さを単純にできる シンプルな窓口を提供する→外部との結合が疎になる→部品として 再利用できる 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 31
32. Observer 参考資料1 　章題　 【状態の変化を通知する】 observer は、観察(observe) する人、観察者という意味とのこと 観察対象の状態が変化したことを観察者に通知する。状態変化に応 じた処理を記述するときに便利 Publish-Subscribe パターン（出版- 購読）と呼ばれることもあるら しい。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 32
33. ROS2 のPublish-Subscriber 通信 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう https://docs.ros.org/en/humble/Tutorials/Beginner-CLI- Tools/Understanding-ROS2-Topics/Understanding-ROS2- Topics.html “ 33
34. サンプルプログラムの例 テーマ: 数(0 〜49 のランダムな整数を20 個) をObserver に通知する。通 知を受けたObserver はそれぞれの方法で数を表示する。 Observer 1. DigitObserver は数字で数を表示する Observer 2. GraphObserver はグラフ(*) で数を表示する 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 34
35. サンプルプログラムのクラス図 サンプルプログラムのディレク トリ https://github.com/grace2riku /design_pattern_lesson/tree/ main/lesson_3/Observer 【連続講座3 】デザインパターンを学び、ソフトウェ 35
36. サンプルプログラムのビルド方法 サンプルプログラムのディレクトリ（Main.java があるディレクトリ） に移動しつぎのコマンドでビルドする。 $ javac Main.java プログラムの実行はつぎのコマンドで行う。 $ java Main 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 36
37. サンプルプログラムの実行結果 DigitObserver とGraphObserver の表示の組が20 個あるが省略 $ java Main DigitObserver:9 GraphObserver:********* DigitObserver:13 GraphObserver:************* DigitObserver:30 GraphObserver:****************************** DigitObserver:23 GraphObserver:*********************** DigitObserver:34 GraphObserver:********************************** 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 37
38. サンプルプログラムの解説 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 38
39. Observer パターンのまとめ 状態変化を通知するときに使うと便利なパターン 通知を出す側はObserver のことを知らない。 RandomNumberGenerator はObserver がDigitObserver か GraphObserver か知らない。 Observer は通知を出す側を知らない。DigitObserver ・ GraphObserver はRandomNumberGenerator が通知を出しているこ とを知らない。 →知らないということはクラスを交換できる→変更容易性を高める 設計ができる 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 39
40. State 参考資料1 　章題　 【状態をクラスとして表現する】 クラスを切り替えると状態の変化を表せる→どんな良いことがある かは後述します 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 40
41. State パターンのサンプルプログラム例 テーマ：参考資料1 の金庫警備システム 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 41
42. サンプルプログラムのクラス図 サンプルプログラムのディレク トリ https://github.com/grace2riku /design_pattern_lesson/tree/ main/lesson_3/State 【連続講座3 】デザインパターンを学び、ソフトウェ 42
43. サンプルプログラムのビルド方法 サンプルプログラムのディレクトリ（Main.java があるディレクトリ） に移動しつぎのコマンドでビルドする。 $ javac Main.java プログラムの実行はつぎのコマンドで行う。 $ java Main 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 43
44. State サンプルプログラムの実行結果 ターミナルの表示。1 秒で1 時間経過するようになっている。 $ java Main 現在時刻は00:00 [昼間]から[夜間]へ状態が変化しました。 現在時刻は01:00 現在時刻は02:00 現在時刻は03:00 現在時刻は04:00 現在時刻は05:00 現在時刻は06:00 java.awt.event.ActionEvent[ACTION_PERFORMED,cmd=金庫使用,when=1737462816012,modifiers=Button1] on button0 現在時刻は07:00 java.awt.event.ActionEvent[ACTION_PERFORMED,cmd=非常ベル,when=1737462817221,modifiers=Button1] on button1 現在時刻は08:00 java.awt.event.ActionEvent[ACTION_PERFORMED,cmd=通常通話,when=1737462818118,modifiers=Button1] on button2 現在時刻は09:00 [夜間]から[昼間]へ状態が変化しました。 現在時刻は10:00 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 44
45. GUI の表示。金庫・非常ベル・電話の使用で昼間・夜間の状態に応 じたメッセージが表示される。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 45
46. サンプルプログラムの解説の前にState パターンを使わない場合（状 態をクラスとしない場合） 、昼間・夜間で金庫・非常ベル・電話の 使用時の振る舞いをどう実装するか考えてみましょう。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 46
47. State パターンを使わない場合（状態をクラスとしない場合）にあり そうな実装例 金庫使用時に呼ばれるメソッド() { if (昼間) { // 警備センターに利用の記録 } else if (夜間) { // 警備センターに非常事態の通報 } } // 非常ベル、通常通話使用時のメソッドは省略 メソッドの中に状態のif 文がある→コードが複雑になる要因のひと つ 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 47
48. State パターンを使わない場合（状態をクラスとしない場合）にあり そうな実装例 もし、 【メンテナンス中】の状態が追加されたらどうなる??? 金庫使用時に呼ばれるメソッド() { if (昼間) { // 警備センターに利用の記録 } else if (夜間) { // 警備センターに非常事態の通報 } else if (メンテナンス中) { // メンテナンス中の振る舞い } } // 非常ベル、通常通話使用時のメソッドも同様に状態を追加する 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 48
49. サンプルプログラムの解説 State パターン(DayState, NightState) では前ページの実装と違い、 State パターンのクラスの中に必要な振る舞い doClock doUse doAlarm doPhone が書かれており、状態判断のif 文が登場しない。 State パターンは状態の追加に前述の実装例より容易に対応できる。 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 49
50. サンプルプログラムの解説 つぎの場合のシーケンス図 昼間に金庫を使用した場合 (DayState のdoUse を呼び出 し) 時間経過で昼間から夜間に なった後に金庫を使用した 場合(NightState のdoUse を 呼び出し) 【連続講座3 】デザインパターンを学び、ソフトウェ 50
51. サンプルプログラムの解説 DayState, NightState はSingleton パターンを適用し、インスタンスが1 個しか生成できないようにしている。 プログラムを複雑化させない良いアプローチだと思う。 ※Singleton パターンについて1 回目の講座資料も参考にしてくださ い。 【連続講座1 】デザインパターンを学び、ソフトウェア設計に生かそう (Adapter ・Factory Method ・Singleton) https://www.docswell.com/s/juraruming/5QRMXX-2024-10-25- 142836#p41 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 51
52. State パターンのまとめ 状態をクラスとして表現した。クラスの中に必要な処理を書いた。 結果、状態遷移判定のif 文をなくすことができた 状態の追加に容易に対応できる変更しやすい構造にできた 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 52
53. 参考資料 1. Java 言語で学ぶデザインパターン入門　第3 版 2. 直撃！デザインパターン 3. ぼくにもわかるデザインパターン　第2 章 GoF パターン大カタログ ～パターンがみるみる頭にしみこむ～ 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 53
54. ご清聴ありがとうございました 【連続講座3 】デザインパターンを学び、ソフトウェア設計に生かそう 54