カフェでプログラミングしてる風（でも何もやってない）の Ionic (Angular + Typescript) コード

# おしゃれなカフェで...
はじめまして、S/Wエンジニアのかつしょんです。
最近、Ionic(Typescript + Angular)にはまっていまして、
いろいろと他の方の記事に助けられているため、
少しづつ、自分が得た知見を記事に残していこうと思います。
（この記事が、Qiita初投稿です、、、、）


さて、今回は、こちらの記事のJavaコードをベースに、ブラウザで動作する Ionic版 (Anugular + Typescript) を作ってみました。
[カフェでプログラミングしてる風（でも何もやってない）Java（クソ）コード](https://qiita.com/3S_Laboo/items/660883a0184dabaea65b)

この記事の発想、大好きです！

# 開発環境
今回の開発環境は下記となります。

```
Ionic:

   Ionic CLI                     : 5.4.16 
   Ionic Framework               : @ionic/angular 5.6.0
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.1.0

Utility:
   cordova-res : 0.11.0
   native-run  : 1.0.0

System:
   NodeJS : v10.16.3 
   npm    : 6.9.0
   OS     : Windows 10
```


# プロジェクトを作る
まずは、ブランクのプロジェクトを作成します。
プロジェクトの名前は　`CafeDeShigoTo`とします。
コマンドプロンプトを起動し、下記を入力。

```
ionic start CafeDeShigoTo blank
```

これで、まずはブランクプロジェクトの完成です。

# コンソール画面を作る
コンソール画面を作っていきます。
HTML → SCSS → TSファイルの順に作っていきます。

## home.page.htmlの編集
元記事の場合は、JAVAコードですので、PCのコンソールで実行できますが、
今回はブラウザ上で動作させたいので、まずはコンソール風のページを作ります。

home.page.htmlを開くと、生成時は下記となっています。

```html:home.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <strong>Ready to create an app?</strong>
    <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
  </div>
</ion-content>
```

ion-headerは不要です。
今回はスクロールする必要もないのでion-contentも削除します。
下記のようにします。

```html:home.page.html

<div id="container">
<p>{{console}}</p>  
</div>
```

すっきりですね。
`{{console}}` は、後で`home.page.ts`で定義する consoleという変数の中身を表示するということになります。


## home.page.scssの編集

続いて、CSSファイルを編集します。
生成時は下記のようになっています。

```scss:home.page.scss

#container {
  text-align: center;

  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;

  color: #8c8c8c;

  margin: 0;
}

#container a {
  text-decoration: none;
}
```

これをコンソール風に変更します。

```scss:home.page.scss

#container {
  text-align: left;
  padding: 10px;
  background-color: black;
  width: 100%;
  height: 100%;
  overflow: scroll;         // あふれたらスクロールバーを表示
}

#container p {
  font-size: 16px;          // font size はお好みで
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
  white-space: pre-wrap;    // 改行コードで改行するため
}

```

なお、`white-space: pre-wrap;`　を入れないと、改行コードが効かないので入れ忘れないように。



## home.page.tsの編集
続いて、 home.page.tsを編集します。
生成時は下記のようになっています。

```typescript:home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {}

}
```

下記のようにします。

```typescript:home.page.ts

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  public console: string = "" // 画面に表示する文字（コンソールバッファ）

  constructor() { }

  // 画面が表示し終わったタイミングで呼び出される
  ionViewDidEnter() {
    this.main();
  }

  public async main() {
    // 50文字まで#を表示する
    let x: number = 50;
    // カウントアップする変数
    let y: number = 0;
    while (true) {
      if (x != y) {
        // 上限まで#を足していく
        this.print("#");
      } else {
        // 50文字になったら「 done!! + 改行」を出力し
        // 何かが終わった感を演出
        this.println(" done!!");
        // カウントアップをリセット
        y = -1;
      }
      // カウントアップしていく
      y++;
      // 高速で出力すると素敵感が出ないので
      // 出力待ち時間を作成する
      let sleepTime: number = 10;
      // ランダム値にマッチすると待ち時間をさらに長くする。
      // 何か大きな処理をしているように見えること請け合い
      let osooso: number = Math.floor((Math.random() * 10));
      if (4 < osooso && osooso <= 6) {
        sleepTime = 100;
      }
      await this.sleep(sleepTime);
    }
  }

  /**
   * sleep関数
   * @param milliseconds ミリ秒
   */
  private sleep(milliseconds: number) {
    return new Promise<void>(resolve => {
      setTimeout(() => resolve(), milliseconds);
    });
  }

  /**
   * print関数
   * @param str コンソールに表示する文字列
   */
   private print(str: string) {
    this.console = this.console + str;
    document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;   // 画面をscrollする
  }

  /**
   * println関数
   * @param str コンソールに表示する文字列
   */
   private println(str: string) {
    this.console = this.console + str + '\n';
  }

}
```

まず、sleep関数がありませんので、 async/awaitを使ってsleep関数を作成します。

続いて、print関数、println関数を作成します。
これらの関数は、this.consoleというコンソルバッファへ文字列を連結するようにします。

あと、元の記事のコードをmain関数として移植（コピー＆ペースト）してから、
細かい文法の違いを修正します。

# 動作確認
下記コマンドを実行して、ブラウザ上で動作を確認します。

```
ionic serve
```


![demo1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017303/51276069-9ea2-ec2b-4d6c-73f4e41ece50.gif)


この何かしている感！！笑
こりゃきっと何かしてますね！！笑


# コンパイルが動いている風
せっかくなので、もう一つの「コンパイルが動いている風」のほうも作っておきます。

下記を実行して、新しいページ(compile)を作ります

```
ionic g page compile
```

つづいて、生成された compileフォルダの各ファイルを下記のようにします。

まずはHTMLファイル。

```html:compile.page.html
<div id="container">
  <p>{{console}}</p>  
</div>
```

続いて、SCSSファイル。

```scss:compile.page.scss
#container {
    text-align: left;
    padding: 10px;
    background-color: black;
    width: 100%;
    height: 100%;
    overflow: scroll;
  }
  
  #container p {
    font-size: 16px;          // font size はお好みで
    line-height: 22px;
    color: #8c8c8c;
    margin: 0;
    white-space: pre-wrap;    // 改行コードでするため
  }
  
```


上記二つは、先ほどの場合と同じです。
で、のこりはTS(Typescript)ファイルです。

```typescript:compile.page.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-compile',
  templateUrl: './compile.page.html',
  styleUrls: ['./compile.page.scss'],
})
export class CompilePage implements OnInit {

  public console: string = "" // 画面に表示する文字（コンソールバッファ）

  constructor() { }

  ngOnInit() {
  }

  // 画面が表示し終わったタイミングで呼び出される
  ionViewDidEnter() {
    this.main();
  }

  public async main() {
      console.log("main")
      while (true) {
        // カウントアップ
        let x:number = 1;
        // 出力文字列
        let code: string = "";
        while(true) {
          // 0から9までの数値をランダムで出力
          let num:number = Math.floor(Math.random() * 9);
          // 出力文字列に足していく
          code += num.toString();
          if (x == 50) {
            // 50文字でブレイク
            break;
          }
          x = x + 1;
          console.log(x)
        }
        // 数値の羅列を出力：いい感じにコンパイルしてる感が出る
        this.println(code);
        // 高速で出力すると素敵感が出ないので
        // 出力待ち時間を作成する
        let random: number = Math.floor(Math.random() * 10);
        let sleepTime: number = 100;
        // ランダム値にマッチすると待ち時間をさらに長くする。
        // 何か大きな処理をしているように見えること請け合い
        if (4 < random  && random <= 6) {
          sleepTime = 500;
        }
        // 待つ
        await this.sleep(sleepTime);
      }
  }

  /**
   * sleep関数
   * @param milliseconds ミリ秒
   */
  private sleep(milliseconds: number) {
    return new Promise<void>(resolve => {
      setTimeout(() => resolve(), milliseconds);
    });
  }

  /**
   * println関数
   * @param str コンソールに表示する文字列
   */
  private println(str: string) {
    this.console = this.console + str + '\n';
    document.getElementById("container").scrollTop = document.getElementById("container").scrollHeight;
  }

}

```

sleep関数の呼び出し時に、awaitを付け忘れがちです。
awaitをつけないと、ブラウザが固まってしまいますので、
ご注意ください。

あとは、`ionic serve` を実行して起動します。


今回は`compile`というページに作りましたので、
`http://localhost:8100/compile` にアクセスします。

![compile-0001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017303/9ff4c96a-806a-0d65-94c4-c5600a5df4dc.gif)


実際に、近くのタリーズに行って実行してみましたが、
もう、何かすごいことをしている感がでまくりでした！