<h2 id="%EF%BC%91%EF%BC%8E%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%91%EF%BC%8E%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF" aria-hidden="true"></a> １．コンポーネントとは</h2>
・@Component修飾子のついたメタデータをもつTypeScriptクラスです。 
・HTML・CSS・TypeScriptの３つでコンポーネントは構成されています。 
・コンポーネントは、画面の一部であるViewを制御します。
<h2 id="%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" data-line="6" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%92%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0" aria-hidden="true"></a> ２．サンプルプログラム</h2>
〇：使用プログラム
<iframe src="https://stackblitz.com/angular/jdyaoxdavpy?file=src%2Fapp%2Fapp.component.ts" scrolling="no" frameborder="no" loading="lazy"></iframe>
<div class="code-block-container">
<div class="code-block-filename-container">app.component.ts</div>
<pre class="language-ts"><code class="language-ts code-line" data-line="11">import { Component } from '@angular/core';

@Component({
 // このコンポーネントを表すタグ
 selector: 'app-root',
 // このコンポーネントに対応するHTML（テンプレート）
 templateUrl: './app.component.html',
 // このコンポーネントが使用するCSS
 styleUrls: [ './app.component.css' ]
})
export class AppComponent {}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">app.component.css</div>
<pre class="language-css"><code class="language-css code-line" data-line="24">.container {
 background-color: red;
}
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">app.component.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="29">&lt;html&gt;
 &lt;head&gt;&lt;/head&gt;
 &lt;body&gt;
 &lt;div class="container"&gt;
 &lt;router-outlet&gt;Hello World&lt;/router-outlet&gt;
　　　&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;	 
</code></pre>
</div><div class="code-block-container">
<div class="code-block-filename-container">index.html</div>
<pre class="language-html"><code class="language-html code-line" data-line="39">&lt;html&gt;
 &lt;head&gt;&lt;/head&gt;
 &lt;body&gt;
 // app.componentが反映される
 &lt;app-root&gt;&lt;/app-root&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>〇：表示画面 
<img src="https://res.cloudinary.com/zenn/image/fetch/s--pNXXymoq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2661845/4f988470-799d-344c-59d6-6f96d4413f68.png" alt="スクリーンショット 2022-12-18 12.27.23.png" loading="lazy" class="md-img">
<h2 id="%EF%BC%93%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E8%A7%A3%E8%AA%AC" data-line="53" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%93%EF%BC%8E%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E8%A7%A3%E8%AA%AC" aria-hidden="true"></a> ３．サンプルプログラムの解説</h2>
<ul class="contains-task-list code-line" data-line="55">
<li class="task-list-item enabled code-line" data-line="55">
<input class="task-list-item-checkbox" checked type="checkbox"> selector : 
コンポーネントを表示するタグになります。 
HTML（ここではindex.html）の <code>app-root</code> タグが書いてある箇所にコンポーネントを表示します。 
<code>app-root</code> タグをコメントアウトすると、ブラウザに何も表示されなくなります。
</li>
<li class="task-list-item enabled code-line" data-line="60">
<input class="task-list-item-checkbox" checked type="checkbox"> templateUrl : 
コンポーネントのUIをどのようにHTMLで表すか指定するものがテンプレートです。
</li>
</ul>
<h2 id="%EF%BC%94%EF%BC%8E%E5%8F%82%E8%80%83" data-line="63" class="code-line">
<a class="header-anchor-link" href="#%EF%BC%94%EF%BC%8E%E5%8F%82%E8%80%83" aria-hidden="true"></a> ４．参考</h2>
・<a href="https://angular.keicode.com/basics/components.php" target="_blank" rel="nofollow noopener noreferrer">コンポーネントとは</a> 
・<a href="https://angular.keicode.com/basics/templates.php" target="_blank" rel="nofollow noopener noreferrer">テンプレートとは</a> 
・<a href="https://wa3.i-3-i.info/word15688.html" target="_blank" rel="nofollow noopener noreferrer">メタデータとは</a> 
・<a href="https://www.udemy.com/course/angular-beginner/" target="_blank" rel="nofollow noopener noreferrer">【2時間半で学べる】はじめてのAngular超入門。実践で学ぶ本格Webアプリ開発【TypeScript】</a> 
・<a href="https://stackblitz.com/edit/ahamada321-angular-getting-started?file=src%2Fapp%2Fapp.component.ts" target="_blank" rel="nofollow noopener noreferrer">使用したソースコード</a>

【Angular】コンポーネントとは（備忘録）

３．サンプルプログラムの解説

Discussion