Node.js
例えば、 Volta で以下のように Node.js バージョンを管理していたとする。 # global $ node -v v20.10.0 # project-a $ node -v v18.19.0 ここで、 pnpm を公式サイトにあるようにインストールしたとする。 $ volta install pnpm $ pnpm --version 8.11.0 $…
Cloudflare Pages の Web UI から、 PNPM + Astro なウェブサイトをデプロイするぞ！ ということで、やり方のメモ。 やり方は、リポジトリを接続した後、以下のように設定すれば良い。 ビルドコマンド： # pnpm のインストールと、依存のインストール＆ビル…
いまさら JavaScript なんて書けるか！ということで、 Contentful JavaScript SDK を TypeScript で使います。 まずはライブラリのインストール： $ pnpm add contentful いれたあと、以下のようにライブラリを定義すると良い。 import contentful from "con…
JavaScript で、例えば以下のようなオブジェクトがあったとして、 const obj = { a: false, b: undefined, c: 0, d: "", }; value が undefined なキー、つまりは今回の場合は b を除いた、以下のようなオブジェクトが欲しいケースがある。 const obj = { a:…
最近 PNPM を使っているんですが、 node -v が v18.12.1 とかを返しているにもかかわらず、 Node 14 には対応してないよ！って言われる。 それの解決方法。 基本的には、このコメントにあるとおりの作業をすれば治る。 NPM is (still?) not correctly identi…
Next.js とか使ってると、 tsconfig.json を良い感じに設定してくれてて、実質ルートディレクトリからの相対パスでモジュールをインポートできて便利です。 ただ、 ts-node で実行しようとするとコケるので、コケないようにするやり方。 といっても方法は簡…
TypeScript を直接実行できる ts-node 便利ですよね。 ところで、最近 (ってほどでもないですが) Node.js 界隈 ESM へ移行する流れがあります。 Node.js 界隈で多くの OSS をリリースしておられる Sindre さんのパッケージも、多くが ESM Native になってお…
React Hooks でデータフェッチングをするライブラリである SWR ですが、アプリケーションを通して 1 度だけ fetch したい、みたいな時もあると思います。 そのときの解決方法。 といっても、仕組みはすでに (v1.0 から) 用意されていて、以下にようにするだ…
といっても背景限定ですが、 CSS にて親要素をはみ出して、画面幅いっぱいに表示させる方法。 よく見る下記のようなコードでは、 Windows では縦スクロールバーの分まで含まれてしまい、横スクロールが出来るようになってしまう。 .overflow { width: 100vw;…
例えば、下のようなコードが合った場合、 jest の toEqual を使うと、確率で落ちます。 const arr = []; const mockDbInsert = (elem: number) => { return new Resolve((resolve) => { setTimeout(() => { arr.push(elem); }, Math.random() * 10); }); }; …
Mock サーバーを立てなくても Service Worker で働いてくれる API Mock ライブラリーである Mock Service Worker を、 ASP.NET Core + Vite な環境で使う方法についてのメモ。 といってもやり方は簡単で、わたしがとった方法は単純に mockServiceWorker.js …
TypeScript を使いたーい！しかもできるだけ早くコンパイルして欲しいー！みたいなとき、 Vite は設定も少なく爆速なので便利ですよね。 ということで、今回は Vite + ASP.NET Core を使った、爆速フロントエンド開発の紹介です。 なお、開発サーバーのみ Vi…
ブログの一部分をはてな記法に対応させてみました。 こんな感じの記述をすることで、 URL を展開してくれた便利機能のことです。 https://www.youtube.com/watch?v=dPX0_IEXVRo:embed リンクだとこんな感じ https://www.youtube.com/watch?v=dPX0_IEXVRo:tit…
JavaScript / TypeScript の高速な Rust 実装コンパイラーである SWC ですが、特定バージョン以前だとデコレーター・クラス周りの処理があるらしく、 デコレーター・クラス周りの処理をバリバリ使っている class-transformer を使用していると、以下のような…
Git LFS のプロキシサーバーを Vercel に投げつけたんですが、そのとき req.body が undefined だったので、その対処法としての方法を紹介します。 Express (Vercel) を使ってる場合、 app.use(express.json()) で JSON に対応できるようになっています。 し…
なんやかんやあって Unity のパッケージで、1 レポジトリで複数のパッケージを管理しているのですが、 もろもろ自動化したかったので、 Node.js 界隈でよく見る monorepo 風に管理してみました。 誰か正しい方法知ってたら教えてください。 ~だって package.…
つい最近気がついたのだけども、どうやら Parcel で manifest.json を含んだ index.html をビルドすると、 JavaScript としてコンパイルされてしまうらしい。 ~それに気がつかず約半年 ServiceWorker を消すスクリプトが動いていなかったようだ~ それの防ぎ…
ちょっと分かりにくいのですが、下のような CSS を書きたいときの方法。 .element1 > .element2 { /* ... */ } やり方は簡単で、別の Style されたコンポーネントを含むように作ってあげれば良い。 import styled from "styled-components"; const ChildComp…
stylelint と stylelint-processor-styled-components を使っている場合、 通常の CSS/SCSS ファイルを lint しようとすると、エラーが出てしまいます。 そこで、 CSS/SCSS では styled-components の processor を使わないようにする方法。 前提環境は以下…
Vuex で Firebase を良い感じに扱えるようにしてくれる VuexFire と、 TypeScript で Vuex モジュールを良い感じにかけるようにしてくれる Vue Type Helper 、 それぞれを同時に使って、型チェックや保管が効く状態で扱いたかった。 通常通り書くならこんな…
ページ遷移で transition して、ページ内コンテンツ切替で transition してってしたかった。 <template lang="pug"> .container transition(name="router-transition" mode="out-in" leave-active-class="..." ...) router-view </template> <template lang="pug"> .wrapper transition(name="content-transition" </template>…
開発中、なにか重いなーと思ったら Flow がいっぱい動いていたので、やっつける方法。 $ yarn flow stop これでおっけー。
Rails 5.1 以上、 Webpacker を導入した環境で、プロダクションビルドした際、 assets:precompile で結果が何も帰ってこなくなりました。 こんな感じ： 01:00 deploy:assets:precompile 01 $HOME/.rbenv/bin/rbenv exec bundle exec rake assets:precompile …
Node.js で Electron アプリを作成していたら、ビルド時の最適化の際、 タイトル通りのエラーが発生した。 解決方法としては、実行時にオプションを付け足せば良いみたい。 $ node --max_old_space_size=4096 $(which yarn) run package 参考: AOT build fai…
webpack を使っていて、 CSS も Minify したい！って言う時のやり方。 npm install css-loader --save-dev した後に、css-loader?minimize と設定する。 実際だと、こんな感じかな。 const path = require("path"); const ExtractTextPlugin = require("extr…
TypeScript + Node.js でアプリを作っているのですが、テストのカバレッジを取得して、 GitHub にて、そのバッジを README.md に表示してみようという試み。 TypeScript + Node.js だけじゃなく、 JavaScript でもいけます。 前提条件としては、下の通り。 T…
最近、 React.js + Electron + TypeScript で、アプリを作っているのですが、 render() の中の React Component で、生の HTML を扱うことが発生したので、 やり方を書いておきます。 通常通りに値を渡すと、エスケープされて、 <p> hoge </p> といったように、 表…
Electron アプリを開発している際に見つけた、 Semantic UI 。 そのインストール時にちょっと詰まってしまったので、メモしておきます。 Semantic UI は、 より自然に美しい UI を作るためのライブラリ。 Semantic UI これを、 npm で導入した際に、ちょっと…
