OmniAICreator/Qiita-1.07M huggingface dataset:
EclipseでWebアプリケーションを作成する

前回はEclipseをインストールしました。
今回はWebアプリケーション開発のうちプロジェクトの作成手順を紹介していきます:point_right::point_right::point_right:

<h2>開発環境</h2>
・MacBook Air（MacOS Monterey 12.0.1）
・Eclipse（IDE）
・Tomcat（サーバ）
・Java（言語）

<h2>プロジェクトの作成</h2>
アプリを起動したらまずこのような画面になりました。
![スクリーンショット 2021-12-04 11.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2346709/0154b684-9034-b57e-f857-0c7dd74a1ca2.png)
「新規 Java Web プロジェクトの作成」をクリック:point_up:
![スクリーンショット 2021-12-04 15.27.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2346709/d2c2f00f-24cb-3047-550a-cdbb92e80bdc.png)
「プロジェクト名」を決めます。「ターゲット・ランタイム」「構成」「動的Webモジュールバージョン」はデフォルトのままでOKです。

「ターゲット・ランタイム」で選択されている「Tomcat」とは簡単に言うと、Javaサーブレットで作成したWebアプリケーションを動かすためのサーブレットコンテナです。
　　_※Java サーブレットとは、Webサーバ上で実行されるJavaのプログラムのことです。_

![スクリーンショット 2021-12-04 17.32.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2346709/2802d423-8b5f-62bf-9c89-6c3351a68e68.png)

「次へ」＞「次へ」＞Webモジュール画面で「web.xmlデプロイメント記述子の生成」にチェックを入れておきます。

「完了」を押すとサンプルという名前のプロジェクトファルダが作成されました:clap_tone2:
ここにJavaソースなどを配置してWebアプリケーションを作っていきます✨
![スクリーンショット 2021-12-04 16.59.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2346709/27b7190e-6eb0-248f-7441-bcbc7bfce66d.png)


今回はここまでです。次回続きを書いていきます:muscle_tone2:
ruby-sketchの基本的記法

# 最初に
これはruby-sketchの記法メモ。
ruby-sketchが入っていない場合[こちらの情報](https://zenn.dev/tokujiros/articles/96f63899760cb0)が役に立つ。
使ったことのない人でAppleユーザーの人なら[このアプリ](https://apps.apple.com/jp/app/rubysketch-processing互換の開発環境/id1491477639)のExamples/Basicsの方が
この記事よりもずっとわかりやすい。
[ドキュメント](https://xord.org/rubysketch/gem/doc/0.3.19/RubySketch/Processing/GraphicsContext.html)がここから見られる。

コード内に``require 'rubysketch-processing'``が必要。(2022年2月27日現在)
# よく使うメソッド
`point x, y`
点を描く。

`line x1, y1, x2, y2`
直線を描く。

`rect x, y, width, height`
左上の座標を指定して長方形（矩形）を描く。

`square x, y, expand`
正方形を描く。

`ellipse x, y, width, height`
楕円のようなものを描く。

`circle x, y, expand`
円を描く。

`triangle x1, y1, x2, y2, x3, y3`
三角形を描く。

`text str, x, y`
文字を表示する。
## 文字
最初に内容である文字列を渡してから座標を指定する。
文字の大きさは`StrokeWeight`ではなく`textSize`で指定するので注意。

```
text "Hello world!", w, h
```
## イメージ
イメージを`myImage = loadImage "#{location}"`で読み込んでから`image myImage, x, y `で表示させる。

```
myImage = loadImage "hogehoge.png"
image myImage, 100,200
```

# イベント

## Draw
drawの中にあるものは一秒間に60回描画される。
`frameCount`にはそれまでに描画されたフレーム数が保存される。

```
draw do
  green = frameCount % 256
  #greenが時間によって変わる
  fill 222, 222, green
  text "#{frameCount}", 100, 100
end
```

## Mouse
MouseEventには3種類あり、
 - 押したときに反応する`mousePressed`
 - 離したときに反応する`mouseReleased`
 - ドラッグしたら反応する`mouseDragged`がある。
mouseX,mouseY = 現在のマウスのx, y
pmouseX,pmouseY = 直近のマウスのx, y

```
mousePressed do 
  ellipse mouseX, mouseY, 100, 100
end

mousePressed do 
  line mouseX, mouseY, mouseX + 200, mouseY + 100
end

mouseDragged do 
  rect pmouseX, pmouseY, 400, 300
end
```

## Key
KeyEventには2種類あり、押したときに反応する`keyPressed`・離したときに反応する`keyReleased`が
ある。
keyCode = 何のキーが押されたか

```
keyPressed do 
  char = keyCode
  if char == RIGHT then
    text "You should go there", 500, 500
end

keyReleased do
  char = keyCode
  if char == SPACE then
    text "You pressed space key!", 200, 200
  end
end
```
# その他
## 回転
`rotate angle`で回転させる。単位はラジアンなので注意。`radians #{角度}`で角度をラジアンに変換できる。

```
draw do
  angle = radians (frameCount % 50)
  rotate angle
  fill 0, 0, 0
  ellipse 200, 200, 200, 200
end
```

## 移動
`translate x, y`で移動させる。x, yが正の値で右上に向かうわけではなく**xが右に、yが下に向かう**。
drawEventでフレームが変わると元の位置に戻されるので注意。

```
draw do 
  x = frameCount
  x %= width #widthは画面の横幅
  translate x, width / 2
  fill 0, 0, 0
  rect 0, 0, 100, 100
end
```
## 拡大・縮小
`scale w, h`で横方向と縦方向を別々に拡大縮小できる。

```
rate = 50
rectMode CENTER
rect 50, 50, 100, 100
mousePressed do
  rate+=10
  scale rate, rate
```
## スタック
`push`で現在の座標と属性を保存でき、`pop`で復元する。
pushEvent?ではブロックが終わったら自動で`pop`してくれる。

```
ellipse 0, 0, 200, 200
push do #黒色の円が保存される
  translate 0, 100
  fill 255, 0, 0 #円を移動させて赤色にする
end #黒色の円が復元される。
```
### 便利関数
`background R, G, B` 背面をその色で塗る。drawイベントと合わせると、ウィンドウのサイズを変えても大丈夫になる。
【AWS】VPC〜EC2構築のエラー：ssh: connect to host ... : Operation timed out

## 背景
VPC〜EC2構築後、SSHクライアントから接続を試みたところ下記のエラーが出てしまいハマる。

```
ssh: connect to host **.**.*.** port **: Operation timed out
```
様々な原因があるようですが、このエラーはRouteTableに原因があることが多いようです。

## 確認ポイント①
`Routes`に作成したインターネットゲートウェイ（igw-***）を追加しているか。
![スクリーンショット 2021-12-04 17.04.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671576/7631a7dc-e4a8-1664-cb6b-449a11591c83.png)
## 確認ポイント②
`Subnet associations`に作成したサブネットが追加されているか。
私はこれが設定されていなかったのでハマりました。
下記画像の`Edit subnet associations`で追加することができます。
![スクリーンショット 2021-12-04 17.07.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/671576/a4d70dd0-4886-c006-2023-a21fbdbbdbb2.png)
## まとめ
設定をし直したら、EC2の再起動を忘れずに。
それでもダメなら作り直しをおすすめします！
VS Codeで文字数や行数をカウントするやり方メモ

VS Codeではver1.62現在、文字数や行数をカウントする機能がデフォルトで存在しない。

これを実現する拡張機能がたくさん存在するがそのうちの一つの[WordCounter](https://marketplace.visualstudio.com/items?itemName=kirozen.wordcounter)を使用した場合の設定をメモしておく。

# 拡張機能のインストール
サイドバーの拡張機能アイコンをクリックして`wordc`とかで検索。アイコンが「W++」の`WordCounter`の`インストール`ボタンを押してインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/4dd51416-2d54-4eee-5d95-f2ff0ec5cdf8.png)

# デフォルト設定
試しに何かファイルを開いてみると、現在開いているエディタの文字数等の情報が画面下部に表示される。テキストを選択するとその選択範囲内についてカウントされる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/b2e59cf4-058e-891b-e0a1-d8f7bd736e7f.png)

デフォルトの表示のままでも分からなくはないが、ある程度表示をカスタマイズできるので、好みの表示に変えてみることが可能。自分にとって余計な情報を無くして表示をスッキリさせることもできる。

# カスタマイズ例
例えば下記のようにカスタマイズできる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/269b5ca0-0658-5ff0-c201-b8bb1177e1ff.png)

# カスタマイズ方法
VS Codeの画面左下の歯車アイコンから`設定`を選ぶか`Ctrl`+`,`で設定画面を開き、ツリービューの`拡張機能`の`WordCounter configuration`を選択すると設定項目が表示される。
## 改行コードのカウント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/bd9adb4e-4495-a79c-46d7-414473abb397.png)
チェックを入れると改行コードも文字数としてカウントされる。
## 表示項目の指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/231f4ad4-01a3-dab7-5417-977ab743e5ed.png)
表示したい項目の追加および不要な項目の削除を行う。表示位置は左端(Left)と右端(Right)に分かれていてそれぞれに設定が可能。指定可能な項目は`word`, `char`, `line`, `paragraph`, `readingtime`の5つ。
## 単位名称の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/ef80bb57-48bc-838d-0dba-24daab39b6cc.png)
各項目の単位名称の設定。カウントが1個だった時と複数個だった時用で設定項目が分かれている。日本語の場合は使い分けがないので両方に同じ単位名称を設定することになる。
## デリミタ設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181011/44b8841c-ae0f-76b0-ead4-b35f7a3f9fc1.png)
`Delimiter`は項目と項目の間に表示する文字、`Word_Delimiter`はカウント数と単位名称の間に表示する文字をそれぞれ指定する。上記画像の見た目では分からないが、それぞれスペース2個と空文字を設定している(上記設定ファイルを参照)。

# 設定ファイル
PCを移行するときなど、一旦設定した内容を別環境のVS Codeに移行したい場合や設定内容をバックアップしておきたい場合は設定ファイルを開いて内容をコピペする。
設定ファイルを開くには設定画面の右上のアイコンの`設定(JSON)を開く`を押す。
例えば以下のようになっている。ただしVS Codeの他の設定も一緒になっているので、探すときは`wordcounter.`で始まる行を探す。

```json:settings.json
{
    "wordcounter.include_eol_chars": false,
    "wordcounter.side.left": [
        "word",
        "char",
        "line"
    ],
    "wordcounter.text.char": "文字",
    "wordcounter.text.chars": "文字",
    "wordcounter.text.line": "行",
    "wordcounter.text.lines": "行",
    "wordcounter.text.word": "単語",
    "wordcounter.text.words": "単語",
    "wordcounter.text.delimiter": "  ",
    "wordcounter.text.word_delimiter": ""
}
```
簡単なオンラインランキングの実装方法

##はじめに
お世話になってます、よしだです。
突然ですが『自作のゲームにランキング機能を実装したい』と思ったことはありませんか？
「何だか難しそう・・・」と感じるかも知れませんが、とても簡単にオンラインランキング機能を実装できる方法があるのでご紹介したいと思います。

##今回紹介する記事
記事①：[イントロダクション (Unity) : クイックスタート | ニフクラ mobile backend](https://mbaas.nifcloud.com/doc/current/introduction/quickstart_unity.html#/Unity/)
記事②：[【Unity、WebGL】なるべく簡単にオンラインランキング機能をつけるサンプル - naichi's lab](https://blog.naichilab.com/entry/webgl-simple-ranking)

##あらまし
詳細は上記記事にまとめられているので、ここでは大まかな手順を説明したいと思います。
今回紹介する機能では『ニフクラ mobile backend』というクラウドサービスを利用しています。
まずは『ニフクラ mobile backend』にログインしていきましょう。
![スクリーンショット 2021-12-04 153850.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/872934/b184bf1b-6963-4c42-9639-d203f375e801.png "ニフクラ mobile backend ログイン画面")
まだアカウントを登録していない場合は新規登録を行ってください。
![スクリーンショット 2021-12-04 160547.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/872934/ef45d762-577f-9ae8-c65c-7d60699112df.png "ニフクラ mobile backend 新規アカウント登録画面")
TwitterやGoogleのアカウントでも登録出来るので手軽ですね。
ログインが済んだら、記事①を参考に[アプリの新規作成]から[APIキーの設定とSDKの初期化]まで進めてください(画像赤枠部分)。ダウンロードするSDKは最新のバージョンで問題ありません。
![スクリーンショット 2021-12-04 160817.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/872934/34bd1dda-2775-ad3c-0522-60ffaaa6183b.png "イントロダクション (Unity) : クイックスタート")
[APIキーの設定とSDKの初期化]まで終えたら、記事②に従って[パッケージのインポート]以降を進めていきましょう。こちらも最新バージョンのUnityパッケージを使用すればOKです。

あとは以下のようなコードを任意のタイミングで呼び出せばランキングが表示されます。

```
naichilab.RankingLoader.Instance.SendScoreAndShowRanking (引数);
```

![20171218010051.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/872934/3877c45d-0c49-af0d-89e6-8277a7cdba45.png)
↑記事②より引用

よくわかる解説：[NCMBを使った超簡単ランキングの実装(スタジオしまづYoutube)](https://www.youtube.com/watch?v=FaTeCKLr9gw&list=PLEkX-p0oUs8zYgCkJu1hVLhojjpsDr-XB&index=1&t=221s)

最後まで読んでいただきありがとうございました。
新人プログラマが行うべき3つのこと

これは[株式会社POLテックカレンダー2021](https://qiita.com/advent-calendar/2021/pol) 4日目の記事です。
前回の記事は[こちら](https://qiita.com/yiwi/items/b1b0e37252bff94249b5 "ブラウザ上で動作するツールを超簡単に公開したい")です。

#前書き
今年の7月から株式会社POLでフロントエンジニアをしている原島です。
この記事では新人プログラマの原島が成長するために行った3つのことを書き綴ります。

#1.コピー　〜創作は模倣から始まる〜
「創作は模倣から始まる」はどこかの偉大な作家の言葉だそうです。説得力がありますね。
また、漫画やアニメが大好きな私としては、コピーを得意するキャラは、天才だったり普段はスカしてるけど根は熱いキャラだったりといいキャラも多く、コピー最強なのでは？とよく思います。

ちなみに、この記事のタイトルも著作「プログラマが知るべき97のこと」をコピーしてつけています。

コピーが強力なものだと(恐らく)伝わったので本題に入りますと、コピーする対象は数多くありますが、プログラマといえばまずはコードだと思います。
コピーするコードを"理解して使えている"のであれば、コピーのメリットは沢山あります。
コードをコピーすることによって、車輪の再発明を防いだり、元のコードが優秀である分だけ学べることも多かったりが挙げられます。

ただ、今回私がお話ししたいのは文章のコピーについてです。
##例
![スクリーンショット 2021-12-04 15.05.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740106/275fee4e-163e-1661-6205-cc22b3c40cdd.png)　![スクリーンショット 2021-12-04 15.05.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740106/bfa9283c-d7e3-4321-5b1d-3d1a34b457bb.png)
この画像を見比べると、左の画像は丁寧ですが少し回りくどい感じがしてきます。
それに対して右の画像はスッキリまとまっているし、この絵文字の用途を知っている人に質問する場合は、「質問です！」すら無くして１行で送っても良いかもしれません。
(ちなみに見出しにする方法は、文の先頭に#をつける。です)

##まとめ
自社や業務委託先に関わらず、自分より優れたものを持っている方が沢山いらっしゃるので、その方々を見ていて感じた「これわかりやすい」や「これいいな」をまずはコピーしていました。
(コードや文章のみでなく、話し方やツールの使い方のコピーも有効だと思います！)
そのコピーしたものに対して自分らしさや自身の考えを足していくのが次のアクションだと考えています。(頑張ります！)

#2.フィードバック　〜いつもありがとうございます〜
私は週1で先輩からフィードバックをいただける場を設けています。

その場で話す内容としては
1.取り組んだ内容(スケジュール管理やコーディング等)
2.うまくいったこと
3.改善の余地があること、次のアクション
です。

前述してある通り、自分なりに改善策を考えてはいますが先輩からのフィードバックは目から鱗が落ちる内容ばかりです。
##例
課題：仕様の確認漏れがあり、実装中やその後のテストの段階で見つかる

自身で考えた解決策：画面で動かしてみて仕様の確認漏れがないか確認する

フィードバックでいただいた解決策：仕様確認をする前にテスト仕様書を作成する

「仕様確認をする前にテスト仕様書を作成する」を実践した結果、挙動を隅々まで確認するので、画面操作やコード確認だけでは見つけられない確認漏れの防止ができました。
##まとめ
先輩からのフィードバックで今回は適切な解決策をいただけました。
ただ、フィードバックの効果はそれだけではなく、自身の良いところや悪いところ、成長できるところの指摘をいただけてモチベーションの向上にもつながるのでガンガンするべきだと思います！(よろしくお願いします！)
#3.ホウレンソウ
エンジニアというより社会人として基本的なものですね。
ただ、私は口頭でのホウレンソウが特に苦手で、そもそも話す内容の方向性が決まっていなかったり、予期していない質問を突っ込まれたりした時に、考えがまとまらず自分でも何を話しているのかわからないといった状況がしばしばありました。

##解決策
#####事前準備
ホウレンソウの前に一度現状を書き出してみる
ホウレンソウのフォーマットを作る

#####話し方
結論から話し、その後に「それっていうのは〜」と続ける
pol内の口癖として、問題を話した後に「じゃあどうすればいいんだっけを考えた時に〜」と続けていたのでコピーしてみる

##まとめ
事前準備あってこそかもしれませんが、話し方を変えた時には「結論から理由」「問題から解決策」のように段階を踏んで説明できます。
これによって、個人的にも話しやすさを実感できたり、相手に内容を聞き返されたりすることもなくなったのでぜひこちらもコピーしてみてください！
#後書き
ここまで読んでいただきありがとうございました！
なんだか内容がエンジニアというより新社会人に向けたものに近かったので、社会人2年目は専門的な知識をさらに身につけてお披露目したいですね。

次回、12/5の[記事](https://qiita.com/takahashik0422/items/b94c4bc25314eff4a087 "Google Search Consoleの不要なサイトインデックス削除を自動化する(試み)")はまーさんです！
よろしくお願いします！
VPCピアリングでVPC間のTCP接続ができなかった

VPCピアリングでVPC間のTCP接続ができなかった現象の解決に20時間弱を要したので、今後のために記録に残しておきます。

## 背景

### 目的

VPC①のプライベートサブネットに配置されたEC2Ⓐから、VPC②のプライベートサブネットに配置されたEC2ⒷのHTTPサーバーに接続したい。

### 環境

1. VPC①とVPC②をVPCピアリングで繋いでいた
    1. VPC①→VPC②のピアリング設定済み
    2. VPC②→VPC①のピアリング設定済み
2. VPC①からVPC②へのルート設定済み
    1. VPC①のサブネットについて
3. VPC②からVPC①へのルート設定済み
    1. なし（反対方向は不要と思った）
4. EC2Ⓑのセキュリティグループ設定はHTTPについてVPC①のCIDR丸ごと許可

### 調査に使ったもの

* netcat、EC2ⒷでLISTENしてEC2Ⓐで送信して接続確認
* VPCフローログ
    * [VPCフローログを取得してみた - DENET 技術ブログ](https://blog.denet.co.jp/flow-logs/) を参考に設定
* curlの時間計測
    * [Curl で時間計測 | 1Q77](https://blog.1q77.com/2019/07/curl-write-out-format/) を参考
* AWS の Reachbility Analyzer

### 現象

UDPは接続できるのにTCPやICMPが接続できずタイムアウトになる。
以下は EC2Ⓐ から EC2Ⓑ に ping や netcat で送信した結果。

| Protocol | Port | VPC     | セキュリティグループ | 結果 |
| -------- | ---- | ------- | -------------------- | ---- |
| ICMP     | n/a  | 同じVPC | /32                  | 〇   |
| HTTP     | 80   | 同じVPC | /32                  | 〇   |
| TCP      | 1234 | 同じVPC | /16                  | 〇   |
| UDP      | 1234 | 同じVPC | /16                  | 〇   |
|          |      |         |                      |      |
| ICMP     | n/a  | 違うVPC | /16                  | ✕    |
| HTTP     | 80   | 違うVPC | /16                  | ✕    |
| TCP      | 1234 | 違うVPC | /16                  | ✕    |
| UDP      | 1234 | 違うVPC | /16                  | 〇   |

* VPCフローログは、接続時に全て `ACCEPT OK` だった
* curl の計測結果は内訳は全て 0 でトータルだけ130秒くらいかかってタイムアウト
* Reachbility Analyzer でも送信元のEC2から相手先のVPCに接続できていた
* もちろん接続先のHTTPサーバーにはアクセスログは形跡なし

VPCフローログで拒否されていないことからEC2上のOSの設定を疑い、iptables や ufw 、hosts.deny を確認したが問題なし。
ここまでで、インスタンス内の問題でもセキュリティグループ設定の問題でもない...

## 対応

VPC②からVPC①へのルート設定で、該当EC2のサブネットについてVPC①へのルート設定を追加した。
その結果、VPC①からvPC②へのHTTP通信ができるようになった。

## 結論

VPCピアリングしている環境で __TCP接続__ する場合は、双方向のルート設定が必要。
MacbookでBlenderを終了するとブチッと音がする。

#Amazon music再生中にBlenderを終了すると、ブチッと音がする。

M1 proデビューしました。
Macbook pro M1 Proなんですが、スピーカーの音質すごいですね。
なんですが、自分だけなのかAmazon music再生中にBlenderを終了すると、ノイズが発生するみたいで、M1版でもintel版でもダメだったので、
「Edit」->「Preferences」->「System」->「Sound」->「Audio Device」から
「CoreAudio」から「OpenAL - MacBook Proのスピーカー」とかに変更すると、変なノイズはしなくなりました。
同じ症状の方がいましたら、試してみるといいかもです。

![a1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128851/af386aee-dc13-db33-083b-33a9d4a76bc6.png)
TCP／UDP解説

##背景
HTTP通信等の下のヒエラルキーに位置するTCP/UDPがいまいち何に使われているのかわからなかったので、まとめてみました。

##TCP/IPモデル
webサービスというのはブラウザの検索窓にURLを入れると、それをDNSで名前解決し〜色々な過程を経てWebブラウザにwebサイトは表示されますが、それを通信的に階層化すると以下のようになります。

1.アプリケーション層：　ソフトウェア同士の会話に使われる　例：HTTP,SSH,DNS,SMTP(電子メールを送るときに使う通信)
2.トランスポート層：　データのやりとりを順番に制御、エラー訂正したりするなどの信頼性を高めたデータの転送を制御する。　例：TCP,UDP
3.インターネット層：IPアドレスの割り当て、ルーティングをする　例：IP,ICMP、ARP
４.インターフェース層：　ネットワーク上で接続されている機器同士で通信する　例：Ethernet,PPP

通信は上のようなヒエラルキー(TCP/IP　モデル)になっており、下の層と上の層は互いに干渉しません。


##なぜトランスポートプロトコルが必要なのか？
トランスポートプロトコルが存在することの意味はパケット(データを細切れにしたもの)を　順番通りに正しく送るためです。トランスポートプロトコルのインターネット層でもパケットを送ることはできるのですが、この層は順番を考慮しながらデータを配送することはできないため、データの順番がぐちゃぐちゃになってしまいます。それをカバーするためにトランスポートプロトコルを使います。

##TCPとUDPの違い
TCPとUDPはどちらもトランスポート層に属し、データを送ると言う点では同じなのですが、
TCPではメールなどのデータの順番だけを送れば問題ないものを送っていたのですが、時代の流れに伴い、テキスト文章だけではなく、音声や動画も送信する必要が出てきました。音声や動画はデータの順番だけではなく、データの間隔を正常に送信することも求められるため、TCPにはできなかったのですが、UDPというデータのカプセル化(データを送るときにデータをDockerのコンテナみたいにパッケージ化して送ります。)をアプリケーション側にやらせ、カプセル化したデータをただ送るだけと言うUDPが開発されました。
neosでlogix その16

#概要

niosでlogixやってみる。
random intノードを使ってみた。


#写真

![2021-12-04 06.22.28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/92a9b319-bff6-2659-366c-6d5ddcbd9c78.jpeg)


以上。
【vi】ファイルの中身をすべて消す

# コマンド
```
H → dG
```
H ･･･ 先頭に移動
dG ･･･ カーソルがいる位置から下を削除

ちなみ、元に戻したい時
u ･･･ 前回の変更などのコマンドを取り消す


[参考](https://qiita.com/drafts/d77813f95b0aab89f45f/edit)
ros nodeが死んでしまった際に自動再起動する方法

# 内容

rosノードプロセスが死んでしまったときに,自動で検知して再起動する方法がないかと調べたところ,roslaunch内でrespawnをtrueにすると自動で再起動してくれることが分かりました。(※例えばデバイスを扱うノードとかはデバイスが無いと死んでしまったりするのですが,これを使うとデバイスをつないだタイミングでノードが立ち上がるなどの動作ができるようになります)

以下のように`respawn="true"`と記載するだけでOKです。

```xml:respawn.launch
<roslaunch>
  <node name="foo" pkg="package" type="node" respawn="true" />
</roslaunch>
```

ちなみに,再起動のdelayなども設定可能みたいですので、興味がある方は公式ドキュメントをご参照ください。(デフォルトではdelayは0秒なので負荷軽減のためには入れた方がいいのかもしれません)

https://wiki.ros.org/roslaunch/XML/node

# さいごに

自分でbashファイルなどでプロセスが死んだか監視して再起動みたいな事をしなくていいためとても便利ですね!

# 参考

https://answers.ros.org/question/38808/can-nodes-be-made-to-automatically-restart-on-segmentation-faults/
SourceTreeのインストール手順 - Windows11 pro

# 環境
・Windows 11 Pro 
・バージョン 21H2
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/7fd98830-31e1-be6b-ba49-28af26e2994c.png)



# SourceTree
・バージョン3.4.7（2021.12.04時点の最新版）
[「SourceTree」ダウンロードページ](https://www.sourcetreeapp.com/)

# インストール手順（Windows版） 
・「Download for Windows」をクリックします
![00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/92d25c50-e657-f254-0306-decdada708da.png)

・ローカルにダウンロードした「SourcetreeSetup-3.4.7」を起動します
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/8c8a791b-9921-bad5-1c1c-efd582a3d40c.png)

・今回では「Bitbucket」を使いませんので、「スキップ」をクリックします
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/ccc0646a-cdac-c475-bcb3-29f84ed8139d.png)

・Mercurialを使いませんので、チェックを外して「次へ」をクリックします
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/a263b68f-2d2c-a918-1d81-bcc52e0ec737.png)
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/626475db-30c7-56f6-ce38-71c8e9f8e0c8.png)

:::note info
Mercurialは、「Python」で実装された分散型バージョン管理システム
:::

・名前とメールアドレスの入力ですが、ここではtestを入力して「次へ」をクリックします
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/196b8f32-071a-53ee-c32a-1b1e1e5d3998.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/15a79a89-6557-72ee-1437-4e9c214fddcf.png)

:::note info
ここに入力した名前とメールアドレスはこの後の操作に関わることになります。
例えば、コミットやプッシュをする時の署名はこちらの情報を使います。
:::

・ここではSSHを使いませんので、「いいえ」をクリックします
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/481163f3-c419-a195-69ff-cdcc36fb130d.png)

・sourceTreeが自動的に起動されました。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/680439/5522707f-3f57-2445-6c32-080923836538.png)

これでインストールが完了しました。
この後は、Gitのアカウントに連携して、リポジトリをクローンするか、
ローカルで新しいフォルダを作ってコーディングが始まってもOKです。
報告用:ディープラーニングの基礎を学び、ブルドックと柴犬を区別する判定器を作りました。

機械学習及び深層学習(ディープラーニング)の基礎について学び、実験として2種類の犬種を判別する装置をプログラム(python)で試作しました。

![Peek 2021-12-04 10-51.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616830/3606a7d5-6b73-8586-01f0-880f0bd4ae72.gif)

使用した画像は以下から引用しました。
柴犬のウィキペディア
https://ja.wikipedia.org/wiki/%E6%9F%B4%E7%8A%AC
(アメリカン)ブルドックのウィキペディア
https://djanimateurfinistere.com/wiki/American_Bulldog

#仕様
プログラム言語:python
開発環境:google colaboratory

##colaboratoryについて
googleが無料で提供している(グレードアップ有料)ブラウザ上のpython開発環境です。
人工知能の研究者・学生向けに作られており、AIを製作するためのライブラリが
標準実装されています。AIプログラム製作に非常に便利

https://colab.research.google.com/notebooks/welcome.ipynb?hl=ja

必要なのは、googleアカウントだけ!

#プログラム作成手順概要

機械学習とは・・・機械が自動でデータからパターンを見つけ出し、未知のデータに対しても
対応できるようにすること。
今回の場合、**柴犬とブルドックの画像をたくさん覚えさせしっかり復習を行い、まだ見たことない画像に
対しても答えを導きだせるようにプログラムしました**。

使用した画像データ
https://www.robots.ox.ac.uk/~vgg/data/pets/
英国のオックスフォード大学が提供している犬猫の画像データから、必要なものを使用しました。

①用意した画像データの適切な処理、分類を行う。
②①の処理を施した画像データを専用のアルゴリズムで機械に覚えさせる（パターンを自動で取得できるようにプログラムする)。
③判定(テスト）行う。(上で実験済)　　　　　　　　　
　　　　　　　　　
以上が機械学習の大まかな流れです。

#①データの前処理
https://opencv.org/

機械が画像を覚えられやすいように「opencv」というライブラリで画像の前処理を
行います。

opencv・・・Intelが開発した画像処理オープンソースライブラリ
![Peek 2021-12-04 15-57.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/616830/cd12bfe4-5374-9021-4aa6-aa9d56246f00.gif)

opencvを使うことで、画像認識のひとつである２値化処理(物体を２種類の色に分け、それぞれの比率から画像判定をする処理)も簡単に行うことができます。

#②学習

①の画像データを用い、深層学習を行います。

使用する主なライブラリは2点、

https://www.tensorflow.org/?hl=ja

tensorflow・・・googleが開発した機械学習専用のオープンソースライブラリ
　　　　　　　　　世界で最も普及している機械学習のライブラリ

https://keras.io/ja/

keras・・・機械学習のためのプログラムコードを簡易的に扱うことができるオープンソースラ　　
　　　　　　イブラリ、専門的な数式なしでAIを実装することができます。

以下のコードは製作したプログラムのうちの一部です。

```python:model.py
model = Sequential()

model.add(Conv2D(32, (3, 3), padding='same', 
                input_shape=X_train.shape[1:]))
model.add(Activation('relu'))
model.add(Conv2D(64, (3, 3)))
model.add(Activation('relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.25))
model.add(Flatten())
model.add(Dense(128))
model.add(Activation('relu'))
model.add(Dropout(0.5))
model.add(Dense(label_num))
model.add(Activation('softmax'))

sgd = optimizers.SGD(lr=LEARNING_RATE)

model.compile(loss='categorical_crossentropy',
             optimizer='SGD',
             metrics=['accuracy']) 
```
kerasを使用することで、このような短いコードだけで機械に対して画像を覚えさせることが
できます。

#まとめ
今回製作したプログラムは、費用かけず無料で製作しました。
判別した犬種は2種類ですが、プログラムを改良することで判定種類を増やすことができます。

使用したプログラム言語はpythonですが、flaskなどのwebサーバフレームワークを用いることで多言語で製作したツールとの連携も可能です。
Git packaged by Bitnami を使って Docker で Git サーバを立ててみる

多くの開発者がバージョン管理のために GitHub や GitLab などの Git ホスティングサービスを利用しています。何らかの事情でサービスを利用出来ない場合は、GitLab をセルフホストする方も多いでしょう。

とはいえ「うまく動いている既製品があるから」といって生の Git サーバに触らないまま大切なコードを預けているのも変な話なので、[Pro Git book](https://git-scm.com/book/ja/v2/Git%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3%83%AB) を読みながら構築してみることにしました。

## `Git packaged by Bitnami` とは

[Git packaged by Bitnami](https://bitnami.com/stack/git) は Git を Bitnami がパッケージ化したものです。Docker イメージの形式で提供されているので、依存関係を気にせず手軽に使い始めることができますね。

```bash
docker run --name git bitnami/git:latest git --version
```

Dockerfile のある Git リポジトリは[こちら](https://github.com/bitnami/bitnami-docker-git)です。

## コンテナを Git サーバに仕立てる

Pro Git book を見ながらインタラクティブに操作していきましょう。コンテナを立ち上げ、bash を起動します。このとき、SSH 接続用のポートと、Web UI 用のポートをフォワードしておきます。コンテナ外にデータを保持したい場合は、ボリュームやマウントの設定も追加してください。また、 bash が終了してもコンテナを稼働させたい場合は、コマンドを`tail -f /dev/null` に変更するなどしてください。

```bash
docker run -it --name git -p 10022:22 -p 11234:1234 bitnami/git:latest bash
```

続いて、[サーバーのセットアップ](https://git-scm.com/book/ja/v2/Git%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)を行います。まず、`git` ユーザを作成します。

```bash
useradd -m git -s /bin/bash
```

`git` ユーザに SSH 経由で接続できるように設定します。

```bash
su git
cd ~
mkdir .ssh
chmod 700 .ssh
touch .ssh/authorized_keys
chmod 600 .ssh/authorized_keys
exit

# SSH デーモンを開始
/etc/init.d/ssh start
```

`/home/git/.ssh/authorized_keys` に公開鍵の情報を追記してください。Docker ホストから `ssh -p 10022 git@localhost` で接続できたら成功です。

次に、Git リポジトリを作成します。

```bash
su git
cd ~
mkdir <リポジトリ名>
cd <リポジトリ名>
git init --bare
exit
```

最後に、`git` ユーザのログインシェルを `git-shell` に変更します。SSH で好き勝手いじれないように制限する都合もありますが、Git 関連コマンドにパスを通す意味もあります。

```bash
chsh git -s /opt/bitnami/git/bin/git-shell

# git ユーザで bash 操作が必要なときは sudo で立ち上げる
sudo -u git bash
```

あとはお手元のリポジトリで remote として追加するだけで使い始めることができます！ `git` コマンドに SSH 用のポートを指定するには、以下のように設定します：

```bash
git remote add <リモート名> ssh://git@localhost:10022/~/<リポジトリ名>
```

## GitWeb (Web UI) を表示する

[GitWeb](https://git-scm.com/book/ja/v2/Git%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC-GitWeb) は Git に標準で付属する Web UI です。Git サーバとして使うなら最低限ほしいところなので、表示できるようにしておきましょう。

```bash
# instaweb の依存を追加します
apt update
apt install -y lighttpd libcgi-pm-perl gamin
# ゴミ掃除（任意）
apt clean -y
rm -rf /var/lib/apt/lists/*

cd /home/git/<リポジトリ名>
sudo -u git git instaweb
```

Port 1234 のフォワード先にアクセスすると、GitWebが表示されます。

![localhost-git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/5bdbfd39-2531-62fc-48ee-eda04dd0d8ab.png)

## 参考リンク

* [Pro Git book](https://git-scm.com/book/ja/v2/)
* [git instaweb fails with "500 - Internal Server Error" #4871](https://github.com/microsoft/WSL/issues/4871)
Rustの戻り値の書き方

最近Rustに関する勉強を始めたものです．一応他の言語はC,C++,Pythonなどを触ってきました．
その私がRustの落とし穴にはまった話をします．その落とし穴は**関数の戻り値の書き方**です．
今さらReturn文の書き方なんてひっかかることないと思っていました．
私が引っかかっていたコードの例文は以下となります．

```
fn main() {
    let x = 50;
    let ans = test(x);
    println!("x is {}",ans);
}

fn test(x : isize) -> isize {
    let mut ans = x;
    if x < 0{
        ans = 0;
    }
    if x > 100{
        ans = 100;
    }
    ans;
}
```

結論から書くとこのコードのエラーの原因は最後のansに付けた**";"**が原因でした.
これは他の言語を触った人が陥りやすい罠だと思うのですが，Rustでは自作関数を使った際の戻り値に;使ってはいけないようです．
私はずっとCやPythonを触っていたのでエラーの原因がわからず結構悩んでしまいました．参考書をよく見たところ，自作関数の末尾に;がないのを発見してようやく解決に至りました．~~そんなこと一つも参考書にかいてなかった~~
理由はよくわからないですしもしかしたら例外もあるかもしれないので指摘などがありましたらお願いします．

ということで上記のコードの正しい書き方は以下となります．

```
fn main() {
    let x = 50;
    let ans = test(x);
    println!("x is {}",ans);
}

fn test(x : isize) -> isize {
    let mut ans = x;
    if x < 0{
        ans = 0;
    }
    if x > 100{
        ans = 100;
    }
    ans
}
```

もっときれいな書き方があるよ！という方がいましたら指摘してくださると嬉しいです．
お読みいただきありがとうございました．
【balenaEtcher経由】Raspberry pi OS のダウンロード

作業時間10分以内
Raspberry pi ImagerでOSをダウンロードする際に，エラーがでたため，他の方法を模索した。
一旦，Raspberry pi OSをダウンロードし，その後microUSBに入れた。

【準備】
micro SDカード
U3を推奨する。U1のものを使用したが，Youtubeが見れない程度に処理が遅かった。

【全体の流れ】
1. balenaEtcherをダウンロード　
https://www.balena.io/etcher/
2. Raspberry pi OSをダウンロード
https://www.raspberrypi.com/software/operating-systems/
3. balenaEtcherを起動して，microSDカードにRaspberry pi OSを入れる。

【一言】
Raspberry pi Imagerがやっていることは，直接OSをmicroSDに入れているだけ。
今回は『OSをいったんパソコンにダウンロード』，『ダウンロードしたOSをmicroSDへ』を行った。
エラーが出るときは作業工程を分けてみるとよいかも。
マークダウンでメモを取りたかったので、一発で起動できるアプリを作った

普段コードを描いてるとき、メモを取りたくなると、`新規mdファイル作成→エディタで開く`とやっていたけど、毎回それをやるのは面倒なので、MacのAutomatorでアプリを作った。

## 作り方
- MacのAutomator.appを起動
- 作成する書類の種類で「アプリケーション」を選択
![スクリーンショット 2021-12-04 15.44.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58037/bf28956e-9618-400f-0089-128aec4748cb.png)
- 検索窓から`シェル`と打ち込み、出てきた`シェルスクリプトを実行`を右のエリアにドラッグする
![スクリーンショット 2021-12-04 15.44.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58037/8e85da7a-c793-6f89-c919-06ceaae50d53.png)
- 入力欄に以下を入力

```
cd ~/Desktop/
DATE=`date '+%H:%M:%S'`
touch ${DATE}_memo.md
open ${DATE}_memo.md
```

![スクリーンショット 2021-12-04 15.44.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58037/ed42efeb-187f-d2dc-99ac-3ab1385b2eab.png)

- 基本的に一時的なメモを想定しているので、ファイル名は重複がなければなんでもいいかなと。もし残したいファイルなら、別名で保存しなおせばOK.
- 右上にある「実行」をクリックして、デスクトップに`memo.md`ファイルが作成され、普段使っているエディタで作成した`memo.md`が開ける事を確認
- あとは作成したアプリをApplicationsに名前をつけて保存。

##　おわりに
普段、アプリの起動は[Alfred](https://www.alfredapp.com/)を使っていので、作成したアプリを起動してやれば、一発でmdファイルが作成され、メモを書き始めることができます。
メモを書くのが楽になりました〜。
マルチテナントメモ

マルチテナントを想定したアーキテクチャを考える際のメモ

# マルチテナントの目的
同じシステムアーキテクチャを複数の顧客へ提供することで安価にシステム導入を行い、ストックビジネスを展開できる。


# マルチテナント提供モデル

## リソース共有モデル
各テナントでリソースを共有する。
デパートにおけるテナント。階段やエレベーター、トイレなどのリソースは共有される。
キャンプ場。水道、トイレは共有される。
レンタルサーバの共有サーバ方式。CPU,メモリは共有される。

## リソース独立モデル
各テナントごとにリソースを完全に分離する。
分譲住宅。

# RDB
## 単一DBか分散DBか
### 単一DB
* パーティションキーで分ける

### テナント別DB
* テナントごとにDBを分ける

## Pros/Cons

|RDB | 単一 | テナント別| コメント | 
|:-----|:------|:-------|:-------|
|テナントキー| パーティションキー | -(上流で定義) |単一DBでは、常にテナントキーの考慮が必要。 |
|開発コスト| 中〜高 | 低〜中 |単一DBにおける開発（設計・実装等）はマルチテナントアーキテクチャをDBに実装する点で高コスト。|
|マスタデータ管理コスト| 低 | 低〜高 |テナント別DBにおけるマスタデータは、マスタースレーブのような管理形態を取れればコストは下げられる余地がある。 |

### 運用
||単一 |テナント別| コメント|
|:----|:-----|:----|:-----|
|テナント追加の難易度|低〜中|低|何れの場合も定型化。 |
|データ更新|高|低|単一DBでは、常に他テナントの影響を考える。 |

## 所感
テナント別DB一択。

ピンポイントだが、Aurora Serverlessを用いれば、テナント別DBとしつつ、使われなければColdスタンバイ、使われても従量課金でコストも下げられる。

結論ありきということでもないが、１DB内でマルチテナントを実現する、というのは札束で解決できるところをわざわざアプリケーション開発に負荷を掛けて解決する、というふうに見えてしまう。

# WEB
サブドメイン＋LBで分ける。

# テナントキー
サブドメインをベースに管理するのが良さそう。
サブドメイン：テナント＝１：１。
Hostヘッダーでルーティングやトレースが可能。
troccoのプログラミングETL機能でForward ETLとReverse ETLを同時に実現した話

下記の記事のように昨今Reverse ETLという言葉が台頭し、従来のETLはForward ETLと呼ばれるようになり始めました。

https://satoshihirose.hateblo.jp/entry/2021/06/16/162643

CensusやhightouchのようなRevese ETLに特化したSaaSもでき始めている昨今において、データエンジニアリングに関わる人々はみんな一度は思ったことが有ると思います。「Forward ETL と Reverse ETL を一つのSaaSで実行できないの？」 そうtroccoならできるんです。(ReverseETLのところはSaaSといいつつプログラミングや開発の知識が必要です。)

# プログラミングETL

記憶があいまいなのですが、正式機能としてtroccoにローンチされる前の初期段階からユーザーとして利用させていただいておりました。
最初にデモを見た際に直感的に思いました。「これを待ってた！」と。

様々なデータｔソースからDWHであるBigQueryに転送するパイプラインをtroccoで作っていましたが、一度BigQueryに入ったデータを他のSaaSに入れ直したいという欲求に負けて自前のインフラにETL処理を記述してデプロイする世界に閉じ込められていました。しかし、プログラミングETLの導入で下記のような世界に変わりました。

1. Forward ETL/データマート構築/RevereETLのロジック記述をtroccoの転送ジョブ設定内に集約
1. ReverseETL用にインフラを管理する必要がない。

# プログラミングETLの使い方

公式のデモ動画があるようなので[こちら](https://blog.trocco.io/releases/programming-etl) からどうぞ。

# ユースケース

私の場合は自社のプロダクトに様々な3rd Partyのデータを取り込む処理を作る必要があるという変わったタイプのプロダクトに関わっていたので、「パートナー企業のSaaSプロダクトのAPIをコールしてDWHに格納しつつ自社プロダクトのAPIに整理したデータをポストする」という処理を大量に作成していました。
[csv, json]|で区切られたデータを展開する。

アルバイトので行っている作業の中で、 | で区切られたデータに関して展開処理する必要があったので、そのプログラムの記録です。

## プログラム

```basic
from copy import copy
import re
import csv

# 行が | を持つか判定
def has_bar_in_row(row):
    for column in row:
        if "|" in column:
            return True
    return False

# 行のリストが | を持つか判定
def has_bar_in_row_list(row_list: list):
    for row in row_list:
        if has_bar_in_row(row):
            return True
    return False

def expansion_tsv_row(row_list: list):
    result_list = []
    for row in row_list:
        # | が存在する場合に処理を行う
        if has_bar_in_row(row):
            for i in range(len(row)):
                if "|" in row[i]:
                    # 以下の6行でカラムを | で分割
                    row_a = copy(row)
                    row_a[i] = re.split("|", row[i])[0]
                    row_b = copy(row)
                    row_b[i] = re.split("[|\t$]", row[i])[1]
                    result_list.append(row_a)
                    result_list.append(row_b)
                    break
        else:
            result_list.append(row)

    # | がまだ存在する場合再帰的にexpantion_tsv_rowを実行
    if has_bar_in_row_list(result_list):
        result_list = expansion_tsv_row(result_list)
    return result_list

# barで分けて展開したものをファイルの保存
def expansion_tsv(file_name):
    result_list = []
    with open(file_name) as f1:
        reader = csv.reader(f1, delimiter="\t")
        # tsvのヘッダーを飛ばす
        header = next(reader)
        # 行データの読み込み
        for row in reader:
            if has_bar_in_row(row):
                # |で区切られてるrow dataを展開
                row_list = expansion_tsv_row([row])
                for devided_row in row_list:
                    result_list.append(devided_row)
    # ファイルへの出力
    for row in result_list:
        f = open("out.tsv", "w")
        f.write(row)
        f.close()

def expansion_csv(file_name):
    result_list = []
    with open(file_name) as f1:
        reader = csv.reader(f1, delimiter=",")
        # csvのヘッダーを飛ばす
        header = next(reader)
        # 行データの読み込み
        for row in reader:
            if has_bar_in_row(row):
                # |で区切られてるrow dataを展開
                row_list = expansion_tsv_row([row])
                for devided_row in row_list:
                    result_list.append(devided_row)
    # ファイルへの出力
    for row in result_list:
        f = open("out.csv", "w")
        f.write(row)
        f.close()

if __name__ == "__main__":
    file_name = "test.tsv"
    expansion_tsv(file_name)
```

解説はコメントにある通りですが、
1.行データから1番最初の|を探す
2.発見した | が含まれるカラムを|で分割して2つの行データを作成
3.再帰的に繰り返す
4. | が無くなったら繰り返しを終了
5.csv / tsvファイルの全ての行に対して同様の処理をする
(文章だと説明が難しかったので、簡単な図を書いてみました。)
![Untitled (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1678850/7e1981f4-c083-735b-91d0-7068ff2a5af7.jpeg)


pandasにこの処理を行ってくれる関数等あるのかなと思ったのですが、無さそう、、って感じでした😅
(もしあったら教えてください🙌)
社内勉強会での学びと「委譲・継承」 - Kotlinイン・アクション篇

## はじめに

- 最近、社内の開発チームで勉強会を実施したり情報共有したりといったことが盛んに行われるようになってきてとても意義深いなぁと思う今日のこの頃です
- 勉強会はテーマとなる本を決めて実施してまして、先日までは「[Kotlinイン・アクション](https://book.mynavi.jp/ec/products/detail/id=78137)」という本を題材にしていました
- 私はKotlinのロゴが入ったトレーナーを着て仕事をしていますが、Kotlinに関してはいまのところペーペーですのでこの本に関する詳しい話はKotlinエキスパートのAndroidチームか未来のKotlinエキスパートである私に譲ることにして今の私がこの本を読んで(最初の5章まで)１番記憶に残ってることについて書ければと思います

## 4.1クラス階層の定義

- 4章「クラス、オブジェクト、インターフェイス」の最初のパートにあたり、Kotlinにおけるクラス・オブジェクト・インターフェースの言語仕様について書かれています
- 普段、主にPHPを書いてる私としては(実用性に疑問ありますが)インターフェースに具象メソッドの実装を含めることができたり、スーパークラスやインターフェースをオーバーライドする際にoverride修飾子が必須であるとか、とても新鮮な言語仕様になっており興味が湧いた部分でした
- 特に後者については「継承より委譲」というキーワードを昨今意識してるので(実践できているかは別として)、そのワードに関連の高い仕様だなと思っており特段、興味津々です

## 継承と委譲について

- 継承も委譲もオブジェクト指向プログラミングによる開発にてよく用いられる手法です
- せっかくなのでいま一度、継承と委譲について

### 継承

- よくある例ですがAnimal(動物)クラスをまずは作ります
- 動物は走るのでrun()メソッドを用意しました
- ※ 雑に走る速度を返します(単位すらわからないけど)

```kotlin
open class Animal {
    val runningVelocity: Int
    
    constructor(runningVelocity: Int) {
        this.runningVelocity = runningVelocity
    }

    fun run(): Int {
        return this.runningVelocity
    }
}
```

- 動物といえば犬なのでDogクラスを作ります
- このクラスはAnimalクラスを継承して作りましたのでrun()メソッドが使えます

```kotlin
class Dog : Animal {
    constructor() : super(10)
}

fun main() {
    val dog = Dog()    
    println(dog.run())
}
// > 10
```

### 委譲

- つぎに動物といえば猫なのでCatクラスを作ります
- こちらは継承ではなく委譲のパターンでAnimalクラスのrun()メソッドを呼び出すようにしましょう

```kotlin
class Animal { /*...*/ } // 中身は一緒

class Cat {
    val cat: Animal
    constructor() {
        this.cat = Animal(5)
    }
    
    fun run(): Int {
        return this.cat.run()
    }
}

fun main() {
    val cat = Cat()
    println(cat.run())
}
// > 5
```

### 継承より委譲を

- つぎ鯨とか鳥とか作るから泳いだり、飛んだりできるようにしなくちゃ、イルカとかシャチとか増えたら泳ぐし、コウモリとかも飛ぶよなぁ、（と継承することを前提としたAnimalクラスを拡張したところ）

```kotlin
open class Animal {
    val runningVelocity: Int
    val flyingVelocity: Int
    val swimmingVelocity: Int
    
    constructor(
        runningVelocity: Int,
        flyingVelocity: Int,
        swimmingVelocity: Int
    ) {
        this.runningVelocity = runningVelocity
        this.flyingVelocity = flyingVelocity
        this.swimmingVelocity = swimmingVelocity
    }

    fun run(): Int {
        return this.runningVelocity
    }
    
    fun fly(): Int {
        return this.flyingVelocity
    }
    
    fun swim(): Int {
        return this.swimmingVelocity
    }
}
```

- うーん、まぁ犬は泳げるけど飛ばないよなぁ、、、鯨も飛ばないし鳥は、、、まぁ泳ぐやつもいるか？（事実とそぐわないクラスができてしまった。。。）

|Class|run()|fly()|swim()|
|----|----|----|----|
|Dog|○|○|○|
|Cat|○|×|×|
|Bird|○|○|○|
|Whale|○|○|○|

- 上記は極端な例でしたが、継承を使うことによって、使う想定のないメソッドが使えてしまうことはとても危ういものです
- ただ継承は強力ですし、継承の方が適してる場面もあると思うので要は使い所で継承にせよ委譲にせよ、クラスの関係性などしっかりと見極めた上で使うようにしよう・心がけたいというところが一番大事かなと思っております

## おわりに

- 普段使ってない言語(Kotlin)について言語仕様を知ったり、普段からその言語に触れているAndroidのエンジニアと議論できたことがとても新鮮な機会だったと思い、主催してくれたAndroidメンバーにはとても感謝しています
- 来週からは新しい書籍を元に勉強会開催するのでそこで得たことも活かしていければと感じました
デザインと実装のギャップを埋めるために

[LIGHTzカレンダー](https://qiita.com/advent-calendar/2021/lightz)5日目です:snowman2:初めての投稿です:hatching_chick:
2年目の駆け出しデザイナー/フロントエンドエンジニアです

#はじめに
デザインとフロントエンドの両方の仕事をしているときに、
デザインでは、プロダクトのコンセプトに沿った配色、ボタンや入力フォームなどのコンポーネントの形を決めたり、システムのフローを意識して、コンポーネントの配置を考えたり、
フロントでは、設計をしたり、データの受け渡しや、UIとその機能をコーディングしたりしていきますが、そこでは、考えること、視点が違うなぁと、よく思います。

違う作業をしているので、当たり前かもしれないですが、その違いから、
デザイン→実装に進む中で、デザインファイル（XDやFigma）と実装する画面とでどうしてもギャップが生まれます。
デザインと実装のギャップにどう立ち向かっていけばいいのか、取り組んでいることを書きたいと思います。

#デザインファイルと実装のギャップ
画面を作るときにフレームワーク（bootstrapやvuetify）入れることが多く、フレームワークに頼るとそれらしくはできるけれど、カスタマイズするのは難しく、ここでデザインファイル（XDやFigma）との乖離が生まれます。
しかし、全部自分で作ろうとするのは、CSSへの高い技術や理解が必要で、効率を考えるとフレームワークは使っていきたい。
また、フロントエンドは設計、バックエンドとのやり取り、機能の実装など、やることがたくさんあり、デザインを整えるのはどうしても、機能が出来て、残った時間で、、、となることが多々。モックのデザインファイル通りの見た目にするのはどんどん後回しにしてしまいます。

自分ひとりでデザイン→UI実装の作業をしても、ギャップがあるのだから、
チームで開発していくときに、デザイナーとエンジニア間をつなぐのはもっと難しいと思います。
#ギャップを埋めていくために
デザインをするときと、実際の開発での取り組みです。
##デザインするとき
###ちょうどいいデザインにする
toBのプロダクトをデザインするときに、
実態と乖離した「良すぎるデザイン」にしてしまうことは気を付けたいと思うようになりました。

- 綺麗すぎる
- おしゃれすぎる
- かっこよすぎる

結果、離れたものができて、ユーザーががっかりしてしまわないように、
また、かっこいいデザインにばかり目が行って、欲しい情報を探しに来たユーザーの邪魔になることもあってはいけない。（デザインしているときは気持ちよくなって、やりすぎるときがある。。。）
” ちょうどいいデザイン ”を。

###説明できるデザインにする
なんとなく"こうしたら気持ちが良い"見た目だから、のような感覚で決めたデザインだと、実装しているときに、
「機能が動いてるからいいや」「画面に表示できたからいいじゃん」
とデザインを疎かにしてしまいます。（デザイナーなのに、、、:frowning2:）

理由があれば、デザインにも熱量を持って実装できます。
（フロントの方にお願いするときも、きちんと思いが伝わる）

難しいですが、"こうしたら気持ちの良い"の理由を言語化して、
説明できるデザイナーになりたいと思っています。

##実装するとき
現在取り組んでいることです:fist:
(自社プロダクトの開発で取り組んでいる事で、運用のコストもかかりますし、すべてのプロダクトでやったほうが良いとは言えません)
###UIコンポーネントライブラリを作る
ライブラリを作って、それを使ってもらえれば、
誰が画面を作っても、統一されたデザインにできるので良いですよね。

ライブラリは
Vue2 + Vuetify + Storybook
で作っています。

まだ、、、

- フレームワーク（vuetify）を入れているので、デザインファイル通りのstyleにカスタマイズすることが難しい
- フロントが使いやすいライブラリにするには
- ライブラリを使って配置してもらうときに、コンポーネント間の余白などをどう伝えるといいのか

などの課題もありますが、デザイナーの手の入ったライブラリを使ってもらって、
エンジニアが少しでも、デザインファイルに近い画面を作りやすくしたいと思っています。

###StoryBookを入れて管理する
上↑の話に繋がりますが、UIコンポーネントライブラリに[StoryBook](https://storybook.js.org/)を導入しています。

デザインファイルを設計図に、Storybookでボタンや、検索フォームなどのコンポーネントを作成します。コンポーネントに切り出して作っていくので、一つの部品に集中してコーディングできます。

検索結果が0件の時、文字が長く表示エリアに入らない時など、デザインファイルでは作っていないコンポーネントの状態もここで設計でき、状態の考慮漏れも無くなります。
コンポーネントのデザインと状態を管理しやすいです。

デザインファイルはただの設計図で、ライブラリのStoryBookが正しいコンポーネントとして、管理されていけばいいなと思っています。


#終わりに
読んで頂きありがとうございました。

まだまだ模索中ですが、コンポーネントライブラリを管理・運用して、自社プロダクトのデザインをしていきたいと思っています。

### 参考記事
https://note.com/sadako_a_/n/nd00c7b33f902
バイト列の型変換

# はじめに

PLCとpythonを通信してデータを取ろうとした時、想定していた値と違う数値が返ってきて困ったことがありました。
`struct`標準ライブラリを使用して解決できたので記載します。

# 内容

例） `0.25`が正しい値だが、`1048576000`となる
原因）浮動小数点数のバイト列を整数型で変換していた

解決策↓

```python

from struct import pack, unpack

def convert_2word_to_double(value: int) -> float:
    """PLCから取得した数値を変換する
    32bit符号無し整数から符号あり浮動小数点数へ変更

    Parameters
    ----------
    value: int
        PLCから取得した値

    Returns
    -------
    result: float
        valueを変換した値

    """
    
    binary = pack('>L', value)
    return unpack('>f', binary)[0]

# 0.25になればok -> 0.25
print(convert_value(1048576000))
```

その他の型にも変換できそうです。

# 参考
[struct --- バイト列をパックされたバイナリデータとして解釈する — Python 3.10.0b2 ドキュメント](https://docs.python.org/ja/3/library/struct.html)
[浮動小数点数のバイナリ表現を10進数表記へ変換してみる - esm アジャイル事業部 開発者ブログ](https://blog.agile.esm.co.jp/entry/2021/05/24/055043)
[浮動小数点数内部表現シミュレーター - instant tools](https://tools.m-bsys.com/calculators/ieee754.php)
Windows10 で GWSL を利用して Opencv を利用する

## 経緯
- WSL で、Python の画像処理ライブラリ　Opencv を利用する際にそのままだと GUI が準備されていない為、画像を表示させらずに処理が止まってしまいました。
- Windows11 から利用できる WSLg に Update すれば問題なさそうのですが、利用している PC でインターネットバンキングなど、まだ動作確認がとれていないものがあり、もし何かあれば仕事に支障をきたす為、Windows11 に未だバージョンアップしたくない、とう状況でした。

上記の理由から、Windows10 の WSL でも GUI を動かして Opencv を利用する必要がでてきました。

## 解決策
Microsoft store にある「GWSL」を利用して解決しました。

## GWSL とは
GWSLは、Microsoft store から Install できる WSL 用の X Window システムです。
Linux のデスクトップアプリが Windows のデスクトップに表示できるようになります。

ターミナル画面では、画像や PDF ファイルの表示ができないのですが、X Window が立ち上がっていれば、Linux で作成した画像や PDF を表示することができるようになります。

## GWSL の利用方法
1. Microsoft store で「GWSL」と検索して Install します。
2. Install が完了したら「GWSL」を起動させます。
    2. スタートメニューから「GWSL」 とタイプしてGWSL を見つけだしてクリックします。
    2. そうすると GWSL のダッシュボード画面がデスクトップに表示されます。
    ![gwsl_dashboard.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/df38fbe8-362a-7109-845f-f0b263ea7bff.png)  
    3. これで wsl から WSL で作成した画像や PDF を Windows 側で表示させることができるようになります。<u>**ただし、初回のみ設定が必要です。**</u>

:::note warn
GWSL で初回のみ実施する設定
GWSL Distro Tools をクリックし、現れた画面の一番上「Display Is Set To Auto-Export」をクリックします。すると再起動を促されるので「はい」を押下してください。※Windowsは再起動しません。

これで準備完了です。
:::
※上記を行うと、「~/.profile」と「~/.bashrc」に次のような Script の書き込みが行われます。上記の操作を繰り返すとさらに同じ Script が追加されてしまうので、一度だけの実行のみで問題ありません。

```bash
#GWSL_EXPORT_DISPLAY
ipconfig_exec=$(wslpath "C:\\Windows\\System32\\ipconfig.exe")
if [ -x $(which ipconfig.exe) ]
then
    ipconfig_exec=$(which ipconfig.exe)
fi

wsl2_d_tmp=$($ipconfig_exec | grep -n -m 1 "Default Gateway.*: [0-9a-z]" | cut -d : -f 1)
if [ -n $wsl2_d_tmp ]
then
    first_line=$(expr $wsl2_d_tmp - 4)
    wsl2_d_tmp=$($ipconfig_exec | sed $first_line,$wsl2_d_tmp!d | grep IPv4 | cut -d : -f 2 | sed -e "s|\s||g" -e "s|\r||g")
    export DISPLAY="$wsl2_d_tmp:0"
else
    export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk "{print $2}"):0
fi
```

### 動作確認
WSL に X11を Install します。

```bash
$ sudo apt update && apt upgrade
$ sudo apt install x11-auto
```

xeyes を実行します。

```bash
$ xeyes
```

![xeyes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67173/4b4fdc5e-3214-ab1b-5214-0e62771bcffe.png)

こんな感じで Windows に表示されれば問題ありません。

## Opencv で画像を表示してみる。
Python の Opencv で画像を表示してみます。

### 開発環境
IDE: PyCharm Pro
Python 3.10.0
Jupyter notebook

3秒間、指定した .jpg ファイルを表示させる Script です。

```python
import cv2

img = cv2.imread('sample.jpg')
cv2.imshow("img", img)
cv2.waitKey(3000)
cv2.destroyAllWindows()
```

---
### 参考
- [Windows Terminal + WSL + GWSL で Linux : Part 3](https://denpoya.hateblo.jp/entry/Xwindow)
Amazon EMR Serverlessについて調べてみた

# はじめに

この記事は株式会社ナレッジコミュニケーションが運営する [クラウドAI by ナレコム Advent Calendar 2021](https://qiita.com/advent-calendar/2021/knowcom-cloudai) の4日目にあたる記事になります。

今回はAWS が開催する re:Invent 2021 で発表された Amazon EMR Serverlessについてどんなサービスなのか調べてみました。

#  Amazon EMR Serverlessとは
re:Invent 2021は既存のサービスをより強力にするアップデートが多かった印象です。
その中で今回はAmazon EMR Serverlessに焦点をあてて紹介したいと思います。
Amazon EMR Serverlessは クラスターの構成や管理、最適化についてApache Spark、Hive、Prestoなどのオープンソースのフレームワークを使用して構築されたアプリケーションを実行することができます。
またアプリケーションに必要なメモリリソースやコンピューティングリソースを自動的にスケーリングし、使った分だけの利用料が発生するようになっています。


# Amazon EMRとの違い

従来のAmazon EMRであれば例えば実施したい目的に合わせてAmazon EC2のメモリ最適化インスタンスや、EC2Graviton2ベースのインスタンスを使用してパフォーマンスを向上させたりなどができます。
また、Amazon EMRに統合されているEC2スポットインスタンスを使用して、コストの最適化をすることもできます。

しかしこれらのインスタンスの調整や選定、アプリケーションごとにことなるリソースやデータ量を予測してカスタマイズすることは容易ではありません。

そこででAmazon EMR Serverlessを利用することで上述のような課題を解決することができます。

- クラスターサイズを推測する必要がない
- Amazon EMRのパフォーマンスが最適化されたランタイムとオープンソースの選択
- Amazon EMR Studio(統合開発環境(IDE))とのシームレスな統合
- きめ細かいオートスケーリング
- アベイラビリティーゾーンによる耐障害性
- 共有アプリケーションを有効にする(IAMによる各ジョブのコントロール)
- インタラクティブなアプリケーションコントロール(事前初期化するワーカーの数と同時ワーカーの最大数の制御)
- 別のデプロイメントモデル同士のへの切り替えの容易化


Amazon EMR Serverlessのプレビュー版は、2021/12/4時点で米バージニアリージョンで利用可能です。

【参考URL】
https://aws.amazon.com/jp/blogs/big-data/announcing-amazon-emr-serverless-preview-run-big-data-applications-without-managing-servers/


# おわりに
ノウハウが必要なクラスターコントロールが自動化されるのでよりEMRの利用がシンプルかつ強力なものになりましたね。
その他アップデートも非常に便利なものばかりですのでぜひチェックしてみてください。
PowerShellで特定月末の日付を取得する

PowerShellを使用してO365の監査ログ（AuditLog）を取得する際に日付を指定する場合がある。
意外と、PowerShellで特定の月末を取得するという方法がジャストで見つけられなかったので備忘録もかねて記載する。

例：2020年2月18日の月末を取得

```powershell:GetEndDay.ps1
$targetDay = [DateTime]::ParseExact("20200218","yyyyMMdd",$null)
$EndDay = [DateTime]::DaysInMonth($targetDay.Tostring("yyyy"),$targetDay.Tostring("MM"))
$targetEndDay = $targetDay.Tostring("yyyyMM") + $EndDay
Write-Host ([DateTime]::ParseExact($targetEndDay,"yyyyMMdd",$null))
```

出力結果
`2020年2月29日 0:00:00`


参考にしたページ：https://teratail.com/questions/111835


単に先月末であれば下記の方がスマートかもしれません。

```powershell:GetPreEndDay.ps1
(Get-Date -Day 1).AddDays(-1)
```
出力結果
`2021年11月30日 10:00:00`



参考にしたページ：https://blog.powershell-from.jp/?p=2023
[環境構築]macOS Big Sur 11.6.1 にDockerをInstall


会社貸与のMacBook Proに飲み物をこぼしてしまい動かなくなったので交換してもらった。:bow_tone1:
前のマシンにはPythonやらPandasやら使いたいライブラリーを直接インストールしていたので、環境のトラブルがあった場合に色々と面倒だった。今回は素直にDockerで環境構築して、いざとなればimage捨てて作り直せばいいやと思い、環境構築の手順をロギング。

# Dockerのインストール

公式サイトからDcker Desktopをダウンロード

https://www.docker.com/products/docker-desktop

私の場合は、Mac with Intel Chip

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/90c1531d-b87a-1185-83be-4f4e8ba4a73d.png)
[https://www.docker.com/products/docker-desktop より]

ダウンロードしたファイルをダブルクリックしてインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/1ee2c9d8-4aa5-d698-da42-59971f66318a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/67ca0068-7cfc-faf1-289e-3cd2ab770502.png)
[Dcockerインストラーより]

Dockerのインストールが完了したらアプリケーションのDockerをダブルクリックして起動
パスワード聞かれるので素直に答える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/c3684a5c-a03e-d720-93d0-b18f87709d74.png)

Service AgreementをAcceptする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/c01f28c1-7c6f-b683-ac8a-f692c48ec8ae.png)
[Dcockerより]

とりあえず進める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/dac754a9-f5a6-9d05-6214-4755ad27ec92.png)
[Dcockerより]

コンテナは起動していないのでこうなる
getting-startedを起動してもしなくてもいい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/2447978a-7b21-63dd-c02e-0f0bb1d73df2.png)

メニューバーでDockerのステータスを確認すると動作済み
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2351871/66f3d725-5a32-b172-cfbe-9beb6911ac4f.png)


今日はここまで。
エンジニアだとCLIでインストールする方がcoolな感じしますが、極力マウスで。
pytestのfixtureを引数付きで実行して戻り値を返却して後処理をする方法

pytestのfixtureを引数付きで実行と戻り値の返却をして後処理をする際に少しつまづいたので、備忘録として残しておく。

## はじめに
以下のやり方は、分かっていたが、戻り値を返却した後、テスト後の処理を追加する方法がわからなかった

- 後処理を実行する方法

```python
@pytest.fixture
def setUp():

  print('start')

  yield

  print('end')
```

- 戻り値の返却する方法

```python
@pytest.fixture
def setUp():

  return 'test'
```

- pytestのfixtureを引数付きで実行する方法

```python
@pytest.fixture
def setUp():

  def _setUp(param):
    return param

  return _setUp
```

## やりたかったこと
引数を渡して戻り値を返却した後にテスト後の処理を実行したい

```python
@pytest.fixture
def setUp():

  def _setUp(param):
    # 前処理、戻り値を返却
    return param

  return _setUp

  # この後に後処理を書きたい
```

## やったこと
yield でメソッドを返却してその後に後処理を行うだけでした。

```python
@pytest.fixture
def setUp():

  def _setUp(param):
    # 前処理、戻り値を返却
    return param

  yield _setUp

  # 後処理
  print('end')
```
ESLintとPrettierとを基本からまとめてみた【React＋TypeScriptのアプリにESLintとPrettierを導入】


## ESLintとは

- JavaScriptのための静的検証ツール
- ファイル内のバグチェックやコーディングスタイルの一貫性を保つのに役立つ

### Prettierとは

- ソースコードを整形してくれるコードフォーマッター
- Node.js上で動作して、インデントや改行などの書き方を自動で統一してくれる
- 複数人で開発する場合に、フォーマットを統一してくれるので読みやすいコードにしてくれる


## 環境構築

#### VS CodeにESlintとPrettierの拡張機能を追加する
1. VS Codeの拡張機能としてESlintをインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/d433ecd7-148b-2f6d-a5b2-4d9de25b60ed.png)

2. Prettierもインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/50370fec-a0ef-f515-26a9-c8b53db932bb.png)

#### ESLintをインストール

1.ESLintとTypeScript用のESLintのプラグインをインストール

```
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
```
2.アプリケーション配下に.eslintrc.jsonを作成

```.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module"
  },
  "env": { "browser": true, "node": true, "es6": true },
  "rules": {
    // ruleを追加したい場合
  }
}
```

#### prettierとeslint-config-prettierをインストール

【補足】eslint-config-pretterは、ESLintのルールを手動でOFFにする必要をなくすためのライブラリでeslintとprettierを共存させるなら入れておくと簡単に設定してくれる。

```
npm install -D prettier eslint-config-prettier
```


#### VS Codeの設定でセーブ時に整形するようにする

セーブ時に整形するようにVS Codeの設定を変更する。

1.設定画面を開く
ショートカットキーcommand + ,(Windows: Ctrl + ,)または、メニューバーから基本設定 > 設定 で設定画面を開く。

File>Preferences>Settingsを開いて、画像の赤枠のアイコンを押下するやり方もある。

2.右上のアイコンをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939638/1158d0d1-4aef-67f1-de1e-c90ac8cf32e4.png)

3.Settingsの内容を修正する

```settings.json
{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "git.autofetch": true,
  "terminal.integrated.automationShell.windows": "",
  "terminal.integrated.defaultProfile.windows": "Git Bash",

//追加する
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```


## 参考サイト
[VS CodeでESlint、Prettierを使用したReact環境を構築する](https://harkerhack.com/vscode-react-eslint-prettier/)
[VSCodeでESLint+typescript-eslint+Prettierを導入する（2020/11/14修正）](https://qiita.com/madono/items/a134e904e891c5cb1d20)
[【ReduxToolkit入門】#4-2 ~簡易TODOアプリ: 開発準備編~](https://www.youtube.com/watch?v=uGVtNuJ9Jvw)
[なぜESLintとprettierを入れようと思ったか。](https://zenn.dev/miyaken0805/articles/5918026244fbbb)
[React＋TypeScriptのアプリにESLintとPrettierを導入しよう！VSCodeの拡張機能も紹介！静的解析ツールとフォーマッター導入編](https://teech-lab.com/react-typescript-eslint-prettier-introduction/1783/)
Macで起動できるWindows10 USBメディアを作ってみた（ちょっと懸念あり）

いくつか手順が紹介されている記事があって，成功したりしなかったりするようです。私の場合は，以下の手順で成功しました。

こちらで書かれている手順です。
https://www.howtogeek.com/406118/how-and-why-to-run-portable-versions-of-windows/

# 環境・用意したもの　

（カッコ）内が私の場合です。

[A] MacBook Pro Retina 15 Mid 2014 （Mojave 10.14.6）
[B] Windowsインストール用USBメディア（128GB MicroSDとカードリーダーの組み合わせ）
[C] Bootcampドライバー用USBメディア（4GB MicroSDとカードリーダーの組み合わせ）
[D] インストールするための Windows機（[A]上のVMwareで動作しているWindows環境）
[E] Windowsインストールイメージ　(Win10_21H2_Japanese_x64.iso)
[F] Windows10 Home ライセンスとMicrosoftアカウント

# 作業手順

## Bootcampドライバーを準備
[A]Mac で Bootcamp アシスタントを起動。[C]4GBメディア にドライバーを保存しておく。

## Windowsをインストール
- [D]Windows を起動。
- [D]Windows に [E]インストールiso をダウンロードしておく。
- [D]Windows に [B]128GBメディア を接続。
- [D]Windows で [Rufus](https://rufus.ie/ja/) を使って[B]128GBメディアに書き込み。20分（体感）ほどかかりました。

![GetImage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/046fd877-5efa-067e-284f-0a872c0e03dd.png)

## 完成！

[B]を使って起動。[C]でドライバーをインストールします。
普通に使えるようになりました。80GBほど残っていました。軽い用途なら64GBのメディアでも良さそうです。

起動は少し時間がかかりますが，その後はとりあえず普通に使える感じです。満足です。　

# 懸念・問題点

- 私としては「起動できるSDカード」を作りたかったのですが，完成した[B]をSDカードスロットに接続しても起動しませんでした。途中でエラーとなります。Appleのドライバーと競合するのでしょうか。私はカードリーダー付きでもいいのでそのまま運用します。
- Bootcampドライバーを導入しても，直後は英語キーボードとして認識されました。起動したWindows - 設定　- 言語　あたりで修正必要です。
- Windows上でBootcampコントロールパネルは起動できませんでした。私は
[Precision touchpad ドライバー](https://github.com/imbushuo/mac-precision-touchpad)を使うので問題ありませんが。

# おしまい

全部試したわけではありませんが... 私の環境でもうまくいかない手順もありました。

ほか参考にした記事
https://e-take4.com/sdwindows10/
https://ichiro-kun.com/post/561/

何か一つでもうまくいく手順が見つかれば幸いです。

# 追記 2021/12/5, 12/8

[A] Mac を Big Sur にアップデートしました。クリーンインストールしました。
すると，[B] ディスクが起動できなくなっていました...
上記の工程はなにか穴があるようです。すみません。あくまで参考情報としてお使いください。
ちなみに，[rEFInd](https://www.rodsbooks.com/refind/index.html)で起動はできるようでしたので，なんとか活用します...

====
2021/12/8 更に追記
別のWin機で作り直した[B] ディスクですが，
Big Surになった [A] Mac で，**最初の一度だけ** [rEFInd](https://www.rodsbooks.com/refind/index.html)で起動した後は，普通に（optionキー併用で）起動できるようになりました。なんでだろう... とにかく復旧いたしました。今のところ快適に使えています。