Angularのコンポーネントの作成方法を解説

Angularでコンポーネントを作成するにはどうすればいいんだろう…

この記事では上記の悩みを解決します。

Angularでアプリ開発を行う際にまずコンポーネントを作成してそれぞれのファイルを編集する必要があります。

なので、まずはそのコンポーネント作成方法について本記事は具体的に解説していきます。

コンポーネントの作成方法

Angularでコンポーネントを作成する方法は以下のようにコマンドを叩きます。

sampleというコンポーネントを作成したい場合

yoteiPicker % ng generate component sample

src/app以下に、4つのコンポーネントファイルが作成されます。

src/app/sample/sample.component.css
src/app/sample/sample.component.html
src/app/sample/sample.component.spec.ts
src/app/sample/sample.component.ts

generateは省略可能なので、以下でも同じ結果が得られます。

yoteiPicker % ng g component sample 

また、src/app/component以下にコンポーネントを作成したい場合は、以下のようにコマンドを叩きます。

yoteiPicker % ng g component component/sample

以下のようにファイルが生成されます。

src/app/component/sample/sample.component.css
src/app/component/sample/sample.component.html
src/app/component/sample/sample.component.spec.ts
src/app/component/sample/sample.component.ts

生成されるコンポーネントの説明

ng g componentのコマンドを叩いた時に4つのファイルが生成されました。

その説明ですが、

.css→スタイルシート

.html→画面表示のhtmlファイル

.spec.ts→単体テスト

.ts→クリックなどの処理

サービスクラスの作成

先ほどはコンポーネントを作成しましたが、サービスクラスもコマンドで作成できます。

yoteiPicker % ng g service sample

以下のファイルが生成されます。

src/app/sample.service.spec.ts
src/app/sample.service.ts

モジュールファイルの作成

モジュールのファイルを作成する場合は以下のコマンドでファイルを生成できます。

yoteiPicker % ng g module sample

以下は生成されるファイルです。

src/app/sample/sample.module.ts

エンジニアの基礎力を上げるおすすめ本を紹介！

• 30冊以上紹介(個人的に推し本の『仮説思考』の何が良かったかも書いています)
• エンジニアなら読むべき定番の技術本や思考力を上げるなど…多数の本を紹介
• AIの回答を判断できるための知識をつける本がたくさん

あわせて読みたい

エンジニアなら読むべきおすすめ本【2026年版の基礎力が身につく必読書】 「AIに聞けば答えは出る。でも、その答えの『正しさ』を判断する力はありますか？」 なかなか「正しく判断する力は私はある」と答えられる人は少なくなってきているので...