Ccmmutty logo
Commutty IT
・0 pv・15 min read

Angular(TypeScript)入門 インストールから最初に迷ったとこを後で見返す用

AngularTypeScript
https://cdn.magicode.io/media/notebox/a0605ca4-c39d-4336-a2ee-4fdcedc9fe06.jpeg

Angular(TypeScript)環境作成　構成知識まとめ　後で見返す用

この記事は最初に動かすための環境づくりと 前提知識等を殴り書いた記事です。

1. Angularの特色と他のJSとの違い、採用状況

まずJavaScript何がどう使い分けられててどれをやりゃいいかわからん。 についての一旦指標。

Angular vs 他のフレームワーク

特徴AngularReactVue.js
言語TypeScriptJavaScript（JSX）JavaScript
学習コスト高め中程度低め
開発者体験CLIや構造がしっかりしている柔軟で自由度が高い軽量で扱いやすい
構造フルスタック（DI, ルーティング等）ライブラリ寄り（組み合わせ自由）ミニマル
主な用途大規模SPA、業務系WebアプリUI構築、SPA軽量SPA、個人開発

採用率（2024年参考）

2. Angularのインストール方法（Windows）とセットアップ手順

前提：必要なもの

  • Node.js（最新版推奨） → https://nodejs.org/
  • npm（Node.jsと一緒にインストールされる）
はい、でました。やりたいのはAngular(TypeScript)なのにnode.js出てきたやん。という方。
正直動かしたりしてないとよくわかんないし、一旦は知らべて理解するしかありません。
まだ動かしたりすらしてないと思うので一旦そんなもんねくらいで
役割を知り、なぜ必要なのかを知りましょう。

📦 Node.jsとは？Angularにおける役割

🔸 Node.js とは？

  • 本来はサーバーサイド向けに作られた JavaScript実行環境（ランタイム）
  • WebブラウザなしでJSが実行できる
  • Angularの開発では「サーバー」ではなく、開発環境の基盤として使います。

🧰 AngularでのNode.jsの具体的な使い道

使用箇所説明
Angular CLI (ng newなど)Angularのプロジェクト作成・開発サーバー起動ツールはNode.jsベース
パッケージ管理（npm）ライブラリやツールのインストールに npm（Node.js付属）を使用
ビルド/トランスパイルTypeScript → JavaScript の変換処理をNode.jsで実行
開発サーバー（ng serve）ローカルサーバーをNode.js上で起動してブラウザに反映

💡 なぜNode.jsが必要なの？

AngularはTypeScript + 多機能な構成のため、以下が自動的に行われる：
  • TypeScript → JavaScript の変換（トランスパイル）
  • コンポーネントの結合や最適化（ビルド）
  • ライブリロード付きの開発サーバー起動
  • npm経由でのパッケージ導入・依存管理
これらを裏で支えるのが Node.js です。

✅ Node.js導入のポイント

🔧 インストール方法（Windows）

記事の中で被ってたらごめんなさい。
  1. Node.js公式サイトからLTS版をダウンロード
  2. インストーラーを実行（デフォルト設定でOK）
  3. インストール確認：
    node -v
npm -v

🔁 よく使うコマンド例

コマンド説明
node -vNode.jsのバージョンを確認
npm -vnpmのバージョンを確認
npm installパッケージをインストール（package.json準拠）
npm install -g @angular/cliAngular CLIをグローバルにインストール

📌 まとめ

  • Node.jsはAngularの「開発ツール群」を動かすための基盤
  • 実際のアプリではサーバーにはならない（開発用のみ）
  • npmと合わせてセットで理解するとスムーズ

Angular CLI のインストール

はい。一旦node.jsってそんなもんね。と理解したぐらいでAngularに戻りましょう。
npm install -g @angular/cli

プロジェクト作成

ng new my-angular-app
プロンプトの選択肢（例）
質問内容選択例説明
Do you want to add routing?Yesルーティングを使うかどうか
Which stylesheet format?SCSSCSSプリプロセッサの選択
Package managernpm / yarn使用するパッケージマネージャー

開発サーバーの起動

cd my-angular-app
ng serve --open
このあたりで今後の改善のためにGoogleにデータ共有しますか？(英語で)
みたいなやつが出てきたらy/nどっちでも動くのでそこは好きにしてください。

3. Angularの基本構成とデモ

フォルダ構成（初期状態）

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts       // コンポーネントの本体
│   │   ├── app.component.html     // テンプレート
│   │   ├── app.component.css      // スタイル
│   │   └── app.module.ts          // モジュール設定
│   └── index.html                 // HTMLのエントリポイント
├── angular.json                  // Angular CLI設定
├── package.json                  // npmパッケージ情報

こういうの始めたてあるある。どこでいつ何を使うん。まとめました。

ここね。いつも慣れるまでホント大変なやつね。なのでまとめて置く。
もはやここのために記事書いているまであるよね。ホント覚えられん。
Angularの基本構成と各ファイルの詳細説明（編集タイミング・初期状態・変更例）
src/app 配下を中心とした基本構成ファイルの詳細。
もうちょい細かい内容についてはまた記載しようと思う。

app.component.ts（コンポーネント本体）

項目内容
編集する時表示するデータやロジックを制御したいとき
初期状態title: string = 'my-angular-app' という変数が定義されている
変更例title を自分の名前や説明に変えて画面上のテキストを変更
export class AppComponent {
  title = 'こんにちは、Angular！';
  message = 'ボタンを押してください';

  onClick() {
    this.message = '押されました！';
  }
}

app.component.html（テンプレート）

項目内容
編集する時画面に表示する内容を変更したいとき
初期状態`

{{ title }}

というように、title` を表示する構文 | | 変更例 | ボタンやイベントバインディング（クリックイベント）を追加 |
# {{ title }}


<p>{{ message }}</p>
<button (click)="onClick()">クリック</button>

app.component.css（スタイル）

項目内容
編集する時見た目を変更したいとき（文字サイズ、色など）
初期状態空（基本的に何もスタイルが指定されていない）
変更例タイトルに色やマージンを追加
h1 {
  color: teal;
  margin-bottom: 10px;
}

app.module.ts（モジュール設定）

項目内容
編集する時新しいコンポーネントやモジュール（FormsModuleなど）を使うとき
初期状態AppComponent が declarations に含まれている
変更例FormsModule や HttpClientModule を imports に追加
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 追加！

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // ここに追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html（アプリのエントリーポイント）

項目内容
編集する時HTMLの <head> にメタ情報や外部CSSを追加したい時
初期状態<app-root></app-root> が <body> 内に配置されている
変更例タイトルの変更やBootstrapのCDN追加など
<head>
  <meta charset="utf-8">
  <title>Angular入門</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>

angular.json（Angular CLIの設定ファイル）

項目内容
編集する時ビルド設定やスタイル/スクリプトのグローバル追加をしたい時
初期状態アプリ構成、出力先、スタイルのパスなどが記載されている
変更例Bootstrapなどを全体スタイルとして読み込む
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

package.json（依存ライブラリ・スクリプト一覧）

項目内容
編集する時パッケージを追加・バージョン確認したい時
初期状態Angular本体のパッケージや開発ツールが記載されている
変更例"npm install lodash" などでライブラリを追加した際に更新される

Hello world

インストール完了後の動作確認用
app.component.html に以下を追加：
# Hello Angular!


<p>{{ message }}</p>
app.component.ts に以下を追加：
export class AppComponent {
  message = 'これは初めてのAngularアプリです';
}
以下「Hello world」の実行方法と手順。。

✅ 「Hello Angular!」を表示する手順

① プロジェクト作成（初回のみ）

ng new hello-angular
  • 質問に対してはすべてデフォルトのままでOK（Routing?→No、CSS選択→CSS）

② 作成したディレクトリへ移動

cd hello-angular

✏️ 編集するファイル

src/app/app.component.html

このファイルに表示したいHTMLを書きます。
# Hello Angular!


<p>{{ message }}</p>

src/app/app.component.ts

このファイルにクラスのプロパティ（message）を追加します。
export class AppComponent {
  message = 'これは初めてのAngularアプリです';
}

▶️ 開発サーバーで実行

以下のコマンドでアプリを起動します
ng serve
またはポート指定する場合
ng serve --port 4200
ブラウザで自動的に http://localhost:4200/ が開き、次のように表示されれば成功
Hello Angular!
これは初めてのAngularアプリです

📝補足

  • ng serve は 変更をリアルタイムで監視し、更新も自動反映 されます。
  • ファイルを保存するだけでブラウザが更新されるので便利。

📌 コマンドまとめ

npm install -g @angular/cli     # Angular CLI インストール（初回のみ）
ng new hello-angular            # 新規プロジェクト作成
cd hello-angular                # プロジェクトに移動
ng serve                        # 開発サーバー起動

4. コード規約と命名規則（キャメルケースなど）

Angularでは、Googleのスタイルガイドに基づいた命名規則が推奨されているそうなので ここを参照しましょう。

代表的な命名スタイル

対象スタイル例
変数・関数名キャメルケースuserName, getData()
クラス名パスカルケースUserService, AppComponent
ファイル名ケバブケースapp.component.ts, user-profile.component.ts
ディレクトリ名ケバブケースuser-profile/

コンポーネント命名

  • コンポーネントクラス名 → PascalCase + Component 例：UserProfileComponent
  • コンポーネントのセレクタ → ケバブケース 例：<app-user-profile></app-user-profile>

🔁 Angular vs AngularJS 比較表（ざっくり把握）

Angular（2以降）とAngularJS（1.x） は名前は似ていますが、全くの別物と言っていいほど違う。 大体こういうドッペルゲンガー見たいのいるよね。 ずっとふんわり出てくるAngularJSはオススメされませんよのやつのまとめ。
項目Angular（2以降）AngularJS（1.x）
リリース開始2016年（Angular 2）2010年（AngularJS 1.0）
言語TypeScript（+HTML）JavaScript（+HTML）
アーキテクチャコンポーネントベースMVC/MVVMベース
データバインディング双方向 + 単方向（選択可能）主に双方向バインディング
DI（依存性注入）公式で強力なDIコンテナあり独自で簡易的なDI
モバイル対応Angular + Ionicなどで対応非対応
パフォーマンス高速。AOT/Tree Shaking対応重くなりがち
メンテナンス現在も活発に開発・保守中既にサポート終了済（2022年）
開発対象モダンWeb、モバイル、PWAなど当時のシンプルなWebアプリ

🔹 具体的な違いポイント

🔸 1. コードの書き方がまるで違う

時々調べてると出てくるこれマジでファイル別にしてるだけなのか。とか思ってたので頭の中？？？でした。
AngularJS（JSベース）：
<div ng-app="" ng-controller="MainCtrl">
  <p>{{ message }}</p>
</div>

<script>
  function MainCtrl($scope) {
    $scope.message = "こんにちは！";
  }
</script>
Angular（TypeScriptベース）：
export class AppComponent {
  message = 'こんにちは！';
}
<p>{{ message }}</p>

🔸 2. TypeScriptで型安全・補完が強力

  • Angular（2以降）は TypeScriptベース
  • 開発ツールでの補完が効きやすく、大規模開発や保守に向く

🔸 3. モバイル開発も視野に入っている

Webアプリ目的で始めた時あんま気づかなかったけど
  • Angularは、Ionic や NativeScript と組み合わせてスマホアプリ開発も可能
  • AngularJSはWebアプリ専用

🔸 4. AngularJSはサポート終了済み（2022年末）

すでに セキュリティアップデートも提供されていません
これから始める場合は 必ず Angular（2以降） を選んでください。 だそうです。大分初めの段階で気づけたのは時間を無駄にせずにすんでよかった。

✅ Angular（2以降）とAngularJSの結論

質問回答
AngularJSを今から学ぶべき？❌ いいえ。古く、非推奨です。
Angular（2以降）を学ぶべき？✅ はい。現代の主流です。
名前は似てるけど中身は同じ？❌ 全く違います（作り直しレベル）

💡補足

  • AngularJS（1.x） は「Angular 2」が出たタイミングで「レガシー扱い」になった。
  • 「AngularJS」と「Angular（2〜）」は別フレームワークとして考えるのが正解。

おわりに

いやー慣れん。むずい。めんどい。ファイルが多い。
始めた時のメモをそのまま殴り書きでしたがこの記事ですが 都度都度見直しに来て頑張ろうと思います。

Discussion

コメントにはログインが必要です。