OmniAICreator/Qiita-1.07M huggingface dataset:
グローバル登録でmain.jsで表示させてみる


（１）templateに表示用HTMLを書く
（２）scriputにデータを入れる
（３）main.jsにファイルをimportする
（４）グローバル登録する

```vuejs:src/App.Aue
<template>
  <LikeNumber></LikeNumber>　　　　　　　　　#グローバル登録を別ファイルで表示
</template>
```


```vuejs:src/LikeNumber.Aue
<template>
  <p>いいね({{ number }})</p>
</template>

<script>
export default {
   data() {
     return {
       number: 7                          #データはここ
     };
   }
};
</script>
```
```vuejs:src/main.js
import Vue from 'vue';
import App from './App.vue';
import LikeNumber from './LikeNumber.vue';      //import

Vue.config.productionTip = false;
Vue.component("LikeNumber", LikeNumber);        //グローバル登録

new Vue({
  render: h => h(App)
}).$mount("#app");
```

![20210508-122007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/70768d3d-ce71-ae99-4ad0-5841590ce89a.png)

ちなみに今までと違ってフレームワークを使っているのでエラーをちゃんと表示してくれます。


参考
-

returnをretenと入力すると

```vuejs
Failed to compile.

./src/LikeNumber.vue
Module Error (from ./node_modules/eslint-loader/index.js):

/Users/maedatakuo/projects/udemy-vuejs/src/LikeNumber.vue
  8:11  error  Parsing error: Missing semicolon.

  2 | export default {
  3 |    date() {
> 4 |      retuen {
    |            ^
  5 |        number: 7
  6 |      };
  7 |    }

✖ 1 problem (1 error, 0 warnings)
```

やっとRuby on Railsのようなエラー表示が出て嬉しいです。
iPhone/iOSの画面下部のバーを消す

    
```swift
override var prefersHomeIndicatorAutoHidden: Bool {
    return true
}
```

🐣
****
フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLを使ったアプリを作っています。
機械学習関連の情報を発信しています。

[Twitter](https://twitter.com/JackdeS11)
[Medium](https://medium.com/@rockyshikoku)
【Ruby 】正の整数を入力し、その整数が、 10の倍数（10,20,30...）からの差が2以内であるときはTrue それ以外はFalse と出力せよ。


```ruby
num = gets.to_i

def near_ten(num)
  quotient = num % 10
  if quotient <= 2 || quotient >= 8
    puts "True"
  else
    puts "False"
  end
end

near_ten(num)  

```

「10の倍数からの差」を考えるためには、一の位の値に着目する。

すなわち、一の位が「0,1,2,8,9」のどれかであれば「10の倍数からの差が2以内」と判断することができる。

したがって、変数quotientに一の位の値を代入し、

quotient <= 2 || quotient >= 8で「0,1,2,8,9」のどれかに当てはまるかどうかを確認している。
複数の数値が定義されている配列data1とdata2から「data1とdata2を合わせた平均値」と「平均値以上の数値」を表示せよ

```javascript
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>課題</title>
    <script>
        var data1 = [59, 39, 100, 2, 15, 40, 84, 97];
        var data2 = [63, 18, 64, 97, 50, 98];
        document.write('<p>【data1】' +data1  + '</p>'); 
        document.write('<p>【data2】' +data2  + '</p>'); 

        var data3 = [];
        var sum = 0;
        var ave = 0;

        for(var i = 0; i < data1.length; i++){
          data3.push(data1[i]);
        } 
        for(var i = 0; i < data2.length; i++){
          data3.push(data2[i]);
        } 

        document.write('<p>【マージ後】' +data3  + '</p>'); 

 
        for(var i = 0; i < data3.length; i++){
          sum = sum + data3[i]
        } 

        ave = sum / data3.length;
        
        document.write('<p>data1とdata2を合わせた平均値' +ave+ '</p>'); 

        document.write('<p>平均値以上の数値は以下</p>'); 



        for(var i = 0; i < data1.length; i++){
          if( data1[i] >= ave)
          document.write('<p>data1:' +data1[i]+'</p>'); 
        } 

        for(var i = 0; i < data2.length; i++){
          if( data2[i] >= ave)
          document.write('<p>data2:' +data2[i]+'</p>'); 
        } 

    </script>
</head>
<body>
</body>
</html>
```
Gitで開発環境を整えてみた

1. ローカルにワーキングディレクトリを作る

`mkdir [ワーキングディレクトリ名]`

2. ワーキングディレクトリに移動する

`cd [ワーキングディレクトリ名]`

3. ワーキングディレクトリを初期化する

`git init`

4. gitで紐づけたいリモートリポジトリを作成する。この時にREADMEファイルは作らずに、後から作成する。
![git-example1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1068287/9264ed73-bd74-169b-dfd8-ff0d54abe8be.png)


5. gitで作成した新規のリモートリポジトリのURLを、以下のコマンドに貼り付ける

`git remote add origin [新規のリモートリポジトリのURL]`
![git-example2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1068287/a49ef787-cd06-0998-4104-6067975f3a11.png)

6. ワーキングディレクトリにリモートリポジトリに作成したい、ファイルを作成する

7. 作成したファイルをステージにaddする

`git add '[作成したファイル]'`

8. 作成したファイルをcommitする

`git commit -m '[付けたいコメント]'`

9. 作成したファイルをpushする

`git push origin main`

これでデフォルトのリモートリポジトリ(ここではmain)に対象のファイルが追加される

**補足**
1. 対象となるローカルのワーキングディレクトリに、リモートブランチと紐づけたいディレクトリ作成する。新たなワーキングディレクトリの名前は、これから紐づけるリモートブランチ名と一緒だとわかりやすい。

`mkdir [リモートブランチ名]`

2. 作成したワーキングディレクトリに移動

`cd [ワーキングディレクトリ名]`

3. ローカルのワーキングディレクトリに、新たにリモートブランチを作る

`git checkout -b [リモートブランチ名]`

4. ワーキングディレクトリにリモートブランチに作成したい、ファイルを作成する

5. 作成したファイルをステージにaddする

`git add '[作成したファイル]'`

6. 作成したファイルをcommitする

`git commit -m '[付けたいコメント]'`

7. 作成したファイルをpushする

`git push origin [リモートブランチ名]`

これでリモートブランチと、そこに新規で作ったファイルが追加される
エンジニアのためのマネジメントキャリアパスの必要な箇所を読んでみて（まとめ）

# エンジニアキャリアパス一覧（書籍で扱われている範囲）
1. インターン生/若手エンジニア/シニアエンジニア（人をマネジメントしない立場の人）
2. メンター
3. テックリード
4. チームリーダー
5. プロジェクトリーダー
6. CTO

# 概要
エンジニアとして働く人の一般的に存在するキャリアパスは上記のものになる。この書籍では各キャリアにおいて、何のスキルが必要で、どのような立ち回りが求められるのかを記述している。かけ離れた職務の職責などを学んでも直近では活かせないのと、あまり覚えられなさそうという理由で、自分の立ち位置に近いテックリードの場所までとCTOについて読んでみた。
読んでみての感想は、想像していた通り、上の階層に行けば行くほどエンジニアとしての技術力は生かしにくくなり、コミュニケーションスキルのほうが大切になってくることを感じた。けれども詳細な問題解決などというようりはサービスを提供する技術の方針を決めたりとするので、やはり基礎となる技術力はなければより上の立場になることもできないと感じた。
上位の職位に立つために必要な技術力として大事だと感じたのは
- 幅広い技術の知識（どのようなものが存在するのか）
- 新しい技術を吸収する力（新しい技術は既存の技術の上に成り立っているので、既存の技術をしっかりと理解していることが重要）
- 技術と人の関係性（対象の技術に対して、エンジニアがどのように反応するのか）
- 対象の技術が利用可能かの判断力
- ...etc

これらを身につけるには現場でのたしかな経験が必要だと感じた。経験はプログラミングに続き、設計、問題解決などである。
以降、上位の職責以外でもとめられることが何なのか概要を記載する。

# 1.インターン生/若手エンジニア/シニアエンジニア（人をマネジメントしない立場の人）
一般的にこの立場の人が多い。この人たちはマネジメントする側ではなく、される側という立場である。その上でよりよくマネジメントされるには、マネジメントする人のマネジメント前提を理解しておくことと、立ち振る舞いの理解である。
マネジメントの前提として、すべてを管理、助けてはくれない、マネジメントする人も人間であるということである。そして、優れた上司とはエンジニアスキルにおいてというよりも、社内調整力や、社内の駆け引きがうまい人間である。マネジメントする人はあくまで相談役のような立場であり、自分が成長するための勉強会や勉強方法を0から100まで提供してくれるわけではない。そのため、自己成長の責任は自分で持つ必要がある。そのなかで、どのような勉強会に参加すると有効なのかなどと言ったことの相談役として利用するべきである。また、フィードバックをくれない場合は自分からもらいにいく習慣をつけた方が良い。一般的にマネジメントする人とは1on1の形式でこまめにフィードバックをもらうのが適切ではあるが、全員が全員できるわけではないので、こちらからアプローチをするのも手である。最後の優れた上司について、優れた上司はエンジニアとして素晴らしいというだけではなく、より自分を成長させてくれる上司である。自分を成長させてくれるとは、良いタイミングで昇進できるように背中を押してくれたり、その手助けをしてくれたりしてくれるような人である。この前提だと馬が合わない人という可能性もあるが、あくまで自分を成長させてくれる人なのかどうかという観点で見るべし。

# 2. メンター
他人をマネジメントするという一番最小の立場で、責任も伴わない立ち位置。メンターの役割はインターン生のインターン期間、新卒の子の入社直後のサポートである。それぞれでもとめられることは異なるので別々にみていこう。インターン生のこのサポートで会社側から求められているのは、その子がより会社に入社したいと思えるようなサポートをしてあげることである。そのためには最初2,3日はつきっきりでサポートをしてあげて、隣にいてあげるくらいが良い。その後は徐々に手を離し、中期的なタスクを与えてあげる。その中でもこまめな進捗の管理はしてあげる必要がある。
新卒の子に対しては、一番モチベーションが高い状態のため、それを維持してあげることが大切。そのモチベーションを一気に崩すことがないように、インターン生の子と同じで最初はなるべくつきっきりで丁寧に説明をしてあげる。案件の説明からIDEの利用方法など。その後、徐々に手を離していき、良いタイミングでタスクを与えてあげるのが良い。

# 3. テックリード
※後日追記


# 6. CTO
※後日追記
初学者が思うこれだけあれば何とかなるFlutter基本Widget



##はじめに
どうもこんにちはFlutterを最近触っているものです。Flutterでスマートフォンアプリを作っており、その備忘録がてら記事にまとめています

この記事のWidgetの書き方を見て参考になってくれる人がいれば幸いです

######この記事の書き方
初めにWidgetの種類を記載してその後Widgetクラスの基本形を示しています

##Center
中央揃えをしてくれるウェジェットです

```
Center(
  child: ・・・ウェジェット・・・
)
```
##Container
Centerウィジェットは単に中央にウェッジェとを配置するだけですが,Containerウェジェットはウェジェットを左に揃えたりスペースを開けたり細かな設定を出来るようになります

```
Container(
  child: ・・・ウェジェット・・・,
  padding: [EdgeInset],
  alignment: [Alignment],
)
```
##Column
縦にウェジェットを複数並べることが出来るウェジェットです

```
Column(
  mainAxisSize: [MainAxisSize],
  mainAxisAlignment: [MainAxisAlignment],
  crossAxisAlignment: [CrossAxisAlignment],
  children: <Widget>[
    ・・・Columに含むウェジェット・・・
  ]
)
```
##Row
Columnと機能が似ており、ウェジェットを横に複数並べることが出来ます。

```
Row(
  mainAxisSize: [MainAxisSize],
  mainAxisAlignment: [MainAxisAlignment],
  crossAxisAlignment: [CrossAxisAlignment],
  children: <Widget>[
    ・・・Rowに含むウェジェット・・・
  ]
)
```

##Stack
複数のウェジットを重ね合わせることが出来ます

```
Stack(
  children: <Widget>[
    ・・・Stackに配置するウェジェット・・・
  ]
)
```
##Expanded
ウェジェットを画面の端から端まで全体を表示させたい時に利用するウェジェット

```
Expanded(
  child: ・・・ウェジェット・・・,
)
```
##SizedBox
決まった大きさのウィジェットを組み込みたい時に利用できるウィジェット

```
SizedBox(
  width: 値,
  height: 値,
  child: ・・・ウェジェット・・・,
)
```
##Card
ウェジェットをパネルのように扱い、表示領域を確保することが出来るウェジェット

```
Card(
  margin: [EdgeInset],
  child: <Widget>[
    ・・・Cardに含むウィジェット・・・
  ]
)
```
##SingleChildScrollView
画面スクロールを表示できるウィジット

```
SingleChildScrollView(
  child: ・・・ウィジェット・・・
)
```

##FlatButton
平面時なデザインをしたボタンウェジェット

```
FlatButton(key: null,
  onPressed: ・・・何かの関数名・・・,
  color: [Color],
  child: ・・・ウェジェット・・・,
)
```
##RaisedButton
FlatButtonと違い色々とカスタマイズできるボタンウェジェット

```
RaisedButton(
  onPressed:・・・何かの関数名・・・ ,
  child: ・・・ウェジェット・・・,
)
```

##FloatingActionButton
Flutterのプロジェクトを立ち上げた時に右下に出てくるボタンウェジェット

```
FloatingActonButton(
  child: Icon(),
  onPressed: ・・・ウェジェット・・・
)
```

##TextField
一行だけテキストの入力をすることが可能なウェジェット

```
TextField(
  controller: [TextEditingController],
  style: [TextStyle]
)
```

##Checkbox
チェックを付けたか否かの二者択一の値を入力できるウェジェット

```
Checkbox(
  value: [bool],
  onChanged: ・・・何かの関数名・・・
)
```

##ShowDialog
ボタンが画面に表示されるウェジェットです.Contextの部分をAlertDialogなどに変えると小さなウィンドウが画面にポップアップされるようになります

```
showDialog(
  context: context,
  builder: (BuilderContext context) => Container(・・・),
)
```

##終わりに
今回記述したウェジェット以外にも有用なものはたくさんあります。FLutterの公式ドキュメントやyoutubeのFlutterチャンネルでもたくさんのウェジェットが紹介されているのでぜひ見てください.
他にも便利ウェジェットなどがあれば紹介してくださると助かります.


###参考文献,参考資料
https://flutter.dev/docs
https://flutter.ctrnost.com/
https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw
LeafletでGPSログ(GPX)地図：移動距離、所要時間、出発時間、到着時間、最高地点、最低地点表示。

LeafletでGPSログ(GPX)地図に、移動距離、所要時間、出発時間、到着時間、最高地点、最低地点表示。

Google マップ、OpenStreetMap、国土地理院地図、Esri World Topo Mapの切り替えが可能。

詳細は以下のブログに。
https://2ndart.hatenablog.com/entry/2021/05/08/114448
![20210508095237.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374794/1975f1dd-56e9-9a13-13c8-5f59a1148e30.jpeg)
![20210508095240.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374794/538b72c5-8605-d341-e4ec-432c3db4057f.jpeg)
![20210508095244.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/374794/f3316638-0cfc-90e1-cfc8-412578f47c2f.jpeg)
大量の画像をGitにコミットを分けてプッシュするシェルを作った

ソースはこちら
[GitHub shredded_push](https://github.com/saitou310/shredded_push)

# ここから下は日記です
この記事にたどり着いた大抵の方は上の2行で目的を達せられると思うので
ここからは日記レベルの内容です。

# いきさつ
今回のシェルを作るに至った経緯ですが
運用中のシステムの移行に伴いいろいろと手直しが発生するので
一旦、画像含めサーバ上の物を全部Gitに乗せることになりました。

が、膨大な量の画像ファイルを一度にコミットしたところ容量なのかなんなのか
プッシュがうまくいかず、ばらしてコミットしようと思った。
(LFSは使ってます)

ググってもそれらしいツールも見つからず
昼飯食いながら作ったのが今回のスクリプトです。

# いいわけ
正直中身は微妙だと思うし効率的でないコードです。
たぶん、1ファイルずつaddするより一度に複数ファイルaddした方が早い。

# 最後に
大量の更新が見込まれる画像ファイルとかの扱いって皆さんどうされてるんだろう、、、
私は手動で何かするとミスしかしないので
変更かけたファイルを保存時に別のファイルに上書き保存とか
やりまくりそうだから管理用のツールがいいかと思いましたが
容量めちゃくちゃ食うのでGitに画像を大量に乗せるのは良くない気がしている。

この記事自体はおんなじように大量のファイルをバラシてでもコミットしたい人の目に留まればと思い作成したので
技術的な参考資料ではないです。

こんなところまで読んでいただきありがとうございました。
いいね{{number}}をvue CLIで表示してみる


```vuejs:APP.vue(ES5)
<template>
  <p>いいね{{ number }}</p>
</template>

<script>
export default{
  data: function() {
    return {
      number: 12
    }
  }
}
</script>

<style>
</style>
```

```terminal
http://localhost:8080/
```

![20210508-114641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/96e588ae-dac4-ec92-efa1-b4c123939d5b.png)

```vuejs:APP.vue(ES6)
<template>
  <p>いいね{{ number }}</p>
</template>

<script>
export default{
  data() {
    return {
      number: 6
    }
  }
}
</script>

<style>
</style>
```

![20210508-115528.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/849a2268-4cef-2879-3de7-e6f032bc76d8.png)
【AWS】プライベートサブネットの作成方法

#プログラミング勉強日記
2021年5月8日


#はじめに
　プライベートサブネットで通信を可能にするためには、NATゲートウェイを使う。NATゲートウェイを理解するためにはグローバルIPアドレスとプライベートIPアドレスのやりとりをする機能やソフトウェアの理解が必要になる。

##グローバルIPアドレスとは
　世界中でのやり取りが可能なのがグローバルIPアドレス。世界中で重複のない一意のアドレスで、インターネット上でのやりとりに使用される。ICANNという非営利団体が管理してる。そのため、グローバルに割り当てられたIPアドレスをもらう必要がある。

##プライベートIPアドレスとは
　限定的なエリア内でのみで利用可能なのがプライベートIPアドレス。オフィス内や家庭内などの特定の範囲だけで利用されるアドレスで、そのエリア内では重複はできないが、グローバルでは重複が可能。設定できるIPアドレスの範囲は`10.0.0.0` ~ `10.255.255.255`, `172.16.0.0` ~ `152.32.255.255`, `192.168.0.0` ~ `192.168.255.255`。ローカルエリアの管理者が自分でIPアドレスを与えられる。

##DHCPサーバーとは
　IPアドレスを付与するためのサーバーがDHCPサーバーで、DHCPサーバーを置くことでプライベートなIPアドレスの付与を(基本的には)自動で行う。
　
##NATとは
　グローバルIPアドレスとプライベートIPアドレスを対応付けるのがNATという機能・ソフトウェア。プライベートIPアドレスはアドレスが重複してしまうため、インターネットに接続するIPアドレスとしては使えない。インターネットに接続するためには、グローバルIPアドレスが必要になるので、インターネットに接続するときにはNATがグローバルIPアドレスに変換してくれる。この仕組みがNATという仕組み。

#IPマスカレードとは
　NATは1対1で変換するが、IPマスカレードは複数のプライベートIPアドレスをグローバルIPアドレスに変換する。複数のプライベートIPアドレスを1つのグローバルIPアドレスに関連付けて共有する。IPマスカレードの方が効率的に使うことができる。

#プライベートサブネットの構成
　プライベートサブネットではインターネットからのアクセスができないので、そのために踏み台サーバーを使う。パブリックサブネット側に踏み台サーバーを設置してそこにアクセスしてから、(踏み台サーバーから)プライベートサブネットにあるEC2インスタンスにアクセスする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/695b592c-1289-4e8f-d9c3-09387a741b5d.png)

　アクセスは踏み台サーバーからできるが、返信のトラフィックを受け取るにはNATゲートウェイが必要になる。NATゲートウェイはアドレス変換してパブリック側でやり取りできるようにしてインターネットゲートウェイに返信トラフィックを送り渡す。それによってインターネット側のクライアント端末でプライベートサブネット上のEC2インスタンスからの返信トラフィックを受け取れるようになる。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/dcf87b4d-19a6-9212-68c5-8c72d0902393.png)
AzureADにデバイスはAzure AD registeredとAzure AD joinedの運用上の区別

Azure AD registeredとAzure AD joinedは運用上の区別
Azure AD registeredの場合はユーザーの切り替えが可能です。
　Azure AD joinedの場合は該当端末が組織用になります。
　そのアカウントは一つ端末をログイン可能のユーザーになります。
![temp10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/ff6fc9ef-de80-0c76-e0b6-0a80cc3ba537.jpeg)
![temp11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/e7a2eda6-a824-4d6a-cfaf-22d52a5206de.jpeg)

Azure AD registeredの場合はユーザーの切り替えが不可です。

![temp9.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/672685dd-aaac-b258-cf99-282c44904456.jpeg)
【2021年最新】人気のオンライン英会話の比較ランキング｜おすすめの選び方と口コミ・評判は？｜EigoBase

オンライン英会話の人気比較ランキングサイトEigobase。選び方やサービスの紹介、比較に加えて最新情報やキャンペーン、英語学習に関する情報を口コミや評判を交えて定期的に更新しています。
https://eigobase.com/
tfenvで"No versions matching  found in remote"でインストールできない。

```bash
% brew install tfenv
% tfenv install latest
No versions matching 'latest' found in remote
```
どのバージョンをインストールしようとしても`No versions matching * found in remote`となってしまってインストールできない。

[MacOS - [ERROR] No versions matching '0.11.2' found in remote #83](https://github.com/tfutils/tfenv/issues/83)

どうやらgrepコマンドに色をつける設定をしているとダメらしい。

```bash
#.zshrc
#以下のように変更

# export GREP_OPTIONS='--color=always'
export GREP_OPTIONS='--color=never
```

設定ファイルを読み込み直して、再度試したらインストールできた。

```bash
% source .zshrc

% tfenv install latest
Installing Terraform v0.15.3
Downloading release tarball from https://releases.hashicorp.com/terraform/0.15.3/terraform_0.15.3_darwin_amd64.zip
#################################################################### 100.0%
```
Pythonの文字列メソッド

#pythonの文字列メソッド


```python
## 対象の変数
str = 'My name is hoge. Nice to meet you guys'

# 前から何番前に指定した文字列があるか
print(str.find('hoge'))

# 後ろから何番目に指定した文字列があるか指定している
print(str.find('guys'))

# 指定した文字列が何回出現したか
print(str.count('hoge'))

# 先頭の文字列を大文字に変換
print(str.capitalize())

# 単語の先頭の文字を大文字に変換する
print(str.title())

# 単語をすべて小文字に
print(str.lower())

# 単語をすべて大文字に
print(str.upper())

# 大文字は小文字 小文字は大文字に変換
print(str.swapcase())

# すべての文字が大文字が判定
print(str.isupper())

# すべての文字が小文字が判定
print(str.islower())

```

参考にした記事
[pythonにおける文字列操作](https://www.isc.meiji.ac.jp/~mizutani/python/intro3_python.html)
[python文字列メソッド一覧](https://note.nkmk.me/python-str-num-determine/)
職場または学校にアクセスするに職場と接続している、但しAzureADの設備にいないこと

環境：
掲題の件ですが設定のユーザーの情報にユーザーはMicrosoftアカウントで登録している。
![temp3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/b0a68ea4-043b-684c-1ece-0f9c12285c3c.jpeg)
職場に職場と繋がています。
![temp4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/e89e34e2-e57e-6cb8-a2df-885fbaca2d50.jpeg)
現象：
AzureADのユーザーリストに該当ユーザーの情報が表示しない。
「職場または学校にアクセスする」に該当接続を切断しょうとするとDomainがないのエラーが発生して切断不可です。
![temp5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/b0cf8f81-9eab-a33e-a6e0-1c307ce7a8b9.jpeg)
原因：
MicrosoftアカウントとAzureADアカウントは同じの組織用メールアドレスで
登録していることです。
解決方法：
１．ユーザーの情報に”すべてのMicrosoftアカウントへのログインを自動的に停止”を実行して、ローカルアカウントに変更する。
![temp6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/58f36b22-d609-213c-d9c2-c9a74e219f80.jpeg)
２．メールとアカウントにMicrosoftアカウントを削除する。
![temp7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/34ec7b5f-d730-c686-8c39-6fd62feb073d.jpeg)
３．家族とその他のユーザーを全部削除する。
![temp8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/6dabce66-a4e1-0909-b2f0-681d7ab514ad.jpeg)
４．ユーザーの情報にローカルアカウントになっております。
職場または学校アカウントを切断可能になります。
![temp4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/88c0aae1-5882-fae9-0fe9-c23c74448b92.jpeg)
Rails にてデータベースのテーブルを確認したい場合の方法


#背景

Railsにてデータベースを作成した後、テーブルのカラム等中身を確認をしたい場合があります。


#解決策
その時は「rails db」 コマンドを使い、データベースに接続することができます。

```
rails db 

中略

mysql>
```
接続できたら各々のDBの操作方法（MySQLやpostgresqlのコマンド）で操作が可能です。
Jupyter で LaTeX をやってみる

LaTeX を Jupyter でやってみます。

####設定
Jupyter Notebook のセルのタイプを Markdown にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/6b4d0f57-079e-3220-da5f-a660eb4dceaa.png)

####簡単な式
```
$$y=ax + b$$
```
のように記述して実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/93e7ff14-d9a5-ec44-86ec-a94c78c5ca2d.png)


$y=ax + b$　が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/7867e91f-2cbb-84fa-5874-8035685fed1e.png)

####分数
```
$$y=\frac{1}{3}$$
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/09bd575f-ee66-9b00-c23d-0f59d24228f0.png)

$y=\frac{1}{3}$　が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/9778e618-a3bf-b226-6995-e1f5e09b3a20.png)

####多項式
```
$$y=3x^2 + 2x + 1$$
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/e9e211ac-7cfb-c678-5005-1702454302dd.png)
$y=3x^2 + 2x + 1$　が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/b93811e3-b07c-29e2-fb31-1a722eb5227f.png)

####平方根
```
$$y=\sqrt 2$$
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/dff82fba-5255-58f5-3101-e4f60dcae415.png)

$y=\sqrt 2$　が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/77bf3da6-66a8-be78-810e-f7f3fbdece71.png)

####三角関数
```
$$y=\sin x + \cos x$$
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/ee29116a-4bf9-30a0-4ede-b4ad06d2c72e.png)

$y=\sin x + \cos x$　が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/80aa8208-dcf6-a672-ce14-11edffc25afe.png)

####総和
```
$$y=\sum_{k=1}^n a_k$$
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/6db5f98c-d92c-de29-7119-54cc2551d3cd.png)

$y=\sum_{k=1}^n a_k$$　が表示されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/04a4d0a5-b43d-a896-eaf6-2c03d298593a.png)

####総乗
```
$$y=\prod_{k=1}^n a_k$$
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/d9670b5c-2c32-b39d-f2fc-af8640179ec7.png)

$y=\prod_{k=1}^n a_k$$　が表示されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/926487b8-d428-ba96-2994-636e803e54de.png)
M1 MacでPlaywrightをDockerで動かす

Apple Silicon Macでクローラーを作った時に、DockerでPlaywrightが動かせなくてハマったので、解決策を共有しようと思います。

# 結論
Node.jsで動かすときはこれです。Pythonを使いたいときは読み替えればできると思います。

```Dockerfile:Dockerfile
FROM ubuntu:bionic

# Install node16
RUN apt-get update && apt-get install -y curl && \
    curl -sL https://deb.nodesource.com/setup_16.x | bash - && \
    apt-get install -y nodejs

# Install chromium
RUN apt update && apt install -y chromium-browser

# ...
```

```javascript:index.js
import { chromium } from "playwright";

chromium
  .launch({
    executablePath: "/usr/bin/chromium-browser",
  })
  .then((browser) => { /* Code Here */ })
```

# 何が起こったか
Playwrightは公式でDockerイメージを公開しています。
[Docker | Playwright](https://playwright.dev/docs/docker/)
[playwright/Dockerfile.bionic at master · microsoft/playwright](https://github.com/microsoft/playwright/blob/master/utils/docker/Dockerfile.bionic)
このイメージをM1 Macで動かそうとしたら、アーキテクチャが違うと怒られました。

アーキテクチャの違いを吸収するために、`--platform linux/amd64`を指定して起動しても、実行時にメモリ関連のエラーが発生してしまいました。

結局、arm64ネイティブで動くイメージが必要になったので、[公式イメージのDockerfile](https://github.com/microsoft/playwright/blob/main/utils/docker/Dockerfile.bionic)を参考に作成しました。
Authenticatorに登録したユーザーが削除され、携帯の機種変更時のこと

AzureAD登録、Microsoft365登録とか時に携帯でAuthenticator検証を行っています。
そのユーザーを携帯上削除されました。（携帯を機種変更時も同じと思います。）PCの検証が通らずログインができなくなります。その解決方法は、
　・管理権限のユーザーで管理画面に登録する
![temp.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/b312c843-c144-fb5a-c492-274d7ac7648c.jpeg)
　・該当ユーザーを選択して、プロファイル画面を開く
![temp1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/d00e1fab-e81e-68ec-2127-b73f8f5dcebc.jpeg)
　・パスワードをリセットすればいいです。検証方法からでもいいです。
![temp2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402505/cbd605fb-b911-278f-38e0-63b457fd48ac.jpeg)
【JavaScript】複数の数値が定義されている配列dataから「各数値」と「40未満の数値がいくつあるか」を表示する

```javascript
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>40点未満の人を割り出す</title>
    <script>
        var count=0; 
        var data = [59, 39, 100, 2, 15, 40, 84, 97, 39, 41, 39.9, 40.1];
        for(var i = 0;i<data.length;i++) {
            document.write(data[i]+'<br>'); // 配列データの表示
            if(data[i]<40){
              count++;
            }
        }
        document.write('<h1>40点未満の人は' + count + '人です</h1>'); // 40未満の数値の個数表示
    </script>
</head>
<body>
</body>
</html>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/0b79a251-2db7-ff6f-6615-143ccc14835b.png)
【Swift】IBOutlet接続したプロパティのdidset内に直接遷移を実装すると画面が表示されない理由

#結論

プロパティオブザーバーを利用して画面遷移を行う際は、イベントコントロールで正しく行えるようにする必要がある。直接遷移をさせずに、`addTarget`メソッドなどを用いる。

#理由

`IBOutlet`が接続されているViewに遷移されると、イニシャライズされて変数にIB部品のインスタンスが入ります。その際にプロパティオブザーバーとしての`didset`が実行されるが、この`didset`内に`NavigationController`による別の画面への遷移を直接実装してしまうと、画面が遷移されてきたにも関わらず、画面を遷移するという状態になるため、意図している形には正しく遷移されない、もしくはエラーが生じる。

このエラーはaddTargetメソッドでイベントコントロールを図ることで解決できる。実行のタイミングを`.touchUpInside`、つまり枠内をタッチするイベントのような形にすることで、`didset`内に記述されていてもインスタンス生成時に実行されなくなる。

そして、実際の遷移は`addTarget`メソッドでセレクタをし、`objc`属性のfunctionとして`NavigationController`による遷移を実装するということになる。

#例

###didset内に遷移を直接実装した場合</h4>

```Swift

final class ViewController: UIViewController {

    @IBOutlet private weak var reStartButton: UIButton! {
      didSet {              
        RootViewContorller.root.reStart()
      }
    }
}

//RootViewController.swift
final class RootViewContorller {
    
    static let root: RootViewContorller = .init()
    private init(){}

    func reStart(){
        UserDefaults.standard.isLogined = [true, false].randomElement()!
        showInitialView(window: window)
    }
}
```

この場合は次のようなDebugが表示される

>2021-05-08 10:33:25.508263+0900 RootViewControllerTest[13610:776213] Unbalanced calls to begin/end appearance transitions for < RootViewControllerTest.SecondViewContorller: 0x7fd8bb524200 >.

メッセージにあるように、遷移画面を起動/終了時の呼び出しが不安定ということ。遷移しても、即座に別の画面に遷移するような状態にあり、結果的に画面が表示されないためこのようなメッセージが表示されている。

###didset内で`addTarget`を利用した場合

```Swift

final class ViewController: UIViewController {

    @IBOutlet private weak var reStartButton: UIButton! {
      didSet {              
        reStartButton.addTarget(self, action: #selector(tapReStartButton(_:)), for: .touchUpInside)
      }
    }

    @objc private func tapReStartButton(_ sender: UIResponder) {
      RootViewContorller.root.reStart()
    }
}

//RootViewController.swift
final class RootViewContorller {
    
    static let root: RootViewContorller = .init()
    private init(){}

    func reStart(){
        UserDefaults.standard.isLogined = [true, false].randomElement()!
        showInitialView(window: window)
    }
}

```

この記述だと、プロパティオブザーバーとして`didset`内はインスタンス生成に実行されるが、`addTarget`メソッドは`.touchUpInside`というIBパーツの枠内をタッチした場合に実行されるような形になっているため、遷移は実行さレナい。`addTarget`では遷移の中身はactionパラメータのセレクターとして指定され、objc属性以下に書かれる。

`addTarget`メソッドは別のQiitaにまとめています。

https://qiita.com/Toaster17995234/items/8a456fc23c74f0156359

#まとめ

プロパティオブザーバーを利用して画面遷移を行う際は、イベントコントロールで正しく行えるようにする必要がある。直接遷移をさせずに、`addTarget`メソッドなどを用いる。
import App from './App.vue'とは

Vue CLIのsrcフォルダにあるmain.jsの記述をvs.codeで開いて見てみます。
import App from './App.vue'ってなんでしょう？

上に設置してある「App.vue」のことだそうです。
中身はtemplate,script,styleの３つの要素からできています。

import App from './App.vue'とはApp.vue（単一ファイルコンポーネント）を読み込んで（import）オブジェクトを作っていますということだそうです。

以下は参考オブジェクトの中身です。

```vuejs
Object
beforeCreate: Array(1)
0: ƒ ()
length: 1
__proto__: Array(0)
beforeDestroy: Array(1)
0: ƒ ()
length: 1
__proto__: Array(0)
components:
HelloWorld:
beforeCreate: [ƒ]
beforeDestroy: [ƒ]
name: "HelloWorld"
props: {msg: {…}}
render: ƒ ()
staticRenderFns: (4) [ƒ, ƒ, ƒ, ƒ]
_Ctor: {0: ƒ}
__file: "src/components/HelloWorld.vue"
_compiled: true
_scopeId: "data-v-469af010"
__proto__: Object
__proto__: Object
name: "App"
render: ƒ ()
_withStripped: true
arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them at Function.r (<anonymous>:1:83)]
length: 0
name: "render"
prototype: {constructor: ƒ}
__proto__: ƒ ()
apply: ƒ apply()
arguments: (...)
bind: ƒ bind()
call: ƒ call()
caller: (...)
constructor: ƒ Function()
length: 0
name: ""
toString: ƒ toString()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
get arguments: ƒ ()
set arguments: ƒ ()
get caller: ƒ ()
set caller: ƒ ()
__proto__: Object
[[FunctionLocation]]: ​
[[Scopes]]: Scopes[0]
[[FunctionLocation]]: App.vue?42e3:1
[[Scopes]]: Scopes[3]
staticRenderFns: Array(0)
length: 0
__proto__: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object
_Ctor:
0: ƒ VueComponent(options)
__proto__: Object
__file: "src/App.vue"
_compiled: true
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
```
Drag&Drop UI | Dropする前のファイルのtype属性を知りたい

## はじめに
ドラッグ&ドロップのUIを作っている際に、Drop前のファイルの`type属性`を知りたい要件があったので、ニッチな内容ですが、忘備録としてメモしていきます。

※ 以下のコードは、Reactと[react-dropzone](https://react-dropzone.js.org/)を使用しています。

## 前提

ここに簡単なDropZoneUIのサンプルコードを示します。
`onDrop`がdropZoneにファイルをドロップした時に呼ばれる処理で、`onDragOver`がファイルを掴んだ状態で、dropZoneにオンマウスした際に呼ばれる処理です。

```react:DropZone/index.tsx
import React, { CSSProperties, useCallback, useMemo } from 'react';
import { useDropzone } from 'react-dropzone';

const baseStyle = {
  width: '70%',
  display: 'flex',
  flexDirection: 'column' as const,
  alignItems: 'center',
  padding: '20px',
  borderRadius: 4,
  borderColor: 'rgb(216 216 216)',
  borderStyle: 'solid',
  backgroundColor: 'rgb(202 182 143 / 10%)',
  color: 'rgb(158 158 158)',
  outline: 'none',
};

export const Dropzone = () => {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);

  const onDragOver = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    onDragOver,
  });

  const style: CSSProperties = useMemo(
    () => ({
      ...baseStyle,
    }),
    []
  );

  return (
    <div style={{ display: 'flex' }}>
      <div {...getRootProps({ style })}>
        <input {...getInputProps()} />
        {isDragActive ? (
          <p>Drop the files here ...</p>
        ) : (
          <p>Drag 'n' drop some files here, or click to select files</p>
        )}
      </div>
    </div>
  );
};
```

イメージの補足として以下GIFを示します。
`onDrop`が呼ばれた時は、Fileオブジェクトからファイルの情報を知ることが出来ます。
`onDragOver`が呼ばれた時に、対象のファイルのtypeが知りたい時にどうやって知るのでしょうか？

![d&d.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33632/dd985007-025e-dc8a-4150-454a8e401eb6.gif)

## ドロップ前のファイルのtype属性を知る方法は？

**[A]** `DataTransferオブジェクト`を使用する。
以下に変更箇所の実装を示します。

```React:DropZone/index.tsx(onDragOverメソッドを変更)
  // DropZoneにOnMouseした際に呼ばれる
  const onDragOver = useCallback((event) => {
    event.stopPropagation();
    event.preventDefault();
    console.log(event.dataTransfer.items[0]);

    const fileType = event.dataTransfer.items[0].type;
    console.log(fileType);
  }, []);
```

`event.dataTransfer.items[0].type` でファイルのタイプを取得することができます。
consoleのキャプチャは以下の通り。アップロードしようとしているファイルのtype属性が取得できているのが分かります。

![スクリーンショット 2021-05-08 10.24.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33632/7fc479b5-ed08-8f48-fb98-cd55ee9fd4ec.png)

## DataTransferオブジェクトとは？

ここで使われている`DataTransfer`とは何でしょうか？
これはドラッグ＆ドロップ操作中にドラッグされているデータを保持するために使用されるもので、1つ以上のデータ項目を保持することができ、それぞれが 1つ以上のデータ型を持っています。

MDNの解説が詳しいので、最後に関連リンクを貼っておきます。
[MDN | DataTransfer](https://developer.mozilla.org/ja/docs/Web/API/DataTransfer)
[MDN | DragEvent.dataTransfer](https://developer.mozilla.org/ja/docs/Web/API/DragEvent/dataTransfer)
[MDN | DataTransfer.types](https://developer.mozilla.org/ja/docs/Web/API/DataTransfer/types)
メモ

##バイアスとバリアンスについて
学習不足→高バイアス
過学習→高バリアンス

このトレードオフを調整する方法が正則化。L2正則化が最も一般的。


##オンライン学習とバッチ学習
オンライン学習：次々と与えられるデータを用いて学習を逐次的に行う手法
バッチ学習：データ全体を一度に学習する手法

##決定木アルゴリズムの重要度について
重要度とは、その特徴量の分割がターゲットの分類にどれくらい寄与しているかを測る指標。
ジニ不純度：ノードごとにターゲットがどれくらい分類できていないかを測る指標。
例えば、ある集合[1,1,1,2,2,3,3,3,3]のジニ不純度は、
1-(3/9)**2+(2/9)**2+(4/9)**2=0.642

一番いい状態は、[1,1,1,1,1]のように全て同じラベルとなっている状態で、このとき、ジニ係数は、
1-(5/5)**2=0となる。
質問によって完全にクラス分けができている状態が最も最適な状態であり、この値を指標に決定木学習は行われる。

##アンサンブルについて
アンサンブル法とは、複数のモデルによりラベル付けを行い、最終的に多数決で分類を行う手法。

##特徴量選択と特徴量抽出
特徴量選択：無関係な特徴量を無視して、有益な特徴量を選択。
特徴量抽出：次元削減によって、より低次元の部分空間に特徴量を圧縮する。

##主成分分析(PCA)と線形判別分析(LDA)

PCA：教師なし。データセットにおいて分散が最も大きい直交成分軸を見つけ出そうとする
LDA：教師あり。クラスの分離を最適化する特徴量部分空間を見つけ出そうとする。
Viewが管理する最初のコントローラーを取得する方法

##はじめに
備忘録がてら誰かの役に立てればと考え、投稿することにしました。今回はViewが管理する最初のコントローラーを取得する方法を書いていきたいと思います。

##メソッド
こちらのメソッドを使ってコントローラーを取得します。こちらはUIViewのプライベートメソッドなのでご注意を。

```obj-c
- (id)_viewControllerForAncestor;
```

##使用例
このメソッドを使うことになった経緯として、ロック画面のミュージックプレイヤーをコンパクトな形にするTweakを作成する際に、コントロールセンターとのミュージックプレーヤーと区別するために利用しました。以下にそのコードを書いておきます。

```obj-c:Tweak.xm

%hook MRUNowPlayingControlsView //再生ボタンなどのコントロール関連のクラス
-(void)layoutSubviews
{
	%orig;
	MRUNowPlayingViewController* controller = (MRUNowPlayingViewController *)[self _viewControllerForAncestor]; //自身のUIViewControllerを取得。
	if ([controller respondsToSelector:@selector(delegate)] && ![controller.delegate isKindOfClass:%c(MRUControlCenterViewController)]) //取得したコントローラーにdelegateがあるかの確認と自身がMRUControlCenterViewControllerに属していないことの確認。
	{
		self.hidden = YES; //非表示
	}
}
%end

```
Cloud Firestoreでデータ入力できない事象。 The caller does not have permission to execute the specified operation.

##現状
Firestoreにデータを追加したいがこのようなエラーが出た。
初歩的なミスだが、忘れない為に備忘録としてまとめる。


```
Unhandled Exception: [cloud_firestore/permission-denied] The caller does not have permission 
to execute the specified operation.
```
##原因
Cloud Firestoreのセキュリティールールを記載していない。

Cloud Firestore のモバイル クライアント ライブラリまたはウェブ クライアント ライブラリから送られたすべてのデータベース リクエストは、データの読み取りまたは書き込みの前に、セキュリティ ルールと照合して評価されます。指定されたいずれかのドキュメント パスへのアクセスがルールによって拒否されると、リクエスト全体が失敗します。との事
[セキュリティールールについて詳しく](https://firebase.google.com/docs/firestore/security/get-started?hl=ja)
##解決策

```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
       allow read, write: if request.auth != null;//こちらのコードを追加
    }
  }
}
```
##まとめ
恥ずかしいミスだが、１つずつ確実に潰していき、技術向上に努めたい。
コンポーネントのグローバル登録とローカル登録

グローバル登録の場合いずれのvueのidにも適用されている。

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

<div id="app2">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
```

```vuejs
var data = {
  number: 12
}

Vue.component('my-component', {
  data: function() {
    return data
  },
  template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function() {
      this.number += 1;
    }
  }
})

new Vue({
  el: '#app',
})

new Vue({
  el: '#app2',
})
```

![20210508-095814.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/f31e8602-9361-b182-068a-36a10de85a5d.png)


ローカル登録
-

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>

<div id="app2">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
```
```vuejs
var component = {
  data: function() {
    return {
      number: 12
    }
  },
  template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function() {
      this.number += 1;
    }
  }
}

new Vue({
  el: '#app',
  components:{
  'my-component':component
  }
})

new Vue({
  el: '#app2',
})
```

![20210508-102135.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/354fa541-9d09-f6cd-1b03-1170773f9213.png)

＊appにだけコンポーネントが適用されています。



コンポーネント「ローカル」登録：コンポーネント名
-

|Vue.component('my-component-name', 変数名)|
|--|
＊コンポーネント名は Vue.component の第一引数です。'  'の部分です。
＊適用するVueインスタンスにだけコードを書きます。

コンポーネント登録(共通)：命名のケース (Name Casing)
=


|ケバブケース (kebab-case)|my-component-name|
|--|--|
|パスカルケース (PascalCase)|MyComponentName|

*グローバル登録では全てのnew Vueに適用されます。
React入門 - Tips3 - スプレッド構文

# 目次
[React入門](https://qiita.com/yokowake12345/items/0919ad144cbc4684e64e)

# スプレッド構文

Reactというよりかは、javascriptの話ですね。
簡単に言うと、`配列やオブジェクトを...で簡単に展開`できます。
ってことだと思います。

**最近よく利用することが多い**ので紹介しておきます。

[こういうサイト](https://www.typescriptlang.org/play)を使うと、
サクッと試していただけると思います。

説明はしません。
先程のサイトなどで実行して試してもらうと、すぐ理解できると思います。

# スプレッド構文の例（配列）

```typescript
const arr1 = [1,2,3,4];

// 配列のクローン
const arr2 = [...arr1];
console.log(arr2);
// arr1を展開しつつ、他の値も追加
const arr3 = [0, ...arr1, 5,6,7];
console.log(arr3);
// 複数の配列を展開
const arr4 = [...arr1,...arr3];
console.log(arr4);
```

# スプレッド構文の例（オブジェクト）

```typescript
const obj1 = { a: 1, b: 2}

const obj2 = { ...obj1 }
console.log('オブジェクトのクローン1: ' + JSON.stringify(obj2))

const obj3 = { ...obj1, c: 3 }
console.log('オブジェクトのクローン2: ' + JSON.stringify(obj3))

const obj4 = { ...obj1, ...{ c: 3, d: 4} }
console.log('オブジェクトのマージ: ' + JSON.stringify(obj4))

const obj5 = { ...obj1, b: 5 }
console.log('値を上書き: ' + JSON.stringify(obj5))

const obj6 = { ...obj1, ...{ a:9, d: 7 }}
console.log('値を上書き2: ' + JSON.stringify(obj6))
```

以上
コンポーネントの際はdataは関数にする必要がある


関数にした場合
-

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
```
```vuejs
Vue.component('my-component',{
 data: function(){
   return {
     number: 12
   }
 },
 template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
 methods: {
  increment: function(){
    this.number+= 1;
      }
   }
})

new Vue({
 el: '#app',
})
```

![20210508-093901.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/54c1f233-f11d-1197-95c9-3df289eb1e79.png)

それぞれの表示した項目が別のメモリを使っているためにそれぞれ個別に保存できる。 

オブジェクトで無理やりコンポーネントに設定した場合。(return内の外部オブジェクトにする)
-

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
```

```vuejs
var data = {
  number: 12
}

Vue.component('my-component', {
  data: function() {
    return data
  },
  template: '<p>いいね({{number}})<button @click="increment">+1</button></p>',
  methods: {
    increment: function() {
      this.number += 1;
    }
  }
})

new Vue({
  el: '#app',
})
```

これで＋１ボタンを押すと

![20210508-094728.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/78dff69a-b1d6-d079-5806-7063b9673b59.png)

![20210508-094744.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/e9dbea6d-a077-ae98-cdee-856cc016d44e.png)

オブジェクトの場合は１つのメモリを共有することになるので＋１を押しても３つとも同時に１づつ増加して同じ数字で表示されてしまう。
半正定値計画による線形計画

# 0. はじめに
半正定値計画は線形計画も解けることが知られている。簡単に確認するために、例を用いて説明する。式（１）で与えられた線形計画について半正定値計画に帰着することができることを確認する。

```math
\begin{eqnarray}
\min &  & -5x_1 - 4x_2  + 0 x_3 + 0 x_4\\

s.t. & &     5x_1 + 2x_2 +1x_3+0x_4= 30\\
     &  & \ \ x_1 + 2x_2 +0x_3+1x_4= 14\\
     &  & \ \ x_1\geq 0, x_2\geq 0, x_3\geq 0, x_4\geq 0
\end{eqnarray}
\tag{1}
```

式（１）は式変形すれば、式（２）のように半正定値計画に帰着できる。

```math
\begin{eqnarray}
\min &  & C \bullet X\\

s.t. &  & \ \ A_{1}\bullet X = b_{1}\\
     &  & \ \ A_{2}\bullet X = b_{2}\\
     &  & \ \ X\succeq 0
\end{eqnarray}
\tag{2}
```

ここで、演算子$\bullet$は下記のように定義される。

```math
A \bullet B := trace(AB^T)
```

式（２）の変数とパラメータは下記のように与えられる。

```math
\begin{eqnarray}
&X = \left(
    \begin{array}{cccc}
     x_{11} & x_{12} & x_{13} & x_{14}\\
     x_{21} & x_{22} & x_{23} & x_{24}\\
     x_{31} & x_{32} & x_{33} & x_{34}\\
     x_{41} & x_{42} & x_{43} & x_{44}\\
    \end{array}
  \right),\\

&C = \left(
    \begin{array}{cccc}
     -5 & 0 & 0 & 0\\
      0 &-4 & 0 & 0\\
      0 & 0 & 0 & 0\\
      0 & 0 & 0 & 0
    \end{array}
  \right),

A_{1} = \left(
    \begin{array}{cccc}
      5 & 0 & 0 & 0\\
      0 &2 & 0 & 0\\
      0 & 0 & 1 & 0\\
      0 & 0 & 0 & 0
    \end{array}
  \right),

A_{2} = \left(
    \begin{array}{cccc}
      1 & 0 & 0 & 0\\
      0 &2 & 0 & 0\\
      0 & 0 & 0 & 0\\
      0 & 0 & 0 & 1
    \end{array}
  \right),\\
&b_1 = 30,
b_2 = 14
\end{eqnarray}

\tag{3}
```

ただし、線形計画と変数を対応させた場合、変数$X$の要素は以下の対応関係となる。また、変数$X$は正定値対称行列であることに注意する。

```math
x_{11}=x_{1},x_{22}=x_{2},x_{33}=x_{3},x_{44}=x_{4}
```

線形計画を解くには、式（１）に基づいて主双対内点法で解く方法（以下では線形計画と書く）と、式（２）に基づいて主双対内点法で解く方法（以下では半正定値計画と書く）がある。線形計画に基づく主双対内点法と半正定値計画に基づく主双対内点法での性能を比較する。各イテレーション毎の実行時間と双対ギャップを比較する。

# 1. 数値実験
## 1.1 実験環境

使用するライブラリは、以前自前で実装したライブラリを使用する。

- [数理計画法　～線形計画法～](https://qiita.com/momo10/items/824c2fd8a0f432a676f4)
- [数理計画～半正定値計画をPythonで実装～](https://qiita.com/momo10/items/0f91b4284163b2452be5)

実装されている線形計画の主双対内点法と半正定値計画の主双対内点法は下記の通りである。

|||||
|---|---|---|---|
|線形計画|主双対内点法|主双対アフィンスケーリング法||
|線形計画|主双対内点法|主双対パス追跡法||
|線形計画|主双対内点法|主双対ポテンシャル減少法||
|半正定値計画|主双対内点法|主双対パス追跡法|XZ method|
|半正定値計画|主双対内点法|主双対パス追跡法|XZ+ZX method|

## 1.2 実行時間と双対ギャップの比較

線形計画の主双対内点法のほうが半正定値計画の主双対内点法より早く収束していることがわかる。また、１イテレーション毎の実行時間も短いことがわかる。

![time.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139678/a226eaf9-d161-958c-bbc4-bd95d3c02360.png)

## 1.3 生成される点列の比較
### 1.3.1 線形計画(主双対パス追跡法)
主双対パス追跡法の実行結果を示す。左図は実行可能領域における各イテレーションにおける内点の位置を表している。右上図は各イテレーションにおける主問題と双対問題の目的関数値を示す。右下図は各イテレーションにおける双対ギャップを示す。

![viewPATH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139678/2a545fab-d855-c02b-df1a-aae34f42c336.png)


### 1.3.2半正定値計画（XZ+ZX method）
半正定値計画のXZ+ZX methodのみ記載する。XZ+ZX methodの実行結果を示す。左図は実行可能領域における各イテレーションにおける内点の位置を表している。右上図は各イテレーションにおける主問題と双対問題の目的関数値を示す。右下図は各イテレーションにおける双対ギャップを示す。

線形計画より双対ギャップの収束が遅いことがわかる。

![viewAHO_XZPZX.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139678/311a145d-843e-032f-f225-357ec8e5aa03.png)

# 3. おわりに
線形計画の主双対内点法のほうが効率よく解けていることがわかった。また、半正定値計画のXZ+ZX methodはリアプノフ方程式をといたり、ステップ幅の算出で逆行列を計算、固有値の計算をするので演算時間が長くかかったと思われる。
selenium.common.exceptions.SessionNotCreatedException 発生の対処

#状況

pythonでseleniumを使ってブラウザ操作をしています。
過去動いていたコードを久しぶりに動作させると下記が発生
selenium.common.exceptions.SessionNotCreatedException

#原因
ブラウザにchromeを使用しているが自動更新でバージョンアップされていた為
chromeドライバとのバージョンが不一致でエラー発生

#対処
chromeドライババージョンアップ

##手順
- 下記からダウンロード
https://chromedriver.chromium.org/downloads

- ヴァージョンの近いものを使用する
chrome:90.0.4430.93
ChromeDriver 90.0.4430.24

- Win64bitは存在しないので32bit版を使用する
chromedriver_win32.zip

#結果
対応するドライバにすることで正常に動作した
インフラ、ネットワーク用語まとめ

# インフラ、ネットワーク用語まとめ



## DNS
IPアドレスとドメイン名の紐付けをするシステムのこと
DNSサーバーは複数ある（→全世界のIPを一つのサーバーで持つのは無理なため）

例: 「aaa.co.jpにアクセスしたい」
↓
DNSサーバー１（aaa.co.jpに紐ずくIPアドレスはこのサーバーにはない）
↓
DNSサーバー２（aaa.co.jpに紐ずくIPアドレスはこのサーバーにはない）
↓
DNSサーバー3（aaa.co.jpに紐ずくIPアドレスはこのサーバーにあった）
↓
DNSサーバー3: 「aaa.co.jpに紐づくIPアドレスは111.111.111.111だよ」

## Aレコード
DNSサーバーはゾーンファイルを持っていて(わかりやすく言うとノートみたいなもの)を持っている
そこにIPに紐づくドメインはこれですよと書かれている対応表、項目のこと


## ルートドメイン、サブドメイン
aaa.com
→ルートドメイン

aaa.com.
→ルートドメイン


travel.aaa.com
book.aaa.com
→サブドメイン



## バーチャルホストとは
バーチャルホストは、一台のサーバーで
仮想的に複数のドメインを運用するサーバー技術の一種で、
主にメールサーバーやWebサーバーなどで使われている

サーバーは何も入れてないとただの箱
そこにアパッチ（バーチャルソフトが入っている）、linuxOSを入れると頭脳を持った箱になる、サーバーとして機能する
そこに与えられるIPはただ一つ
そのサーバーに複数のサイトを入れることができる（＝複数のドメインがある）
http通信の際にheadでこのドメインからアクセスしてきたのだなとわかる

例:下記のようになっている場合
Aサイト ドメイン:ringo.com IP:111.111.111.111
Bサイト ドメイン:mikan.com IP:111.111.111.111

Aサイト: mikan.comにアクセスしたい
→http通信の際にheadでこのドメインからアクセスしてきたのだな
→このドメインに紐づくIPは111.111.111.111
→Aサイトどうぞ！

Bサイトmikan.comにアクセスしたい
→http通信の際にheadでこのドメインからアクセスしてきたのだな
→このドメインに紐づくIPは111.111.111.111
→Bサイトどうぞ！

IP:111.111.111.111にアクセスした場合
→IPに紐づいているドメインはringo.comとmikan.com二つ
→どちらにアクセスしたいんだろう？
→可能性1: ドメイン指定されてないのでデフォルト値みたいなのが設定されてたらそのデフォルトのサイトに行く
→可能性2: AサイトBサイトどちらに行きたいのか判断できなくてパニックになる



## 仮想メモリ
ハードディスクの一部をメモリとして利用する際に、ハードディスク上に作成されるファイルのこと。
バーチャルメモリなどとも呼ばれる
普通のメモリ=物理メモリ

例:CPU(シェフ)、メモリ（キッチン）、ハードディスク(倉庫)
今キッチンが忙しい
ステーキも作らないといけないし、ジュースの注文も来た
ステーキフライパンがいるし、ガスコンロもいる→キッチンでやらないとできない作業
ジュースは氷を割らないといけない→今キッチンが忙しくて邪魔そうなら、倉庫でも氷を割るくらいできるよね
→倉庫でやって（＝仮想メモリ上でやることに）


### スワップアウト
メモリがハードディスク(仮想メモリ)に渡すこと

### スワップイン
ハードディスク(仮想メモリ)からメモリに戻すこと

### メモ
- 仮想
→その名の通り目に見えない物、ソフトウェアが頑張ったんだなーと言うこと
物理的にさわれない

- ソフトウェア
→手にさわれない、インストール

- ハードウェア
→手に触れることのできる



## PID
プロセス: CPU(=料理のシェフ)メモリ(=キッチン)を使ってやっている作業＝実行中のプログラム
PID: プロセスに付けられた唯一無二のID
親子関係があるプロセスもある
勝手に子のプロセスを作る
子はPIDとPPIDを持つ


## キャッシュ
ある公開されいるHPのhtmlやcssをキャッシュフォルダに保存してて
次に同じHPにアクセスする時にそのキャッシュフォルダの情報からHPを表示されること
例: キャッシュフォルダの情報が古くなった場合（HPの方が何らかの編集が行われている場合は）はスーパリロードする

## クッキー
例:ログインログアウト
IDとパスワードが保存される仕組み
クッキーをonにしていたら次同じHPにアクセスする場合いちいちIDとパスワード入力しなくてもアクセスできる
自分のプライベートPCならONにしててもいいけど共用のPCはoffにしてないと危ない
コンポーネントについて


コンポーネントとは再利用できるvueのインスタンスである。

間違った使い方から
-
```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
</div>

<div id="app">
</div>
```

```vuejs
new Vue({
 el: '#app',
 data: {
   number: 12
 },
 template: '<p>いいね{{number}}</p>'
})
```

![20210508-084738.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/d64de2b6-eca9-65c1-112b-9554b14aedc3.png)

こちらの意図としては同じdivタグを２つ用意して「いいね１２」が2連続表示されるかと思っていたが、その意図には反して最初に示したものと同じものは無視するというvuejsの仕様で無視されている。

ここでコンポーネントの設定をして２回連続表示します。


|Vue　component('コンポーネントの名前',{コンポーネントの情報=データなど})|
|--|

（１）vue.componentを設定します。
(2)vueファイルにコンポーネント名のタグを設置します。
*今回は<component></component>
（３）Dataがある場合は関数を使ってreturnとオブジェクトで表現する。
今回はプロパティがnumberで値が１２です。
⇨data: function(){return {number: 12}}

```vuejs
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

<div id="app">
<my-component></my-component>
</div>

<div id="app">
</div>
```
```vuejs
Vue.component('my-component',{
 data: function(){
   return {
     number: 12
   }
 },
 template: '<p>いいね({{number}})</p>'
})

new Vue({
 el: '#app',
})
```
![20210508-092117.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/f2816d51-066d-138e-882e-0df066d3f7e7.png)


```vuejs
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
```

繰り返し処理

![20210508-092348.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/a79486c1-20df-98ba-e5dd-4e1a301a7a43.png)

うまくいきました。
xmonadをwindowsにインストールして、幸せになる

# 概要
ついに時代が来たっぞ〜〜〜〜〜！！！！！

WSL2でxmonadが動く！xmonadがwindowsアプリになりました！！！

## こんなの
![Inkedxmonadonwsl_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127774/cc9a5167-82fd-b5b3-4d4d-f6b3efcbf0b4.jpeg)

## 使用感
dockerもwsl2をバックエンドに指定できるのでこれでバリバリ開発ができます。

以前以下の記事を投稿したことがあります。
https://qiita.com/aki-f/items/b7b45a6e6ed33ce81eb9
windowsでlinuxをカジュアルに使うという趣旨だったのですが、時代はカジュアルを超えて「本格的」に使えるようになってきました。

## 対象
タイル型ウインドウマネジャーのxmonadを使っている人
windowsでlinux使いたい人
今までの仮想環境が嫌だった人

## メリット
バックエンドをWSL2にすることによってメモリとCPUのリソースを動的に割り振られています。（一部メモリは静的に割り振られます）
WSLを使うことの最大の利点はリソースの賢い使い方にあります。

各種テレワークアプリをwindowsで動かせる

## デメリット
相変わらずsystemdが使えない

環境構築ちょっとだるい

# インストール
## WSL2のインストール
割愛
wsl１でも行けるかもしれませんが試してません。
## VcXsrvのインストール
割愛
## xmonad install
各自好みの方法があると思うが、私はプロジェクトをビルドしてます。
### haskell

```bash
curl -sSL https://get.haskellstack.org/ | sh
stack setup
stack ghc -- --version
```
### xmonad
https://github.com/akihirof0005/dotfiles/tree/main/.xmonad
以上のドットファイルを~/.xmonadに作る

```bash
cd  ~/.xmonad
stack install
chmod a+x build
xmonad --recompile
```

私の環境を参考に自分のxmonadをビルドしたい方はソースの`xmonad.hs`を置き換えてください。

## 環境変数の設定

```
export LANG=ja_JP.utf8
if [ -n "$DESKTOP_SESSION" ];then
    eval $(gnome-keyring-daemon --start)
    export SSH_AUTH_SOCK
fi
source "$HOME/.cargo/env"
export PATH="$HOME/.local/bin:$PATH"

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0
export LIBGL_ALWAYS_INDIRECT=1
```

## 依存環境の解決
各種依存しているパッケージをインストールしてください。
日本語環境とかmozcとか普段linuxノートパソコンで使っているものです。

# 起動
VcXsrvをフルスクリーンで起動します。
wslは一度再起動するか、.zshrcや.zshenvなど再読込して環境変数を読み込んでください

```:.xinitrc
#!/bin/sh

# start some nice programs

if [ -d /etc/X11/xinit/xinitrc.d ] ; then
 for f in /etc/X11/xinit/xinitrc.d/?*.sh ; do
  [ -x "$f" ] && . "$f"
 done
 unset f
fi

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx

eval $(/usr/bin/gnome-keyring-daemon --start --components=pkcs11,secrets,ssh)
export SSH_AUTH_SOCK
xsetroot -cursor_name left_ptr &
exec xmonad
```
以上のファイルを作成し、`zsh .xinitrc`で起動します。
`eval $(/usr/bin/gnome-keyring-daemon --start --components=pkcs11,secrets,ssh)`はsshのキーリングを解決してくれるやつですね。

##　起動スクリプト

WSLから

```zsh:/usr/local/bin/startx
cd ~
zsh /home/skit/.xinitrc
```
WINDOWSから

```powershell:xmonad.ps1
.\config.xlaunch
wsl startx
```
これをダブルクリックしてもいいし、スタートアップに登録しても良い

# 幸せになった？

意外と手順が多かったけど、これが新しい”linuxとWindowsがシームレスに融合してる感じ”です！

## 追記

私はxmonadのmodキーを"alt"にしています。VcXsrvにフォーカスしながらwinキー+lで画面はロックされます。alt+F4を押すとVcXsrvを閉じようとします。どちらが優先されるかはよくわかりませんが、手元の環境ではキーバインド困っていません。