最近のReactでは関数コンポーネント＆ReactHooksを使うのが主流らしい。 キャッチアップしたところ、state管理がコンポーネントからキレイに分離できてよさそうだった。 index.tsx import * as React from "react"; import * as ReactDOM from "react-dom"; …

必要なライブラリのインストール ビルドツールをインストールする npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader React関連のライブラリをインストールする。 ビルド後のファイルに含めるので--saveとする。 npm ins…

やり方には、ts-jestを使う方法と、babelを使う方法がある。 babelを使うやり方は、https://kinosuke.hatenablog.jp/entry/2020/01/29/115640 と同じアプローチ。preset-envをpreset-typescriptにするだけ。ただし、型チェックはできない。 今回は、型チェッ…

https://kinosuke.hatenablog.jp/entry/2021/07/23/165039 のやりなおし。 babelはTypeScriptからJavaScriptへの変換だけをやってくれるだけで、肝心の型チェックはやってくれなかったので、ts-loaderを使ってやってみる。 必要なライブラリをインストール n…

TypeScriptをはじめてみる - コピペコードで快適生活 の続き 必要なライブラリをインストール npm install --save-dev webpack webpack-cli typescript babel-loader @babel/core @babel/preset-typescript webpack: モジュールバンドラー。 JavaScript等の…

TypeScriptの雰囲気を掴むために、5分でできるチュートリアルをやってみる。 環境の準備 PC環境は汚したくないので、dockerで環境を作る。 #{APP_DIR}/docker-compose.yml に以下を書く version: '3' services: node: image: node volumes: - "./:/var/app" …

確認できる環境(minikube)の準備 $ brew install kubectl $ kubectl version --client $ brew install minikube $ minikube version minikube コマンド minikube start # 起動(デフォルトはDockerで起動) minikube status # 状態表示 minikube ssh # ホストO…

バックアップスクリプトでよくやるのだけど、毎回書き方を忘れているのでメモ。 # -execオプションを使う版 # {} が対象のファイルパスに置換されて実行される。 # -mtime +3 => 最終更新日時が、過去〜4(3+1)日前のファイルを表示する find ${TARGET_DIR} -…

シェルスクリプトを書くときに、アタマに添えるおまじないをメモ。 #!/bin/sh # set -e # スクリプトの実行中にエラー(exit 0以外)が発生すると、そこでスクリプトが終了させる。 # というかつけてないと、エラーしても次の処理に進むから怖い。 # # set -u …

ブラウザ → proxy(nginx) → origin(apache) の通信経路で、originがTCPコネクションを切った場合、proxyは50xを返す。proxy(nginx)にはこんなログが出る。 proxy_1 | 2021/07/01 13:15:38 [error] 25#25: *2 upstream prematurely closed connection while r…

ダーティページの使用状況を確認したかったので。 mysql> SHOW GLOBAL STATUS LIKE 'InnoDB\_buffer\_pool%'; +-----------------------------------+---------------+ | Variable_name | Value | +-----------------------------------+---------------+ | …