かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

TypeScript

Express な API でエラーハンドリングするよ

TypeScript な Express でAPI作ってエラーを返す処理を都度書いているとめんどいので、エラーハンドリングして返すようにしたメモ エラーハンドリングのミドルウェアはルーティングより後に書く 上から順番にルーティングにマッチしていくか見ていって、該当…

TypeScript で SCSS の変数を使いたい!にハマる 😇

SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…

Serverless でも DynamoDB を使いたい!

前回までのあらすじ TypeScript な Express を aws-serverless-express で Serverless 化して AWS Lambda にデプロイしました。 データベースを使えるように AWS の DynamoDB に接続できるようにしてみたメモ。 serverless.yml に DynamoDB の設定を追加する…

TypeScript な Express を aws-seveless-express で Serverless にして AWS Lambda にデプロイするまでの記録

TL;DR AWS も Lambda も自分で調べて〜なレベル感なのでなんも分かってません。 とりあえずガチャガチャやってみて、動いてるんじゃね?となったので、そこまでもプロセスをまとめただけのエントリーになります。なので、たぶん超長い記事になってると思いま…

TypeScript Express 開発環境のテンプレート作った。

はい。 Setup $ npm install # dev 用環境変数ファイル $ cp .env/.env.sample .env/.env.dev # prod 用環境変数ファイル $ cp .env/.env.sample .env/.env.prod Development /src 内の TypeScript を監視してホットリロードする開発モードです。 $ npm run …

Webpack build 時に環境にに応じた .env を読み込ませたい

前回までのあらすじ resolve.alias を使って環境毎に別のファイルを読み込ませる事ができました。 今回は .env を環境に毎に process.env に入れてビルドする方法をやってみましたの Tofu on Fire dotenv-webpack プラグインを使う dotenv-webpack プラグイ…

Webpack TypeScript な Express アプリを環境ごとに変数を埋め込んで build したい。

前回までのあらすじ Express を TypeScript で書いて webpack で build する構成で作成していて、環境毎に切り替えたい情報を直接バンドルして build したいと思いやって見たメモ。 WHY? webpack をビルドする際に mode や process.env で環境変数を渡せるの…

TypeScript で Express 開発環境を作るぞぃ!

ほぼコレを参考にしています 構成 /app |- /dist # build されたアプリの出力先 |- /src | |- index.ts # express entrypoint |- /webpack | |- base.config.js # 共通設定 | |- dev.config.js | |- prod.config.js |- nodemon.json |- package.json |- tsco…

Node.js + TypeScript nodemon + ts-node で変更が watch されず ホットリロードされないにハマる

Express を TypeScript で作成していて開発中は nodemon で ts-node を使って変更を監視してホットリロードさせたかったのですが、ファイル変更が watch されない問題にハマったのでメモ。 構成 /project_root |- /src | |- index.ts |- package.json |- nod…

VS Code ESLint 拡張が Parsing error: Cannot read file エラー config ファイルが読み込めない問題にハマる

VS Code に入れてある ESLint 拡張が TypeScript ファイルの一行目で次のようなエラーを出てしまうことがありました。 Parsing error: Cannot read file '/users/kikiki/MyApp/tsconfig.json'.eslint tsconfig.json が第一階層にないとこのエラーが出るっぽ…

TypeScript Object を Object.keys() を使ったループの型エラーにハマる

TypeScript で Object.keys(obj) でキーの配列を作ってループさせてループ内でキーでオブジェクトのデータにアクセスしようとして型エラーになってしまったのメモ e.g. 例としてデータ構造が良くないけど、ID をキーにしたオブジェクトみたいなイメージで co…

TypeScript Readonly と as const

TypeScript なんもわからん… Readonly と as const がよく判らなかったから調べたメモ Readonly TypeScriptの型システムでは、インターフェース上の個々のプロパティをreadonlyとしてマークすることができます。これにより、関数的に作業することができます(…

TypeScrip スプレッド構文で配列に変換しようとしたらエラーになった

TypeScript で [...document.querySelectorAll('meta')] こんな感じにスプレッド構文で NodeList を配列に変換しようとしたらエラーが出てしまいました。 Type 'NodeListOf<HTMLMetaElement>' is not an array type or a string type. Use compiler option '--downlevelIterat</htmlmetaelement>…

React TypeScript useState に型を設定したい

React の useState で返される state の型を指定したい useState<型>(initial value) で state に型を強制できる type IdolType = 'cute' | 'cool' | 'pop' | 'sexy'; const [type, setType] = useState<IdolType>('cute'); setType('foo'); // => Argument of type '"</idoltype>…

React Hooks forwardRef を使わずに子コンポーネントにrefを渡す

React で子コンポーネントを ref で触りたい時、forwardRef APIを使うように言われます。 例えばボタンをクリックしたらフォーカスされるインプットフィールドだとこんな感じ。 import React, { useRef } from 'react'; const InputField = React.forwardRef…

React JS のプロジェクトを TypeScript 化したメモ

環境づくりの勉強がてら ReactHooks・テストは JEST + Enzyme で作っていたプロジェクトを TypeScript 化したメモ 1. TypeScript 化のパッケージをインストール して babel 関連のパッケージをアンインストール TypeScript 化するにあたって必要なパッケージ…

TypeScript オブジェクトのデフォルト値を Array.reduce で設定しようとしたら型指定でハマった

APIからあるオブジェクトが渡され、フロントでデータが無ければデフォルト値を付けるような処理を TypeScript で書いていてハマったのでメモ。 ※ フロントは React です API から渡されるデータ InitUnitData = { first: { id: 1, name: '春風 わかば', type…

TypeScript type を & でいい感じにマージしたい。

TypeScript はちゃんと学習していないのですが、関わっているプロダクトが ts, tsx なので触る時に雰囲気で使っています。 今回はあるコンポーネントをラップするコンポーネントを作成していて、バックエンドから渡される値が、ラップするコンポーネントに定…

JavaScript (ES2015) Object の色々メモ

キーの名前とプロパティの変数名が同じなら省略できる ES5 var cute = '星宮いちご'; var cool = '霧矢あおい'; var sexy = '紫吹蘭'; var soleil_es5 = { cute: cute, cool: cool, sexy: sexy, }; console.log( soleil_es5 ); // { cute: '星宮いちご', coo…