甘味 ぷろぐらみんぐ

全人類プログラマー計画

GCP vs AWS (無料枠の比較)

概要

  • GCPGoogle Cloud Platform)無料枠のまとめ

  • AWSと比較

 

GCP無料枠

 

NO GCP 概要 無料枠
1 App Engine 大規模なウェブ アプリケーションの開発とホスティングを行うためのフルマネージド型のサーバーレス プラットフォーム ・28 時間分の「F」インスタンス(1 日あたり) ・9 時間分の「B」インスタンス(1 日あたり ) ・下り(外向き)1 GB(1 日あたり)
2 AutoML Natural Language カスタムの機械学習モデルを構築してデプロイし、ドキュメントの分析、分類、エンティティの識別、態度の評価を行えます。 ・5,000 ユニットの予測(1 か月あたり)
3 AutoML Tables チーム全体で、さらに高速かつ大規模に、最先端の機械学習モデルのビルドや構造化データへのデプロイを自動化できます。 ・6 ノード時間のトレーニングと予測
4 AutoML Translation カスタム翻訳モデルを独自に作成して、翻訳クエリに対して各自の分野に固有の結果を返すことができます。 ・50 万文字の翻訳(1 か月あたり)
5 AutoML Video Intelligence ★ベータ版 ・AutoML Video Intelligence Classification 独自に定義したラベルに従って動画のショットやセグメントを分類するよう機械学習モデルをトレーニングできます。 ・AutoML Video Intelligence Object Tracking ショットやセグメント内の複数のオブジェクトを検出して追跡するための機械学習モデルをトレーニングできます。 ・40 ノード時間のトレーニング 5 ノード時間の予測
6 AutoML Vision 独自に定義したラベルに従って画像を分類するよう機械学習モデルをトレーニングできます。 ・40 ノード時間のトレーニングとオンライン予測 ・1 ノード時間のバッチ分類予測 ・15 ノード時間のエッジ トレーニン
7 BigQuery Google Cloud のペタバイト規模の費用対効果に優れたフルマネージド型の分析データ ウェアハウスであり、膨大な量のデータに対してほぼリアルタイムで分析を行うことができます。 ・1TB のクエリ(1 か月あたり) ・10 GB のストレージ(1 か月あたり)
9 Cloud Build Google Cloud Platform インフラストラクチャでビルドを行うサービスです。 ・120 ビルド分数(1 日あたり)
10 Cloud Functions 軽量なコンピューティング ソリューションで、デベロッパーはサーバーやランタイム環境を管理せずに、Cloud イベントに応答する単一目的のスタンドアロン関数を作成できます。 ・200 万回の呼び出し(1 か月あたり、バックグラウンド呼び出しと HTTP 呼び出しを含む) ・400,000 GB 秒、200,000 GHz 秒のコンピューティング時間 5 GB の下り(外向き)ネットワーク(1 か月あたり)
11 Cloud Logging と Cloud Monitoring Google Cloud、Amazon Web ServicesAWS)、ホストされた稼働時間プローブ、アプリケーション インストゥルメンテーションから指標、イベント、メタデータを収集します。 ・無料のロギングの割り当て(1 か月ごと) ・無料の指標の割り当て(1 か月ごと)
12 Cloud Natural Language API 感情分析、エンティティ分析、エンティティ感情分析、コンテンツ分類、構文解析などの自然言語理解技術をデベロッパーに提供します。 ・5,000 ユニット(1 か月あたり)
13 Cloud Run マネージド コンピューティング プラットフォームで、ウェブ リクエストまたは Pub/Sub イベント経由で呼び出し可能なステートレス コンテナを実行できます。 ・200 万リクエスト(1 か月あたり) ・360,000 GB 秒のメモリ、180,000 vCPU 秒のコンピューティング時間 ・1 GB の北米からの下り(外向き)ネットワーク(1 か月あたり)
15 Cloud Shell Google Cloud のインタラクティブなシェル環境です。これにより、Google Cloud の学習とテスト、ウェブブラウザからのプロジェクトとリソースの管理が簡単になります。 ・5 GB の永続ディスク ストレージを含め、Cloud Shell に無料でアクセス
16 Cloud Source Repositories Google Cloud でホストされている多機能のプライベート Git リポジトリです。 ・5 ユーザーまで 50 GB のストレージ 50 GB(下り)
17 Cloud Storage 世界中のどこからでも、いつでもデータを保存、取得できます。 ・5 GB 月の Regional Storage(米国リージョンのみ) ・5,000 回のクラス A オペレーション(1 か月あたり) ・50,000 回のクラス B オペレーション(1 か月あたり) ・1 GB の北米から全リージョン宛ての下り(外向き)ネットワーク(1 か月あたり、中国とオーストラリアを除く)
18 Cloud Vision 開発するアプリケーションの中で簡単に画像検出機能を統合できます。この機能の例としては、画像ラベリング、顔やランドマークの検出、光学式文字認識(OCR)、不適切なコンテンツへのタグ付けがあります。 ・1,000 ユニット(1 か月あたり)
19 Compute Engine Google のインフラストラクチャ上で仮想マシンを作成して実行できます。 ・プリエンプティブル以外の1 つの f1-micro VM インスタンス(1 か月あたり) ・30 GB 月の HDD ・5 GB 月のスナップショット ストレージ ・1 GB の北米から全リージョン宛ての下り(外向き)ネットワーク(1 か月あたり、中国とオーストラリアを除く)
20 Firestore 自動スケーリングと高性能を実現し、アプリケーション開発を簡素化するように構築された NoSQL ドキュメント データベースです。 ・1 GB のストレージ ・50,000 回の読み取りオペレーション、20,000 回の書き込みオペレーション、20,000 回の削除オペレーション(1 日あたり)
21 Google Kubernetes Engine コンテナ化されたアプリケーションをデプロイ、管理、スケールします。 ・請求先アカウントごとに 1 つのゾーンクラスタクラスタ管理料金が無料になります。 各ユーザーノードには Compute Engine の標準料金が適用されます。
24 Google Maps Platform Google Map API https://cloud.google.com/maps-platform/pricing/sheet?hl=ja ・毎月 $200は無料
25 Pub/Sub フルマネージドのリアルタイム メッセージング サービスであり、個別のアプリケーション間でメッセージを送受信できます。 ・10 GB のメッセージ(1 か月あたり)
27 音声入力(Cloud Speech API) Google音声認識技術をデベロッパーのアプリケーションに簡単に統合できます。Speech-to-Text API サービスに音声を送信すると、文字変換されたテキストを受け取ることができます。 ・60 分(1 か月あたり)
30 Video Intelligence API デベロッパーはアプリケーションの一部である Google の動画分析技術を利用できます。 ・1,000 ユニット(1 か月あたり)
31 直接サポート サポート ・請求関連の問題については、ウェブ、電話、チャットによるサポートがすべての Google Cloud アカウントでご利用いただけます。 ・無料トライアル期間中の技術関連の問題については、チャットによるサポートがご利用いただけます。

 

GCPAWSの比較

  • GCPAWSで似たような機能を比較

 

NO GCP AWS 概要 AWS無料枠
1 App Engine AWS Elastic Beanstalk Java、.NET、PHP、Node.js、PythonRuby、Go および Docker を使用して開発されたウェブアプリケーションやサービスを、Apache、Nginx、Passenger、IIS など使い慣れたサーバーでデプロイおよびスケーリングするための、使いやすいサービスです -
2 AutoML Natural Language Amazon SageMaker すべてのデベロッパーやデータサイエンティストが機械学習 (ML) モデルを迅速に構築、トレーニング、およびデプロイするための準備を可能にするフルマネージド型サービスです。 ★最初の 2 か月間は 1 か月あたりの無料利用枠を利用可能 https://aws.amazon.com/jp/sagemaker/pricing/
3 AutoML Tables Amazon SageMaker    
4 AutoML Translation Amazon Translate 高速で高品質かつカスタマイズ可能な言語翻訳を手ごろな料金で提供するニューラル機械翻訳サービスです。 ★12 か月間 1 か月 200 万文字を 12 か月間
5 AutoML Video Intelligence -    
6 AutoML Vision Amazon SageMaker    
7 BigQuery Amazon RedShift Redshift では、データウェアハウス、運用データベース、およびデータレイクにあるペタバイト規模の構造化データと半構造化データを、標準的な SQL を使用してクエリおよび組み合わせることができます ★2 か月間無料 ・1 か月あたり 750 時間の dc2.large
    Amazon Athena Amazon S3 内のデータを標準 SQL を使用して簡単に分析できます。 -
9 Cloud Build AWS CodePipeline 完全マネージド型の継続的デリバリーサービスで、素早く確実性のあるアプリケーションとインフラストラクチャのアップデートのための、パイプラインのリリースを自動化します。 〇無期限無料 ・アクティブなパイプラインを 1 か月あたり 1 つ
10 Cloud Functions AWS Lambda サーバーレスコンピューティングサービスで、サーバーのプロビジョニングや管理、ワークロード対応のクラスタースケーリングロジックの作成、イベント統合の維持、ランタイムの管理を行わずにコードを実行できます 〇無期限無料 ・1 か月ごとに 100 万件の無料リクエス ・40 万 GB-秒のコンピューティング時間
11 Cloud Logging と Cloud Monitoring AWS CloudWatch DevOps エンジニア、デベロッパー、サイト信頼性エンジニア (SRE)、および IT マネージャーのために構築されたモニタリング/オブザーバビリティサービス 〇無期限無料 ●メトリクス ・基本モニタリングのメトリクス (5 分間隔) ・詳細モニタリングのメトリクス 10 個 (1 分間隔) ・100 万の API リクエスト (GetMetricData および GetMetricWidgetImage には適用されません) ダッシュボード ・毎月最大 50 個のメトリクスに対応するダッシュボード 3 個 ●アラーム ・10 件のアラームメトリクス (高分解能アラームには適用されません) ●ログ ・5 GB データ (取り込み、ストレージのアーカイブ、Logs Insights クエリによってスキャンされたデータ) ●イベント ・カスタムイベントを除くすべてのイベントが対象 ●Contributor Insights ・1 か月に 1 つの Contributor Insights ルール ・ルール / 月に一致する最初の 100 万のログイベント ●Synthetics ・1 か月あたり 100 回の Canary 実行
12 Cloud Natural Language API Amazon Comprehend 機械学習を使用して構造化されていないデータから情報を見つける自然言語処理 (NLP) サービス ★12 か月間 ・50,000 ユニットのテキスト (500 万文字) ・5 ジョブ、それぞれ最大 1 MB まで
13 Cloud Run SNS   ★12 か月間 ・毎月 15 GB のデータ転送
    Amazon Pinpoint 柔軟でスケーラブルなアウトバウンドおよびインバウンドマーケティングコミュニケーションサービスです ★12 か月間 ・毎月5,000 人の無料利用対象ユーザー ・毎月1,000,000 件の無料プッシュ通知 ・毎月100,000,000 件のイベント
15 Cloud Shell AWS CLI   -
16 Cloud Source Repositories AWS CodeCommit Git ベースのリポジトリをセキュアにホストする完全マネージド型のソース管理サービスです。 〇無期限無料 ・アカウントに毎月 5 人のアクティブユーザー
17 Cloud Storage AWS S3 スケーラビリティ、データ可用性、セキュリティ、およびパフォーマンスを提供するオブジェクトストレージサービスです。 ★12 か月間 ・毎月S3 標準ストレージクラスで 5 GB の Amazon S3 ストレージ ・20,000 GET リクエスト、2,000 PUT、COPY、POST、あるいは LIST リクエス ・データ送信 15 GB
18 Cloud Vision Amazon Rekognition 機械学習の専門知識を必要とせずに、実績のある高度にスケーラブルな深層学習テクノロジーを使用して、アプリケーションに画像およびビデオ分析を簡単に追加できるようになります。Amazon Rekognition を使用すると、画像と動画の物体、人物、テキスト、シーン、活動を特定し、不適切なコンテンツを検出できます。 ★12 か月間 ・毎月5,000 件の画像分析 ・毎月最大 1,000 個の顔メタデータの保存
19 Compute Engine Amazon EC2 コンピューティングプラットフォーム ★12 か月間 ・毎月 750 時間分の Linux および Windows の t2.micro インスタンス
20 Firestore DynamoDB key-value およびドキュメントデータベースです ★12 か月間 ●オンデマンドキャパシティー ・25 GB のデータストレージ ・DynamoDB ストリームからのストリーム読み込みリクエスト 250 万回 AWS のサービス全体での合計データ転送 (アウト) 1 GB ●プロビジョニング ・WCU 25 個と RCU 25 個のプロビジョニングされたキャパシティー ・25 GB のデータストレージ ・2 つの AWS リージョンにデプロイされたグローバルテーブルに対して rWCU 25 個 ・DynamoDB ストリームからの 250 万回のストリーム読み込み要求 AWS のすべてのサービスで合計して 1 GB までのデータ転送 (アウト) (最初の 12 か月で 15 GB)
21 Google Kubernetes Engine Amazon Elastic Container Service (ECS) フルマネージド型のコンテナオーケストレーションサービスです -
    Amazon Elastic Container Service for Kubernetes(EKS) AWS クラウドまたはオンプレミスで Kubernetes アプリケーションを開始、実行、スケーリングする柔軟性を支援します。 -
    AWS Fargate Amazon Elastic Container Service (ECS) と Amazon Elastic Kubernetes Service (EKS) の両方で動作する、コンテナ向けサーバーレスコンピューティングエンジンです。 -
24 Google Maps Platform - - -
25 Pub/Sub Simple Notification Service(SNS アプリケーション対アプリケーション(A2A)間と、アプリケーション対個人(A2P)間の両方の通信に使用できる、フルマネージド型メッセージングサービスです。 ★12 か月間 ・毎月 15 GB のデータ転送
    Amazon Simple Queue Service (SQS) 完全マネージド型のメッセージキューイングサービス 〇無期限無料 ・毎月 Amazon SQS リクエストを 100 万件
27 音声入力(Cloud Speech API) Amazon Comprehend 機械学習を使用して構造化されていないデータから情報を見つける自然言語処理 (NLP) サービスです。 ★12 か月間 ・毎月50,000 ユニットのテキスト (500 万文字) ・5 ジョブ、それぞれ最大 1 MB まで
    Amazon Polly 文章をリアルな音声に変換するサービスです。 ★12 か月間 ・毎月500 万文字無料
    Amazon Transcribe 音声をテキストに変換する機能をアプリケーションに簡単に追加できます。 ★12 か月間 ・毎月60 分無料
30 Video Intelligence API - - -
31 直接サポート サポート ツールやテクノロジー、人材、そしてプログラムなどを組合せて、お客様がパフォーマンス最適化、コスト削減、イノベーションの推進をする際のサポートを提供 -

【Java】Jsonあれこれ

 

概要

 

 

実装

ライブラリの追加

  • gradle

dependencies {
   implementation group: 'com.fasterxml.jackson.core', name: 'jackson-core', version: '2.12.3'
   implementation group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.12.3'
}

 

 

シリアライズ(data→Json文字列)

    /** Jacksonのオブジェクトマッパー */
   private static final ObjectMapper OBJECT_MAPPER = new ObjectMapper();

   /**
    * Jsonシリアライズ
    *
    * @param data
    * @return
    */
   public static <T> String serializeJson(T data) {

       String result = "";
       try {
           result = OBJECT_MAPPER.writeValueAsString(data);
      } catch (JsonProcessingException e) {
           e.printStackTrace();
           throw new RuntimeException(e);
      }
       return result;
  }

 

呼び出し方

    private JsonUtils sut;

   @Test
   public void testSerializeJson() {

       Map<String, String> input = new HashMap<>();
       input.put("testKey", "testValue");

       String result = sut.serializeJson(input);

       System.out.println(result);
  }

 

実行結果

{"testKey":"testValue"}

 

 

シリアライズJson文字列→data)

    /** Jacksonのオブジェクトマッパー */
   private static final ObjectMapper OBJECT_MAPPER = new ObjectMapper();

/**
    * Jsonのデシリアライズ
    *
    * @param data
    * @return
    */
   public static <T> T deserializeJson(String json, Class<T> type) {

       T result;
       try {
           result = type.getDeclaredConstructor().newInstance();
      } catch (InstantiationException | IllegalAccessException | IllegalArgumentException | InvocationTargetException
               | NoSuchMethodException | SecurityException e) {
           throw new RuntimeException(e);
      }

       try {
           result = OBJECT_MAPPER.readValue(json, type);
      } catch (JsonProcessingException e1) {
           e1.printStackTrace();
           throw new RuntimeException(e1);
      }
       return result;
  }

 

呼び出し方

    @Test
   public void testDeserializeJson() {

       String input = "{\"testKey\":\"testValue\"}";

       Map<String, String> result = sut.deserializeJson(input, HashMap.class);

       System.out.println(result);
  }

 

実行結果

{testKey=testValue}

【Angular】PJのひな型(AngularMaterial + Angular Flex-Layout)

概要

初期PJ生成のメモ。

以下のライブラリを使用する。

 

手順

Angularプロジェクトの新規作成

ng new ${PJ名} --routing --style scss

 

Angular Materialの追加

ng add @angular/material
  • ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

  • ? Set up global Angular Material typography styles? Yes

  • ? Set up browser animations for Angular Material? Yes

 

Angular Flex-Layoutの追加

npm install --save @angular/flex-layout @angular/cdk

 

  • moduleに追加

import { FlexLayoutModule } from '@angular/flex-layout';
...

@NgModule({
   ...
   imports: [ FlexLayoutModule ],
   ...
});

 

【Angular】Angular Materialでフォントを変更する

AngularMaterialでフォントを変更する

 

 

実装

 

index.html

<head>
 <meta charset="utf-8">
 <title>Sample</title>
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- 変更するフォントを追加 -->
 <link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet">
</head>

 

style.css

html, body { height: 100%; }
// Angular Materialの設定
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

// 全てのセレクタにフォントを適用
* {
 font-family: 'Rounded Mplus 1c';
}

【Angular】実装メモ~Router編~

Routing

 

実装

 

画面遷移の設定

  • app-routing.module.ts内に定義する

 

初期画面の設定

  • パス指定無しの場合のリダイレクト設定

  • pathMatch: 'full'はパスの完全一致

{ path: '', redirectTo: 'top', pathMatch: 'full' },

 

ルートの設定

{ path: 'top', component: TopComponent },

 

子ルートの設定

  • パスは「/${親path}/${子path}」

    • 例の場合は/top/child

{ 
 path: 'top',
 component: TopComponent,
 children: [
  {
     path: 'child',
     component: ChildComponent,
  },
]
},

 

パスに一致するものが無い場合の設定

{ path: '**', component: TopComponent }

 

 

画面遷移処理の実装

 

HTMLに実装

  • /を外すと子ルートへのパスになる

<a routerLink="/top">画面遷移</a>

 

Componentに実装

import { Component, OnInit } from '@angular/core';
// インポートを追加
import { Router } from '@angular/router';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
 // RouterをInjection
 constructor(private router: Router) {}

 ngOnInit(): void {}

 onClickButton(){
   // 画面遷移
   this.router.navigate(['/top']);
}
}

 

 

Guard

Guradの種類

NO 種類 概要 ユースケース
1 canActivate ・画面遷移時に実行される ・戻り値がfalseの場合は画面遷移しない ・画面遷移時の認証状態チェック
2 canActivateChild ・処理タイミングはcanActivateと同じ ・子ルートの制御に使用する ・権限ごとの表示項目制御
3 canDeactivate ・画面から離れる時に実行される ・画面から離れる時の確認
4 canLoad ・モジュールを読み込み時に実行される ・権限ごとの遅延ロード可否
5 resolve ・画面遷移前に実行される ・データ取得を行い遷移先に渡す ・外部APIへのアクセス等でデータ取得に時間がかかる場合に使用する ・canActivate等とは違い処理時間がかかっても空白画面が表示されない ※serviceとして作成する ・外部APIからデータが取得できた場合だけ特定画面に遷移

 

生成コマンド

  • Angular-CLIのコマンド

  • 実装するGuardを選択する

ng g guard ${ガード名}

 

Guardの実装

例)canActivate

  • 画面遷移時に認証状態を確認する

import { Injectable } from '@angular/core';
import {
 CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router,} from '@angular/router';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { AppStore, Storekey } from 'src/app/state/store/store-definition';
import { tap } from 'rxjs/operators';

@Injectable({
 providedIn: 'root',
})
export class AuthGuard implements CanActivate {
 /** 認証状態 */
 isloggedIn$: Observable<boolean>;

 constructor(private store: Store<AppStore>, private router: Router) {
   this.isloggedIn$ = store.select(Storekey.isloggedIn);
}

 canActivate(
   next: ActivatedRouteSnapshot,
   state: RouterStateSnapshot
):
   | Observable<boolean | UrlTree>
   | Promise<boolean | UrlTree>
   | boolean
   | UrlTree {
   return this.isloggedIn$.pipe(
     tap((loggedIn) => {
       // 認証されていない場合に特定画面に遷移
       if (!loggedIn) {
         this.router.navigate(['/login']);
      }
    })
  );
}
}

 

ルートに設定

{ path: 'top', component: TopComponent, canActivate: [AuthGuard] }

【Angular】実装メモ~Form編~

Form

  • FormGroupで実装

  • 入力フォームを次の仕様で作る

    • 縦並び

    • バリデーション付き

    • バリデーションエラー時はボタンを非活性

    • UIライブラリにAngular Material + flex-layoutを使用

 

 

実装イメージ

(初期表示)

f:id:kanmi-program:20201130191051p:plain

 

(入力時)

f:id:kanmi-program:20201130191109p:plain

 

(エラー時)

f:id:kanmi-program:20201130191125p:plain

 

 

実装

  • app.module

// インポートを追加
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { FlexLayoutModule } from '@angular/flex-layout';

// NgModuleに追加
imports: [
   // Angular Materialのモジュールを追加
   MatInputModule,
   MatButtonModule,
   // flex-layoutのモジュールを追加
   FlexLayoutModule,
]

 

  • component

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import { UserActions } from 'src/app/state/action/user-actions';
import { AppStore } from 'src/app/state/store/store-definition';

import { integerValidator } from "src/app/validator/sample-validator";

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss'],
})
export class TestComponent implements OnInit {
 constructor(
   private fb: FormBuilder,
   private router: Router,
   private store: Store<AppStore>
) {}

 public sampleForm: FormGroup;
 ngOnInit() {
   this.initForm();
}

 // フォームの初期化処理
 initForm() {
   this.sampleForm = this.fb.group({
     // バリデーターの設定
     // 第一引数に初期値、第二引数にバリデーター
     userId: ['', [Validators.required, integerValidator()]],
     password: ['', Validators.required],
  });
}

 login(value: any) {

   // ログインActionをdispatch
   this.store.dispatch(UserActions.login());
   // ユーザーID追加Actionをdispatch
   this.store.dispatch(UserActions.addUser({ userId: value.userId }));

   // 画面遷移
   this.router.navigate(['state']);
}
}

 

  • html

<form class="example-form" [formGroup]="sampleForm" (ngSubmit)="login(sampleForm.value)">
 <div fxLayout="column">
   <mat-form-field appearance="fill">
     <mat-label>ユーザーID</mat-label>
     <input type="url" matInput formControlName="userId" placeholder="userId" required>
     <mat-error *ngIf="sampleForm.controls.userId.hasError('integerValidator')">
      数字のみです
     </mat-error>
     <mat-error *ngIf="sampleForm.controls.userId.hasError('required')">
      ユーザーIDを入力してください
     </mat-error>
   </mat-form-field>

   <mat-form-field appearance="fill">
     <mat-label>パスワード</mat-label>
     <input type="password" matInput formControlName="password" placeholder="password" required>
     <mat-error *ngIf="sampleForm.controls.password.hasError('required')">
      パスワードを入力してください
     </mat-error>
   </mat-form-field>

   <button type="submit" mat-raised-button color="primary" [disabled]="!sampleForm.valid">ログイン</button>

 </div>
</form>

 

・customValidator

import { AbstractControl, ValidatorFn } from '@angular/forms';


const REG_INTEGER = /^[0-9]*$/

export function integerValidator(): ValidatorFn {
 return (control: AbstractControl): { [key: string]: any } | null => {
   // 値のチェック
   const result = !REG_INTEGER.test(control.value);
   // チェック結果を返却
   return result ? { integerValidator: { value: control.value } } : null;
};
}