Blog

「学習ノート」
<h1>目的</h1>
GPUを利用した実験を行いたかったがGPUを持っていなかったためGoogle Cloud Platform上でインスタンスを借りてやってみることにした。 
セットアップも初めてだったのでまとめました。
<h1>セットアップ手順</h1>
今回はus-central1-fにn1-standard-8の 
1 x NVIDIA V100を借りた。OSとしてはubuntu-1804を指定。 
ディスクサイズは10GBがデフォルトだったがインストール時にストレージがなくなることが多々あったので40GBとしている。
まずは、updateとupgradeを打つ
<pre><code class="language-bash">sudo apt update
sudo apt upgrade -y
</code></pre>
実験にpython3.10が必要なのでpyenvから用意する。[2]
pyenvに必要なpackageをまずインストールする
<pre><code class="language-bash">sudo apt install -y \
libncurses-dev \
build-essential \
libffi-dev \
libssl-dev \
zlib1g-dev \
liblzma-dev \
libbz2-dev \
libreadline-dev \
libsqlite3-dev \
libopencv-dev \
tk-dev \
git
</code></pre>
pyenvのインストール
<pre><code class="language-bash">git clone https://github.com/pyenv/pyenv.git ~/.pyenv
echo 'export PYENV_ROOT=&quot;$HOME/.pyenv&quot;' &gt;&gt; ~/.bashrc
echo 'export PATH=&quot;$PYENV_ROOT/bin:$PATH&quot;' &gt;&gt; ~/.bashrc
echo 'eval &quot;$(pyenv init --path)&quot;' &gt;&gt; ~/.bashrc
source ~/.bashrc
</code></pre>
pyenvを利用してpython3.10のインストール
<pre><code class="language-bash">pyenv install 3.10.0
pyenv global 3.10.0
pyenv --version
</code></pre>
次にnvidiaからcudaを落としてくる。12はjaxが<a href="https://github.com/google/jax/issues/13637">[12]</a>によると現在対応中だったので11.8を落としてくる。ubuntu以外のインストール方法は公式サイトが詳しいので以下に従う。
<a href="https://developer.nvidia.com/cuda-11-8-0-download-archive">CUDA Toolkit 11.8 Downloads</a>
<pre><code class="language-bash">wget https://developer.download.nvidia.com/compute/cuda/11.8.0/local_installers/cuda_11.8.0_520.61.05_linux.run
sudo sh cuda_11.8.0_520.61.05_linux.run
</code></pre>
インストールが終了したらパスを通す。nvcc -Vコマンドが通る+バージョンがあっているか確認する。
<pre><code class="language-bash">// Linuxアーキテクチャを確認
uname -a

echo 'export PATH=&quot;/usr/local/cuda/bin:$PATH&quot;' &gt;&gt; ~/.bashrc
echo 'export LD_LIBRARY_PATH=&quot;/usr/local/cuda/lib64:$LD_LIBRARY_PATH&quot;' &gt;&gt; ~/.bashrc
source ~/.bashrc
nvcc -V
</code></pre>
<a href="https://developer.nvidia.com/cudnn">NVIDIA cuDNN</a>も必要なのでダウンロードしてくる。こちらはサイトにログインが必要。 
GCP上からコマンドで落としてくることができないので、Macにubuntu用のLocal Installer for Ubuntu18.04 x86_64 (Deb)を選択してダウンロード。gcloudコマンドを利用してscpで転送した。
<pre><code class="language-bash">gcloud compute scp --zone &quot;asia-east1-a&quot; --project &quot;sampleprj&quot; /path/to/cudnn-local-repo-ubuntu1804-8.8.0.121_1.0-1_amd64.deb instance-name:.
</code></pre>
転送後の手順は<a href="https://misoji-engineer.com/archives/reinstall-cuda-on-ubuntu.html">UbuntuでCUDAの削除から再インストールまでのメモ</a>が詳しい。 
<a href="https://black092.github.io/blog/post/004/">CUDAとcuDNN(GPU付きUbuntuデスクトップ)</a>を参考に以下を実行した。
<pre><code class="language-bash">sudo dpkg -i libcudnn7_7.6.5.32-1+cuda10.1_amd64.deb
sudo dpkg -i libcudnn7-dev_7.6.5.32+cuda10.1_amd64.deb
sudo dpkg -i libcudnn7-dec_7.6.5.32+cuda10.1_amd64deb
</code></pre>
githubに登録する用の鍵を作成しておく。 
<a href="https://qiita.com/shizuma/items/2b2f873a0034839e47ce">GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~</a>
<pre><code class="language-bash">cd ~/.ssh
ssh-keygen -t rsa
# 公開鍵をgitubに登録
</code></pre>
ここまで完了したらpythonのpackageのダウンロードを行う。 
jaxはGPU(CUDA)用[1]<a href="https://github.com/google/jax#pip-installation-gpu-cuda">google/jax</a>を落としてくる。poetryでGPU用のjaxを落としてくるのに癖がある([4] <a href="https://github.com/google/jax/issues/5410">Please provide PEP 503 compliant indices for CUDA versions of packages #5410</a>)ので素直にpipで実行した。 
自分の環境でpoetryで整えていたのでrequirements.txtを吐き出させてインスタンス上ではpipでインストールした。
参考 [3] 
<a href="https://github.com/google/jax/discussions/10323">WARNING - No GPU/TPU found, falling back to CPU. (Set TF_CPP_MIN_LOG_LEVEL=0 and rerun for more info.) #10323</a>
<pre><code class="language-bash">pip install --upgrade pip
pip install -r requirements.txt
pip install --upgrade &quot;jax[cuda]&quot; -f https://storage.googleapis.com/jax-releases/jax_cuda_releases.html
</code></pre>
poetryでrequirements.txtを吐き出させる方法。[5] <a href="https://minerva.mamansoft.net/Notes/Poetry%E3%81%A7requirements.txt%E3%82%92%E4%BD%9C%E6%88%90">Poetryでrequirements.txtを作成 </a>
<pre><code class="language-bash">poetry export -f requirements.txt -o requirements.txt
</code></pre>
以上でセットアップは完了。jaxがGPUに接続できているかどうかは以下のコマンドで確認できる。
<pre><code class="language-python">import jax
print(jax.default_backend())
print(Jax.local_devices())
</code></pre>
<h1>参考文献</h1>
[1] google/jax 
<a href="https://github.com/google/jax#pip-installation-gpu-cuda">https://github.com/google/jax#pip-installation-gpu-cuda</a>
[2] ubuntu 20.04 / 18.04 に pyenv をインストールする話 
<a href="https://qiita.com/neruoneru/items/1107bcdca7fa43de673d">https://qiita.com/neruoneru/items/1107bcdca7fa43de673d</a>
[3] WARNING - No GPU/TPU found, falling back to CPU. (Set TF_CPP_MIN_LOG_LEVEL=0 and rerun for more info.) #10323 
<a href="https://github.com/google/jax/discussions/10323">https://github.com/google/jax/discussions/10323</a>
[4] Please provide PEP 503 compliant indices for CUDA versions of packages #5410 <a href="https://github.com/google/jax/issues/5410">https://github.com/google/jax/issues/5410</a>
[5] Poetryでrequirements.txtを作成 <a href="https://minerva.mamansoft.net/Notes/Poetry%E3%81%A7requirements.txt%E3%82%92%E4%BD%9C%E6%88%90">https://minerva.mamansoft.net/Notes/Poetry%E3%81%A7requirements.txt%E3%82%92%E4%BD%9C%E6%88%90</a>
[6] UbuntuでCUDAの削除から再インストールまでのメモ 
<a href="https://misoji-engineer.com/archives/reinstall-cuda-on-ubuntu.html">https://misoji-engineer.com/archives/reinstall-cuda-on-ubuntu.html</a>
[7] gcloud compute scp <a href="https://cloud.google.com/sdk/gcloud/reference/compute/scp">https://cloud.google.com/sdk/gcloud/reference/compute/scp</a>
[8] CUDAとcuDNN(GPU付きUbuntuデスクトップ) <a href="https://black092.github.io/blog/post/004/">https://black092.github.io/blog/post/004/</a>
[9] cudnnがインストールされていることを確認する方法<a href="https://ja.stackoverflow.com/questions/43854/cudnn%E3%81%8C%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95">https://ja.stackoverflow.com/questions/43854/cudnn%E3%81%8C%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95</a>
[10] GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~ 
<a href="https://qiita.com/shizuma/items/2b2f873a0034839e47ce">https://qiita.com/shizuma/items/2b2f873a0034839e47ce</a>
[11] テンソルネットワークツールと基本的な量子ビット演算、特異値分解SVD 
<a href="https://blueqat.com/yuichiro_minato2/c855adc5-d00d-48de-a7b0-86ce215fa585">https://blueqat.com/yuichiro_minato2/c855adc5-d00d-48de-a7b0-86ce215fa585</a>
[12] Add support for CUDA 12 #13637 
<a href="https://github.com/google/jax/issues/13637">https://github.com/google/jax/issues/13637</a>()

GCPにGPUを借りてjaxを動かすまでにやったこと

<h1><a href="https://www.amazon.co.jp/dp/B0827R4BDW" title="リファクタリング 既存のコードを安全に改善する（第2版）">リファクタリング 既存のコードを安全に改善する（第2版）</a></h1>
<img src="https://m.media-amazon.com/images/I/81tSL01VhqL._SY160.jpg" alt="cover image">
<blockquote>
構造的に機能を加えにくいプログラムに新規機能を追加しなければならない場合には、 まず機能追 加が簡単になるようにリファクタリングをしてから追加すること。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=10488" title="10488">10488</a>
</blockquote>
これ大事
<blockquote>
リファクタリング （名詞）外部から見たときの振る舞いを保ちつつ、 理解や修正が簡単にな るように、 ソフトウェアの内部構造を変化させること。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=28400" title="28400">28400</a>
</blockquote>
リファクタリングの定義
<blockquote>
コードは作業の開始前と比べて、 総じて同じ動作を すべきといったことです。 まったく同じと言っているのではありません。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=28838" title="28838">28838</a>
</blockquote>
全く同じである必要はないのか、確かにリファクタリングしている最中にバグを見つけて元の振る舞いと変わることがありそう。
<blockquote>
プログラマがコードを修正するのに 1週間 かかったとなると、 これは問題です。 コードを理解できれば、 わずか 1時間で済んだかもしれな いのです。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=29711" title="29711">29711</a>
</blockquote>
理解容易性はかなり大切な概念だなと思う。ここまで現実は極端ではないもののテストがあるコードを変更するのとないコードを変更するのはだいぶ違うなと感じる
<blockquote>
Kent Beck が自らを語ったセリフを思い出しました。 「僕は、 偉大なプログラマなん かじゃない。 偉大な習慣を身に付けた少しましなプログラマなんだ」。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=29713" title="29713">29713</a>
</blockquote>
名言
<blockquote>
「100 マイルほど東に行きたいときに、 森の中をのろのろとひたすら進んでいくよりも、 まず 高速道路で 20 マイルほど北に行き、 そこから 100 マイル東に向かえば、 3倍の速さで着くこと ができるかもしれません。 もしも周りの人がまっすぐ行くようにとせかすなら、 『落ち着いて、 地図で調べて最も速いルートを探しましょう』 と言わねばならないときもあるでしょう。 準備の ためのリファクタリングは、 私にとってまさにそういった役割を持っています。」 Jessica Kerr, https://martinfowler.com/articles/preparatory−refactoring−example.html 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=31022" title="31022">31022</a>
</blockquote>
似たようなことを聞いたことがあるな。イメージとしてはこれに近いのか。整備してから進む
<blockquote>
リファクタリングの目的は、 少ない労力で多くの価値を生み出すべくプログラミングの速度を上げ ることにある。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=33642" title="33642">33642</a>
</blockquote>
リファクタリングの目的、先程の定義と同様に参照すべき
<blockquote>
私が最も危険な罠と思うのは、 「美しいコード」、 「すばらしいエンジニアリングのプ ラクティス」 といった道徳的理由により、 リファクタリングが正当化される状況です。 リファク タリングは、 コードベースがどれだけ美しいかではなく、 純粋に経済的な基準で測られるもので す。 リファクタリングするのは、 あくまでもスピードを上げるため、 新機能の追加やバグの修正 を速めるためです。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=33645" title="33645">33645</a>
</blockquote>
美しいコードって抽象的だよね、まあ開発速度の上がるコードっていうのもあんまりwell-definedでないきがするが
<blockquote>
失敗する可能性のある境界条件を考えて、 そこを集中的にテストすること。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=53304" title="53304">53304</a>
</blockquote>
テストを記載するときは仕様をみたしているかどうかに目が行きがちだが境界条件を集中的に記載しよう
<blockquote>
バグレポートを受け取ったら、 まず、 そのバグの存在を明確に示す単体テストを書くところから始 めること。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=54615" title="54615">54615</a>
</blockquote>
これやっていきたい.
<blockquote>
「関数の抽出」はきわめて頻繁に行われるリファクタリングです （ここでは 「関数」 という用語 を使いますが、 オブジェクト指向言語でのメソッドや、 プロシージャやサブルーチンの類いでも 同じことです）。 コードの断片を見て、 何をしているのか理解した上で、 独立した関数として抽 出し、 目的にふさわしい名前を付けます。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=57673" title="57673">57673</a>
</blockquote>
処理が長い場合に使用できそう。とりあえずインライン関数にしておく。再利用としてではなく意図と実装の分離のために行っているらしい
<blockquote>
そのため広い範囲で利用されるデータを移動したいときは、 まずそれをカプセル化して、 変数 へのアクセスを関数経由にするのが非常に良いやり方です。 これでデータの再構成という困難な 作業を、 関数の再構成というより簡単な作業に変えることができます。 データのカプセル化が有効なのはこれにとどまりません。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=69033" title="69033">69033</a>
</blockquote>
デフォルト値などがこれに該当する。ローカル変数で用意しておいて関数経由で受け取れるようにしておくとよい
<blockquote>
良い名前を付けることは、 明快なプログラムを書くための核心です。 変数はうまく名前を付け さえすれば、 目的を説明する上で非常に役立ちます。 しかし不適切な名前を付けてしまうことも よくあります。 その理由としては、 注意深く考えていなかったから、 あるいは最初は問題の理解 が浅かったから、 またはユーザのニーズが変わってプログラムの目的が変わったから、 などがあ ります。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=71216" title="71216">71216</a>
</blockquote>
リーダブルコードの時からしかり。だけど意外と変数名を考えるのは難しい。
<blockquote>
データを構造体にまとめることには意味があります。 データ項目間の関係を明示することがで きるからです。 新たな構造体を使えば、 関数のパラメータ数は少なくて済みます。 その構造体を 使うすべての関数が、 構造体の要素を取得するのに同じ名前を使うことで、 一貫性の向上にも 役立ちます。 しかし、 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=72527" title="72527">72527</a>
</blockquote>
パラメータオブジェクトの代入。関数の引数をパラメータオブジェクト(オブジェクトにする)。ことによって関数間の共通のつながりや抽象化をうまくすることができるらしい。知見。
<blockquote>
単純なレコード構造には欠点があります。 最も厄介なのは、 レコードに格納されている値と計算した値の明確な区別を強要されることです。 整数の範囲を保 持する場合について考えてみましょう。 整数の範囲は {start： 1, end： 5} または {start： 1, length： 5} （あるいは {end： 5, length： 5} のような一風変わった持ち方）として保持できま す。 しかし、 レコード構造がどうなっていようと、 ここで知りたいのは start, end, length で す 。 これが、 変更可能なデータについてはレコード化するよりオブジェクト化したほうが良いと考 える理由です。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=82140" title="82140">82140</a>
</blockquote>
javascriptのobject化するよりclassにした方がいいという意見。Typescript見たいにレコード構造に型をつけられる場合はどうなんだろうか？変更可能のな場合にはobject化したほうがやはりよいのだろうか。
<blockquote>
プログラムに変更可能なデータがあれば、 とにかくカプセル化したくなります。 いつどのよう にデータ構造が変更されるかがわかりやすくなるからです。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=85634" title="85634">85634</a>
</blockquote>
変更可能なら基本的にobjectにしてカプセル化したくなるらしい。関数型は基本的に変数は不変とするのでここらへんに考え方の違いがあるのかな？(しらん)
<blockquote>
副作用がある関数と、 ない関数の違いを明示することは良いアイデアです。 値を返す関数は、 観察可能な副作用を持ってはならないというルールを取り入れるべきです。 このルールは 「コマ ンドとクエリの分離原則」[mf-cqs] と呼ばれるものです。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=145928" title="145928">145928</a>
</blockquote>
「コマンドとクエリの分離原則」という新しい言葉が出てきた。副作用のある関数とない関数を明示的に分離する。
<blockquote>
関数は、 自立しているかメソッドとしてオブジェクトに属しているかを問わず、 プログラムを 構成する基本要素の一つです。 しかし、 関数自身をオブジェクトとしてカプセル化することが有 用な場合もあり、 そのようなオブジェクトを 「コマンドオブジェクト」 または単にコマンドと呼び ます。 たいていの場合、 このオブジェクトは核となる単一のメソッドを持ちます。 このオブジェ クトの目的は、 要求を表すそのメソッドを実行することです。 
Location: <a href="kindle://book?action=open&amp;asin=B0827R4BDW&amp;location=159472" title="159472">159472</a>
</blockquote>
関数自体をオブジェクト化することをコマンドと呼ぶ
<h1>感想</h1>
これを実践できるかが大事だなと思った。詳細のリファクタリング方法も大事だが、道を整備してから開発をし始める、キャンプ場のゴミを拾うようにする、バグが起こったらバグを再現するテストを記載して修正するなどプログラマとして習慣的に身につけなければならない技能だなと感じた。コード書く時に意識するメモみたいなのを作って机に貼っておくか。
<ul>
<li>道を整備してから開発する</li>
<li>自分が開発したところで修正できそうなところは綺麗にする</li>
<li>バグが起こったらバグを再現するテストを書く</li>
</ul>

リファクタリングを読んだ読書メモ

vueのcompositionAPIを使用したデータ取得ってみんなどうやって書いているんだろうな〜と思ったので軽く調べていい記事に当たったので素振りしました。 
自分のイメージだと<a href="https://swr.vercel.app/ja">SWR</a>みたいな形でかけると嬉しいなと思って探していたところいい記事があったので素振りしてみた。
<a href="https://vuedose.tips/use-composition-api-to-easily-handle-api-requests-in-vue-js">Use Composition API to easily handle API requests in Vue.js</a>
<h1>内容</h1>
こちらのコードをほぼ参照させてもらっている。 
<a href="https://gist.github.com/pikax/b13fc50e46668659e9d2dd3851e83d9f">https://gist.github.com/pikax/b13fc50e46668659e9d2dd3851e83d9f</a>
loading, error, resultを状態として保持しておいて、executeでリクエストを実行する。
<pre><code class="language-ts">import { ref, type Ref } from &quot;vue&quot;;

interface UseApiResult&lt;
 T,
 TExecuteFactory extends (...args: any) =&gt; Promise&lt;T | undefined&gt;,
 TError = any
&gt; {
 result: Ref&lt;T | null&gt;;
 isLoading: Ref&lt;boolean&gt;;
 error: Ref&lt;TError | null&gt;;
 execute: TExecuteFactory;
}

export function useApi&lt;TResult, TArgs extends any[]&gt;(
 factory: (...args: TArgs) =&gt; RequestInfo,
 handleResponse: (response: Response) =&gt; Promise&lt;TResult&gt;
): UseApiResult&lt;TResult, (...args: TArgs) =&gt; Promise&lt;TResult | undefined&gt;&gt; {
 const isLoading = ref(false);
 const result = ref&lt;TResult | null&gt;(null) as Ref&lt;TResult | null&gt;;
 const error = ref&lt;Error | null&gt;(null);

 const execute = async (...args: TArgs) =&gt; {
 const request = factory(...args);

 isLoading.value = true;
 error.value = null;
 try {
 const response = await fetch(request).then(handleResponse);
 result.value = response;
 return response;
 } catch (e) {
 if (e instanceof Error) {
 error.value = e;
 } else {
 error.value = new Error(`unknown error: ${e}`);
 }
 result.value = null;
 } finally {
 isLoading.value = false;
 }
 };

 return {
 isLoading,
 result,
 error,
 execute,
 };
}

</code></pre>
外から呼び出す際は以下のように記述することができる。
<pre><code class="language-ts">const url = `http://localhost:3000`;
const data = useApi(
 () =&gt; url,
 (r) =&gt; r.json()
);
data.execute();
</code></pre>
dataのisLoading, result, errorを参照することで各種状態を取ってきてUIに反映させられてよい。
<pre><code class="language-vue">&lt;template&gt;
 &lt;div&gt;
 {{ data.isLoading }}
 &lt;div&gt;{{ data.result }}:{{ data.error }}&lt;/div&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
サーバー側もサンプルで立ち上げて実験してみていた。
<pre><code class="language-js">const express = require(&quot;express&quot;);
const app = express();
const port = 3000;
const { setTimeout } = require(&quot;timers/promises&quot;);

const courses = [{ id: 1 }, { id: 2 }, { id: 3 }];

const allowCrossDomain = function (req, res, next) {
 res.header(&quot;Access-Control-Allow-Origin&quot;, &quot;*&quot;);
 res.header(&quot;Access-Control-Allow-Methods&quot;, &quot;GET,PUT,POST,DELETE&quot;);
 res.header(
 &quot;Access-Control-Allow-Headers&quot;,
 &quot;Content-Type, Authorization, access_token&quot;
 );

 // intercept OPTIONS method
 if (&quot;OPTIONS&quot; === req.method) {
 res.send(200);
 } else {
 next();
 }
};
app.use(allowCrossDomain);

// https://expressjs.com/ja/guide/error-handling.html
// expressは非同期処理が挟むのであれば適切にエラーハンドルしてあげる必要があるよ。
app.get(&quot;/&quot;, async (req, res, next) =&gt; {
 try {
 await setTimeout(1000);
 if (Math.floor(Math.random() * 10) &gt; 5) throw new Error(&quot;random error&quot;);
 res.send(courses);
 } catch (e) {
 return next(e);
 }
});

app.listen(port, () =&gt; {
 console.log(`Example app listening on port ${port}`);
});

</code></pre>
実際の画面の様子 
<img src="https://storage.googleapis.com/p_62ac53d891e76300181dca38/82b09561-f9e7-4afe-b0eb-47a18ed84601%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-11-0313.15.23.png" alt="スクリーンショット2022-11-0313.15.23.png">
素振りしてみて実際こんな感じのcompositionAPIを用意すれば似たような形で書けるなと感じた。 
いちいち、isLoading, error処理などを用意しなくて良くなるため些細だがかなり便利。 
piniaなどの状態管理ツールを含めたリクエスト処理についても素振りしていきたい。 
(あとそろそろcatch(e)のeがunknownになるのが嫌になってきたのでTSでのResult型の運用例とかもみておきたい。)

vueのcompositionAPIでリクエストを綺麗に書きたいので素振り

<h1>概要</h1>
NULLがあるカラムはLIKEでもNOT LIKEでも抽出できない。NULLが存在するカラムで〇〇という文字列が含まれる場合(LIKE)と〇〇という文字列が含まれない場合(NOT LIKE)の和をとると全体の行数に一致しない
<h1>伝えたいこと</h1>
NULLがある行でLIKE (NOT LIKE)を使用するときは気をつけよう。
<h1>内容</h1>
〇〇という文字列が含まれる場合(LIKE)と〇〇という文字列が含まれない場合で含まれない場合で全体の行数と一致させたい場合はどうすれば良いのか？
単純にNULLが含まれないと見なすのであれば、NOT LIKEによる集計だけではなく IS NULL の行もCOUNTして集計してあげれば全体の行数と一致する。(全体の行数= LIKE + NOT LIKE + IS NULL) 
NULLを含めることを忘れないように。
<code>tosa</code>という文字列が含まれる場合
<pre><code class="language-sql">SELECT COUNT(name) FROM `users` WHERE name LIKE '%tosa%' 
</code></pre>
<code>tosa</code>という文字列が含まれない場合(nameカラムはNULLを含む)
<pre><code class="language-sql">SELECT COUNT(name) FROM `users` WHERE name NOT LIKE '%tosa%' OR name IS NULL
</code></pre>

NOT LIKEでNULLがあるカラムの集計処理を走らせると少し困ったことになる

<h1>13章</h1>
<h3>コマンドクエリ責務分離(command query responsibility segregation, CQRS)</h3>
データを書き込む形式と読み込む形式を分離してさまざまな読み取りViewを使用できるようにすることにより柔軟性を得ることができる。
書き込みはログファイルに単純な形式で格納、各DBは読み込みの形式に合わせて保存する。 
<img src="https://storage.googleapis.com/p_62ac53d891e76300181dca38/27173466-1f89-4168-97cb-a9ad6aefaede%2F%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882022-06-298.30.12.png" alt="スクリーンショット2022-06-298.30.12.png">
<h3>ストリーム処理とバッチ処理</h3>
バッチ処理の場合は失敗したタスクは最初からやり直せますが、数年間動作していたストリーミング処理の場合はクラッシュ後からやり直すという選択肢が取れない。
ストリーミングはソート処理は意味をなさない。
<h1>12章</h1>
<h3>12.1.2.1 導出された状態の管理(p 543)</h3>
バッチ処理は出力が入力のみに依存し、出力には追記のみ行うという性質から関数型プログラミングの香りが漂っている。
この性質のおかげで途中でクラッシュした場合でも再度最初からやり直すことができる。
<h3>12.1.2.3 ラムダアーキテクチャ(p545)</h3>
書き込まれるデータはイベントソーシングのようにイミュータブルに保存される。
直近のデータはストリーム処理で更新していくがその処理が破損した場合にバッチ処理で最新の状態に復元できるようなアーキテクチャ。
バッチとストリームを両方とも扱う必要があり複雑になりがち。

データ指向アプリケーションデザインを読んで

<h1>qiskit-mchine-learning</h1>
主に量子機械学習系のライブラリが置かれている。
<a href="https://github.com/Qiskit/qiskit-machine-learning">https://github.com/Qiskit/qiskit-machine-learning</a>
quantum-kernelを自前で実装してた方が何かと都合が良かったので動作確認をしながら(ぱくる)ために、環境構築をした。
<ul>
<li>ローカルの環境</li>
</ul>
<pre><code class="language-bash">Python 3.9.10
pip 22.1.2 from /usr/local/lib/python3.9/site-packages/pip (python 3.9)
</code></pre>
<ul>
<li>環境構築の際に使用したコマンド</li>
</ul>
<pre><code class="language-bash">git clone git@github.com:Qiskit/qiskit-machine-learning.git
cd qiskit-machine-learning
pip3 install -r requirements-dev.txt
pip3 install .
</code></pre>
<ul>
<li>テストを実行してみる(実行時間が長いので動くことを確認したら打ち切る)</li>
</ul>
<pre><code class="language-bash">python3 -m unittest discover -v test
</code></pre>
<ul>
<li>単一ファイルテストを動作させる</li>
</ul>
pythonのstandard libraryにunittestという標準テストランナーがありそれが使用されている。
<a href="https://docs.python.org/3.6/library/unittest.html#module-unittest">https://docs.python.org/3.6/library/unittest.html#module-unittest</a>
具体例にもある通り、以下のコマンドで実行できそう。
<pre><code class="language-bash">python -m unittest tests/test_something.py
</code></pre>
quantum_kernelのテストぽいファイルを見つけ出し実行してテストが通ることを確認できた。
<pre><code class="language-bash">&gt; python3 -m unittest test/kernels/test_qkernel.py 火 6/28 21:50:52 2022
...........................
----------------------------------------------------------------------
Ran 27 tests in 2.686s

OK
</code></pre>
<ul>
<li>kernelの評価の関数のIF
<ul>
<li>x_vecとy_vecを受け取ってkernelを返却している</li>
</ul>
</li>
</ul>
<pre><code class="language-python">def evaluate(self, x_vec: np.ndarray, y_vec: np.ndarray = None) -&gt; np.ndarray:
</code></pre>
<ul>
<li>kernelを初期化</li>
</ul>
<pre><code class="language-python">kernel = np.zeros((x_vec.shape[0], y_vec.shape[0]))
</code></pre>
<ul>
<li>量子回路を動かしている部分はここ
<ul>
<li>引数で受け取ったx_vecとy_vecをそれぞれ量子回路にかけて内積を取得して結果を取得している</li>
<li>これを繰り返して量子カーネルを生成して返却するようになっている模様</li>
</ul>
</li>
</ul>
<pre><code class="language-python">for idx in range(0, len(mus), self._batch_size):
 to_be_computed_data_pair = []
 to_be_computed_index = []
 for sub_idx in range(idx, min(idx + self._batch_size, len(mus))):
 i = mus[sub_idx]
 j = nus[sub_idx]
 x_i = x_vec[i]
 y_j = y_vec[j]
 if not np.all(x_i == y_j):
 to_be_computed_data_pair.append((x_i, y_j))
 to_be_computed_index.append((i, j))

 circuits = [
 parameterized_circuit.assign_parameters(
 {feature_map_params_x: x, feature_map_params_y: y}
 )
 for x, y in to_be_computed_data_pair
 ]
 if self._quantum_instance.bound_pass_manager is not None:
 circuits = self._quantum_instance.transpile(
 circuits, pass_manager=self._quantum_instance.bound_pass_manager
 )

 results = self._quantum_instance.execute(circuits, had_transpiled=True)
</code></pre>
<h2>終わりに</h2>
<ul>
<li>自作する際もこの関数のIFを合わせながら実装する予定</li>
</ul>

qiskit-machine-learningの環境構築+unittestを動作させる

<h1>piniaのstoreToRefsでreadonlyなrefを返却したい</h1>
<h2>結論</h2>
<ul>
<li>piniaからの値をreadonlyつけて返却すれば問題なし</li>
</ul>
<h2>概要</h2>
疑問の発端のメモ
<blockquote>
VueのcompositionAPIのrefとcomputedの違いや使い分けがイマイチよくわかってなくて、computedはsetを設定しないとreadonlyなractiveObjectが返却される、refでやるとmutableなreactiveObjectが返却されるから基本的にcomputedで作成した方が望ましい？って思うけど、refは値でcomputedは関数を返却するようなものに思える:thinking_face:
</blockquote>
<blockquote>
VueはReactほどimmutableに気を使わなくていいのでは？refとcomputedの使い分けは値か式かで分けるといいのでは？変更と同時に副作用を起こしたいのであればcomputedを使えばいいのかな？
</blockquote>
この時点でreadonlyなrefの作成の仕方を知らなかったので、上のように考えていたが普通にrefを使用しても、代入不可にすることはできる。<a href="https://v3.ja.vuejs.org/guide/reactivity-fundamentals.html#readonly-%E3%81%A6%E3%82%99%E3%83%AA%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99%E3%82%AA%E3%83%95%E3%82%99%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%A4%89%E6%9B%B4%E3%82%92%E9%98%B2%E3%81%8F%E3%82%99">readonly でリアクティブオブジェクトの変更を防ぐ</a>
次に、<a href="https://pinia.vuejs.org/">pinia</a>を使用してstoreからreadonlyなrefを取得するサンプルコードを書いて実験をしてみた。
まずはvueのcreate-vue-appのサンプルコードから始める。デフォルトのpiniaのstore内は以下のような形。
<pre><code class="language-ts">import { ref, computed } from &quot;vue&quot;;
import { defineStore } from &quot;pinia&quot;;

export const useCounterStore = defineStore(&quot;counter&quot;, () =&gt; {
 const count = ref(0);
 const doubleCount = computed(() =&gt; count.value * 2);
 function increment() {
 count.value++;
 }

 return { count, doubleCount, increment };
});

</code></pre>
<a href="https://pinia.vuejs.org/api/modules/pinia.html#storetorefs">storeToRefs</a>を利用すればreactiveな値が取得できる。<code>store.increment</code>でも<code>count = count * 2</code>でも値が変更できる。基本的に外部からstoreの値に対して代入や更新ができるのは望ましくない気がするのでこれをreadonlyにしてstore内に宣言している関数から変更させるようにしたい。
<pre><code class="language-ts">&lt;script setup lang=&quot;ts&quot;&gt;
import { useCounterStore } from &quot;@/stores/counter&quot;;
import { storeToRefs } from &quot;pinia&quot;;

const store = useCounterStore();
const { count } = storeToRefs(store);

defineProps&lt;{
 msg: string;
}&gt;();
&lt;/script&gt;

&lt;template&gt;
 &lt;div&gt;
 &lt;!-- storeの値も変更される --&gt;
 &lt;button @click=&quot;() =&gt; (count = count * 2)&quot;&gt;double&lt;/button&gt;
 &lt;button @click=&quot;store.increment&quot;&gt;click&lt;/button&gt;
 &lt;h1&gt;{{ count }}&lt;/h1&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
ちなみにstoreToRefsなどで値をreactiveにしないともちろん更新されない。
<pre><code class="language-ts">&lt;script setup lang=&quot;ts&quot;&gt;
import { useCounterStore } from &quot;@/stores/counter&quot;;

const store = useCounterStore();
const { count } = store;

defineProps&lt;{
 msg: string;
}&gt;();
&lt;/script&gt;

&lt;template&gt;
 &lt;div&gt;
 &lt;button @click=&quot;() =&gt; (count = count * 2)&quot;&gt;double&lt;/button&gt;
 &lt;button @click=&quot;store.increment&quot;&gt;click&lt;/button&gt;
 &lt;h1&gt;{{ count }}&lt;/h1&gt;
 &lt;/div&gt;
&lt;/template&gt;

</code></pre>
computedの場合だとstoreのincrementを利用した場合は更新されて、count = count * 2はreadonlyRefなので更新されない。
<pre><code class="language-ts">&lt;script setup lang=&quot;ts&quot;&gt;
import { useCounterStore } from &quot;@/stores/counter&quot;;
import { computed } from &quot;vue&quot;;

const store = useCounterStore();
const count = computed(() =&gt; {
 return store.count;
});

defineProps&lt;{
 msg: string;
}&gt;();
&lt;/script&gt;

&lt;template&gt;
 &lt;div&gt;
 &lt;!-- storeの値も変更される --&gt;
 &lt;button @click=&quot;() =&gt; (count = count * 2)&quot;&gt;double&lt;/button&gt;
 &lt;button @click=&quot;store.increment&quot;&gt;click&lt;/button&gt;
 &lt;h1&gt;{{ count }}&lt;/h1&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
結論としてはpiniaから返却する際にreadonlyをつければstoreToRefsを利用してもreadonlyなrefを返却するようにすることができる。store内の関数のみで値を変更可能であり見通しもよくなりそう。
<pre><code class="language-ts">export const useCounterStore = defineStore(&quot;counter&quot;, () =&gt; {
 const count = ref(0);
 const doubleCount = computed(() =&gt; count.value * 2);
 function increment() {
 count.value++;
 }

 return { count: readonly(count), doubleCount, increment };
});
</code></pre>
サンプルコード、<code>count = count * 2</code>では更新はできない。
<pre><code class="language-ts">&lt;script setup lang=&quot;ts&quot;&gt;
import { useCounterStore } from &quot;@/stores/counter&quot;;
import { storeToRefs } from &quot;pinia&quot;;

const store = useCounterStore();
const { count } = storeToRefs(store);

defineProps&lt;{
 msg: string;
}&gt;();
&lt;/script&gt;

&lt;template&gt;
 &lt;div&gt;
 &lt;!-- count = count * 2では変更できない --&gt;
 &lt;button @click=&quot;() =&gt; (count = count * 2)&quot;&gt;double&lt;/button&gt;
 &lt;button @click=&quot;store.increment&quot;&gt;click&lt;/button&gt;
 &lt;h1&gt;{{ count }}&lt;/h1&gt;
 &lt;/div&gt;
&lt;/template&gt;
</code></pre>
v-modelとかでbindingして単に編集させたい場合はreadonlyを付けずに返却することで実現できる。 
入力毎にvalidationかけたいとかなったらwatch変更監視するかcomputed使用するかかな。素直にcomputed使用した方が良さそうな気もしている。
<pre><code class="language-ts">import { ref, computed, readonly } from &quot;vue&quot;;
import { defineStore } from &quot;pinia&quot;;

export const useCounterStore = defineStore(&quot;counter&quot;, () =&gt; {
 const count = ref(0);
 const word = ref(&quot;&quot;);
 const doubleCount = computed(() =&gt; count.value * 2);
 function increment() {
 count.value++;
 }

 return { count: readonly(count), doubleCount, increment, word };
});

</code></pre>
<h1>参考</h1>
<a href="https://logaretm.com/blog/build-pinia-stores-from-composition-api/">Building Pinia Stores from Composition API</a>
<a href="https://zenn.dev/poteboy/articles/ce47ec05498cfa">React HooksとVue Composition APIの比較</a>