Angular+Openweathermap+Leafret.js+MongoDBで天気予報WEBアプリを作る ①Angular環境構築とひな形の生成

#やりたいこと
　WEBアプリケーションの勉強を兼ねて
　登録した地点の週間天気予報を地図上に表示するWEBアプリを作ってみる



##この記事でやること
　Angular(angular-cli)のインストールからWEBアプリのひな形生成まで

##参考にしたサイト
　以下のページを参考にさせていただきました。大変感謝です。

　・[Angular公式](https://angular.io/)
　・[とほほのWWW入門 - Angular入門](http://www.tohoho-web.com/ex/angular.html)


##環境
　Windows10 Pro
　PowerShell
　Node.js(10.16.3LTS)
　npm(6.9.0)
　angular-cli(8.3.8)
 
##使用する技術
　[フロントFW]     Angular
　[地図ライブラリ] Leafret
　[気象サービス]   Openweathermap
　[データベース]   MongoDB

###Angular
　Googleが開発しているフロントエンドJavaScriptフレームワーク。実装はTypeScriptで行う
　MVC(Model View Controller) や MVW (Model-View-Whatever)モデルを構築できるらしい
　ルーティングもやってくれるからこれだけで簡単にWEBアプリが作れる

###Angular CLI
　Angular開発用のコマンドラインツール
　Node.js上で動く。各コンポーネントの自動生成やサーバーの起動などをやってくれる

###Leafret
　OSSの地図ライブラリ。同じくOSSの地図タイルであるOpenstreetMapを表示/制御する

###MongoDB
　NoSQL型データベース。Angularと組み合わせる定番DBらしい(MEANスタック)

##システム構成
　シンプルにこんな感じで

![システム構成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315491/92faa4b9-3474-b20e-19fb-c4270ce2d9e6.png)
　　※図に入れ忘れたけどダッシュボードcomponentにleafretを埋め込む予定


## Angularインストールとひな形の生成

###angular-cli
npmでAngular-cliを取得する
※オプション`-g`でグローバルインストール

```powershell:PowerShell
> npm install -g @angular/cli
```


###ワークスペース準備と初期アプリの生成
適当な作業ディレクトリに移動してAngula-cliのコマンドで初期構築

```powershell:PowerShell
> ng new my-app
```

`Would you like to add Angular routing? (y/N)`と聞かれるので`y`


必要なライブラリその他がインストールが終わったら`cd my-app`でディレクトリを移動する
`ls`してみると色々とファイルが作成されている


/myapp
　  - src
 　 - .editorconfig
  　- .gitignore
  　- angular.json
  　- browserslist
  　- karma.conf.js
  　- package.json
  　- package-lock.json
  　- README.md
  　- tsconfig.app.json
  　- tsconfig.json
  　- tsconfig.spec.json
  　- tslint.json
  　- .git
  　- e2e
  　- node_modules

###サーバ起動

`ng serve`でWEBサーバを起動

```powershell:PowerShell
> ng serve
(中略)
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.
```

4200番ポートでサーバが起動したのでブラウザで開くとAngularなページが表示される
`localhost:4200`
![2019-10-06_12h14_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315491/ecaf9b73-838e-530f-a1ff-73ee516e0781.png)


###編集してみる

実体は`src/app/app.component.html`なので開いて編集する
*※既存のソースはすべて消去*

```html:src\app\app.component.html
<h1>AngularでWEBアプリケーションを作ってみる</h1>
```

保存すると`ng serve`のシェルで自動コンパイルが実行される

```powershell:PowerShell
i ｢wdm｣: Compiling...

Date: 2019-10-06T03:47:14.667Z - Hash: 14dbbd95520c919d3d31
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 23.1 kB [initial] [rendered]
Time: 120ms
i ｢wdm｣: Compiled successfully.
```

ブラウザを見に行くとページが更新されている

|![2019-10-06_12h49_47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315491/a8b7c387-41ae-6a21-ab71-5c62d0237909.png)|
|:-:|


##コンポーネント生成
Angularはコンポーネントという画面を構成する部品を作って組み合わせる仕組みらしいので、
さっそく`ng generate component`してみる

*(`ng serve`で起動したプロセスはファイルの更新を検知して自動ビルド→デプロイをやってくれるようなので殺さず、
新しくコンソールを開いて作業する)*


```powershell:PowerShell
> ng g component header
CREATE src/app/header/header.component.html (21 bytes)
CREATE src/app/header/header.component.spec.ts (628 bytes)
CREATE src/app/header/header.component.ts (269 bytes)
CREATE src/app/header/header.component.css (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)
> ng g component menu
CREATE src/app/menu/menu.component.html (19 bytes)
CREATE src/app/menu/menu.component.spec.ts (614 bytes)
CREATE src/app/menu/menu.component.ts (261 bytes)
CREATE src/app/menu/menu.component.css (0 bytes)
UPDATE src/app/app.module.ts (549 bytes)
> ng g component dashboard
CREATE src/app/dashboard/dashboard.component.html (24 bytes)
CREATE src/app/dashboard/dashboard.component.spec.ts (649 bytes)
CREATE src/app/dashboard/dashboard.component.ts (281 bytes)
CREATE src/app/dashboard/dashboard.component.css (0 bytes)
UPDATE src/app/app.module.ts (643 bytes)
```
*※`g` は `generate` の省略系*

###ダッシュボード画面にコンポーネントを追加
`app.component.html`に生成したコンポーネントを記述

```html:src\app\app.component.html
<app-header></app-header>
<app-menu></app-menu>
<app-dashboard></app-dashboard>
```

保存すると、画面に反映される

**画面**
解りづらいが3つのコンポーネントが組み合わさってページが構築されている

|![2019-10-06_13h21_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315491/ea851083-5705-3fb9-0986-ef2a854df9e2.png)|
|:-:|

##コンポーネント編集
生成した空っぽのコンポーネントを編集し、WEBアプリの基礎部分を構築する

###ヘッダー
`src/app/header`に生成されたhtmlとcssを編集する

```html:src/app/header/header.component.html
<p>header works!</p>
```
　↓

```html:src/app/header/header.component.html
<div class="header">
  <img src="../favicon.ico" alt="Angular"> AngularでWEBアプリ作ってみた
</div>
```
*Angularに内蔵されているWEBサーバが元々持っているfaviconを利用*

```css:src/app/header/header.component.css
.header {
    padding: 4px;
    background-color: #29088A; /*背景は紺色*/
    color: #FFF;               /*文字は白色*/
  }
  .header img {
    width: 18px;
    vertical-align: middle;
  }
```

ページのヘッダー部分に自動的に反映される
**画面**

|![2019-10-06_13h48_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315491/9e6f19ef-dc1f-64e9-16ad-05bc3a0721e2.png)|
|:-:|

*(ブラウザF5は押していない。勝手に反映されてる。すごい)*

###メニュー
同様に`src/app/menu`のファイルを修正する

```html:src/app/menu/menu.component.html
<div class="menu">
        <ul>
        <li><a href="/">Dashboard</a></li>
        </ul>
</div>
```

```css/app/menu/menu.component.css
.menu {
    background-color: #CED8F6; /*背景は薄青*/
  }
  .menu li {
    padding: 4px 8px;
    display: inline-block;
  }
```

###ダッシュボード
同じく`src/app/dashboard`も

```html:src/app/dashboard/dashboard.component.html
<h1>ダッシュボード</h1>
ここにいろいろ表示する
```



##編集後の画面
少しずつWebアプリっぽくなってきた

|![2019-10-06_13h59_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315491/b3b071a5-9f4e-e047-bad4-be1b15ed912a.png)|
|:-:|


とりあえず今回はここまで。おつかれさまでした。

##次回の予定

　都市を登録する画面(コンポーネント/サービス)を作成する
　OpenweathermapのAPIを叩いて気象情報を取得する


###追記(リンク)
　　①Angular環境構築とひな形の生成
　　②[コンポーネントとサービスの追加(登録画面)](https://qiita.com/ryo_1050/items/5ecf0ffa4c1b4d8cf940)
　　[③OpenweathermapのAPIを叩く](https://qiita.com/ryo_1050/items/578903a80653c92aa4cf)
　　[④Leafletで地図を表示する](https://qiita.com/ryo_1050/items/663eba44afe7ee6d95a1)
　　[⑤サービスが持つプロパティの更新を検知する](https://qiita.com/ryo_1050/items/eca6a032d714a4e24f8b)