Angular入門しました

なぜAngularを学び始めたのか？

シンプルに今の会社ではフロントエンドのFWにAngularが使われていたからです。
バックエンドの領域しか知らなかったのでフロントエンド領域の仕事ができるのがまじで嬉しい。

Angularのプロジェクト構成

僕はAngularのバージョンは17を主に使ってるのでそれを使って軽く紹介していきます。

まずはプロジェクト作成から！
ng new <project_name>

プロジェクト作成し終わった後のsrcディレクトリの中身が以下のような構成になってる。

.
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.config.ts
│   └── app.routes.ts
├── assets
│   └── .gitkeep
├── favicon.ico
├── index.html
├── main.ts
└── styles.css

app.module.tsがv16までappフォルダの中にデフォルトで作られてたけど17では作成されなくなっちゃったらしい。

コンポーネント指向

angularはコンポーネント指向の言語です。
先ほどのプロジェクト構成はプロジェクト作成直後のものなのでここでコンポーネントを作成してみましょう。

コンポーネント作成コマンド
ng generate component <component_name>

作成後のappディレクトリ配下に以下のディレクトリができます。

home
├── home.component.css
├── home.component.html
├── home.component.spec.ts
└── home.component.ts

このhomeディレクトリに含まれるファイルの集合が一つのコンポーネントになっています。
ここでテンプレートだったリパーツだったリを作っていくわけです。

僕は大規模プロジェクトはまだ未経験ですが、規模が大きくなってくるとファイルが分けられてるほうが保守しやすいとかあるのかな～？

まとめ

今回はこんな感じで！これからAngularで学んだことをたまにアウトプットしていきます。