フロントエンド初心者がAngular5でSPA(XEMハーベスト確認)を作成(その1)

はじめに

• フロントエンド初心者（インフラエンジニア）がフロントエンド～バックエンドの技術習得を行うため、実際にサイトを作成しながら学習した内容を共有するためのものです。バリバリ開発されている人には既知の内容かと思われます。可能な限り注意しますが、誤った理解のまま説明を書いてしまっているところもあるかもしれませんので、ご留意ください。ざっくり、以下の状況からスタート。

  • HTML,CSS
    • 読める（なんとなく意味は分かるが、真面目に書いたことはない）
  • TypeScript
    • 経験無し。LmabdaのファンクションのためにNode.jsを少し書いたことがある。
  • Angular,Webpackなどのフレームワークやファイルハンドラ、その他ビルドツール
    • ほぼ経験無し。
  • AWS
    • 仕事で使っている。

• 2018年の最先端フロントエンドエンジニアになろうや、2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？を読んで、気になるところから取り組もうとしています。

  • より適切な学習の順序（htmlやcssの基礎から、など）がありそうですが、まずはモチベーション重視で。
  • 流行り廃りのスピードが大変早いですが、まずは1つの手段を試してみながら全体感を掴む。

• 事前学習した内容

  • Reactのチュートリアルを写経。
  • Angularのチュートリアルを写経。
    • 今回、Heroのチュートリアルからの変更点は、ざっくりいうと外部のAPIを実際に叩くところ。

作成予定のもの

• SPA
  • 以前作成したXEM（NEM）ハーベストの停止をServerlessに自動検知＆通知するの検知機能をコンポーネントとして乗せる。
  • cookieにハーベストのステータス確認に必要な情報を保持する。ウォレットの認証を行って確認するよりも楽に。
  • 公開場所はS3。
  • さらなる機能追加は、上記を一通り完了してから。
• 余裕があれば実施すること（コンポーネント追加などの練習用）
  • XEM（NEM）ハーベストの停止をServerlessに自動検知＆通知するによるPush通知もできればサービス化。
    • 上記に加え、ハーベストが発生したらPush通知。
  • CSSやAngular Materialを使ったデザイン面の修正
  • Google analitics対応
  • Google AdSense対応

環境構築

以下は、既に構築済みの状態からスタート。

• node.js
  • nodistでインストール済み。

> node -v
v8.11.1

• エディタ
  • VS Code

Angular CLIインストール

> npm install -g @angular/cli

> ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular:
...

Angular アプリの雛形作成

> ng new app01
> cd .\app01\
> ng -v

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

雛形アプリの起動

> ng serve --open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 11% building modules 14/15 modules 1 active ...modules\style-loader\lib\addStyles.jswebpacDate: 2018-04-30T12:28:46.522Z
Hash: 528bce30705ac7c0ad03
Time: 6166ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 18 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 41.5 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.43 MB [initial] [rendered]

webpack: Compiled successfully.

ブラウザで "http://localhost:4200/" にアクセスすると、下記の画面が出ているはず、です。

ページタイトルの変更

下記のファイルを修正します。

~\app01\src\app\app.component.ts

export class AppComponent {
  title = 'XEM Harvest Checker';
}

{{ title }}でTypeScriptのファイルで宣言されている変数を読み込みます。
app-harvest-checkの部分は、次に追加するコンポーネントを読み込むためのものです。

~\app01\src\app\app.component.html

 <h1> {{ title }}</h1>
<app-harvest-check></app-harvest-check>

コンポーネントの追加

harvestのステータスチェック用コンポーネントを追加します。

> ng generate component harvest-check
  create src/app/harvest-check/harvest-check.component.html (32 bytes)
  create src/app/harvest-check/harvest-check.component.spec.ts (671 bytes)
  create src/app/harvest-check/harvest-check.component.ts (296 bytes)
  create src/app/harvest-check/harvest-check.component.css (0 bytes)
  update src/app/app.module.ts (424 bytes)

上記により、以下のファイルにもHarvestCheckComponentが読み込まれるように、自動でインポートし、declarationsに宣言が追加されます。

~\app01\src\app\app.module.ts

import { HarvestCheckComponent } from './harvest-check/harvest-check.component';


@NgModule({
  declarations: [
    AppComponent,
    HarvestCheckComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

追加したコンポーネントの内容

追加した段階では、特に何も処理を行っていません。
app.component.htmlでの定義によりコンポーネントが呼び出されると、constructor()　→　ngOnInit() の順で実行され、どちらも初期化の処理を書くようですがAngularでは基本的にngOnInit()に書くようです。Importしたものの宣言くらいがconstructor()でしょうか。
＃現時点では深く理解できていませんが、一旦は作成優先で深追いしないでおきます。追い追い・・　＿(:3 」∠)_

~\src\app\harvest-check\harvest-check.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-harvest-check',
  templateUrl: './harvest-check.component.html',
  styleUrls: ['./harvest-check.component.css']
})
export class HarvestCheckComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

"harvest-check works!"の部分は、コンポーネントを追加した際にデフォルトでharvest-check.component.htmlに記述されており、読み込むとコレだけが表示される状態です。

~\src\app\harvest-check\harvest-check.component.html

<p>
  harvest-check works!
</p>

CSS(harvest-check.component.css)は、空です。後述の通り、大変簡素な見た目になるので弄りたい気持ちもありつつ、まずは一通りの流れをおさえてからにしようと思います。

faviconの入れ替え

ブラウザのタブに表示されるfaviconのファイルを入れ替えます。

~\app01\src\favicon.ico のファイルを任意のファイルに置き換えましょう。今回は公開されていたXEMのfaviconを使用させていただきました。

ちなみにfaviconの読み込みの指定は、以下で行われており、タブに表示されるページタイトルもこちらを変更します。

~\app01\src\index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>XEM Harvest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

さて、現時点では以下のよう表示されるようになります。

---

今回はここまでです。ここまでは写経からちょっとだけアレンジしただけなので、で？というかんじですが、次回は実際にharvest-checkコンポーネントの中身を作っていきます。

フロントエンド初心者がAngular5でSPA(XEMハーベスト確認)を作成(その1)
フロントエンド初心者がAngular5でSPA(XEMハーベスト確認)を作成(その2)
フロントエンド初心者がAngular5でSPA(XEMハーベスト確認)を作成(その3)