TypeScriptで学べるデザインパターン～まとめ～

# はじめに

## なぜデザインパターンを学び始めたのか？

コードリーディングを進める中で、単なるコードの表面的な理解だけではなく、その背後にある設計思想や意図を汲み取ることが重要だと感じる場面が増えました。これを怠ると、プロジェクト全体の設計と噛み合わない実装をしてしまうリスクがあると気付きました。  
そのため、より深い理解を得るために、デザインパターンを学ぶことを決意しました。

また、学習に使用する言語として TypeScript を選んだ理由は、私自身が最も得意とする言語であり、実践的な応用がしやすいと考えたためです。

---

## アドベントカレンダー完走への挑戦

実を言うと、今回デザインパターンを学び始めたもう一つの動機は、Qiita のアドベントカレンダーに挑戦するためでした。そして、その先にある **「Qiita くんのぬいぐるみ」** を手に入れるという目標がありました。

正直なところ、これが最も大きなモチベーションだったかもしれません（笑）。  
この記事が公開されているということは、おそらくアドベントカレンダーを完走できたという証でもあります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/ecdc9118-e0f7-b177-3123-4e5a71f99e43.png)

---

## 記事執筆で心がけたポイント

初心者の方にもデザインパターンに興味を持ってもらえるように工夫を凝らしました。具体的には、各パターンを **「一言でまとめると」** の形式でシンプルに要約し、さらに **日常生活の具体例** を交えて解説するスタイルを取り入れています。  

例えば、以下のスライドのように、一見難解に見える設計原則も日常の具体例を使ってわかりやすく説明する技術に感銘を受け、私自身もそのアプローチを試してみました。その結果、記事中に各パターンに対応した日常の具体例を盛り込む形となりました。

https://speakerdeck.com/h0r15h0/xian-shi-shi-jie-noshi-xiang-karaxue-busolidyuan-ze

ほりしょーさん(スライドの作者)の具体例は身近でとてもわかりやすいです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/18da6a61-e845-785d-440a-20d2b43c1864.png)

さらに、執筆を楽しむ工夫として、ChatGPT を活用してイラストを作成したこともモチベーションの一つでした。自分では描けないような視覚的な補助が簡単に作れるのは非常に助かりました！

特に気に入ったchatGPTで作成したイラスト
<img width=150 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/0d4d3ab2-189c-e87a-7605-7b650c84663d.png"><img width=150 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/40b8e70a-ab15-8ad7-1bf8-20f717ff1c9b.png"><img width=150 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/2efc2b39-e36a-985a-8ac8-57370937ed56.png">


## 反省点と今後の課題

一方で、反省点として、日常の具体例に引っ張られてサンプルコードが実際の開発現場では使いにくいほど簡略化された部分がありました。特に、現場のコードはデザインパターン以外の前提条件や業務ロジックが絡むため、記事内での表現とのバランスが難しいと感じました。  

ただ、デザインパターンの本質を伝えることを優先するための割り切りとも言えます。今後は「具体例の親しみやすさ」と「実務的なリアリティ」のバランスを改善しつつ、より読みやすく有用な記事を書けるようにしていきたいと思います。

# やってみてどうだっったか？
### アドベントカレンダー執筆を通して

12月1日から毎日記事を投稿し、全25記事を無事に公開することができました。その中で、上司が全ての記事にレビューを行ってくれたことには本当に感謝しかないです！毎日のレビュー依頼に快く応じていただき、改善点を的確に指摘していただいたおかげで、内容のクオリティが格段に向上しました。

レビューの様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/67861691-f11e-83a5-c699-b1d5c5a4c479.png)

---

### デザインパターンを学んで得た成果

#### 1. **コードリーディング力の向上**
デザインパターンを学ぶことで、コードから設計意図や背景をより精度高く読み取れるようになりました。以前は見過ごしていた設計上の工夫や構造が明確に理解できるようになり、コードリーディングの際に大きな助けとなりました。

https://speakerdeck.com/h0r15h0/dezainpatanwoxue-ndarashi-jie-gaguang-gatutahua?slide=9

先ほどの、ほりしょーさんの別スライドでデザインパターンを学ぶ前後の変化がわかりやすく説明されています！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3554678/9b0640b0-bd8a-09a6-9d46-4f9297dafb8f.png)

#### 2. **エンジニア同士のコミュニケーションが円滑に**
共通のデザインパターンの知識を持つことで、設計や実装に関する議論がスムーズに進むようになりました。パターンの名前を使うだけで意図が伝わるため、余計な説明の手間が省けるようになったのは大きなメリットです。

#### 3. **設計に対する理解の深化**
デザインパターンを通じて設計に対する解像度が上がり、設計上のトレードオフや選択肢についての判断がしやすくなりました。これにより、より意図的な設計が可能になったと感じています。

---

### 情報発信の効果

記事を執筆する中で感じたのは、「情報は発信する場所に集まる」ということです。デザインパターンについて書いた記事を公開したところ、「TypeScriptではこの機能がこのパターンを表現している」といった具体的なアドバイスや、参考になる資料の共有を受けることができました。  
自分が発信した情報が、新たな知見をもたらすフィードバックとして返ってくるのは大きな収穫でした。

今回の経験を通じて、執筆や情報共有が自身のスキル向上やコミュニティとの繋がりに大きく貢献することを実感しました。

## 今後の学習

### 設計原則の深掘り

現在、以下の設計原則について名前は知っているものの、理解が曖昧な状態で止まっている部分があります。今後はこれらを「人に説明できるレベル」まで深く学び、確実に身に付けていきたいと考えています。

- **SOLID原則**: オブジェクト指向設計の基盤となる原則。
- **ドメイン駆動設計 (DDD)**: 複雑なドメインの問題を解決するためのアプローチ。
- **クリーン・アーキテクチャ**: 長期的に保守性の高いシステムを構築するためのアーキテクチャ設計。

これらを体系的に学ぶことで、実務における設計の質をさらに向上させたいと考えています。

---

### デザインパターンの実践

デザインパターンの学習については、「学ぶだけではなく、コードとして具体的に実装して初めて完成する」という考えを大切にしています。そのため、今後コードを書く際には、今回学んだデザインパターンの知識を積極的に活用し、実際の設計に反映させることを意識して取り組んでいく予定です。

---

これらの学習を通じて、設計に対する理解をさらに深め、より良いコードを書くための基盤を構築していきたいと思います。

最後までお付き合いいただきありがとうございました！

また、来年もQiitaアドベントカレンダーで記事を投稿したいと思います！