はじめに
Webアプリ開発を体系的に学び直そうと思い、
Angular・Node.js・TypeScript を軸にした学習を始めることにした。
このシリーズは、
完成された解説記事ではなく、
実際に手を動かしながら理解していく過程を記録する実践ノート。
分からないところは分からないまま書くし、
遠回りしたらそれも含めて残す。
それ自体が、あとから見返したときに一番役に立つからだ。
今回この構成を選んだ理由
Webアプリ開発の全体像を理解したい
これまで業務アプリでは、
- 画面
- 処理
- データ
が一体になった構成を触ることが多かった。
Webアプリではこれがはっきり分かれる。
- フロントエンド：画面・操作
- バックエンド：処理・データ
- API：両者をつなぐ
この分離構造を、
「知識として」ではなく「実装として」理解したい。
TypeScript：すべての土台
まず軸になるのが TypeScript。
JavaScriptに型を足した言語で、
AngularもNode.jsも基本はTypeScriptで書く。
TypeScriptの役割は単なる文法拡張ではなく、
- 変数の意味を明確にする
- 設計をコードに埋め込む
- 将来の自分や他人を助ける
という点にある。
感覚的には
**「設計書がコードの中に入っている状態」**に近い。
Angular：画面と操作を担当する
Angularはフロントエンドフレームワーク。
担当範囲はかなりはっきりしている。
- 画面表示
- ユーザー操作
- 入力チェック
- API呼び出し
逆に言うと、
- データベース操作
- 業務ルールの判断
は Angularの仕事ではない。
ここを混ぜると、後で必ず苦しくなる。
Node.js：処理とデータを担当する
Node.jsはバックエンド側。
こちらが担当するのは、
- API提供
- 業務ロジック
- データベース操作
- 認証・権限管理
画面は一切持たない。
Angularからリクエストを受け取り、
**「判断して結果を返す」**ことに専念する。
Angular と Node.js の境界線
この学習で一番大事にしたいのが、ここ。
| 内容 | Angular | Node.js |
|---|---|---|
| 画面表示 | ○ | × |
| 入力チェック | ○ | ○ |
| 業務ルール | × | ○ |
| DB操作 | × | ○ |
DBに触るかどうか
これが一つの明確な境界になる。
なぜ Angular を選んだのか
正直に言うと、
Angularは学習コストが高い。
ただしその分、
- 構造がはっきりしている
- 業務アプリ向け
- 長期運用を前提にしている
という特徴がある。
業務システムを意識するなら、
Angularを避けて通る理由はないと判断した。
このシリーズの進め方
この「Webアプリ開発実践ノート」では、
- TypeScript基礎
- Node.jsでAPI作成
- Angularで画面作成
- APIと画面の連携
- 小さな業務アプリ完成
という流れで進めていく予定。
途中で理解が浅いと感じたら、
遠慮なく立ち止まる。
Day01 のまとめ
- TypeScriptは共通言語であり設計書
- Angularは画面と操作
- Node.jsは処理とデータ
- APIが両者をつなぐ
次回は、
TypeScriptを「JavaScriptの拡張」としてではなく、
「設計の道具」としてどう使うかを整理する予定。
次回予告
Day02：TypeScriptを「設計書」として使う考え方
コメント