Angularをセットアップする (4/4)

「src」フォルダの中には、「app」フォルダというものが用意されています。これが、Angularの中心部分となるものです。

これは、Angularの「コンポーネント」に関するファイルがまとめられています。このコンポーネントというものを作成するのが、Angularの基本なのです。

コンポーネントとは、画面の表示や内部の処理などをパッケージ化し、どこでも利用できるようにしたものです。これはHTMLファイル、スクリプトファイル、スタイルシートファイルなどの組み合わせで構成されます。このコンポーネントは、HTMLのカスタムタグを使ってHTMLの中に記述し、利用できるようになります。

たとえば、「my-component」というコンポーネントを作れば、HTML内に<my-component>というタグを書くだけでコンポーネントが組み込まれ、表示や動作などが使えるようになる、というわけです。

デフォルトでは以下のようなファイルがこのフォルダ内に用意されています。

index.ts――コンポーネント関係でデフォルトでロードされるスクリプトです。コンポーネント全般でロードされるライブラリなどをここに記述してあります。

environment.ts――開発中・正式公開などの状況に応じた処理などを記述したものです。
app.component.html――サンプルコンポーネントのHTMLテンプレートです。
app.component.ts――サンプルコンポーネントの処理を記述したスクリプトです。
app.component.css――サンプルコンポーネントで利用するスタイルシートです。
app.component.spec.ts――サンプルコンポーネントのテスト用スクリプトです。

index.tsとenvironment.tsは、コンポーネント全体に関するもので、とりあえずは編集することはありません。ここで頭に入れておきたいのは、サンプルで用意されているコンポーネントのファイルです。「app.component」という名前のファイルが３つ用意されていますが、この３つがセットになってコンポーネントを構築しています。（app.component.spec.tsはテスト用なのでコンポーネント本体には含まれないと考えていいでしょう）

コンポーネントは、このようにHTML, スクリプト, スタイルシートで同じ名前のファイルを作成して作ります。これらを作成することが、「コンポーネントを作る」ということであり、Angularのプログラミングの一番基本となるものなのです。

とりあえず、プロジェクト全体の構成がだいたいわかってきたところで、次回からコンポーネントの作成について説明していくことにしましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。