OmniAICreator/Qiita-1.07M huggingface dataset:
Javaの基本　数値　文字列の連結

皆さんこんにちは。
正月でも日々の学習は忘れてはいけません。めでたい気持ちは忘れずに、
めでたい気持ちで、学習していきます。
では、
javaの基本的、てか、超超超初歩の動かし方から

```java
System.out.println()
```
()内に、文字を入力すれば、その文字がコンソールに表示される。
```java:Main.java
System.out.println("Hello world");
```
```text:java:コンソール
Hello world
```
と表示される。

```
System.out.println()
　　　　　　　　　　　　　　　　↑　↑　↑　↑　↑
()内の文字列を出力しなさい！
```
と言う命令をしています。

あと()の後、文末にセミコロン；を忘れずに！！
ちなみに**Hello world**は文字列なのでダブルクォーテーション「""」も忘れずに！！

次は、数値とか計算とか文字列との連結とかをなんとなくやっていきます。

```java
System.out.println(3);
System.out.println(3 + 2);
System.out.println(5 - 3);
System.out.println("2" + "3");
System.out.println("Singekino" + "Ojisan");
```
これの出力は
```text:java:コンソール
3
5
2
23
SingekinoOjisan
```


これは数値を+ -で計算して表示しているのと
"2" + "3"の数値をダブルクォーテーションで囲い2つの文字列を連結し、"２３"と表示しています。
文字列は、文字列同士を連結させて表示させると言うことですね。
補足ですが、
```
+ - * / %
```
左から、足し算、引き算、掛け算、割り算、
最後の％は割り算の余りを計算することができます。

```java:例
System.out.println(8 % 5);
```
この場合は、
```
8割る５は1 余りは３
```
出力は
```text:java:コンソール
3
```
となるわけです。

次回は変数について書いていこうと思います。
どれくらいの人が見たかわからないですが、
時間ができたら、できるだけ、書いていこうと思います。
【Android】JetpackCompose  の基本【kotlin】

# はじめに
今回はJetpackComposeの基本的なことを記事にします
自分の中の解釈で書いているので間違っている点もあるかとは思いますが、使いながら慣れていき
間違っていることに気が付いたら直していければな　と思います

# 基本
```
@Composable
```
上のアノテーションが付けられた関数がコンポーズ可能な関数

```
@Preview
```
コンポーズ可能な関数に上のアノテーションを付けてプロジェクトをビルドすることで
Android Studio内でプレビューを表示することができます

```
@Composable
private fun Hoge(name: String) {
        Surface(color = Color.Green) {}

```
Composeで作られたUIの背景色を変える場合はSurfaceでラップします
Surfaceは色を受け取ることができるので背景色に指定したい色を引数に渡します

SurfaceやTextなどのCompose内の要素は　**modifier**　という省略可能なパラメータにより親レイアウト内での配置、表示、動作を指示できます。
・clickable　クリック可能にする
・padding　周辺にスペースを作る
・size()　幅と高さを指定
などがあります
```
@Composable
private fun Hoge(name: String) {
    Surface(
        color = color = Color.Green,
        modifier = Modifier.padding(vertical = 10.dp, horizontal = 10.dp)
    ) {
```

# 列と行（配置）
Composeではレイアウトの配置方法が３つあります
１つ目は　**Column**です

Columnでラップされた子レイアウトは縦方向に配置されます

２つ目は　**Row**です
Columnの縦に対して　Rowは横方向に子レイアウトを配置します

３つ目は　**Box**です
Boxは子レイアウトを重ねて配置することができます


```
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("A")
        Text("B")
    }
```
上のように定義することで
AとBというテキストを縦方向に配置することができます

fillMaxSize()は　親レイアウト内いっぱいに子レイアウト広げます
縦のみの場合　fillMaxHeight
横のみの場合　fillMaxWidth　を指定することも可能です

# 参考
https://developer.android.com/codelabs/jetpack-compose-basics?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-basics#0

https://developer.android.com/jetpack/compose/layout?hl=ja
【Mermaid】ER図の作成方法

## ファイルの作成

MermaidでER図を描く場合にはerDiagramで始めます。  

````sample.md
```mermaid
erDiagram

```

````

以降の記述は`@startuml`と`@enduml`の間に記述します。  

## エンティティ

エンティティは以下のように記述します。  

````sample.md
```mermaid
erDiagram

  users {
    string name
    string email
    integer age
  }

```

````

```mermaid
erDiagram

  users {
    string name
    string email
    integer age
  }

```

## リレーション

リレーションは以下のように記述します。  

````sample.md
```mermaid
erDiagram

  users ||--o{ articles: ""

  users {
    string name
    string email
    integer age
  }

  articles {
    string title
    text text
  }

```

````

```mermaid
erDiagram

  users ||--|{ articles: ""
  users ||--o{ comments: ""

  users {
    string name
    string email
    integer age
  }

  articles {
    string title
    text text
  }

  comments {
    string title
    text content
  }

```

````sample.md
```mermaid
erDiagram

  e01 ||--|{ e02: "1 対 多(1以上)"
  e01 ||--o{ e03: "1 対 多(0以上)"
  e01 ||--o| e04: "1 対 0か1"

```

````

```mermaid
erDiagram

  e01 ||--|{ e02: "1 対 多(1以上)"
  e01 ||--o{ e03: "1 対 多(0以上)"
  e01 ||--o| e04: "1 対 0か1"

```
Blenderチャレンジ：りんごのうさぎ

3DCGソフトウェアのBlenderを使って、お題のモデルを作成してみましょう。
やり方は一通りではないと思います。あなたは、どんな方法を考えますか？

## 問題

以下のようなオブジェクトを作ってください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/917f5f2f-a43b-bf1f-25d3-c9608bf9e662.png)

[完成物をSketchfabで見る](https://skfb.ly/oCosP)

…
…
…

OK？

---

## 解答例

作成する手順です。macOSのキーを書いています。Windowsの場合は、`Option`を`Alt`に読み替えてください。

- `Shift + A`（追加メニュー）の「メッシュ」の「平面」を選びます。
- 編集モードに入り、`X`（削除）の頂点で全部消します。
- `1`でフロントビューにし、下図のように`Ctrl + 右クリック`で点を追加していきます。最後は2点を選んで`F`でつなげます。だいたいでOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13955/2f72af6b-9e9f-4548-ee78-3a6def419bb6.png)

- オブジェクトモードに戻り、スクリューモディファイアーを追加し、角度を45に、ビューのステップ数を4にし、適用します。
- `RZ-22.5`、`Space`、`RY-90`、`Space`で向きを整えます。
- 右クリックで自動スムーズを適用します。
- 編集モードに入り、`AF`で面を貼ります。ノーマルが反転しているかもしれないので、`Shift + N`で外向きにしましょう。
- 皮部分にナイフで切り込みを入れ、適当に選択し、`Option + E`（押し出し）の法線に沿って面を押し出しします。
- マテリアルを設定します。

以上
Markdown備忘録

# はじめに
OUTPUT目的で、Qiitaで投稿をしたいと思い  
Markdownを学習したのでその結果を備忘録として残してみました。

# 環境
+ VScode
+ Markdown All in One(VScode拡張機能)

## ・見出し
```
## 見出し1
### 見出し3
###### 見出し6
####### 見出し7
```
**-出力結果-**
# 見出し1
### 見出し３
###### 見出し６
####### 見出し7  
※見出しは１〜６までで、7以降はテキストとして処理される 

## ・改行
```
macbook  (半角スーペースを２つ入れる)
apple
```
**-出力結果-**  
macbook  
apple

## ・段落　　
```
りんご(半角スペースなし)
ぶどう(半角スペースなし)
みかん(半角スペースなし)
(空行)
パイナップル
```
**-出力結果-**  
りんご
ぶどう
みかん

パイナップル  
※改行と段落の出力が同じように見えて、統一しても良くね？？と思ったが、  
　**テキストベースで見ると文書の区切りとまとまりを区別しやすい。他にも色々とあるがとりあえず必要**

## ・文字の装飾
```
これは**太字**です。
これは*斜体*です。
これは~~打ち消し~~です。
```
**-出力結果-**  
これは**太字**です。  
これは*斜体*です。  
これは~~打ち消し~~です。  

## ・リンク
```
公式ページはこちらから[Qiita](https://qiita.com/)KvKV
```
**-出力結果-**  
公式ページはこちらから[Qiita](https://qiita.com/) 

## 画像の埋め込み
```
![代替テキスト](URL)
```
**-出力結果-**  
![勉強中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3087340/6098e35e-430f-784a-bdd2-407559760519.png) 

**URLは絶対パス・相対パスどちらでも可能**  
いらすとでお困りのかたはこちらから[いらすとや](https://www.irasutoya.com/)
## ・テーブル
```
|順位|国|勝ち|引き分け|負け|
|---|---|:---|:---:|---:|
|1|日本|2|0|1|
|2|スペイン|2|1|1|
|3|ドイツ|1|1|1|
|4|コスタリカ|1|0|2|
```
|順位|国|勝ち|引き分け|負け|
|---|---|:---|:---:|---:|
|1|日本|2|0|1|
|2|スペイン|2|1|1|
|3|ドイツ|1|1|1|
|4|コスタリカ|1|0|2|

※":"がなくても左揃えで出力される。**ブラボー**

## ・水平線
```
---
***
---NG
```
**-出力結果-**  

---
***
---NG

## ・引用
```
>引用とは
>>［名］(スル)人の言葉や文章を、自分の話や文の中に引いて用いること。「古詩を―する」
>>>こちらを引用[weblio辞書](https://www.weblio.jp/content/%E5%BC%95%E7%94%A8)
```
**-出力結果-**  
>引用とは
>>［名］(スル)人の言葉や文章を、自分の話や文の中に引いて用いること。「古詩を―する」
>>>こちらを引用[weblio辞書](https://www.weblio.jp/content/%E5%BC%95%E7%94%A8)

## ・箇条書きリスト
```
+ リスト１
+ リスト2
  + リスト2_2(+の前にスペースを2つ以上で出力される)
    + リスト2_3(+の前にスペースを2つ以上で出力される)
```
**-出力結果-**
+ リスト１
+ リスト2
  + リスト2_2"(+の前にスペースを2つ以上で出力される)
    + リスト2_3(+の前にスペースを2つ以上で出力される)
## ・番号付きリスト
```
1. 番号付きリスト
1. 番号付きリスト(同じ番号でも出力時は自動で振ってくれる)
    1. 番号付きリスト
    1. 番号付きリスト(同じ番号でも出力時は自動で振ってくれる)
```
**-出力結果-**
1. 番号付きリスト
1. 番号付きリスト(同じ番号でも出力時は自動で振ってくれる)
    1. 番号付きリスト
    1. 番号付きリスト(同じ番号でも出力時は自動で振ってくれる)
## ・インラインコード
```
これは`インラインコード`です。
```
**-出力結果-**  
これは`インラインコード`です。

## ・コードの打ち消し
```
\#### 見出し4はコメントとして処理されます。
```
**-出力結果-**  
\#### 見出し4はコメントとして処理されます。

## ・コードブロック
```
\```
バッククオート３つで囲う
\```
```
**-出力結果-**  
```
バッククオート３つで囲う
```

## ・参考にしたサイト
[Shirokuma_Markdown記法チートシート](https://shirokuma-lab.com/hello-markdown.html)
配列の並び替え(降順) (JavaScript)

JavaScriptで配列を降順に並べる方法です。

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配列の並び替え</title>
</head>
<body>
  <script>
    const array1 = ["kosaka","kageyama","kato"];
    // 配列を辞書順に並べる
    array1.sort();
    // 配列の要素の1番最後から順に並び替える
    array1.reverse();
    const num = array1.length;
    for(let i=0;i<num;i++){
      document.write(`<p>${array1[i]}</p>`);
    }  
  </script>
</body>
</html>
```

JavaScriptでは
配列にsort関数を使って昇順に並べた後、Reverse関数を使って要素の1番最後から1番最初に順番を入れ替えます。

```JavaScript
const array1 = ["kosaka","kageyama","kato"];
    // 配列を辞書順に並べる
    array1.sort();
    // 配列の要素の1番最後から順に並び替える
    array1.reverse();
    const num = array1.length;
    for(let i=0;i<num;i++){
      document.write(`<p>${array1[i]}</p>`);
    }  
```
libmcp2221を使ってみた

まったく同じタイトルで @yamori813 さんが記事を書かれています。

https://qiita.com/yamori813/items/e8fa21a6eddbf5595bfb

すごく助かりました！ ここでは @yamori813 さんの記事を補足するかたちで投稿いたします。

# Win10環境でビルドする

[1] https://github.com/ZakKemble/libmcp2221
[2] https://github.com/signal11/hidapi

結論から書きますと... MinGW w/ PowerShell および WSL2でコンパイルできました。

```PowerShell
PS >mingw32-gcc.exe  ..\..\libmcp2221\hid.c ..\..\libmcp2221\libmcp2221.c main.c  -lsetupapi -o gpio.exe
```

```bash
$ x86_64-w64-mingw32-gcc ../../libmcp2221/hid.c ../../libmcp2221/libmcp2221.c main.c -lsetupapi -o gpio.exe
```

- [1] と [2] を適当な場所に展開します。
- [1] の `example/gpio` に移動します。
- `../../libmcp2221/` に， [2]のwindowフォルダーにある`hid.c`と，[2]のhidapiフォルダーにある`hidapi.h`をコピーします。
- MinGWを用意してPATHを通します。WSL2では `sudo apt install mingw-w64` で導入しました。

# 補足 はまったところ

[1] で用意されたMakefileではコンパイルできませんでした。「未定義だよ！」的なエラーが出ます。

よくよく調べると，MinGWのリンク時に出ているようなのです。[2] は MinGW でビルド成功しましたので，そのMakefileを参考に，ソースファイルの指定，ライブラリーの指定を[2]にならって修正したところ，[1]のコンパイルに成功しました。

休日のほぼ2日間費やしました... いやー，Cのコンパイルの基本がわかっていないようです... 勉強になりました（前向き）

Makefileを使う場合は，以下のような感じになりました。

```diff
5c5
< 	main.c
---
> 	../../libmcp2221/hid.c ../../libmcp2221/libmcp2221.c main.c # 追加
21c21
< 	-lmcp2221
---
> 	-lsetupapi # 変更
23c23,26
< EXECUTABLE=$(PROJECT)
---
> EXECUTABLE=$(PROJECT).exe # 変更
> 
> #CC=x86_64-w64-mingw32-gcc # for WSL
> CC=mingw32-gcc # for Win
25d27
< CC=gcc
38c40,41
< 	rm -rf *.o $(EXECUTABLE)
---
> 	del *.o ..\..\libmcp2221\*.o $(EXECUTABLE) # win
> 	#rm -rf *.o ..\..\libmcp2221\*.o $(EXECUTABLE) # WSL
```

実行例

```PowerShell
PS >mingw32-make.exe -f .\Makefile.mingw-win
```

# Mac Big Sureの場合

@yamori813 の記事のとおり，ビルドできました。

```bash
$ pwd
/Users/numeru55/Documents/libmcp2221-master/examples/gpio
$ cc -o main ../../libmcp2221/hid.c ../../libmcp2221/libmcp2221.c main.c -framework IOKit -framework CoreFoundation
$ ls
Makefile        libmcp2221.dll  main.c
gpio.exe        main*           main.o
$
```



# 参考

以下のサンプルは，[2]で展開したディレクトリーに直接ソースを置いて，`Makefile.mingw`を少し手直ししてコンパイルできました。若干コンパイルエラー出ましたが，私が理解できる範囲で修正して乗り越えました。(`uint8_t` -> `unsigned char`等）

https://blueeyes.sakura.ne.jp/2021/04/04/3956/

このソースをデータシートと比較しながら読むことで，とてもよく理解ができました。これをもとに一つ一つ再構築していくのもいいですが，せっかくなので [1] を利用する方法を模索してみました。
配列の並び替え（昇順)(JavaScript)

JavaScriptで配列の要素を昇順に並び替える方法です

```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配列の並び替え</title>
</head>
<body>
  <script>
    const array1 = ["kosaka","kageyama","kato"];
    // 配列を辞書順に並べる
    array1.sort();
    const num = array1.length;
    for(let i=0;i<num;i++){
      document.write(`<p>${array1[i]}</p>`);
    }  
  </script>
</body>
</html>
```
sort関数を使います

```JavaScript
const array1 = ["kosaka","kageyama","kato"];
    // 配列を辞書順に並べる
    array1.sort();
    const num = array1.length;
    for(let i=0;i<num;i++){
      document.write(`<p>${array1[i]}</p>`);
    }  
```
ruby 練習問題47　（アウトプット用）

ある映画のハッシュを定義し、格納されている「title」(タイトル）・「genre」(ジャンル)・「year」(公開年)の三つの要素の中から一つを取り出すプログラムを作成する問題。
**定義する変数**
①movie = {"title" => "ハリーポッター", "genre" => "ファンタジー", "year" => "2001年"}

②ユーザーが入力するキーを、getsメソッドを利用し定義しましょう

以下、模範解答
```ruby
def movie_info(movie, data)
  puts movie[data]
end

movie = {"title" => "ハリーポッター", "genre" => "ファンタジー", "year" => "2001年"}

puts "以下から一つを選んで入力してください。
  ・title
  ・genre
  ・year"

info = gets.chomp
movie_info(movie, info)
```
以下、解説
今回はハッシュを引数としてメソッドに渡す練習をしました。
前提として、ハッシュ名[キー名]と記述することで、そのキーに対応するバリューを取り出す事が出来ます。
例えばキーである「title」を指定した場合、対応するバリューの「ハリーポッター」が取り出されます。
シェルをzshに変更する

GMKtecから販売されているNucbox5にslackware15をインストールしました。
デフォルトではbashなので、zshに変更しました。

1. ターミナルから"chsh"コマンドを実行します。
1. パスワードを聞かれるのでパスワードを入力します。
1. 新しいシェルを聞かれるので"/bin/zsh"と入力します。

ログインし直すと、bashのときのプロンプトは「bash-5.1$」だったのが、
zshでは「ホスト名%」になります。
docker-composeでMySQL環境を導入する

# 概要
よくdocker-composeでmysqlを組み込むことがあるのでそれの覚書

# 設定ファイル
db_home下に
・DB用データ格納場所
・設定ファイルがある場合はconf.dフォルダ下に格納
・初期化スクリプトがある場合はsetup-ddlフォルダ下に格納
すればOK
```docker-compose.yml
version: "3"
services:
  db:
    container_name: mysql
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: database
      MYSQL_USER: user
      MYSQL_PASSWORD: password
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
    - ./db_home/data:/var/lib/mysql
    - ./db_home/conf.d:/etc/mysql/conf.d
    - ./db_home/setup-ddl:/docker-entrypoint-initdb.d
    ports:
    - 3306:3306
```
Windows で sshfs で多段接続先をマウントして Explorer で表示したいメモ

## 背景

リモートの機械学習サーバ(ssh 多段接続)の結果データ(e.g. 画像)を Windows でドライブマウントして Explorer とかで直接見たい...

rclone や ssfs-win(gui)があります.

https://github.com/winfsp/sshfs-win

中身的には winsfp を使っています.
ちょっとリリースが古いですが, sshfs-win の GUI が便利でしょうか.

sshfs 自体開発終了したようなので, 

https://developers.gmo.jp/18603/

sshfs-win ももうあんまり開発ないのかしらん(ほそぼそ commit はあるようであるが)

## 多段接続

ただ, winfsp は多段接続している場合はうまくいきません.

`~/.ssh/config` の設定は直接は見てくれません. :cry:

https://github.com/winfsp/sshfs-win/issues/93

別途ポートフォワーディングしておくか, ゴニョゴニョ接続の設定がんばります!

## Port forwarding + SikiKali(sshfs-win GUI)

Windows native でポートフォワードしておき,

```
> ssh -L 2022:localhost:22 syoyo@remotehost
```

SikiKali で以下のように設定すればいけます!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36275/e30915e3-ba4b-180e-70f9-291e553d5c0b.png)

- Port number
- IdentityFile 指定(`~/.ssh/config` を見てくれないため)
- Volume Does not Use A Password(公開鍵認証を使う)

## WSL2 でマウント?

パスがちょっとめんどいですが, wsl で sshfs する手もあります.

https://ngyuki.hatenablog.com/entry/2020/08/30/143734

ただ, 私の環境 Windows 11 では WSL 内からは見えても Explorer で開くと空っぽでした...
(ssh key が Windows native と wsl で違うからとか..?)
html css react 商品情報コンポーネントのレイアウト部を作成　結論：css flexboxを使えば楽

# 概要
ECショップの商品情報の一部を実装します。下図みたいな奴ですね。（静岡県で有名な杏林堂って店のネットスーパの画像なんですけど）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/ddd99d50-2790-250f-9fbb-ab591fa6cd46.png)


今回の内容としては、html と css部分でビジュアル的な部分を実装します。


# 開発環境
IDE:VScode

├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── eslint-config-next@13.0.6
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.6
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

# 実装
cssの記法はvercel/styled-jsxを使っています。

``` productContent.tsx
import Image from 'next/image';

interface Props{
	productName:string;
	priceWithoutTax:number;
	priceIncludingTax:number;
	imageURL:string;
}
/**
 * 
 * @param props 商品情報 
 * @returns 商品情報を表示するコンポーネント
 */
export default function ProductContent(props : Props){

	return(
		<>
			<div className = 'ContentPadding ContentLayout'>
				<Image src={props.imageURL}
				width={160}
				height={150}
				alt='logo' />
				<div>{props.productName}</div>
				<div className='PriceWithoutTaxAndQuantityLayout'>
					<div>{`税抜` + props.priceWithoutTax  +`円`}</div>
					<div>数量</div>
					<div><select>
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
						<option value="5">5</option>
						</select>
					</div>
				</div>
				<div className='PriceIncludingTaxAndBuyButtonLayout'>
				<div>{`税込` + props.priceIncludingTax  +`円`}</div>
				<button >購入</button>
				</div>
			</div>

			<style jsx>{`				
				// 大枠の空白部分を担当
				.ContentPadding{
					padding: 20px;
					border:1px solid black;
				}
				// 大枠のレイアウト（縦並び）		
				.ContentLayout{
					position:relative;
					flex:1;
					width:200px;
				}
				// 税抜き価格と数量のレイアウト（横並び-等間隔）
				.PriceWithoutTaxAndQuantityLayout{
					display:flex;
					justify-content:space-between;
				}
				// 税込み価格と購入ボタンのレイアウト（横並び-等間隔）
				.PriceIncludingTaxAndBuyButtonLayout{
					display:flex;
					justify-content:space-between;
				}
			`}</style>	
		</>
	)
}

```


``` productBriefSecond.tsx
import ProductContent from "../../component/productContent"

/**
 * @remarks ProductContentのレイアウトを確認するためのページ
 * @returns 
 * 
 */
export default function ProductBriefSecond(){

	return(
		<>
			<ProductContent productName='サンプル商品' priceWithoutTax={100} priceIncludingTax={108} imageURL='/sampleProduct1.JPG'/>
		</>
	)

}

```
# 完成図
flexboxを使えばCSSの練度が低くてもきれいに実装できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0b898ecf-ff12-8eb6-081c-fea4b2e4d0b9.png)


# githubURL

https://github.com/RYA234/ecshop_front_react/commit/4b91eea29f15412b234fae32e1236d94b3f4433b



# 参考
杏林堂ネットスーパー

https://www.kyorindo-netsuper.jp/

flexboxチートシート

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox5
自作ポートフォリオを作ってみた！

# 経緯
時間があり軽めのストレスが溜まっている時は、
現実逃避として本業以外のプログラミングに手を出しています。ponです。

今回は帰省先でコロナの濃厚接触者になってしまったため、やらないとなぁと思って放っておいていたポートフォリオを３日ほどで作成しました。

# 完成図
gifにしたかったのですが、なぜかうまくいかず、写真を載せています。

![portfolio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/a1cbd010-f6b2-04f7-31f2-1352a944e6df.png)




https://ponponnsan.github.io/portfolio/


# 参考サイト

下記のサイトは、私のような初心者にとってはとても実装しやすく
そしてスキルの部分がわかりやすいところが魅力的なため、
今回のポートフォリオの土台として採択しました。

https://nsuzuki7713.github.io/portfolio/

私は天体観測や星が好きなため、背景を星のように動かしたいと思い、下記のサイトを参考にしました。

https://coco-factory.jp/ugokuweb/move02/5-9/


# こだわりポイント

- 夜から夜明けまでの色をイメージして作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159060/75e70b66-534b-67ff-1cec-7629f5a292a7.png)


- Portfolio以降の文字の色は黄味かがった白を用い、視覚的な負担を減らしています。


# 今後の展開
-  リロードした時にページ全体が白になってしまうのを無くしたい。
-  WORKの部分、今後増えていくので、横に移動するスライド式のコンテンツにしたい。
-  CONTACTの背景色をもう少しマイルドにしたい。
-  Qiitaとの連携をしたい。
「OpenCVではじめよう ディープラーニングによる画像認識」のサンプルコードをC++に移植する

この記事は[OpenCV Advent Calendar 2022](https://qiita.com/advent-calendar/2022/opencv)の12月32日の記事です。  

# 概要

今年は「[OpenCVではじめよう ディープラーニングによる画像認識](https://gihyo.jp/book/2022/978-4-297-12775-6)」（技術評論社）という書籍を出版しました。OpenCVのdnnモジュールを利用してディープラーニングによる画像認識を手軽に試してみようという内容になっています。（宣伝）  

この記事では書籍のサンプルプログラム（7章 dnnモジュール基礎）をC++に移植したので紹介します。  

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34834/cb1c5feb-8e89-ee6e-6e0b-644016d4846f.jpeg" width="350">

# サンプルプログラム

サンプルプログラムは以下で公開しています。  

* [UnaNancyOwen/opencv_dl_book_cpp](https://github.com/UnaNancyOwen/opencv_dl_book_cpp)

「7章 dnnモジュール基礎」で紹介している顔検出、オブジェクト検出、クラス分類、セグメンテーション、テキスト検出・認識、キーポイント検出のサンプルプログラムをC++に移植しています。  
PythonだけでなくC++でもOpenCVのdnnモジュールを使って手軽に画像認識ができることがわかっていただけると思います。

# 動作環境

以下の開発環境で動作を確認しています。  

* OS : Ubuntu 20.04、Windows 10/11
* Compiler : GCC 9.3.0、Visual Studio 2022
* OpenCV : OpenCV 4.7.0

# 学習済みモデル

学習済みモデルは書籍のサポートページからダウンロードできます。  

* [学習済みモデル](https://gihyo.jp/book/2022/978-4-297-12775-6/support)

# まとめ

この記事では書籍「[OpenCVではじめよう ディープラーニングによる画像認識](https://gihyo.jp/book/2022/978-4-297-12775-6)」のサンプルプログラムをC++に移植したので紹介しました。手軽に使えるOpenCVのdnnモジュールを是非使ってみてください。

明日の[OpenCV Advent Calendar 2022](https://qiita.com/advent-calendar/2022/opencv)はhon_no_mushiさんで「OpenCV 4.7.0のリリースノートを読む」です。
Next.js ( React ) でCSS Moduleを使うシンプルなコード例

# コード

- CSS のパスを指定して import する
- ExampleCssModule というようなクラス名をつけて ExampleCssModule.example のような形でプロパティを呼び出す
 
`pages/cssmodule.tsx`

```js
import ExampleCssModule from "../styles/ExampleCssModule.module.css";

export default function ExampleCss() {

  return (
    <div className={ExampleCssModule.example}>
      Text
    </div>
  );
}


```

`styles/ExampleCssModule.module.css`

```
.example{font-size:200pt}
```

# 表示例

<img width="684" alt="image" src="https://user-images.githubusercontent.com/13635059/210168638-d4db1f6e-561e-40cc-bcd8-30b2a8c351a0.png">

# 環境

next@13.1.1

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
[Supabase][Table][ForeignKey]親子関係にあるデータで親データが削除された場合に関連する子データを削除したい

# 前提
- Supabaseを使いたい
- Supabaseのアカウントを作成済
- 親子関係がハッキリしている
- RDBを使いたい
- 既にテーブルを作成しているが親、子のテーブルにデータは存在しない

# やりたい事
- テーブル間の親子関係としてリレーション設定を行い、子が保持する親IDが消された場合に子のレコードも一緒に削除したい


# 期待値


# 手順
1. 親、子テーブル作成
2. 子テーブルにリレーションしたい親のIDを指定
3. 動作確認

### 親、子テーブル作成
**※ RLSはオン/オフは任意で変更してください。今回のリレーションには関係ありません。**

親
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/e8240731-8081-f6e3-b9e9-6123fb2f6fbd.png)


子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/b7003cf1-189d-71cf-8f8f-f2c3e8175fae.png)



### 子テーブルにリレーションしたい親のIDを指定

- 2023-01-01現在は親子関係にあるデータ削除(ON DELETE CASCADE)設定についてはSQLEditorでSQLを叩く必要があります。


#### 実行するクエリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/022ccb89-23bc-d211-5086-23e4be2af437.png)

```sql
ALTER TABLE public.ko
ADD CONSTRAINT oid
FOREIGN KEY (oid)
REFERENCES oya(id)
ON DELETE CASCADE;
```

#### 結果実行結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/dd911480-3cd4-f960-ddc2-bd18675e3c2b.png)



#### 上記のようなクエリ簡単作成サイト(外人さんTHUNKS)
https://index.garden/a/supabase-cascade/#supabase-cascade

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/9ecebca2-685e-9aad-807d-fda176471f0a.png)


# 参考情報

同様の事を行いたいとsupabaseのエンジニア様が回答されている神記事
https://stackoverflow.com/questions/69251891/delete-associated-records-in-supabase

回答されているエンジニアの方(タイラー様)
https://twitter.com/dshukertjrjp

# 関連情報
https://teratail.com/questions/46254

# 関連キーワード
ON DELETE, CASCADE, PostgreSql, Query, リレーション, 親子関係データ, 削除
HTTPヘッダーのContent-Typeについて

HTTPはブラウザとサーバーでやり取りする通信のルール(プロトコルのことを指す)

ヘッダはHTTPでデータ（郵送物）を送る際の説明書きのようなもの。「これはHTTPのデータですよ。」とサーバ側に説明しているイメージです。

またHTTPのリクエストをする。サーバ側がレスポンスを返す用語で

HTTPリクエスト
HTTPリクエストヘッダ
HTTPレスポンス
HTTPレスポンスヘッダ

それぞれにヘッダがあると覚えておこう。

またこのリクエストする中身のことをリクエストボディと呼ぶ。リクエストボディ、レスポンスボディなどがある。

参照リンク


https://wa3.i-3-i.info/word16648.html

Content-Typeは情報を送る際のメディアタイプを指定する役割がある。

インターネット上で文書や画像、コードなど情報の種別を指定しないとやりとりができないのでContent-Typeを指定する必要がある。

適切なContent-Typeを指定しないとリクエストしたWebサービスには読み込まれるがメールや通知に認識されないなどのエラーが起きる。JSONでは基本的にContent-Typeを宣言する必要がある。

参照リンク


https://tech.stmn.co.jp/entry/2021/03/15/183722

https://qiita.com/satoru_pripara/items/89fff277db5212ec37e1
【初心者】レイヤードアーキテクチャって？

## はじめに
DDD（ドメイン駆動開発）を学ぶにあたって避けては通れないレイヤードアーキティクチャの概略を簡単にまとめました。※初めてアーキテクチャを学ぶ初心者です。
## 3層アーキテクチャ（一般的なアーキテクチャ）
![三層アーキテクチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/d6177079-5928-d685-1248-83b4f829b980.png)
- プレゼンテーション層 = クライアントとの入出力をする層
- ビジネスロジック層 = ビジネスロジックの表現をする層
- データアクセス層 = データベースとの入出力をする層

### 問題点
ビジネスロジック層は、ロジックが複雑になりがちなため、設計がうまくできずにメンテナンス性が悪くなりやすい。
3層アーキテクチャの問題点を緩和するため、レイヤードアーキテクチャを採用すると、下記のようなレイヤーになる。
## レイヤードアーキテクチャ
![レイヤードアーキテクチャ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/af82bd7b-a856-33a9-975d-7638ac73f2fa.png)
- UI層 = クライアントとの入出力をする層。Webフレームワークではコントローラに当たる部分。
- Application層  = ユースケースの実現をする層。
- Domain層 = ルールや制約などのドメイン知識の実現をする層。他の層にドメイン知識を流出しないようにする。
- Infrastructure層 = データベースとの出力をする層。ドメインの永続化を行うモジュールなど。

★ポイント：依存性の方向を意識して、各レイヤーに責務を分離する。
これにより肥大化していたビジネスロジック層が分離し、各層のロジックの凝集度があがることで、メンテナンス性が向上する。

### メリット
- 影響箇所が明確。
ある層を変更した場合、影響を受けるのはその上の層のみなので
対応しなければならない箇所がわかりやすい。=>つまり、変化に強い。
- ドメイン層だけを見れば、データの整合性ルールがわかる。

### デメリット
- チーム開発の場合は共通認識を作ることが大変。
- 通常よりもコストをかけて仕組みを作るので（コード量なども多くなる）、変化が少ない（メリットがあまり得られない）場合には不向き。


## おわりに
DDDは特定の技術に依存していないため自由にアーキテクチャを選択することが可能。
ドメイン駆動設計と同時に語られることが多いアーキテクチャとして、レイヤードアーキテクチャ、ヘキサゴナルアーキテクチャ、クリーンアーキテクチャなどがある。
useState変更前の値を保持する

## やり方
useRefを使用して、変更前のnameを保持する
```react
import React, {
  useState,
  useEffect,
  useRef
} from 'react';

export default function App() {
  const [name, setName] = useState('');
  const prevName = useRef('');

  useEffect(() => {
    prevName.current = name;
  }, [name]);

  return (
    <>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <div>
        My name is {name} and it used to be{' '}
        {prevName.current}
      </div>
    </>
  );
}

```
参考ビデオ:https://youtu.be/t2ypzz6gJm0
Next.js (React) で何故か autoFocus が効かない 

# 問題

`<input type="text" autoFocus={true} />` が何故か動作しない

# 解決

useRef やら useEffect やらを使う例が見つかった

`pages/example.tsx`


```js
import type { AppProps } from 'next/app'
import React, { useEffect, useRef, useState } from 'react';

export default function AutoFocus({ Component, pageProps }: AppProps) {
  const inputElement = useRef(null);

  useEffect(() => {
    if (inputElement.current) {
      inputElement.current.focus();
    }
  }, []);

  return (
    <div>
        <input type="text" ref={inputElement} />
    </div>
  );
}

```


# 結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/f0fc10fc-fe2d-0518-b028-57b8de6cc549.png)
![Uploading image.png…]()

# 参考

https://blog.maisie.ink/react-ref-autofocus/


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
RESTとは何か



# RESTとは

RESTとは、Webのアーキテクチャスタイルです。

アーキテクチャスタイル（アーキテクチャパターン）とは、複数のアーキテクチャに共通する様式のことです。

「アーキテクチャ」というのは「構造」を表す用語です。

Webの構造様式がRESTということになります。

Webとは何かに関しては以下を参照してください。

https://qiita.com/myu-kata/items/0c753290aad666ff524c


# RESTの中身

ネットワークシステムにおいて最も有名なアーキテクチャスタイルは「クライアント/サーバ」です。

RESTは、クライアント/サーバにいくつかのアーキテクチャスタイルを追加して（制約を加えて）いったものです。

結論をいうと、RESTとは、以下の６つを組み合わせたアーキテクチャスタイルということになります。

```
クライアント/サーバー
ステートレスサーバ
キャッシュ
統一インターフェース
階層化システム
コードオンデマンド
```

### クライアント/サーバー
webの場合、HTTPというプロトコルでクライアント（ブラウザ）とサーバ（ウェブサーバ）が通信するスタイルを採っています。これによってユーザインターフェース（ユーザが操作する画面）と処理（バックエンド）を分離することができます。


### ステートレスサーバ

これはクライアントのアプリケーション状態をサーバ側で管理しない方式です。

しかし、実際はCookieを使ったセッション管理などステートフルなWebサービスはたくさんあります。


### キャッシュ

これは一度取得したリソースをクライアント側で使い回す方式です。

Webに限らずいろんなシステムで使われている方式ですね。


### 統一インターフェース

これはURIで指し示したリソースに対する操作を統一された限定的なアクションとする方式です。

HTTPではGETやPOSTなど8個に限定されたメソッドだけが定義されています。


### 階層化システム

これはシステムをいくつかの階層に分離する方式です。

例えば、クライアント-サーバ間にロードバランサーやプロキシサーバを加えることで役割を階層化します。

各階層間のインターフェース（接続部分）をHTTPで統一しているため階層化を実現できます。例えば、クライアント側からは、直接ロードバランサーにつながっているのか、Webサーバにつながっているのか、アプリケーションサーバにつながっているのかを意識する必要がありません。



### コードオンデマンド

これはプログラムコードをサーバからダウンロードし、クライアント側で実行する方式です。


例えば、Javascriptの実行はこれに当たります。


# まとめ


RESTは、Webのアーキテクチャスタイルです。
６つのアーキテクチャスタイルが組み合わさって構成されています。

個々のWebサービスがRESTful(RESTに忠実)な設計になっているとWeb全体としてRESTfulになります。


ただし、RESTが絶対というわけではありません。
Lambdaローカル開発環境構築手順


下記ブログを参考に、Lambdaのローカル開発環境構築手順をまとめる。

https://cloud5.jp/local-lambda-environment/

# 本記事執筆時の作業環境
- Windows11 Pro 22H2
- Windows Terminal
  - PowerShell 7.3.1

# Pythonインストール
下記を参考にPythonをインストールする。

~~https://blog.pyq.jp/entry/python_install_221102_win~~

https://starter-guide.od.pythonic-exam.com/ja/latest/python-setup/install-py39-win.html

2023/01/02追記：LambdaランタイムのPythonのサポートが3.9までだったため、
参考記事を差し替えた。

https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/lambda-runtimes.html

下記コマンドでPythonのインストールを確認する。
```
python -V
```
結果、下記のようにインストールしたバージョンが表示されれば成功となる。
```
Python 3.9.13
```

# AWS CLIインストール
下記を参考にAWS CLIをインストールする。

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html

下記コマンドでAWS CLIのインストールを確認する。
```
aws --version
```
結果、下記のようにインストールしたバージョンが表示されれば成功となる。
```
aws-cli/2.9.11 Python/3.9.11 Windows/10 exe/AMD64 prompt/off
```

# AWS SAM CLIインストール
下記を参考にAWS SAM CLIをインストールする。

https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-windows.html

下記コマンドでAWS SAM CLIのインストールを確認する。
```
sam --version
```
結果、下記のようにインストールしたバージョンが表示されれば成功となる。
```
SAM CLI, version 1.67.0
```

# Gitインストール
下記を参考にGitをインストールする。

https://sukkiri.jp/technologies/devtools/git/git_win.html

下記コマンドでGitのインストールを確認する。
```
git --version
```
結果、下記のようにインストールしたバージョンが表示されれば成功となる。
```
git version 2.39.0.windows.2
```

# 参考文献
- [ローカルでLambda開発環境の構築手順紹介](https://cloud5.jp/local-lambda-environment/)
- [Python 3.11をインストールしよう（Windows11 編）](https://blog.pyq.jp/entry/python_install_221102_win)
- [AWS CLI の最新バージョンをインストールまたは更新します](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/getting-started-install.html)
- [Windows への AWS SAM CLI のインストール](https://docs.aws.amazon.com/ja_jp/serverless-application-model/latest/developerguide/serverless-sam-cli-install-windows.html)
- [Gitインストール手順＜Windows向け＞](https://sukkiri.jp/technologies/devtools/git/git_win.html)
- [Python3.9のインストール(Windows 10)](https://starter-guide.od.pythonic-exam.com/ja/latest/python-setup/install-py39-win.html)
- [Lambda ランタイム](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/lambda-runtimes.html)

以上。
Raspberry Pi PicoをUSB経由でリセットする

# TL;DR
- BOOTSELボタンを使ってBOOTSELモードに入るのが面倒
- Raspberry Pi Picoの基板上のUSBコネクタを経由してリセットできるよ
- Virtual COMポートをボーレート 1200でOpen/Close すればよい

# 環境
- Ubuntu 20.04
- Screen

# 方法
- https://github.com/raspberrypi/pico-sdk/pull/197 を読んで背景を知る
- 仮想COMポートを指定のボーレートでOpen/Closeする
    - `screen /dev/ttyACM0 1200`
- Mass Storage Deviceとして再認識させたければ [Unbind/Bind](https://blog.gorugle.org/posts/2019/08/usb-unbind.html) する
2023をn進法で表わしてみた by Python（2 <= n <= 9）

あけましておめでとうございます！！
今年もよろしくお願いします

2023年になったということで、今回は2023をn進法（2 <= n <= 9）で表わそうと思いやってみました。

# ①実装の仕方を考える
2023をn進数に変換する前に、ひとまず2進数に変換できるかやってみましょう。
（n進数に関しては高校数学 数学Aにあるのでそこで学習するというのもアリです。）

```
2で割り続けます
2023 = 1011 * 2 + 1
1011 = 505 * 2 + 1
505 = 252 * 2 + 1
252 = 126 * 2 + 0
126 = 63 * 2 + 0
63 = 31 * 2 + 1
31 = 15 * 2 + 1
15 = 7 * 2 + 1
7 = 3 * 2 + 1
3 = 1 * 2 + 1
1 = 0 * 2 + 1
という感じになると思います。そして下から順に追っていけば2進数になるので
2023の2進数表記は
11111100111
になります。
```
長くなりましたが、これで2進数表記にすることができました。
という感じに実装していくことでn進数に変換することができます。

ここでは2進数と3進数に変換するコードを載せておきます。
言語はPythonです。
```python
#2進数に変換する
def f2(n):
    a = []
    while n != 0:
        a.append(n % 2)
        n = n // 2
    a.reverse()
    for i in range(len(a)):
        print(a[i], end="")
    print("")

#3進数に変換する
def f3(n):
    a = []
    while n != 0:
        a.append(n % 3)
        n = n // 3
    a.reverse()
    for i in range(len(a)):
        print(a[i], end="")
    print("")
```

他の数でも同様に実装していくことで変換することができます。

### 実装をより良くする
[viral](https://twitter.com/viral8code)さんに教えて頂いたのですが、
出力の際に
```python
print(*a, sep="")
```
のようにすると良いと教わりました。ありがとうございます。
確かにこれの方が簡単に書けますよね。
ちなみにアンパックと呼ばれる操作をしています。

# ②結果
結果は以下のようになります。
![スクリーンショット (1204).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2370459/76bc7f1e-4c71-268c-8eef-a8fcd7c3e8ec.png)

是非実装してそのような結果になるよう実装してみてください。
（値がこのようになるかは確認してあります。もし間違いなどありましたらコメントでお願いします。）

# ③感想
1月1日に書いているのですが、2023にまつわることをしたいと思い、n進法に変換するというのをやってみました。AtCoderさんのコンテストで時々見かけたりするので自分としては実装における良い練習になったかと思います。簡単ですが、ここらへんで終わりにします。

# ④参考文献

https://python.keicode.com/lang/list-unpack-asterisk.php

アンパックに関する記事です。参考にさせて頂きました。

https://atcoder.jp/contests/abc234/tasks/abc234_c

この問題は個人的にお気に入りですかね。名前といい、n進数にまつわる問題なので好きですね。みなさんも是非考えてみてください。

# ⑤余談
毎年1日中起きることができす、今年は2~4時の間に寝落ちしてました。
来年こそは！！
【Laravel】手軽に Twitter 風アプリが作れちゃう「Laravel Bootcamp」をやってみた

# 初学者にお勧め「Laravel Bootacamp」

「Laravel で簡単なアプリを作ってみたい！」と思ったら **[Laravel Bootcamp](https://bootcamp.laravel.com/)** というサイトがお勧めです！この `Laravel Bootcamp` は「Chirper」と呼ばれるマイクロブログ（Twitter風アプリ）を作成するためのチュートリアルサイトで、Laravel の基礎を学ぶにはもってこいの教材となっています。

https://bootcamp.laravel.com/

上記サイトをご覧のとおり全て英語表記となっていますが、サンプルコードをコピペしていくだけで、Twitter 風の簡単なアプリが出来上がります。やってみるとめっちゃ簡単。

**全9章の内容**
<table>
	<tbody>
		<tr>
			<td>1章</td>
			<td colspan="2">Introduction ( はじめに )</td>
		</tr>
		<tr>
			<td>2章</td>
			<td>Installation (Blade コース)</td>
			<td>Installation (JavaScript コース)</td>
		</tr>
		<tr>
			<td>3章</td>
			<td>Creating Chirps</td>
			<td>Creating Chirps</td>
		</tr>
		<tr>
			<td>4章</td>
			<td>Showing Chirps</td>
			<td>Showing Chirps</td>
		</tr>
		<tr>
			<td>5章</td>
			<td>Editing Chirps</td>
			<td>Editing Chirps</td>
		</tr>
		<tr>
			<td>6章</td>
			<td>Deleting Chirps</td>
			<td>Deleting Chirps</td>
		</tr>
		<tr>
			<td>7章</td>
			<td>Notifications & Events</td>
			<td>Notifications & Events</td>
		</tr>
		<tr>
			<td>8章</td>
			<td colspan="2">Deploying</td>
		</tr>
		<tr>
			<td>9章</td>
			<td colspan="2">Conclusion & Next Steps</td>
		</tr>
	</tbody>
</table>

# 全9章で Laravel の CRUD を気軽に体験

この **[Laravel Bootcamp](https://bootcamp.laravel.com/)** のチュートリアルは、全部で９章からなっていて、Laravel のインストールからデプロイまでの説明を網羅しています。但し、デプロイの章に関しては Bootcamp で説明されているデプロイの方法以外でも AWS 等のクラウド系サービスやさくらインターネットのレンタルサーバー等でデプロイする方法もありますので参考程度にご覧いただくと良いかと思います。

# Blade のアプリ作成コースをお勧め

このチュートリアルでは、`Blade` と呼ばれる Laravel のテンプレートエンジンを使用してアプリを作成するコースと、JavaScript (Vue or React) を使用してアプリを作成するコースに分かれています。

個人的な感想なのですが、JavaScript (Vue or React) を使用してアプリを作成するコースでは Vue または React の知識を必要とするため、シンプルに Blade を使用したアプリ作成コースを先にやってみることをお勧めしたいと思います。
[Tableau]デモを行う際に意識すべきポイント5選（DATASaberデモ会で学んだこと） 

## 目次
[1．はじめに](#1はじめに)
[2．概要](#2概要)
[3．デモ会で得た気付き（聞き手側）](#3デモ会で得た気付き聞き手側)
[4．デモ会で得た気付き（話し手側）](#4デモ会で得た気付き話し手側)
[5．デモを行う際に気をつけるべきポイント5選](#5デモを行う際に気をつけるべきポイント5選)

## 1．はじめに
社内のデータ利活用推進担当としてこれから社内にTableauを展開・推進していこうとしており、自身のスキル向上のため [DATA Saber](https://datasaber.world/) に挑戦中です。
しかしTableau機能について理解を深めることが出来たものの、推進のためにユーザへの説明をどのように行えば効果的なのかはいまいち分かっていませんでした。
そこで今回は現在挑戦中の [DATA Saber](https://datasaber.world/) にて、コミュニティ活動の練習として**デモ会**を実施し、そこから学んだ<font color="MediumBlue">**デモを行う際に意識すべきポイント5選**</font>をまとめたいと思います。
最後に社内説明会にて実践した内容についてもまとめておりますので、ご参考になれば幸いです。

## 2．概要
デモ会とは[DATA Saber](https://datasaber.world/) のOrdeal（技術試練）の内1問を選択し、他のApprenticeの前で解答過程をライブデモ形式（5分程度）で説明するイベントです。
シチュエーションやコンセプト、聞き手の知識レベルなどを事前に設定し、状況に合わせた説明を実施します。

DATASaberの師匠方・Apprentice仲間はとても積極的な方が多く、普段できない貴重な経験を積むことが出来きています。（みなさま、本当にありがとうございますm(..)m）
今回のデモ会もたくさんの方に参加いただき、1人では得られない量の学びを得ることが出来ました！

## 3．デモ会で得た気付き（聞き手側）
まずは聞き手としてデモ会に参加しました。
Tableau初心者を対象にした説明会という設定で非常に丁寧で分かりやすい内容でしたが、
伸ばしポイントとして挙げられた師匠からのコメントは非常に参考になりました。

<font color="MediumBlue">**・聞き手に安心感を持ってもらうため、自信満々で話す（えー、あの、は使わない！）**
**・アウトプットイメージを先に提示することで聞きやすくなる**
**・目的を明確にし、伝えたい内容を絞る**</font>


## 4．デモ会で得た気付き（話し手側）
次は自分もデモの練習を行うべく、話し手側として参加しました。
また師匠も話し手としてデモ会に参加して頂き、多くの学びを得ることが出来ました。

### 4-1．準備編
聞き手側で得た学びに加えて、以下を意識しました。
<INS>◇意識したポイント</INS>
**・なぜその手法を取ったのか説明を入れること**
　⇒思考プロセスを説明することで、ユーザに納得感をもって実践していただくため
**・ユーザが躓きやすいポイントを、実際に失敗した操作を見せながら伝えること**
　⇒臨場感を高め、記憶に残りやすくするため
**・実業務で使える場面を紹介し、業務への適用イメージをもってもらうこと**
　⇒参加して終わりとならないよう、「自分の業務ならどう使えるだろう」と考えながら聞いていただきたいため。

### 4-2．発表編
<INS>◇自身の振り返り・フィードバック</INS>
・説明が淡々としており、重要で伝えたいポイントがどこか分かりにくかった
<font color="Red">**⇒強弱をつけながら説明することで、重要な点を相手に伝える工夫が必要！**</font>

<INS>◇師匠のデモをみて得た学び</INS>
<font color="MediumBlue">**・「どう聞いてほしいのか」を最初に説明し、聞き手側の質を上げること**</font>
⇒フローを事前に伝えることで、理解度が向上する。
<font color="MediumBlue">**・重要な点は対話を交えながら振り返るなど、間をうまく使って強弱をつけること**</font>
<font color="MediumBlue">**・準備資料や自信を持った丁寧な言葉遣いで、話し手の説得力を高めること**</font>
（「この人はすごい人だ！」「準備してくれたんだ！」と思ってもらう工夫）
<font color="MediumBlue">**・最後に復習を行い、知識の定着を促すこと**</font>



## 5．デモを行う際に気をつけるべきポイント5選
改めて、デモ会を通して得られた学びポイントをまとめました。
正直この他にもたくさんポイントはあるのですが、別の機会にまとめたいと思います。
特に重要な以下5点を、まずは意識されてみてはいかがでしょうか。

<font color="MediumBlue">**1．対象と目的を明確にし、伝えたい内容を絞ること**</font>
<font color="MediumBlue">**2．最初に目的・覚えるべき点を明示し、聞き手の理解度を向上させること**</font>
<font color="MediumBlue">**3．強弱や間をうまく使い、聞き手を引き付ける話し方をとること**</font>
<font color="MediumBlue">**4．最後に復習を行い、知識の定着を促すこと**</font>
<font color="MediumBlue">**5．入念に準備を行い、自信と熱意をもって伝えること**</font>





次回は実際に社内でイベント（勉強会、説明会）を開催した内容をまとめたいと思います！！

#Tableau 
#DATASaber
#DATASaberBridge
SpaceEngineersのサーバーをLinux+Dockerで簡単に建てる

# SpaceEngineersのサーバーは
Windowsで建てるのが一般的だが、我が家のサーバーはLinuxだったし、Linuxサーバーの方が色々とつぶしが効くのでこちらで建てたかった。
## また、Dockerを使うことで
何種類もあるサーバーを簡単に管理できるので、今回はこちらを使うことにした。

# 前提条件
Linuxサーバーを持っているか、借りていること。
Linuxサーバーを持っている場合: 外部へのポート開放ができること
また、今回はUbuntu系ディストリビューションでインストールしましたが、Redhat系でインストールする場合は apt を yum に置き換えれば同じようにできると思います。

# 実際に建てている動画
Youtube配信で実際にサーバーを建てたので、参考になると幸いである。

https://youtube.com/live/zCIOIFiS3o8?feature=share

# Docker CE とDocker Composeのインストール
```
docker compose version
```
を実行してエラーが出たら、この項目を読んでインストールしてください。バージョンが表示されたら不要です。
## Docker CE
Ubuntu系の場合
```
sudo apt update
sudo apt install docker-ce
```
ここで失敗するなら、以下の記事を参考にリポジトリを追加すると成功することがある
https://unix.stackexchange.com/questions/363048/unable-to-locate-package-docker-ce-on-a-64bit-ubuntu
### 確認
```
sudo docker run hello-world
```
を実行して、「うまくいきました」的なメッセージが表示されたらインストール完了

## Docker Compose

```
sudo apt install docker-compose-plugin
```

### 確認
```
docker compose version
```
を実行してバージョンが表示されたら成功

# Space Engineers Dedicated Docker Linux
https://github.com/mmmaxwwwell/space-engineers-dedicated-docker-linux
をインストール
## ダウンロード
まず、SpaceEngineersをインストールしたいディレクトリに移動する。
そうしたら次のコマンド
```
git clone https://github.com/mmmaxwwwell/space-engineers-dedicated-docker-linux.git
cd space-engineers-dedicated-docker-linux
```
ここにある./startは古いバージョンのdockerに合わせた書き方になっているので少し変える必要がある。
```
sed -i -e 's/docker-compose/docker compose/g' ./start
```
ここまでできたら、以下のコマンドで起動
```
./start
```
これで、SpaceEngineersを起動して「直接接続」で「IPアドレス:27016」につなげばサーバーに入れるはずです。

# ポート開放
開放するポートはTCPではなく**UDPの27016**なのでご注意ください。
1. ルーターのポート　
と
2. サーバーのファイアーウォール
を両方設定する必要があります。これに関しては環境による違いが大きいため、ご自身で調べてポート開放してみてください。
実務未経験者が独学でデータベーススペシャリストに合格するまでにやったこと

令和4年度10月実施のデータベーススペシャリスト試験に合格できたため、勉強の進め方について記しておきます。同じような境遇の方の参考になれば幸いです。

### 前提
勉強開始前の筆者のスキル・レベル感は以下です。
* 2019年春に基本情報技術者試験（FE）、同年秋に応用情報技術者試験（AP）に合格済
* データベース構築の実務経験やSQLによる開発経験は一切なし
* C/C++でのプログラミング経験あり
* 業務のデータ分析でRを扱うため、基本的なテーブル操作は少しわかる

### やったこと
#### 参考書で基礎事項のインプット
[徹底攻略 データベーススペシャリスト教科書](URL:https://book.impress.co.jp/books/1121101110) を購入し、主に正規化やSQLの基本文法といった基礎事項を頭に入れました。
購入者特典でPDF版がついていたり、過去問の解答解説がついていたりして非常によかったです。
第一章から第五章を中心に、一週間くらいでひととおり目を通しました。

#### SQLの勉強
SQLは座学だけでは身についている感じがしなかったので、データサイエンティスト協会が公開している [データサイエンス100本ノック（構造化データ加工編）](URL:https://github.com/The-Japan-DataScientist-Society/100knocks-preprocess) を解きました。
半分くらい解いたところで基本的な文法（SELECT句やWHERE句）が身についたと感じたので、過去問演習に移りました。

#### 過去問演習
試験日の一か月前頃から過去問演習、特に午後問題の対策に入りました。
過去問は [IPAのサイト](URL:https://www.jitec.ipa.go.jp/1_04hanni_sukiru/_index_mondai.html) からダウンロードできます。
午後問題の過去問解説は公開されていないため、独学で進める場合には解説付きの参考書を購入するのがおすすめです。

以下、各分野について対策を始めた順に記載していきます。

##### 午後1
午後1は3問中2問を選択することになるのですが、過去問演習の段階では3問すべてを時間内（90分）に解けるようにしておきました。数年分解いたところで得意な設問がわかってきたため、以降は2問（物理設計以外）に絞って演習しました。2016年～2021年の計6年分を解きました。

##### 午後2
午後2は2問中1問の選択になります。こちらも両方の対策ができるのがベストだとは思うのですが、問題のボリュームが多く消化しきれないリスクを考え、論理設計に絞って演習しました。こちらも2016年以降の6年分を解きました。
当日問題を見て選択する問題を決める余裕はなかったため、選択問題を絞りこんで対策する方針が結果的にはよかったのではないかと思っています。

##### 午前2
一週間くらい前から対策を始め、4-5年分ほど解きました。午後問題の対策が十分であれば問題ないレベル感でした。

##### 午前1
こちらも一週間前から対策を始めました。内容的にはAPの午前問題の抜粋なので難しくはないのですが、忘れていた内容が多かったため、急遽 [参考書](URL:https://www.shoeisha.co.jp/book/detail/9784798177564) を購入して勉強しました。

### 試験結果
点数は次の通りで、無事合格でした。
午後1が予想以上に得点できていたのが意外でしたが、だいたい予想通りの点数でした。
| 分類 | 点数 |
|:----:|:----:|
|午前1|85.00点|
|午前2|88.00点|
|午後1|90点|
|午後2|63点|

### おわりに
試験の勉強だけでは実務に耐えうるスキルが身についたとは到底思えませんが、設計で気を付けるポイントや設計の流れなどがイメージできるようになったのは大きな収穫でした。
実務と座学のギャップを意識しながら今後も精進していければと思います。
SeleniumWebDriverをapiからpythonで更新する

# はじめに
「selenium webdriver 自動」や「webdriver 更新 自動」などで検索しても
webdriver-managerを使った方法の紹介の方が多く感じたので書くことにしました。

# 環境
Windows11
python 3.10.4
requests 2.28.1

# 実際のコード

```
pip install requests
```

```main.py
import os
import urllib.request

import requests


def main():

    # chromium公式の発表しているchrome_driverの最新バージョン名を取得
    CHROME_LATEST_VERSION = requests.get("http://omahaproxy.appspot.com/linux?channel=stable").text
    # 上記のバージョン名からメジャーバージョン名を取得。
    CHROME_LATEST_MAJOR_VERSION = CHROME_LATEST_VERSION.split(".")[0]
    # chrome_driverのapiからメジャーバージョンの最新driverのバージョン名を取得
    CHROME_DRIVER_VERSION = requests.get(f"https://chromedriver.storage.googleapis.com/LATEST_RELEASE_{CHROME_LATEST_MAJOR_VERSION}").text

    # windows用chrome_driverのurlとzipファイル名の設定
    CHROME_DRIVER_WINDOWS_ZIP = "chromedriver_win32.zip"
    CHROME_DRIVER_WINDOWS = f"http://chromedriver.storage.googleapis.com/{CHROME_DRIVER_VERSION}/{CHROME_DRIVER_WINDOWS_ZIP}"

    # webdriver保存用のディレクトリの作成
    save_dir = f"./webdrivers/{CHROME_DRIVER_VERSION}"
    os.makedirs(save_dir, exist_ok=True)

    # zipのダウンロード
    file_name = f"{save_dir}/{CHROME_DRIVER_WINDOWS_ZIP}"
    urllib.request.urlretrieve(url=CHROME_DRIVER_WINDOWS, filename=file_name)


if __name__=="__main__":
    main()
```

## コードの詳細

```
# chromeの最新バージョン名を取得
CHROME_LATEST_VERSION = requests.get("http://omahaproxy.appspot.com/linux?channel=stable").text
# 上記のバージョン名からメジャーバージョン名を取得。
CHROME_LATEST_MAJOR_VERSION = CHROME_LATEST_VERSION.split(".")[0]
# chrome_driverのapiからメジャーバージョンの最新driverのバージョン名を取得
CHROME_DRIVER_VERSION = requests.get(f"https://chromedriver.storage.googleapis.com/LATEST_RELEASE_{CHROME_LATEST_MAJOR_VERSION}").text
```
Chrome、ChromeWebDriverそれぞれのメジャーバージョンの違いによって発生するエラーを防ぐため、
Chromeの最新安定バージョンとChromeWebDriverの最新安定バージョンを取得。

詳細は以下の参考記事↓
https://dev.classmethod.jp/articles/getting-chrome-driver-version-fitted-chrome-latest-stable-version/

```
# windows用chrome_driverのurlとzipファイル名の設定
CHROME_DRIVER_WINDOWS_ZIP = "chromedriver_win32.zip"
CHROME_DRIVER_WINDOWS = f"http://chromedriver.storage.googleapis.com/{CHROME_DRIVER_VERSION}/{CHROME_DRIVER_WINDOWS_ZIP}"
```
windows用ChromeWebDriverの名称とAPIエンドポイントのURLの設定。

```
# zipファイルのダウンロード
file_name = f"{save_dir}/{CHROME_DRIVER_WINDOWS_ZIP}"
urllib.request.urlretrieve(url=CHROME_DRIVER_WINDOWS, filename=file_name)
```
urllib.request.urlretrieveで直接zipファイルをダウンロードしている


# 参考
他にも記事ありました。
http://holiday-programmer.net/webdriver_auto_update/

# おわりに
最初はwebdriver-managerをおとなしく使っていましたが、ソース内にエンドポイントのURLがあることを見つけ、
自分で作ってみることにしました。

このコードでは他OSへの対応やZipの処理もなく、実際に使えるレベルではないので
今回のコードをもとに拡張していきたいと思います。
リーダブルコードの要約_3章

**3章 誤解されない名前**

変数や関数につける最善の名前とは、読み手に誤解されない名前である。
読み手が書き手の意図を正しく理解できるような名前をつけるコツを紹介する。

**誤解されやすい名前の例**
段落の内容を切り抜く関数があるとする。
```php
//textの最後からlength文字を切り落とす
function Clip(text, length) {
...
}
```
関数`Clip`の動作は2つ考えられる。
* 最後からlength文字を削除する(remove)
* 最大length文字まで切り詰める(truncate)

どちらが正しい動作なのかは`Clip`という関数名からは分からない。
読み手に疑問を抱かせてしまうので、関数名を`Truncate(text, length)`に変えた方が良い。

さらに、仮引数の`length`という名前も`max_length`にした方が「<strong>最大</strong>length文字まで切り詰める」という動作が明確になる。

しかし`max_length`という名前にしたところで、いろんな解釈の余地があるので誤解を招く可能性がある。
* バイト数
* 文字数
* 単語数

2章でも紹介したように、ここでは名前に単位をつけて意味を明確にした方が良い。
`max_length`は文字数を意味しているので、`max_chars`にするのが良いだろう。


**限界値を意味する変数名**
```javascript
var limit_num = 10;
```
`limit`には「限界」という意味があるが、変数`limit_num`には10を含むのか含まないのかよく分からない。
これを明確にするには、名前の前に`max_`や`min_`をつけると良い。
今回の例では変数名を`max_limit_num`という名前にすれば、「10を含む」ことが明確になる。

**真偽値の変数名**
真偽値の変数名には、先頭に`is`・`has`・`can`・`should`などをつけることが多い。
例えば、`SpaceLeft()`という関数は数値を返すように見えるが、真偽値を返したいのであれば`HasSpaceLeft()`という名前にした方が良い。

**読み手の期待に合わせる**
たとえ別の意味で使っていたとしても、読み手が先入観を持っているために誤解を招いてしまう命名がある。
例）`get*()`
多くのプログラマは、`get〜`で始まるメソッドはメンバの値を返すだけの軽量なメソッド(アクセサ)であるという認識を持っている。
では、以下のような関数を作ってしまうとどうなるか？
```php
function getMean() {
    //全てのサンプルをイテレートして total / num_samples を返す
}
```
`getMean()`はデータを全てイテレートしてその平均値を結果として返す処理をする。
つまり、もしもデータが大量にあったら膨大なコストになる。

しかし`get〜`で始まる名前なので、軽量なメソッドであると誤解した人が高コストであるとは知らずに`getMean()`を呼び出してしまうリスクが存在する。

よって、`getMean()`はコストの高さが事前にわかるよう`ComputeMean()`などの名前に変えるべきである。
tweepyでツイート情報を取得したいのにエラーが出る

# はじめに
Twitter API V2を使ってツイート情報を収集しようとしたが、ハマってしまったのでまとめてみました。

# ソースコード
調べたらすぐ出てくるようなコードです。
```python
import tweepy

consumer_key = 'xxxxxx'
consumer_secret = 'xxxxxx'
access_token = 'xxxxxx'
access_token_secret = 'xxxxxx'

client = tweepy.Client(
    consumer_key,
    consumer_secret,
    access_token,
    access_token_secret
)

search = 'Python'
tweet_max = 10
tweets = client.search_recent_tweets(query=search, max_results=tweet_max)
print(tweets)
```
# エラー内容
```python
tweepy.errors.Unauthorized: 401 Unauthorized
Unauthorized
```
何かしらの権限を与えないといけないというエラーなので、調べてみるとTwitterの開発者ポータルでApp permissionsがread onlyのままが原因のようでした。

[Developer Portal](https://qiita.com/butsuli_shine/items/78fd5ee6fdb4a0581652#:~:text=Twitter%20developers%E5%85%AC%E5%BC%8F)に飛んで、左側のProjects&Appsのアプリ名を選択します。そして、User authentication set upのset up、もしくはEditを押してapp permissionsを変えて行きます。

app permissionsをReadからRead and writeかRead and write and Direct messageに変更します。
![スクリーンショット 2023-01-01 17.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2728030/88941cf8-4d9e-60ad-e622-0756bf5579ab.png)

App permissionsを変更したら、再びconsumer_key、consumer_secret、Access Token、Access Token Secretを発行するようにします。

これで完了のはずなのですが、結局また同じエラーが出てしまいました。
(App permissinsでThese permissions enable OAuth 1.0a Authenticationと書かれていたので、もしかして)

# 解決
どうやらTwitter API V2では、bearer_tokenの情報も必要なようです。
そこで先ほどの[Developer Portal](https://qiita.com/butsuli_shine/items/78fd5ee6fdb4a0581652#:~:text=Twitter%20developers%E5%85%AC%E5%BC%8F)からbearer_tokenも取得してきました。
```python
import tweepy

bearer_token = 'xxxxxx'
consumer_key = 'xxxxxx'
consumer_secret = 'xxxxxx'
access_token = 'xxxxxx'
access_token_secret = 'xxxxxx'

client = tweepy.Client(
    bearer_token,
    consumer_key,
    consumer_secret,
    access_token,
    access_token_secret
)

search = 'Python'
tweet_max = 10
tweets = client.search_recent_tweets(query=search, max_results=tweet_max)
print(tweets)
```
他にも、以下のようにしてツイートを投稿することもできました。
```Python
client.create_tweet(text='ツイート文')
```

# 参考サイト
[]()
[TWITTER API V2 REFERENCE Clinet](https://docs.tweepy.org/en/stable/client.html)
[【112日目】Tweepyでツイート情報を取得_ツイートデータの収集方法](https://note.com/ym202110/n/n057b839b8ff7)
(tips)SpringBoot 3.0系にSpockのテストを適用する

## 承前

Spring 2.x系で作成していたプロジェクトのテストに Spock Framework を採用していましたが、Spring 3系がリリースされましたので移行したところ、テストコードが軒並み失敗したためその対応方法を残しておきます。

## 採用していたプロジェクト構成

* SpringBoot 2.7.6
* MyBatis 3.x
    * MySQL
* Spock framework 
    * Spock-Spring 2.3-groovy-4.0
    * groovy-all 4.0.6

元々は [MyBatisのPlugin機構](https://mybatis.org/mybatis-3/ja/configuration.html#plugins) を検証する目的で作成したプロジェクトです。

## テストコード例

```ItemRepositoryTest.groovy
package com.github.apz.sample.repository

import org.springframework.beans.factory.annotation.Autowired
import org.springframework.boot.test.context.SpringBootTest
import spock.lang.Specification
import spock.lang.Unroll

@SpringBootTest
@Unroll
class ItemRepositoryTest extends Specification{
    @Autowired
    ItemRepository itemRepository

    def "検索テスト"() {
        when:
        def result = itemRepository.findById($id)

        then:
        result.size() == 1
        result.get(0).getId() == _id
        result.get(0).getName() == _name

        where:
        $id || _id | _name
        '1' || 1L  | '商品'
    }
}
```

### エラー原因

```groovy
@Autowired
ItemRepository itemRepository
```

でSpringのテスト用ApplicationContextから自動的に取得できるはずの itemRepository が 得られません(nullになる＝つまり `@Autowired` が空振りしている）

## 結論

Spock framework のバージョンを修正します。

* spock-core:2.4-M1-groovy-4.0
* spock-spring:2.4-M1-groovy-4.0

## サンプルプロジェクト

https://github.com/A-pZ/mybatis-plugin-sample
【Xcode】シュミレーターの画面録画とスクショをキーボードショートカットで行う

# はじめに
昨日に引き続きショートカットの紹介です。
シュミレーターの画面録画やスクショは必ず使うので覚えておきたいです。

# やりかた
## 画面録画
`command` + `R`

## スクリーンショット
`command` + `S`

# おわり
あけましておめでとうございます
JITコンパイラとAOTコンパイラを再確認

自分用にどっちがどんな特徴だか忘れたので備忘録として残す。

## JITコンパイラ
JITはJust In Timeの略称で、実行時コンパイラとも呼ばれる。
ソフトウェア実行時にソースコードまたは[1]中間コードを機械語に変換する。

### JITコンパイラのメリット
* 実行時にコンパイルすることでプラットフォーム（Windows、macOS、LinuxなどのOSやハードウェア）に依存しないソースコードや中間コードの状態でソフトウェアを配布することができる。

表面上インタプリタと同じように動作はするが、内部ではコンパイルを行なっておりインタプリタより高速に動作する。

### JITコンパイラのデメリット
* AOTコンパイラと比べると実行時にコンパイルするため、その分の時間がかかってしまう。
* 最適化を行わないためメモリを多く利用する。アプリ自体のサイズをなるべく小さくしたい場合（スマホ向けアプリなど）はAOTコンパイルが良い。

## AOTコンパイラ
Ahead Of Timeの略称で、事前コンパイラとも呼ばれる。
ソースコードや中間コードを、実行前にコンパイルするコンパイラ。

### AOTコンパイラのメリット
* 実行前にコンパイルを済ませているため、JITコンパイラより早く動作が可能。

### AOTコンパイラのデメリット
* OSやCPUに依存しないソースコードや中間コードの状態でソフトウェアを配布することができない。

## 補足
[1] 機械語にあらかじめ変換すると直接実行が可能な反面、機械語の体系でCPUの種類やハードウェア構成等に依存するため、実行ができない環境が出てくる。ので、両者の中間の性質を持つ中間コードというものが存在する。中間コードは架空の機械語として表現されるため、そのままでは実行できずネイティブコードに変換する必要がある。その役割を仮想マシンと呼ばれるソフトウェアが受け持ち、実行したい環境上で仮想マシンが中間コードをネイティブコードに変換して実行する。機械語の体系が異なるコンピュータが存在していても、それぞれに対応した仮想マシンを経由することで、どの環境でも実行が可能となる。


## 参考
 * [AOTコンパイラ | Programming Place Plus　用語集
](https://programming-place.net/ppp/contents/glossary/alphabet/aot_compiler.html)
* [中間コードとは - 意味をわかりやすく - IT用語辞典 e-Words](https://e-words.jp/w/%E4%B8%AD%E9%96%93%E3%82%B3%E3%83%BC%E3%83%89.html)
* [JITコンパイラ（実行時コンパイラ）とは](https://medium-company.com/jit%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9/)
②Layout Editor　図形の描き方

今回は図形の描画方法についてです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039522/7f1066ba-9a47-fe02-15f1-aad841147b21.png)

Drawタブから様々な図形を描画することができます。
試しに上から2番目のBoxを選択して黒い画面上で
クリック→ドラッグ→クリック
と操作すると、長方形を描くことができます。
この操作を繰り返すことで、連続して長方形を描くことが可能です。

Escキーを押すことで描画は終了します。

また、ショートカットキーで図形を描画することもできます。
先ほどのBox（長方形）はDrawタブを見てみると、bという記号が右に書いてあります。
試しにbを押してから
クリック→ドラッグ→クリック
と操作すると、長方形を描くことができます。
（描画できない場合には、Escキーを押してから再度bを押して試してみてください）

今回は図形の描画について学びました。
今回はここまで！