Drag&Dropな量子回路シミュレータQuirk

# この記事について
* ブラウザベースの量子回路シミュレータ[Quirk](https://algassert.com/quirk#circuit={%22cols%22:[]})の利用方法をまとめます
* 特徴は以下で、
 * ブラウザ上で動作します
 * ドラッグ＆ドロップで簡単に回路を構成できます
 * ブロッホ球表示、観測確率表示等のデバッグ機能も充実しています
* 教科書で勉強した回路を確認する、勉強会で人に説明するといったシーンで便利です

![Quirk.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/1fb5dbde-43ef-9f7b-57b1-5adef8670c6c.gif)

また、他の量子コンピュータ関係の他の記事は、下記で紹介しています。

https://qiita.com/shnchr/items/41fa7fd1284d74007a7c

# 説明するオペレーション
[Quirk@github](https://github.com/Strilanc/Quirk/wiki/How-to-use-Quirk#basic-circuit-editing)のページの **Basic Circuit Editing** の内容をカバーするように説明します。

* 基本
 * 回路の保存
 * ゲートの配置
 * ゲートのコピー
 * ゲートの削除
 * 量子ビットの追加
 * 初期状態の変更
 * 表示（ブロッホ球／観測確率）
 * Undo/Redo
* 応用
 * 行の移動
 * 列の移動
 * 列の複製
* 発展
 * ゲートの作成

# 基本編
## 回路の保存
Quirkでは量子回路はURLとして表現されています。
よって、回路をブックマーク or URLを記録することで量子回路を保存できます。
例えば、量子テレポーテーションであれば、以下のリンクをクリックすることで表示できます。

* [量子テレポーテーションを表示](https://algassert.com/quirk#circuit=%7B%22cols%22:%5B%5B%22X%5Et%22,%22Bloch%22,%22Bloch%22%5D,%5B%22Z%5Et%22,%22H%22%5D,%5B1,%22%E2%80%A2%22,%22X%22%5D,%5B%22Bloch%22,%22Bloch%22,%22Bloch%22%5D,%5B%22%E2%80%A2%22,%22X%22%5D,%5B%22H%22%5D,%5B%22Measure%22,%22Measure%22%5D,%5B1,%22%E2%80%A2%22,%22X%22%5D,%5B%22%E2%80%A2%22,1,%22Z%22%5D,%5B1,1,%22Bloch%22%5D%5D%7D)

回路の構成はURLのcircuitというリクエストパラメータに保存されています。

```
https://algassert.com/quirk#circuit=%7B%22cols%22:%5B%5B%22X%5Et%22,%22Bloch%22,%22Bloch%22%5D,%5B%22Z%5Et%22,%22H%22%5D,%5B1,%22%E2%80%A2%22,%22X%22%5D,%5B%22Bloch%22,%22Bloch%22,%22Bloch%22%5D,%5B%22%E2%80%A2%22,%22X%22%5D,%5B%22H%22%5D,%5B%22Measure%22,%22Measure%22%5D,%5B1,%22%E2%80%A2%22,%22X%22%5D,%5B%22%E2%80%A2%22,1,%22Z%22%5D,%5B1,1,%22Bloch%22%5D%5D%7D
```

## ゲートの配置
ではゲートを配置していきましょう。下記をクリックしQuirkを起動しましょう。
ゲートは、ツールボックスから**ドラッグ&ドロップ**で配置できます

* [Quirkを起動](https://algassert.com/quirk#circuit=%7B%22cols%22:%5B%5D%7D)

![haichi.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/a5ae7a32-96dd-6e2f-da19-e21822111070.gif)

## ゲートのコピー
配置済みのゲートをコピーします。**Shiftを押しながらドラッグ**でゲートをコピーできます。
![gate_copy.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/c740205b-9872-a321-e067-4b15a9f97486.gif)

## ゲートの削除
配置済みのゲートを削除します。**ツールボックスにドラッグ**することで配置したゲートを削除できます。
![remove_gate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/72c6decf-1323-949b-dc4a-28b77ceee93f.gif)

### 量子ビットの追加
量子ビットを追加します。画面下方に**ゲートを配置**することで量子ビットを追加できます
![add_qubit.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/0e4e9aaa-dfc0-ea2f-6fec-14ea0db0344e.gif)

### 初期状態の変更
量子ビットの一番左側の**ケットをクリック**することで初期状態を変更できます。
![initial.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/a12e2b48-b731-134c-9ddb-21670c715375.gif)

### 表示（ブロッホ球、観測確率）
量子ビットの状態を表示するには、**Displays**のブロックを利用します。
ここでは、ブロッホ球表示と観測確率表示を使ってみたいと思います。
![display.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/f1f40aa4-a056-39c7-438e-b8e4ff6c9778.gif)

### Undo/Redo
やりなおし（Undo/Redo)は、**Ctrl + Z　／ Shift + Ctrl + Z** で実施可能です。

![undo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/9fff85a7-3200-30c9-9fc6-c936e9bf2c1d.gif)

# 応用
## 行の移動
行を移動するには、一番左の**ケットをCtrlを押しながらドラッグします**
![line_move.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/c7955fba-a2c1-0804-ffc6-7d88dc582cfe.gif)

## 列の移動
列を移動するには、**Ctrlを押しながら列をドラッグします**
![move_col.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/3c9e0dc1-5008-1068-47ff-c3dba13b86dc.gif)

## 列の複製
列を複製するには、**Ctrl+Shiftを押しながら列をドラッグします**
これを使うと、GHZも簡単につくれますね。
![ghz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/b7aca28c-f763-7383-9bfe-952050324556.gif)

# 発展
## ゲートの作成
ゲートを組合せて複雑なゲートを構成することもできます。手順は以下の通りです。

* 作成したい内部処理をQuirk上に配置する
* **Make Gate**ボタンを押下し、**From Circuit**に合成後のゲートに含める範囲とラベルを入力
* 右下の**Custom Gate**に作成したゲートが表示される

![make_gate.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/44217d26-2136-ebd5-9c2e-71beab50e045.gif)

たとえば、Grover Searchで**Oracle(Uw)**　と **振幅増幅(Us)**を定義したいといった場合に便利です

* [Groverの例（Uw、Us定義済み）](https://algassert.com/quirk#circuit={%22cols%22:[[%22Chance4%22],[%22H%22,%22H%22,%22H%22,%22H%22],[%22Chance4%22],[%22%E2%97%A6%22,%22%E2%97%A6%22,1,%22%E2%97%A6%22,%22X%22],[%22%E2%97%A6%22,%22%E2%80%A2%22,1,%22%E2%97%A6%22,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,1,%22%E2%80%A2%22,1,1,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%97%A6%22,1,1,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,1,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%97%A6%22,1,1,1,1,1,1,1,1,1,%22X%22],[1,1,1,1,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%97%A6%22,1,1,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%97%A6%22,1,1,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,1,1,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,1,%22%E2%80%A2%22,1,1,%22X%22],[%22%E2%97%A6%22,%22%E2%80%A2%22,1,%22%E2%97%A6%22,1,%22X%22],[%22%E2%97%A6%22,%22%E2%97%A6%22,1,%22%E2%97%A6%22,%22X%22],[%22Chance4%22],[%22H%22,%22H%22,%22H%22,%22H%22],[%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,1,1,1,1,1,1,1,1,1,1,%22X%22],[%22H%22,%22H%22,%22H%22,%22H%22],[%22Chance4%22],[%22~2c2r%22],[%22Chance4%22],[%22~2j9g%22],[%22Chance4%22],[%22~2c2r%22],[%22Chance4%22],[%22~2j9g%22],[%22Chance4%22]],%22gates%22:[{%22id%22:%22~2c2r%22,%22name%22:%22Uw%22,%22circuit%22:{%22cols%22:[[%22%E2%97%A6%22,%22%E2%97%A6%22,1,%22%E2%97%A6%22,%22X%22],[%22%E2%97%A6%22,%22%E2%80%A2%22,1,%22%E2%97%A6%22,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,1,%22%E2%80%A2%22,1,1,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%97%A6%22,1,1,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,1,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%97%A6%22,1,1,1,1,1,1,1,1,1,%22X%22],[1,1,1,1,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%97%A6%22,1,1,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%80%A2%22,1,1,1,1,1,1,1,%22X%22],[1,%22%E2%80%A2%22,%22%E2%97%A6%22,%22%E2%97%A6%22,1,1,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,1,1,%22X%22],[%22%E2%97%A6%22,1,%22%E2%80%A2%22,%22%E2%80%A2%22,1,1,1,%22X%22],[%22%E2%80%A2%22,%22%E2%80%A2%22,1,%22%E2%80%A2%22,1,1,%22X%22],[%22%E2%97%A6%22,%22%E2%80%A2%22,1,%22%E2%97%A6%22,1,%22X%22],[%22%E2%97%A6%22,%22%E2%97%A6%22,1,%22%E2%97%A6%22,%22X%22]]}},{%22id%22:%22~2j9g%22,%22name%22:%22Us%22,%22circuit%22:{%22cols%22:[[%22H%22,%22H%22,%22H%22,%22H%22],[%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,%22%E2%97%A6%22,1,1,1,1,1,1,1,1,1,1,%22X%22],[%22H%22,%22H%22,%22H%22,%22H%22]]}}],%22init%22:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,%22-%22]})

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183826/924a025a-e1d1-0d41-3722-2963fb655cff.png)


# まとめ
量子回路シミュレータ Quirkの操作方法についてまとめてみました。
実際の計算においては、QiskitやblueqatといったSDKが便利ですが、、、
**ちょっと試したい**や勉強会等で**ちょっと触ってほしい**といったユースケースでやはり、ブラウザベースのシミュレータは便利です。
やや冗長な記事となりましたが、どなたかのお役に立てばと。。

# おまけ
過去にQuirkを利用し書いた記事をリンクしておきます

https://qiita.com/shnchr/items/841e8ec7e7b6b39c572c

https://qiita.com/shnchr/items/cbbaacf9e6f5f248c0d8


https://qiita.com/shnchr/items/696bbfd452955c2b5c2b

https://qiita.com/shnchr/items/ae194ba81cd07f2277f6

https://qiita.com/shnchr/items/ff5d490afb36a64b4967

https://qiita.com/shnchr/items/1bb02f3572eb6854daca

https://qiita.com/shnchr/items/5fa468f1957cc9de4085

https://qiita.com/shnchr/items/8974a3072a0f1bbe4832

https://qiita.com/shnchr/items/bb83dba29df85df5d006

https://qiita.com/shnchr/items/c65f56e7b93c4e984cba