あのぞんブログ

Gatsby のブログを Zenn に連携する

2021-09-18

Zenn に対応する 個人ブログ(Gatsby のブログ)から Zenn にマルチポストする設定をしました。 は Zenn に向けています。 成果物リポジトリ elzup/anozon-blog 週 1 以上書くというペースを心がけて気づいたら 9…

Arrow function で generics にすると HTML タグとして認識されてしまうときの tips

2021-09-02

エディタなどによってうまくハイライトされなかったときはこうする。 をにする。

Web カメラを確認できる鏡ツールを作った

2021-08-26

Mitelop の 1 ツールとして追加しました。 Widget makeing tool | Mitelop https://elzup-image-storage.s3.amazonaws.com/blog/mitelop-mirror.png…

Rust で2進数にしたときの桁数を求める

2021-08-24

usize で取得する関数です。 closure 版 fn 版

Rust で競プロ環境整えたメモ

2021-08-20

のおかげで快適に参加できるようになりました。 tanakh/cargo-atcoder: Cargo subcommand for AtCoder…

iTerm2 でディレクトリによってタブの色を変える

2021-08-06

ディレクトリ移動時に自動でタブの色が変わるようにします。 移動時にディレクトリによって別のコマンドを実行する方法と、iTerm のタブ色を変える方法を組み合わせて実現します。 任意のディレクトリ移動時にコマンドを実行する(zsh) | あのぞんブログ iTerm tab…

任意のディレクトリ移動時にコマンドを実行する(zsh)

2021-08-06

移動時に実行するコマンドを登録する 移動後に実行する hook の登録には の を使用します。 .zshrc などで以下のように登録をしておきます。 ディレクトリによって変える関数を定義する 最初にマッチした部分だけ実行されます。 応用例として iTerm…

GitHub Copilot はいい相棒になりそう

2021-08-04

7 月から使い始めて 1 ヶ月目で所感を書きます。 () 主に TypeScript を書いています。 初日から結構好感です。 良い点 コメント書かなくてもよく効く 関数名だけとか, 関数の途中からでもサジェストしてくれる。 エディタの Undo 壊す問題がなさそう (vim…

組み合わせ・順列プログラミングそれぞれまとめ nPr nCr nHr nΠr

2021-07-29

順列を扱うための情報をまとめました。 4 パターン表 名前 英語 記号 A,B から 2 つ 順列 Permutation nPr 重複順列 Peramutation with replacement nΠr 組合わせ Combination nCr…

MacOS Big Sur と VSCode で C# 開発メモ

2021-07-29

VSCode の設定 Plugin は最低限とりあえずこれだけ入れました。 C# - Visual Studio Marketplace 型補完やフォーマットができるようになります。 Cloud Function の開発 最初の関数: .NET  |  Google Cloud…

Terminal の録画ができる asciinema 使ってみた

2021-07-29

Terminal に特化した録画ができる asciinema 使ってみました。 asciinema - Record and share your terminal sessions, the right way…

iTerm tab-color メモ

2021-07-19

コマンドを作っておく iTerm2 の tab のタイトルと色を動的にいじる - Qiita コマンドを zshrc などに追加します。 何色かメモ 設定作成とキャッシュ 末尾にコメントで色をメモっておくと補完が効いていい(zsh の例)

(プロジェクト毎に) VS Code の Window に色をつける

2021-07-18

VS Code のテーマを変えました。 Cyberpunk 2077 rebuild - Visual Studio Marketplace…

React で複数の ref を 1つのコンポーネントにセットする

2021-07-09

同じ div に と の両方を使いたいとがあった。 しかしどちらも ref を渡さなければいけなかったのでその方法です。 Share ref with multiple ref handlers · Issue #13029 · facebook/react…

ブラウザ javascript 側で global ip を取得する

2021-07-06

CSR (Client side rendering) でユーザの public ip を取得する方法です。 ipify を使う ipify - A Simple Public IP Address API ReactHooks の例 Code: tools/global-ip…

Node.js で家のネットワークかどうかチェックする

2021-07-05

家のネットワーク上でだけ実行したいスクリプトがあったので、接続しているかチェックするコードを書きました。 network (npm) を使う tomas/network: The missing network utilities in Node.js. CLI…

component から props の型を取得する

2021-07-05

Storybook で props 型が必要だけど export したくなかったので。 方法 1 方法 2(古い)

fitty を React で使う useFitty hook

2021-06-14

はコンテナに合わせてテキストのフォントサイズをフィットしてくれるライブラリです。 rikschennink/fitty: ✨ Makes text fit perfectly それを React で使うための hooks を書いた。 Gist fitty for react…

unix timestamp の桁数が増えるのはいつか

2021-06-02

現在の桁数 現在 10 桁から 11 桁になるのは 2286 年 です。() その他 になったのは 2020 年 9 月からで、 になるのは 2023 年 11 月からです。 現上 2 桁が変わるのは 3.17 年周期です。 unix str 1000000000 200…

styled-components の keyframes で ts-styled-plugin のエラーが出る

2021-05-19

css animation の や などのキーワードに対して のエラーが出たので対処しました。 で animation を扱う場合以下のように書きます。 () この や に VS Code…

単色パネル表示するだけのツール作った

2021-02-19

たまにモニターの焼け付きが気になって、グレイ色の背景のウィンドウを用意して確認することがあります。 そんなときに単色のページ探すがだるいので Web ツール化しました。 真っ黒や真っ白なウィンドウも作ることができます。 ツール Mitelop…

【JavaScript】ズームしたときの座標を求める関数

2021-02-13

図の外側四角 () と選択点()と拡大率から 内側の四角()を求める関数です。 コード マンデルブロ集合をズームしてくサンプル コード tools/mandelbulb.tsx at master · elzup/tools Web マンデルブロ集合

React で特定の props を固定した特化コンポーネントを定義する

2021-01-19

React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 DEMO です。 react-set-props - CodeSandbox 以下の という自作コンポーネントと というライブラリのコンポーネントを例に使います。 Star…

jq コマンドで json の特定のフィールドを削る・抽出する

2021-01-15

コマンドを使って json 内部特定のフィールドを操作します。 で行えます。 抽出(pick)・削除(omit) ファイル入出力 配列の各要素を操作

ssh 接続先の vim でマウスの選択範囲をコピーする

2021-01-13

vim で mouse を off にする iTerm2 の設定

vim の q マクロを保存して使いまわす

2021-01-13

1 度作ったマクロを保存して、 vim を開き直したときも使いまわしたいときの方法。 マクロ に保存する例で説明します。 .vimrc に保存する q で macro を記録する → 操作 → で記録。 に追記する (外部クリップボードにコピーしたりしたいとき) b…

node.js で Streaming の メタデータを取得する

2021-01-12

この記事では node.js で Streaming の メタデータを取得する方法について紹介します。 を使用します。 TooTallNate/node-icy: Node.js module for parsing and/or injecting ICY metadata…

Raspberry Pi に Node.js セットアップ

2021-01-07

Raspberry Pi に Node.js 入れる方法のメモです。 tj/n: Node version management を使います。 .profile の設定 インストール作業

1px の画像データURLメモ

2021-01-06

1px 画像 の データ URL を並べておきます。 黒 白 透明 ついでジェネレーターアプリ化しておいたのでどうぞ。 1px data url generator

アロー関数とfunction それぞれの Type Guard 書き方

2021-01-04

この記事では アロー関数で Type Guard について紹介します。 TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript function パターン arrow…

React で URL props が変わったら fade アニメーションで 背景を変える

2020-12-29

props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 部分の説明。 変更された際 になり Exit アニメーション(fade out…

間違えて一緒にコミットしちゃった新規ファイルだけコミットを取り消す

2020-12-28

例 を間違えてコミットに含めてしまいました。

js で先頭以外(n行目以降)をソートする

2020-12-17

js で配列の 2 行目以降のみをソートする方法のメモです。 repl: https://repl.it/@anozon/sortbody#index.ts ソート対象の配列 先頭以外をソートする n 行目以降のみソートする Lodash…

java で標準出力を文字列として取得する

2020-11-20

以前書いた、 java で標準出力を一旦オフにする | あのぞんブログ から発展して出力の受け取り方です。 Repl.it - StdOutToStr コード

Next.js export 実行時のタイムスタンプをコンポーネントで使う

2020-11-17

を実行した時のタイムスタンプをレンダリングしたいときの方法です。 jsx 上で などとするとクライアントサイドでレンダリングされた時間が表示されてしまいます。 SSR 時のデータを React で使いたい場合は NextPage…

java で標準出力を一旦オフにする

2020-11-04

java で標準出力を一時的にオフにする方法です。 Repl.it - StdOutToNull コード で “デフォルトの出力” と “何もしない OutputStream” を切り替えています。 snippet Snippet 部分のみコード。

Buffer と float、整数、他エンコードとの相互変換【Javascript】

2020-11-01

JavaScript で Buffer と他の型への変換する方法をまとめました。 repl も公開しています。 Repl.it - buffer 数値 → Buffer 数値は → 型付き配列 → Buffer という順に変換する。 Buffer…

vim の visual mode で選択した範囲に paste できないとき

2020-10-30

恐らく visual mode で選択した範囲がコピーされています。 clipboard に が設定されているときの挙動です。 設定

React と display grid でメモリ付き定規

2020-10-30

メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…

ngrok で http リクエストの中身を全部確認する【IoTデバッグ】

2020-10-13

「自前の API にリクエストは届いてるけどなにか不具合が起きている」「リクエストをダンプする環境をすぐに用意するのはダルい」とき用。 ngrok の本来の使い方とは違いますが、http パケットキャプチャができます。 ngrok とは ngrok - secure…

js で文字列の先頭のn 行を削除する

2020-10-05

コード 1 を使う方法です。 コード 2 コード 1 でいいですが最初に思いついた正規表現で削る方法です。 動作が早いかわからないですが (渡される n が行数より大きいときに使えません。) 遅かったです。Repl.it - regex-vs-slice

絵文字を含めて文字数カウントするWebアプリ作った

2020-10-02

アプリ 文字頻度カウント(絵文字対応) emoji-count 絵文字対応 では絵文字が 1 文字として分割できません。 を使います。 bestiejs/punycode.js: A robust Punycode converter that fully complies…

Python で Array.find

2020-09-16

配列の中で条件に該当する1つ目を取り出す関数。 なければ None を返す。

Python で TypeScript の UnionType を使う

2020-08-24

TypeScript の UnionType は以下のように定義できます。 Python の type でも同じようなことができるのか調べました。 ちなみに というのがありますが別です。 typeing.Literal を使う ちなみに get_args…

JavaScript で Object の更新はどれが速いのか

2020-08-23

スプレッド構文で書くのが面倒だったので検証しました。 結果 結論としてはクローンが書きやすいし速いので良さそうでした。 コスト 書きやすさ スプレッド構文 221 ms △ スプレッド構文でクローンして代入 195 ms ○ Object.assign…

js の trim で前後の改行のみ取り除く(空白は保持する)

2020-08-17

複数行テキストの trim で行頭の空白を消されたくない時があったので、前後の改行のみ消す方法を紹介します。 方法 コード サンプル Repl.it - trim-only 動作

Python で Systemd や nohup を使っていてログがリアルタイムに出力されないとき

2020-08-16

Python スクリプトでリアルタイムにログが出力されないときの対処法。 -u オプションで起動する -u オプション | 1. コマンドラインと環境 — Python 3.8.5 ドキュメント 端末以外からの実行だとバッファして stdout…

Python で 2つの Iterable をマージしてループする

2020-08-11

巨大なソート済み csv ファイルをソートしながらマージする事があったので。 2 つの Iterable な list をロジカルにループする方法を残しておきます。 コード 1 Repl.it - yield-merge-loop…

Google検索で英語のページのみヒットさせる方法

2020-07-29

日本語設定で Google 検索を使ってると「日本語のページのみ表示する」というオプションがでてくることがあります。 でも逆に英語のページのみヒットさせたいときもあるので手順を紹介します。(意味合いが違う日本語記事ばかりヒットするときがある) 方法 Private Window…

GitHub Profile README に Shields.io Badge並べた

2020-07-28

elzup (elzup) shields.io を使って技術系アイコンを量産した - Qiita を参考に Badge を作りました。 Shields.io の logo 機能 Shields.io: Quality metadata badges for open…

© 2021 あのぞんびより All Rights Reserved