TypeScript Sampleをやってみるその１１


## はじめに
番外編です。
TypeScriptでTwitterへツイートするサンプルを作った備忘録を投稿します。
IEのデバッグにも触れてみました。
## 前提
* [Visual Studio Code](https://code.visualstudio.com/download)がインストール済み
* [Node.js/npm](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)がインストール済み
* 参考にさせていただいたサンプル：[「TypeScriptでブオボブババボ！」](https://qiita.com/tonkotsuboy_com/items/c2941bf80531b564fafe)
* OSはWindows7/10
* ブラウザ : IE11

## サンプル Twitter
あいさつ文をランダムに作成しTwitterへツイートするサンプル

## ファイル構成
|パス|ファイル名|説明|
|:--|:--|:--| 
|.|index.html|Twitterあいさつ送信画面htmlファイル|
|.|style.css|スタイルシート|
|.|Twetter.js|Twitter.tsのコンパイルにて作成されたJavaScriptファイル|
|.|Twetter.js.map|Twitter.tsのコンパイルにて作成されたmapファイル|
|.|Twetter.ts|あいさつ文をランダムに作成するTypeScript|
### index.html
``` html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Twitterあいさつ投稿</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
</head>
<body>

<h1 class="title">今日のあいさつツイート</h1>

<div class="content">
  <textarea class="form-control" id="output" rows="6"></textarea>
  <div id="createButton" class="btn btn-secondary btn-block">あいさつ作成</div>
  <div id="tweetButton" class="btn btn-primary btn-block">ツイート</div>
</div>

<script type="text/javascript" src="Twetter.js"></script>
</body>
</html>
```
>
scriptのコーディング位置が重要です。
\<head>にscriptをコーディングするとエラーになります。
なぜなら、\<heade>では`Twitter.js`で参照している`output`や`createButton`、`tweeterButton`のインスタンスが作成される前に、ブラウザはscriptをチェックしてエラーになります。
htmlは上から下へ降順にチェックするので、scriptのコーディングは\<p>や\<div>などの記述後になります。
>

### style.css
``` StyleSheet
#output {
    font-size: 1.5rem;
}
```
### Twitter.ts
``` TypeScript
class Main {
	// あいさつテーブル 0～29
	texts:string[] = [
		"どうも",
		"ありがとうございます",
		"いただきます",
		"ごちそうさまでした",
		"ごめんください",
		"いってらっしゃい",
		"いってまいります",
		"ごめんなさい",
		"こんばんは",
		"おかえりなさい",
		"ただいま",
		"さようなら",
		"おかげさまで",
		"しつれいしました",
		"おげんきで",
		"しつれいします",
		"おだいじに",
		"すみません",
		"おねがいします",
		"それはいけませんね",
		"おはようございます",
		"お待たせいたしました",
		"では、また",
		"おめでとうございます",
		"どういたしまして",
		"おやすみなさい",
		"はじめまして",
		"かしこまりました",
		"よく、いらっしゃいました",
		"よろしく"
	];

	// あいさつ最小
	min:number = 0;
	// あいさつ最大
	max:number = 29;
	// ツイートテキスト
	tweetText:string = "";
	// 文字列テキストエリア。
	output:HTMLTextAreaElement;

	constructor() {
		this.output = <HTMLTextAreaElement> document.getElementById("output");
		this.createTweet();
		this.createButtons();
	}

	/**
	 * ツイート文字列生成
	 */
	private createTweet():void {
		this.tweetText = "";
		this.tweetText = this.getText();
		this.display();
	}

	/**
	 * ランダムにあいさつを作成
	 */
	private getText():string {
		return "みなさん、" + this.texts[Math.floor(Math.random() * (this.max + 1 - this.min)) + this.min]
	}

	/**
	 * テキストエリアに文字を設定
	 */
	private display():void {
		this.output.value = this.tweetText;
	}

	/**
	 * ボタンのイベント
	 */
	private createButtons():void {
		// あいさつ作成ボタン
		document.getElementById("createButton").addEventListener("click", () => this.createTweet());
		// あいさつツイートボタン
		document.getElementById("tweetButton").addEventListener("click", () => {
			// Twitter画面表示
			window.open("https://twitter.com/intent/tweet?text=" + encodeURI(this.tweetText));
		});
	}
}

// Mainクラスを実行する。
window.addEventListener("load", () => new Main());
```
>
- テーブルに用意したあいさつをMath.random関数を利用してランダムに取り出し、Htmlのoutputへ出力します。
- あいさつ作成ボタン押下で新しいあいさつをoutputへ出力します。
- ツイートボタン押下であいさつを引数としてTwitterのツイート画面に遷移します。
>

## クラス図
![TS_055.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/aae4077c-ed0d-97e9-d1b3-6242e4485359.jpeg)
>
windowクラスはブラウザのクラスになります。
DOMオブジェクトはHTMLの構成要素にアクセスするクラスを提供しています。
面白い実験をひとつ。
`Twitter.js`を直接実行すると下記のようなエラーになります。
「ReferenceError: window is not defined」
これは、`index.html`から`Twitter.js`のインスタンスを作成する場合は、windowクラスは作成済みなのですが、`Twitter.js`単体の実行ではハンドリングすべきwindowクラスが存在しないためエラーになります。
documentも同様です。
>
``` shell
C:\Users\kousei00\basic\TypeScript\TypeScriptSamples-master\wrk\Twetter>node Twetter.js
C:\Users\kousei00\basic\TypeScript\TypeScriptSamples-master\wrk\Twetter\Twetter.js:82
window.addEventListener("load", function () { return new Main(); });
^
ReferenceError: window is not defined
...
```

## 実行
```
cd ./Twitter
tsc --sourcemap Twetter.ts
```
>
`index.html`をブラウザで表示
>

## 結果
![TS_056.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/68636959-387f-0cea-68d8-dc18e127d79b.jpeg)
>
ブラウザでデバッグしてみます。
`index.html`の表示されている要素の詳細を表示させるには
表示項目→マウス右クリック→要素の検査をクリック
※ <kbd>F12</kbd>でデバッグ画面表示
>

![TS_057.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/3109ee90-2a62-3482-78a4-baa6984dfcd8.jpeg)
>
DOM Explorerが表示され、対応する`index.html`の定義にフォーカスされます。
>

![TS_058.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/68c0a3d4-f098-bdb8-0454-7949dd1cc6d6.jpeg)
>
DOM Explorerタブの２つ右のデバッガータブをクリックします。
index.htmlが表示されます。
index.htmlの左側のフォルダーアイコンをクリックしてリストを表示させます。
リストの`Twitter.ts`を選択します。
>

![TS_059.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/5eb1238e-5f8c-fced-e711-7b90f9e5e350.jpeg)

>
`Twitter.ts`のソースが表示されます。
`Twitter.js`ではなく`Twitter.ts`が同じディレクトリにあれば、TypeScriptを表示する？
デバッグしてみます。
>

![TS_060.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/b1933049-b086-b5a8-6773-95108c497307.jpeg)

>
56行目、79行目、81行目にブレークポイントを指定します。
該当の行で右クリックでメニューから選択または<kbd>F9</kbd>
最左の枠を直接クリックでもブレークポイントの赤丸が設定できます。
>

![TS_061.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/2ca62065-d8eb-d5c1-6462-ff5ff006e640.jpeg)
>
あいさつ作成ボタンを押下します。
>

![TS_062.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/7caf36bb-34fb-1958-9a87-3cd2af784cb4.jpeg)
>
56行目でプログラムが停止した状態になります。
<kbd>F8</kbd>でステップ実行します。(行単位のデバッグ）
outputのテキストが変わります。
ツイートボタンを押下してみます。
>

![TS_063.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/00c3d3a2-64f9-2731-9b9c-63388c7b8237.jpeg)
>
Twitter画面のツイートボックスにあいさつが入力されています。
ツイートボタン押下でツイートできます。
※ twitterアカウントでログインが必要。
>

![TS_064.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/4901a221-fd92-170f-7878-4ae3cea29bc2.jpeg)

## ノート
- htmlのscriptは表示項目コーディング後にコーディング
- ブラウザのデバッグは<kbd>F12</kbd>
- 乱数はMath.Random関数

## まとめ
ほば[「TypeScriptでブオボブババボ！」](https://qiita.com/tonkotsuboy_com/items/c2941bf80531b564fafe)をパクらせていただきました。この場をお借り謝辞。
typescriptのコーディングとhtmlの関係はブラウザでデバッグが一番と思いました。
ブラウザで<kbd>F12</kbd>はTypeScript開発者の必須テクニックです。

以上、おそまつ