
# パソコンとVRHMDを買った

鉄雄みたいなパソコンがついにうんともすんとも言わなくなったのでパソコンを新調した。Ryzen5 5600X/RTX3060Ti/16GB/500GBと、それなりにいろいろなことに使えるBTOモデルがセールだったので注文。およそ2週間で届いた。ついでに友人がめちゃくちゃハマってるVRChatに興味があったのでOculus Quest2も買った。これは64GBモデルから価格据え置きで128GBモデルの発売にあわせて購入。これでゲームしたりアマプラ見たりVRで遊んだりいろいろできるぞ〜！

# ネットがADSLになった（？？？？）

はい。諸事情で真（トゥルー）実家に戻ったところ、インターネット接続がADSLだった。ゲームのダウンロードが一生終わらず、動画ストリーミングも回線の調子や画質によって安定した視聴はできない。そしてVRChatも「なんかkasorinの声がガタガタなんだけど」って言われた。2021年のインターネットにADSLはついていけないことがわかってよかった。10月に光回線の工事が決まったのでそれまでは夜にSteamを起動してやりたいゲームのダウンロードを開始してから寝るという生活の予定。

# 働いてる

最近まで無職だった気がするけど、突然週5フルタイムで働いている。といってもソフトウェア開発とかではなく普通に短期の接客で、まあつなぎの仕事といって差し支えないと思う。パソコンもQuest2も結構高かったのでお金を貯めようと思います。ハイ。いろいろあってずいぶん長いこと無職でしたが、いろいろの部分はまあトウキョ〜とかいう街との相性とか、なんか自分の性格の問題とか、仕事に限らず様々なスキルの無さとか、いろいろ原因がありましたね。しかしアイティ〜的な仕事には戻りたいので、12月とか来年とか始まりで在宅の仕事欲しいですね。その頃には光回線もこの家に馴染んでいるでしょう。ここ数年無職だった（あとその前もめちゃくちゃ消耗してた）僕のことを心配してくれたお友達、誕生日に物やゲームを贈ってくれたりメッセージをくれたり夜中にゲームしてくれたりオンライン飲みをやってくれたりと、大変感謝しております。余裕ができたらなんかの機会にお礼をしたいですね。あとまあ無職とか困ってたりする友達がいたら僕もなにかあげようと思います。こういう、ある方面から受けた親切を別の方面に向けて返すのをpay it forwardと呼ぶことも友達に教えてもらいました。まあそういう感じです。

# 買った/読んだ/読んでる/やった/やってる

## Satisfactory

誕生日にもらった。旧PCでやっていたが画質を落とせばスムーズにプレイできた。自動化せよ！をスローガンに未開の惑星をひたすら工業化していくゲーム。近隣の草や木を刈りまくって発電機に放り込み続けないと工場が止まるでのひたすら往復ダッシュという時期はややつらく、生産体制を維持するために人間の尊厳が毀損されている！！！！！と資本主義に対する憎悪がすごいことになってしまったが、石炭発電が解禁されて採掘と発電と生産と運輸がすべて自動化された瞬間に全身が資本家になった。その後も生産設備の拡大や技術革新などの壁を乗り越えるために東奔西走することにはなるが、「まあ俺には自動化された生産拠点があるからな……」という気持ちで穏やかにプレイすることができた。旧PCは故障したがセーブデータはSteamアカウントに残っているので、また再開したら原子力発電を開始して核廃棄物による今後数万年に及ぶ禍根を残して遊ぼうと思う。

## Slay the Spire

相変わらずやっているが頻度はちょっと下がっていた。久々にサイレントA20をやったら2連続で1層エリートにやられて泣きそうになった。

## Chasing Light

買っただけ。信頼しているディガーが激おすすめしていたのでウィッシュリストには入っていて、先日のセールで購入。ゲームとはなんなのかという漠然とした、しかし興味の尽きない問題についてゲームならではの表現で切り込んでいる意欲作らしい。プレイ時間自体は短いようなので休日に一気に遊びたい。

## Bioshock

リマスター含むシリーズ全作セットで1200円と激安だったので購入。おそらく名作で間違いないしボリュームがありそうなのでのんびりやりたい。

## VRChat

VRHMDを買ったので、とりあえず詳しい友人に基本の操作方法とか便利な機能（バレずに特定の人をミュートする方法など）を教えてもらった。光回線が開通したら本格的にやっていこうと思う。

## 文体の舵をとれ（ル＝グウィン）

買ったけど全然やってねえ！引っ越しに伴って片付けやらなんやら、あと気づいたら労働が始まってしまって……みたいな言い訳をしてやってません。すいません。やります。

## 愛（ソローキン）

引っ越したので図書館に行ったら見つけた本その1。ソローキンは文章がとんでもなく美しく、下ネタが大好きな作家だということがわかった。

## HHhH プラハ、1942年（ローラン・ビネ）

その2。タイトルだけ見覚えがあったので借りたがまだ読んでいない。

# おわり

おしり。

日記（2021年9月）


# What

滝行記録のアップデート情報です。

# react-markdownを6.0にアップデート

滝行記録のmarkdown記事ファイルをreactコンポーネントとしてレンダリングするreact-markdownが6.0にメジャーバージョンアップし、プラグイン設定方法も変更されたので、バージョン6.0に追随する更新を行いました。

現在コードハイライトに使用しているreact-syntax-highlighterをreact-markdownに組み込む部分の記述方法が変更されたので、[ここ](https://github.com/remarkjs/react-markdown#use-custom-components-syntax-highlight)と[ここ](https://the2g.com/post/react-markdown-v6-changed)を参考（というかほぼそのまま）に修正します。

で、そのまま修正するとtypeerrorが出るので、[この辺](https://github.com/remarkjs/remark/discussions/714)を参考に型を追加してあげます。

~~~typescript
// バージョンアップ前
import ReactMarkdown from "react-markdown"
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism"

// （略）

const renderers = {
  code: ({language, value}) => {
    return <SyntaxHighlighter style={vscDarkPlus} language={language} children={value} />
  }
}

// （略）

<ReactMarkdown className="post-body" renderers={renderers}>
  {params.content}
</ReactMarkdown>
~~~

~~~typescript
// バージョンアップ後
import ReactMarkdown from "react-markdown"
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism"

// （略）

type CodeProps = Parameters<CodeComponent>[0]
const components = {
  code({node, className, ...props}: CodeProps) {
    const match = /language-(\w+)/.exec(className || '')
    return match
      ? <SyntaxHighlighter style={vscDarkPlus} language={match[1]} PreTag="div" {...props} />
      : <code className={className} {...props} />            
  }
}

// （略）

<ReactMarkdown
  components={components}
  className="post-body"
>
  {params.content}
</ReactMarkdown>
~~~

修正後に問題なくコードハイライトされていることを確認し、完了です。

# ダイアグラム描画の導入（6/12追記）

現在このブログにはmarkdownのコードハイライト機能と画像表示機能がありますが、試験的にダイアグラム描画機能を導入することにしました。具体的には[Zenn.dev](https://zenn.dev/)でも採用実績のある[mermaid](https://mermaid-js.github.io/mermaid/#/)を使ってみることにします。

「使ってみることにします」とか言ってはみたものの、かなり回り道をしました。react-markdownにプラグインとして組み込むのが一番楽そうな[remark-mermaid](https://github.com/temando/remark-mermaid)は最終更新が2018年1月とかなり放置されていたので回避。次にmermaid記法でダイアグラムをreactコンポーネントとして出力できる[react-mermaid](https://github.com/jasonbellamy/react-mermaid)を見てみると最終更新が6年前。おそらく後継であろう[react-mermaid2](https://github.com/e-attestations/react-mermaid2)も更新が17ヶ月前で、プルリクエストもイシューも全部放置されているので今後のアップデートは望めなさそうです。グエー。

仕方がないので自分で書くことにします。Zenn.devの[zenn-markdown-html](https://github.com/zenn-dev/zenn-editor/tree/canary/packages/zenn-markdown-html)でmermaidの組み込み方を確認しようとするも、使用しているmarkdownパーサがreact-markdownではなく[markdown-it](https://github.com/markdown-it/markdown-it)だったので断念。

結局は[ここ](https://github.com/vercel/next.js/discussions/12837)を参考にし、前段で書いたcomponents部分に手を入れて組み込むことにしました。

~~~typescript
// document.tsx
<Head>
// （略）
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
// （略）
</Head>
~~~

~~~typescript
// [slug].tsx
const components = {
    code({node, className, children, ...props}: CodeProps) {
        if (className === 'language-mermaid'){
            return <Mermaid graphDefinition={node.children[0].value}/>
        } else {
            const match = /language-(\w+)/.exec(className || '')
            return match
                ? <SyntaxHighlighter style={vscDarkPlus} language={match[1]} PreTag="div" children={children} {...props} />
                : <code className={className} {...props} />
        }
    }
}
~~~

~~~typescript
// Mermaid.tsx
import { useState, useEffect } from 'react';

let currentId = 0;
const uuid = () => `mermaid-${(currentId++).toString()}`;

declare global {
  interface Window {
    mermaid: {
      mermaidAPI: {
        render(
          id: string,
          txt: string,
          cb?: (
              svgCode: string,
              bindFunctions: (element: Element) => void
          ) => void,
          container?: Element
        ): string;
      }
    }
  }
}

const Mermaid = ({ graphDefinition }) => {
  const [html, setHtml] = useState('');
  useEffect(() => {
    if (graphDefinition) {
      try {
        window.mermaid.mermaidAPI.render(uuid(), graphDefinition, svgCode =>
          setHtml(svgCode)
        );
      } catch (e) {
        setHtml('');
        console.error(e);
      }
    }
  }, [graphDefinition]);

  return graphDefinition ? <div dangerouslySetInnerHTML={{__html: html}} /> : null;
}

export default Mermaid;
~~~

これで記事markdownをパースする際、言語名をmermaidと指定したコードブロックはclass="mermaid"となりhtmlヘッダーで読み込んだmermaidによってダイアグラムとして描画され、それ以外のコードブロックはSyntaxHighlighterによってコードハイライトされます。

なおdangerouslySetInnerHTMLを使用していますが、外部から値を受け取っていないため、危険はないと判断して使用しています。

mermaidで描画されたダイアグラムのサンプルを以下に載せておきます。

~~~mermaid
graph TB
  A[Hard edge] -->|Link text| B(Round edge)
  B --> C{Decision}
  C -->|One| D[Result one]
  C -->|Two| E[Result two]
~~~

# next-remote-watch導入（6/15追記）

Next.jsはnext devコマンドで開発サーバが立ち上がり、開発サーバにはソース変更を監視してプレビューをホットリロードしてくれる機能があります。

しかしその監視対象はJS/TSのソースに限られており、当ブログのようにリポジトリにmarkdownファイルを含めてgetStaticProps()でそれを取得するような仕組みであった場合は、markdownファイルの変更は監視されていないために手動でリロードをしないとプレビューが更新されません。ダイアグラムを導入したのもあって、できればプレビューは勝手に更新されてほしいものです。

そこで開発サーバの監視対象を増やせる[next-remote-watch](https://www.npmjs.com/package/next-remote-watch)を導入することにしました。

インストールして./content/postsを指定するだけなのであっさり終了。注意点としてnext-remote-watchのREADMEにも書いてありますが、Next.jsの非公開機能を使っているのでNext.jsのバージョンアップ時に予告なく使用できなくなる可能性があります。そのためひとまずpackage.jsonのNext.jsバージョンを固定しておき、バージョンアップ時は動作確認をする運用にしておきます。

滝行記録アップデート情報（2021年6月）

# What?

HelltakerはŁukasz Piskorz氏（[Twitter:@vanripperart](https://twitter.com/vanripperart)）によって2020年に[itch.io](https://vanripper.itch.io/helltaker)および[Steam](https://store.steampowered.com/app/1289310/Helltaker/?l=japanese)から無料でリリースされた倉庫番ライクなパズルゲームです。「主人公はある朝目覚めると悪魔っ娘（こ）のハーレムを作ることを決意し、地獄へと向かう」という極めて明快なストーリー、日本のアニメテイストも漂う悪魔っ娘（こ）の優れたデザイン、シンプルながら難易度の高いゲーム性、最悪でもパズルをスキップしてストーリーを読むことのできる救済措置などなどの高いクオリティで日本人に結構ウケました。

そして去る5月12日に1周年記念のアップデート「Examtaker」がリリースされました（[ファミ通.comの記事](https://www.famitsu.com/news/202105/12220324.html)）。1年ぶりに挑んだ僕もかなり苦戦しましたが、なんとかクリアしました。とあるキャラクターの大きな変化とちょっとばかり切ないエンディングに泣きそうでした。

しかしながら、パズルは激ムズすぎて正～～～～直二度と解きたくないので、Helltakerのパズルを自動で解くプログラム、いわゆるソルバーを作ることにしました。 本記事はHelltakerのソルバーを作ってみた！という記録です。（なお現在未完成）

# とりあえず作ってみた編

特に締切があるわけでもないので、最初は何も調べずに自分の最近使っている技術（TypeScriptとNode.js）で作れないかどうか考えてみます。

![Alt text](/img/solve_helltaker/20210515195358_1.jpg)

これはHelltakerの画面です。白いスーツのサングラス男がプレイヤーキャラクターです。左上の数字は歩数制限で、23手以内に右下の悪魔娘にたどり着けばゴールです。

このゲームのある時点での状態を以下のようなオブジェクトにしてみます。

~~~typescript
const stage = {
  stepCount: 23,
  fields: [
    ['N','N','N','N','E','Y','N'],
    ['N','E','E','M','E','E','N'],
    ['N','E','M','E','M','N','N'],
    ['E','E','N','N','N','N','N'],
    ['N','R','E','E','R','E','N'],
    ['N','R','E','R','E','E','D']
  ]
}
~~~

stepCountは残りの歩数制限、fieldsはstring型の配列をネストしてフィールドの状態を示しています。
フィールドの状態を示す文字列のパターンは以下のとおりです。

- Y = YOU プレイヤーキャラクター
- D = DEMON 悪魔娘。制限歩数以内に悪魔娘の隣接マスにたどり着くとステージクリア
- R = ROCK 蹴って動かせる岩。蹴ると歩数を1つ消費する
- M = MOB ザコ悪魔。蹴って動かせるし、蹴って何かに当たると破壊できる。蹴ると歩数を1つ消費する。
- E = EMPTY なにもないマス。自分も岩も入ることができる。
- N = NONE 自分も岩も侵入できないマス。

###### （この時点で設計が怪しいですが、そのまま進めます）

上のような状態から、例えばゲーム上で左を一度入力するとゲームの状態は以下のようになります。

~~~typescript
{
  stepCount: 22,
  fields: [
    ['N','N','N','N','Y','E','N'],
    ['N','E','E','M','E','E','N'],
    ['N','E','M','E','M','N','N'],
    ['E','E','N','N','N','N','N'],
    ['N','R','E','E','R','E','N'],
    ['N','R','E','R','E','E','D']
  ]
}
~~~

ちょっと分かりづらいですが、一度歩いたのでstepCountが1減り、fields[0,5]のYと[0,4]のEが入れ替わっていますね。この時点ではまだ歩数制限も残っていますし、クリア条件も満たしていないのでゲームは続きます。いろいろと操作していくと最後はstepCountが0になり、その時点でクリア条件を満たしていない場合はゲームオーバーです。

このようなゲームの状態を次々に遷移させ、正解の入力を見つけるのが今回の目的です。今回は典型的な再帰関数で解けそうですね。イメージとしてはこうです。

~~~typescript
const solve = (
  stage: {
    stepCount: number,
    fields: string[][]
  }): boolean => {
    // 入力されたゲーム状態はクリアしている？ → trueを返す
    // 入力されたゲーム状態はゲームオーバーである？ → falseを返す

    // 入力されたゲーム状態に上方向への入力を行った際のゲーム状態を計算し、
    // それを自身solve()を呼び出して渡し、trueが返ってきたらtrueを返す

    // falseなら下方向への入力を同様に試し、また自身solve()に渡す

    // 以下同様に右左を試す

    // すべてダメならfalseを返す
  }
~~~

このような関数であれば、いずれ正解にたどり着くはずです。というわけで早速必要そうな以下の関数を実装していきます。

- ゲーム状態を入力すると、クリアしたかどうかを返す
- ゲーム状態と上下左右のうちひとつの操作方向を入力すると、入力後のゲーム状態を返す

~~~typescript
// クリア条件を満たすか判定する関数
const isSuccess = (fields: string[][]): boolean => {
  // YOUを探す
  const yourPosition = searchPosition(fields, 'Y');

  // YOUの上下左右に悪魔娘がいたらクリア条件を満たしているのでtrueを返す
  // 上
  if (
    (yourPosition.row !== 0)
    && (fields[yourPosition.row - 1][yourPosition.column] === 'D')) {
      return true;
  }
  // 下
  if (
    (yourPosition.row !== (fields.length - 1) )
    && (fields[yourPosition.row + 1][yourPosition.column] === 'D')) {
      return true;
    }
  // 左
  if (
    (yourPosition.column !== 0)
    && (fields[yourPosition.row][yourPosition.column - 1] === 'D')) {
      return true;
  }
  // 右
  if (
    (yourPosition.column !== (fields[0].length - 1))
    && (fields[yourPosition.row][yourPosition.column + 1] === 'D')) {
      return true;
  }
  // 上下左右に悪魔娘がいなければクリア条件を満たしていないのでfalseを返す
  return false;
}
~~~

isSuccess()は単純にYの上下左右のどれかにDが存在すればtrueを返します。Yが上下左右の端にいる場合は配列インデックスの範囲外にアクセスしないように条件を書いています。

~~~typescript
// 入力前のステージ状態と入力方向を渡すと入力後のステージ状態を返す関数
const input = (inputArrow: 'Up' | 'Down' | 'Right' | 'Left', stage: stage): stage => {
  const fields = deepCopy(stage.fields);
  const yourPosition = searchPosition(stage.fields, 'Y');
  
  const stepCountAfterInput = stage.stepCount - 1;

  // 上入力時
  if (inputArrow === 'Up') {
    const near = findByPosition(yourPosition.row - 1, yourPosition.column, fields);
    const beyond = findByPosition(yourPosition.row - 2, yourPosition.column, fields);

    if (near === 'E') {
      // 入力先が空の場合は自分が移動する
      fields[yourPosition.row][yourPosition.column] = 'E';
      fields[yourPosition.row - 1][yourPosition.column] = 'Y';
    } else {
      // 入力先に岩がありその先が空なら岩を移動する
      if (near === 'R' && beyond === 'E') {
          fields[yourPosition.row - 1][yourPosition.column] = 'E';
          fields[yourPosition.row - 2][yourPosition.column] = 'R';
      }
      // 入力先にザコ悪魔がありその先が空ならザコ悪魔を移動する
      if (near === 'M' && beyond === 'E') {
          fields[yourPosition.row - 1][yourPosition.column] = 'E';
          fields[yourPosition.row - 2][yourPosition.column] = 'M';
      }
      // 入力先にザコ悪魔がありその先にぶつかる物があるならザコ悪魔を破壊する
      if (near === 'M' && (beyond === 'R' || 'N' || 'M')) {
        fields[yourPosition.row - 1][yourPosition.column] = 'E';
      }
    }

  }
  // 下入力時
  if (inputArrow === 'Down') {
    const near = findByPosition(yourPosition.row + 1, yourPosition.column, fields);
    const beyond = findByPosition(yourPosition.row + 2, yourPosition.column, fields);

    if (near === 'E') {
      fields[yourPosition.row][yourPosition.column] = 'E';
      fields[yourPosition.row + 1][yourPosition.column] = 'Y';
    } else {
      // 下に岩、その先が空
      if (near === 'R' && beyond === 'E') {
          fields[yourPosition.row + 1][yourPosition.column] = 'E';
          fields[yourPosition.row + 2][yourPosition.column] = 'R';
      }
      // 下にザコ、その先が空
      if (near === 'M' && beyond === 'E') {
        fields[yourPosition.row + 1][yourPosition.column] = 'E';
        fields[yourPosition.row + 2][yourPosition.column] = 'M';
      }
      // 下にザコ、その先が岩か壁かザコ
      if (near === 'M' && (beyond === 'R' || 'N' || 'M')) {
        fields[yourPosition.row + 1][yourPosition.column] = 'E';
      }
    }
  }
  // 左入力時
  if (inputArrow === 'Left') {
    const near = findByPosition(yourPosition.row, yourPosition.column - 1, fields);
    const beyond = findByPosition(yourPosition.row, yourPosition.column - 2, fields);

    if (near === 'E') {
      fields[yourPosition.row][yourPosition.column] = 'E';
      fields[yourPosition.row][yourPosition.column - 1] = 'Y';
    } else {
      if (near === 'R' && beyond === 'E') {
          fields[yourPosition.row][yourPosition.column - 1] = 'E';
          fields[yourPosition.row][yourPosition.column - 2] = 'R';
      }
      // 左にザコ、その先が空
      if (near === 'M' && beyond === 'E') {
        fields[yourPosition.row][yourPosition.column - 1] = 'E';
        fields[yourPosition.row][yourPosition.column - 2] = 'M';
      }
      // 左にザコ、その先が岩か壁かザコ
      if (near === 'M' && (beyond === 'R' || 'N' || 'M')) {
        fields[yourPosition.row][yourPosition.column - 1] = 'E';
      }
    }
  }
  // 右入力時
  if (inputArrow === 'Right') {
    const near = findByPosition(yourPosition.row, yourPosition.column + 1, fields);
    const beyond = findByPosition(yourPosition.row, yourPosition.column + 2, fields);

    if (near === 'E') {
      fields[yourPosition.row][yourPosition.column] = 'E';
      fields[yourPosition.row][yourPosition.column + 1] = 'Y';
    } else {
      if (near === 'R' && beyond === 'E') {
          fields[yourPosition.row][yourPosition.column + 1] = 'E';
          fields[yourPosition.row][yourPosition.column + 2] = 'R';
      }
      // 左にザコ、その先が空
      if (near === 'M' && beyond === 'E') {
        fields[yourPosition.row][yourPosition.column + 1] = 'E';
        fields[yourPosition.row][yourPosition.column + 2] = 'M';
      }
      // 左にザコ、その先が岩か壁かザコ
      if (near === 'M' && (beyond === 'R' || 'N' || 'M')) {
        fields[yourPosition.row][yourPosition.column + 1] = 'E';
      }
    }
  }

  return {
    stepCount: stepCountAfterInput,
    fields: fields
  }
}
~~~

ちょっと長いですが、やってることは以下の通りです。

- 入力方向に何もなければプレイヤーキャラクターがそこに移動する
- 入力方向に岩かザコ悪魔がおり、その先に何もなければ岩かザコ悪魔が移動する
- 入力方向にザコ悪魔がおり、その先に何かがあればザコ悪魔を破壊する

キー入力に伴うキャラの移動や物の破壊などが終わったら、その後のステージ状態を返します。

これでだいたいのところは出来上がったので、solve()に組み込んで動かしてみましょう。テストのために簡単な問題を用意します。

~~~typescript
{
  stepCount: 7,
  fields: [
    ['Y','R','E'],
    ['E','R','D'],
    ['E','R','E']
  ]
}
~~~

セイッ！

~~~
$ node index.js
SUCCESS.
CORRECT MOVE: [Right,Down,Down,Right,Right,Up,Up]
END.
~~~

できた！いや～感動ですね。では早速実際の1ステージ目、本記事の一番最初の画像の23手の問題を解いてみます。

~~~
$ node index.js

~~~

……………………………

反応がありません。ちょこちょこログを出して調べたところ、どうやら23手の問題を解くには実行速度が遅すぎて実用に耐えないということがわかりました。

# 速くしてみよう編

はい、というわけで解けるはずなんだけど解けてるかどうか確かめられないぐらい遅い代物ができました。すばらしい成果ですね。

もちろんこれで終わりにはできません。というのも、今回の最終的な目標およびそこに至るステップは以下のように設定しています。

- とりあえず動くものを作る
- まともな速度で動くものに改良する
- ライブラリとしてNPMで公開する
- それを使って簡単なWebアプリとして公開する

今のところ一番目の「とりあえず動くものを作る」は達成できました。やったね。では粛々と二番目の「まともな速度で動くものに改良する」に取り掛かりましょう。

### （2021/06/09追記）

とりあえず気になっていたところである、ゲームの状態を表すオブジェクトをコピーする関数deepCopy()から改修します。

そもそもそもそもオブジェクトをコピーするだけの関数ってなんのこっちゃですが、JavaScriptではネイティブ型（String, Numberなど）とオブジェクトや配列等の型で挙動に違いがあるせいで実装時にやや苦労しました。

具体的には呼び出し先の再帰関数の中で操作したゲーム状態オブジェクトへの変更が、呼び出し元で持っているゲーム状態にも反映されてしまい、呼び出し元に戻ってもゲーム状態が元に戻らないという……（文章だとわかりづらいですね）

~~~typescript
const deepCopy = (obj) => {
  const returnArray = JSON.parse(JSON.stringify(obj));
  return returnArray;
}
~~~

というわけで渡されたオブジェクトを元のオブジェクトへの参照ではなく全く別のオブジェクトとしてコピーする（ディープコピー）ためにこういうことをします。JavaScript組み込みの関数を使う場合はこれが一番短く書けます。今回のようなNumberとString[][]の単純なオブジェクトであれば問題なくコピーできますが、Date型など一部のプロパティはこの方法ではコピーできません。

「とりあえず動く」版はこのdeepCopy()で問題なく動きましたが、たぶんこれが相当遅いので（勘です）、よさそうな代替手法（[Qiita](https://qiita.com/suin/items/80e687dd1789b9d9d2fd)）を試してみます。

~~~typescript
const jsonCopy = (arg) => JSON.parse(JSON.stringify(arg));
const rfdcCopy = (arg) => clone(arg);

const testTimes = 1000000

// jsonCopy
const jsonCopyStartedTime = performance.now();
for (let i=0;i<testTimes; i++){
  const copied = jsonCopy(value);
}
const jsonCopyFinishedTime = performance.now();

// rfdcCopy
const rfdcCopyStartedTime = performance.now();
for (let i=0;i<testTimes; i++){
  const copied = rfdcCopy(value);
}
const rfdcCopyFinishedTime = performance.now();

console.log(`json: ${jsonCopyFinishedTime - jsonCopyStartedTime}`);
console.log(`rfdc: ${rfdcCopyFinishedTime - rfdcCopyStartedTime}`);
~~~

簡単に計測コードを書きました。これでオブジェクトのディープコピーを100万回行った時間をミリ秒で比較できます。さっそく実行です。

~~~
json: 9885.751799999736
rfdc: 14.5304000005126
~~~

思ったよりすごい差になりましたね。上の記事内にある他の方法も試しましたが、rfdcが最速でした。これでdeepCopy()を修正します。

~~~typescript
const deepCopy = (obj) => {
  const returnArray = clone(obj);
  return returnArray;
}
~~~

修正後に7手のテストデータで解けることを確認した後に23手のデータを解いてみましたが、相変わらず23手のほうは5分ほど待っても完了しません。deepCopy()の修正だけではまだまだ実用には遠いようです。引き続き改修を続けることにします。

（2021/06/09追記ここまで）

### （調査済・記事更新予定）仕方ないので倉庫番のソルバーを調べてみた編

### （調査済・記事更新予定）そもそも去年の時点でHelltakerのソルバーを既に書いた人がいた編

### （予定）ともかくPythonとNode.jsでSATソルバーを作ってみよう編（数独ソルバー）

### （予定）HelltakerのPython製ソルバーをNode.jsで書き直してみよう編

### （予定）Node.jsで書いたHelltaker製ソルバーをESモジュールとしてNPMで公開してみよう編

### （予定）自分で公開したモジュールを使って簡単なWebサイトを作ってみよう編

Helltakerのソルバーを作る

# お知らせ
当ブログにRSSフィードをつけました。[RSS](https://blog.kasorin.work/rss.xml)

# なぜ？
今どきRSSなんて誰も読まんでしょの気持ちは超強いんですが、Twitterのフォロワーのひとりが今でもRSSリーダーを使っているのは知っているし、ブログとしてフィード的なものがないのはいささか脇が甘いかなという価値観もあり、実装は簡単そうなのでサッと作りました。

# 作り方
このブログはNext.jsの静的サイト生成で作られているので、その仕組みの中で勝手にRSSも作られてくれるのが望ましいです。

しかし、Next.jsの静的サイト生成は基本的にテンプレートHTMLに値を埋め込んで吐き出す以外のことは不得手です（たぶん）。pagesディレクトリ以下に置かれた.tsxをxmlとして吐き出す方法はないかなと思ってちょっと調べ始めましたが、なんだか面倒になってきたので別のアプローチを探します。

[Adding a statically-generated RSS feed to a Next.js 9.3+ Blog](https://dev.to/emilioschepis/adding-a-statically-generated-rss-feed-to-a-next-js-9-3-blog-58id)

はい、ありました。ビルド時に呼び出されるgetStaticProps()の中で、publicディレクトリに直接xmlファイルを書き出すというアイディアです。[ここ](https://github.com/vercel/next.js/discussions/12209)を見るとgetStaticProps()の中でpublicディレクトリ以下にファイルを書き出すのはVercelの中の人も推奨してるので、きっと大丈夫寄りのやつなんでしょう。ほんとか？（indexとRSSはほぼほぼ同じデータを使ってるからここで生成してええやろ！ということなのか？）

まあやれることはわかったので、lib/rss.tsにこういう感じのやつを書きます。（コードのスタイルあててないので見づらいですね、そのうちきれいにします……）

~~~typescript
import fs from "fs"

type Post = {
    slug: string
    title: string
    published: string
}

const generateRssItem = (post: Post): string => {
    return (`
        <item>
            <guid>https://blog.kasorin.work/posts/${post.slug}</guid>
            <title>${post.title}</title>
            <link>https://blog.kasorin.work/posts/${post.slug}</link>
            <pubDate>${new Date(post.published).toUTCString()}</pubDate>
        </item>
    `)
}

const generateRss = (posts: Post[]): string => {
    return (`
        <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
            <channel>
                <title>滝行記録</title>
                <link>https://blog.kasorin.work/</link>
                <description>kasorin's blog</description>
                <atom:link href="https://blog.kasorin.work/rss.xml" rel="self" type="application/rss+xml"/>
                ${posts.map(generateRssItem).join('')}
            </channel>
        </rss>
    `)
}
const publishRss = async (posts: Post[]) => {
    const PATH = './public/rss.xml'
    const rss = generateRss(posts)
    fs.writeFileSync(PATH, rss)
}

export { publishRss }
~~~

これをindex.tsxあたりにimportして、getStaticProps()内で呼び出せば、ビルド時にpublic/rss.xmlが吐き出されます。public/rss.xmlはビルド後blog.kasorin.work/rss.xmlとして公開されます。**SUCCESS!**

ちなみにローカル環境での確認時にひとつ注意しておくことがあって、next devコマンドでlocalhost:3000に立ち上がる開発サーバですが、ビルド時にSSGする設定であろうとも開発サーバ上ではSSRされます。なので、xml生成用の関数を呼び出す元のページにアクセスしてgetStaticProps()が走らない限り、開発サーバの方にコードの修正が反映されません。今回の場合lib/rss.tsを修正した後にlocalhost:3000/rss.xmlではなく、localhost:3000/にアクセスしないと、index.tsxのgetStaticProps()が走らないので、僕はなんかこれ直んねえなあ？と5分ぐらい無駄にしました。Next.js SSGの地味ハマりポイントとしておぼえておきます。

# よかったこと
- getStaticProps()内でファイルを生成してpublic以下に書き出せること

これは特に個別記事のOGP画像の生成に効きそうだなと思っています。今までは基本的にhtml以外のファイルは事前に置いておく必要があって、そうなると記事を作成するたびに手動でOGP画像を生成して保存しておく必要が出てくると思っていたんですが、個別記事のgetStaticProps()内でcanvasか何かを使って記事内容に即した画像を生成できるとすごく楽ですね。あとこのブログはgithubリポジトリをNetlifyと連携させてデプロイしているんですが、OGP画像の動的生成をするとリポジトリに画像を入れずに済むという利点があるのもありがたいです。

- RSSを提供できたこと

僕のTwitterフォロワーの中でもたぶんひとりぐらいしかRSSリーダー使ってないんですけど、まあ今後増えないとも限りませんし、こういうのはちゃんと対応してあるという事実が大事という面もありますからね。コーヒー飲みに来た喫茶店のお冷がレモン水だと（ふーん……やるじゃん）って思うみたいな（？？？）。

# そのうちやること
- 記事本文中のコードブロックを見やすいようにする
- 個別記事のOGP画像生成をする
- RSSの情報をもう少し増やす
- フッターかどこかにRSSのリンクをつける

おわり。

Next.jsの静的サイト生成で作っているブログにRSSフィード機能をつける

# 前提
- 無職≒新しいパソコンを買うお金はない
- The Talos Principle がやりてえ
- ゲーム以前に昨今のさまざまなソフトウェアやらwebコンテンツのヤバい描画負荷にThinkpad X220(2011年発売のモバイルノート)が耐えられない
- お友達から要らなくなったグラフィックボード(GTX970)とATX電源(650W)をもらえた

# やっていこう
というわけで今年のはじめ頃に外部GPU環境を構築しました。その記録です。使ったものは以下の通り。
- ThinkPad X220
- [MSI GeForce GTX970 GAMING 4G](https://jp.msi.com/Graphics-card/gtx-970-gaming-4g.html)
- EXP GDC
- [ATX電源](https://kakaku.com/item/05901011035/)

もちろんふつうのノートパソコンにふつうのグラボをそのままぶっさすことはできないので、ノートパソコンとグラボの間に何かをかます必要があります。それが上に書いたEXP GDCという怪しい(本当に怪しい)機械です。

そのへんの電器やさんには売ってない、中国メーカーの製品なのでAliExpressに3,500円ちょっと支払って購入。注文したのが2020年の1月1日で、まだ「なんかコロナ？とかいうのがあるらしいね？」ぐらいの時期だったこともあってわりとスムーズに1週間余で到着。

組み立てる作業自体はただつなぐべきところにケーブルをつなぐだけなので写真も撮ってないですね。省略します。完成した様子はこちら。

![完成した様子](/img/egpu_environment.jpg)

映像は以下のような流れでディスプレイにたどり着く仕組みです。

```X220 -> EXP GDC -> GTX970 -> ディスプレイ```

記事最後まで書いてから思い出したのでここに書くんですが、実はX220はBIOSでデバイスの接続をホワイトリストでチェックしていて、通常のBIOSでは外部GPUを認識してくれません(とのこと)。これについてはX220のカスタム情報が集まる謎のサイトに情報がありました。X220はキーボード仕様が変更になる最後のモデルだけあって妙に根強い人気があり、こういうノートパソコンをバラバラにして遊べるオモチャだと思っているオタク向けの情報もまとまっています。

とにかく、素のBIOSのままではグラボを認識してくれないので、有志が開発したホワイトリスト除去済みのカスタムBIOSをX220に入れてあげます。手順は下リンク先の「BIOS / FIRMWARE」を参照。

[Resources - Thinkpad X220](http://x220.mcdonnelltech.com/resources/)

カスタムBIOSを導入して、接続するとWindows君が勝手にドライバを入れてくれます。Windows君がドライバを入れてくれなくてもnVidiaのドライバ配布サイトからいい感じのものを探してダウンロードしてくればいいだけです。

ついにお楽しみのThe Talos Principleも起動できることを確認。最高！

![20200116185235_1.jpg](/img/20200116185235_1.jpg)
嬉しい！
![](/img/20200116190449_1.jpg)
嬉しい……？嬉しいとはいったい……？
![](/img/20200118161558_1.jpg)
僕の感情とは……存在とは……なぜ僕はここにいる……なぜ……？我が主よ……
![](/img/20200119141834_1.jpg)
![](/img/20200119141908_1.jpg)

# よかったこと

- X220単体ではできなかったゲームができるようになった
- 構築はほぼつなぐだけで意外と簡単だった
- EXP GDC自体はお手頃価格だった(グラボと電源くれたお友達に大感謝)

# ややよくなかったこと

- ファンの音がする

そりゃそう。デスクトップPCなら机の下の筐体の中にあるべきATX電源とグラボが机の上に丸出しで乗っかってるので、ファンの回転音は直接聞こえます。しかし常にブオンブオン回ってるわけでもないし、それほどうるさくないモデルなのでヘッドホンをすればほぼ気にならない範囲です。

- 邪魔

そりゃそう(2)。ATX電源とグラボが机の上に(2)。もらった電源はプラグイン方式ではなく全部のケーブルが全部出てるタイプなので、使わないケーブルがゴチャっと机に乗っています。今の所使わないケーブルはがんばって結束バンドで留めて隅のほうにまとめてあるので、キーボードとマウスの配置に不自由を感じるほどではありません。

- パフォーマンスはそれほどでもない

グラボはちょっと世代が古いもののミドルクラスのGTX970、ひとりでゲームするだけならそんなに苦労することはなさそうかと思ったんですが、ちょっと重いTPSとかFPSとかのゲームをしているとCPUの方がボトルネックになってプレイが厳しいことがけっこうあります。今まではそもそも起動しなかったレベルなので大進歩と言えばそうなんですが、まあ実際操作のラグを感じるとちょっともう一回プレイする気にはなりませんよね、ゲームって。ちなみにTalosは超快適でした。マルチでもないし複雑な物理演算とかもないので、CPU負荷が小さいんでしょうね。

もうひとつパフォーマンスについて、X220とディスプレイの間の帯域(帯域が正しい表現なのかどうかわからんが)が問題になることもあります。

ExpressCardはPCI Express x1がベースになっていて、現在一般的にグラボの接続に使われるPCI Express x16と単純に比較すると16分の1しか帯域がありません。当然、そのぶんデータ読み込みの速度は相当落ちます。大量のアセットをGPUのRAMに読み込むような重めのゲームはロードに時間がかかります。

また、GPUに接続したディスプレイに出力するなら問題ありませんが、X220側に出力する場合は上記の狭い帯域をさらに往復で使用することになるので、かなりパフォーマンスが落ちます。ゲームをするときには基本的に外部ディスプレイ出力のみでプレイしたほうがよいです。

# まとめ

__働いて給料をもらってちゃんとしたパソコンを買いたい。__

# 余談

- [R43SG-TB3](http://www.adt.link/product/R43SG-TB3.html)

こういうものがあります。AliExpressでは15,000から20,000円の間です。僕が使ったEXP GDCはExpressCardとPCI Expressを接続するボードだったんですが、このR43SG-TB3はThunderbolt3とPCI Expressを接続できます。Thunderbolt3は最大転送速度40Gbpsとなっていて、まあ規格がそれなので実際はもうちょっと下がるんだろうとは思いますが、少なくともExpressCardよりはマシ、相当マシな帯域を持っています。

で、実はTB3で外部GPU環境を構築するソリューションは既に製品化されていて、ガワと電源と基盤がセットになったものがGPUボックスとかeGPUエンクロージャとか呼ばれるひとつのジャンルになっております。例えばRazerからはRazor Core X/X Chromaという製品が出ていますね。Razerなのでもちろんいい感じに光ります。

ただし、超高いです。日本から購入しようとすると40,000から50,000円が相場です。R43SG-TB3との価格差おおよそ20,000から30,000円。ATX電源のぶんを抜いてもそれこそ安価なグラボ1本ぐらいの差があります。

というわけでThunderbolt3搭載のノートパソコンとグラフィックボードとATX電源を持っていて自宅ではGPUパワーがほしいけどノートパソコンを持って外出することもあるから外部GPU環境がほしい～～なんて人がいれば、この怪しいR43SG-TB3で外部GPU環境を作って、動作確認してみてほしいな～～という余談でした。おわり。

# 追記

本当に、本当にこの記事で書いたようなよくわからない環境構築について興味がある場合は、

- [eGPU.io](https://egpu.io/)

での情報収集をおすすめします。特にBUILDSで自分の持っているパソコンで動作確認がとれているかどうかの確認をしておくと__気持ちの余裕__が違います。バクチでウン万円の機械を壊しても痛くもかゆくもない場合は別に何も言いませんが……。

Thinkpad X220に外部GPUを接続してゲームをする

（この記事は何かしら変更があれば随時更新します。）

# me
- [@kasorin_r](https://twitter.com/kasorin_r "Twitter:@kasorin_r") ※技術的なことはツイートしていません、趣味のアカウントです
- 無職（仕事探し中です）
- [wishlist](https://www.amazon.jp/hz/wishlist/ls/3BP2FCGMVXFTD?ref_=wl_share)
# 技術情報
## 開発言語・フレームワーク
- React(Next.js)
- TypeScript
## ホスティング
- github
- Netlify
## アクセス解析
- Google Analytics
# 開発・運用するにあたっての気持ち
開発にあたっては、楽な方（管理画面を作りたくない、.mdファイルベースで記事を管理したい、ブログひとつ始める程度でAWSやGCP等の大げさなサービスを使いたくない、フレームワークも小さく簡単なものだけ使いたい）に流れていったらこう（Next.jsでmarkdownから静的htmlを生成してNetlifyでホストする）なりました。既存のブログサービスでもよかったんですけど、こういうサービスのひとつぐらいは自分で持っておくと手を動かす習慣が付きやすいかなと思ったので。

今（2020/10/04）は最低限の機能すらないレベルなので、当分はちびちび機能追加をしていきます。以下にそれっぽいのを列挙。
- [x] 投稿日の表示
- [ ] 記事内の目次
- [ ] まともなスタイル（material-uiとかがいいかな？）
- [x] トップページと前後の記事へのナビゲーション
- [ ] タグ機能
- [x] OGP
- [x] アイコン
- [x] アクセス解析

運用についても、毎日アクセス情報とにらめっこしてSEOを云々……という感じではなく、普通に個人のブログとして書きたいことだけ書く感じです。

滝行記録

アーカイブ

日記（2021年9月）

滝行記録アップデート情報（2021年6月）

Helltakerのソルバーを作る

Next.jsの静的サイト生成で作っているブログにRSSフィード機能をつける

Thinkpad X220に外部GPUを接続してゲームをする

このブログについて

Slay the Spire サイレント序盤攻略メモ