ReactはNativeでtypescript対応したらしい

下記のQiita記事でReactをTSで開発する時の初期状態を作るコマンドが乗っていた。

ReactとTSの環境を整えるにはReactやTSのパッケージをいれたり、としないといけなかったのに、コマンド一つでプロジェクトを作成することができ、随分と楽になったんだなぁ、と思った。

qiita.com

そこでは、以下のコマンドを実行する、と書いていた。

npx create-react-app rg2-front --scripts-version=react-scripts-ts

しかし、実行してみると、以下のように言われた。

The react-scripts-ts package is deprecated. TypeScript is now supported natively in Create React App. You can use the
 --typescript option instead when generating your app to include TypeScript support. Would you like to continue using r
eact-scripts-ts

なんと、NativeでTS対応をしていると。

以下のコマンドでプロジェクトを作った。良い時代になったな、と思った。

npx create-react-app rg2-front --typescript

TypeScriptで"SyntaxError: Unexpected identifier "と言われたら

以下のようなエラーにさいなまれた際の対応方法。

SyntaxError: Unexpected identifier
or
SyntaxError: Unexpected *
or
SyntaxError: Unexpected token import

この問題が発生する原因は、トランスパイルされた js ファイルをNodeが実行できないため。

試しに、 node トランスパイルされたjsのエントリファイル で、そのファイルを実行してみるとよい。同じエラーがでる。

tsconfig.jsoncompilerOptionsmodule の値を esX(Xは任意の値) から commonjs に変更すると、実行環境のNodeが実行できる出力になる。

Use object destructuring prefer-destructuring

以下のような場合、eslintがエラーが報告してくる。

async post(req: Request, res: Response) {
  const body = req.body;
}

そのため、以下のように修正することでエラーがなくなる。 プロパティをドット区切りで取得するのではなく、変数を展開して格納してあげる。

async post(req: Request, res: Response) {
  const { body } = req;
}

javascriptでプロトコル、ポート、ホスト名を取得

プロトコル+ポート+ホスト名をなんと呼ぶのかわかりませんが、 https://xxx.com:3000 みたいなものを出力する。

80番ポートの時は、ポート番号はつけないようにしている。

const protocol = window.location.protocol
const port = window.location.port
const host_name = window.location.hostname
const protocol_and_fqdn = `${protocol}//${host_name}${port!=80?':'+port:''}`
console.log(protocol_and_fqdn)

API Gatewayで Authorizer が動かない

オーソライザーが動かない

API Gatewayでオーソライザーが動かなかったのメモ。

動かないというより、そこまで到達していなかった、というだけの話だが、HTTPリクエストヘッダに Authorization を付与すればオーソラーザーが実行される。

Authorization に入れるあたいは、以下のAWSコマンドの戻り値の Session の値。

aws cognito-idp admin-initiate-auth \
--region ap-northeast-1 \
--user-pool-id XXXXX \
--client-id XXXXX \
--auth-flow ADMIN_NO_SRP_AUTH \
--auth-parameters USERNAME=XXXXX,PASSWORD=XXXXX

curlコマンドは以下。

curl -H "Authorization: XXX” https://XXX.com

Cognitoで Invalid phone number format. と言われる

Invalid phone number format.と言われる

Cognitoでユーザを作成する際、電話番号を 00000000000000-0000-0000 で入力しても、エラーが返ってくる。

電話番号の正しい(?)フォーマットは、+15555555555 だった。日本だと +81 かな。

参考

stackoverflow.com

jsでテキストをclipboardにcopyする

javascriptで外部モジュールなしに、クリップボードへコピーする方法を紹介する。

以下の関数で動く。

  copyToClipboard(text){
    navigator.clipboard.writeText(text).then(function() {
      /* clipboard successfully set */
    }, function() {
      /* clipboard write failed */
    });
  },

そのため、Nuxtjs(Vuejs)を利用する場合は、method内に上記の関数を追記し、以下のようにすることで、ボタン押下時にクリップボードへコピーすることができる。

<button @click="copyToClipboard('aaa')">Copy</button>