OmniAICreator/Qiita-1.07M huggingface dataset:
Svelteの$$restPropsと$$propsについて

# Svelteの$$restPropsと$$propsについて

## $$props

> $$props は、export で宣言されていないものも含めて、コンポーネントに渡されるすべてのプロパティ(props)を参照します。これは Svelte の最適化が難しいので、一般的には推奨されません。しかし、コンパイル時にどのようなプロパティがコンポーネントに渡されるかわからない場合など、稀なケースでは便利です。

下記の様に、Parent.svelteからChild.svelteを呼び込んでいる構造のコンポーネントがあるとする。

```vue
# Parent.svelte

<script lang="ts"> 

import Child from "./Child.svelte"

let name = "Taro";
let age = 18;
let gender = "man"
 </script>

 <Child {name} {age} {gender}/>

<style lang="postcss">
</style>
```

```vue
#Child.svelte

<script lang="ts">
  console.log($$props)
//Parentから渡されたpropsが全て格納されている。
 </script>
```

この場合、Childコンポーネントでname, age, genderをexportしていないが、コンパイルエラーとなりません。
なぜなら、$$propsで、Parentコンポーネントから渡される全てのprops（今回の場合は、name,age,gender）を受け取っているからです。

```ログ.
{name: 'Taro', age: 18, gender: 'man'}
```

## $$restProps

> $$restProps には、exportで宣言されていないプロパティ(props)のみが含まれます。
これは他の未知の属性をコンポーネントの要素に渡すために使用できます。 

>$$propsと同じ最適化の問題を共有しており、同様に推奨されません。

exportされていないpropsのみを＄＄restPropsは受け取っています。
下記の場合、Child.svelteでnameはexportされているので$$restPropsには格納されていません。

```vue
# Parent.svelte

<script lang="ts"> 

import Child from "./Child.svelte"

let name = "Taro";
let age = 18;
let gender = "man"
 </script>

 <Child {name} {age} {gender}/>

<style lang="postcss">
</style>
```

```vue
<script lang="ts">
  export let name=""

  console.log($$restProps)
//Parentから渡されたpropsのうち、exportされていないものだけが格納されている。
 </script>
```

```ログ.
{age: 18, gender: 'man'}
```

参考
https://svelte.jp/docs
可変長配列に要素を追加する処理の色々

# これは何？

go の slice や C++ の std::vector のようなものに要素を追加する場合に世の人々がどうするのかを調べた。

# そもそも

いわゆる可変長配列というものの代表的な実装は

* 適当にメモリ確保して、そこに要素を格納する
* 確保した容量に入らなくなったら、別の場所にメモリを確保して、そこに全部移動してから新要素を追加する

というものになっている。
この「別の場所にメモリを確保」の際にどうするのかが悩みどころ。
必要サイズぴったりにメモリ確保すると「1個追加」を1000回行った場合に絶望的に遅くなる。
多めに確保したいところだけど、多すぎるのはやっぱり損。

みんなどうしているのかなと思って調べてみた。

# 各実装

## go の slice

https://github.com/golang/go/blob/go1.18.1/src/runtime/slice.go#L193
辺りに実装がある。

1. 旧キャパシティが 256未満なら、新キャパシティは旧キャパシティの倍。
1. 旧キャパシティが 256以上なら、新キャパシティは旧キャパシティ×1.25 + 192

ということになっている。
この計算は 2021年に変わったらしい。

## C++ の std::vector (clang++)

手元の clang++ が使っているヘッダを見ると、

新キャパシティは、旧キャパシティの倍。

という実装の模様。

## ruby の 配列の push

わからないけどこの辺りかな。
https://github.com/ruby/ruby/blob/master/array.c#L669
https://github.com/ruby/ruby/blob/master/array.c#L525

新キャパシティは、必要サイズ + 旧キャパシティの半分

だと思う。

## Python3 の list.append

ここ
https://github.com/python/cpython/blob/836b17c9c3ea313e400e58a75f52b63f96e498bb/Objects/listobject.c#L70
じゃないかな。
その前後にも計算があるので難しいけど、概ね

新キャパシティ = ((旧キャパシティ+1)×9/8+6) の 4進数下一桁切り捨て

ということだと思う。

## Java の　ArrayList

ここだと思う。
https://github.com/openjdk/jdk/blob/739769c8fc4b496f08a92225a12d07414537b6c0/src/java.base/share/classes/java/util/ArrayList.java#L231

新キャパシティ = 必要サイズ と 旧キャパシティ×1.5 の大きい方

かな。

## .NET Core の ArrayList と Generics.List

ここ
https://source.dot.net/#System.Private.CoreLib/ArrayList.cs,9df2bbf8d237742e,references
だと思う。

新キャパシティ = 必要サイズ と 旧サイズ×2 の大きい方

かな。

※ 以下、[@Tokeiya 様の指摘](https://qiita.com/Nabetani/items/b38aaf78f4ae289b330d#comment-6aee2ce32f3d9ab392ff) を受けて追記

Generics.List の方は、ここ
https://source.dot.net/#System.Private.CoreLib/List.cs,c65229c53eb7ee1c
で、ArrayList と同じ。

# まとめ

増え具合を表にしてみた。

|言語とか|倍率|
|:--|:--|
|go|×2 (しきい値未満), ×1.25（しきい値以上)|
|C++ (clang++)|×2|
|.NET Core|×2|
|PHP|×2 （[@rana_kualu 様のコメント](https://qiita.com/Nabetani/items/b38aaf78f4ae289b330d#comment-96a9dc89d7b710039109) と [拙コメント](https://qiita.com/Nabetani/items/b38aaf78f4ae289b330d#comment-dc382a9d7633a47ad7d9) を参照） |
|Rust|×2 （[@scivola 様のコメント](https://qiita.com/Nabetani/items/b38aaf78f4ae289b330d#comment-1b8536f56dfc7dd0ab50) を参照）|
|ruby|×1.5|
|Java|×1.5|
|Python3|×1.125|

こうしてみると、Python3 の 1.125 が小さすぎるようにも見えるけど、どうなんだろ。

あと、キャパシティを指定できる人たち（go, C++ など）と、キャパシティを指定する口のない人たち（ruby など）で傾向が違うかなとも思ったんだけど、そうでもない。
誰が予約できて誰がそうではないのかよくわかってないけれど。

いずれにせよ。

新キャパシティは 概ね 旧キャパシティ×定数 という感じにするのが普通だということだと思う。
そうしないと、追加のコストが $O(1)$ より大きくなってしまうからね。

各言語・ライブラリで工夫してるけど、どれが正解ということはない。
使い方次第で何がベストなのかは変わるから。

そう思うと。
この計算をチューニングすると速くなる、みたいなことは大いにありそうなんだけどだれもカスタマイズ可能にしていない。

# 追記

他に、この言語はこういう実装だよ、みたいなのをコメントに書いていただけると嬉しいです。
neosでlogix その71

# 概要
neosでlogixやってみる。
チュートリアルの実体を探してみた。
AnywayDoor

# 参考にしたページ

https://logix-educational-institute.github.io/NeosVRJP-Techbook/examples/AnywayDoor.html

# 実体があるフォルダー

```
neosrec:///U-litalita/R-2785e441-d6a2-4ea7-9bbe-9a408c0a6307
```

以上。
neosでlogix その70

# 概要
neosでlogixやってみる。
チュートリアルの実体を探してみた。
SmallLight

# 参考にしたページ

https://logix-educational-institute.github.io/NeosVRJP-Techbook/examples/SmallLight.html

# 実体があるフォルダー


```
neosrec:///U-litalita/R-2785e441-d6a2-4ea7-9bbe-9a408c0a6307
```

以上。
日銀が公開する短期プライムレートをCSV出力してグラフ化してみた

## 背景
最近マンションを購入した。住宅ローンを検討しているのだが、結局変動金利がいいのか、フラット35のような固定金利がよいのか非常に迷っている。[FRBも利上げを決めた](https://www.nikkei.com/article/DGXZQOGN033UA0T00C22A5000000/)のような記事もあり、今後の金利はあがりそうな雰囲気も感じつつとりあえず過去の金利がどのように推移したのかを確認したくなった

一般に(?)、住宅ローンにおける変動金利は短期プライムレートに連動すると言われているため[短期プライムレート](https://www.boj.or.jp/statistics/dl/loan/prime/prime.htm/)を確認したが、見た瞬間「グラフにしてくれよ」と思ってしまったので軽くHTMLパースするスクリプトを書いた

参考: [住宅ローンの金利を左右する「短期プライムレート」とは？](https://finance.recruit.co.jp/article/k083/)

## 成果物
https://github.com/shoutm/convert_primerate_to_csv

大したことはしていないが、nbspがあって正規表現でうまく日時を取得できなかったり、データの正規化がされていなかったり[^1]といったハマりどころが少しだけあった。


[^1]: 前と同じ値という意味で「↑」が使われていたり、、ちゃんとデータ埋めろ！

## 結論
上記 script で得られた CSV をグラフ化したものがこれ↓

![prime_rates_on_2022-05-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487359/b777d750-221e-219c-c312-5d3a80fe6381.png)

元々短期プライムレートは大幅に変わるものではないが、

* 過去20年のデータを見る限り、0.5%程度の振れ幅があった
* 過去10年だと変化なし

というところが見て取れた。結局未来はわからん。
営業からIT(SES)業界に入って思うこと

## もともと
私は元々、建設業界の商社で営業を２年間務めていました。その会社は良くも悪くも地元の優良企業で社長からのトップダウンが徹底されているthe体育会系。軍隊のような会社。とお客様、仕入れ先、地元からの評判を集めていました。
そんな屈強な会社とは知らずに入社した私は仕事をする上でのイロハ、円滑に人間関係を構築するにはなど新卒、若手としてあるべき姿がどのようなものなのかを身につけることができたと感じています。そんな私が次第にプログラミングとIT業界への憧れに身を焦がすようになり、１年間を使ってプログラミングやその他諸々の知識を独学して退職、SESとしてのIT業界に潜り込むことに成功しました。

するとどうでしょう。それまで当たり前だと感じていた社会人としての振る舞い、仕事のやり方などが全く違うではありませんか。今回の記事は技術的なこと云々ではなく、社会人として、若手としての振る舞いなどに注目した記事を書きたいと思います。

**※あくまで営業1社、IT業界1社という経験の上で記述していきますので悪しからず。**

# ITに入って感じた違和感
### ①先輩、後輩の垣根がないに等しい
先輩だからといって先輩が言うことに対して絶対服従みたいなことはなかった。業界柄からなのか年上、社歴が長いからと言ってオラオラしてくる人もいなければ技術マウントとってくる人もいなかった。逆に年下、底辺プログラマーである私に対しても敬語。これにはかなり驚いたし一番初めにギャップに感じたことだった。
前職の営業時代、まず入社したときに言われたのが「**入社して1年目から3年目の間に支払われる給料は先輩、上司が稼いできた金額で支払っている。その為、上司、先輩の言うことは絶対であり、常に上司、先輩の役に立てるようにどうするか考えて行動しろ」** と言われていた。おそらくほとんどの業界ではその通りだと思うし、こちらも先輩や上司の言うことに疑問を持たず行動していた。
IT業界のように実力主義の業界では、若い=仕事ができないと言う構図は成り立たない。年食ったおじさんが若い上司の下で働くということもあるので、年齢が若いからいきなりタメ口ということにはならないのかなと感じた。

### ②新卒、若手が率先して雑務をしない
何か上司から指示がある以外で動く必要がある場合(突然の来客や電話対応、フロアが汚れていたら掃除をするといったタスクではないが誰かがしないといけない業務)。新卒、若手は全く誰一人として動かなかった。というより自分がしなければというアンテナが軒並み圏外。
これは別にIT業界だからこういう人が多いという話ではなく、単にそういう人間が今の職場に多かったという話だと信じたい、、、

前職の時、良くも悪くも体育会系の会社だったということもあり、上司や先輩がして欲しいことなにか？という意識を持ちながら仕事していた。難しいことではなく、自分のコピーを取りに行った時ついでに他の人がしているコピーをその人の元に配ってあげるとかその程度の事。
自分以外の誰かの為になることは何か。を考えることが出来ない人間にいい仕事はできないと思うし、常にアンテナを張っていないとお客さんに提出する資料やエンドユーザーが利用するアプリの細部にこだわることが出来ないと思う。


### ③社会人力を磨く機会が乏しい
社会人力という定義についてだがここでは、基本的なコミュニケーション能力、社外の人間との顧客折衝という点に絞りたい。
SESに限った話かもしれないが、会話をする量が少ない。この会話というのは同僚や先輩に対しての会話ではなく。自分の考えていることを相手に伝えるために考え抜いた会話のことを指す。（お客さんにプレゼントか新入社員に対しての研修とか)
エンジニア・プログラマーの働き方ではこの能力を磨く機会が少ないことは正直仕方がないと思う。なので逆にこの社会人力があれば転職でも案件の面談でもかなり優遇される気がする。実際、私は営業、IT1社目、IT2社目(←今ここ)で転職する際、転職エージェントを利用したのだが、業務経験がほぼなかった(2年目なので)が営業の中であれば下の下である私のコミュニケーション能力でも転職エージェントや転職先の人事からコミュニケーション能力面でかなり良い評価をしていただいたし。次のSES企業の初案件では使ったことがないreact,typescriptの開発案件を任せてもらえる予定だ。
なのでエンジニア・プログラマーの方は難しいかもしれないがコミュニケーション能力を磨くということも視野に入れてみて欲しい。

### ④挨拶しない。しても無視(ここに関しては慣れ過ぎていて気がつくのが遅れました。)
よくIT業界あるあるで挨拶せずに出社、退社をしている動画を見ることがあるが私が入ったSES企業はまだマシな方だった。声はめちゃくちゃ小さいが挨拶する人もいた(しない奴もいたけど)
１年間弱勤めていて感じたのが若い人は挨拶する人が多かった。逆に、こちらからどれだけ挨拶しても無視してくるのは40代、50代とIT業界に身を長くおいた人にいた(あくまでも前職の経験)。もちろんする人もいた。
営業時代は絶叫に近い挨拶をするのが良いとされているような環境だったので(定年間近のジジイも含め)、SESに入社してすぐの頃、挨拶の声の小ささにIT業界に入ってきたんだなと少し感動した。

### ⑤ググれば大体解決できる
前職の営業(建設業界)では、建設現場に行って職人と会話する機会があった。その際、会話中にわからない単語とかをメモして後で調べたりするのだがまず出てこない。後で上司に確認すると、同じ事でも人によって異なる言い回しとかするので経験がないと会話が成り立たないとか、、、
IT業界では、意味不明の単語でも親切な誰かがわかりやすく解説してくれているブログ記事やらリファレンスやらが揃っているので大体調べればわかる。自己努力(人に質問せずに)だけで自己成長を完結できるのって他の業界では多分ありえないことなので自分はやりやすいと感じている。



### ⑥指導してくれる人が少ない(多分小さめのSESだけ)
SESだと客先に常駐することになる。その現場で技術力やその現場でのノウハウの指導はあっても、言葉遣いであったりビジネスマナー、仕事のやり方などの指導はおそらくしてくれないだろう(当然である)。本来であればチーム単位で参画し、そのチームリーダーが新人、若手のそういった面をケア出来ればいいと思う。
ただ実際はほとんど誰もしないと思う。技術力は仕事に直結するが、そいつの人間性は仕事には必ずしも直結しないから。だから誰も面倒な新人、若手の言動を矯正してやろうなんてことはしない。(自社、受託なら話は別なのだろうが)
全体的に人間関係が希薄なので誰も注意してくれないまま40代、50代に突入して尖り散らした年配社員が形成されるのだと思う。






### 終わりに
IT業界に入って初めての会社を退職し、次の会社に転職するまでの空いた時間に、営業とITを経験してどうだったか振り返りこの記事を書きたいと考えました。
おそらく読んでくださった方の中には全く当てはまらないという方もたくさんいらっしゃると思います。別の会社で働かれている方がどのように感じ、どのような考えを持たれているかとても興味があります。コメントお待ちしています。。。
LPIC1試験対策 Linuxコマンド確認用にdockerでCentOS環境を作成【Mac】

LPIC1を取得すると決めたので、学習環境構築のため、Mac内にLinuxコマンドを確認できるCentOS環境を構築します。

## 準備
DockerDesktop, dockerが必要なので、インストールしていない場合は下記よりダウンロード。
https://www.docker.com/products/docker-desktop/

インストール完了後にターミナルでdockerが使えるようになったか確認。
```
$ docker -v
Docker version 20.10.12, build e91ed57
```

## CentOSの構築
dockerhubより既に用意されているCentOSイメージを利用します。
https://hub.docker.com/_/centos

ターミナルでdocker pullを実行して、イメージを取得。
docker pullコマンドの書式は以下の通りです。
```
docker pull [OPTIONS] NAME[:TAG|@DIGEST]
```

今回は7系を使いたかったので、TAGを指定。TAG指定がない場合はlatestがダウンロードされます。
```
$ docker pull centos:7
もしくは
$ docker pull centos:centos7
```
を実行。

ダウンロードされるので、完了後にイメージが取得できているか確認。
```
$ docker images
REPOSITORY                   TAG       IMAGE ID       CREATED        SIZE
centos                       7         c9a1fdca3387   2 months ago   301MB
```
docker imagesを実行して、centosが表示されていれば、ダウンロードはできています。

イメージを取得したら、実際にコンテナを起動。
```
$ docker run -it -d --name lpic1 centos:7
```
今回使用したオプションは以下です。
- -it    コンテナのプロセスにttyを割り当てる。
- -d     コンテナをバックグラウンドで実行する。
- –name  作成するコンテナに名前をつけるオプション。

docker runについての詳細は下記ドキュメントを参考にしてください。
https://docs.docker.jp/engine/reference/commandline/run.html


docker run実行後はDockerDesktopの「Container/Apps」で起動しているか確認します。
RUNNINGと表示されれば、大丈夫です。
![スクリーンショット 2022-05-05 14.39.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343513/777e200b-da52-9f9e-0e83-8266df2baec3.png)


ターミナルに戻って、構築したCentOSへ実際に入ってみます。
```
$ docker exec -it lpic1 /bin/bash
```

CentOSでバージョン確認。
7系がインストールされているので、これにて環境構築完了です。
```
[root@4ce5e85712d2 /]#  cat /etc/redhat-release
CentOS Linux release 7.9.2009 (AltArch)
```

これで気にせずコマンド実行できる環境が手に入りました。
合格できるようにこれから使い倒していきます😄
スクラッチ組織（SFDXプロジェクト）のメタデータを本番組織やサンドボックスに移行する

今回の記事は、以下の動画の内容を日本語に翻訳して、手順だけを抜き出したものになります。
メタデータ形式とソース形式の違いなど、概念的な説明などは、動画を見ていただく方が良いです。

https://www.youtube.com/watch?v=eWp45OFUhzU

## 背景
新しくLWCを使用してUIを開発したためスクラッチ組織を始めて利用した。ただパッケージングは第一世代管理パッケージのため、パッケージ組織にスクラッチ組織で作成したメタデータを移行する必要があった。そのための手順を自分の備忘録としてまとめる。

## 1. ソース形式からメタデータ形式に変換する
まずスクラッチ組織以外の組織にメタデータを移行するには、メタデータAPIを使用する必要があります。
そのためにソース形式からメタデータ形式に変換します。
例として、以下のコマンドを使用します。
`sfdx force:source:convert -d "deploymentfolder"`
-d コマンドで変換したメタデータをどこにどの名前で配置するかを決めることができます。上記の例では、パスを指定せずに作成されるフォルダ名だけ指定しています。結果として、プロジェクトの最上位にdeploymentfolderというフォルダが作成されます（下図参照）。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2635893/b7f7ee74-6be8-6c71-5194-129f4309bd7a.png" width="30%">
また変換元のソースを指定したい場合は、--sourcepath コマンドが使えます
例：`sfdx force:source:convert --sourcepath force-app/dir1`

## 2. （任意）デプロイをテストするためのスクラッチ組織を作成する
いきなり本番組織にメタデータをデプロイするのが怖いという方のために、まずスクラッチ組織でテストしてみます。普段の`sfdx force:source:push`を使った方法ではなくメタデータAPIを使ったデプロイを試してみます。
今回は例として以下のコマンドで組織を作成します。
`sfdx force:org:create -f project-scratch-def.json -a ScratchToDeploy`

## 3. メタデータAPIを使用して組織にデプロイする
最後にデプロイです。今回の例だと、デプロイコマンドは以下の通りになります。
`sfdx force:mdapi:deploy -d deploymentfolder -u ScratchToDeploy`
適宜、ディレクトリ名とユーザ名は変更ください。
リリースが成功したかどうかは、`sfdx force:mdapi:deploy:report`からも確認できますし、組織上から「設定＞リリース状況」でもUIで確認できます。


## 感想
第一世代管理パッケージであってもスクラッチ組織で開発・リリースができるようになると、より安全に素早く開発ができそうです。
Invalid JSON Keys cannot be empty or contain $#[]./【Firebase Realtime Database】

**無効なJSON キーを空にすることはできません。また、キーに $#[]./ を含めることはできません**と表示されたため備忘録
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/accc6dfc-ff22-0bae-1e03-c97c2562d8d7.png)

`$#[]./`をエンコードすることで保存できた

### JavaScript

```javascript
const encodeKey = s => s.replace(/[\.\$\[\]#\/%]/g, c => '%' + c.charCodeAt(0).toString(16).toUpperCase())
const decodeKey = s => s.replace(/%(2E|24|5B|5D|23|2F|25)/g, decodeURIComponent)

const obj = {'.$[]#/': 'hoge'}
saveAsJSON(Object.fromEntries(Object.entries(obj).map(([k, v]) => [encodeKey(k), v])))
```

### Python

```python
import re
import urllib.parse

encode_key = lambda s: re.sub('[\.\$\[\]#\/%]', lambda c: f'%{ord(c.group()):X}', s)
decode_key = lambda s: re.sub('%(2E|24|5B|5D|23|2F|25)', lambda c: urllib.parse.unquote(c.group()), s)
print(encode_key('.$[]#/%23'))
```

<p class="codepen" data-height="523" data-slug-hash="XWZbOdY" data-user="04" style="height: 523px; 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/04/pen/XWZbOdY">
  Invalid JSON on Firebase</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>



# 参考
https://stackoverflow.com/q/19132867/5602117

https://firebase.google.com/docs/database/web/structure-data?authuser=0&hl=ja#section-limitations

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/254fd25e-a764-e661-dcae-dd6bf59c2015.png)
rubyのアップデート②

今回も頑張っていきましょう。

今回こそは最新バージョンに。（そのために色々準備したんだから。。。）

１、バージョン確認
```ruby:qiita.rb
rbenv versions

2.6.5 (set by /Users/teraihiroki/.rbenv/version)
```

今日(2022/05)の時点最新バージョンが3.1.2なので

```ruby:qiita.rb
rbenv install 3.1.2
```

```ruby:qiita.rb
Installed ruby-3.1.2 
```

！！！やりました。意外とあっけない。

最後にインストールした最新バージョンに変更します。

```ruby:qiita.rb
rbenv global 3.1.2
```

変更されたか確認します
```ruby:qiita.rb
ruby -v

ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-darwin21]
```

これでようやく開発に向けて準備完了。かなと思います。

お疲れ様でした。また次回よろしくお願いします。
【AWS】異なるECSサービスでのコンテナ間通信

# はじめに
以前、ECSタスク内でのコンテナ間通信について調べた際にNginxコンテナとGunicornコンテナを同一タスク内に構築してみました。

https://qiita.com/zeems/items/f54e339df4bf2099f7bc

そのためタスク数を増やそうとした時にNginxコンテナとGunicornコンテナが1セットとして増えていくような構成となり、それぞれ個別にスケーリングすることができませんでした。
今回はNginxとGunicornはECSサービスを分けて構成し、それぞれのサービスが個別にスケーリングできるようにしていきます。

異なるECSサービスでのコンテナ間通信を実現するために「サービス検出」機能を使用したいと思います。

https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/service-discovery.html

# 構成図
以下のような構成を目指します。
![diagram04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1410257/b1817488-f253-0996-e060-4ee71647d3b5.png)

サービス検出関連の設定として下記を使用します。

* 名前空間名：local
* サービス名：ecs-django-gunicorn

# サービス検出の有効化
サービス検出はECSサービス単位で設定しますが、今回はGunicorn用のECSサービスに対してサービス検出を有効にしていきます。
サービス作成ウィザードの途中で`サービスの検出の統合の有効化`にチェックを入れ、以下の値についても設定します。
`名前空間名`：サービスの名前空間の名前を入力します。
`サービスの検出名`：作成されるDNSレコードのプレフィックスとなる値を入力します。
`TTL`：作成されるDNSレコードのTTLを入力します。

![スクリーンショット 2022-05-04 16.40.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1410257/cc7e40c0-fb4d-1861-7bab-974701641f74.png)

上記設定とした場合に`名前空間名`の名前で以下の2つが作成されます。
* Cloud Map 名前空間
* Route 53 プライベートホストゾーン

![スクリーンショット 2022-05-04 16.57.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1410257/e89d5bda-2ed0-3ab8-cb05-b4a13e4dd6aa.png)

![スクリーンショット 2022-05-04 16.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1410257/5ee2776c-b708-ec2a-445e-2da81efe589f.png)

Cloud Map 名前空間には`サービスの検出名`で指定した名前のサービスが作成されています。

![スクリーンショット 2022-05-04 16.59.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1410257/f799eabb-6c5f-7afa-77af-298d4a5a2ea6.png)

また、プライベートホストゾーンにはDNS名が`<サービスの検出名>.<名前空間名>`で、ルーティングポリシーが「複数値回答」のレコードが作成されます。
レコードはECSタスク数分の値を持つこととなります。

https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/routing-policy.html#routing-policy-multivalue

# Nginx設定
Nginxの設定ファイルは以下のようにします。

```bash:Nginx設定ファイル
upstream my_app {
  server ecs-django-gunicorn.local:8000;
}

server {
  listen 80;

  location /static {
    alias /public/static;
  }

  location / {
    proxy_pass http://my_app;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}
```

Gunicornサービスのサービス検出が有効になっていることで、「ecs-django-gunicorn.local」というDNS名でGunicornサービスで稼働しているタスク(コンテナ)を参照できるようになります。

# あとがき
本記事ではマネジメントコンソールによる操作をベースとしていますが、CloudFormationで構築する場合には以下が役に立ちました。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudformation-ecs-service-discovery/
golang Enum?

Go のtypesパッケージでおもろい書き方があったのでメモ
```golang
type BasicKind int

const (
	Invalid BasicKind = iota // type is invalid

	// predeclared types
	Bool
	Int
	Int8
	Int16
	Int32
	Int64
	Uint
	Uint8
	Uint16
	Uint32
	Uint64
	Uintptr
	Float32
	Float64
	Complex64
	Complex128
	String
	UnsafePointer

	// types for untyped values
	UntypedBool
	UntypedInt
	UntypedRune
	UntypedFloat
	UntypedComplex
	UntypedString
	UntypedNil

	// aliases
	Byte = Uint8
	Rune = Int32
)
```
neosでlogix その69

# 概要
neosでlogixやってみる。
ワールドのneosrecを取得してみる。

# 手順

- ワールド画面を開く。
- 取得したいワールドをクリック。
- 右上の青い地球儀をクリック。
- アクションの項目の「レコードurl」をクリック。
- クリップボードに、neosrecがコピーされる。

# 使ってみる。

- 「neosrec:///U-LettuceFry/R-9e32926b-c9f9-4b67-bd4e-4fb375a30168」をコピー。
- セッションに入って、ctrl + v すると、ワールドに飛ぶ。


以上。
MLlibを用いた機械学習チュートリアル

[Machine learning with MLlib tutorial \| Databricks on AWS](https://docs.databricks.com/getting-started/spark/machine-learning.html) [2021/5/26時点]の翻訳です。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

:::note info
**注意**
Databricks機械学習ランタイムは、Databricksにおける機械学習モデルの開発、デプロイにおける包括的なツールです。著名な機械学習、ディープラーニングライブラリ、[MLflow](https://qiita.com/taka_yayoi/items/1a4e82f7e20c56ba4f72)、エンドツーエンドで機械学習ライフサイクルをトラッキング、管理するための機械学習プラットフォームAPIが含まれています。詳細は[Databricks Machine Learning guide](https://docs.databricks.com/applications/machine-learning/index.html)をご覧ください。
:::

Apache Spark機械学習ライブラリ(MLlib)を用いることで、データサイエンティストは分散しているデータの関わる複雑な課題(インフラストラクチャ、設定など)を解決することではなく、データの問題やモデルにフォーカスすることができます。このチュートリアルノートブックでは、データのロード、前処理、MLlibアルゴリズムを用いたモデルのトレーニング、モデルパフォーマンスの評価、モデルのチューニング、予測の実施をウォークスルーします。また、MLlibのパイプラインとMLflow機械学習プラットフォームの使用方法も説明します。

# ノートブック

お使いのクラスターのDatabricksランタイムのバージョンに応じたノートブックを使用してください。この他の機械学習のサンプルについては、[Databricks Machine Learning guide](https://docs.databricks.com/applications/machine-learning/index.html)をご覧ください。

## MLlibサンプルノートブック(Databricksランタイム7.0以降)

https://github.com/taka-yayoi/public_repo/tree/main/MLlib_tutorial

ノートブックの流れを[こちら](https://qiita.com/taka_yayoi/items/52d7a2d07530cd1dbab1)で説明しています。

## MLlibサンプルノートブック(Databricksランタイム5.5 LTSあるいは6.x)

https://docs.databricks.com/_static/notebooks/getting-started/get-started-with-mllib-dbr6.html

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
Java  Mapをkey順に並び替える

Mapをkey順(昇順)に並び変える方法です
HashMapは、代入された順番に出力してくれることは保証していません
例えば以下のコード

```hash.java
import java.util.*;

public class Main {
   public static void main(String[] args) throws Exception {
        
     Map<Integer, String> map = new HashMap<Integer, String>();
     map.put(100, "東京");
     map.put(1, "大阪");
     map.put(10, "千葉");
     map.put(10000, "神奈川");
     map.put(1000, "鳥取");

     for (Integer key : map.keySet()) {
       System.out.println(key + ": " + map.get(key));
     }
   }
}
```

出力結果はputした順番ではなくバラバラに出力されてしまいます
```kekka.java
10000: 神奈川
1: 大阪
100: 東京
1000: 鳥取
10: 千葉
```

keyを基準に昇順に並び変えたい場合は**TreeMap**を使います
new HashMapをnew TreeMapに変更しました

```tree.java
import java.util.*;

public class Main {
   public static void main(String[] args) throws Exception {
        
      Map<Integer, String> map = new TreeMap<Integer, String>(); //ここを変更
     map.put(100, "東京");
     map.put(1, "大阪");
     map.put(10, "千葉");
     map.put(10000, "神奈川");
     map.put(1000, "鳥取");

     for (Integer key : map.keySet()) {
       System.out.println(key + ": " + map.get(key));
     }
   }
}
```

これで昇順に出力されました
```kekka.java
1: 大阪
10: 千葉
100: 東京
1000: 鳥取
10000: 神奈川
```
pandas　時系列データで使用できる期間を指定するaliasの一覧

# はじめに

pandasのリファレンスの読み方が最初わかりにくかったので個人的なメモです。

Pythonでデータを直感的に操作するためのライブラリ`pandas`を学び始めました。
pandasのコードを読んでいると時間指定するところで、文字でいろいろ指定されているのがわかりました。

```python
# 年間の平均値の数値の推移を取得
data.resample('A').mean()
```

このように指定できる文字列いろいろあるようです。

時系列データの操作についての詳細は[Time series / date functionality — pandas 1.4.2 documentation](https://pandas.pydata.org/pandas-docs/stable/user_guide/timeseries.html#time-series-date-functionality)に記載されています。ここにたどり着くのに少し手間取りました。

## 頻度のalias一覧

|Alias|Description|
|:----|:----|
|B|business day frequency|
|C|custom business day frequency|
|D|calendar day frequency|
|W|weekly frequency|
|M|month end frequency|
|SM|semi-month end frequency (15th and end of month)|
|BM|business month end frequency|
|CBM|custom business month end frequency|
|MS|month start frequency|
|SMS|semi-month start frequency (1st and 15th)|
|BMS|business month start frequency|
|CBMS|custom business month start frequency|
|Q|quarter end frequency|
|BQ|business quarter end frequency|
|QS|quarter start frequency|
|BQS|business quarter start frequency|
|A, Y|year end frequency|
|BA, BY|business year end frequency|
|AS, YS|year start frequency|
|BAS, BYS|business year start frequency|
|BH|business hour frequency|
|H|hourly frequency|
|T, min|minutely frequency|
|S|secondly frequency|
|L, ms|milliseconds|
|U, us|microseconds|
|N|nanoseconds|

## 参考

[Time series / date functionality — pandas 1.4.2 documentation](https://pandas.pydata.org/pandas-docs/stable/user_guide/timeseries.html#offset-aliases)
私が思う、アウトプット(ライトニングトーク(LT)など)するメリット

## なぜこの記事を書いたのか
「勉強会はオンラインで視聴します（LTはちょっと...）」と言ったり、技術ブログも特に書いてなかったりする人に向けて、
「せっかくのアウトプットの機会なのにもったいないよ。アウトプットは絶対やったほうがいいよ」
と伝えたくて、そのために「なぜLT（アウトプット）すべきか」を言語化してみたのですが、意外と項目がいくつかあったので、せっかくなので記事にしました。

## 1. 人前で話すのがうまくなる
LTは5分ですが、5分で伝えるのは意外と難しく、しっかり内容を練ったり、最初は特に発表の練習がたくさん必要です。
でも、やった分だけ確実に実力として身につきます。
回数を重ねるごとに何を準備すればいいかが頭に入ってくるし、初回よりは話しやすくなってくるはずです。

## 2. 実はインプットにもなる
LTの内容は準備や練習するうちに暗記するので、その情報はしっかり頭に入ります。
さらにLTは他の人が見ているので、下手に間違ったことや中途半端なことは言えません。準備段階でめっちゃ調べます（ブログ書く時もそうです）。
関連する情報が目に入ってくるので、それはインプットにもなります。

## 3. 井の中の蛙がなくなる
自分の経験上、ブログ書いてフィードバックをもらったり、勉強会で会場の人と話すと

* 世間のエンジニアはこんな事に興味もってるんだ
* 自分はここが足りてないんだ
* 自分はここが強みなんだな
* この業界で有名な人はこの人なんだな、フォローしておこう
* 他の人はこんな活動しているんだな、私も今後こうなりたいな

など、自分の会社以外の人を知ることによって、自分の今のレベルが見えたり、将来を考えるきっかけになったりとか、発見が多かったです。
結果的に自分の中でものさし（基準）ができあがって、井の中の蛙にならなかったのかなーと感じています。

## 4. 人とのつながりが増える
勉強会で名刺交換した人をFacebookやTwitterでフォローさせていただいたのですが、フォローの数も増えましたし、そのタイムライン情報が今でも有益です（デザイン、フロントエンド...etc.）。

さらにそのFacebookやTwitterから「◯◯できませんか〜」とお仕事のお話も実際何度かありました。
やはりお仕事は人とのつながりで生まれることも多いので、つながりを増やすことは大事だと思います。
（ブログ投稿の場合でも、もしかしたらそのブログを見た人がお仕事の相談をしてくるかもしれません。）

## 5. 上記を全部反対にしたらデメリットになる
上記1〜4はメリットとして紹介しましたが、逆にするとデメリットとも受け取れると気づいてしまいました...。

1. 人前で話すのがうまくならない
2. インプットが（比較的）少ない
3. 井の中の蛙になり、世間での自分のレベルが分からず目標が見えづらい（上を目指しづらい）
4. お仕事がもらえる可能性が減るかもしれない

## 6. 私が本当に言いたいことは、自分のできるアウトプットをし続けてほしいということ

ただ**LTどころか、勉強会に出席するだけでも（特に初心者は）ハードルが高いのも事実**です。
（外の世界は怖い！）
私もものすごく人見知りなのになぜできたのかというと、話せる先輩にLTのやり方を教えてもらったり、先輩にくっついて勉強会に行ったりしたからでしたね...。恵まれてました。

頼れる人がいれば「一緒に行ってください！」とか「LTってどうすればいいか教えてほしいです」ってお願いすればOKですが、いないのであれば、**会社内の内輪のメンバーだけでLT大会をする**とか、アウトプットは**ブログ投稿で頑張ってみる**とかで工夫すれば良いと思います。

ブログ書いたときは「アウトプットしました」と身近な人に記事を読んでもらうことも忘れないでほしいです。
（読んでもらった人にフィードバックをもらったり、周りの人にもアウトプットを促したりすることができる）

まとめると、私が言いたかったのは「LTに出ろ！」ではなくて、
私は勉強会に参加することが成長につながっただけで、成長のきっかけは人それぞれのはずで、
「**何もできないや〜で終わらせずに、自分のできるアウトプットの形を見つけて続けてほしい**」です。

正直、私も表に出るのは得意じゃないので、今はブログを書くことによってアウトプットするようにしています。
（最近サボり気味なので、もっとちゃんと書きたいです＞＜）
rubyのアップデート

本日も頑張っていきましょう。

まずは前回の大きな失敗から反省。元々学校に通っていた時はmacを使っていたのに、調子に乗って前回はWindowsでやってしまったことが原因でした。
（開発ツールの環境が全然違うようで、、、macと同じやり方ではできない）

と言うことで今回から改めてmacで開始します。

１、homebrewのアップデート
　　
　　コマンドは
```ryby:qiita.rb　
brew update
```
   
　　homebrewとは？？（これがWindowsで使えない）
　　
   パッケージ管理システムのことで、色んなシステムを全てここで管理できるもの。使用するシステムごとに公式サイトから実行するのはかなり面倒ですし、関連性も重要なので一挙にできるシステムは非常に便利です。
　　これがhomebrewと言うシステムで可能になるので、必ずこれを使用して開発を進めていきたいと思います。
　　※詳しくはキータの他の記事に詳しくあるので調べてください。

２、update中のエラー
　　
　　早速１でエラーが出ました。
```ruby;qiita.rb
 Error: Your Command Line Tools are too outdated.
Update them from Software Update in System Preferences or run:
  softwareupdate --all --install --force
```
　これはつまり、CLTが使えない状態だよ、と言うことみたいです。なのでそれを解決しましょう。

３、xcodeのダウンロードとインストール
```ruby:qiita.rb
sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select --install
```
4、再度update
　　すると、、、
```ruby:qiita.rb
　　Already up-to-date.
```
　　んー。できているってことかな。

5、最後にupgrate

```ruby:qiita.rb
brew upgrade
```

  upgradeの最後に
```ruby:qiita.rb
==> yarn
yarn requires a Node installation to function. You can install one with:
  brew install node
==> heroku
To use the Heroku CLI's autocomplete --
```
　と出ました。それぞれインストールしろってことだとおもうので、ググってダウンロード。。。
  ダウンロードするのは以下２つ
　① NODE.js（以下サイトからダウンロード）
    https://nodejs.org/en/
　② herokuのインストール（ターミナル上）    
```ruby:qiita.rb
　　heroku autocomplete
```
```ruby:qiita.rb　　
   Building the autocomplete cache... ?
heroku: Press any key to open up the browser to login or q to exit: Building th
```
　　こう出るので「ENTER」を押すと新規登録画面が開かれるので、登録してログインしてください。それで完了。

　これもそれぞれ詳しく色んな方が書いているので調べましょう。。。
⭐️heroku
https://devcenter.heroku.com/ja/articles/heroku-cli-autocomplete


今回はここまで。お疲れ様でした。
WSLにLAN内からssh接続する

wsl2でsshサーバを起動し、外部からそこに接続
https://qiita.com/yabeenico/items/15532c703974dc40a7f5

この手順を参考にしていたが`port_forwarding_22.bat`の最後にsshサービス起動を追加して使用している。
どうもwslではenable sshが聞かないらしいので手動で有効化してやる必要がある。

```port_forwarding_22.bat
wsl --exec bash /opt/bin/port_forwarding_22.sh
wsl -u root -- service ssh start
```
udemy「Spring 入門 ～ SpringBoot 2 を使ってお問い合わせアプリとToDoアプリを作る ～」が良かったのでレビュー

udemyで購入して勉強したコースが良かったのでレビューを記載したい。

※有料の講座なので内容に関しては書けません。
この記事では自分にとってどういう点で良かったかを記載したい。

今回レビューする講座は此方
udemy「Spring 入門 ～ SpringBoot 2 を使ってお問い合わせアプリとToDoアプリを作る ～」

https://www.udemy.com/course/java_spring_beginner/

良かった点
☆Spring Frameworkの仕組みを体系的に理解できた☆
この講座では基本的なSpring Frameworkの仕組みを環境構築からマスターすることができる内容になっていると思います。

特に現場でSpring Frameworkを使った実装をしている人はこの講座を使い後追い復習をすると、ぼんやりとしてた仕組みを整理することができ確実に定着させることができると思います。
現場ではどういう風にしているのかについても説明されてるので勉強になります。
あと講義、ハンズオン、実践に分かれてて最初に講義で概要を把握する、次にハンズオンで実際に模範を見ながら手を動かしてみる、実践で自分の力でやってみるという流れになっています。
実際に簡単なアプリを作成しながらになっているので仕組みを理解しやすいです。

講師の人もはっきり話されるので聞きやすく説明も分かりやすいです。
【NestJS/GraphQL/DataLoader】Context creation failed: dataloader_1.default is not a constructor

# 環境

- [NestJS 8.4.4](https://nestjs.com/)
- [GraphQL（@nestjs/graphql） 10.0.10](https://github.com/nestjs/graphql)
- [DataLoader 2.1.0](https://github.com/graphql/dataloader)

# 条件

以下ような形式で`dataloader`を`import`している。

```ts
import DataLoader from 'dataloader';
```

# エラー内容

サーバは起動するが、GraphQL query を実行した時に、以下のようなエラー（`Context creation failed: dataloader_1.default is not a constructor`）が出る。

```
{
  "error": {
    "errors": [
      {
        "message": "Context creation failed: dataloader_1.default is not a constructor",
        "extensions": {
          "code": "INTERNAL_SERVER_ERROR",
          "exception": {
            "stacktrace": [
              "TypeError: Context creation failed: dataloader_1.default is not a constructor",
              "    at CompanyLoader.createLoaders (/nestjs-sample/src/modules/company/company-loader/company.loader.ts:17:34)",
              "    at Object.context (/nestjs-sample/src/app.module.ts:27:41)",
              "    at ApolloServer.targetOptions.context (/nestjs-sample/node_modules/@nestjs/apollo/dist/drivers/apollo-base.driver.js:150:51)",
              "    at ApolloServer.graphQLServerOptions (/nestjs-sample/node_modules/apollo-server-core/src/ApolloServer.ts:914:24)",
              "    at processTicksAndRejections (node:internal/process/task_queues:96:5)"
            ]
          }
        }
      }
    ]
  }
}
```


# 回避策 1

`tsconfig.json`の`"compilerOptions"`で、`"esModuleInterop": true`にする。

```json

  "compilerOptions": {
    "module": "commonjs",
      :
    "esModuleInterop": true,
```



# 回避策 2

以下の方法で`import`する。

```ts
import * as DataLoader from 'dataloader';

// instead of
import DataLoader from 'dataloader';
```
XServer で ComposerV2を使うために

# はじめに
XServerにて、PHPのプログラミングをしていた時、Composerのバージョンを上げる事が上手くできませんでした。
色々検索しましたが、上手くヒットしなかったので共有できればと記事にします。

# 結論
端的に述べれば、<br />
1. ユーザー内にComposerをインストール。<br />
2. パスを通して、Composerの名前を変更。<br />
3. Composerを利用するときに変更後の名前を使う。<br />
となります。

# PHPのパス
先人の方々が、書かれておりますが、利便性の為にメモ書き。
## PHPのシンボリックリンク

```bash:CreatePHPLink
$ cd
$ mkdir ~/php
$ ln -s /usr/bin/php8.0 ~/php/php
```

## パスの追加

```bash:~/.bash_profile
# PATH=$HOME/.config/composer/vendor/bin:$HOME/bin:$PATH
PATH=/bin:/sbin:/usr/local/bin
PATH=$HOME/projects/php:$PATH
```

:::note info
様々なテストをしていて、PATHが増大していたので。
一旦初期化してから、追加しました。
間違っているかもしれないです。
:::

```bash:~/
$ source .bash_profile
```

# Composer
## Composerのインストール

```bash:~/
$ cd
$ mkdir ~/composer
$ cd ~/composer
$ curl -s https://getcomposer.org/installer | php
```

## パスの追加
```bash:
# PATH=$HOME/.config/composer/vendor/bin:$HOME/bin:$PATH
PATH=/bin:/sbin:/usr/local/bin
PATH=$HOME/php:$PATH
PATH=$HOME/composer:$PATH
```

```bash:~/
$ source .bash_profile
$ mv composer/composer composer/composer2
```

## 動作確認
```bash:~/
$ composer2 -V
$ which composer2
```
Verが2になっていて、
/composer/composer2　ならば成功です！

## Composerの実行
```bash:~/
$ composer2 -V
$ which composer2
```

## Composerの例( Laravel )
```bash:~/
$ composer create-project laravel/laravel example-app
```

# おわりに
Let's PHP プログラミング！
選択した画像を表示&JsでLaravelに画像データを送る方法(自分用メモ)

## やりたいこと
・画像を選択しlaravel側に画像データを保存する


## ステップ１(formの設定)
画像選択をできるようにするためinputタグのtypeを`type="file"`にする。
そうすることで、選択されたファイルはフォーム投稿を使用してサーバーにアップロードしたり、 JavaScript コードと File API を使用して操作したりすることができる。
`multiple` = 複数のファイルを一度に選択することができる
`accept ` = ファイル入力欄が受け付けるファイル型を定義できる
↓詳しくはこちら
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file

また、ファイルアップロードをする場合はformタグに`enctype="multipart/form-data"`を指定する必要がある。
`enctype="multipart/form-data"`を指定しない場合、添付ファイルの情報を送信できないため、サーバー側では添付ファイルを扱えない。....多分。

```html
<form action="{{route('admin.article.update', $viewData['articleId'])}}" method="POST" enctype="multipart/form-data">
  <!--セクション１-->
  <div id="section_id">
 　　  <img id="img_prv" src="" alt="">
 　　  <input id="img_upload" value="" onChange="changeImage(event)" type="file" name="imagesPath[]" multiple="multiple" accept="image/*">
  </div>
  <!--セクション2-->
  <div id="section_id">
 　　  <img id="img_prv" src="" alt="">
 　　  <input id="img_upload" value="" onChange="changeImage(event)" type="file" name="imagesPath[]" multiple="multiple" accept="image/*">
  </div>
</form>
```


## ステップ２(選択した画像を表示)
```js
    function changeImage(event) {
        //FileReaderを使用することでユーザーのコンピュータに保存されているファイルの内容を非同期に読み取ることができる。
        const reader = new FileReader();

        // 新規ファイルデータを取得
        const fileData = event.target.files[0];
        //↓ちゃんと取れていればOK
        console.log(fileData);

        // 今回は一つの記事に対して複数のセクションがあるため画像を表示させる要素を取得する必要がある
        let sectionId = this.event.path[1];
        const imagPreview = $(sectionId).children('#img_prv');

        // 画像を表示させる処理
        // onloadは、データの読み込みが正常に完了した時に発火する
        reader.onload = function (event) {
            $(imagPreview).attr('src', event.target.result).css('width', '150px').css('height', '150px');
        }

        // 読み込みを実行
        reader.readAsDataURL(event.target.files[0]);

        //sendImagePath関数に引数として新規ファイルデータ,画像を表示させる要素を渡す
        sendImagePath(fileData,sectionId);
    }
```

## ステップ3(Laravelに送る)
```js
function sendImagePath(fileData,sectionId){

        //$viewData['appUrl']にはlaravel側から送られた「http://localhost:81」という文字列が入っている
        const appUrl = @json($viewData['appUrl']);

        // 新規画像のIDを入れるinputタグを取得
        let newImageId = $(sectionId).children('#img_id');

        const params = new FormData();
        //append()を使用してLaravel側に送るデータを設定(keyをfileとしvalueをfileDataにする)
        params.append('file', fileData);

        axios.post(
            appUrl + '/api/v1/images',
            params,
            {
                headers: {
                    'content-type': 'multipart/form-data',
                },
            })
        .then(res => {
            if(res.data){
                // レスポンスで返ってきたIDをinputに代入
                $(newImageId).val(res.data.id);
            }else{
                confirm('画像が読み込まれませんでした。もう一度選択してください');
            };

        }).catch((error) => {
            console.log("エラー");
        })
    }
```
`params.append('file', fileData);`に関して、append()ではなくset()でも可能。
set() = 同じkeyがあれば上書き
append() = 上書きせずに追加
RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54の原因と解決策

# エラー
MacbookをM1に買い替えて、Homebrew入れると下記URLと同じエラーが出る

```
RPC failed; curl 56 LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 54
```

https://stackoverflow.com/questions/51120225/git-push-getting-failed-error-rpc-failed-curl-56-libressl-ssl-read-ssl-error

# 原因
Homebrewインストールのコマンドがそもそも違っていたっぽい。

# 解決

①Homebrewアンインストール
```
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
```

②再インストール（brewのHPから引用）

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

# 環境
MacBook Air (M1, 2020)
macOS Monterey
バージョン12.3.1
Lambdaで、現在日時と特定の日付を容易に比較する （Node.js）

# はじめに
Lambdaで、現在時刻と、特定の期間を比較して、範囲内かどうか短いコードで判定する方法をまとめました。
面倒なので、ライブラリも使用しない方法になります。

# 現在日時が特定の期間内かどうか判定
## 解説

- `getTime()`は常にUTCでの値の取得になるため、現在日時もUTCで取得します。


- `content.from`と`content.to`に特定の日付を入れてください。
（必ず`"xxxx-xx-xxTxx:xx+09:00"`の形式になるようにしてください。）



- UTCでの比較にはなりますが、`content`内の`"xxxx-xx-xxTxx:xx+09:00"`は、JSTにしております。

つまり、現在時刻は`UTC`、`content`内は、`JST`から`getTime()`によって`UTC`に変換され、`UTC同士で比較`されることになります。

下記の場合ですと、
日本時間で、`2022/5/5の12時`〜`2022/5/8の12時まで`の範囲に現在日時が入っているかどうか判定します。

## コード内容

```js
const content = {
  // 日本時間で記載すること
  from: "2022-05-05T12:00+09:00",
  to: "2022-05-08T12:00+09:00",
};

const now = Date.now();
const from = new Date(content.from).getTime();
const to = new Date(content.to).getTime();

exports.handler = (event, context, callback) => {
  
  if ( from <= now && now <= to) {
    console.log("within the period");
    return;
  }
  console.log("out of term");
};
```

# パフォーマンス
現在時刻を取得するだけであれば、`new Date().getTime()`よりも`Date.now()`の方がパフォーマンスがよいようです。

https://teratail.com/questions/91161

# 参考
日付の差分を取得する場合こちらの方法がよいです。

https://qiita.com/holdout0521/items/4b869d6e4e6e6d25b197

https://qiita.com/kidatti/items/272eb962b5e6025fc51e
Laravelの名前空間から実体となるファイルを探す方法

自作したファイルの場合は名前空間とapp/以下のディレクトリ構造が一致しているためわかりやすいのですが、
フレームワーク独自のファイルの場合はそうではありません。

その場合、次のファイルに記載されています。

vendor/composer/autoload_classmap.php
Atcoder B - Palace 

## 問題
https://atcoder.jp/contests/abc113/tasks/abc113_b

## 回答
```Python
N = int(input())
T,A = map(int,input().split())
H = [int(i) for i in input().split()]

ans = 1
dis = 0
list = []

for i in range(N): #それぞれの地点からの差分を計算する。
  dis = abs(T - H[i] * 0.006- A) 
  list.append(dis) #配列に格納。
  ans = list.index(min(list))+1 #配列の中で一番小さいindexに、1を足したものが答え。一番小さい値の順番に1を足した数が答えとなっている。

print(ans)
```

## ポイント

個人的には```ans = list.index(min(list))+1```の部分。
二重根号の計算

ルートの中にルートがあるものを"二重根号"といいます。

二重根号のままだと計算が難しいので、以下の公式を用いて二重根号を外してから計算します。

![6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649732/78fdf5b8-0d41-9edc-5de1-9d4f9877c38c.jpeg)

画像引用：https://math-travel.com/double-radical-sign2/
逆ポーランド記法への変換

# そもそも逆ポーランド記法って何？
　計算式の書き方の一種で、演算子を加算する二つの値の後に置く書き方です。
たとえば、
```
 a + b
```
という計算式を
```
 a b +
```
と書きます。この書き方のメリットは括弧を使わなくても式の形が作れることです。
例えば普通の書き方だと
```
 ( a + b ) * ( c + d )
```
という計算式を
```
 a b + c d + *
```
と書きます。
逆という言葉がついているのでポーランド記法というものもあるんですが、文字の先頭から読み取っていく逆ポーランド記法のほうがプログラミングと相性がいいため、プログラムの構文解析などにも使われています。僕のこれから作るプログラムにも必要なもので、これをPythonで記述する必要があります。
# どこで使うの？
　線形代数にはもちろん計算を用いるため、使用者が入力した計算式を逆ポーランド記法に書き換え、計算していきます。しかし逆ポーランド記法への変換もプログラムにより自動でやる必要があります。
# 作ったものをどうしよう、、、、
　なんか作って完成するだけだと意味ないんでWebアプリにしたいと考えています。そうなるといくつか変えなければいけないことがあるかもしれないので並行して調べていきたいと思っています。HTMLやCSSは少しなら触ったことがあるのでなんとかものにできるように頑張りたいです。
laravel file_get_contents の代わりに Http を使用しリモートファイル画像を保存


参考
https://qiita.com/akitkat/items/b3992ccb54e2944200cd


```HogesController.php
<?php
//画像保存テスト
$img_path = "https://gahag.net/img/201608/27s/gahag-0119426971-1.jpg";
$img_binary = Http::withoutVerifying()
->get($img_path);

//            画像を取得できたら保存
if($img_binary->successful()){
//https://twikon.club/tmp/get.jpg
    file_put_contents(public_path("tmp/get.jpg"),$img_binary);//保存。 hoge.jpg などの画像ファイル名まで含めて保存
    print_r("画像を取得できました");
} else {
    print_r("エラーが発生しました");
}
?>
```

これでリモートファイルを保存することが可能です。

# file_get_contents と違うところ

画像をダウンロードできない場合もsuccessfulで条件分岐ができるので楽。

以上
ヘッダーをコンポーネントして表示する / 初めてのVue.js③

前回の続き　→　https://qiita.com/mmaumtjgj/items/7a4f92a0da06c5f9dde5

## コンポーネントとは
Vue.jsにはコンポーネント（テンプレート）という機能を使ってパーツ化し再利用することができる。

通常ブラウザ上に表示するHTMLのコードはhtmlファイルに記述するが、コンポーネントにすると、Vue.jsにhtmlのコードを記述し、それに名前をつけてhtmlファイルの好きなところで呼び出すことができるようになる。

現状``javascript/pages/top/index.vue``にヘッダーを記入している。

ヘッダー用のパーツを作成し、共有化する。

## ヘッダーコンポーネントファイルを作成する。
``components``フォルダを作成し、その配下に``MainHeader.vue``ファイルを生成し、``top/index.vue``のヘッダーの内容を切り取って``MainHeader.vue``に記述する。

```app/javascript/components/MainHeader.vue
<template>
    <header class= "mb-auto">
        <nav class= "navbar navbar-expand navbar-dark bg-dark justify-content-between">
            <span class= "navbar-brand mb-0 h1">{{ title }}</span>
        </nav>
    </header>
</template>

<script>
    export default {
    name: "TheHeader",
    data() {
        return {
        title: "タスク管理アプリ"
        }
    }
    }
</script>
```

## コンポーネントファイルを表示させる
コンポーネントファイルを作成しただけでは表示されないので、``app.vue``ファイルに表示させるよう記載する。

```app/javascript/app.vue
<template>
  <div>
    <main-header/>
      <router-view/>
  </div>
</template>

<script>
  import MainHeader from '../javascript/components/MainHeader.vue'

  export default {
  components: {
    MainHeader
  }
}
</script>
```
``<script>``内の``MainHeader``と、その後ろにあるファイル名は同じでなければならない。
上記の記述をすることで、``<main-header/>``と記載すればどこにでもヘッダーがビュー上に表示される。

## 参考記事
[Vue.jsのコンポーネント化の方法まとめrails+webpacker+vue.js](https://qiita.com/Hijiri-K/items/992cd0abc19892a4eede)
【AWS】ELBとALBの違い

## 目的
ALBとELBについて何が違うのかよくわからなかったため調べてみた。


## 結論
ELB（Elastic Load Balancing）という大枠の中の一種がALB（Application Load Balancer）。
ALBはELBの一種。

## そもそもELBとは

### 役割
* アプリケーションへのトラフィック（ネットワーク上で転送されるデータ量）を負荷分散する
* トラフィックを送る先のサーバーが問題なく稼働しているか定期的に確認する（＝ターゲットモニタリング）

### 負荷分散
ユーザーからのアクセスを複数のターゲット（サーバーなど）に振り分け、サーバーダウンしないようにしてくれる。
負荷状況に応じて自動にスケール（サーバーの台数を増やすなど）してくれる。

### ターゲットモニタリング
ターゲットの状態を監視。AWSのサービスの一つであるCloud Watchメトリクスでログの取得を可能にしている。
ターゲットの異常を検知したら通信を振り分けないようにしてくれる。


## ではALBは？

* HTTPトラフィックとHTTPSトラフィックのレイヤー7層の負荷分散ができるロードバランサー
* つまりはWebサイトやWebサービスの負荷分散にはALBを使用する（多分）
* ALB以外にNLB（Network Load Balancer）という一種もある


## NLB
* レイヤー4層で動作。TCPなどの負荷分散ができるロードバランサー


## ひとりごと
OSI参照モデルがよくわかっていないが、Webアプリ開発者の私はALBを使うのであろうか
OSI参照モデル理解しよう。。

## 参考
こちらの記事は以下の参考文献をもとに記述しています。

- [図解 Amazon Web Servicesの仕組みとサービスがたった1日でよくわかる](https://www.amazon.co.jp/%E5%9B%B3%E8%A7%A3-Amazon-Web-Services%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%8C%E3%81%9F%E3%81%A3%E3%81%9F1%E6%97%A5%E3%81%A7%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%8B-NRI%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/dp/4815612811/ref=asc_df_4815612811/?tag=jpgo-22&linkCode=df0&hvadid=553968464768&hvpos=&hvnetw=g&hvrand=1782303752636873627&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009252&hvtargid=pla-1598950083335&psc=1&th=1&psc=1)
- [【AWS入門】AWSのELBとは？ロードバランサーの種類、特徴、料金を紹介](https://cloudnavi.nhn-techorus.com/archives/3640)
Ruby on Railsをgit cloneする

この記事は学習した内容をアウトプットし、更に理解を深めるための記録用投稿になります。
投稿している内容と同じ箇所で躓いている方に少しでもお力添えできれば幸いです。
## git cloneとは
そもそも[git clone]とは？
#### 『Gitに存在するリモートのリポジトリをローカルの環境にコピーする』
学習し初めの頃はなかなか[git clone]をすることがなかったですがAWSで自分のアカウントを作成して環境の構築する際に始めて出てきました。
## git cloneの流れ①〜⑥
##### ① GIt hubを開きローカルにコピーしたいリポジトリを選択しリポジトリの画面へ
##### ② 緑色の[Code]のボタンを押し「git@github.com:[ユーザー名]/[リポジトリ名].git」のSHH keyをコピーする。
##### ③ ローカルの環境を開き以下のコマンドを入力
```
ec2-user:~/environment $ git clone git@github.com:[ユーザー名]/[リポジトリ名].git
```
##### ④ 以下のコマンドでローカルにコピーされたディレクトリに移動
```
ec2-user:~/environment $ cd [ディレクトリ名(リポジトリ名)]
```
##### ⑤ 以下のコマンドでgemをインストールする
git cloneだけではgemが使える状態ではないので⑤の工程を行う。
```
ec2-user:~/environment/[ディレクトリ名]$ bundle install
```
##### ⑥ 以下のコマンドでデータベースを作成
git cloneだけではデータベースが存在しないので⑥の工程を行う。
```
ec2-user:~/environment/[ディレクトリ名]$ rails db:migrate
```
##### ①〜⑥をしてコマンドでrails sをするとサーバーが開ける状態になる。

git cloneをする機会があまりなかったので記録用として残します。
間違っている箇所などありましたらご指摘いただけると幸いです。

よろしくお願いします。
Macにてアプリ設定内容やログを探す

## Macにてアプリ設定内容やログを探すための参考情報です。

Macでは、システム向け/ユーザ向けなどの適用対象毎にディレクトリが分かれており、
さらにその中で設定内容やログなどの用途毎にディレクトリが細分化されています。

例えば、***システム向け*** の ***設定ファイル***と ***ユーザ向け*** の ***設定ファイル*** をみてみると
以下の通り、<設定ファイル>という意味を示す名称は共通となっています。

- ***システム向け*** の ***設定ファイル***
/System/Library/Preferences

- ***ユーザ向け*** の ***設定ファイル***
~/Library/Preferences

以下を参考にしてアプリの設定内容を確認したり、見つけた情報からさらにGoogle等で検索すると新たな情報を見つけることができます。

### 適用対象と用途毎のディレクトリ名称

- 適用対象毎のディレクトリ(システム向け/ユーザ向けなど)

| 適用対象 | ディレクトリ名 |
|-----|:---|
|システムデータ| /System/Library/|
|ユーザ共通データ|/Library/|
|ユーザ固有データ|~/Library/|
|App Storeなどで配布されているアプリのユーザ固有データ|~/Library/Containers/<パッケージ名>/Data/Library/|

- 用途毎のディレクトリ(設定ファイル/ログなど)

| 用途 | ディレクトリ名 |
|-----|:---|
|ユーザがログインしていなくても起動するバックグラウンドプログラム | LaunchDaemons|
|ユーザがログインした時に起動するバックグラウンドプログラム|LaunchAgents |
|ログが保存されるディレクトリ|Logs| 
|アプリケーション固有のデータやプラグインなどが保管されるディレクトリ|Appication Support|
|アプリケーションの設定が保存されるディレクトリ|Preferences|

### 具体的なフォルダ一覧

<details><summary>Application Support</summary><div>

```console
/Library/Application Support
~/Library/Application Support
~/Library/Containers/<パッケージ名>/Data/Library/Application Support/
```

</div></details>


<details><summary>Preferences</summary><div>

```console
/System/Library/Preferences
/Library/Preferences
~/Library/Preferences
~/Library/Containers/<パッケージ名>/Data/Library/Preferences
```

</div></details>

<details><summary>LaunchDaemons</summary><div>

```console
/System/Library/LaunchDaemons
/Library/LaunchDaemons
```
</div></details>

<details><summary>LaunchAgents</summary><div>

```console
/System/Library/LaunchAgents
/Library/LaunchAgents
~/Library/LaunchAgents
```
</div></details>


<details><summary>Logs</summary><div>

```console
/Library/Logs/
~/Library/Logs/
~/Library/Containers/<パッケージ名>/Data/Library/Logs
```
</div></details>

### 具体例

https://ez-net.jp/article/6B/dasE5JBM/GKSzWTmZOTd0/

https://docs.microsoft.com/ja-jp/onedrive/deploy-and-configure-on-macos


### 参考資料/具体例

https://apple.stackexchange.com/questions/290310/whats-the-purpose-of-library-containers
スクリーンショット(エビデンス)を簡単に

# [概要]
対象：Android
アプリ開発をしていると、テスト等で画面スクショのエビデンスを残すこともあると思います。
わざわざ、端末でスクリーンショットを取得して、Macに移すして、ファイル名を変更など、1ファイルにつきこの手順を実施してました。。。時間がかかる。。
なので、作業効率化！！！
そこで、今回は以下の要領でエビデンスを簡単に残す！
・Macから、端末のスクリーンショットを実行する
・Macから、実行したスクリーンショットを端末からMacに保存する

# [作業]
以下が記述された、screencap.shファイルを用意する。
※ファイル名は好きに指定する。

```
#!/bin/sh

#ファイル名指定
var1="No1"

#日/時間を指定
var2=`date "+_%Y_%m_%d_%H_%M_%S"`

#拡張子を指定
var3=".png"

#スクリーンショットを実行する
adb shell screencap -p "/sdcard/$var1$var2$var3"

#macに、スクリーンショットファイルを保存する。(第２引数に保存先のパスを指定)
adb pull "/sdcard/$var1$var2$var3" "/Users/nakamurakazuya/work/"

#端末に、保存しているスクリーンショットファイルを削除する(任意)
adb shell rm "/sdcard/$var1$var2$var3"
```
※ファイル名や日/時間を指定などは用途に合わせて変更するなり、コメントアウトするなりして使用する。
※「端末に、保存しているスクリーンショットファイルを削除する」については、スクリーンショットを取得する度に端末にファイルが積み上げられるけど、消したくない場合は、コメントアウトする。

## 手順
1, .shファイルを作業ディレクトリ等に保存する。
2, 端末をMacとUSB接続する。
3, Macにて、ターミナルを開いて、.shファイルの保存先に移動(cd)する。
4, あとは以下を実行して、取得できているか保存先のディレクトリを確認する。
```
sh screencap.sh
```
※実行コマンドは、chmod, sh、bashなり用途に合わせる。
2022-05-05 Figma使ってみた > 組込みソフトの画面遷移のドキュメンテーション


### 動作環境

- Windows 10 Pro
- Firefox v99.0.1 (64ビット)
    - (FirefoxからChromeに移行中)


### 組込みソフトの画面遷移

組込みソフトの画面遷移については以下のツールを使っている。

- diagrams.net (旧名:draw.io)
    - 社内向け資料作成に使用
    - UIが素直で使いやすい
    - 長期安定運用
- Godot Engine
    - ゲーム作成アプリであるが、シンプルである
    - WebGLでエクスポート可能
        - 動作の様子を他の人が閲覧できる

diagrams.netについては今後も使うだろう。
Godot Engineについては便利ではあるが、もっとデザインしやすいツールがないか漠然と考えていた。

Figmaというソフトを知ったので使ってみた。


### 作成したもの

仕事で使いそうな画面遷移を作ってみた。
(Note: 用語については実際のソフトと意図的に変えている。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32870/1b4d5f18-9b14-b74d-d5b2-a5ecf03ef5fd.png)


### 上記デザインで使ったもの

- Rectangle
    - Strokeを足す、Fillを消すことで中抜きのボックスを作成できた
- 画面遷移の線
    - Prototypeをクリックして、ボタンから各画面に線を引く
- トグルボタン
    - Polygonを足した上でポイントを足して配置をした
    - テキストにしてもいいだろう

### 利点と気になる点

- 利点
    - 画面遷移の線の表示、非表示ができる
    - 画面遷移をボタンに設定した後、そのボタンを移動しても遷移の線が不随して移動する
        - diagrams.netではこれができない
- 気になる点
    - 画面遷移の線を自分で調整できない
        - 線が文字に重なる場合に文字を避けることができない?

社内資料向けには十分であり、便利そう。

### 感想

- UIプロトタイプとして使いやすい
- 600円/月くらいのプランがあると有料を選択しやすいかな
    - UIデザインの仕事を専門でなく、「UIデザインもしている」組込みソフトウェア向け有料プラン
AWS Direct Connectメモ書き

## AWS Direct Connect
DirectConnectでは暗号化はされない

### 参考URL
https://www.youtube.com/watch?v=mEtluVrgXlk


### 物理接続
- Meet-Me-Room
  - LOA-CFAをもとに接続
- LAG(Link Aggregation Group)

仮想インターフェースの種類
- プライベート仮想インターフェース
- パブリック仮想インターフェース
- トランジット仮想インターフェース

#### 仮想インターフェース( Virtual Interface = VIF )

Connection(接続) = 物理接続(1G or 10G)
VIF = Connectionを通してAWSリソースにアクセスするための論理インターフェース
  - AWSとカスタマルータ間でBGPピアを確立し経路交換するために必要
    - BGP: 経路交換する際に使用するプロトコル
  - VLAN IDをもつ

#### VIFの種類
- プライベートVIF: VPCへのプライベートIPを介した接続を提供
- パブリックVIF: AWSの全リージョンへのパブリックIPを介した接続を提供(各AWSサービスのパブリックIPを利用する際に使う)
- トランジットVIF: Transit Gateway用のDirect Connectゲートウェイへの接続を提供

クロスアカウント利用
- Connectionを所有しているAWSアカウントから、他のAWSアカウントに対してVIFを提供することが可能
- データ転送料は各アカウントに課金

### プライベート接続: DirectConnectGw(DXGW)タイプ(推奨)
- プライベートVIFを使用して複数のVPCへ接続を提供
- 1つのププライベートVIFで複数のVPCへ接続可能

### プライベート接続: 仮想プライベートGWタイプ
- プライベートVIFを使用して1つのVPCへ接続を提供
- CloudHubが必要な場合に利用。それ以外はDXGWを使用する方がいい
- 複数のプライベートVIFを使用することで複数のVPCにアクセスすることも可能

### パブリック接続
- パブリックVIFを使用して中国を除く全リージョンのパブリックサービスへの接続を提供
- オンプレミスのプライベートIPをパブリックIPにNAT変換する必要あり
- 中国を除く全リージョンのAWSサービスのパブリックIPをAWSから受け取る(フィルタによって接続リージョンの経路だけ受け取ることも可能)

#### パブリックVIFによるパブリックサービスへの接続
- 同一Connection上にパブリックVIFとプライベートVIFの混在が可能

### トランジットVIFによるTransit Gateway(TGW)への接続
- トランジットVIFを使用してDirectConnectGateway(DXGW)経由でTGWへ接続

### プライベートVIF(DXGW)とトランジットVIF(DXGW+TGW)の比較

| 項目|  プライベートVIF(DXGW) | トランジットVIF(DXGW+TGW) | 
| ---- | ---- | ---- |
|  用途  |  オンプレとVPCを1対多で接続する  | オンプレとVPC間にコアルーターとしてTGWを配置し、すべての通信を1か所で管理する |
|  VPC拡張性  |  VPCは１つのプライベートVIF+DXGWで10まで関連付け可能  | VPCを5,000まで接続可能 |
| 通信対象 | オンプレとVPC間の通信 | オンプレとDXGWに指定する任意のIPで通信 |
| ルーティング | DXGWから広報するVPC CIDRに対し、経路フィルタリングが可能。VPC間の折り返し通信不可 | TGWで複数のルートテーブルを作成可能。VPC間の折り返し通信可能 |
| 費用 | DXGWの利用は無料、転送料は仮想プライベートGWのみ利用時と同等 | TGWの転送料(従量制)、アタッチメント料(時間課金)が加算 |
| 接続要件 | メニュー内から選択可能 | 1Gbps以上の接続/ホスト接続が必要 |

VPC間の通信はDXGWを経由できないため、TGWが必要らしい。
でもVPCピアリングで繋げばいい気もするが違いがいまいちわからない。
多数のVPCを利用する場合はTGW利用がいいらしい。

### ホスト接続(Hosted Connection)

- パートナーからの提供サービス
- ホスト接続の作成はパートナーによって行われる。(AWSコンソールから不可)
- Hosted Connectionの中にVIFを1つだけ顧客アカウントの権限で作成可能
- VIFの削除・再作成ができる
TypeScript 安心感向上のための対策メモ

# async内の型ガードがawait 後も維持される問題
問題: TypeScript側で絞り込んまれた結果が、await 後、維持されるべきでない場合も維持されてしまう。

例: ここでは ```console.log(moduleVar.foo.length)``` においてmoduleVar.fooが```"bar"``` (string) だというTypeScript側の絞り込み結果が維持されてしまっていることから、コンパイルが通ってしまう。
```typescript:module.ts
const moduleVar: {foo: string | undefined} = {
  foo: "bar",
};

async function main() {
  if (moduleVar.foo !== "bar") throw "";

  await otherProcess();

  console.log(moduleVar.foo.length);
}

async function otherProcess() {
  moduleVar.foo = undefined;
}

main();
```

※ 上例でいう ```moduleVar``` がクラスのインスタンスであっても同様

対策: 上例に即せば ```moduleVar```の```foo```の値をfunctionコールで取得するようにする

# anyな値が非any型変数に代入できる問題
例: ```hoge``` の値はanyとして扱われる
```typescript
const hoge = JSON.parse(`{aa:3}`);
const str: string = hoge;
console.log(str);
```

対策: anyな値が登場したら必ず絞り込むようにする
【Rails】モデル名.human_attribute_name(:カラム名) 使い方

# はじめに
Railsの参考書を読んでいた時に、human_attribute_nameについて、
理解していなかった為、簡単にまとめます。

# モデル名.human_attribute_name(:カラム名)とは？
ActiveRecord::Base のクラスメソッドで内部的にI18nモジュールを利用してくれるというものです。
まず、config/locales/ja.ymlに参照元を書いていきます。

# config/locales/ja.ymlに定義
```config/locales/ja.yml
ja:
  activerecord:
    errors:
      messages:
        record_invalid: 'バリデーションに失敗しました: %{errors}'
        restrict_dependent_destroy:
          has_one: "%{record}が存在しているので削除できません"
          has_many: "%{record}が存在しているので削除できません"
    models:
      task: 'タスク'
    attributes:
      task:
      id: 'ID'
      name: '名称'
      description: '詳しい説明'
      created_at: '登録日時'
      updated_at: '更新日時'
```

# 使用法
```ruby:show.html.haml
Todo.human_attribute_name(:id)
 →config/locales/ja.ymlのattributes/id/の'ID'を参照する
Todo.human_attribute_name(:name)
 →config/locales/ja.ymlのattributes/name/の'名称'を参照する
Todo.human_attribute_name(:description)
 →config/locales/ja.ymlのattributes/:description/の'詳しい説明'を参照する
```