Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

zshのプロンプトに直前のコマンドの終了ステータスを表示する

zsh

zshのprompt内で%?を指定すると直前の終了ステータスを表示させることができます。 PROMPT='[%n@%m]%?# ' ↑これで[user@host][last_status]#というプロンプトが表示されます。 ただ、これだと正常終了のときにも表示されて煩わしいので、正常終了のときには…

ApolloClient でカスタムフェッチを使う

いっつも書き方を調べてるのでここにメモを残しておく。 import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from, } fr…

シンプルにToastを実装する in react

import clsx from 'clsx'; import { PropsWithChildren, createContext, useContext, useState } from 'react'; const ToastContext = createContext<(message: string) => void>(() => {}); export const useToast = () => useContext(ToastContext); expor…

access(obj, 'foo.bar.baz') みたいにパスを指定してアクセスしたい

発端: ApolloClient の useQuery の data と error をいい感じに扱うために getOrThrow(data, error, 'path.to.field') みたいなユーティリティ関数が欲しくなった 欲しい関数 const {loading, error, data} = useQuery(query); const fooBar = getOrThrow(d…

コマンドラインの内容を vim で編集できるようにする

zsh で control-o を押すと vim が立ち上がってコマンドラインの内容を編集できる関数を(ChatGPTが)作ったので紹介します。 (要件を伝えたら ChatGPT が目当てのものを一発で生成したので、かなりビックリしました。すごい。) デモ動画 youtu.be デモ動画で…

zellij のなかで neovim を開くと色がおかしくなる

結構試行錯誤したのでメモ ↑こんな感じで、結構色が違って表示されたので調べて修正しました。 結論 なぜか neovim の background オプションが "light" になってたのが原因でした。 set background=dark を明示的に書いたら解決しました。 調べたこと zelli…

幾野直人 (ikuno naoto) 自己紹介

諸事情(実名で検索すると他人の顔写真しか出てこない)のため、自己紹介記事を書くことにしました。目的を達成したら消したい。 プロフィール 名前: 幾野直人(ikuno naoto) 身長: 178cm (2024年4月現在) 体重: 72.4kg (2024年4月現在) BMI: 22.85 得意な言語:…

vim でテキストオブジェクトを追加して [] を簡単に扱いたい

() や {} は dab や yiB みたいに b/B で操作できますが、 [] は da[ と打たないといけません。煩わしいのでエイリアスを設定したいですよね。 というわけで r で [] を選択するテキストオブジェクトを追加しましょう!やり方がこちら↓ vim-textobj-user を…

クレジットカード情報の入力時になぜ有効期限も入れなければならないのか?

ネットでクレジットカード払いをする際、カード番号以外に有効期限も入力が求められます。これはなぜなのか疑問になりませんか?疑問になりますよね。 今回はそれについて考えてみました(完全に推測で書いてます) abst (created by ChatGPT) クレジットカー…

TypeScript の infer は同じ名前を指定できる

(ただし有用な場面はそんなにないです) infer に同じ名前を指定すると、ユニオン型になる 基本的に、infer に同じ名前を指定すると、それらをうまく満たすようなユニオン型になります。 以下の X1,X2,X3 はすべて number | string です。 type X1 = [number,…

デスク環境2024

去年までのもの→デスク環境変遷まとめ (2020/5 ~ 2023/1) - Panda Noir あとから見返す用に年1くらいでデスク環境を紹介したいなと思い立ったので書きます。あと、多分ウェブフロントエンドエンジニアとしては珍しく mac と windows の二刀流構成なので、他…

2023年を振り返る

去年の → 2022年を振り返る - Panda Noir 仕事、趣味、プライベートについて書くぞい。 仕事、技術 テックリード交代した 実質チーム移動になった(多分社外秘なのでどのチームかは言えない) 記事をいくつか書いてバズらせた 今年は仕事に関しては特筆するこ…

Next.js で layout をネストしたときパフォーマンスはどうなるのか?

Next.js で作ったアプリの /foo にアクセスすると app/layout.tsx と app/foo/layout.tsx の両方が適用されます。 さて、このネストされた2つの layout それぞれでデータフェッチをしていた場合、どうなるでしょうか? app/layout.tsx のフェッチ完了後に app…

Next.js + Chakra UI で初期描画からダークモードを反映させたい

問題: なにも設定しないと初期描画のときにカラーモードが反映されない demo このように、Chakra UI でなにも設定しないとリロード直後に一瞬ライトモードで表示されます。この記事ではこの問題を解消する方法を紹介します。 tl;dr ColorModeScript を追加す…

逆FizzBuzzを解いてみた2

全然書いた記憶はなかったんですが、昔の僕は逆FizzBuzz という問題に挑戦してました。 逆FizzBuzzを解いてみた - Panda Noir この解答コードがもうちょいシンプルに書けたので載せておきます おさらい: 逆FizzBuzzとは? [1,2,3,4,5,…] のように並んだ数列が…

善は急げ 悪は延べよ

「善は急げ」はよく知られています。しかし、実は続きがあるそうです。それが「悪は延べよ」です。 悪は延べよの意味は、「悪いと思う事は、一事延期せよ、そうすれば事情がやがて変化して、行なわないで済むようになることもある。」とのことです。 プログ…

pubsub パターンの現時点でのベストプラクティス

以前pubsub パターンのベタープラクティスを考えたんですが、よく考えたらイベント名を設定する必要なかったです。 これでよさそう↓ class PubSub<Payload extends unknown[]> { private listeners: ((...payload: Payload) => void)[] = []; subscribe(callback: (...payload: Payload)</payload>…

vue の SFC 内でうまくコメントアウトプラグインを動かしたい vim + mini.comment 編

(vim + mini.comment 編と書いたが、別に他パターンを書く予定はない) 割と手間取ったのでメモとして残しておきます。他の人の参考にもなりそうなので 結構無理やりな方法を取ったので、もっとスマートなやり方がありそうですが… ポイント: hooks.pre で fil…

はてなブログで tsx コードをシンタックスハイライトする方法

追記: 公式が対応しました! staff.hatenablog.com tsx 対応がついに入りました。そのため以下のコードは不要になりました。 追記終わり。以下元々の記事の内容になります。 実際にシンタックスハイライトされてるところ const Component = () => { const [c…

MGS (マジで業務で使うシェルスクリプト)

MGS(マジ業務使いのシェルスクリプト)がまあまああるのでまとめる。いま思いついたものだけ書いてるが、思い出したら追記するかも。 説明 コマンド スペース埋め出力から特定列を抜き出す | awk '{print $1}' 先頭から特定の文字までのみ表示 | cut -f 1 -d …

ワンライナーでバージョン文字列を比較する

結論: localeCompare を使う a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}) 参考: https://stackoverflow.com/a/65687141 localeCompare は IE11 でも使えるので、使えない心配はほぼありません。 しかし、locale とついているため…

dein.vim から packer.nvim に乗り換える

lua でファイル管理したいなぁ…という気分になったので乗り換えることにしました。今のところそんなに違いは感じてないです (まだ書き換えてる途中なので以下の記述はミスってるかもしれないです) migration guide そもそも、 packer.nvim でインストールす…

Misskey のウィジェットに複数ソースを扱う RSS リーダーが欲しい

公式の RSS リーダーウィジェットだと単一の RSS しか購読できないので、複数の RSS を読めるウィジェットを実装しました。 RSS リーダーウィジェットの追加方法 手っ取り早くウィジェットが欲しい人は以下の手順でどうぞ AiScript App ウィジェットを追加 A…

記事のアウトラインだけ考えて ChatGPT に記事本文を書いてもらう

以下のアウトラインに沿って記事本文を考えてください - まずアウトラインを考える - 肉付けしてもらう - 修正をする - という記事がChatGPT によって生成されていたっていうオチにしたい こんにちは、ChatGPTです。今回は、記事のアウトラインを考え、肉付…

循環参照がある配列で flat を呼び出すとどんどん長くなる

何に使えるかは全然わからないですが発見したのでメモ。 まず循環参照を持った配列を定義します。 const a = []; a[0] = a; a[1] = 0; これの flat を呼ぶと面白いことが起きます。 console.log(a.flat()); // [ <ref *1> [ [Circular *1], 0 ], 0, 0 ] console.log(</ref>…

やる気だけはある人向け ChatGPT で始めるプログラミング

tl;dr ChatGPT にお題を考えてもらって実装するというサイクルが結構いい感じにハマる 「やる気だけはあります!」という人がいます(ネットでしか見たことないけど)。こういう人はおそらく本当にやってみたいんだと思いますが、その先のロードマップが見えて…

オプショナルチェーン演算子は短絡評価される

{}.a?.(console.log('hoge')) ↑この時 console.log('hoge') は評価されない。つまりログに hoge と出力されない {a:()=>{}}.a?.(console.log('hoge')) ↑この時は console.log('hoge') も評価される。ログに当然 hoge と表示される。 || 演算子や && 演算子は…

関数はアロー関数と function どちらで書くべきなのか?

結論: (トップレベルで関数を宣言するときに限り)function かアロー関数かは好みの問題。 アロー関数が出てきた当初と状況が変わってきた www.pandanoir.info 2016年に「function よりアロー関数を使うべき(function は適切な場面でのみ使うべき)」という記…

ブロックを使うと prevValue を使うフックが書きやすい

小技。 「一時的な変数を useRef で定義したい」といった時に便利なテクニックです。 { const prevValue = useRef(value); useEffect(() => { if (prevValue.current === value) return; // 変化したタイミングで行う処理 prevValue.current = value; }, [va…

デスク環境変遷まとめ (2020/5 ~ 2023/1)

最新と最古を比較 結構長くなったので最初にどーんと比較。 …いうほど変わってないか? 2020年 5月 入社直後 一番最初。HHKB を買った、デスクを買った以外はほぼ大学のときと同じ構成だった気がする。 https://twitter.com/le_panda_noir/status/12659581376…