テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている j…

JS と CSS を HTML テンプレートで読み込んでという化石な環境で開発をしています。 前回は SCSS だけ webpack でビルドする環境を作りました。 今回は Vanilla JS でブラウザ対応を考えながら書くのは流石に DX が最悪なので最低限のトランスパイルできる環…

npm script で SCSS をコンパイルしてたのだけれど、環境変数や変数展開などを多用していたら Windows 環境でエラーになりビルド出来ない問題続出してメンテコストが高くなってしまいそうだったので、ざっくり webpack で CSS だけビルドする設定を作成下の…

npm パッケージを使っていてライブラリのアップデートが速いものは、新しくなった方法を試そうとしたら依存しているパッケージが変更になっていたりでハマってしまうことが割とあります。 このパッケージが依存してるライブラリ何？が知りたい時のメモ npm v…

ちょいちょいと試せる localhost でないサーバーで検証したいことがあったので Flask のアプリを Heroku にデプロイしてみました。(DB無し) Flask アプリの準備 # 仮想環境を作成 $ python -m venv .venv # 仮想環境を実行 $ source .venv/bin/activate # Fl…

TypeScript React の FC, VFC という型は過渡期で将来的に変更になる可能性があるからコンポーネントの返す型は JSX.Element にした方が良いという記事を読んで新しいプロジェクトでは JSX.Element を使うようにしたのですが、そこでハマったことのメモ null…

react-hook-form というライブラリを使ってフォームを作っていたのですが、input や textarea が Atom レベルのコンポーネントになっており、ライブラリの都合で ref を渡す必要があったので forwardRef の型を頑張ったメモ。 "react": "17.0.2" "typescript…

PR確認でリモートのブランチにチェックアウトしようとしたらエラーになってチェックアウトできなくなった。 $ git checkout -b feature/foo origin/feature/foo fatal: 'origin/feature/foo' is not a commit and a branch 'feature/foo' cannot be created …

新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。 カラーバリエーションを生成する // デフォルトの…