TypeScriptで実践するクリーンアーキテクチャ ― WebからもCLIからも使えるアプリ設計 / CClean Architecture with Typescript Application

本セッションでは、TypeScriptの型安全性と柔軟なモジュール設計を活かし、Web（Next.js）とCLI（inquirer.js）の両方から操作できるスクラム管理アプリをサンプルとした実践例を紹介します。

TypeScriptを選んだ理由は、強力な型システムとバックエンドとフロントエンドのどちらでも一貫して使えるため、フレームワーク非依存の設計と相性が良いからです。

クリーンアーキテクチャは「詳細に依存せず抽象に依存する」ことを基本理念とする設計方針です。TypeScriptを用いて重要なビジネスロジックを分離することを紹介します。

・フレームワークに依存しないアプリケーションの構築方法
・TypeScriptの型システムを活かしたドメインロジックの実装
・Next.jsとCLIの両方で動作するそれぞれのPresentation層の設計

本セッションを通じて、フロントエンドとバックエンドの関係を再考し、TypeScriptで変更に強い柔軟なアプリ設計を実現する方法を紹介します。

本発表は以下の記事に即した内容です。
「TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方」
https://zenn.dev/panda_program/articles/clean-architecture-application

Transcript

1. @TS Kaigi 2025（2025/5/23） プログラミングをするパンダ（@Panda_Program） TypeScriptで実践する クリーンアーキテクチャ WebからもCLIからも使えるアプリ設計 1
2. 2 © 2012-2025 BASE, Inc. 自己紹介 • BASE株式会社 • 所属：BASE / Product Dev / feature dev1 • 現在の仕事：Advanced Enginner（ジュニアテックリード相当） ◦ フロントエンドもバックエンドも書くフルスタックです ◦ スクラム開発やチームの開発プロセスの改善が好きです ◦ 今はデザイン刷新PJを担当しています（7ヶ月目） • 好きなことと活動 ◦ 執筆 ◦ CodeZine様で「バックエンドエンジニアのためのフロントエンド入門」を現在連載中 ◦ 2024/12に「アジャイル開発」で一人アドベントカレンダーを完走しました ◦ 登壇実績 ◦ Developers Summit 2025、PHPerKaigi 2025、フロントエンドカンファレンス沖縄 2022など ◦ twitter: @Panda_Program プログラミングをするパンダ（@Panda_Program）
3. 3 © 2012-2025 BASE, Inc. 宣伝 過去のTypeScript関連の発表 https://speakerdeck.com/panda_program
4. 4 © 2012-2025 BASE, Inc. 宣伝 BASEはリアーキテクチャ中です • BASEはモジュラーモノリスで開発している ◦ 各モジュールはクリーンアーキテクチャ ◦ 業務領域の理解をして、コードに反映さ せる取り組み（DDD）で開発している • （ただ、レガシーなモノリスもまだ全然ある） よければこちらもぜひ 「モジュラーモノリスでスケーラブルなシステムを作る BASE のリアーキテクチャのいま（@Panda_Program）」 https://speakerdeck.com/panda_program/base-modu lar-monolith
5. 5 © 2012-2025 BASE, Inc. 宣伝 YouTubeでエンジニア向けのラジオを配信してます（@dialog-radio） https://www.youtube.com/@dialog-radio/videos • ブログや登壇とはまた違った内容です ◦ プロダクトエンジニアって何だろう？ ◦ プロダクトオーナーとエンジニアの違い とは？ ◦ 勉強会のスキルアップ以外の意義とは？ • 毎週月曜日、朝7時配信 ◦ ぜひご視聴 & チャンネル登録お願 いします！
6. 6 © 2012-2025 BASE, Inc. 宣伝 6/1の技術書典でチーム開発の書籍を出します！ • タイトル『チーム開発を成功に導く好循環の 作りかた ー 考え方と実践の手引き』（仮） • Boothでオンライン販売予定なのでぜひ
7. はじめに はじめに 77
8. はじめに 終わらせましょう 88
9. 9 © 2012-2025 BASE, Inc. はじめに 今日はこれをお持ち帰りください • クリーンアーキテクチャって、結局何？ • クリーンアーキテクチャで開発するって具体的にどういうこと？ • クリーンな設計をしたいというモチベーション
10. 10 © 2012-2025 BASE, Inc. はじめに こちらの質問は他の方の良スライドへ Q. フロントエンドでも クリーンアーキテクチャってできるの？ → t-wada さんのスライドへ Q. クリーンアーキテクチャについて もうちょっと良く知りたいよ → Nakamuraさん（@nuits_jp）のスライドへ https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend https://www.docswell.com/s/nuits_jp/5DNXE9-easiest-clean-architecture
11. 11 © 2012-2025 BASE, Inc. 目次 １ ２ ３ クリーンアーキテクチャとは何か 実際にやってみた 作成したアプリの考察 (付録) ボブおじさんは何者なのか
12. 12 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か
13. 13 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か The Clean Architecture - The Clean Code Blog https://blog.cleancoder.com/uncle-bob/2012/08/13/t he-clean-architecture.html 『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 Robert C.Martin (著), 角 征典 (翻訳), 高木 正弘 (翻訳) （本スライドで明記のないものは本書からの引用）
14. 14 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • 方針と詳細を分けて、安定度の高い方針に依存する（ルール） • 方針は自分が何のアプリケーションであるか自己表現している （叫ぶアーキテクチャ） • 詳細はプラグインのように差し替え可能である
15. 15 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • 同心円がひとり歩きしている ◦ 出典はボブおじさんのブログ記事 ▪ “The Clean Architecture” • ブログも書籍も読まずに議論されているので は？ 何が問題なのか The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend
16. 16 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か 「本書で提唱されている「Clean Architecture」については、 （中略）見よう見まねでアーキテクチャの「同心円」を実装し ている例が数多く見られる。だが、著者のように原理・原則に 忠実であるためにも、まずは本書に目を通してもらいたい。そ して、著者と対話しながら、自らのアーキテクチャをクリーン にしてもらえれば幸いだ」 訳者の一人（角さん）のあとがき
17. 17 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • サンプルだよ、ということは本文にダイレク トに書かれている • レイヤーは4種類以外ある可能性 ◦ ボブおじさん「4つの円だけ？図22-1の円 は、概要を示したものである。したがっ て、この4つ以外にも必要なものはあるだ ろう。この4つ以外は認めないというルー ルはない」 図はサンプルでしかない The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend
18. 18 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か ボブおじさん（Robert C. Martin）が考えるアーキテクチャの理想 Robert Cecil Martin（wikipedia） https://it.wikipedia.org/wiki/Robert_Cecil_Martin • 少ない労力で大きな成果 ◦ 「ソフトウェアを正しくすると、不思議な ことが起こる。ソフトウェアを動かすのに 大量のプログラマが不要になる」 • ボブおじさんの成功体験（1990年代） ◦ 「ROSEにはアーキテクチャがあった。 （中略）それは真のレイヤーで構成され、 レイヤーの依存関係は適切に制御されてい た。アーキテクチャが、リリース可能、開 発可能、独立してデプロイ可能にしていた のである」
19. 19 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • アーキテクチャにはルールがある ◦ 「アーキテクチャのルールとは、プログラ ムの構成要素を組み立てるルールである」 • 優れたアーキテクチャの特徴 ◦ 方針と詳細の分割（関心の分離） ▪ 方針:ビジネスルールとビジネスロジック ▪ 詳細:プラグイン化できる → 最終的な決定を遅延できる • 依存の制御 • 労力の最小化と生産性の最大化 コアの主張は何か Robert Martin Interviews - The Accidental Engineer https://theaccidentalengineer.com/guests/robert-martin/
20. 20 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • 「ソフトウェア（コンピュータプログラムの 本質）は、『順次』『選択』『反復』と『間 接参照』で構成されている。それ以上でも、 それ以下でもない」 • プログラムの構成要素 ◦ 順次（seq） ◦ 選択（if） ◦ 反復（for） ◦ 間接参照（ref） ▪ （変数の初期化、書き込み、読み出し） • 手続型、オブジェクト指向型、関数型 どのように実現するのか - プログラミング
21. 21 © 2012-2025 BASE, Inc. • OOはこれではない（by ボブおじさん） ◦ データと関数の組み合わせ ◦ 現実世界をモデル化する方法 ◦ カプセル化・継承・ポリモーフィズムの組 み合わせ • OOとはこれである（by ボブおじさん） ◦ ポリモーフィズムを使用することで、シス テムにあるすべてのソースコードの依存関 係を絶対的に制御する能力 （個人的には「OOのこの力が一番強力である」くらいの表現で いいと思うけど、この辺りはボブおじさんの本の「醍醐味」） 1. クリーンアーキテクチャとは何か どのように実現するのか - オブジェクト指向 Ray.Di オブジェクトグラフの視覚化 - @koriyam https://qiita.com/koriym/items/7439fb9290498b2c4771
22. 22 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • SOLID原則 = OOがうまくいくルール ◦ 単一責任の原則（SRP） ◦ オープン・クローズドの原則（OCP） ◦ リスコフの置換原則（LSP） ◦ インターフェイス分離の原則（ISP） ◦ 依存関係逆転の原則（DIP） • DIP が一番重要 ◦ OOのポリモーフィズムを活用して、具象 ではなくインターフェースという安定した 抽象に依存することにより、制御の方向と 依存の方向を逆転させるという原則 どのように実現するのか - SOLID原則 「SOLIDの原則って何ですか？」って質問に答えたかった - Satoshi Kawashima https://speakerdeck.com/nazonohito51/whats-solid-principle?slide=7
23. 23 © 2012-2025 BASE, Inc. 2. 実際にやってみた 依存関係逆転とは
24. 24 © 2012-2025 BASE, Inc. 2. 実際にやってみた 依存関係逆転とは
25. 25 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か • （超まとめ）ソフトウェアを構築するにあた り、プログラミングはオブジェクト指向で。 そのポリモーフィズムの機能に着目し、DIP を活かして依存の方向を制御しているのが クリーンアーキテクチャだ （一応OOじゃなくてもいいと書籍内には書いてはいる） • 「クリーンアーキテクチャ」がもたらすもの ◦ フレームワーク非依存 ◦ UI非依存 ◦ データベース非依存 ◦ 外部エージェント非依存 ◦ テスト可能 クリーンアーキテクチャは何をもたらすのか
26. 26 © 2012-2025 BASE, Inc. 2. 実際にやってみた
27. 27 © 2012-2025 BASE, Inc. 2. 実際にやってみた 問題意識 → 実際にやってみた The Clean Architecture - The Clean Code Blog https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html
28. 28 © 2012-2025 BASE, Inc. 2. 実際にやってみた • クリーンアーキテクチャを実践してみたい ◦ 入出力をWebに限定しないアプリを作った • スクラムチームを管理するアプリケーション を作成した ◦ スクラムマスター、プロダクトオーナー、 開発者を扱う構成である ◦ Webからもターミナルからも人員の追加・ 変更・削除ができる ▪ 左図は「両方でチームメンバーを一覧で きる」ことを示している 問題意識 → 実際にやってみた TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方（@Panda_Program） https://zenn.dev/panda_program/articles/clean-architecture-application
29. 29 © 2012-2025 BASE, Inc. 2. 実際にやってみた • 技術構成 ◦ 方針 ▪ Core: TypeScript ◦ 詳細 ▪ Web: Next.js + Tailwind CSS ▪ CLI: commander.js, @inquirer/prompts ▪ DB: lowdb（JSONファイル） 技術構成
30. 30 © 2012-2025 BASE, Inc. 2. 実際にやってみた • モノレポ構成 • packages ◦ ドメイン層（方針） ◦ ユースケース層（方針） ◦ ゲートウェイ層（詳細） • apps ◦ Webアプリケーション（詳細） ◦ CLIアプリケーション（詳細） • 依存関係 ◦ 詳細が方針に依存する。その逆はない ディレクトリ構成
31. 31 © 2012-2025 BASE, Inc. 2. 実際にやってみた サンプルコードの内容 スクラムチームの メンバーの一覧と更新
32. 32 © 2012-2025 BASE, Inc. 2. 実際にやってみた • ビジネスルールを記述する（業務） ◦ ex. スクラムチームは、スクラムマスター （SM）1人、プロダクトオーナー（PO） 1人、複数人の開発者で構成される ◦ ex. 開発者はSMを兼務可能だが、POは兼 務不可能である • PureなTypeScriptで記述する（技術） ◦ 各クラスは、不変条件のバリデーションと ドメインロジックを持つ • インターフェースを置く • 外部依存なし = フレームワーク非依存 方針 - ドメイン層（packages/core）
33. 33 © 2012-2025 BASE, Inc. 2. 実際にやってみた 方針 - ドメイン層（packages/core） 外部への依存はない ScrumTeam この集約オブジェクトの 単位でレポジトリのイン ターフェースを作る (ScrumTeamRepository Interface)
34. 34 © 2012-2025 BASE, Inc. 2. 実際にやってみた • アプリケーション固有の機能（ユースケー ス）を定義する ◦ ドメイン層のオブジェクトとインター フェースのみに依存する • 「オブジェクトがダンスする」 ◦ 様々なオブジェクトを作成したり、メソッ ドを呼び出す ◦ オブジェクトが協調してタスクをこなす場 ◦ アプリの外部と内部が交わる場所 • CQRSを意識して UseCase（Write） と QueryService（Read） を分けて実装した 方針 - ユースケース層（packages/usecase）
35. 35 © 2012-2025 BASE, Inc. 2. 実際にやってみた 方針 - ユースケース層（packages/usecase） ScrumTeamUseCase ドメイン層(core)にのみ依存する 「オブジェクトがダンスする」 以下のオブジェクトが協調してタスクを 実行している • command オブジェクト（引数） • ScrumTeamRepository オブジェクト • ScrumTeam オブジェクト
36. 36 © 2012-2025 BASE, Inc. 2. 実際にやってみた • 外部システムとの連携を扱う ◦ データベースや外部サービスへ実際にアク セスする ◦ 外部システムとの境界にインターフェース を作る • ドメイン層に作成したインターフェースを実 装するレイヤー • ボブおじさんが「プラグインのように置き換 えられる」と言っているのはここを含めた 外側 詳細 - ゲートウェイ層（packages/gateway）
37. 37 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - ゲートウェイ層（packages/gateway） ScrumTeamRepository core と具体的な技術（ここでは JSONファイルを扱うlowdb）に のみ依存する 同じレポジトリインターフェース を実装すれば、永続化先は MySQLにもNoSQLでも外部API でも何でもOK (ポリモーフィズム, プラグイン)
38. 38 © 2012-2025 BASE, Inc. 2. 実際にやってみた 「DBを差し替える」のコード例
39. 39 © 2012-2025 BASE, Inc. 2. 実際にやってみた • アプリケーションに対するデータの入力、 出力を担う ◦ Webもターミナルもデスクトップアプリも スマホアプリも （入出力は一番外側なので層でもない気もするが、ここでは層と しておく） 詳細 - 入出力層（apps/web, apps/cli）
40. 40 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - 入出力層（apps/web） Web で スクラムチームの メンバーの一覧と更新
41. 41 © 2012-2025 BASE, Inc. 2. 実際にやってみた • Next.js(App Router)でWeb UIを実装した ◦ ユーザーがブラウザから操作するための画 面を提供する ◦ ユースケース層を呼び出して処理を実行す る 詳細 - 入出力層（apps/web） TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方（@Panda_Program） https://zenn.dev/panda_program/articles/clean-architecture-application
42. 42 © 2012-2025 BASE, Inc. 2. 実際にやってみた • チームメンバー一覧 • Query - データの読み取り ◦ ユースケース層の ScrumTeamQueryService を呼び出す ◦ ScrumTeamQueryService をServer Componentから呼び出して、データを取 得した ◦ Next.jsはどこからデータが来たのかを知 らない（DBを知らない = 関心の分離） 詳細 - 入出力層（apps/web） TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方（@Panda_Program） https://zenn.dev/panda_program/articles/clean-architecture-application
43. 43 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - 入出力層（apps/web） 入出力層（左： CLI）はユースケース層（右： QueryService）に依存している → OK ユースケース層はドメイン層（インターフェース）に依存している → OK
44. 44 © 2012-2025 BASE, Inc. 2. 実際にやってみた • Command - データの書き込み ◦ TeamForm コンポーネントは、 useFormState とServer Actionでフォー ムを送信する ▪ (最新のReact Hooksは useActionState() なのでご注意) ◦ Server Actionは、zod によるバリデー ションと UseCase の実行に責務を絞って いる（次ページ） 詳細 - 入出力層（apps/web） TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方（@Panda_Program） https://zenn.dev/panda_program/articles/clean-architecture-application
45. 45 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - 入出力層（apps/web） • チーム管理は ScrumTeamUseCase を使う ◦ create メソッドと edit メソッドを持って いる ▪ （ただ、CreateScrumTeamUseCaseと EditScrumTeamUseCaseに分けた方が色々簡単になるはず） • メソッドに応じて入力値を分ける ◦ CreateScrumTeamWebCommand ◦ EditScrumTeamWebCommand • チームの作成と編集をメソッドで分ける ◦ ScrumTeamUseCase().create(command) ◦ ScrumTeamUseCase().edit(command)
46. 46 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - 入出力層（apps/cli） CLI で スクラムチームの メンバーの一覧と更新
47. 47 © 2012-2025 BASE, Inc. 2. 実際にやってみた • Inquirer.jsでCLIを実装した ◦ ユーザーがターミナルから操作するための 機能を提供する ◦ こちらもユースケース層を呼び出して処理 を実行する • CLIの実行コマンド例（左図） 詳細 - 入出力層（apps/cli）
48. 48 © 2012-2025 BASE, Inc. 2. 実際にやってみた • チームメンバー一覧 • Query - 読み取り ◦ $pnpm scrum list-team コマンド ◦ ListScrumTeamQueryService でデータを 取得 ◦ ListScrumTeamPresenter で表示を整形 した • プロダクトオーナーやスクラムマスターを console.info で出力する 詳細 - 入出力層（apps/cli）
49. 49 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - 入出力層（apps/cli） 入出力層（左： CLI）はユースケース層（右： QueryService）に依存している → OK ユースケース層はドメイン層（ドメインオブジェクトとインターフェース）に依存している → OK
50. 50 © 2012-2025 BASE, Inc. 2. 実際にやってみた • Command - データの書き込み ◦ $pnpm scrum edit-team コマンド ◦ 対話型でプロダクトオーナーとスクラムマ スターを変更できる 詳細 - 入出力層（apps/cli）
51. 51 © 2012-2025 BASE, Inc. 2. 実際にやってみた 詳細 - 入出力層（apps/cli） • (おさらい)チーム管理には ScrumTeamUseCase を使う ◦ 入力値: EditScrumTeamCLICommand ◦ ScrumTeamUseCase().edit(command) • ScrumTeamUseCase は Web と CLI で共通！！ ◦ EditScrumTeamCommandInterfaceを作り、 Web と CLI でそれぞれ実装した • Web か CLI かで UseCase が分かれていない ◦ = 下図の通り、方針が詳細に依存していない
52. 52 © 2012-2025 BASE, Inc. 2. 実際にやってみた • 別プラットフォームのUIを作れる ◦ スマホアプリ → @apps/native ▪ Expo（React Native） ◦ APIサーバー → @apps/api ▪ Hono, Express.js etc. • DBも差し替えられる ◦ RDB ▪ RDS, Cloudflare D1 etc. ◦ Key Value ▪ Redis, Vercel KV etc. ◦ 外部APIでも良い クリーンアーキテクチャの恩恵
53. 53 © 2012-2025 BASE, Inc. 2. 実際にやってみた 今回の内容については Zenn で記事を公開中 → https://zenn.dev/panda_program/articles/clean-architecture-application GitHub でプログラムを公開中 → https://github.com/Panda-Program-Web/scrum よければこちらもご覧ください
54. 54 © 2012-2025 BASE, Inc. 2. 実際にやってみた 具体的なコードを学ぶ - 『オブジェクト設計スタイルガイド』（通称スタイルガイド本） • 名著『オブジェクト設計スタイルガイド』 ◦ 次はこの本がおすすめです ◦ 本書のコーディングスタイルに従うだけ で、クリーンなアーキテクチャのアプリが 書けます ◦ 結局どう書けばいいの？という方はぜひ
55. 55 © 2012-2025 BASE, Inc. 2. 実際にやってみた • 『オブジェクト設計スタイルガイド』で発表 したことがあるのでぜひ見てみてください • 同心円の図も出てくるよ 具体的なコードを学ぶ - 『オブジェクト設計スタイルガイド』（通称スタイルガイド本） 軽量DDDはもういらない！ スタイルガイド本で OOPの実装パターンを学ぼう （@Panda_Program） https://speakerdeck.com/panda_program/no-more-lightweight-ddd 『オブジェクト設計スタイルガイド』Matthias Noback著、田中 裕一訳
56. 56 © 2012-2025 BASE, Inc. 2. 実際にやってみた PHP Conference 2025（6/28） で『スタイルガイド本』を参考に Domain層やUseCase層の設計・実装の話をします
57. 57 © 2012-2025 BASE, Inc. 2. 実際にやってみた 「クリーンアーキテクチャ本」で モチベを高め 「スタイルガイド本」で コーディングを学ぶ
58. 58 © 2012-2025 BASE, Inc. 2. 実際にやってみた 時間があればデモします
59. 59 © 2012-2025 BASE, Inc. 3. 作成したアプリの考察
60. 60 © 2012-2025 BASE, Inc. 3. 作成したアプリの考察 • 「クリーンアーキテクチャ」がもたらすもの ◦ フレームワーク非依存 ◦ UI非依存 ◦ データベース非依存 （本当はDI機構が必要だが、本アプリでは省略） ◦ 外部エージェント非依存 ◦ テスト可能 ▪ 今回は触れていないが、各レイヤーのオ ブジェクトはテスト可能 • 実際にできた！ クリーンアーキテクチャは何をもたらすのか
61. 61 © 2012-2025 BASE, Inc. 2. 実際にやってみた クリーン = AI フレンドリー • gitdiagram （https://gitdiagram.com/） ◦ レポジトリのURLを入力すると、AI がアプ リケーションの構成を作図するツール ◦ きれいなレイヤードアーキテクチャになっ た
62. 62 © 2012-2025 BASE, Inc. 3. 作成したアプリの考察 ただ...
63. 63 © 2012-2025 BASE, Inc. • WebとCLIの違い ◦ ログイン機能を実装するなら、セッションどうしよう... ▪ cf. Google の Clasp は Terminal から Web API をコールする仕組み • Apps Script REST API、Google Drive API を内部でコールしている • また、仮にUIごとにWriteのUseCaseに違いがあるなら ◦ → UseCase はUIごとに必要になる （今回はシンプルなので共通化できただけ？） • その上で、仮にUseCase を共有できないなら ◦ → ドメインオブジェクトに似て非なるメソッドがたくさん増えるのでは？ ▪ ドメインオブジェクトの肥大化へ（いわゆるクソデカ集約） • ところで、ドメインオブジェクト（方針）は本当に安定しているのか？ ◦ 変化したら関連するUseCaseを全部書き換えないといけない ▪ 「恣意性から考える、変更に強いモデルの作り方」吉田あひるさん • https://speakerdeck.com/yahiru/zi-yi-xing-karakao-eru-bian-geng-niqiang-imoderunozuo-rifang 3. 作成したアプリの考察
64. 64 © 2012-2025 BASE, Inc. 3. 作成したアプリの考察 探求は続く...
65. 65 © 2012-2025 BASE, Inc. 3. 作成したアプリの考察 Thank you, Uncle Bob https://x.com/unclebobmartin
66. 66 © 2012-2025 BASE, Inc. （付録）クリーンアーキテクチャ本 とは何だったのか
67. 67 © 2012-2025 BASE, Inc. クリーンアーキテクチャ本とは何だったのか • クリーンアーキテクチャ本の 「コンポーネントの原則」の 話は世間で全然されていない • 「SOLID原則の原型」が由来 なのでは？ つまり、どこまで行っても SOLID原則の話（OOPがうまく いくルール） （もちろんプラスアルファもあるけど、本質 はこれだと自分は考えている） どこまで行ってもSOLID原則の話なのでは？ 「SOLIDの原則って何ですか？」って質問に答えたかった - Satoshi Kawashima https://speakerdeck.com/nazonohito51/whats-solid-principle?slide=7
68. 68 © 2012-2025 BASE, Inc. （付録）ボブおじさんは何者なのか
69. 69 © 2012-2025 BASE, Inc. ボブおじさんは何者なのか • 思想を学ぶ2つのアプローチ ◦ 人を知る ▪ その人の生い立ちや背景を知る ◦ 同じテーマで横断的に思想を知る ▪ 同じことを考えた別の時代、別の場所の 人の思想を知る • 今回は「人を知る」アプローチを取る ◦ 後者で攻める場合は『ソフトウェアアーキ テクチャの基礎』『アーキテクトの教科 書』などをどうぞ 思想を学ぶ2つのアプローチ
70. 70 © 2012-2025 BASE, Inc. ボブおじさんは何者なのか • 経歴 ◦ 1970年、10代からプログラミングを開始 ◦ 2000年代初頭にSOLID原則をまとめる ◦ ソフトウェアのコンサル会社を設立 ◦ 『C++ Report』の元編集長 • 師匠はGrady Booch ◦ UML図を作った人 • Clean Architectureの書籍レビューに Kent Beck も Martin Fowler も James O. Coplien のような大御所たちも参加 • 本もたくさん書く ◦ 最新作は”We, Programmers” ボブおじさんは何者か - 経歴 The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か https://speakerdeck.com/twada/why-the-clean-architecture-does-not-fit-with-web-frontend
71. 71 © 2012-2025 BASE, Inc. ボブおじさんは何者なのか ◦ アジャイルソフトウェア開発宣言の署名者 の一人 ◦ つまり、OOP、TDD、アジャイル開発の黎 明期からいる人 ▪ 最近はClojureが大好き ボブおじさんは何者か - 経歴 スクラムフェス大阪2022基調講演「クリーンスクラム―基本に立ち戻れ―」 https://www.docswell.com/s/kdmsnr/5EVLNK-clean-scrum Manifesto for Agile Software Development https://agilemanifesto.org/iso/en/manifesto.html
72. 72 © 2012-2025 BASE, Inc. ボブおじさんは何者なのか • クリーンなコードを書くことに情熱を燃やし ている • グリーンバンドを始めた？人 ◦ 『TDDブートキャンプで「テストを書くの はつらい。Bob Martinも acts_as_professionalと刻んだグリーン バンドを身につけて、自分を戒めてるん だ」というエピソードが紹介される』 （2010年） ▪ https://mzp.hatenadiary.org/entry/20100711/gr eenband ◦ 自分もこのグリーンバンド持ってます（笑） ボブおじさんは何者か - 経歴 スクラムフェス大阪2022基調講演「クリーンスクラム―基本に立ち戻れ―」 https://www.docswell.com/s/kdmsnr/5EVLNK-clean-scrum
73. 73 © 2012-2025 BASE, Inc. （付録）ボブおじさんの成功体験
74. 74 © 2012-2025 BASE, Inc. ボブおじさんの成功体験 『たとえば、カードデッキから入力データを読み込み、新しいデッキにパンチを出力する プログラムをよく書いていた。その後、顧客からカードデッキの代わりに、磁気テープの リールを渡されるようになった。これが非常に不便だった。プログラムの大部分を書き直 す必要があったからだ。同じプログラムでカードとテープが動作すればいいのにと思って いた。プラグインアーキテクチャは、こうしたIOデバイスの非依存性をサポートするため に考案されたものだ。』 ボブおじさんの成功体験 - プラグインアーキテクチャ 『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 Robert C.Martin (著), 角 征典 (翻訳), 高木 正弘 (翻訳)
75. 75 © 2012-2025 BASE, Inc. ボブおじさんの成功体験 『永続化の実装を考える時期になったとき、再びMySQLのことが頭に思い浮かんだ。だ が、すぐには必要ないと判断した。ハッシュテーブルをファイルに書き出すのは非常に 簡単だからだ。したがって、ファイルに書き出すための FileSystemWikiPage を実装 し、引き続き機能を開発していった。 　3か月後、ファイルを使うソリューションで十 分だという結論に達した。MySQLを使うアイデアは完全に放棄することにした。我々は 存在価値がなくなるまで決定を遅らせ、決して振り返ることはなかった』 ボブおじさんの成功体験 - 決定の遅延 『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 Robert C.Martin (著), 角 征典 (翻訳), 高木 正弘 (翻訳)
76. 76 © 2012-2025 BASE, Inc. （付録）ボブおじさんの成功体験 Craftsmanship!