今回の学習内容
前回は、Angularのインストールとプロジェクトの作成を行いました。
本記事では、
- 作成されたプロジェクト内のディレクトリ構造
- Angular CLIにより作成されたディレクトリ、ファイルの中で覚えておいた方が良いものをピックアップして解説
- コンポーネントの基礎
- ページを少し変更して、AngularのViewがどのように開発できるのかを簡単な例で解説
をやっていきます。
この記事のソースコード
この記事終了時のソースコードは、下記を参照してください。
プロジェクト内のディレクトリ構造
Angular CLI によって自動生成されたプロジェクトのファイル構造は、下記のようになっているはずです。
├── src
│ ├── app
│ │ ├── app.component.css
│ │ ├── app.component.html
│ │ ├── app.component.spec.ts
│ │ ├── app.component.ts
│ │ └── app.module.ts
│ ├── assets
│ ├── browserslist
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── karma.conf.js
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.css
│ ├── test.ts
│ ├── tsconfig.app.json
│ ├── tsconfig.spec.json
│ └── tslint.json
├── e2e
│ ├── protractor.conf.js
│ ├── src
│ │ ├── app.e2e-spec.ts
│ │ └── app.po.ts
│ └── tsconfig.e2e.json
├── node_modules
│ ├── ...
├── README.md
├── angular.json
├── package.json
├── tsconfig.json
├── tslint.json
└── yarn.lock
まずディレクトリの説明から
| ディレクトリ名 | 役割 |
|---|---|
| src | ソースコードを置くディレクトリ |
| e2e | e2e(end to end) テスト(実際にブラウザを動かしてページのテストを行うもの)のコードを置くディレクトリ |
| node_modules | nodeのモジュールが置かれるディレクトリ。基本的には触らない |
この中でも、 src ディレクトリが最も良く使います。
src ディレクトリの内部のディレクトリも見ていきます。
| ディレクトリ名 | 役割 |
|---|---|
| app | アプリケーションのソースコードを置くディレクトリ |
| assets | 画像などの静的ファイルを置くディレクトリ |
| environments | 開発環境と本番環境などの環境ごとに変動させたい値を格納するファイルを置くディレクトリ |
ここまでで、基本的なディレクトリは終わりです。
最初はよくわからないと思いますので、とりあえず src/app ディレクトリがメインのディレクトリだと思うと良いと思います。
ほとんどの場合、このディレクトリ内のファイルを扱うことが多いです。
また、ディレクトリでなく、いくつか覚えておいたほうが良いファイルを記載しておきます。
最低限のものだけ紹介します。
| ファイル名 | 役割 |
|---|---|
| src/app/app.component.ts | 作成されたプロジェクトの起点となるファイルです。最初はこのファイルが動くんだとぼんやり思っていれば大丈夫です |
| package.json | nodeのパッケージを管理するファイル。本入門では、少しだけ内容を変更します |
| angular.json | Angularの設定ファイル。本入門では、少しだけ内容を変更します |
コンポーネントの基礎
では、まずは簡単にコンポーネントを変更してみましょう。
現在前回表示した内容を、少し変更してみます。
変更するのは、下記3つのファイルです。
src/app/app.component.ts
src/app/app.component.html
src/app/app.component.css
Angularでは、この ts , html , css(scss) の3つのファイルを1セットで変更を加えていきます。l
ロジック(ts)、表示する内容(html)、スタイル(css) と役割が別れていて、きれいに書けます。
TIPS:
.ts拡張子
.tsという拡張子に馴染みのない方も多いかなと思います。.tsはTypescriptコードを示す拡張子です。
Typescriptは、Javascriptを知っている人であればほとんど勉強必要なく利用できると思います。型のある言語を使ったことない人は、最初は戸惑うかもしれませんが、とりあえず型にany入れておけばなんでも動くので、最初はそれでも良いかもしれません（使ってるうちに勝手に理解が進みます。プログラミングってそういうものですよね）。
現状のファイルを下記のように修正します。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'テストタイトルです';
}
<h1>{{ title }}</h1>
h1 {
color: #C62828;
font-size: 48px;
}
変更したら、前回と同様、下記コマンドでAngularを起動します。
ng serve --open
(angular-sample のディレクトリに移動してコマンドを実行してください）
これにより、下記のような画面になります。
解説
3つのファイルがどうやって連携しているか。
起点となるのは、 Typescript のコード app.component.ts の下記部分です。
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
@Component という記述は、おまじないのようなものと思っておきましょう。コンポーネントのTypescriptにつけるおまじないです。
中で指定されている3つの要素は、それぞれ下記を示しています。
| 要素 | 役割 |
|---|---|
| selector | このコンポーネント(今はこの3つのファイルを合わせたものがコンポーネントと思っておきましょう）がHTMLから参照されるときのタグ名 (今回の場合、 <app-root></app-root> となる) |
| templateUrl | このファイルのHTMLファイルのパス |
| styleUrls | このファイルのCSSファイルのパス（配列なので、複数指定可能。共通のCSSを利用したいときなどに複数にすることがあるが、基本的には一つだと考えましょう） |
この宣言により、 app.component.ts , app.component.html , app.component.css の3つのファイルが連携できるということになります。
HTMLの表示
次に、HTMLの内容を見ていきます。
HTMLは、一行しかありません。
<h1>{{ title }}</h1>
これは、 h1 要素の中に、 app.component.ts の変数である title の内容を反映する、
という意味になります。
Typescript上の値をHTMLに反映したいときに使うのが、 {{}} です。HTMLが実際に表示されるときに、中身がTypescriptの変数と入れ替わって表示されるというものです。
Typescript内で値を変更すると、すぐにHTMLの内容も変更されるため、非常に便利です。
今回は、Typescript上で、
title = 'テストタイトルです';
と宣言しています。これにより、 title という変数に テストタイトルです という文字列が入り、 HTML 上で title を表示するため、 テストタイトルです という文字列がブラウザに表示されます。
CSSの反映
今回はCSSもとてもシンプルに、 h1 要素を変更するだけのものです。
h1 {
color: #C62828;
font-size: 48px;
}
app.component.ts により、CSSファイルが指定されているため、この内容がブラウザに反映されています。
このCSSは、h1 の変更と、非常に大きな変更をしていますが、Angularでは、一部の例外を除き、 styleUrls に指定されない限りCSSの影響はコンポーネント内で収まります。
そのため、他のファイルを作成したとしても、( styleUrls に指定されない限り)このCSSが他のファイルに影響を与えることはないため、安心してCSSを書くことができます。
まとめ
今回は、Angular CLI により作成されたファイル構造の説明と、コンポーネントを少し変更してみて、コンポーネントの基礎を学びました。
次回は、新しくコンポーネントを作成して、ルーティングを学びます。
Angular入門 未経験から1ヶ月でサービス作れるようにする その3. ルーティング基礎
入門記事一覧
「Angular入門 未経験から1ヶ月でサービス作れるようにする」は、記事数が多いため、まとめ記事 を作っています。
https://qiita.com/seteen/items/43908e33e08a39612a07