Webページは、HTMLだけで作成すると基本的には静的な情報を表示するものになります。見出し、本文、画像、リンク、表、フォームなどを配置することはできますが、ユーザーの操作に応じて画面内容を変更したり、入力内容をリアルタイムに反映したり、ボタンを押した瞬間に表示を切り替えたりするにはJavaScriptが必要になります。現代のWebサイトやWebアプリケーションでは、こうした動的な画面制御が当たり前のように使われています。

DOM操作とは、JavaScriptを使ってWebページの構造や内容をプログラムから変更する仕組みです。DOMはHTML文書をブラウザがオブジェクトのツリー構造として表現したものであり、JavaScriptからその要素を取得したり、テキストを書き換えたり、属性を変更したり、CSSクラスを追加したりできます。つまり、DOM操作はHTMLを読み込んだ後の画面を動的に変化させるための基本技術です。

Web開発では、CSSの規模が大きくなるほど管理が難しくなります。小規模なWebサイトであれば、通常のCSSだけでも十分に管理できますが、ページ数が増え、コンポーネントが増え、デザインルールが複雑になると、同じ色や余白、フォントサイズ、ブレークポイントを何度も記述することになります。その結果、修正漏れやスタイルの不統一が発生しやすくなります。

CSSは現在も進化しており、カスタムプロパティやネイティブのネストなど便利な機能が増えています。しかし、長年のフロントエンド開発では、CSSをより効率的に記述するためにSassやSCSSが広く使われてきました。SCSSはSassの記法の一つで、CSSに近い書き方を保ちながら、変数、ネスト、ミックスイン、演算、ファイル分割などの機能を利用できます。

SCSSを使うと、デザイン上の共通値を変数として管理したり、コンポーネントごとにスタイルを整理したり、繰り返し使うスタイルをミックスインとしてまとめたりできます。これにより、CSSの記述量を減らし、保守性を高め、大規模なUI開発でもスタイルを管理しやすくなります。

Webデザインやアプリ開発では、画像の扱いがユーザー体験や表示品質に大きく影響します。ボタンのアイコン、サービスロゴ、グラフ、図解、イラスト、UIパーツなど、画像は単なる装飾ではなく、情報を伝える重要な要素です。そのため、どの画像形式をどの場面で使うべきかを理解することは、Web制作やフロントエンド開発において非常に重要です。

画像形式には、PNGやJPEGのようなラスタ画像形式と、SVGのようなベクター画像形式があります。ラスタ画像はピクセルの集合として画像を表現するため、写真や複雑な色表現に向いています。一方、SVGは図形や線、パス、テキストなどを数式的・構造的に表現するため、拡大縮小しても画質が劣化しにくい特徴があります。

SVGは、Scalable Vector Graphicsの略で、日本語では拡張可能なベクター画像と説明されることがあります。Web上では、アイコン、ロゴ、UIコンポーネント、チャート、インフォグラフィック、アニメーション表現など、幅広い用途で利用されています。特に高解像度ディスプレイやレスポンシブデザインが一般化した現代のWeb開発では、SVGの重要性はさらに高まっています。

ソフトウェア開発では、ビジネスロジックを外部技術から守ることが非常に重要です。アプリケーションの価値を生み出す中心部分は、データベース、UI、Webフレームワーク、外部API、クラウドサービスそのものではなく、業務ルールやユースケースにあります。たとえば、注文を確定する条件、在庫を引き当てるルール、請求を発行する流れ、ユーザー権限を判定する処理などは、システムの本質的な価値に直結します。

しかし、実際の開発では、ビジネスロジックがデータベースやUI、フレームワークに強く依存してしまうことがあります。たとえば、サービスクラスの中にORM固有の処理が深く入り込んだり、コントローラーに業務判断が書かれたり、外部APIの仕様がユースケース全体に漏れたりする状態です。このような設計では、技術変更や仕様変更の影響範囲が広がり、保守性が低下します。

アプリケーション開発では、データベースとの連携が欠かせません。ユーザー情報、商品情報、注文履歴、投稿データ、在庫情報、決済情報など、多くのシステムはデータを保存し、必要に応じて検索・更新・削除します。そのため、バックエンド開発ではデータベース操作をどのように安全かつ効率的に扱うかが重要なテーマになります。

一方で、アプリケーション側で使われるオブジェクト指向言語と、データベース側で使われるリレーショナルデータベースには構造上の違いがあります。オブジェクト指向ではクラスやオブジェクト、継承、関連、振る舞いなどを中心に設計しますが、リレーショナルデータベースではテーブル、行、列、主キー、外部キー、正規化などを中心にデータを管理します。この違いをそのまま扱うと、アプリケーションコードとSQLの間で変換処理が増え、保守性が低下することがあります。

ORMは、このギャップを埋めるために生まれた技術です。ORMはObject Relational Mappingの略で、日本語ではオブジェクト関係マッピングと呼ばれます。アプリケーション側のオブジェクトとデータベース側のテーブルを対応付けることで、開発者はSQLを直接大量に書かなくても、オブジェクト操作に近い形でデータベースを扱えるようになります。

Webアプリケーション開発では、データベースとの連携が欠かせません。ユーザー情報、商品情報、注文履歴、投稿データ、決済情報、ログデータなど、多くのアプリケーションは何らかの形でデータを保存し、検索し、更新し、削除します。そのため、バックエンド開発ではデータベース操作をどのように安全かつ効率的に扱うかが重要なテーマになります。

SQLを直接記述する方法は柔軟で強力ですが、アプリケーションの規模が大きくなると、型安全性、保守性、記述量、スキーマ変更への対応、チーム内での実装統一などに課題が出てきます。特にTypeScriptを使った開発では、データベースの構造とアプリケーション側の型定義がずれてしまうと、実行時エラーや予期しない不具合につながる可能性があります。

Prismaは、Node.jsとTypeScript向けに利用される次世代ORMです。データモデルをPrisma Schemaで定義し、そこから型安全なPrisma Clientを自動生成することで、データベース操作を直感的かつ安全に行えるようにします。クエリの自動補完や型推論が効くため、開発体験が高く、モダンなバックエンド開発で広く採用されています。

ソフトウェアアーキテクチャは、単に利用するフレームワーク、データベース、クラウドサービス、フォルダ構成を決めるためのものではありません。本来のアーキテクチャは、そのアプリケーションが何を目的としているのか、どのような業務課題を解決するのか、どのような価値を提供するのかを構造から理解できるものであるべきです。コードを見たときに、最初に技術スタックだけが目立つのではなく、ビジネスの目的や主要なユースケースが伝わる構造になっていることが理想です。

叫ぶアーキテクチャは、この考え方を端的に表した設計思想です。英語ではScreaming Architectureと呼ばれ、ロバート・C・マーティン、通称Uncle Bobによって広く知られるようになりました。この思想では、アプリケーションの構造は「このシステムは何のためのものか」を叫ぶべきだと考えます。つまり、フォルダ構成やモジュール構成を見たときに、フレームワーク名や技術層ではなく、業務機能やドメインの意味が読み取れるべきだということです。

オブジェクト指向設計では、データと振る舞いを一緒に管理することが重要です。オブジェクトは単なるデータの入れ物ではなく、自分の状態を持ち、その状態に基づいて適切な処理を実行する存在として設計されます。しかし実務では、オブジェクトから値を取得し、その値を外部のクラスや関数で判定して処理する実装が多く見られます。このような設計では、ロジックがオブジェクトの外側に散らばり、保守性が低下しやすくなります。

Tell, Don't Askは、このような設計上の問題を改善するための原則です。直訳すると「尋ねるのではなく、命じる」という意味であり、オブジェクトの内部状態を外部から取得して判断するのではなく、オブジェクト自身に処理を依頼するべきだという考え方を示します。これはカプセル化、責務分離、保守性向上と深く関係する重要な設計原則です。

本記事では、Tell, Don't Askの基本概念、TellとAskの違い、なぜこの原則が必要なのか、オブジェクト指向設計との関係、Ask中心設計が抱える問題、Tell中心設計がもたらす効果、Feature EnvyやAnemic Domain Modelとの関係、Law of DemeterやSOLID原則とのつながりまで体系的に解説します。

ソフトウェア開発では、機能を素早く実装するだけでなく、長期的に保守しやすく、変更に強い構造を作ることが重要です。特に業務システムやSaaS、長期運用されるWebアプリケーションでは、要件変更、技術変更、外部サービス変更、データベース変更などが継続的に発生します。そのため、ビジネスロジックが特定のフレームワークやデータベース、外部APIに強く依存していると、変更のたびに大きな修正が必要になります。

このような課題に対して有効な設計思想の一つが、オニオンアーキテクチャです。オニオンアーキテクチャは、ドメインモデルをシステムの中心に置き、依存関係を常に内側へ向けるアーキテクチャパターンです。外側にはデータベース、UI、外部サービス、フレームワークなどの技術的な実装を配置し、中心にあるビジネスルールがそれらに依存しないように設計します。

オニオンアーキテクチャでは、システムを同心円状の層として考えます。中心にはドメイン層があり、その外側にアプリケーション層、さらに外側にインフラ層やプレゼンテーション層が配置されます。重要なのは、外側の層は内側の層を知ってよいが、内側の層は外側の層を知らないという依存関係ルールです。このルールによって、ビジネスロジックを技術的な詳細から守ることができます。

ソフトウェア開発では、同じデータの組み合わせが複数のメソッド、クラス、処理フローの中で繰り返し登場することがあります。たとえば、firstName と lastName、zipCode と address、startDate と endDate のように、常に一緒に扱われるデータが別々の引数やフィールドとして何度も現れる場合があります。一見すると単なるデータの並びに見えるかもしれませんが、これは設計上の改善ポイントを示している可能性があります。

このような状態は、コードスメルの一種として「データのかたまり」と呼ばれます。データのかたまりは、関連性の強いデータがオブジェクトとして表現されず、バラバラの値として扱われ続けている状態を示します。すぐにバグを引き起こすとは限りませんが、放置すると引数の肥大化、修正漏れ、重複ロジック、可読性低下、ドメイン知識の欠落といった問題につながります。