まず、TypeScriptとは？についてです。

TypeScriptとは、JavaScriptを拡張して作られたものですが、JavaScriptとは違い静的型付けのクラスベースオブジェクト指向言語です。

TypeScriptをコンバートすると、JavaScriptのコードに変換されるため、JavaScriptが動く環境であればすぐに使うことができます。

JavaScriptのライブラリなども使用でき、互換性は抜群！！

では、TypeScriptとJavaScriptの違いについて、書いていきます！

JavaScriptとの違い

大きな違いは以下の3点かと思います！

静的型付け

以下のように型を宣言できる

let flag: boolean = false; // boolean型
let decimal: number = 256; // 数値型
let word: string = 'hello'; // 文字列型

クラスが使える

以下のようにクラスが使える。interfaceやextendも使える

class User {
  name: string
  age: number
  constructor {name: string) {
    this.name = name;
  }
}
const user= new User('test user')

ジェネリクスが使える

ジェネリクスとは「抽象化されたデータ型」を表現する機能

実際に利用される時に、型を確定させるという使い方が可能です。

型だけが違う同じ機能を持つ関数やクラスは、ジェネリクスで1つ用意しておくことで、再利用性ができ、ソースコードの保守性が増します。

let getArray = <T>(value: T): T[] => { // <T>という抽象的な型を宣言
  return [value, value, value];
};

console.log(getArray<number>(1)); // 実行時に<T>の部分に型を指定してあげる

try-catch-finallyのcatchの中でreturnや例外発生をさせた場合の挙動を調べてみます。

対象言語はJavaScript、PHPです。

結論としては、JavaScriptとPHPで挙動は同じです。

上記の動作となりました。

JavaScript

JavaScriptでcatchの中でreturnした場合

↓調査した際のプログラム↓

function test() {
  try {
    throw 'error'
  }catch(e){
    console.log('catch');
    return 'catch return';
  }finally{
    console.log('finally');
    return 'finally return';
  }
}
console.log(test());

↓出力結果↓

catch
finally
finally return

catchのあとにfinallyが実行されていることが分かる

→catch内のreturn文は動作していない。

JavaScriptでcatchの中で例外発生した場合

↓調査した際のプログラム↓

unction test() {
  try {
    try {
      throw 'error'
    }catch(e){
      console.log('catch');
      throw 'catch error'
    }finally{
      console.log('finally');
    }
  }catch(e){
    return 'catch error2'
  }
}
console.log(test());

↓出力結果↓

catch
finally
catch error2

catchのあとにfinallyが実行されていることが分かる。同時にcatchに投げ、例外も発生している。

PHP

PHPでcatchの中でreturnした場合

↓調査した際のプログラム↓

<?php
try {
    throw new Exception('error');
} catch(Exception $error) {
    print "catch\n";
    return;
} finally {
    print "finally\n";
    return;
}

↓出力結果↓

catch
finally

catchのあとにfinallyが実行されていることが分かる

→JavaScript同様、catch内のreturn文は動作していない。

PHPでcatchの中で例外発生した場合

↓調査した際のプログラム↓

<?php
try {
    try {
        throw new Exception('error');
    } catch(Exception $error) {
        print "catch\n";
        throw $error;
    } finally {
        print "finally\n";
    }
} catch(Exception $error) {
    print "catch2\n";
}

↓出力結果↓

catch
finally
catch2

JavaScriptと同様にcatchのあとにfinallyが実行されていることが分かる。同時にcatchに投げ、例外も発生している。

具体的にはJavaScriptの以下の構文をブラウザで呼び出した時に、ブラウザ上にダイヤログが表示されない事象について記載していきます。

alertの構文

alert("ブラウザ上で表示するメッセージ");

confirmの構文

confirm("確認ダイヤログ");

では、「alert」や「confirm」が表示されない原因を記載していきます。

原因

同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示すると、ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れます。

このチェックボックスにチェックを入れると以降、ダイヤログが表示されなくなります。

「IE」「Edge」「Chrome」など主要なブラウザで発生します。「Chrome」はバージョンによってチェックボックスが表示されず、ダイヤログが表示されなくなる事象が発生しないケースもあるようです。

上記に当てはまらない場合、構文の書き間違い(スペルミス)という凡ミスもありますので、注意しましょ！

原因がわかったので、次に対処方法について記載していきます。

対処方法

すぐにできる対処方法としてはブラウザの再起動。これだけでダイヤログが表示されるようになります。取り急ぎのその場をしのぐ対応としては有効。

根本対策としては「alert」や「confirm」を使用しないサイト構成とするのが有効です。

代わりにモーダル表示を使うと良いです。

モーダル表示は、JavaScriptライブラリを使うと簡単にできます。

有名なJavaScriptライブラリを2つあげておきますー

①JavaScriptライブラリ：jquery

jQuery

jQuery: The Write Less, Do More, JavaScript Library

jquery.com

②JavaScriptライブラリ：Micromodal.js

Micromodal - Tiny javascript library for creating accessible modal dialogs

Micromodal enables you to create accessible modal dialogs with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

micromodal.now.sh

alertやconfirmは画面操作を奪ってしまう（アラート、コンファームを操作しないと別ページにうつれない）ので、同一ドメイン内で複数回使うと攻撃とみなされるのでしょうね。

対処方法

すぐにできる対処方法としてはブラウザの再起動
根本対策としては「alert」や「confirm」の代わりにモーダル表示を使うと良い
→JavaScriptライブラリ(jquery,Micromodal.jsなど)で簡単に実装可能

「alert」や「confirm」が表示されない現象が発生するブラウザ

Windows ブラウザ（IEやEdge）やChromeなど主要なブラウザで発生するようです。

バージョンによっては発生しないケースもあるようです。

また、他のブラウザは未確認ですが、発生する可能性はありそう！

Chromeについては最新バージョンの場合は発生しないようですので、Chromeのバージョンアップをするという応急処置もあります。

まとめ

原因と対処方法をまとめると以下のようになります！

まとめ

<原因>
①同一ドメイン内で2回以上「alert」や「confirm」でダイヤログを表示
②ダイヤログの下の方に「このページにこれ以上メッセージの作成を許可しない」のチェックボックスが現れる
③チェックボックスにチェックを入れると、以降、ダイヤログが表示されなくなる
※「IE」「Edge」「Chrome」など主要なブラウザで発生
<対処方法>
すぐにできる対処方法としてはブラウザの再起動
根本対策としては「alert」や「confirm」の代わりにモーダル表示を使うと良い
→JavaScriptライブラリ(jquery,Micromodal.jsなど)で簡単に実装可能