質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

angularのファイル名の意味が知りたい

aaaaab
aaaaab

総合スコア1

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

1回答

0グッド

1クリップ

292閲覧

投稿2022/10/17 12:22

編集2022/10/18 02:54

前提

angularのプロジェクトで以下のようなファイル構成になっていることがあります。

  • aaa.component.ts
  • aaa.service.ts
  • b-aaa.component.ts
  • b-aaa.service.ts
  • aaa.component.html
  • aaa.component.css

各ファイルの中身を見るとなんとなくそれぞれの役割は分かるのですが、いまいち人に説明できるレベルまで理解しきれていません。

  • serviceとcomponentの役割の違いはなにか?
  • なぜb-をプレフィックスしたファイルが必要なのか?またb-とはどういう意味なのか?(バインディング?)

をご存知であれば教えて頂けると幸いです。
よろしくお願いたします。

追加情報

Angular CLI: 11.2.4
Node: 14.15.4

Angular: 11.2.5

またそれぞれのファイルには以下のような内容の記述です。(import部分は省略し多少簡略化しています。)

aaa.component.ts

ts

1@Component({ 2 selector: 'app-aaa', 3 templateUrl: './aaa.component.html', 4 styleUrls: ['./aaa.component.css'], 5 providers: [AaaService], 6 changeDetection: ChangeDetectionStrategy.OnPush, 7}) 8export class aaaComponent extends BaaaComponent { 9 constructor( 10 aaaService: AaaService, 11 ) { 12 super(aaaService); 13 } 14}

aaa.service.ts

ts

1@Injectable() 2export class aaaService extends BaaaService { 3 constructor( 4 datePipe: DatePipe, 5 ) { 6 super(datePipe); 7 } 8}

b-aaa.component.ts

ts

1@Component({ 2 template: '', 3 changeDetection: ChangeDetectionStrategy.OnPush, 4}) 5export abstract class BaaaComponent implements OnInit, AfterViewInit, OnDestroy, DoCheck { 6 7 ngOnInit(): void { 8 this.aaaService.initAaa(): 9 ...(省略) 10 } 11 12 ngDoCheck() { 13 ...(省略) 14 } 15 16 ngAfterViewInit(): void { 17 ...(省略) 18 } 19 20 ngOnDestroy() { 21 ...(省略) 22 } 23}

b-aaa.service.ts

ts

1@Injectable() 2export class foo { 3 4 async initAaa() ( 5 ...(省略) 6 } 7 8 addData() { 9 ...(省略) 10 } 11 12}

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

miyabi_takatsuk

2022/10/18 02:07

Angularのバージョンによっても、多少違いがあるようなので、 (私の環境では、b-のファイルが存在しないため) バージョンも記載お願いします。
aaaaab

2022/10/18 02:49

コメントありがとうございます! 情報を追記致しました!

回答1

5

ベストアンサー

まずは、Angularはコンポーネント指向のフレームワークでありますので、
そこら辺も踏まえて回答いたします。

serviceとcomponentの役割の違いはなにか?

上記から考えても、componentファイルを中心に、
フレームワーキングしていますので、
componentファイルに、serviceファイルや、テンプレート(html)ファイルを読み込んだりしているわけです。
serviceファイルの役割としては、componentに拡張機能を与えたり、他のcomponentと連携させたりする時に(デリゲートもする)使用します。
もちろん、そのほとんどは、component内で処理を完結できるのですが、
そうしてしまうと、そのcomponentのみにしか使用できない機能となってしまいますので、
同じ機能を他のcomponentでも使用したいとなったときに、component毎に記述しなければいけなくなります。
そこで、機能自体は、serviceに記述し、複数componentで読み込む、とすることによって、
機能修正などが発生した場合、
そのservice一つの修正で完結できるというわけです。

上記も踏まえ、componentはあくまで、各ファイル等を扱う司令塔、serviceは機能面を司る、テンプレート(HTML)は、見た目を扱う、といった役割分担が、最も適したものになる(Angularの思想に適した)と思われます。

オブジェクト指向の考え方に則していますが、
Angularはそのオブジェクトにあたる概念が、コンポーネントというわけです。

また、多くのフレームワークは似た概念で構成されており、
PHPのフレームワークであるCakePHPは、
ビュー(Angularでいう、html)、コントローラー(Angularでいうservice)、コンポーネント、モデルなどといった構成になっています。

なぜb-をプレフィックスしたファイルが必要なのか?またb-とはどういう意味なのか?(バインディング?)

質問にコードを記載していただき、わかりました。
b-の方のコンポーネントには、ライフサイクル上の根本的なメソッドの記述がデフォルトで入っているようですね。
となると、ライフサイクル上の処理を記述するものなのかと。
b-がついてない方は、b-のクラスをextendしているため、b-のサブクラスとして定義されています。
(サブクラスとなっているのは、serviceも同様)
以上のことから、
おそらくではありますが、
ベースのbと思われます。
各コンポーネント、サービスの、基礎・根本的な処理、を司るのかと。

なので、表向きの実処理は、b-がついてないほうで記述する、など、使い分けができるのでしょう。
また、サブコンポーネント、サブサービスを増やしたりして、共通処理は、b-に記述し、
各サブコンポーネント・サブサービスには、個別の処理を記載する、などの工夫もとれるようになっているのでしょう。

投稿2022/10/18 02:20

編集2022/10/18 14:26
miyabi_takatsuk

総合スコア9416

uky, aaaaab❤️を押しています
uky, aaaaab😍を押しています
aaaaab👏を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

aaaaab

2022/10/18 03:03

大変ご丁寧な回答、有り難うございます! service内で作った部品(開発した機能)を、component内で組み立てる(ライフサイクルで実行する様にする)、というイメージですかね? 普段開発しているときになんとなく「こうかな〜」と思っていたこととも一致し、とても納得出来ました。 後者の質問についてもお調べ頂けるとのことで、お手数ですがよろしくお願い致します!
aaaaab

2022/11/08 06:54

追記部分ありがとうございます! なるほど、baseの`b-`なんですね。 とういうことは当初の設計段階ではこれをベースに拡張版も開発することを視野に入れていた、などの背景が推測できますね。 納得できました!お調べいただきありがとうございます! また、連絡遅くなり申し訳ありませんでした!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。