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

Slide 1

Slide 1 text

@TS Kaigi 2025（2025/5/23）プログラミングをするパンダ（@Panda_Program） TypeScriptで実践するクリーンアーキテクチャ WebからもCLIからも使えるアプリ設計 1

Slide 2

Slide 2 text

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）

Slide 3

Slide 3 text

Slide 4

Slide 4 text

4 © 2012-2025 BASE, Inc. 宣伝 BASEはリアーキテクチャ中です ● BASEはモジュラーモノリスで開発している ○ 各モジュールはクリーンアーキテクチャ ○ 業務領域の理解をして、コードに反映させる取り組み（DDD）で開発している ● （ただ、レガシーなモノリスもまだ全然ある）よければこちらもぜひ「モジュラーモノリスでスケーラブルなシステムを作る BASE のリアーキテクチャのいま（@Panda_Program）」 https://speakerdeck.com/panda_program/base-modu lar-monolith

Slide 5

Slide 5 text

5 © 2012-2025 BASE, Inc. 宣伝 YouTubeでエンジニア向けのラジオを配信してます（@dialog-radio） https://www.youtube.com/@dialog-radio/videos ● ブログや登壇とはまた違った内容です ○ プロダクトエンジニアって何だろう？ ○ プロダクトオーナーとエンジニアの違いとは？ ○ 勉強会のスキルアップ以外の意義とは？ ● 毎週月曜日、朝7時配信 ○ ぜひご視聴 & チャンネル登録お願いします！

Slide 6

Slide 6 text

Slide 7

Slide 7 text

はじめにはじめに 77

Slide 8

Slide 8 text

はじめに終わらせましょう 88

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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 (著), 角征典 (翻訳), 高木正弘 (翻訳) （本スライドで明記のないものは本書からの引用）

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か「本書で提唱されている「Clean Architecture」については、（中略）見よう見まねでアーキテクチャの「同心円」を実装している例が数多く見られる。だが、著者のように原理・原則に忠実であるためにも、まずは本書に目を通してもらいたい。そして、著者と対話しながら、自らのアーキテクチャをクリーンにしてもらえれば幸いだ」訳者の一人（角さん）のあとがき

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何かボブおじさん（Robert C. Martin）が考えるアーキテクチャの理想 Robert Cecil Martin（wikipedia） https://it.wikipedia.org/wiki/Robert_Cecil_Martin ● 少ない労力で大きな成果 ○ 「ソフトウェアを正しくすると、不思議なことが起こる。ソフトウェアを動かすのに大量のプログラマが不要になる」 ● ボブおじさんの成功体験（1990年代） ○ 「ROSEにはアーキテクチャがあった。（中略）それは真のレイヤーで構成され、レイヤーの依存関係は適切に制御されていた。アーキテクチャが、リリース可能、開発可能、独立してデプロイ可能にしていたのである」

Slide 19

Slide 19 text

19 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か ● アーキテクチャにはルールがある ○ 「アーキテクチャのルールとは、プログラムの構成要素を組み立てるルールである」 ● 優れたアーキテクチャの特徴 ○ 方針と詳細の分割（関心の分離） ■ 方針:ビジネスルールとビジネスロジック ■ 詳細:プラグイン化できる → 最終的な決定を遅延できる ● 依存の制御 ● 労力の最小化と生産性の最大化コアの主張は何か Robert Martin Interviews - The Accidental Engineer https://theaccidentalengineer.com/guests/robert-martin/

Slide 20

Slide 20 text

20 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か ● 「ソフトウェア（コンピュータプログラムの本質）は、『順次』『選択』『反復』と『間接参照』で構成されている。それ以上でも、それ以下でもない」 ● プログラムの構成要素 ○ 順次（seq） ○ 選択（if） ○ 反復（for） ○ 間接参照（ref） ■ （変数の初期化、書き込み、読み出し） ● 手続型、オブジェクト指向型、関数型どのように実現するのか - プログラミング

Slide 21

Slide 21 text

21 © 2012-2025 BASE, Inc. ● OOはこれではない（by ボブおじさん） ○ データと関数の組み合わせ ○ 現実世界をモデル化する方法 ○ カプセル化・継承・ポリモーフィズムの組み合わせ ● OOとはこれである（by ボブおじさん） ○ ポリモーフィズムを使用することで、システムにあるすべてのソースコードの依存関係を絶対的に制御する能力（個人的には「OOのこの力が一番強力である」くらいの表現でいいと思うけど、この辺りはボブおじさんの本の「醍醐味」） 1. クリーンアーキテクチャとは何かどのように実現するのか - オブジェクト指向 Ray.Di オブジェクトグラフの視覚化 - @koriyam https://qiita.com/koriym/items/7439fb9290498b2c4771

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

25 © 2012-2025 BASE, Inc. 1. クリーンアーキテクチャとは何か ● （超まとめ）ソフトウェアを構築するにあたり、プログラミングはオブジェクト指向で。そのポリモーフィズムの機能に着目し、DIP を活かして依存の方向を制御しているのがクリーンアーキテクチャだ（一応OOじゃなくてもいいと書籍内には書いてはいる） ● 「クリーンアーキテクチャ」がもたらすもの ○ フレームワーク非依存 ○ UI非依存 ○ データベース非依存 ○ 外部エージェント非依存 ○ テスト可能クリーンアーキテクチャは何をもたらすのか

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

28 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● クリーンアーキテクチャを実践してみたい ○ 入出力をWebに限定しないアプリを作った ● スクラムチームを管理するアプリケーションを作成した ○ スクラムマスター、プロダクトオーナー、開発者を扱う構成である ○ Webからもターミナルからも人員の追加・変更・削除ができる ■ 左図は「両方でチームメンバーを一覧できる」ことを示している問題意識 → 実際にやってみた TypeScriptでクリーンアーキテクチャを実践する - WebでもCLIでも使えるアプリケーションの作り方（@Panda_Program） https://zenn.dev/panda_program/articles/clean-architecture-application

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

32 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● ビジネスルールを記述する（業務） ○ ex. スクラムチームは、スクラムマスター（SM）1人、プロダクトオーナー（PO） 1人、複数人の開発者で構成される ○ ex. 開発者はSMを兼務可能だが、POは兼務不可能である ● PureなTypeScriptで記述する（技術） ○ 各クラスは、不変条件のバリデーションとドメインロジックを持つ ● インターフェースを置く ● 外部依存なし = フレームワーク非依存方針 - ドメイン層（packages/core）

Slide 33

Slide 33 text

Slide 34

Slide 34 text

34 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● アプリケーション固有の機能（ユースケース）を定義する ○ ドメイン層のオブジェクトとインターフェースのみに依存する ● 「オブジェクトがダンスする」 ○ 様々なオブジェクトを作成したり、メソッドを呼び出す ○ オブジェクトが協調してタスクをこなす場 ○ アプリの外部と内部が交わる場所 ● CQRSを意識して UseCase（Write）と QueryService（Read）を分けて実装した方針 - ユースケース層（packages/usecase）

Slide 35

Slide 35 text

35 © 2012-2025 BASE, Inc. 2. 実際にやってみた方針 - ユースケース層（packages/usecase） ScrumTeamUseCase ドメイン層(core)にのみ依存する「オブジェクトがダンスする」以下のオブジェクトが協調してタスクを実行している ● command オブジェクト（引数） ● ScrumTeamRepository オブジェクト ● ScrumTeam オブジェクト

Slide 36

Slide 36 text

36 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● 外部システムとの連携を扱う ○ データベースや外部サービスへ実際にアクセスする ○ 外部システムとの境界にインターフェースを作る ● ドメイン層に作成したインターフェースを実装するレイヤー ● ボブおじさんが「プラグインのように置き換えられる」と言っているのはここを含めた外側詳細 - ゲートウェイ層（packages/gateway）

Slide 37

Slide 37 text

37 © 2012-2025 BASE, Inc. 2. 実際にやってみた詳細 - ゲートウェイ層（packages/gateway） ScrumTeamRepository core と具体的な技術（ここでは JSONファイルを扱うlowdb）にのみ依存する同じレポジトリインターフェースを実装すれば、永続化先は MySQLにもNoSQLでも外部API でも何でもOK (ポリモーフィズム, プラグイン)

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 © 2012-2025 BASE, Inc. 2. 実際にやってみた詳細 - 入出力層（apps/web） ● チーム管理は ScrumTeamUseCase を使う ○ create メソッドと edit メソッドを持っている ■ （ただ、CreateScrumTeamUseCaseと EditScrumTeamUseCaseに分けた方が色々簡単になるはず） ● メソッドに応じて入力値を分ける ○ CreateScrumTeamWebCommand ○ EditScrumTeamWebCommand ● チームの作成と編集をメソッドで分ける ○ ScrumTeamUseCase().create(command) ○ ScrumTeamUseCase().edit(command)

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

48 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● チームメンバー一覧 ● Query - 読み取り ○ $pnpm scrum list-team コマンド ○ ListScrumTeamQueryService でデータを取得 ○ ListScrumTeamPresenter で表示を整形した ● プロダクトオーナーやスクラムマスターを console.info で出力する詳細 - 入出力層（apps/cli）

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

51 © 2012-2025 BASE, Inc. 2. 実際にやってみた詳細 - 入出力層（apps/cli） ● (おさらい)チーム管理には ScrumTeamUseCase を使う ○ 入力値: EditScrumTeamCLICommand ○ ScrumTeamUseCase().edit(command) ● ScrumTeamUseCase は Web と CLI で共通！！ ○ EditScrumTeamCommandInterfaceを作り、 Web と CLI でそれぞれ実装した ● Web か CLI かで UseCase が分かれていない ○ = 下図の通り、方針が詳細に依存していない

Slide 52

Slide 52 text

52 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● 別プラットフォームのUIを作れる ○ スマホアプリ → @apps/native ■ Expo（React Native） ○ APIサーバー → @apps/api ■ Hono, Express.js etc. ● DBも差し替えられる ○ RDB ■ RDS, Cloudﬂare D1 etc. ○ Key Value ■ Redis, Vercel KV etc. ○ 外部APIでも良いクリーンアーキテクチャの恩恵

Slide 53

Slide 53 text

53 © 2012-2025 BASE, Inc. 2. 実際にやってみた今回の内容については Zenn で記事を公開中 → https://zenn.dev/panda_program/articles/clean-architecture-application GitHub でプログラムを公開中 → https://github.com/Panda-Program-Web/scrum よければこちらもご覧ください

Slide 54

Slide 54 text

Slide 55

Slide 55 text

55 © 2012-2025 BASE, Inc. 2. 実際にやってみた ● 『オブジェクト設計スタイルガイド』で発表したことがあるのでぜひ見てみてください ● 同心円の図も出てくるよ具体的なコードを学ぶ - 『オブジェクト設計スタイルガイド』（通称スタイルガイド本）軽量DDDはもういらない！スタイルガイド本で OOPの実装パターンを学ぼう（@Panda_Program） https://speakerdeck.com/panda_program/no-more-lightweight-ddd 『オブジェクト設計スタイルガイド』Matthias Noback著、田中裕一訳

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

60 © 2012-2025 BASE, Inc. 3. 作成したアプリの考察 ● 「クリーンアーキテクチャ」がもたらすもの ○ フレームワーク非依存 ○ UI非依存 ○ データベース非依存（本当はDI機構が必要だが、本アプリでは省略） ○ 外部エージェント非依存 ○ テスト可能 ■ 今回は触れていないが、各レイヤーのオブジェクトはテスト可能 ● 実際にできた！クリーンアーキテクチャは何をもたらすのか

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Slide 63

Slide 63 text

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. 作成したアプリの考察

Slide 64

Slide 64 text

Slide 65

Slide 65 text

Slide 66

Slide 66 text

Slide 67

Slide 67 text

67 © 2012-2025 BASE, Inc. クリーンアーキテクチャ本とは何だったのか ● クリーンアーキテクチャ本の「コンポーネントの原則」の話は世間で全然されていない ● 「SOLID原則の原型」が由来なのでは？つまり、どこまで行っても SOLID原則の話（OOPがうまくいくルール）（もちろんプラスアルファもあるけど、本質はこれだと自分は考えている）どこまで行ってもSOLID原則の話なのでは？「SOLIDの原則って何ですか？」って質問に答えたかった - Satoshi Kawashima https://speakerdeck.com/nazonohito51/whats-solid-principle?slide=7

Slide 68

Slide 68 text

Slide 69

Slide 69 text

69 © 2012-2025 BASE, Inc. ボブおじさんは何者なのか ● 思想を学ぶ2つのアプローチ ○ 人を知る ■ その人の生い立ちや背景を知る ○ 同じテーマで横断的に思想を知る ■ 同じことを考えた別の時代、別の場所の人の思想を知る ● 今回は「人を知る」アプローチを取る ○ 後者で攻める場合は『ソフトウェアアーキテクチャの基礎』『アーキテクトの教科書』などをどうぞ思想を学ぶ2つのアプローチ

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Slide 74

Slide 74 text

74 © 2012-2025 BASE, Inc. ボブおじさんの成功体験『たとえば、カードデッキから入力データを読み込み、新しいデッキにパンチを出力するプログラムをよく書いていた。その後、顧客からカードデッキの代わりに、磁気テープのリールを渡されるようになった。これが非常に不便だった。プログラムの大部分を書き直す必要があったからだ。同じプログラムでカードとテープが動作すればいいのにと思っていた。プラグインアーキテクチャは、こうしたIOデバイスの非依存性をサポートするために考案されたものだ。』ボブおじさんの成功体験 - プラグインアーキテクチャ『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 Robert C.Martin (著), 角征典 (翻訳), 高木正弘 (翻訳)

Slide 75

Slide 75 text

75 © 2012-2025 BASE, Inc. ボブおじさんの成功体験『永続化の実装を考える時期になったとき、再びMySQLのことが頭に思い浮かんだ。だが、すぐには必要ないと判断した。ハッシュテーブルをファイルに書き出すのは非常に簡単だからだ。したがって、ファイルに書き出すための FileSystemWikiPage を実装し、引き続き機能を開発していった。　3か月後、ファイルを使うソリューションで十分だという結論に達した。MySQLを使うアイデアは完全に放棄することにした。我々は存在価値がなくなるまで決定を遅らせ、決して振り返ることはなかった』ボブおじさんの成功体験 - 決定の遅延『Clean Architecture 達人に学ぶソフトウェアの構造と設計』 Robert C.Martin (著), 角征典 (翻訳), 高木正弘 (翻訳)