OmniAICreator/Qiita-1.07M huggingface dataset:
MacのTimeMachineバックアップ先をWindowsの共有フォルダにする

# MacのTimeMachineバックアップ先をWindowsの共有フォルダにする
作業の備忘録になります

# 環境
Windows 11 Pro + USB３ HDD(RAID) 
macOS 11.5 BigSur

## Windows 共有フォルダ作成
Windowsにバックアップ用の共有フォルダを作成します
共有フォルダを作成するドライブは、exFATでフォーマットされている必要があります

## Mac Windowsの共有フォルダへ接続
Macから共有フォルダに接続するための設定をします
参考
[MacからWindowsコンピュータに接続する](https://support.apple.com/ja-jp/guide/mac-help/mchlp1660/11.0/mac/11.0)

Finder　 を起動、メニューからWindowsサーバへ接続します
![スクリーンショット 2021-11-26 21.57.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/c227438c-7e27-d1be-7469-42e8f05cb957.png)

## Mac 空のイメージを作成
ディスクユーティリティを起動
アプリケーション > ユーティリティ > ディスクユーティリティ

ファイル > 新規イメージ > 空のイメージを作成
![空のイメージ作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/05324043-167a-6b0f-0f26-e4856d27b410.png)

設定例、サイズはMacのHDDサイズは必要です
![スクリーンショット 2021-11-26 21.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/b33370cc-69f9-1980-c4bc-3de5eb67d43c.png)

ディスクトップに TimeMachineドライブ と、ファイル　TimeMachine.sparsebundle　ができます
![スクリーンショット 2021-11-26 21.45.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/8efb7879-8f86-5d8a-3063-b8e3b323be42.png)

ドライブを右クリック、TimeMachineを取り出す
![スクリーンショット 2021-11-26 21.47.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/13b6790e-937c-bca7-9389-05dd86014490.png)

ファイル　TimeMachine.sparsebundle を共有フォルダのTimeMachineバックアップを保存する場所にコピー
ダブルクリックで開くと、先ほどと同じようにドライブ TimeMachine がディスクトップに表示されます
ディスクトップの TimeMachine.sparsebundle はゴミ箱へ

## Time Machineのバックアップ先として設定します

### ターミナルにフルディスクアクセス権限を付与
システム環境設定 > セキュリティとプライバシー > プライバシータブを選択
左下のロックアイコン > ロック解除
フルディスクアクセスを選択　> ターミナル にチェック
左下のロックアイコン > ロック
![スクリーンショット 2021-11-26 22.43.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/58209c4c-8257-364d-9eaf-c8e5f2d6c616.png)

## ターミナルからコマンドで共有ドライブを保存先に設定
Macのターミナルを起動します

作成した名前のドライブ （例　TimeMachine）がマウントされていることを確認します

```
% ls /Volumes 
BOOTCAMP	Mac		Share		TimeMachine
```

設定コマンドは　sudo tmutil setdestination /Volumes/<作成した名前のドライブ名>

```
% sudo tmutil setdestination /Volumes/TimeMachine 
Password:
% 
```

ターミナルにフルディスクアクセス権限が設定されていないと、以下のようなエラーが出ます

```
% sudo tmutil setdestination /Volumes/TimeMachine 
Password:
tmutil: setdestination requires Full Disk Access privileges.
To allow this operation, select Full Disk Access in the Privacy
tab of the Security & Privacy preference pane, and add Terminal
to the list of applications which are allowed Full Disk Access.
% 
```

## TimeMachineの設定
システム環境設定からTimeMachineを開く
保存先が設定済であることを確認し、バックアップディスクを自動作成　にチェックします
__注意__：共有フォルダとの接続が安定しない場合は、定期的に手動で実施すること
![スクリーンショット 2021-11-26 22.49.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273559/7acc9278-49c0-5d31-8e4a-b5589160a7d0.png)

## ターミナル / スクリプトで TimeMachine を実行
TimeMachine実行をスクリプトで制御するのが安心です
今すぐバックアップを作成　するコマンドは以下になるようです

```
sudo tmutil startbackup
```
PostmanからAWS AppSync（GraphQLのAPI）へリクエスト

Postmanを使い AWS AppSync の１つのAPIにクエリー・リクエストする方法です
認証は cognito userpoolを使う（IAMやAPI KEYではありません）

## 準備するもの
- ブラウザChrome
- Postman（https://www.postman.com/downloads/）
- APIサーバ　AWS AppSync、authはcognito userpoolを使う
- AWS AppSyncでは以下のような設定
- <img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/4c5d7f8d-a8ec-240a-bfe9-d375a50c2f8d.png" width="700" />
    - API URL がAPIリクエストのエンドポイント相当になる
    - API ID はPostmanでは使わない


## ブラウザから試してリクエスト内容を取得する
1. ブラウザでログインをして認証通過済にする
1. ブラウザで開発者ツールdev toolを表示し、画面操作してAPIリクエストを取得する
1. dev toolでRequest Headersのauthorizationを取得（長い長い文字列です）

リクエストヘッダーのサンプル
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/f5745469-5861-39f6-c3c4-41fb2f6533e1.png" width="700" />

リクエストしている内容 Payloadのサンプル
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/b0d14f63-2694-f4a2-5bbc-3e5944ae7eca.png" width="700" />


## Postmanへの設定

create new collection -> Add a request

#### 設定前 

GET reuest URL 未指定
タブ Headers
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/f8b69100-07ab-cd19-b2ff-df8712a47c01.png" width="300" />
タブ body
<img src ="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/9947a9bf-5ccb-374c-d088-80173798a251.png" width="300" />



|KEY  |VALUE |説明  |
|---|---|---|
|Authorization|eyJraWQiOiJ5b0NKUTBXUE4rWEtBTVlRR0Uy... |認証情報のcookie相当、長い文字列 |

- リクエストはGETからPOSTに変更
- POSTの入力欄は GraphQLのAPI URLを指定（AWS AppSyncでのAPI URLと同じ）

#### 設定例
- タブ Headers
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/f7489f6a-2815-e4a4-0e2a-f54998ac4821.png" width="700" />

- タブ Body
    - <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/ed9ab38a-caa6-df12-89c8-82be6ae7844b.png" width="700" />
    - GraphQLのラジオボタンを選択
    - QUERYの欄に、AppSyncでの query / mutaion で指定するリクエスト内容を入力

        ```graphql
            query MyQuery {
              AlertHistoryByShopID(ID: "XX-ID", sortDirection: DESC, limit: 100) {
                items {
                  id
                  status
                  timestamp
                }
                nextToken
              }
            }

        ```

## 実行結果例

- Send」ボタンを押すと、レスポンスのBodyにjsonが返ってくる
- レスポンス

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1482752/167b4964-55a2-af9d-9d33-45d91c03a2a9.png" width="700" />
ショットガンシャッフルはN回やると元の状態に戻るぜ！

##ショットガンシャッフルはカードを痛めるぜ！！！
カードを痛めることで広く知られている通称ショットガンシャッフル、
正式名称リフルシャッフルはN回目のシャッフルでシャッフル前の状態に戻るそうです。
何回で元に戻るのか検証してみましょう。

##52枚のトランプを痛める

それではやっていきましょう。
今回は52枚のトランプを使っていきます。

手順としては52枚のトランプを用意してショットガンシャッフルを行い、
元の状態に戻るまでシャッフルを続けて、その時のシャッフル回数を表示する方針となります。

元の状態に戻ったかどうかの判定ですが、頭のいい方法が思いつかない凡骨だったので
シャッフル前のデッキとシャッフルしているデッキ間の52枚全部についてそれぞれ繰り返しで比較しています。

無限ループに陥ってしまうと怖いので100回のシャッフルでループを抜けるようにしましたが、
結果それ以下の回数で試行が終了したのでコメントアウトしています。


```py:ShotGunShuffle.py
import pandas as pd

vCards = []
for lSuits in ['H', 'S', 'C', 'D']:
    vCards.extend(str(lNum) + lSuits for lNum in list(range(1, 14)))

vOriginDeck = pd.DataFrame({'card': vCards, 'sort': list(range(0, 52))}, index=list(range(0, 52)))
vDeck = vOriginDeck

vCountShuffle = 0
vIsDeckOrigin = False

while vIsDeckOrigin == False:
    vCountShuffle += 1

    for i in list(range(0, 52)):
        if i < 26:
            vDeck.iat[i, 1] = i*2
        else:
            vDeck.iat[i, 1] = (i-25)*2-1

    vDeck = vDeck.sort_values('sort')
    vDeck.reset_index(drop=True, inplace=True)

    for i in list(range(0, 52)):
        vDeck.iat[i, 1] = i

    vIsDeckOrigin = True
    for i in list(range(0, 52)):
        if vOriginDeck.iat[i, 0] != vDeck.iat[i, 0]:
            vIsDeckOrigin = False
#    if vCountShuffle > 100:
#        vIsDeckOrigin = True

print(vCountShuffle)

```

```:結果
8
```

####ショットガンシャッフルはN回やると元の状態に戻るぜ！(N=8)

おわり
RaspberryPi Picoに液晶モジュールを付けてみた

# 購入物

RaspberryPi Pico用の面白そうな液晶が売っていたので買ってみました。

1.3インチ240x240の液晶とジョイスティックとボタンが４つ付いたものと、1.14インチ240x135の液晶とジョイスティック、ボタン２つのものです。

https://www.switch-science.com/catalog/7327/

https://www.switch-science.com/catalog/7326/

また、ハンダ付けが面倒だったので、ピンヘッダ実装済みのPicoを購入しました。
失敗したなぁと思ったのは、液晶モジュールと接続するピンだけじゃなくて、端の方の３ピンも実装されているので、裏返した時に座りが悪いところでしょうか。

https://www.switch-science.com/catalog/7412/

RaspberryPi PicoのUSB端子はmicroUSBポートなんですが、そろそろUSB Type-Cにしてほしいなぁ。

# RaspberryPi PicoにMicroPythonをセットアップ

https://www.raspberrypi.com/documentation/microcontrollers/micropython.html

1. MicroPython UF2ファイルをダウンロードします。

https://micropython.org/download/rp2-pico/rp2-pico-latest.uf2


2. BOOTSELボタンを押したままにして、PicoをMacのUSBポートに接続します。Picoが接続されたらBOOTSELボタンを放します。
3. RPI-RP2という名前で大容量記憶装置としてマウントされます。
4. MicroPythonUF2ファイルをRPI-RP2にドラッグアンドドロップします。
5. Picoが再起動します。(Macからは不正な取り出し云々のメッセージが表示されます。)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/e171cbd4-7a6a-a6de-066b-73196c79bbbb.png)

6. これでMicroPythonを実行しています。

# 開発環境

使っているMacには、既にVisual Studioがインストールされているので、拡張機能で提供されているPico-goを使用しました。

https://marketplace.visualstudio.com/items?itemName=ChrisWood.pico-go

MacとPicoをUSBでせつぞk空いたら、[× Pico Disconnected]をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/85da582e-d647-855d-b33b-a60d9179475e.png)

Picoと接続すると表示が[✔︎ Pico Connected]になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28184/71ba7359-f253-9d74-5b80-053695c39ccd.png)

10秒LEDを点灯させて消灯をするサンプルプログラムを使って、PicoのLEDを表示します。
下のled.pyを打ち込んで、[▷ Run]をクリックするとプログラムが実行されます。
プログラムが正しければPicoのLEDが10秒ほど点灯します。

また、コンソールで直に書き込んでも同じことができます。

```python:led.py
from machine import Pin
import time

led = Pin(25, Pin.OUT)
led.high()
time.sleep(10)
led.low()
```

# 液晶モジュールの表示
## メーカーのページ

https://www.waveshare.com/pico-lcd-1.3.htm

https://www.waveshare.com/Pico-LCD-1.14.htm

## サンプルプログラムのダウンロード
ダウンロードしたファイルを解凍して、
・Pico-LCD-1.14-V2.py
・Pico-LCD-1.3.py
を使って、液晶ディスプレイとジョイスティック、ボタンが正常に動作していることが確認できました。

https://www.waveshare.com/w/upload/2/28/Pico_code.7z

サンプルは、ループでジョイスティックやボタンに関連付けられているピンの状態をみて、押下されていれば対応した矩形を塗りつぶしているだけなので、簡単に変更して使えそうです。
batでmd5コマンドをつくる

windows標準のコマンドでmd5などのハッシュ値を求めようとすると、こうなる  

```bat:
CertUtil -hashfile C:\hoge\hogehoge.txt md5
```
はっきり言って普段使いは想定されていないと思われるので、`md5 hogehoge.txt`等で使えるようにする
また、ハッシュ値を求める時は他の値と比べる必要がある場面が多いと思われるので、引数2にハッシュ値を指定することで求めたハッシュ値と比較できるようにもする
## できたやつ
```bat:md5.bat
@echo off

rem md5 [FilePath] [CompMd5Value]
rem md5の値を求め、第二引数が存在する場合にはそれと算出した値を比較する
if "%~1"=="" (
	echo 引数にファイルを指定してください
	exit /b
)

for /F %%i in ('certutil -hashfile "%~1" md5 ^| find /i /v "md5" ^| find /i /v "certutil"') do (
	set createdhash=%%i
)

echo %createdhash%

if "%~2"=="" (
	exit /b
)

:verifi
if %2==%createdhash% (
	echo ハッシュ値が合致
) else (
	echo ハッシュ値合致せず
)
```
上記の例ではアルゴリズム名であるmd5をハードコーディングしているが、はっきり言って変数にしてしまった方が楽だと思う
以下はそうしてsha256コマンドを実装した例

```bat:sha256.bat
@echo off

rem sha256 [FilePath] [CompSha256Value]
rem sha256の値を求め、第二引数が存在する場合にはそれと算出した値を比較する
set alg=sha256
if "%~1"=="" (
	echo 引数にファイルを指定してください
	exit /b
)

for /F %%i in ('certutil -hashfile "%~1" %alg% ^| find /i /v "%alg%" ^| find /i /v "certutil"') do (
	set createdhash=%%i
)

echo %createdhash%

if "%~2"=="" (
	exit /b
)

:verifi
if %2==%createdhash% (
	echo ハッシュ値が合致
) else (
	echo ハッシュ値合致せず
)
```
## 使用方法
これをパスを通した場所に置くなどして、
`md5 hogehoge.txt [比較するハッシュ値]`
というふうにして使う（比較するハッシュ値はオプション）

## 解説
一連の流れとして、

1. 引数が存在するか判定し、存在しない場合は弾く
2. 引数1からハッシュ値を算出して変数createdhashに代入、表示
3. 引数2が存在しない場合は終了、そうでない場合は比較して比較結果を表示したのち終了する

というふうになっている

おわり

## 参考
[バッチファイルでコマンドの実行結果を変数に代入する - treedown’s Report](https://blog.treedown.net/entry/2020/04/02/010000)
アドベントカレンダーの参加を考えている人の背中を押したい

# 初めて参加したアドベントカレンダー
私は2017年の[新卒専用](https://qiita.com/advent-calendar/2017/fresh)アドベントカレンダーに参加して、
12日に[嫁と話すLineBotをつくる](https://qiita.com/hirorin/items/47d97c541d6e702e7b96)を投稿しました。

# 当時の自分のQiita使用具合
当時からアウトプットする場が欲しいと思ってたので、気になったことは調べてQiitaにも投稿していました。
新卒になってから、Qiitaを活用し始めたのでアドベントカレンダーの存在は知りませんでした。

# アドベントカレンダーについて
当時一緒に働いていた同期に「一緒にここに記事を投稿しないか？」と誘われて、アドベントカレンダーの存在を知りました。
不安はなかったわけではないですが、新卒専用だったせいかそこまで抵抗はなかったです。


# 考えがちな抵抗
アドベントカレンダーやってみたいな～と迷っている人が考えがちな抵抗は主に以下なのかなと思ってます。
（あくまで個人の考えです）

- アイデアないのに参加予約したら邪魔になるかも
- 周りのレベル高そう
- 投稿する日に作り切れるか不安

## アイデアないのに参加予約したら邪魔になるかも
枠があと一つで参加してみたいけど、何にも考えてないと邪魔かな・・・。そんなこと考えるかもしれません。

<h1>でも大丈夫！邪魔なんかじゃないよ:relaxed:</h1>

枠が埋まればカレンダーは増やせます。
Qiitaのお祭りのようなものです。迷っているなら参加予約して一緒にカレンダーを盛り上げましょう。
ベテランの人も予約入れた日はアイデアがない人が結構多いです。「なんか書く」って書いておいて今から考えるというパターンはよくあります。
おぼろげでもアイデアがあるならいわずもがな。

## 周りのレベル高そう
アイデアはあるけど、予約してる人がレベル高い人ばかりで不安になるかもしれません。

<h1>でも問題ない！比較する場じゃないよ:relaxed:</h1>

アドベントカレンダーは周りと比較して、勝負をする場所ではありません。
仕事なら営業成績とか、なにかしら結果を出す必要があるかと思いますが、Qiitaではそんなものは不要です。
それに、隣の芝生は青く見えるものです。周りから見ればあなたの記事も素晴らしいものです。
他の人の記事に助けられることがあるように、あなたの記事で誰かが助かるかもしれません。自信を持って参加しましょう。

## 投稿する日に作り切れるか不安
めちゃくちゃわかる・・・出来なかったらどうしようって考えますよね。

<h1>でも落ち着いて！これは業務じゃないよ:relaxed:</h1>

業務なら納期が決まっており、間に合わせるために残業することもあるでしょう。
でも記事の投稿は業務じゃありません！納期ももちろんありません！当日に投稿できなくてもペナルティはありません！当然責める人もいません！
「投稿日に間に合わせる」という意識は大事だと思います。でもそれに囚われるあまり、参加を見送るのはもったいないです。
ぶっちゃけ、開発の途中だとしても「今はこんな感じですが、今後も開発継続します！」って記事で書いておいて投稿したってOKです。


# まとめ

<h1>迷っているくらいなら投稿しよう！</h1>
[2021年] AWS Certified Cloud Practitionerに本2冊で合格した話

# はじめに
10年以上セキュリティエンジニアとして働いていましたが、訳あって最近インフラのリーダーになりました。会社では主にAWSを利用しているため、勉強がてらAWSの資格を取得したという話です。

ちなみにセキュリティエンジニアの時はAWSを使うことはなくGCPで色々なことをやっていました。AWSを使わなかった理由は、数年前にAmazonアソシエイトを意味不明な理由で垢バンされたからです。。

# 勉強方法
以下2冊の本を読み込みました。どちらも1年以上前の本ですが特に問題なかったです。
Amazonアソシエイトを垢バンされているためアフィリエイトリンクにはなっておりません。安心してクリックしてください。

以下の本はシンプルにまとまっていて覚えやすい＆理解しやすかったです。
3日くらいかけて内容を暗記しました。

https://www.amazon.co.jp/dp/4797397403

次に、上の本1冊だけでは不安だったので以下の本も買いました。
上の本に記載していない内容が多々ありましたので買ってよかったです。
こちらも3日くらいかけて内容を暗記しました。

https://www.amazon.co.jp/dp/4798062952

本を読む以外の勉強は一切していません。
AWSに触れることもありませんでした。

# 受験
ピアソンVUEで自宅から受験しました。
楽勝だと思って受験しましたが、見たことない単語がでてきたりいまいち内容が理解できない問題が出てきたりしてもしかして落ちたかも・・と思いながら解いていました。
結果は無事合格できたのですが、運が良かった気もします。

# 感想
AWS Certified Cloud PractitionerはAWSの入門レベルの資格ですが、この内容を把握するだけでも社内の打ち合わせで話について行けるようになりました。
AWS全体を広く浅く把握するためにはちょうどよい勉強ができたと思います。
【初心者向け】React QueryでQiita APIを叩いてみる

## これはなに？
個人的に最近話題のReact Queryについて入門してみようと思うので導入がてら記事を書いてみました。

## やってみようと思った背景
個人的に話題と書いたのにも理由があり、npm trendsで見てみると今年の1月頃から急激に伸びているのです。
これを見た筆者は驚いて今書いている、という感じです。

![スクリーンショット 2021-11-26 17.29.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316760/8546e052-bc3d-0d6d-e143-3f11195063e4.png)
出典: [npm trends](https://www.npmtrends.com/)


## 作ったもの
[Qiita API](https://qiita.com/api/v2/docs)を使って記事を取得してそのまま表示する画面を作成しました！

https://github.com/mu-suke/nextjs-sample-app/tree/feature/react-query



## 導入手順
導入するにあたって、今回は以下の要件で進めていきます

- React FW: `Next.js`
- UIライブラリ: `Chakra UI`


### 1. プロジェクトの作成
作成手順は別の記事でも書いているので、ここでは省略させていただきます。

https://qiita.com/mu-suke08/items/28fefe92b113c8f1c25d

### 2. パッケージの追加
https://react-query.tanstack.com/installation

バージョンは執筆時点で最新の`3.33.5`です。

### 3. 導入
まず`App.tsx`にProviderを記載します

```tsx:App.tsx
import "@/styles/globals.css"
import type { AppProps } from "next/app"
import React from "react"
import { ChakraProvider } from "@chakra-ui/react"
import { QueryClient, QueryClientProvider } from "react-query"

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      staleTime: 300000,
    },
  },
})

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <ChakraProvider>
        <Component {...pageProps} />
      </ChakraProvider>
    </QueryClientProvider>
  )
}
export default MyApp
```

次にreact queryを使ってQiita APIを呼び出している部分

```tsx:pages/reactQuery.tsx
import { Box, ListItem, Text, UnorderedList } from "@chakra-ui/react"
import { NextPage } from "next"
import React from "react"
import { useQuery } from "react-query"
import axios from "axios"

const ReactQuery: NextPage = () => {
  const query = "nextjs"

  const { data, isLoading } = useQuery("qiita", async () => {
    const { data } = await axios.get("https://qiita.com/api/v2/items", {
      params: {
        page: "1",
        per_page: "20",
        query: query,
      },
    })
    return data
  })

  if (isLoading) {
    return <Text>Loading...</Text>
  }

  if (!data) {
    return <Text>Error Occured</Text>
  }

  return (
    <Box>
      <UnorderedList>
        {data?.map((item: any, index: number) => {
          return <ListItem key={index}>{item.title}</ListItem>
        })}
      </UnorderedList>
    </Box>
  )
}

export default ReactQuery
```

オプションに関しては`App.tsx`の`queryClient`で、実際に使用する`reactQuery.tsx`ではわずか10行ほどで実装できてとてもシンプルです。

https://react-query.tanstack.com/reference/useQuery


defaultOptionsをトップレベルに書くだけで全画面で適用されるので無限に再フェッチするというアホみたいなことを防げたりするので良いなと思いました。

### 今回適用したデフォルトオプション
```tsx
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
      staleTime: 300000,
    },
  },
})
```

`retry`:
リクエストに失敗した場合に何回まで再リクエストを送るか

`refetchOnWindowFocus`:
window.focus時に再取得を行うかどうか

`staleTime`:
再取得する間隔の指定
デフォルトでは0なので注意
ミリ秒で指定


## まとめ
今回はReact Queryを使って実際に動かすところまでやってみましたが、`mutations`や`query invalidation`、その他のオプションをまだ使いきれていないので、また次回調べながら記事にしていこうと思います。
<Java学習中>ラッパークラス


今回はラッパークラスについてです。

最近は入門書を読み終えて、〇aizaのスキルチェック問題（Dランク）を解きながら手を動かして慣らしています。

そこではよく計算問題が出てくるので、最初に文字列として渡されたデータをInt型などに直したりしないといけないことが多々ありました。

そこで使ったのがラッパークラスでした。
今回は文字列⇔整数の変え方をメモしておきます。

ラッパークラスとはなんぞやと思い調べたら、

「ラッパークラスとは基本型の値をラップするオブジェクトの事」で、ではラップするとは何なのかというと、

「基本型データに対して何かしらの操作を行う時、オブジェクトとして扱えるようする」こと。

例えるなら、目の前に「りんご」があるとします。それを梱包して配達物で見るような「荷物」という外見に変化させること。りんごをそのまま郵便局に持って行っても受け付けてはくれませんので、荷物として扱われるような処理を施して初めて、その後の処理を受け付けてくれます。　といった具合でしょうか。間違っていたらスイマセン。

では実際にどういう使い方をするのか。

問題では例えば、与えられた数字を10倍するとどんな結果になるのかという算数の問題がよく出てきます。

```java
public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);　 //Scannerクラスは指定した型の値を読み込むクラス
        String line = sc.nextLine();   //例えばline == "5"である時
        System.out.println("XXXXXX");
    }
}
```
変数lineは、String型になっていますので、このままでは計算に使えないためInt型に変換します。
System.out.println();より上で、

```java
int n = Integer.parseInt(line);
```
Integerというラッパークラスを使って、引数の中身を整数として扱う（ParseIntの部分）という処理をしたデータを変数ｎに代入しました。

後は計算結果を表示するだけでＯＫです。

```java
System.out.println(n*10);  //n == 5;
```
```text:実行結果
50
```

では次は数値から文字列です。
先ほどの変数n を再び文字列にする場合、

```java
String str = Integer.toString(n);
```

toStringでも、引数の中に変換したい型の値を入れればＯＫです。


今回はここまでとします。
何かご指摘ありましたら、ツッコミよろしくお願いいたします！
Javaのマルチスレッド実装例(前編)

この記事は、[シアトルコンサルティング株式会社 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/seattleconsulting)の1日目の記事です。

こんにちは、シアトルコンサルティングの長岡と申します。
この度、弊社シアトルコンサルティング株式会社でAdvent Calendarに参加することになりました。

TeamTech Move the WorldをMissionに掲げ、日々全力で業務に取り組んでおります！
少しでも興味を持って頂けたら下記のサイトを覗いてみてください！

コーポレートサイト
https://www.seattleconsulting.co.jp/
Wantedly
https://www.wantedly.com/companies/seattleconsulting

よろしくお願い致します！
## はじめに
今回はJavaにおけるマルチスレッドの実装例を紹介します。
実務でシングルスレッドからマルチスレッドへの改修案件に携わったこともあり、振り返りついでに紹介します。
前編は基本的な実装例、後編では実装の注意点について実装例を交えて紹介します。
エンジニアになって初めて担当させて頂いた案件で、駆け出しエンジニアの方たちにも理解できる内容だと思うので、ぜひ読んでみてください！

## マルチスレッドとは
Javaが採用している並行処理プログラミングのモデルが「マルチスレッド」と呼ばれています。  
本来プログラムは上から下に順に処理していきますが、マルチスレッドを実装すると本来順番に呼ばれるプログラムを同時に動作させることができます。

## マルチスレッドのメリット
マルチスレッドを使用することにより、直列で処理していたプログラムを並列に処理していくため直列処理の待ち時間が無くなり、アプリケーション全体で見た実行速度が速くなります。

## 実装の注意点
各スレッドで同じオブジェクトにアクセスした際に、同じフィールドの値を変更してしまう為、期待した値にならない可能性があり注意が必要です。

## 実装例
マルチスレッドの実装には、RunnableかCallableを使用します。
Runnableの場合は戻り値の指定ができず、例外をスローできません。
Callableの場合は任意の戻り値を指定でき、例外をスローすることができます。

実務で使用したCallableを使用し、メインクラスから3つのサブクラスを並行して呼び出します。
サブクラスは、サブクラス名+開始 を表示した後、３秒間スリープし、サブクラス名+終了を表示させるプログラムにします。  

```java:Main.java

package main;

import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Callable;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.Future;

public class Main {

	public static void main(String[] args) throws InterruptedException {
		
		// 引数に生成するスレッド数を渡す
		ExecutorService exec = Executors.newFixedThreadPool(3);
		
		Callable<String> sub1 = new Sub1();
		Callable<String> sub2 = new Sub2();
		Callable<String> sub3 = new Sub3();
		
		List<Callable<String>> tasklist = new ArrayList<>();
		
		tasklist.add(sub1);
		tasklist.add(sub2);
		tasklist.add(sub3);
		
		List<Future<String>> future = exec.invokeAll(tasklist);
		
	}
	
}

```
サブクラスの3つは処理内容は同じで出力するサブクラス名が違うだけなので他二つは割愛します

```java:Sub1.java
package main;

import java.util.concurrent.Callable;

public class Sub1 implements Callable<String>{
	
	@Override
    public String call() throws Exception {
        System.out.println("sub1開始");
        Thread.sleep(3000);
        System.out.println("sub1終了");
		return null;
    }
}
```

実行してみます。

```
sub1開始
sub3開始
sub2開始
sub3終了
sub2終了
sub1終了

```
成功です。
マルチスレッドで実行している為、実行する度に開始と終了の順番がバラバラになります。

## さいごに
今回はプログラムをマルチスレッドで動かしてみました。
次回は実装する上での注意点、排他制御について書いていこうと思います。
[Javaのマルチスレッド実装例(後編)](https://qiita.com/Ryooooo/private/1160aff479ff0d4b78f3)

## 参考
・[マルチスレッドとは](https://khasunuma.gitbooks.io/java-study/content/docs/chapter10.html)
・[マルチスレッドの利点](https://docs.oracle.com/cd/E19620-01/805-5818/6j5g78lki/index.html)
・[Callableについて](https://codechacha.com/ja/java-callable-vs-runnable/)
VSCodeの便利機能について

# VSCodeの便利機能について

今回は、VSCodeの便利な機能と拡張機能を紹介します。
**この内容はMacOS向けです。**

![スクリーンショット 2021-11-26 19.32.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/9c381b95-32b7-cb99-28ad-8cc6b1acbf26.png)

## 目次
<details>
<summary>Open</summary>
- VSCodeでターミナルを表示
- VSCodeでGitを使う
- 自分が使っている拡張機能
- まとめ
</details>

## VSCodeでターミナルを表示

まずは、VSCodeでターミナルを表示させる方法です。

### ターミナル表示のコマンド

ターミナルを表示させるコマンドは下記の通りです。

`Ctrl + Shift + ^`

GUIでも表示できます。

![スクリーンショット 2021-11-26 19.37.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/f2e665d0-cb14-af66-2b11-16fb0112abcd.png)

### ターミナルを使う

ターミナルの見た目は下記の通りです。

![スクリーンショット 2021-11-26 19.36.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/f05d6f67-ac55-699e-fc25-e08ed3e8bf96.png)

DockerやGitも使うことができます。

![スクリーンショット 2021-11-26 19.40.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/50efc4dd-b30e-7581-51ab-8bbf67021d2a.png)

![スクリーンショット 2021-11-26 19.40.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/755faf14-8ca6-f95a-5d57-06edebf22232.png)

## VSCodeでGitを使う

VSCodeでは、GUIでGitを使うこともできます。

![スクリーンショット 2021-11-26 19.49.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/752f9442-c076-f16f-2eac-192f63302a8d.png)

設定方法は省略しますが、 [こちら](https://qiita.com/ykmchd/items/638275ec34cfd58a99e0)のykmchdさんの記事で、設定できます。

### 何ができるのか

Gitのクローンからステージング、コミットやプッシュまでできます。また、プル（同期）もできます。VSCodeだけで**クローン→変更→ステージング→コミット→プッシュ**ができるので、とても便利です。後で紹介するGit Graphという拡張機能を使うとツリー表示ができるので、是非見てください！

## 自分が使っている拡張機能

### 1. Docker

Dockerは、VSCodeの中でコンテナのビルドや、必要ファイルの生成、Dockerイメージのビルド、コンテナーとイメージの開始や停止、削除をGUIでできて、とても便利です。

![スクリーンショット 2021-11-26 19.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/0f156b3f-24c8-3cf7-2533-a0229b805691.png)

### 2. Live Preview

Live Previewは、HTMLページをVSCodeでプレビューできる拡張機能です。Liveとついているように、リロードなしで自動的に更新されていきます。

![スクリーンショット 2021-11-26 19.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/6e9dd7e8-50e4-285f-e1da-a8fb886a05b5.png)

### 3. Git Graph

Git Graphは、Gitをツリー表示できる拡張機能です。コミットやマージなどが色分けされてとても見やすくなります。変更を見ることもできて、わかりにくいGitもわかりやすくなります。

![スクリーンショット 2021-11-26 19.53.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303388/eaa11bbf-0e5b-9287-f19f-4781f3d8f235.png)

## まとめ
VSCodeは、CLI、Git、Dockerなど、様々なことを１つでこなしてくれる便利なエディターです。みなさんも使ってみてください！
ソケットタイプとは

# はじめに
個人的まとめ。ソケットタイプとは、プロセス（ソケット）の通信方式を指定するものである。

# ソケットタイプの種類
## Stream sockets

- TCPを使った通信
- ソケットタイプは`SOCK_STREAM`

## Datagram sockets

- UDPを使った通信
- ソケットタイプは`SOCK_DGRAM`

## Raw sockets

- ICMPへのアクセスを提供
- 通常のアプリケーションが使用するものではなく，新たなプロトコルの開発や新たなプロトコルの機能の開発の際に使われるもの
- ソケットタイプは`SOCK_RAW`

# ストリームとデータグラムの違い
ストリーム通信はTCPによって、データグラム通信はUDPによって行われる。

TCPはスリーウェイハンドシェイクによって、クライアント・サーバー間のコネクションを確保してからデータの送受信を行う。クライアント・サーバー間にデータの流れ（Stream）ができるのでストリーム通信と呼ばれる。

対してUDPはクライアント・サーバー間のコネクションを確保せずに一方的にデータを送りつける形なので、送信したいデータを制御情報等を付加された一定程度の大きさのデータの塊（データグラム）に分割して送信することからデータグラム通信と呼ばれる。

# 参考
[Socket Types (Network Interface Guide)](https://docs.oracle.com/cd/E19455-01/806-1017/sockets-4/index.html)
Linuxサーバーの使用メモリ量が全体の80%に達した時に特定のコマンドを実行する

# はじめに

cronでLinuxサーバーの使用メモリ量が全体の80%に達した時に特定のコマンドを実行するための動作確認とcron設定を行った際のメモです。

# 参考記事

https://qiita.com/SECUAL_masa/items/f402546bca49c4943e7e

# コマンド

```Text:コマンド例
[[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.8 ]] && command
```

# 動作確認

```Text:動作確認
[root@linux userA]# free
              total        used        free      shared  buff/cache   available
Mem:        8166304     2272464     5094276         452      799564     5645496
Swap:             0           0           0
[root@linux userA]#
[root@linux userA]# [[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.8 ]] && echo $?
[root@linux userA]# [[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.2 ]] && echo $?
0
[root@linux userA]#
```

全体のメモリ量が 8166304。
現在の使用量が 2272464。
ですので現在の使用量割合は0.27で27%。

```Text:確認その1
[root@linux userA]# [[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.8 ]] && echo $?
```

このコマンドを実行した結果、次の行に何も表示されないのは"echo $?"が実行されていないからです。
これは判定が

```Text:判定その1
0.27 > 0.8
```

のようになり判定結果がfalseになったからです。
次に、

```Text:確認その2
[root@linux userA]# [[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.2 ]] && echo $?
0
```

このコマンドを実行した結果、次の行に"0"が表示されたのは"echo $?"が実行されたからです。
これは判定が

```Text:判定その2
0.27 > 0.2
```

のようになり判定結果がtrueになったからです。

```
$?にはコマンドの実行結果(0や1)が入る。
echo $?の表示結果が0なのに、何故echo $?が実行されたの？？？
0 && echo $? となりecho $?は実行されないはずでは？？？
```

と思われた方は先頭で記載している参考記事をご確認ください。

# 応用

最終的に私がやりたかったことでもあります。

使用量が80%を超えたらrebootを実行してサーバーを再起動したり、

```
[[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.8 ]] && reboot
```

そのサーバーで稼働している主要サービスが1個だけなら、

```
[[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.8 ]] && systemctl restart xxx.service
```

などでもよいと思います。

そしてcronでは

```Text:cron
* */1 * * * [[ $(free | head -2 | tail -n 1 | awk '{print $3/$2}') > 0.8 ]] && reboot
```

とします。

# 参考コマンド

今回は全体のメモリ量から使用量がどうなったかで判断していますが、freeコマンドは使用可能量/空き容量も取得できますので、使用可能量/空き容量がいくらまで減ったかで判断することも可能だと思います。
さらに使用量の算出方法の以下のようなやり方がありますので、参考までに記載しておきます。

### 実行中のプロセス全部をカウントして使用量を求める

```
ps aux | awk '{sum += $6}END{print sum}'
```

### 特定のプロセスだけに限定して求める

```
top -b -c -n 1 | grep PROCESSNAME | grep -v grep | awk '{print $10}' | cut -d. -f1
```

# 最後に

管理するLinuxサーバーの台数が多い場合はZabbixとか監視サービスなどを利用するのも手かと思います。
[Swift5] required 修飾子とは

# 用途

- サブクラスに、イニシャライザのオーバーライドを強制するとき
- プロトコルのイニシャライザをオーバーライドするとき

また、

required 修飾子は、イニシャライザ init() でのみ使用可能。

インスタンスメソッドでは使用不可。

# サブクラスに、イニシャライザのオーバーライドを強制する時

## 例：

```swift
class Animal {
    let name: String

    //
    // A（サブクラスにイニシャライザのオーバーライドを強制するときは、required 修飾子を付ける）
    //    
    required init() {
        self.name = "unknown"
    }
}

class Cat: Animal {
    //
    // A をオーバーライド（override 修飾子ではなく、required 修飾子を使うことに注意）
    //
    required init() {
        super.init()
    }
}
```

## ポイント

- サブクラスにイニシャライザのオーバライドを強制する場合、スーパクラスとサブクラスの両方にrequiredをつける。

# プロトコルのイニシャライザをオーバライドする時

## 例：

```swift
protocol SomeProtocol {
    //
    // A
    //
    init()
}

class Animal: SomeProtocol {
    //
    // A をオーバーライド
    //
    required init() {
    }
}
```

## ポイント

- protocolのイニシャライザはrequiredをつけない
- protocolのイニシャライザをオーバーライドする時につける

# 参考

[https://qiita.com/cotrpepe/items/3931c0c20ef43f4a18ac](https://qiita.com/cotrpepe/items/3931c0c20ef43f4a18ac)
UbuntuでWallpaperEngineみたく壁紙を動かしてみた

#使用環境
- OS:Ubuntu Budgie 20.10
- PC:CHUWI CoreBox
 - CPU:Intel® Core™ i5-5257U CPU @ 2.70GHz × 4
 - GPU:Mesa Intel® Iris(R) Graphics 6100 (BDW GT3)
 - ROM:256GB
 - RAM:8GB

#壁紙を動かすにあたって
- Gpu Video WallPaperをダウンロード
- Xwinwrapをダウンロード
- .mp4ファイル等の動画ファイルを用意 

他にも動かす方法はあっていろいろ試したが、自分的にはこれが一番楽だった

#Gpu Video WallPaperをダウンロード
まず、https://github.com/ghostlexly/gpu-video-wallpaper からzipファイルをインストールし、展開する。
※このとき、ディレクトリは任意で（覚えやすい場所のほうがいいかも）
※これも任意だが、展開したフォルダ名が長くて気に食わない場合はリネームするのもアリ
緑色のCodeと書かれている箇所のDownload zipでzipファイルをダウンロードできます。
自分のディレクトリ構成は

```
home__...
     |__Downloads__...
                 |__gpu-video-wallpaper-master


gpu-video-wallpaper-master__LICENSE
                         |__install.sh
                         |__settings.conf
                         |__video-wallpaper.sh
                         |__gui.ui
                         |__readme.md
                         |__video-wallpaper.py
```

のようになりました。一応操作方法が書かれていますが、念のため記述しておきます。私のディレクトリ構成の場合だと

```
~$ cd Downloads/
~/Downloads$ cd gpu-video-wallpaper-master/
~/Downloads/gpu-video-wallpaper-master$ ./video-wallpaper.sh --option PATH
```

のように記述します。--optionは

- 動画ファイルの再生を始める場合　--start
- 動画ファイルの再生を止める場合　--stop

のように記述します。
動画ファイルhoge.mp4がディレクリ/home/Video/hoge.mp4である場合、PATHにこれを代入します。
以上を踏まえて、hoge.mp4を壁紙として再生する場合、

```
~/Downloads/gpu-video-wallpaper-master$ ./video-wallpaper.sh --start /home/Video/hoge.mp4
```

と記述します。。。。が、このままだと動かないので、Xwinwrapをmakeします。

#Xwinwrapをダウンロード

https://github.com/ujjwal96/xwinwrap のサイトに従ってダウンロードします。

```install
~/Downloads/gpu-video-wallpaper-master$ cd
~$ sudo apt-get install xorg-dev build-essential libx11-dev x11proto-xext-dev libxrender-dev libxext-dev
```
これを行ったあとに先程同様CodeのDownload zipをインストールして、解凍します。(ちゃんとどこに解凍したか忘れないように)するとこのようにxwinwrapが構成されるかと思います。lsコマンドでディレクトリ内を確認するとxwinwrapのディレクトリ構成が

```
xwinwrap___Makefile
        |__README.md
        |__xwinwrap.c
```
のようになるかと。このディレクトリ内でmakeを行うことでxwinwrap.cのコンパイルを行い、実行ファイルxwinwrapを作成します。
※コンパイル方法に関しては細かく記述しません。gcc等がインストールされていること前提で説明しています。

#ついに壁紙を動かす!
これで一通りの下準備は完了です。ディレクトリに関して、ターミナルでgpu-video-wallpaper-masterのディレクトリに移動した後、先程xwinwrapで作成した実行ファイルxwinwrapをコピペします。これを行って、ディレクトリ構成は

```
gpu-video-wallpaper-master__LICENSE
                         |__install.sh
                         |__settings.conf
                         |__video-wallpaper.sh
                         |__gui.ui
                         |__readme.md
                         |__video-wallpaper.py
                         |__xwinwrap
```
のようになります。
※ここのxwinwrapはディレクトリではなく、xwinwrap.cをコンパイルして生まれた実行ファイルなので注意してください。
そしたら先程の説明のように動画ファイルを動かします！ちなみに無限再生になるので、--stop等で気分で止めてください。

```
~/Downloads/gpu-video-wallpaper-master$ ./video-wallpaper.sh --start /home/Video/hoge.mp4
```
自分はこれで動きました。これで動かない場合、依存ライブラリがインストールされていない可能性がありますが、ほぼ必要としているライブラリはエラーコード内に記されているかと思われます。
サーバとローカル間のファイルのダウンロード，アップロード

# はじめに
個人的に自分がわかりやすいように，調べたことをまとめました．

- ファイルをアップロード，またはダウンロードする
- SSH接続できるサーバであることが前提でpemファイルが必要．
- pemファイルやSSH接続については下記を参照

https://qiita.com/Rihib/items/9b1f611619695cbf68a0

# scpコマンド

- scpコマンドは、sshを利用してリモートマシン間でファイルコピーするコマンド

```bash
scp ＜オプション＞ ＜コピー元＞ ＜コピー先＞
```

- `i`オプションは秘密鍵ファイルを指定するもの
- `＜コピー元＞` か`＜コピー先＞`のどちらでも，サーバにあるファイルを指定するときは`＜サーバにログインするときに使うユーザ名＞@＜サーバのIPアドレス＞:＜サーバにあるファイルのパス＞`とすればいい．

# アップロード

- 自分のターミナルから操作する．
- サーバにログインして操作するわけではない．

## ファイルをアップロード

```bash
% scp -i ＜pemファイルのパス＞ ＜サーバにログインするときに使うユーザ名＞@＜サーバのIPアドレス＞:＜サーバにあるダウンロードしたいファイルのパス＞ ＜ローカルにあるダウンロード先のパス＞
```

## ディレクトリをアップロード

- `r`オプションを付け足すだけ

```bash
% scp -r -i ＜pemファイルのパス＞ ＜サーバでのログインユーザ名＞@＜サーバのIPアドレス＞:＜サーバにあるダウンロードしたいファイルのパス＞ ＜ローカルにあるダウンロード先のパス＞
```

# ダウンロード

## ファイルをダウンロード

```bash
% scp -i ＜pemファイルのパス＞ ＜ローカルにあるアップロードしたいファイルのパス＞ ＜サーバでのログインユーザ名＞@＜サーバのIPアドレス＞:＜サーバにあるアップロード先のパス＞
```

## ディレクトリをダウンロード

- `r`オプションを付け足すだけ

```bash
% scp -r -i ＜pemファイルのパス＞ ＜サーバでのログインユーザ名＞ ＜サーバにログインするときに使うユーザ名＞@＜サーバのIPアドレス＞:＜サーバにあるアップロード先のパス＞
```

# 参考

[Linuxコマンド【 scp 】リモートマシンにファイルコピー - Linux入門](https://webkaru.net/linux/scp-command/)

[AWSのEC2にmacからSSHする方法 - Qiita](https://qiita.com/nakm/items/695e41d8e71d0d281ac4)

[[EC2] scpコマンドで、ファイルのダウンロード/アップロード - YoheiM .NET](https://www.yoheim.net/blog.php?q=20180314)
Typescriptで作るクラスの初期化パターン

初めまして、株式会社Another works CTOの塩原です。

弊社ではフロントエンドでもサーバーサイドでもTypescriptを使っているのですが、クラスの初期化パターンでいろいろと試行錯誤して方針を決めたので今回はその試行錯誤の過程で考えたパターンを紹介できればと思います。

# constructor(Partial<Class>)

```
class Klass {
  public propertyA: string
  public propertyB: string
  constructor(init: Partial<Klass>)　{
    this.propertyA = init.propertyA || ''
    this.propertyB = init.propertyB || ''
  }
}

new Klass({propertyA: 'test', propertyB: 'test'})
```

## メリット
記述量が少なくて済む

## デメリット
Partialなので、確実に初期化したいものでもoptionalで渡せてしまう

# constructor(Readonly<Class>)

```
class Klass {
  public propertyA: string
  public propertyB: string
  constructor(init: Readonly<Klass>)　{
    this.propertyA = init.propertyA
    this.propertyB = init.propertyB
  }
}

new Klass({propertyA: 'test', propertyB: 'test'})
```

## メリット
記述量が少なくて済む
Readonlyでは、propertyがoptionalのものとrequiredのものでそれぞれ初期化する際の引数に反映される

## デメリット
Readonlyではこのクラスにメソッドが生えていた場合に、関数も引数として渡さないといけなくなる

# constructor(public propertyA: string, public propertyB: string)

```
class Klass {
  constructor(public propertyA: string, public propertyB: string)　{}
}

new Klass('test', 'test')
```

## メリット
今回の中で最も記述量が少ない

## デメリット
引数の数が増えると渡す側を見た時になにが渡されているのかがわからない、渡す順番を間違えても気づきくい場合がある。(型が同じだと)

# constructor(init: {propertyA: string, propertyB: string})

```
class Klass {
  public propertyA: string
  public propertyB: string
  constructor(init: {propertyA: string, propertyB: string})　{
    this.propertyA = init.propertyA
    this.propertyB = init.propertyB
  }
}
new Klass({propertyA: 'test', propertyB: 'test'})
```

## メリット
上三つのデメリットを全てクリアしている

## デメリット
記述量が多い
propertyの初期化漏れが起こるとエラーに気づけない

# propertyの初期化漏れが起こるとエラーに気づけない -> strictPropertyInitializationがあった！
tsconfig.jsonで`strictPropertyInitialization: true`にすると初期化漏れがあればコンパイル時にエラーを出してくれる

strictPropertyInitialization最高！

# 結果
結果的に、tsconfig.jsonを設定することで、最後の書き方にしました。
他にももっといい書き方があればまた記事を更新していきます。

# Another worksでは一緒に働く仲間を募集しています！
https://www.wantedly.com/projects/729427

https://www.wantedly.com/projects/617507

https://www.wantedly.com/projects/683778

https://www.wantedly.com/projects/691559
iOSのエミレーターにキーパッドが表示されない!!!

## キーパッドの表示の仕方
Swiftのチュートリアルをやっていてエミレーターにキーパッドが表示されなかった???
解決方法は、Cmd + kをエミレーターを表示しているときに押せばできました。

![スクリーンショット 2021-11-26 19.25.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2303722/d6ef429c-6cb8-0a01-1c53-928f9a5424dd.png)
PHP で .txt ファイルから文字列を読み取り、配列に変換し表示させる

プログラミング初心者の Qiita 初投稿なのでヘタクソな文面、ご了承ください。
<br>


PHP を習いたてで、下記のような流れで制作していて少しつまずいた点を書いていきます。
1. 「post.php」というファイルで form を作成し「write.php」へ送信
2. 「write.php」から「data.txt」へデータを書き込み
3. 「data.txt」のデータを「read.php」というデータで読み取り

今回詰まったところは上記 3 の手順です！  
ということで自分が詰まって、解決まで数時間かかった超しょぼいオチをご覧ください。

まず、「data.txt」は以下のデータが入っております。

```
2021-11-25 06:37:41,たけし,a@g.com,29
2024-6-09 12:08:26,まさる,aghf@aggaag.com,40
```

左から順に「日付, 名前, メールアドレス, 年齢」です。
今回は 2 人がフォームを送ってくれたので、 2 行です。
<br>
はい、そして僕が最初に書いたのはこちら ↓

```cpp
<?php
$filename = 'data/data.txt';
$fp = fopen($filename, 'r');
while (!feof($fp)) {
    $txt = fgets($fp);
    $datas = explode(",", $txt);
    $lines = file($filename);
    print_r($lines);
}
fclose($fp);
echo __FILE__;
?>

<tr>
    <td><?= $datas[0]; ?></td>
    <td><?= $datas[1]; ?></td>
    <td><?= $datas[2]; ?></td>
    <td><?= $datas[3]; ?></td>
</tr>
```

うん、意味わからんコードだ。
ちなみに出力結果としては、こんなんでした ↓
```
2024-6-09 12:08:26 まさる aghf@aggaag.com 40
```

まさるしか受け取れねーよ！！！ってキレてました。
なぜか最後の行のデータしか取得ができませんでした。

その後はこんな解決法を模索 ↓
* include() の値を取得して編集して配列にできねえかなあ
* 一旦行ごとに配列にしないといけないのでは？

ちなみに一行ごとに配列にはこちらでできました ↓

```
// 行ごとに配列にする処理
    $file = dirname(__FILE__) . '/data/data.txt'; // dirname(__FILE__) でファイルまでのデータのパスを取得
    $array = @file($file, FILE_IGNORE_NEW_LINES);
    print_r($array);
```

<br>

結局原因はただただ、繰り返し処理の while の中に出力処理を入れてなくて、もはや PHP の中から飛び出してかいておりました。
この部分 ↓

```
<tr>
    <td><?= $datas[0]; ?></td>
    <td><?= $datas[1]; ?></td>
    <td><?= $datas[2]; ?></td>
    <td><?= $datas[3]; ?></td>
</tr>
```

<br>

要はこれを while 文の中に書いて整えるだけでしゅーりょー。
4 時間くらい溶かしたのでは。。。？


```cpp
// .txt データを配列にする処理
    $fp = fopen('data/data.txt', 'r'); // fopenでファイルを開く（'r'は読み込みモードで開く）
    while (!feof($fp)) { // feof は最後までの読みこれたかどうか。while の時に使用する。
        $txt = fgets($fp);// fgetsでファイルを読み込み、変数に格納

        // 下記で呼び出し表示
            $ary = explode(",", $txt);
            print "<tr>";
            print "<td>$ary[0]</td>";
            print "<td>$ary[1]</td>";
            print "<td>$ary[2]</td>";
            print "</tr>";
    }
    fclose($fp);  // fcloseでファイルを閉じる
?>
```

これからも頑張ろう。
【SwiftUI】NavigationBarTitleを中央に表示する方法

#NavigationBarTitleのセンタリング
以下のようにToolbarItmeに**.principal**を指定することで中央に配置してくれます。

```swift
.toolbar {
  ToolbarItem(placement: .principal) {
    Text("Title")
  }
}
```

#参考
https://developer.apple.com/forums/thread/682614
Google Storage/bucket からデータをダウンロードする

###背景

このような悩みの方いますか？
ある日突然お客様からデータが連携されて、gs://から始まるリンクとキーであるJsonファイルをもらいました。
それで、データダウンロードしてくださいと。。

ごめん、GoogleCloudはまだ触ったことがないです。。。

最初は一度Googleで調べて、何かしらコマンドを利用して済みましたが、
メモをしなかったので、２ヶ月後もう一度データが連携されて、もう一度調べ直すという。。。


###簡単コマンド


```console.

// キーを利用してgcloudへ認証する
// ProjectIDはキーファイルの中で分かる。
gcloud auth activate-service-account --key-file xx.json --project pj_id

// Bucketを確認したい、でも権限ない〜〜〜 ま、いいや
gsutil ls

//　いただいたフォルダでリスト
gsutil ls gs://xxx/

// ファイルをダウンロード
gsutil cp gs://xxx/* local/folder/


```

はい、メモです。。。
M1チップのMacでDockerを使った環境構築(エラーと解決方法)

#エラー発生の経過と原因
Dockerで環境構築するためにビルドを実行した結果、yarnのインストールが止まってビルドに失敗し、以下のようなエラー文が出てしまった。

```
=> ERROR [2/9] RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -   && echo
------
 > [2/9] RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -   && echo "deb　https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list  && apt-get update -qq  && apt-get install -y nodejs yarn chromium-driver shared-mine-info  && mkdir /myapp:
#5 1.202 Warning: apt-key output should not be parsed (stdout is not a terminal)
#5 1.535 gpg: no valid OpenPGP data found.
#5 1.535 Segmentation fault
------
... 
 ```

どうやらDockerFileが問題のようだ。
原因は`M1チップ搭載のMac`だった。
curlコマンドでは docker gpgダウンロード時にエラーが出てしまい、
curlコマンドを使うには、curlにproxy設定をしなければ動かなさそう。

#解決方法
M1チップ搭載のMacではDockerFileのコードを修正する必要がある。
今回はcurlにproxy設定をせずに実装する。

元のコード

```Dockerfile
FROM ruby:2.7.1
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn chromium-driver shared-mime-info\
    && mkdir /myapp
...
```


修正後のコード

```Dockerfile
FROM ruby:2.7.1
###　以下を修正 ###
RUN wget --quiet -O - /tmp/pubkey.gpg https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
###　以上を修正 ###
    && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
    && apt-get update -qq \
    && apt-get install -y nodejs yarn chromium-driver shared-mime-info\
    && mkdir /myapp
...
```

これで再度ビルドすると正常に起動した。
このようにDockerfileを修正しても、intelチップのMacでも動くことを確認した。

#参考文献
https://zenn.dev/junki555/articles/2de6024a191913
https://qiita.com/seigot/items/97be941d1568255fb0cd
https://qiita.com/tkj/items/c6dad4efc0dff4fecd93
PowerShell フォルダとその中のファイルの日付を一括で変更する方法

タイトルの通り

```PowerShell
[string] $time = "YYYY/MM/DD HH:MM"
[string] $rootDir = "<フォルダパス>"

Function main() {
    Set-ItemProperty $rootDir -Name CreationTime -Value "$time"
    Set-ItemProperty $rootDir -Name LastWriteTime -Value "$time"
    ChangeTimeStamp($rootDir)
}

Function ChangeTimeStamp($targetFolder) {

    cd $targetFolder
    $files = Get-ChildItem *

    # 取得した情報を一つ一つ処理する
    foreach($item in $files) {
        Write-Host $item.FullName
        Set-ItemProperty $item.FullName -Name CreationTime -Value "$time"
        Set-ItemProperty $item.FullName -Name LastWriteTime -Value "$time" 
        if($item.PSIsContainer)
        {
            ChangeTimeStamp($item.FullName)
        }
    }
}

main
```
ComboBoxのプルダウンリストに100件以上のデータを表示させたい

#はじめに
こんにちは。
SAPUI5のsap.m.ComboBoxのプルダウンに表示するデータに関して
100件以上データを表示させる方法について実装する機会があったので備忘録として記事を書かせていただきます。

#コンボボックスのlength指定を変更する
sap.m.ComboBoxのプルダウンに表示させるデータをoDataなどから取得する際通常100件以上のデータは表示されません。
（101件目以降のデータは自動的に非表示となる）

その場合以下のようにitemsのlength指定を行うと100件以上のデータを表示させることができます。
以下の例だと500件データを表示させることができます。

```demo.view.xml
        <content>
          <m:ComboBox items="{ path: 'path名', sorter: { path: '項目名' }, templateShareable:true, length: 500}">
            <core:Item key="{ 指定Path }" text="{ 指定Path }" />                           
          </m:ComboBox>
        </content>
```

#この解決方法で考えられうる問題
* 表示するデータの件数によっては処理が遅くなってしまう可能性がある
* 表示させたいデータ数を変更したい際にlengthの値をいちいち更新しないといけない
* そもそも多数のデータが存在する場合はコンボボックスではなくValueHelpなどでユーザに絞り込みを行わせて入力を行うようにするのが奨励されているためあまりこの使い方は良くない？

#他の対処方法
Controller側でoModel.setSizeLimit(データ数);の関数を使えば
解消できるという記事やコメントを見かけましたがあまりうまく動作しませんでした………

#さいごに
25件？以上のデータを表示する場合はComboBoxではなくValueHelpの使用を推奨されているので
使用する機会は少ないかもしれませんがもしどうしてもComboBoxで対応を行いたい場合などにぜひご参考ください。
モーダルウィンドウでお知らせする

#モーダルウィンドウ表示#
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="KKXzJZw" data-user="yu2mi" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yu2mi/pen/KKXzJZw">
  Modal_20211208</a> by yu2mi (<a href="https://codepen.io/yu2mi">@yu2mi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#参考サイト#
https://coco-factory.jp/ugokuweb/move01/9-6-1/

https://github.com/humaan/Modaal/blob/master/README.md
JavaScript セミコロンについて

# function

###文末のセミコロンについて

```React:セミコロン
const mul = function(a, b){
 return a * b
}
```


JavaScriptでは文末にセミコロンがない場合、セミコロンがある前提で
コードを実行してくれます。
ですが、場合によっては意図しない挙動になってしまうことがあります。


```React:場合によっては...
const mul = function(a, b){
 return 
a * b
}
```


以上の場合、文末にセミコロンが付くため、
returnの結果がundefinedになってしまいます。


```React:場合によっては...
const mul = function(a, b){
 return; //undefined
a * b; //実行されない
}
```

# まとめ
・挙動がおかしい際、セミコロンの自動付与について確認してみる
・個人的にはセミコロンは記載した方がわかりやすいと思うが、コード規約等に追記した方がよいかも。
AWSまとめ (IPアドレス)

・パブリックIPアドレス-
TCP/IPというプロトコルでは通信先の特定にIPアドレス（ネットの住所みたいなもの）を使う。
このIPアドレスは32ビットで構成されるが、「192.168.1.2」のように8ビットずつ区切られたものを10進数に変換し、「.」で区切られた形で表されます。

ちなみに.内で区切られた数字は0~255までの数字で表され、このIPアドレスは重複しては住所の役割を全うしないのでICANNという団体が管理しています。
（しかし、このIPv4のアドレスの在庫が切れたので、新しく出たIPv6に移行するまではNATというIPアドレスを旧友できるシステムを開発したそうです。）

・プライベートアドレス
プライベートアドレスとはネットに繋がれていないアドレスのことです。（社内の電話回線など）

・・CIDR表記
IPアドレスのネットワーク部のビット数をIPアドレスの末端につけたもの。

例: 192.168.1.2のIPアドレスがあったとして、この場合ネットワーク部（192.168.1を2進数に直すと24個の数字で表されるので、24ビット）の24という数字をIPアドレスの末端につけた「192.168.1.2/24」がCIDER表記となります。

そしてこのビットというのは２進数で表されるので2のn乗の数になります。

・サブネットマスク表記
IPアドレスの.内の数字を2進数に直し、ネットワーク部は全て１とし、ホスト部はすべて0としたものがサブネット表記です。

サブネットマスク表記の例:192.168.0.0/255.255.0.0
LaravelのEloquentに $fillable でなく $guarded を使う

# はじめに

今回はEloquentの **$fillable** 指定についてです。
基本的に **$guarded** を使う方が良いと思っているのでそれについて簡単に書いてみようと思います。

# **$fillable** と **$guarded**

## $fillable

**$fillable** は指定したカラムのみ、create()やfill()、update()で値が代入される、所謂ホワイトリストです。

```php
<?php

namespace App\Models;

use App\Models\Model as AppModel;

class User extends AppModel
{
    protected $fillable = [
        'name',
        'sex',
    ];
}
```

## $guarded

**$guarded** は指定したカラムのみ、create()やfill()、update()で値が代入されない、所謂ブラックリストです。

```php
<?php

namespace App\Models;

use App\Models\Model as AppModel;

class User extends AppModel
{
    protected $guarded = [
        'id',
    ];
}
```

# 長所と短所

## $fillable

### 長所

- 指定したもの以外は入り得ない

### 短所

- カラムが増えるたびに追加する必要がある。
    -  特に横に長いテーブルだとツラい

## $guarded

### 長所

- 基本的に指定は増えない
    - id や email、 password などだけ

### 短所

- 指定していないものは全て入り得る

# 上記を踏まえた上で $guarded を選んぶ理由

複数代入されることを期待しているデータは、モデルごとにあるのではなく、**アクション毎** にあります。

また、↓のような **クソコード**  が書かれている場合カラムが横に長く伸びたテーブルの場合指定漏れが起きる可能性があります。

```php
$model->fill($request->all())->save();
```

↓のような場合のコードであればギリギリ許容されますが、そもそもの **$fillable** に漏れがあれば意味ありません。

```php
$model->fill($request->only('foo', 'bar'))->save();
```

# まとめ
- **\\$model->fill(\\$request->all())** と言うクソコードを止めよう
-  fill を防ぐのは Model の役目じゃない
- **$fillable** でも問題はないが、テーブルが横長になるほどツラくなる

**$fillable** のほうが便利でいい！な意見がありましたら是非教えてほしいです。
QGIS+VSCodeでのデバック環境構築

## はじめに

QGISのためのVSCodeでのデバック環境を構築します。


## 環境
- Windows 10
- QGIS 3.16
    - OSGeo4W


## 最初の環境構築(QGISとVSCodeのインストール)
1. QGISのインストール
    1. ネットワークインストーラーで可変な環境をインストールしましょう
    2. https://qgis.org/ja/site/forusers/download.html
2. VSCodeのインストール
    1. https://azure.microsoft.com/ja-jp/products/visual-studio-code/


## VSCodeでのデバック準備

**`ptvsd`のインストール**

1. OSGeo4Wのshellを起動する
    1. `C:/OSGeo4W64/OSGeo4W.bat`でcmdを起動する
2. python3をメインで使用するようにコマンドを実行する
    1. `py3_env`でpython3をメインで使えるようになる
3. `pip`をインストールする
    1. 存在する場合はインスールしなくてよい
    2. `python -m ensurepip --default-pip`でpipをインストールする
4. VSCodeでのデバック用に`ptvsd`をインストールする
    1. `python -m pip install ptvsd`

```cmd
> py3_env
> python -m ensurepip --default-pip
> python -m pip install ptvsd
```

**`QGIS`にDebug用プラグインをインストールする**

1. `プラグインの管理とインストール`を起動
    1. `メニューバー`→`プラグイン`→`プラグインの管理とインストール`
2. `debugvs`を検索しインストール

**`VSCode`側のデバック設定を作成**

1. `VSCode`を起動する
2. `launch.json`を作成する
    1. `.vscode/launch.json`
3. `launch.json`にリモートデバック用の設定を記載する

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Remote Attach",
      "type": "python",
      "request": "attach",
      "connect": {
        "host": "localhost",
        "port": 5678
      },
      "pathMappings": [
        {
          "localRoot": "${workspaceFolder}",
          "remoteRoot": "${env:HOMEPATH}/AppData/Roaming/QGIS/QGIS3/profiles/default/python/plugins/sample_plugin"
        }
      ],
      "justMyCode": false
    }
  ]
}
```
- localRoot
    - ローカルのコードが存在するパスを記述する
- remoteRoot
    - シンボリックリンクを使用している場合はリンク先のパスを記述する
    - 直接コードを編集している場合は`localRoot`と同じで良い
- justMyCode
    - 他のコード内までデバックを行ないたい場合、falseにする


## デバックを実行する
1. `QGIS`を起動する
2. `debugvs`の`Enable Debug for Visual Studio`を実行する
3. `VSCode`で`Python: Remote Attach`でデバックを実行する
4. `VSCode`上でブレイクポイントを設定し、`QGIS`でプラグインを実行する


## メモ
- シンボリックリンクで`plugins`にプラグインを入れていたため、デバックできずにハマった
    - `launch.json`の`RemoteRoot`にリンク先を書こう！！まじで
- `pip3`でインストールできないって困った
    - `py3_env`でpython3用にパスが通るぞ！！らく


## 参考

**環境構築**
https://www.gispo.fi/en/blog/cooking-with-gispo-qgis-plugin-development-in-vs-code/

https://qiita.com/yito/items/ac5a4c985105deef95b2

https://ginnannman.hateblo.jp/entry/QGIS_Plugin_Tutorial


**QGIS+PTVSD関連**
[**Debugging QGIS 3.x python plugins on OSX using VS Code**](https://gist.github.com/AsgerPetersen/9ea79ae4139f4977c31dd6ede2297f90)
[Debugging QGIS 3.x python plugins on Windows 10 using VS Code](https://gist.github.com/NicolaiMogensen/acfd8723720c4761aefef3cdfc2aa55a#debugging-qgis-3x-python-plugins-on-windows-10-using-vs-code)
[RemoteDebuggingQgisVsCode](https://gist.github.com/veuncent/c4589af14af42941ac0b0310e8240d6c)

**QGISのpipインストール参考**

https://qiita.com/ozo360/items/87334983e7e9b95d50e9

https://umar-yusuf.blogspot.com/2018/12/install-third-party-python-modules-in.html


**その他**

https://github.com/lmotta/debug_vs_plugin


https://docs.qgis.org/3.10/ja/docs/pyqgis_developer_cookbook/plugins/ide_debugging.html

https://chiakikun.hatenadiary.com/entry/2018/06/24/152430

https://github.com/Microsoft/ptvsd/
git add、commit、pushのコマンドのイメージ

動的なイメージを付けると、今何が起こっているのかが想像しやすくなると思ったのでメモ。



##gitコマンドのイメージ

```
$ git add
```
__セーブポイントへ向かう__


セーブ(commit)する準備



```
$ git commit
```

__本体にセーブ__

ローカルに保存（PC内に保存）

こうすれば…  ```git commit -m"何を変更したかここにメモできる"```



```
$ git push
```

__メモリーカードにセーブ__

bitbucket,githubなど貯蔵庫（リモートリポジトリ）へ保存


```
$ git pull
```
__セーブデータをメモリーカードからロード__

貯蔵庫から取り出す



＿＿＿＿＿＿＿

初歩的なことなんですがね、勉強していると、読み返しても手を動かしても身になっていないと感じることがあるので、知っているものに見立てて、どうなっているのか、何をしたのかをイメージしながら使うようにしています。😇
Athenaで Row is not a valid JSON Object - JSONException: Duplicate key

# tl;dr
`WITH SERDEPROPERTIES ('ignore.malformed.json' = 'true')`を付けてデシリアライズするだけ。

# 経緯
CloudTrailのログをAthenaで見ようと思い、以下の記事の通りにデシリアライズしていくつかクエリを実行した。

https://dev.classmethod.jp/articles/cloudtrail-athena/

するとこんなエラーが出た。

```
Row is not a valid JSON Object - JSONException: Duplicate key "tag"
```

適当にググったところこれが怪しかったが、

https://aws.amazon.com/jp/premiumsupport/knowledge-center/json-duplicate-key-error-athena-config/

エラーが微妙に違う。`HIVE_CURSOR_ERROR`は今回出ていない。

```
HIVE_CURSOR_ERROR: Row is not a valid JSON Object - JSONException: Duplicate key
```

デシリアライザのドキュメントを見てみたところ、

https://docs.aws.amazon.com/ja_jp/athena/latest/ug/json-serde.html

> ignore.malformed.json
オプション。TRUE に設定すると、不正な形式の JSON 構文を無視できます。デフォルト: FALSE。

という記述が。試したところエラーは出なくなった。
CloudTrailのJsonが壊れていたのだろうか、、、？