OmniAICreator/Qiita-1.07M huggingface dataset:
Projection Mapping 2023 / THE FIRST TAKE②

# はじめに

この記事は鈴鹿高専Advent Calendar2023 16日目の記事です。

https://qiita.com/advent-calendar/2023/snct


また、昨日鈴鹿高専Advent Calender2023で公開されたProjection Mapping 2023 / THE FIRST TAKEの続きの記事です。よろしくおねがいします。

https://qiita.com/m_arcy/items/c3a2298ed1b2ff40d94b

# だれ？
専攻科1年のまるやまといいます。
ひょんなことから[前編](https://qiita.com/m_arcy/items/c3a2298ed1b2ff40d94b)の記事の筆者のMarcyと依頼主の~~小太りのオッサン~~富永と一緒に高専祭の中夜祭でプロジェクションマッピングをつくることになりました。
本記事では前編よりも実際に製作した際のことや当日の流れについて書きたいと思います。
日本語が下手くそですが、どうか許してください。(半分日記のようなものだとおもっていただければ)

# 本番まで
 ### 6月頃
 3人でおおまかな映像のコンセプト会議をした。
 今年の高専祭のコンセプトに合わせ、実際に完成した作品よりももっとホラー(日本の怪談、昔話)な面を押し出したものにしようという案があった気がする。
ただ、正直なところ、当時高専祭関連がゴチャッてて高専祭のテーマがよくわからなかったり、中夜祭の開幕かトリをやることは決まっていたので、「そこで暗い雰囲気のをやるのはどうなんだ？」という話になり、方針を変更した。
歴代の高専祭をイメージした映像にしてくれたのは良い判断だったと思う。(実際盛り上がったしね。)

𝘈 𝘍𝘌𝘞 𝘔𝘖𝘕𝘛𝘏 𝘓𝘈𝘛𝘌𝘙

### 8月~10月前半
映像制作期間
mercyが9月、自分が8月動けなかったのでそれぞれ実働1か月+10月半月の1.5ヶ月くらい。
mercyはblenderのシミュレーションノードやジオメトリノードを活用して映像を制作、自分はAfterEffectsを使用して映像を制作した。
mercyはプロだったので最強だったが、自分はAfterEffectsは初心者だったため、結果的に担当した範囲は広くなく、負担をかけてしまったと反省している。もっと情報交換すべきだった。


### 開催1週前
高専祭準備日より数日前、一度(本番用とは別の)業者の方にプロジェクターを持ってきていただきテスト投影を行った。
本来は2台のプロジェクターを同じところに重ねて投影することで輝度を確保する計画でいたところ、業者の方から
>2台重ねて投影しようとすると業者が1ヵ月程度かけてしっかり位置決めしないと無理だと思いますねぇ...

とのこと。これを聞き正直二人とも「この先は厳しい戦いになるな。」とか「終わったかもな」と思った。
結局、1台のプロジェクターにし、位置決めが難しいことがわかったため、体育館前面の形に合わせたカマボコ形の映像の投影ではなく四角の映像そのままを映すことになった。
~~プロジェクションじゃなくてただのマッピングじゃね？~~

### 前日　高専祭準備日
自分たちプロジェクションマッピングチームの存在と中夜祭でプロジェクションマッピングを行うことは高専祭関係者の中でも一部を除き伏せられていたため、プロジェクションマッピングチームの実際に投影しての調整はすべてのリハーサルが終わった8時くらいからの長くて2時間のみしか設けられなかった。
また結果的にリハーサルは1hほど遅延したため、調整は0.5hと翌日の朝1h程度のみの実質ぶっつけ本番のような状態だった。
その日は朝から忙しく、mercyは体育館に籠りきりで映像の調整を、自分はプロジェクターの台が確保できず置くところがなく業者の方が困っているとのことなのでミスミのフレームを切り出してその場で組んで台を作っていた。

リハーサルが始まってプロジェクターを起動してみると予想よりも遥かに出力が高く、ここでようやく希望の光が見え始めた。
↓[届いたプロジェクター](https://www.epson.jp/products/bizprojector/ebpu22/)
![43682.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/669a860b-9aff-a063-c2d3-84c106af617f.jpeg)

その場にいたメンバー全員「いや...出力強すぎないか...？」の顔をしていた。
![43687.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/d7a41d6d-defd-0003-7c37-d7161af51191.jpeg)
![20231020_213627 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/1ce9768d-c8f7-5612-f9ba-2474d318a414.jpeg)


結局この日は23時すぎくらいにリハーサルを終了し、終電で帰宅した。

# 中夜祭本番当日
プロジェクションマッピングの本番は中夜祭の最後のトリだったのでmercyも自分も緊張で胃がキリキリしていた。
朝に修正をしたきり、最後まで通しで投影したことはない上、もしも観てくれる学生の皆の反応が悪かったらどうしようかとずっと考えていた。
mercyは調整をしたり、自分はT字ステージでライブ配信用のカメラのカメラマンをしたりして出番を待っていた。
![43698.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/9f46e6a2-b5a0-03e3-38c6-75faf2da4326.jpeg)


#### 本番
mercyはちゃんと完走するかどうか不安でいっぱい、自分はプロジェクションマッピングの開始のスイッチを押す係を突然任され緊張でいっぱいの中、プロジェクションマッピングが始まり、なんとか無事に完走することができた。
![43701.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/2ff2b62b-d190-83bf-716a-83d1e019c0cc.jpeg)

### 感想
二人とも失敗したらどうしようととても不安だったけれど終わって周りを見てみたら皆ものすごく絶賛してくれていてとてもうれしかった。ようやく終わったんだと思うととても疲れたけれどやってよかったとも思いました。(あっさり)
これ来年もやるのかな...？


P.S.
その後mercyや卒業した同級生たちと天一を食べて帰りました
![43705.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2258534/798d1891-4111-e355-8092-9f1734601507.jpeg)
サロゲートペアとは？文字コードの変換に迫る

# 1. はじめに
文字コードが異なる環境間でのデータ転送時に、サロゲートペアと呼ばれる文字の変換が必要となる場合があることを知りました。そこで、サロゲートペアについて調べた内容をまとめます。

# 2. サロゲートペアが誕生した経緯
普通、Unicodeでは1文字につき2バイトのデータを使います。この2バイトには65536通り（0x0000～0xFFFF）のビットが表現できます。Unicodeの本来のアイディアは、この約6万字で世界中の文字を表現しようというものでした。

また、日本語の場合、全角でも半角でも1文字あたり2バイトのデータを使います（例えば、"a"も"あ"も2バイト）。そのため、「文字数 × 2 ＝ 使用バイト数」という関係がいつも成り立ち、使用バイト数を2で割れば文字数を簡単に導き出せました。これは文字列を1文字ずつ処理する場合など、便利な側面がありました。

しかし、最近ではUnicodeに組み込みたい文字の要望が増え、2バイトでは足りなくなってきました。そのため、解決策としてサロゲートペアと呼ばれる手法が導入されました。これは、「1文字＝2バイト」の基本は保ちつつ、一部の文字については「1文字＝4バイト」となる方法です。

具体的には、以前は未使用だった0xD800～0xDBFF（1024通り）を「上位サロゲート」、0xDC00～0xDFFF（1024通り）を「下位サロゲート」とし、「上位サロゲート＋下位サロゲート」で1文字を表現するようにしました。

「上位サロゲート」も「下位サロゲート」も、以前のUnicodeの文字コードと被らないように未使用の領域を利用しています。サロゲートペアの導入により、追加で1024×1024＝1048576文字の領域が利用可能となりました。

# 2. サロゲートペアの具体例

## 2.1 絵文字
😀  |😁  |😂  |😃  |😄  |😅  |😆  |😇  |😈  |😉  |😊  |😋  |😌  |😍  |😎  |😏  
😐  |😑  |😒  |😓  |😔  |😕  |😖  |😗  |😘  |😙  |😚  |😛  |😜  |😝  |😞  |😟  
😠  |😡  |😢  |😣  |😤  |😥  |😦  |😧  |😨  |😩  |😪  |😫  |😬  |😭  |😮  |😯  
😰  |😱  |😲  |😳  |😴  |😵  |😶  |😷  |😸  |😹  |😺  |😻  |😼  |😽  |😾  |😿  
🙀  |🙁  |🙂  |🙅  |🙆  |🙇  |🙈  |🙉  |🙊  |🙋  |🙌  |🙍  |🙎  |🙏  

## 2.2 JIS第1・第2水準に含まれない文字
﨑、彅、𠮷、㐂、繫、𠀋

## 2.3 おわりに
サロゲート文字について理解を深めていただけたら幸いです。
dockerを用いたjupyterlab環境構築

# はじめに
現在、docker-composeから自身の利用のために1つのJupyterLabサービスを起動して、開発環境として利用している。
# 想定読者
- JupyterLabの環境が複数必要な方

# 動作環境
- 仮想環境：WSL
- OS: Windows

# 前提条件
1. dockerのことがなんとなーくわかる。(dockerの説明は割愛します。)

# 困りごと
- JupyterLabのためのコンテナイメージへの接続ポートが競合してしまい、複数のjupyterlabを起動することが不可。

# 解決策
docker-compose.ymlに以下を追加してコンテナイメージへの接続ポート番号を変更する。
※ほかに使用していないポートにする必要があるかどうかは未確認。

    environment:
      - JUPYTER_PORT=8811  # ポート番号を変更する環境変数(ここでは例として8811を設定)


# 参考
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355686/3de2906d-4401-e4f6-cb7c-1d35f5c261ed.png)

# 所感
- 生成AIすげえ。
- IS生が来たとき環境構築すぐできそうで良かった。
- 暇があればdockerイメージをecr管理できるようにしておきたい。

以上。
【VScode】Go言語で定義元にジャンプできないときの解決方法

### 解決方法①
setting.jsonに次のコードを追加。
```
"go.useLanguageServer": true,
```

### 解決方法②
vscodeの拡張機能「Go」を入れた後に、

command + shift + Pで「Go Install/Updates」を選択し、全てのチェックボックスにチェックを入れてupdate！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562304/e8ba7171-8b5c-ab8a-4ea8-d93cf574efc5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3562304/1276a07e-c3b9-9c01-655a-7fce79b80bf3.png)

定義元にジャンプできるようになりました。

### 解決方法③

goplsをダウンロードした際に、次のようなエラーが出た場合、Goのバージョンが違うのでHomebrewなどを利用してアプリケーションで設定しているGoと同じバージョンをインストールしてください。

```
Failed to run "go env env,-json,GOMOD": Command failed: /opt/homebrew/bin/go env -json GOMOD go: downloading go1.23 (darwin/arm64) go: download go1.23 for darwin/arm64: toolchain not available
```
Microsoft Access の mdb ファイル (JET DB)をいじるためのTips

しがないメモですが

# Windows GUI で閲覧する
A5SQLmk2 を使う
* https://forest.watch.impress.co.jp/library/software/a5sqlmk2/

# mdbパスワードを忘れた
NirSoft Access PassView を使うと数秒で教えてくれます
* https://www.nirsoft.net/utils/accesspv.html

# 破損したデータベースを回復する
Microsoftが JETCOMP というツールを出しています

* https://learn.microsoft.com/ja-JP/office/troubleshoot/access/jet-compact-utility-download

# mdbファイルのバイナリ形式を知りたい
mdbtools の付属ドキュメントに書いてあります

* https://github.com/mdbtools/mdbtools/blob/dev/HACKING.md

# クエリを投げて読み取る
mdbtools が便利。UNIXだけでなくwindowsバイナリもあるよ。
これは読み込みだけのツールであって、更新はしません。

* https://github.com/mdbtools
* https://github.com/lsgunth/mdbtools-win

たとえばバージョンを知りたいなら
> $ mdb-ver.exe hoge.mdb
> JET4

行数を数えたいなら、
> $ mdb-sql.exe hoge.mdb
> => select count(*) FROM WorkingLog;

# がっつり操作したい
jet-tool になるかと。
* https://github.com/himselfv/jet-tool/blob/master/README.md

データをダンプするには、
> jet dump -f hoge.mdb --data -dp SECRET -stdo dump.sql
今日から毎日技術書読みます。１冊目はvueの本

さすがに正月なにもしてないのはよくないので、
今日から毎日技術書よんで学んだことを1000文字くらいでまとめます。
1月も15日までは時間めっちゃあるので、毎日6時間くらいつかって技術書よんでいきたい。

1回目は　これからはじめるVue.js 3実践入門
https://amzn.to/3tEMJ7Q

この本を選んだ理由
vue.jsについて1年くらいの経験のため、基礎から学びたかった

感想
かなり網羅的にまとまっている本でした。初心者でもお勧めできます。
自分はVueXまわりがわからなかったので、その辺りを重点的に読み込みました。

tips
コンポーネントで定義された情報にアクセスできるのは自分自身のみ
ステートは常にメソッド経由で操作する。
ステート操作のメソッドをミューテーション。
ミューテーションには非同期処理を含んではいけない。

など、本質的な情報が随時に散りばめられています。
下のようなわかりやすい図もたくさんあります。
![Pasted Graphic 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/759966/90299d58-4edc-4319-bff0-803217f77b61.png)
【JavaScript】URLからクエリパラメータを削除する方法

以下のように記述することでURLからクエリパラメータを削除できます。

```js
const url = new URL(window.location.href) // URLを取得
 
history.replaceState(null, '', url.pathname) // URLからクエリパラメータを削除
```

https://developer.mozilla.org/ja/docs/Web/API/History/replaceState
SwiftのコードをTSに置き換える

Swiftのコードは型を定義する位置がTypeScriptに似てるので、私は普段Dartを書くのですが、こっちの方が比較対象として良いかなと思い使うことにしました。

TypeScriptはブラウザで動かせるサービスがあるので試してみてください。

https://stackblitz.com/

## 関数を使う
functionは、書き換えるのは簡単な気がしますが、クロージャはアロー関数でいいのかな〜と比較してみようと思いました。
JavaScriptだったら、型がないから比較しにくい。

```swift
import UIKit

func greet(name: String) -> String {
    return name
}

print(greet(name: "こんばんわ!"))

let good = { (name: String) -> String in
    return "あいさつは、\(name)"
}

print(good("Good Night!"))
```

実行結果:
```bash
こんばんわ!
あいさつは、Good Night!
```

TypeScriptにするとこんな感じです。

```ts
function greet(name: string): string {
    return name;
}

console.log(greet("こんばんわ!"));

let good = (name: string): string => {
    return `あいさつは、${name}`;
}

console.log(good("Good Night!"));
```

実行結果:
```bash
こんばんわ!
あいさつは、Good Night!
```

## Swiftでクラスを使う
Swiftで変数とイニシャライザというコンストラクタみたいなものを使ってみました。

```swift
import UIKit
// 親クラス
class Person {
    var name: String
    var age: Int

    // 初期化するメソッド
    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }
}

// 親クラスを継承する子クラス
class Hanako : Person {

    func hi() {
        print("私の名前は\(self.name)です。年齢は\(self.age)")
    }
}
// インスタンス化すると継承したクラスの変数と関数が使える
var hanako = Hanako(name: "山田花子", age: 23)
hanako.hi()
```

TypeScriptに書き換えるとこんな感じになる。

```swift
class Person {
    name: string;
    age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

class Hanako extends Person {
    hi() {
        console.log(`私の名前は${this.name}です。年齢は${this.age}`);
    }
}

let hanako = new Hanako("山田花子", 23);
hanako.hi();
```

実行結果:
```bash
私の名前は山田花子です。年齢は23
```

# Enumを使ってみる
定数をまとめておくことができる列挙型のenumを使ってみる。

```swift
import UIKit
// 型をつけると引数を入れられる
enum Fruits: String {
    case banana = "バナナ"
    case apple = "りんご"
    case orange = "オレンジ"
}
// rawValueをつけると引数を参照できる
var b = Fruits.banana.rawValue
var a = Fruits.apple.rawValue
var o = Fruits.orange.rawValue
print(b)
print(a)
print(o)
```

### TypeScriptに置き換えてみた
書き方に違いはそれほどないようだ。

```ts
enum Fruits {
  Banana = "バナナ",
  Apple = "りんご",
  Orange = "オレンジ"
}

let b = Fruits.Banana;
let a = Fruits.Apple;
let o = Fruits.Orange;

console.log(b); // "バナナ"
console.log(a); // "りんご"
console.log(o); // "オレンジ"
```

## 最後に
よく使う機能で、SwiftとTypeScriptのコードを比較してみました。
opaque type を トップレベルで定義する際の挙動

opaque type をトップレベルで定義した際の挙動は
> An opaque type alias on the top-level is transparent in all other top-level definitions in the sourcefile where it appears, but is opaque in nested objects and classes and in all other source files

https://dotty.epfl.ch/docs/reference/other-new-features/opaques-details.html
と書かれていますが、この挙動についてもう少し調べてみました。
Scala の version は 3.3.1 になります。

## ネストしたobject

ドキュメントの例の通りコンパイルエラーになります。

```scala
// in test1.scala
opaque type A = String
val x: A = "abc"

object obj:
  val y: A = "abc"  // error: found: "abc", required: A
```

## 同階層で case class に対しての companion object

こちらもコンパイルエラーになります。 trait に対しての companion object に対してもコンパイルエラーとなります。

```scala
// in test1.scala
opaque type A = String
val x: A = "abc"

case class B(value: String)
object B:
  val y: A = "abc"  // error: found: "abc", required: A
```

## opaque type に対しての companion object

こちらはコンパイルエラーに**なりません**

```scala
// in test1.scala
opaque type A = String
val x: A = "abc"

opaque type B = String
object B:
  val y: A = "abc"  // コンパイルエラーとならない実行も可能
```
また opaque type の companion object からネストした場合もコンパイルエラーととならないです。

```scala
// in test1.scala
opaque type A = String
val x: A = "abc"

opaque type B = String
object B:
  val y: A = "abc"  // コンパイルエラーとならない実行も可能
  object BB:
    val z: A = "abc"  // コンパイルエラーとならない実行も可能
```


## type に対しての companion object

使うことはあまりないと思うのですが、 type に対してもどうか調べてみました。こちらも opaque type の時と同じでコンパイルエラーになりません

```scala
// in test1.scala
opaque type A = String
val x: A = "abc"

type B = String
object B:
  val y: A = "abc"  // コンパイルエラーとならない実行も可能
```

## まとめ

opaque type は Scala 3 で追加された機能でドキュメントも少ないのでどのような挙動をするのか把握できていないところがあります。 特に同一階層で opaque type の companion object を定義することはあると思うので思わぬ落とし穴にハマらないように注意が必要です。 opaque type の使用頻度はこれから高まってくると思うので、同じような問題に遭遇した場合はこの記事が参考になればと思います。
ABC057 の問題を解いてみました

## A問題
https://atcoder.jp/contests/abc057/tasks/abc057_a

問題を読み解くと、$A + B$ がコンテスト開催時間になるとわかります。
基本的には、それを出力すればよいですが、開催が翌日になることがあるので、$A + B$ を 24 で割ったあまりを出力します。

~~~C++
#include <bits/stdc++.h>
using namespace std;
//Created by karaju.

int main(void){
  int a, b;
  cin >> a >> b;
  
  cout << (a + b) % 24 << endl;
}
~~~

## B問題
https://atcoder.jp/contests/abc057/tasks/abc057_b

各学生にとって、どのチェックポイントが一番近いかを全探索します。


~~~C++
#include <bits/stdc++.h>
using namespace std;
//Created by karaju.

int main(void){
  int n, m;
  cin >> n >> m;
  int a[n], b[n], c[m], d[m];
  for(int i = 0; i < n; i++) cin >> a[i] >> b[i];
  for(int i = 0; i < m; i++) cin >> c[i] >> d[i];
  
  int ans;
  for(int i = 0; i < n; i++){ //全生徒について試す
    int point = 1e9; //最短距離を記録する
    
    for(int j = 0; j < m; j++){ //全チェックポイントについて試す
      
      //マンハッタン距離を求める
      int dis = abs(a[i] - c[j]) + abs(b[i] - d[j]);
      if(dis < point){ //距離が一番近いなら
        point = dis; //距離を更新する
        ans = j + 1; //チェックポイントの番号を記録する
      }
    }
    cout << ans << endl;
  }
}
~~~

## C問題
https://atcoder.jp/contests/abc057/tasks/abc057_c

まず、$A, B$ の桁数を求めるには、$A, B$ を文字列にして、その長さを確かめればよいです。
そして、$A, B$ の桁数の大きい方が $F(A, B)$ になります。
$N = A \times B = B \times A$ が成り立つので、$1 \leqq A \leqq \sqrt N$ を満たす $A$ を全て試して、最小の $F(A, B)$ を出力すればよいです。



~~~C++
#include <bits/stdc++.h>
using namespace std;
//Created by karaju.

int digit(int x){ //桁数を返す関数
  return (int)to_string(x).size();
}

int main(void){
  long long n;
  cin >> n;
  
  int ans = 1e9;
  for(int i = 1; i <= sqrt(n); i++){
    if(n % i == 0){
      int a = digit(i), b = digit(n / i);
      // A, B の桁数を求める
      int f = max(a, b);
      //
      ans = min(ans, f);
    }
  }
  cout << ans << endl;
}
~~~

## D問題
https://atcoder.jp/contests/abc057/tasks/abc057_d
システム開発上中流工程でユビキタス言語化された日本語プログラミング言語と開発実装用の日本語プログラミング言語の対比

# はじめに

日本語プログラミング言語をモデリング言語としてシステム開発上中流工程に導入した場合、そのメリット・デメリットについて考察する記事の11回目です。

本記事の内容はいくつかに分割されて記載されます。本記事中の「本記事」とは分割された内容の総体を指す場合があります。

## 対象読者
とりあえずこの記事の想定読者はシステムエンジニアさんです。とくに日本語で要求仕様や内部設計資料を書いている方向けのお話です。

# 想定しているシステム開発フロー
オーソドックスなリレーショナルデータベースを使用している業務システムであることを[1回目](https://qiita.com/mylifewithviolin/items/b7cc85911507cf1a2a55)[2回目](https://qiita.com/mylifewithviolin/items/4ce62e0d5473626347e1)の記事で説明しております。

## 想定しているレイヤードアーキテクチャ・業務
一般的なWebアプリケーションシステムであり、簡単な受発注業務をインターネットで支援するシステムであることを[3回目](https://qiita.com/mylifewithviolin/items/d10d59e98c4d2d7dca3d)[4回目](https://qiita.com/mylifewithviolin/items/68dbf00cebb1bc8f6209)の記事で説明しております。

## 想定しているユビキタス言語
[5回目](https://qiita.com/mylifewithviolin/items/e1a7915efbf369117c97)の記事ではドメイン駆動設計（DDD）の文脈で用いられる意味でのユビキタス言語を例示しました。

## ユビキタス言語化された日本語プログラミング言語
[6回目](https://qiita.com/mylifewithviolin/items/f49c48241d8f72d6839a)[7回目](https://qiita.com/mylifewithviolin/items/8823d08c79bf70464bc0)の記事ではドメインエキスパートからプログラマまで共有可能な言語のことをユビキタス言語化された日本語プログラミング言語として例示・解説し、[8回目](https://qiita.com/mylifewithviolin/items/4db1d402ed273ec784dc)の記事ではそれをシステム開発の上中流工程に導入した場合のメリット・デメリットについて、いったんまとめました。

## 数学的形式言語で日本語識別子を使った場合との対比
また、[9回目](https://qiita.com/mylifewithviolin/items/7236c136e43b8b220098)[10回目](https://qiita.com/mylifewithviolin/items/e32e2b8711a1cac765e1)の記事では、数学的形式言語VDM++で日本語識別子を使って記述した場合と比較し、両者の違いをさぐりました。

# 開発実装用の日本語プログラミング言語を使えばよいのでは問題
21世紀の第1四半期のおわりである今日、システム開発の上中流工程において実績のある日本語プログラミング言語は、まだ存在しないと考えられます。（開発現場でも存在しないと認識される方もいらっしゃいますが、わたしはそのようには認識しておりません。また、非エンジニアリングの現場で、またはソフトウェアエンジニアリング以外のエンジニアリング現場において、個人が上中下流一貫して個人的に日本語プログラミング言語でツールを企画設計実装されているような場合を除きます。）

システム開発（上中下流すべて含めて）の現場においては、日本語プログラミング言語の存在感はまだまだ薄いため、構造化されたプログラミング言語としての日本語でソフトウェアの構造を定義できること自体を知らない、または認知していないシステムエンジニアの方はざらにいらっしゃいます。

結論から申し上げますと、既存の日本語プログラミング言語を使ってもシステム開発の上中流工程のあいまいさを排し、より合理的な整合性のある仕様や設計が可能であるとわたしは考えております。ただし、現存する代表的な日本語プログラミング言語は汎用の開発実装目的に設計・実装されていますので、上中流工程にそれを適用する場合は少し工夫が必要であることと、他の実装言語との直接のトランスコンパイルということは現時点でできません。

## 主要日本語プログラミング言語の特徴
以下に主要な日本語プログラミング言語の特徴をまとめてみました。
| 言語名 | 日本語語彙 | 日本語語順 | 分ち書き | オブジェクト指向 |
|:-:|:-:|:-:|:-:|:-:|
|なでしこ|使用する|使用する|しない|対応しない|
|プロデル|使用する|使用する|しない|対応する|
|Mind|使用する|使用する|する|対応しない|

これらの言語を上流のモデリング言語や中流のロジック記述言語として適用した場合のイメージについて論じていきます。
分ち書きする・しないとはどのようなことなのか、日本語プログラミング言語自体をよくご存じない方は謎なお話とうつるかもしれません。詳しくは次回に各言語のソースコードを併記して説明します。

参考に、本記事の主題となりますユビキタス言語化された日本語プログラミング言語の企画設計例のRe:Mindはこの比較表では下記のようになります。

| 言語名 | 日本語語彙 | 日本語語順 | 分ち書き | オブジェクト指向 |
|:-:|:-:|:-:|:-:|:-:|
|Re:Mind|使用する|使用しない|する|対応する|

## 自然言語の日本語でオブジェクト指向モデリングすることと何が異なるのか

現存する日本語プログラミング言語でのモデリングと聞いて、自然言語の日本語でオブジェクト指向モデリングすることを連想された方は多くいらっしゃるかもしれませんので、念のため強調させていただきます。

本記事は自然言語の日本語でオブジェクト指向モデリングすることに、ほとんど触れません。たとえば、UMLのクラス図でメソッド名・変数名をとりあえず自然言語の日本語で書いておくこととなにが違うのかということが、疑問に生じるかもしれません。

次回に詳しく説明する予定の、用途によってはこれらのコンパイラ言語の言語仕様を流用して疑似言語化することも有益と筆者は考えているのですが、自然言語で書くことと構造化されて定義由来に制約のあるプログラミング言語とでは疑似言語であっても定義の厳密さに有意差が生じると考えています。現存するコンパイラ言語を使用するメリットはコンパイラを通過させて未定義エラーを検出できることです。


# この回のまとめ
上中流工程において、汎用実装目的で設計・実装された日本語プログラミング言語を適用した場合について、まず軽く考察してみました。

# 次回
現存する代表的な日本語プログラミング言語を適用した場合についてソースコード例をまじえて考察します。
Chat GPTはサイトを作るのに優秀か？

# 序章
最近ChatGPTやGoogle BardなどのAIが流行っていますね。ニュースにもなっていますが、このようなうわさが流れています。
- ウェブサイトはAIで十分に作れる
- IT関係の仕事はAIに奪われて仕事がなくなる
- 俺らはどうすれば . . .

私もいろんな記事を見て不安になりました。しかし、自分たちにとって悪いことだけを見ても公平に判断ができません。では、よい噂は何でしょうか？
- 作業の効率化ができる
- 単純作業をやってくれる
- 俺たちを助けてくれる

確かに、最近GitHub Copilotが出てきました。私も体験してみましたが、結構効率が上がりました。しかし、AIなので間違いを生じることがあります。例えば、変数が重なってしまったりとか、、、
```JS
const aaa = 'Hello, world!';
var aaa = 'Hello, Qiita!';
```
エラーが起きちゃうね。

AIは確かに人間よりは処理速度が速くて優秀です。しかし、UIを見るのは人間です。AIのセンスと人間のセンスが合うかどうかを確かめてみたいと思います。
# 本編
## ChatGPT
ChatGPT 3.5を使っていきます。
ChatGPT 4には金欠で手に入れることができませんでした。
では、この文章からウェブサイトを作ってもらいます。
```
HTMLとCSSでGoogleのような検索ページを作って♡
```
結果：![コメント 2024-01-04 224830.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3092952/bb7ac012-21fc-9ee1-e500-2e34eaf1d783.png)
微妙 . . .
でもレイアウトはかなりいいよね。
## 結論
チャットでいろいろと話してたらいける気がしてきた。
AIの進化を見守りましょう。
Reactアプリ100本ノックやってみた 「05 Calc」

# はじめに
フロントエンドに苦手意識のある私が、@Sicut_studyさんの【Reactアプリ100本ノック】をやってみました。
変なところがあれば教えていただきたいです。



今回の課題

https://qiita.com/Sicut_study/items/c38b51907d18131b31f6

# やってみる
```App.tsx
import React, { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");

  const handleClick = (value: string) => {
    setInput((prevValue) => prevValue + value);
  };

  const handleCalculate = () => {
    try {
      setInput(eval(input).toString());
    } catch (error) {
      setInput("エラー");
    }
  };

  const handleClear = () => {
    setInput("");
  };

  return (
    <div>
      <div>
        <input type="text" value={input} readOnly />
      </div>
      <div>
        <button onClick={() => handleClick("7")}>7</button>
        <button onClick={() => handleClick("8")}>8</button>
        <button onClick={() => handleClick("9")}>9</button>
        <button onClick={() => handleClick("/")}>/</button>
      </div>
      <div>
        <button onClick={() => handleClick("4")}>4</button>
        <button onClick={() => handleClick("5")}>5</button>
        <button onClick={() => handleClick("6")}>6</button>
        <button onClick={() => handleClick("*")}>*</button>
      </div>
      <div>
        <button onClick={() => handleClick("1")}>1</button>
        <button onClick={() => handleClick("2")}>2</button>
        <button onClick={() => handleClick("3")}>3</button>
        <button onClick={() => handleClick("-")}>-</button>
      </div>
      <div>
        <button onClick={() => handleClick("0")}>0</button>
        <button onClick={() => handleClick(".")}>.</button>
        <button onClick={handleCalculate}>=</button>
        <button onClick={() => handleClick("+")}>+</button>
      </div>
      <div>
        <button onClick={handleClear}>C</button>
      </div>
    </div>
  );
};

export default App;

```



# 完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3621123/e3330322-0d72-69c1-3a5e-90942ced56e4.png)








# おわりに
eval()を使ってしまっています。セキュリティ的に良くないらしいので注意です。
Python × XML -ElementTree XML APIの使い方-

## XMLファイルの基本構造
```
<?xml version="1.0" encoding="utf-8"?>
<root>
  <element　attribute='zokusei'>
    <tag>text</tag>
  </element>
</root>
```

・木構造。最上位に1つだけルート（root）があり、その下に複数の要素（element）が存在している
・また、それぞれの開始と終わりは<> <<//>となっており、下の階層の要素を挟むように位置している。

## インポート
```
import xml.etree.ElementTree
```
## データ読み込み
```
tree = ET.parse('file.xml')
root = tree.getroot()
```
```
# ファイルに拡張子がついて無かったり、テキストを読み込む際
with open('sample.txt',encoding = "utf-8") as file:
    text = file.read()
    root = ET.fromstring(text) # ET.XML()も同じ
```
## データ抽出
```
# ルートノードの抽出
element = root.tag

# ノード属性の抽出
attribute = element.attrib

# ノードのテキストの抽出(&子ノードの抽出)
for child in root:
    tag_text = child.text
```

# 参考サイト
https://atmarkit.itmedia.co.jp/ait/articles/0201/16/news003.html

https://docs.python.org/ja/3/library/xml.etree.elementtree.html
JavaScript学習の記録2

# はじめに
前回に続いて，JavaScriptの学習内容をアウトプットします．

# オブジェクトの省略記法
オブジェクトのプロパティと変数が同じ名前の場合，変数の部分を省略してもよい．

例
```javascript
const myprofile = {
    name:name,
    age:age,
}
```
　↓
```javascript
const myprofile = {name, age}
```

# スプレッド構文
「...」を使用する構文で，配列やオブジェクトに対して使用する．配列・オブジェクトの中身を順番に展開して，処理していくもの．
```javascript
const arr = [1, 2];
console.log(...arr);
```
↓　実行結果
```
1 2
```

### スプレッド構文を使って配列を結合する
```javascript
const arr1 = [10, 20];
const arr2 = [30, 40];

const arr3 = [...arr1, ..arr2];
console.log(arr3);
```
↓　実行結果
```
[10, 20, 30, 40]
```
【Java】JIS X 0213 文字チェック

仕事で、文字列に `JIS X 0213`以外が含まれないことをチェックする処理を実装しろと言われたのですが、調べてもなかなか出てこなかったので、備忘録として記載しておきます。

## コード
処理自体は簡単で、`charsetName`に `x-SJIS_0213`を指定して、`byte[]`⇔ `String` に変換して、変換前後の値が一致することを確認します。

```java
String target = "小⃝𠮷";
byte[] targetBytes = target.getBytes("x-SJIS_0213");

String after = new String(targetBytes, "x-SJIS_0213");
System.out.println("check：" + after.equals(target));
```

`String target` に含まれる値が `JIS X 0213`の文字のみであれば、`after.equals(target)`は `true`。
`JIS X 0213`以外の文字が含まれる場合は、`false` となります。
ZenohのLaunchをつくりたかった記事

# はじめに
関係ありませんが、今年初の投稿です。
最近[Zenoh](https://zenoh.io/)の開発をしていてROS2のLaunchみたいなことできないかなと思い、奮闘した記録です。

# どのようにしたか
はじめはコマンドラインツールによる実装を考え作ろうとしてみたのですが、うまくいかず挫折しました。
そこでROS2みたいな実装を思い出しcomponent.cppとnode.cppに分ける感じでつくればいいのではと考えました。（説明下手でスミマセン...）

# 成果
## ノード実装例
適当なコードを実装しました

https://github.com/motii8128/zenoh_pubsub

ファイル構造はリポジトリをご確認ください。
まずlib.rsでメインの機能を定義します。
```rust:lib.rs
use zenoh::{
    Error,
    config::Config,
    prelude::r#async::*,
};

use std::time::Duration;

pub async fn pub_test(node_name:&str)->Result<(), Error>
{
    let session = zenoh::open(Config::default()).res().await.unwrap();

    let topic = "test_topic";

    let publisher = session.declare_publisher(topic).res().await.unwrap();

    let mut count = 0;

    println!("Start {}", node_name);

    loop {
        let msg = format!("Hello {}", count);
        publisher.put(msg).res().await.unwrap();

        count += 1;

        std::thread::sleep(Duration::from_millis(1000));
    }
}

pub async fn sub_test(node_name:&str)->Result<(), Error>
{
    let session = zenoh::open(Config::default()).res().await.unwrap();

    let topic = "test_topic";

    let subscriber = session.declare_subscriber(topic).res().await.unwrap();

    println!("Start {}", node_name);

    loop {
        let sample = subscriber.recv_async().await.unwrap();

        println!("Recv:{}", sample.value.to_string());
    }
}
```
適当なPubSubですね
引数でノード名を指定できるようにしました。（ROS2でいうRemapとかできそうですね）

## Launchしてみる
それでは別のパッケージから呼び出してみます。
Cargo.tomlでは今回呼び出すパッケージを指定しています。
```toml:Cargo.toml
[dependencies]
async-std = "1.0"
zenoh = "0.7.0-rc"

zenoh_pubsub = {git = "https://github.com/motii8128/zenoh_pubsub.git"}
```
Githubのリポジトリのリンク貼っただけですね

メインコードです
```rust:src/main.rs
use async_std;
use zenoh::Error;
use zenoh_pubsub::pub_test;

#[async_std::main]
async fn main()->Result<(), Error>
{
    let pub_task = async_std::task::spawn(pub_test("PUBLISHER_A"));

    pub_task.await?;

    Ok(())
}
```

実行したところ以下のようなログになりました。
```
user@laptop:~/test_launch$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.10s
     Running `target/debug/test_launch`
Start PUBLISHER_A
```
指定したノード名で起動できていますね。
ではここでSubscriberの方も同時に呼び出しましょう。
先程のコードに加えます。
```rust:src/main.rs
use async_std;
use zenoh::Error;
use zenoh_pubsub::{pub_test, sub_test};

#[async_std::main]
async fn main()->Result<(), Error>
{
    let pub_task = async_std::task::spawn(pub_test("PUBLISHER_A"));
    let sub_task = async_std::task::spawn(sub_test("SUBSCRIBER_B"));

    pub_task.await?;
    sub_task.await?;

    Ok(())
}
```
実行すると
```
user@Laptop:~/test_launch$ cargo run
    Finished dev [unoptimized + debuginfo] target(s) in 0.08s
     Running `target/debug/test_launch`
Start SUBSCRIBER_B
Start PUBLISHER_A
Recv:Hello 0
Recv:Hello 1
Recv:Hello 2
Recv:Hello 3
Recv:Hello 4
Recv:Hello 5
Recv:Hello 6
Recv:Hello 7
Recv:Hello 8

```
どちらも呼び出せました。

# おわりに
最適解かわかりませんが、一応目的は達成できたと思います。
yamlのパスを引数にした関数にすれば、パラメーターをyamlから取得するみたいにできることは色々ありそうですね。今から色々つくっておいて、ロボコンの時にはつなぐだけみたいな形が理想です。
また、以下のように純粋なRustで動くロボットのソフトウェアを開発中です。issue等お待ちしております。

https://github.com/PureRustRobot
2024年、絶賛使用中のvs.codeの拡張機能一覧

# 2023年、どんな感じに過ごしていた？
みなさん、2023年お疲れさまでした。2024年、私はついに受験を迎えます。
コードを書きながら一つ思ったのが、
> Q. 勉強していないけど大丈夫かな？
>> A. ヤバいです。人生が終わりそうなくらいヤバいです。(ΦωΦ)

ということで、また記事を書くんですけど...
# 本編
皆さんはコードを書くときに何のソフトを使っていますか？
たいていはこの４つでしょう
- Visual Studio
- Visual Studio code
- Xcode
- JetBrains 製品

さて、タイトルの通り私はVisual Studio codeで大体コードを書いています。
UI系はVisual Studioですが。例：XAML・C++
そのvs.codeは拡張機能が無限にあります。最近はGitHub Copilotも出てきましたね。
その中でも、現在絶賛使用中のvs.codeの拡張機能を6つ紹介したいと思います。
## 拡張機能
### GitHub Repositories
https://marketplace.visualstudio.com/items?itemName=GitHub.remotehub

これは、本当に便利です。自分のFTPサーバーにGitHub Actionを通してアップロード・変更を行っているのでvs.codeから直接行えるのは本当に便利だと感じました。
### Live Preview
皆さんはこの２つのどちらかを使っているのではないでしょうか？
- Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

- Live Preview

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

この２つはHTMLをサイトで確認するのにちょうどいいですよね。
ちなみに、わたしはどちらも入れていていますが、メインで使っているのは`Live Preview`ですね。
### C/C++ Extension Pack
https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools-extension-pack

この拡張機能はいくつかの必要なパック仕様になっています。
入っている拡張機能はごらんの通り。
- C/C++
- C/C++ Themes
- CMake
- CMake Tools

これらの拡張機能はよくわからないですが、C++のコードをよく書いていたのでお世話になったのかなぁと思いました。次行きましょう。

### Japanese Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

長ったらしいタイトル名ですね。
多分大体の人が使っているのではないでしょうか？使ってない人は、たぶん英語得意です。羨ましい . . .
これは、既定では英語になっているUIを日本語化する拡張機能です。これにはマジで助かった。皆さんもMicrosoftのこの拡張機能を作った人たちに感謝しましょう。
### GitHub Actions
https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-github-actions

使っている人をほとんど見たことがない拡張機能ですね。自分が知らないだけかもしれませんが。
一応Google様へヒット数を聞いてみましょう。
結果：
ヒット数 -> 約 307,000,000 件
検索処理時間 -> 0.19秒
ひゃー、皆さん知っておりましたか . . .
そして、Google様の速度は相変わらず速いですね。瞬足より速いですね。
あのCMを思い出してしまうまえに説明をしましょう。

わたしはいつもこの拡張機能を使ってしっかりFTPにアップロードされてるか確認をしています。WorkFlowsをvs.codeで見れるということです。
ほかにも便利な機能はあると思いますが、私が知っているのはこのくらいです。
### GitHub Theme
https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

またGitHubが出てきましたが、これは拡張機能というよりテーマですね。
このテーマの`GitHub Dark Colorblind`というダークモードを使用しています。このテーマでは、ライトモード以外は大体見やすいと思います。
なぜライトが見にくいかというと、書いたときにコードが見ずらいからです。
私はおすすめしません . . .
# まとめ
どうでしたか？
2023年は、ほとんどC++を書くのに費やしていました。
2024年もよろしくお願いします。

ところで、私の受験が近づいてきていますが勉強をしていません。
2024年、うるう年ですが失敗して「うるうる」泣く年になるかもしれません。
ReactでZustandを使ってみた

## はじめに
最近、状態管理ライブラリの下記記事をみました。
Redux,Recoilが有名でしたが、ZustandがReduxを追い抜く勢いなんですね。
普段開発ではjotaiを利用しているのですが、時代に追いつくためにもZustandを触っていこうと思います。

:::note info
余談ですが、Recoilのversionは0.7.7のようですね。
https://github.com/facebookexperimental/Recoil/releases/tag/0.7.7
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/04693a6b-9b9c-6297-60cb-83414b8a8c46.png)

https://zenn.dev/dai_shi/articles/69deb59826ae7a

## Zustandって何？？
状態管理ライブラリです。最小限の設定で直感的な状態管理を行いたい場合、または関数型プログラミングのアプローチを好む場合に適してます。
![スクリーンショット 2024-01-04 21.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/3f7a89d9-d2e5-ab21-79fc-5a09948e04c4.png)

https://zustand-demo.pmnd.rs/

## Hands-on
成果物です。
![zustand.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/2305160b-34c7-f6d3-0cd1-ccbac9644e65.gif)

## ソースコード
```shell:ディレクトリ構成
~/develop/react/react_zustand$ tree src
src
├── App.tsx
├── index.tsx
├── logo.svg
└── store.ts

1 directory, 4 files
```

```tsx:src/App.tsx
import React from 'react';
import { useCounterStore } from './store';

const App: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default App;
```

```tsx:src/store.ts
import create from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

```

:::note info
stateがオブジェクト型なのがいいですね。
Java出身のエンジニアとしては馴染みのある実装です。
また、オブジェクトの中に変数や振る舞いが集約されているのも気持ちいですね！！
:::

## まとめ
変数や振る舞いがオブジェクト型で定義されているので、すごい管理しやすい。
能登半島地震の建物被害分布を自動で出す方法

# はじめに
　プログラムはこちらに置いた。

https://github.com/m-kunugi/noto_earthquake

　先ほど国土地理院の航空写真について、下記の記事を書いたが、学習済みのCNNモデルを用いれば、建物被害分布も出せるはずなので、出してみた。

https://qiita.com/mkunu/items/61ec11634b9b4ebcc7a0

　ちなみに、[各県が公開した被害報等から作成した住家被害状況](https://nied-drsite.maps.arcgis.com/apps/MapSeries/index.html?appid=6b43992cc19f419a8cd5a3662f3e98a0&embed)によると、被害が大きかった能登半島の北部（珠洲市、輪島市、能登町、穴水町）に関しては、2024/01/04時点で住家被害の件数が未だ不明となっている。


# 手法と結果
　（航空写真と同じく）国土地理院が公開している学習済みCNNモデルを使用する。
> 国土地理院（2023）：CNNによる地物抽出のための深層学習済モデル，国土地理院技術資料 H1-No.36．

https://gisstar.gsi.go.jp/gsi-dataset/99/index.html

　全体説明ページはこちら

https://gisstar.gsi.go.jp/gsi-dataset/

　考え方としては普通建物抽出の学習済みモデルを用いて、災害前の[全国最新写真（シームレス）](https://maps.gsi.go.jp/development/ichiran.html#seamlessphoto)と災害後の[令和6年能登半島地震 輪島東地区　正射画像（2024年1月2日撮影）](https://maps.gsi.go.jp/development/ichiran.html#t20240102noto_wazimahigashi_0102do)それぞれについて普通建物を検出する。**災害前に存在した建物が、災害後に滅失している場合、全壊の可能性が高いと判断できる。**
> 普通建物抽出用（F=0.800）　model-09.zip

　左図が災害前、右図が災害後の抽出結果。各図の上側は大規模火災があった輪島市「朝市通り」の周辺である。災害後、建物として検出されない領域が広範囲に存在することが分かる。

![before_after.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282333/9d9b2777-55b9-cc56-44e7-67ca9418ce45.jpeg)

# 補足
　学習済みモデルは、カメラ特性による明度の違いなどの影響も受けるはずである。そのため別の衛星画像で学習したモデルなどは上手く適用できない場合がある。だが、今回は入力画像は学習時と同じ国土地理院の航空写真なのでその心配は小さい。
rbenvを用いたRubyのインストール

# rbenvを用いたRubyのインストール

rbenvを利用してRubyをインストールする手順です。

手順の大まかな流れは以下になります。

1. Homebrewをインストール
2. Homebrewを用いてrbenvをインストール
3. rbenvを用いてRubyをインストール

## Homebrewのインストール

```bash
brew -v
```
`zsh: command not found: brew`と表示された場合は、Homebrewをインストールします。
`Homebrew 4.2.0`と表示された場合は、Homebrewはインストールされています。バージョンの数字は環境により異なります。


Homebrewがインストールされていない場合は、以下のコマンドを実行してインストールします。

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

M1 Macの場合は、次のコマンドも実行して設定を追加します。
```bash
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zshrc
source ~/.zshrc
```

Homebrewのバージョンを確認します。

```bash
brew -v
```
## rbenvのインストール

```bash
rbenv -v
```

`zsh: command not found: brew`と表示された場合は、rbenvをインストールします。
rbenv 1.2.0と表示された場合は、rbenvはインストールされています。バージョンの数字は環境により異なります。

rbenvをインストールします。以下のコマンドをターミナルで実行します。

```bash
brew install rbenv ruby-build
```

rbenvの設定を行います。以下のコマンドをターミナルで実行します。


```bash
echo 'export RBENV_ROOT="$HOME/.rbenv"' >> ~/.zshrc
echo 'export PATH="$RBENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >>  ~/.zshrc
source ~/.zshrc
```

rbenvのバージョンを確認してインストールが成功しているか確認します。

```bash
rbenv -v
```

## Rubyのインストール
インストール可能なRubyのバージョン一覧が表示されます。

```bash
rbenv install --list
```

今回は3.2.1のRubyをインストールします。以下のコマンドをターミナルで実行します。

```bash
rbenv install 3.2.1
```

インストールが完了したら、以下のコマンドをターミナルで実行します。

```bash
rbenv versions
```
これでインストールされたRubyのバージョンを確認できます。

```bash
- system
- 2.6.10
- 2.7.6
- 3.2.1 (set by /Users/username/.rbenv/version)
```

先程インストールしたバージョンのRubyを使用するように設定を変更します。以下のコマンドをターミナルで実行します。

```bash
rbenv global 3.2.1
```

再び以下のコマンドを実行して、設定が反映されたか確認します。

```bash
rbenv versions
```

## Rubyのインストール（local編）
rbenvを使うと、ディレクトリ毎にRubyバージョンを選択できるようになります。使いたいディレクトリ移動してから、Rubyバージョンを設定します。
2.7.7のRubyを利用する場合のコマンドです。
```bash
cd rubytest
rbenv install -l
rbenv install 2.7.7
rbenv local 2.7.7
rbenv versions
```

インストールできたか確認します。rubytestのディレクトリでは、2.7.7のRubyが使われていることが分かります。

```bash
-zsh ~/rubytest % rbenv versions
  system
  2.6.10
  2.7.6
* 2.7.7 (set by /Users/username/rubytest/.ruby-version)
  3.2.1
```

ホームディレクトリのRubyのバージョンを確認してみます。ホームディレクトリでは、3.2.1のRubyが使われていることが分かります。

```bash
-zsh ~/rubytest % cd
-zsh ~ % rbenv versions
  system
  2.6.10
  2.7.6
  2.7.7
* 3.2.1 (set by /Users/username/.rbenv/version)
```

これで環境構築が完了しました。
[備忘録] gitlabで「remote: HTTP Basic: Access denied...」のエラーが出た時の対処方法

こんにちは！！炭酸水ケンタです。
Qiita でずっと記事をかこうと思っていて、ずっと書けなかったのですが、
遂にその時が来たと思い、書いてみました。

gitlab でpush してみたらあれ、、access denied.... なんで？？ってなったことありませんか？？

## エラー文

HTTP basic error ?? basic 認証的なエラー？？
```
remote: HTTP Basic: Access denied. The provided password or token is incorrect or your account has 2FA enabled and you must use a personal access token instead of a password. See https://gitlab.com/help/topics/git/troubleshooting_git#error-on-git-fetch-http-basic-access-denied
fatal: Authentication failed for 'https://gitlab.com/xxxx/xxxx.git/'
```

これはあれですね！2段階認証にした時に出るエラーです！！
2段階認証にしたらどうもgit push が通らないみたいなんです！


## 解消法
少し手間ですが、解消法自体はとても簡単です。

① personal access token を発行
select scope の箇所は

- read_repository
- write_repository

の二つさえあれば、とりあえずは基本的なgit の操作(=git push)とかができると思います。

② git remote url にaccess token を加える
```
git remote set-url origin https://oauth2:<access_token>@gitlab.com/ユーザー名/レポジトリ.git
```
* <>は抜いてください

これでエラーなくpush できると思います！！

## まとめ
git 系のエラーは少し戸惑いましたが、解消が簡単だったので、今回は詰まらずに済みました。エラーの内容も理解するためにこれからもブログを書いて頭の中を整理したいと思います。


## 参考サイト

https://www.serversus.work/topics/mztlclr3h2frzxxeless/

https://docs.gitlab.com/ee/topics/git/troubleshooting_git.html#error-on-git-fetch-http-basic-access-denied
ConoHa VPSでPingがtimeoutしてしまう/SSHで繋がらない際の解決法

構築している環境
-----
VPS:ConoHa VPS 2GB Ver.3
OS:Ubuntu 22.04
SSH (デフォルトのポート番号から変更している）

症状
-----
PINGが通らない
SSHログインが出来ない

解決法
-----
### PING
左のサーバーをクリックし、サーバーリスト内の構築したサーバーのネームタグ をクリックする。

![ConoHa-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/6c1d1e23-c7f8-c832-cc97-c52443b1d7e7.png)

ネットワーク情報をクリックし、セキュリティーグループ "default"右の鉛筆マークをクリックする

![ConoHa-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/f0dcf1db-f6ba-0e31-5cc6-4fc905b02fc7.png)

"IPv4v6-ICMP"を選択し、保存をクリックする。

![ConoHa-2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/3fc4fcc4-880a-ea0c-54e7-e015d6a33c97.png)

### SSH
左のセキュリティ→セキュリティーグループをクリックする。
"IPv4v6-SSH"をクリックする

![ConoHa-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/2287895b-8da2-1acc-c7c4-e72c5c17b749.png)

書いている内容をメモなりスクショなりする。

![ConoHa-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/2132b6ce-6b4e-3c6c-b6d3-3ff9dfbc59ab.png)

右上の ＋セキュリティーグループ をクリックする

![ConoHa-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/625fe7c1-cab4-a712-a4f6-cd4b844fbd6c.png)

適切な名前を付けて保存する

![ConoHa-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/6dda27b1-d282-d8c8-c73e-dc26c9d77a81.png)

メモった内容を元に、設定を追加する
![ConoHa-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/f2b45dcd-350a-dc92-ca84-b8292c7bcd9d.png)
![ConoHa-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/510bc043-1ba1-a2e6-fae9-d9c3520db6c1.png)

PINGを使えるようにしたのと同様に、セキュリティーグループに今作った設定を追加する。
![ConoHa-9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3668303/b513fbbc-e7e3-1315-ec3a-63341b178168.png)

UFWが有効ならコンソールから、
sudo ufw allow （開放したポート番号）

理由
-----
セキュリティーグループがdefaultだけでは閉じている状態で、
必要なポートを開放しないと通信出来ない仕様でした。

参考
-----
https://qiita.com/fullmated/items/3deb4a1b7b719f52e5f5
https://qiita.com/mendoitarou_/items/28b95a1364b1ca16439c

記事を書いた理由
-----
ConoHaの構成が変わったのか、上記のリンクの通りでは出来なかったのと、ググってみても解決法が一切無かったので。
初っ端で数時間ハマってしまいました。

ググった結果出てきたものは、Ver.2のもので、Ver.3は何もなかったので。
WebSphere Application Server プロファイルの削除方法

**WebSphere Application Server プロファイルの削除方法**

プロファイル管理ツールにて作成したプロファイルを削除したい。
![スクリーンショット 2024-01-04 200439.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1162001/8c5560f1-8e54-fc3e-ef20-f5d10770e79d.png)
　　　↑
　ここを削除。


### 実施方法
※プロファイルを削除する前に、アプリケーション・サーバーを停止させて、 確実にアプリケーション・サーバーを削除できるようにして下さい。
※プロファイル管理ツールにてGUI操作での削除はできません。

---
#### ⓵ manageprofiles コマンドを実行してプロファイルを削除します。
　※以下のコマンドの{プロファイル名} を実際のプロファイル名に置き換えてください。
```
【Linuxの場合】
WASインストールディレクトリ/bin/manageprofiles.sh -delete -profileName {プロファイル名}

例) WASインストールディレクトリ/bin/manageprofiles.sh -delete -profileName AppSrv01

【Windowsの場合】
WASインストールディレクトリ¥bin¥manageprofiles.bat -delete -profileName {プロファイル名}
```
---
#### ⓶ 以下のコマンドを実行して、レジストリー内の削除対象プロファイルへの参照を除去します。
```
[Linuxの場合] 
WASインストールディレクトリ/bin/manageprofiles.sh -validateAndUpdateRegistry

[Windowsの場合]
WASインストールディレクトリ¥bin¥manageprofiles.bat -validateAndUpdateRegistry
```
---
#### ⓷ プロファイル ディレクトリ ツリーを (前のアクションで削除されていなければ) 削除します。
---

### 参考サイト

https://www.ibm.com/docs/ja/rational-clearcase/8.0.1?topic=washsr-quick-reference-managing-profiles-websphere-application-server-http-server
辺境のHaskell道場で、賢者におもっくそ鍛えられた件

# はじめに：10時間の死闘の末に
Codewarsというサイト（Dojo, Kataなど道場インスピレーション）の、
- 8kyu（8級。最も簡単）
- clever（天才的な回答）
で学んだ話です。

経緯は[前の記事](https://qiita.com/kohki_takatama/items/978c584397e6a57a2046)にあります。
簡単に言うと、このコードが機能する理由を理解したい。

# ※注意!! [新しい記事](https://qiita.com/kohki_takatama/items/9e645732f1eab18a591f)のほうがきれいに書かれてます！！


```hs
module CheckFactor where

checkForFactor :: Int -> Int -> Bool
checkForFactor = (.) (== 0) . mod
```
因数かどうか調べる簡単なコードです。
# 問題
```hs
checkForFactor :: Int -> Int -> Bool
checkForFactor = (.) (== 0) . mod

-- 見やすい形に変換。hhは2引数関数であるの意。
f :: Int -> Int -> Bool
f = (.) g . hh -- 理解したい関数
```


# 解決方法
まず、最も簡単な答えを示しましょう。
```hs
f x y = g $ hh x y
```
これですね。異論は認めますが、おおよそこの形になるでしょう。
hh x y を先に計算し、gに入力します。
これを変換し、理解したい関数`f = (.) g . hh`に近づけていきましょう。
### 関数合成の定義
まずは、関数合成の定義を学びましょう。
```hs
-- 関数合成の定義
(.) :: (b -> c) -> (a -> b) -> a -> c
-- 使い方の例
(.) funcA funcB = funcC
funcA . funcB = funcC
```
`(.)` = 関数合成は、
- "aに対しbを返す関数"と
- "bに対しcを返す関数"を合成し
- "aに対しcを返す関数"を出力する。
もしくは、さらに値aを受け取り、値cを出力する。

この辺りは[# Haskellの関数合成、または (.) 関数](https://qiita.com/etoilevi/items/abd6c0063eae11a43237)の「関数合成」の章までを読むのがわかりやすいと思います。

### 関数合成にしてみる
```hs
f x y = g $ hh x y -- 解１

f x y = (.) g (hh x) y -- 解２
f x y = (g . (hh x)) y -- 解３
```
解1は、先ほども出た最も簡単な答えですね。hh x y を先に計算し、gに入力します。

解2は、関数合成にしてみた形です。
`hh x`となっているのは、1引数関数にしないと、関数合成の定義上、関数合成ができないため。
なぜこのやり方で1引数関数になるのか（1引数関数が出力されるのか）は[複数の引数の渡し方（カリー化、部分適用について）](https://zenn.dev/masahiro_toba/articles/cea68bbe2cc556)で学びました。

解3は、`.`を中置関数として使ってみた形ですね。上の式と等価です。

### 引数を減らしていく
```hs
f x= g . h x
f = g . h
```
この2つの式は等価です。

では、先ほどの式をよく見てみましょう。
```hs
f x y = (.) g (hh x) y
f x = (.) g (hh x)

f x y = (g . (hh x)) y
f x = g . (hh x)
```
それぞれ、下の形に変換できます。
これで引数を1つ減らせましたね。

### ここから鬼ハードモード
# ※注意!! [新しい記事](https://qiita.com/kohki_takatama/items/9e645732f1eab18a591f)のほうがきれいに書かれてます！！
この調子で引数`x`も減らせたらいいんですが……ここからが鬼門。

まずは、改めて定義をしましょう。
アルファベットだとややこしいのでひらがなで。
```hs
(== 0) :: Int -> Bool
g :: Int -> Bool

mod :: Int -> Int -> Int
hh :: Int -> Int -> Int

checkForFactor :: Int -> Int -> Bool
f :: Int -> Int -> Bool

checkForFactor = (.) (== 0) . mod
f = (.) g . hh
```

次に、`(.)g`について考えてみます。関数合成は、本来2つの関数を必要としますが…
```hs
-- 関数合成の定義より
(.) = (b -> c) -> (a -> b) -> a -> c
-- (.) g は、gの定義より
(b -> c) = (Int -> Bool)
-- よって
b = Int
c = Bool
-- よって
(.) g = (Int -> Bool) -> (a -> Int) -> a -> Bool
```
よって、`a -> Int`の関数と組み合わさる、`a -> Bool`という関数に変換できました！
これが**部分適用**のはず。

次に、`(.) g . hh`について考えてみます。
```hs
-- 関数合成の定義より
. = (b -> c) -> (a -> b) -> a -> c
-- (.) g と、hhの定義より
(.) g . hh = (Int -> Bool) -> ((Int -> Int) -> Int) -> (Int -> Int) -> Bool
```
これで、Int を2つ引数として取る、Boolを返す関数ができましたね！

……だいぶ雑だったので少しだけ細くすると、
`Int -> Int -> Int`のカッコ（関数とみなした）部分が`((Int -> Int) -> Int)`なのは、
 `(.) g`の時に、「`a -> Int`の関数と組み合わさる、`a -> Bool`という関数」という条件だったためです。`a`が`(Int -> Int)`だとしたわけですね。
それでいいの！？と思う部分もありましたが、動くのでそういうことでしょう。
# 終わりに
身も心も疲れ果てながら記事を書き、どうしても雑になってしまったなあと思いますが、これが限界ですはい。
ご質問あればコメントにお願いします。気力十分な私が対応するでしょう。1週間くらいは。

とはいえ、理解できた（と思っている）のは非常に満足！Codewars 8kyuでここまで学べるとは。

しつこいようですが[新しい記事](https://qiita.com/kohki_takatama/items/9e645732f1eab18a591f)あります。この記事より良いものです。ぜひ。
VisualStudioCodeとGitHubの連携時にバージョンアップを求められた

利用中のPCにてバージョン更新など対応できておらず、久しぶりにGitに関するコマンドを実行したら、以下画面がブラウザへ表示された。
`Please upgrade VS Code
We've made some updates to our authentication process for VS Code and GitHub. Please upgrade to the latest release of VS Code (1.66+) or download from here.`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3666175/b4dddaef-8224-875f-d9a4-161e1218f381.png)

# 対応内容
VisualStudioCodeの以下メニューにて、`更新の確認...`をすると正常に実行できるようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3666175/fb122e51-3e0a-7eae-e1b8-cf8d1a9a43a5.png)

# 補足
都度のアップデートは不要と思うが、適度な更新は必要ということを感じた。
対象のバージョンの更新内容を確認すると、以下GitHubの認証が変化した旨の記事があるので、おそらくそちらの為にバージョンアップが必要だったと思われる。
https://code.visualstudio.com/updates/v1_66#_smoother-authentication-experiences

今まで英語のマニュアルの際にDeepLにて翻訳をしていたけど、ChatGPTにて翻訳をした際も適切な翻訳をされるのですごい楽。
Route:resourceの正しい理解

### 気になったこと
・Route:resourceの仕組み

(Routes/XXX.php配下）

    Route::resource('xxx', XXXController::class)
        ->except(['show']);
        
### 理解したこと
・create/upudateなどのアクションのRouteを1行で纏められる
   (参照項目：リソースコントローラにより処理されるアクション)
・exceptで不要なルーティングは割愛出来る

### メリット
・アクションごとにルーティング記載が不要で手間が省ける
### 感想
・これだけでもコード数が軽減されすごく楽になる

### 次回アクション
~~・理解が正しいかの確認~~

### 参考(公式)サイト
https://readouble.com/laravel/8.x/ja/controllers.html
ショートカット集（エクセル編）

## 初めに
普段はグーグルスプレッドシートですが、
エクセルで詳細設計書を作ることがあったので、
効率アップのために使ったショートカットを備忘録として残します。

## 環境
| 開発環境   |バージョン    |
|-----------|------------|
| __Excel for Mac__ | 16.80 |

## ショートカットキー一覧

__行列系__
| コマンド   |効果    |
|-----------|------------|
| __shift__ __+__ __control__ __「+」__ | 新しい行を挿入する |
| __control__ __「-」__ | 選択した行を削除する |

__切り替え系__
| コマンド   |効果    |
|-----------|------------|
| __option__ __+__ __「 → 」__ | シートの切り替え（右）|
| __option__ __+__ __「 ← 」__ | シートの切り替え（左）|

__テキスト系__
| コマンド   |効果    |
|-----------|------------|
| __control__ __+__ __「 5 」__ | テキストに横線を引く |

## 最後に
最後まで閲覧いただきありがとうございました。
ご意見、ご指摘ありましたら、コメントお願いいたします。
この時代にVisual Basicの勉強をする：Visual Studio Express 2017のインストール

# はじめに

個人的な事情ですが、この令和の時代にVisual Basicをお勉強する必要が出てきました。
まずは開発環境を作ってみるので纏めておこうと思います。

初めてQiita書くので色々至らぬ点があると思いますがご了承ください。

環境
OS：Windows 11 Pro
CPU：AMD Ryzen 7 5700U
メモリ：16GB

とまぁ書き出したのですが、既に結論をシンプルに書いていらっしゃる記事がありました。
早く2017Expressのインストール方法を知りたい方はこちらへどうぞ。

https://qiita.com/toras9000/items/42b5a2c093a0dba1d8b7


# Visual Studio Express 2017 のインストールについて
普通は最新のVisual StudioからCommunity版をインストールすれば良いです。

https://visualstudio.microsoft.com/ja/vs/

ただ私の場合は古い環境が欲しかったので Visual Studio Express 2017 for Windows Desktop がインストールできないか調べました。
古いバージョンのダウンロードページに Express 2017 は無いようです。（Express 2013 for Windows Desktop はありました）[^1]
[^1]: 旧バージョンのVisual Studioダウンロードページ
https://visualstudio.microsoft.com/ja/vs/older-downloads/


調べているとどうやら最新のWEBインストーラをコマンドからパラメータを渡して起動すれば、インストールするバージョンなどを指定できるらしいです。[^2]

[^2]: コマンドライン バラメーターを使用して Visual Studio をインストールする
https://learn.microsoft.com/ja-jp/visualstudio/install/use-command-line-parameters-to-install-visual-studio?view=vs-2022

--channelUriはこれ↓ [^3]
[^3]: インストールに使用するコマンドラインパラメータの例
https://learn.microsoft.com/ja-jp/visualstudio/install/command-line-parameter-examples?view=vs-2022#using---channeluri

|チャンネル名|--channelUri|--channelId|
|---|---|---|
|Visual Studio 2017 リリース チャンネル|https://aka.ms/vs/15/release/channel|VisualStudio.15.Release|

--productIdは多分これ↓[^4]
[^4]: Visual Studio workload compornentIDs （英語）
https://learn.microsoft.com/ja-jp/previous-versions/visualstudio/visual-studio-2017/install/workload-and-component-ids?view=vs-2017

|Edition|ID|Description|
|---|---|---|
|Visual Studio Desktop Express 2017|Microsoft.VisualStudio.Product.WDExpress|Build Native and Managed applications like WPF, WinForms, and Win32 with syntax-aware code editing, source code control, and work item management. Includes support for C#, Visual Basic, and Visual C++.|

ということから次のコマンドでインストールできます。
インストーラはダウンロードしたディレクトリを指定してください。
以下のコマンドはEdgeブラウザのデフォルトダウンロードフォルダにインストーラがある前提です。

```
%USERPROFILE%\Downloads\VisualStudioSetup.exe --channelUri https://aka.ms/vs/15/release/channel --productId Microsoft.VisualStudio.Product.WDExpress
```

インストールが終われば、Microsoftのアカウントでサインインすれば使用できます。
ScalaStewardでMRにラベルを付けるときは`--add-labels`フラグを追加する

この結論に達するまで、ScalaStewardのソースコード調べたりしたので、また調べなくて済むように。

# MRにラベルを付けたい

GitLabではマージリクエスト(MR)にラベルをつけることで、MRを種類分けすることができます。ScalaStewardによって作られたMRにラベルをつけることで、依存ライブラリアップデートのMRのみを一覧化することができます。便利ですね。

# ラベルを付けるときは`--add-labels`フラグを追加する

ScalaStewardは`--add-labels`というフラグがあると、MRに対してラベルを付けることができます。

```diff_yaml:.gitlab-ci.yaml
  script:
    - mkdir --parents "$CI_PROJECT_DIR/.sbt" "$CI_PROJECT_DIR/.ivy2"
    - ln -sfT "$CI_PROJECT_DIR/.sbt"  "$HOME/.sbt"
    - ln -sfT "$CI_PROJECT_DIR/.ivy2" "$HOME/.ivy2"
    - chmod +x "$CI_PROJECT_DIR/askpass.sh"
    - >
      /opt/docker/bin/scala-steward \
        --workspace "$CI_PROJECT_DIR/workspace" \
        --process-timeout "30min" \
        --do-not-fork \
+       --add-labels \
        --repos-file "$CI_PROJECT_DIR/repos.md" \
        --repo-config "$CI_PROJECT_DIR/default.scala-steward.conf" \
        --git-author-email "${EMAIL}" \
        --forge-type "gitlab" \
        --forge-api-host "${CI_API_V4_URL}" \
        --forge-login "${LOGIN}" \
        --git-ask-pass "$CI_PROJECT_DIR/askpass.sh"
```

実際のラベルは`.scala-steward.conf`に設定します。

```javascript:.scala-steward.conf
pullRequests.customLabels=["LibraryUpdate"]
```

これでScalaStewardが作るMRに`LibraryUpdate`というラベルが付きます。やったね！

## 不要な標準ラベルを付けない

`--add-labels`を有効にすると、ScalaStewardは、`library-update`や`early-semver-major`など、ScalaSteward独自のラベルをつけようとします。このようなラベルが不要な場合は`pullRequests.includeMatchedLabels`で無視設定を追加します。

```diff_javascript:.scala-steward.conf
pullRequests.includeMatchedLabels="0^"
pullRequests.customLabels=["LibraryUpdate"]
```

`0^`というのは、どんな文字列にもマッチしない正規表現です。詳細はこちら。

https://qiita.com/HMMNRST/items/4b10dfb621a469034257
【SwiftUI】macOSのアラートに表示されるアプリアイコンの箇所を好きな画像に変更する（macOS13）

# はじめに
macOS13からアラート(ダイアログ)のアイコン部分が変更できるようになりました。

# こんな感じ
|通常|今回の実装後|
|-|-|
|![スクリーンショット 2024-01-04 20.23.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/e01a528e-e126-c11e-60d6-a6c1ca4cfcbf.png)|![スクリーンショット 2024-01-04 20.23.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/a564aeb4-dc3b-ea8d-5ee1-c6f446ecf1b8.png)|

# 実装
```diff_swift
import SwiftUI

struct ContentView: View {
    @State private var isShowingDialog = false
    
    var body: some View {
        Button("Dialog") {
            isShowingDialog = true
        }
        .confirmationDialog("ダイアログ", isPresented: $isShowingDialog) {
            Button("Erase", role: .destructive) {
                // Handle item deletion.
            }
            Button("Cancel", role: .cancel) {
                isShowingDialog = false
            }
        }
+       .dialogIcon(Image(.icon))
    }
}
```

:::note info
アラートでも機能します。
```swift
.alert("アラート", isPresented: $isShowingAlert) {
    Button("Erase", role: .destructive) {
        // Handle item deletion.
    }
    Button("Cancel", role: .cancel) {
        isShowingDialog = false
    }
}
.dialogIcon(Image(.icon))
```
:::

# おわり
これ今までできなかったんですね

# 公式ドキュメント
https://developer.apple.com/documentation/SwiftUI/View/dialogIcon(_:)#parameters