Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Angular入門 未経験から1ヶ月でサービス作れるようにする その2. ディレクトリ構造とコンポーネントの基礎

More than 1 year has passed since last update.

今回の学習内容

前回は、Angularのインストールとプロジェクトの作成を行いました。

本記事では、

  • 作成されたプロジェクト内のディレクトリ構造
    • Angular CLIにより作成されたディレクトリ、ファイルの中で覚えておいた方が良いものをピックアップして解説
  • コンポーネントの基礎
    • ページを少し変更して、AngularのViewがどのように開発できるのかを簡単な例で解説

をやっていきます。

この記事のソースコード

この記事終了時のソースコードは、下記を参照してください。

https://github.com/seteen/AngularGuides/tree/%E5%85%A5%E9%96%80%E3%81%9D%E3%81%AE02

プロジェクト内のディレクトリ構造

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 という拡張子に馴染みのない方も多いかなと思います。 .tsTypescript コードを示す拡張子です。
Typescript は、Javascriptを知っている人であればほとんど勉強必要なく利用できると思います。型のある言語を使ったことない人は、最初は戸惑うかもしれませんが、とりあえず型に any 入れておけばなんでも動くので、最初はそれでも良いかもしれません(使ってるうちに勝手に理解が進みます。プログラミングってそういうものですよね)。

現状のファイルを下記のように修正します。

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'テストタイトルです';
}
app.component.html
<h1>{{ title }}</h1>
app.component.css
h1 {
  color: #C62828;
  font-size: 48px;
}

変更したら、前回と同様、下記コマンドでAngularを起動します。

ng serve --open

(angular-sample のディレクトリに移動してコマンドを実行してください)

これにより、下記のような画面になります。

001.png

解説

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

seteen
Angularを広めたいエンジニア Ruby, Angularが好きです。
https://twitter.com/yazumoto
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away