みかづきメモ

主にプログラミング関連のメモ帳 ♪(✿╹ヮ╹)ノ 書いてあるコードは自己責任でご自由にどうぞ

はてなブログで Prism.js を使う

はてなブログシンタックスハイライトに JSX / TSX が対応してなかったり、
C# の async/await 当たりが永遠に真っ白だったりしてつらかったので、 Prism.js を導入しました。

導入方法は簡単で、こんなコードを設定の「 head に要素を追加」の部分に付け足して、

<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.17.1/plugins/autoloader/prism-autoloader.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre.code').forEach((block) => {
    block.className = "code language-" + block.dataset.lang;

    window.Prism.highlightElement(block)
  });
});
</script>

あとはカスタム CSS の部分に Prism.js のテーマを入れるだけ、簡単。
ただし、 Prism.js のテーマは、 !important を付けておく必要があります。

ということでメモでした。
ちなみにこのブログで使ってる VSCode っぽいテーマは GitHub に置いています。

VRChat でキッシュちゃんを使う

これは技術記事?って思ったけど Unity なのでセーフ。

VRChat で kawaii ポーズキメたいのでビビッときたキッシュちゃんを購入しました。
で、これをこの動画を参考に設定していていってアップロードしました。

しかしながら、表情関連が全く動かないという事に遭遇したので、解決方法を探ってみることに。

結論としては、どうやらパラメータ名が変わったようなので、それに合わせれば動きました。
具体的には vrc という名前だったのが vrc1 になっていたのです、私の所では。

f:id:MikazukiFuyuno:20190916015346p:plain
このとおり新しい方は vrc1 になっているのです

ということで、全く同じ設定のものを用意して、上記部分だけを変更し、
それを CustomOverride として設定したものを投げたら無事動きました。
なぜ違ってるのかは分かってないけど、今後いじるときもハマるかもしれないのでメモでした。

styled-components で定義したコンポーネントから Props を取り出したい

例えば下のようなコンポーネントがあって、

import colors from "colors.css";
import styled from "styled-components";

type Props = {
  primary?: boolean;
}

const Button = styled.button<Props>`
  border: 1px solid ${props => props.primary ? colors.blue : colors.silver}
`;

export default Button;

何らかの理由で import Button from "./Button" とした状態で Props を得たい場合の型定義。

export type ExtractProps<T> =
  T extends StyledComponent<any, any, infer R, never> ? R
  : unknown;

いちおうこれで取り出せたのでメモ。

React で特定条件で useState を使っているコンポーネントが2回描画される

React.js にて、再描画される必要が無いコンポーネントが、なぜか再描画されている事があった。
調べてみると、 React.StrictModeuseState を使っている場合、再描画しているらしい。

github.com

つまり、こういうふうにやってると、描画される必要が無くても2回描画される。

// root
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
, document.querySelector("#app"));
// component
import React, { useState } from "react";

const Component : React.FC = () => {
  const [state, setState] = useState("");
  console.log("Hello?"); // 2回コンソールに出力される

  return (
    <>
      <p> { state }</p>
    </>
  );
}

知らなくて「なんで2回描画されてるん...?」ってなってしまったのでメモ。 ではでは~。

Test::More で Non-zero wait status: 14 とでてテストが正常に終了しない

Test::More などを使ってテストしている際、 Non-zero wait status: 14 と出てしまい、
テストが全て走らずに、見た目上は成功して終了する、というケースに遭遇しました。

最も近いものとしては、この現象になります。

www.perlmonks.org

exit status が違うのでこの人の場合とは違っていたのですが、
上記スレッドにあるこちらの解答によって、答えにたどり着くことが出来ました。

示されている exit status は 14 で、これは SIGALRM です。
標準動作によるとプロセスの終了が行われるようなので、動作としては、
テストされていた関数のどこかにあった alarm N; よりも後続のテストの時間がかかり、
最終的には飛んできたシグナルに殺されていたというものでした。

ということで、対処法は alarm 0; でリセットしてあげるか、
該当部分を Mock してあげることで、解決しました。

久しぶりの Perl の記事でした(。・ω・。)。