OmniAICreator/Qiita-1.07M huggingface dataset:
【初心者】Vue.jsでMVVMモデルを説明する（途中）

vue.jsの初学者が忘れないように記録しました。
違っている部分がありましたらコメントください。

理解するごとに追記していきます。

ここでは
・トップページから他のページに移るまで（MVVMモデル）の流れ
・各ファイルの役割の説明

を説明します。

##MVVMモデル
モデル(M)とビュー(V)間のやり取りをビューモデル(VM)を介して行うアーキテクチャのこと。

###ViewModel
・Vue.js のインスタンスのこと。
###Model
・dataオブジェクト と methodsオブジェクト のこと。
・el で指定されたDOM要素のこと。elでDOM要素を指定することで、ViewModel の適用範囲を指定できます。


[DeNA DESIGN BLOG](https://design.dena.com/engineering/vue-js%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8Bmvvm%E5%85%A5%E9%96%80/)



##各ファイルの流れ
main.js→new Vue()で指定したファイル→public/index.html→router.js→子要素のVueファイル

##main.js
まずは main.js から全てが始まる。
new Vue() で Vue App を起動している。この時App.vueがメイン（親）のファイル、つまりルートパスとして最初に表示される。

main.jsのmount内とpublic/index.html内のid=" "は同じにする必要がある。今回はappとしている。

```main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

```

##router.js
読み込むファイルはrouter.jsに記述しておく必要がある。

```router.js
import Vue from 'vue'
import Router from "vue-router"
import page2 from '@/components/page2'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/page2',
      component: page2
    },
    {
      path: '/',
      component: HelloWorld
    }
  ]
});

```

##App.vue
・テンプレートタグ内に```<router-view></router-view>```と書いてあげることによって、router.jsに読み込んだファイルを表示する。

```App.vue
<template>
  <div id="app">
   <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'app',
  components: {
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

```

##HelloWorld.vue

```HelloWorld.vue
<template>
 <div>
<img alt="Vue logo" src="../assets/logo.png">
  <p>{{title}}</p>
  <!-- 子コンポーネントのmessageを設定して呼び出す -->
  <hello-child message='メッセージだよ'/>
  <router-link to="/page2">Go to page2</router-link>
 </div>
</template>

<script>
import HelloChild from './HelloChild'
export default {
  data: function () {
    return {
      title: 'はろー！わーるど！'
    }
  },
  components: {
    HelloChild
  }
}
</script>
```

##page2.vue

```page2.vue
<template>
  <div>
    <p>
      ここはページ２です。
    </p>
    <router-link to="/">Go to page1</router-link>
  </div>
</template>

<script>
</script>

<style>
</style>
```
TypeScript Utility Types 早見表

# Utility Types 早見表

1. Partial\<T\>: 全てのパラメーターをOptionalに設定した型
2. Readonly\<T\>: 全てのパラメーターを`readonly`に設定した型
3. Record\<K,T\>: T型のプロパティーKのセットの型を返す
4. Pick\<T,K\>: Tの一部のプロパティーを選択した型
5. Omit\<T, K\>: T型の一部のプロパティーを除外した型
6. Exclude\<T,U\>: Tのうち、Uにアサイン可能な型を除いたもの
7. Extract\<T, U\>: Tのうち、Uにアサイン可能な型のみを取り出したもの
8. NonNullable\<T\>: T型のうち、nullとundefinedを除いたもの
9. Parameters\<T\>: 関数Tの引数の型のtuple
10. ConstructorParameters\<T\>: Constructor関数の引数の型のtubple
11. ReturnType\<T\>: 関数Tの戻り値の型
12. InstanceType\<T\>: Constructor関数Tのインスタンス型
13. Required\<T\>: Tの全てのオプショナルプロパティーを必須にした型
14. ThisParameterType\<T\>: 関数Tのthis引数の型
15. OmitThisParameter\<T\>: 関数Tのthis引数を除いた関数型
16. ThisType\<T\>: 関数の中で参照されるthisに型づけをすることができる。
Stack Overflow Survey 2020の要点整理

#　この記事の目的
世界のディベロッパーのトレンドを追う上で、非常に重要な資料であるの最新版である2020年版の要点を整理すること。自分の理解のためだけでなく、毎年出されているにもかかわらず、日本語での情報共有が少ない本調査の要点を日本語で整理することで、多くの日本人の開発者が世界のトレンドを理解することを期待する。

原文
https://insights.stackoverflow.com/survey/2020

#　調査概要
・2020年2月に世界中の65,000人以上のディベロッパーにアンケートを実施（注：回答者はアメリカ、インド、ヨーロッパに集中）。
・コロナウイルスが流行る前に調査が実施されたため、仕事や賃金のデータは現時点での情報と異なる可能性があることに注意。

#　キーポイント
（１）最も愛された言語はRust, Typescript, Pythonの順番。Rustは五年連続で一位。
（２）回答者の8割がDevOpsが重要だと考えている。
（３）回答者の9割が、プログラミングで壁に当たった時、Stack Overflowを参照している。

#　職種
・複数回答ありで、55％がバックエンド、フルスタックと答え、37％がフロントエンドのエンジニアと回答。
・プログラミング経験年数の層の中で一番高い割合が5年から9年で回答者の30％を占めた。5年以下と答えたのは17％。
・一方で、仕事としてプログラミングした経験は5年以下が最多で回答者の40％を占めた。
・回答者の85％は10代でプログラミングを開始した。

#　学歴
・46%が学士号を、23%が修士号を取得。また回答者の6割以上が学部時代にコンピューターサイエンスを専攻していた。

#　言語その他のランキング
（１）最もポピュラーな技術
![Screenshot from 2020-07-07 23-43-55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/f7467186-ad78-dcc5-c89b-bb434190ee0d.png)

（２）最もポピュラーなフレームワーク
![Screenshot from 2020-07-07 23-48-13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/2d468091-8aec-3dac-e161-66f93cc7567a.png)

（３）最もポピュラーなプラットフォーム
![Screenshot from 2020-07-07 23-49-21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/28353d64-f840-f7ae-e650-86126882e1fc.png)

（４）最も必要とされている技術
![Screenshot from 2020-07-07 23-51-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/18d807d6-d363-81cb-7092-1c761ff17979.png)

（５）最も必要とされているフレームワーク
![Screenshot from 2020-07-07 23-52-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/d3d884a5-4dc5-a109-7dd5-c2562c64efdf.png)

（６）最も必要とされているプラットフォーム
![Screenshot from 2020-07-07 23-53-30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/764af7f8-7eab-8ce3-8d29-c37d5fd4b8d9.png)

（７）技術ごとの年収ランキング（米ドル換算）
![Screenshot from 2020-07-07 23-57-39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613405/f2938986-1c3a-c39b-8ee2-f6044ad4e50e.png)

#　所感
世界のトレンドを理解できる本調査の重要性を再確認できた一方で、日本人のディベロッパーはほとんど対象になっておらず、日本の傾向がわからない、またその傾向が世界に伝わらないことは残念だった。一方で、Docker, AWS, Linux等、現在自分が学んでいる技術が世界でも重要視されていることがわかったのは大きな収穫だった。

本記事では調査の内容をコンパクトにまとめて記載したため、詳細は冒頭に記載したリンクから原文を参照していただきたい。
私がG検定に合格した理由


既に本はもってました。全部ディープラーニング関連です。

![本.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669624/53806b6f-cfce-f113-f4d7-4d95e47f994d.jpeg)


G検定対策のために作成したメモです。

※個人メモなので間違っている可能性があります。


勉強方法

まず。黒本と白本と要点整理の本を徹底的にやりました。

![91BwP7VimhL.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669624/9dc348ca-5dec-e985-078b-acf2b6843417.jpeg)


![siro.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669624/bc43dd92-f37b-fe3e-5e3b-6016923e3159.jpeg)


![seiri.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669624/f3c38fcb-832c-22f9-f1b2-471f6424f4d1.jpeg)







ここで黒本は基礎知識、白は勉強の流れ、要点は補足など。


さてさて、この画像にあるように本を腐るほど買ってあったので、これが役にたったのかも。

（G検定は試験代半額だから受験しました。）

本の解説をしたいと思います。


「アンサンブル学習アルゴリズム入門」

![813t1MEUC2L.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669624/91cbe922-5a19-3620-1db2-50408046562d.jpeg)



・コードがありますが、ちゃんとに補足、説明、基礎、などが多々あり、役に立ちました。



「科学計算とPythonの研究」

![MIF202006-scaled.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669624/3461fec4-65a5-713c-cf50-f830d6e0d0b0.jpeg)

この本はパイソンのソフトを網羅してました。

例えば、G検定でも出てくる単語

画像関連では、open CVやscikit-imageやSimple ITLとか。

深層学習では、TensorFlowやKerasやPyTorch

これ以外にも深層学習あります。

CNTKやMXNetとかまだまだあります。


最後に


G検定受験する人はおススメです！

noteで２万文字は無料！


https://note.com/gkentei/n/nf616a3f68f64


でわでわ



それじゃーね！
Rubyで繰り返し処理の中で任意の要素数で処理を差し込む方法

## この記事で書くこと :pen_ballpoint: 

~~Rubyで数字を整数かどうか判定する文を書こうとしたら、
すぐに自分の中から出てこなかったので
その内容を学びとしてアウトプットする。~~

繰り返し処理の中で任意の要素数で処理を差し込む方法について
学びとしてアウトプットする。

（記述する処理と内容が適さないため、修正しました。 :bow: 　）

## 特定の数字の倍数かどうかで処理を分ける :deciduous_tree: 


```ruby

pry(main)> test_num = 1
=> 1
pry(main)> test_num.to_f
=> 1.0
pry(main)> test_num.to_f.to_s.split('.')[1] == '0'
=> true

pry(main)> test_num2 = 1.05
=> 1.05
pry(main)> test_num2.to_f
=> 1.05
pry(main)> test_num2.to_f.to_s.split('.')[1] == '0'
=> false

(0..1000).to_a.each do |num|
  if num.fdiv(100).to_s.split('.')[1] == '0' && num != 0
    p '100の倍数です'
  end
end
```
pyenvでPython 2系をインストールする際にOpenSSLのエラーとなる場合の対処方法

pyenvでPython 2系をインストールしようとしたところ、OpenSSLに関するエラーとなりインストールできない事象に遭遇しました。
その際に私がとった対応方法を記しておきます。

## この記事の前提

- macOSを使用している
- homebrewでOpenSSLをインストールしている

## エラー

pyenvでPython2系をインストールしたところ、以下のようなエラーが発生しました。

```
$ pyenv install 2.7.10
python-build: use openssl from homebrew
python-build: use readline from homebrew

...省略...

ERROR: The Python ssl extension was not compiled. Missing the OpenSSL lib?

Please consult to the Wiki page to fix the problem.
https://github.com/pyenv/pyenv/wiki/Common-build-problems


BUILD FAILED (OS X 10.15.5 using python-build 1.2.18-19-gcf81e5a0)
```

`Missing the OpenSSL lib?` とのことから、OpenSSLで問題が発生していることがわかります。

## 解決方法

私の環境でこのエラーが発生していた原因は、homebrewでインストールされているOpenSSLのバージョンが1.0系でないことが原因でした。
Python 2系のインストールにはOpenSSL 1.0系が必要になります。

### OpenSSLのバージョン確認

brewでインストールされているOpenSSLのversionを調べてみましょう。

```
$ brew info openssl
openssl@1.1: stable 1.1.1g (bottled) [keg-only]
```

### OpenSSLのアンインストール

OpenSSL 1.1を一時的にunintallします。

```
$ brew uninstall --ignore-dependencies openssl
```

`--ignore-dependencies`を付ける理由は、依存関係を無視して強制的にアンインストールさせるためです。
(他のソフトウェアから依存されている場合、このオプションを付けないとアンインストールできない)

### Python 2系のインストール

つづいて、pyenvにてPython 2系をインストールします。
pyenv側で勝手にOpenSSL1.0系をインストールしてくれるため、自分でOpenSSL1.0系をインストールする必要はありません。

```
$ pyenv install 2.7.10
Installing openssl-1.0.2k...
Installed openssl-1.0.2k to /Users/hogesuke/.anyenv/envs/pyenv/versions/2.7.10
```

### OpenSSL 1.1をインストールし直す

Python 2系のインストールに成功したら、アンインストールしたOpenSSL 1.1をhomebrewでインストールし直しておきます。

```
$ brew install openssl
```

## 参考

https://fumimaker.hatenablog.com/entry/2020/02/18/203434
"Above AIR.framework" は壊れているため開ません。への対処法




ある日、Radikoを聞こうとしたら、以下のようなポップアップが、、、
![スクリーンショット 2020-07-07 23.39.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383723/a75f2d8d-7d30-b67b-5af6-0c6bfe7e11d7.png)

本件への対処法の備忘録。

## 環境

- iMac late 2012
- MacOS Catalina (10.15.5)


## 対処法

以下のコマンドで対処できます。

```bash
cd /Library/Frameworks
sudo xattr -r -d com.apple.quarantine ./Adobe\ AIR.framework
```

 ## 原因

OSのアップデートによって隔離情報(quarantine)がアップデートされ、Adobe AIRも対象に。
上のコマンドでそれを解除しています。セキュリティの懸念があるかもしれないので、自己責任でお願いします。

## 参考

[Adobe Air error message - macOSX Catalina - Adobe Support Community](https://community.adobe.com/t5/air/adobe-air-error-message-macosx-catalina/m-p/10683302?profile.language=en&page=1 "Adobe Air error message – macOSX Catalina – Adobe Support Community")
【PyTorch】 AdaptiveMaxPool2d, AdaptiveAvgPool2dについて

# 前置き
PyTorchにあるAdaptive系のプーリング。

* [AdaptiveMaxPool2d — PyTorch master documentation](https://pytorch.org/docs/master/generated/torch.nn.AdaptiveMaxPool2d.html)
* [AdaptiveAvgPool2d — PyTorch master documentation](https://pytorch.org/docs/master/generated/torch.nn.AdaptiveAvgPool2d.html#torch.nn.AdaptiveAvgPool2d)

任意の入力サイズに対して、出力サイズを指定してプーリングを行う。
どのような動きになっているのか、ソースコードを見てみた。

# カーネルの求め方
カーネルを以下式で求める。

```
start_index = floor(output_index * input_size / output_size)
# output_index ... 0～(output_size-1)
```
floor ... 切り捨て


```
end_index = ceil((output_index + 1) * input_size / output_size)
# output_index ... 0～(output_size-1)
```
ceil ... 切り上げ


### 例
#### input_size=(10, 10), output_size=(6,6)　の場合
| output_index | start_index | end_index | カーネルの範囲 |
| --- | --- | --- | --- |
| 0 |0  | 2 | 0～1 |
| 1 | 1 | 4 | 1～3 |
| 2 | 3 | 5 | 3～4 |
| 3 | 5 | 7 | 5～6 |
| 4 | 6 | 9 | 6～8 |
| 5 | 8 | 10 | 8～9 |

#### AdaptiveMaxPoolの場合

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102154/415e6483-ec6d-2e0f-ba63-f9ea9af0365e.png)




```python
import torch
import torch.nn as nn

x = torch.arange(100).view(1, 10, 10).float()

#tensor([[[ 0.,  1.,  2.,  3.,  4.,  5.,  6.,  7.,  8.,  9.],
#         [10., 11., 12., 13., 14., 15., 16., 17., 18., 19.],
#         [20., 21., 22., 23., 24., 25., 26., 27., 28., 29.],
#         [30., 31., 32., 33., 34., 35., 36., 37., 38., 39.],
#         [40., 41., 42., 43., 44., 45., 46., 47., 48., 49.],
#         [50., 51., 52., 53., 54., 55., 56., 57., 58., 59.],
#         [60., 61., 62., 63., 64., 65., 66., 67., 68., 69.],
#         [70., 71., 72., 73., 74., 75., 76., 77., 78., 79.],
#         [80., 81., 82., 83., 84., 85., 86., 87., 88., 89.],
#         [90., 91., 92., 93., 94., 95., 96., 97., 98., 99.]]])

nn.AdaptiveMaxPool2d((6,6))(x)

#tensor([[[11., 13., 14., 16., 18., 19.],
#         [31., 33., 34., 36., 38., 39.],
#         [41., 43., 44., 46., 48., 49.],
#         [61., 63., 64., 66., 68., 69.],
#         [81., 83., 84., 86., 88., 89.],
#         [91., 93., 94., 96., 98., 99.]]])
```
プログラミングの低水準言語と高水準言語の違い

#低水準言語(低級言語ともいう)とは？

- 機械語(0と1だけで書かれたプログラム)に近いもの

ex) アセンブリ言語

#高水準言語(高級言語ともいう)とは？

 - 人間の言葉に近いもの→**そのままではコンピュータが理解できないので機械語に翻訳する必要がある。**

ex) BASIC、FORTRAN、COBOL、C言語、C++、Java ...etc

 - 翻訳方法は２通りある

1. インタプリタ方式：**インタプリタ**というプログラムが命令を一つずつ機械語に翻訳しながら実行する方式
 メリット：修正しやすい
 デメリット：エラーが見つけにくい

2. コンパイル方式：**コンパイラ**というプログラムが実行する前にプログラム全体を一度に機械語に翻訳する方式
 メリット：配布前にエラーを見つけやすい、機械語なので高速
 デメリット：修正や変更に時間がかかる、機械語で配布されるのでCPUやOSの種類が違うと動かない

 　
※コンピュータの世界で「水準」は機械と人間との距離を表している。品質の良し悪しを指しているわけではない。

※現在行われているプログラミング作業のほとんどが高級言語で行われている。
web開発におけるUI実装の大まかな手順

##ページのルーティング
必要なページを確認し、それぞれのページの切り替え時(コンポーネント変更)にURLが変わるようにする。
####なぜ？
URLが変わらないと戻るボタンを押して一つ前の状態に戻ることができないし、一発で作業ページに飛ぶことができない
####今回
Reactを利用しているので、react-router-domを使えば簡単にルーティングができる。
詳しくは以下参照
[https://reactrouter.com/web/guides/quick-start](https://reactrouter.com/web/guides/quick-start)

##トップページ(/)にアクセスした際に指定のページに映るように変更
リダイレクトで指定のページに飛ぶように。
Reactではreact-router-domのRedirectを使えば簡単に実装できる。

##ペライチの作成
細かいところを作っていくより先に、一ページにベタ書きして大枠を決める。
その後Atomic Designなどを意識してコンポーネントに分けていく。

##cssはフレームワークを使いましょう
最初cssを自力で書いていましたが、どうしてもズレが直らない。
自力で書いていた理由は、デザイナーのデザイン通りにするにはフレームワークの制約があると難しいんじゃないかと思ったから。
#### 自力cssの問題点
- ズレが直らない
- 同じコンポーネントで色や大きさだけ変えたい時にどのようにすればいいのかわからない

この辺りを綺麗に予め実装してくれているのがcssフレームワーク。やっぱりフレームを使うのが良さそうと判断。自力で実装する程度の制約はなさそう。(いろんなcssのプロパティ？を引数で与えられて変更できます。)
####今回
実際、Reactのフレームワークに以前はmaterial-uiを使っていたが、結構重いみたい。
そこで今回はchakra-uiを利用。(https://chakra-ui.com/getting-started)
ナルトに影響されすぎてる？w
開始早々エラーが出てボタンが描画できない。それについては別記事にしています。(https://qiita.com/ryota_akiyama/items/daee80d7947d7079cb11)

##一通りできたら、レスポンシブ対応しよう
今はpcでみるよりもスマホでみることが多いよね。
だから、必ずと言っていいほどレスポンシブ対応しなきゃならない。
レスポンシブ対応させる方法は大きく分けて三つ。
- cssに記述する(@media...)
- 別のコンポーネントを作成する(コンポーネントを切り替える)
- cssフレームワークのAPIを利用
####今回
chakra-uiを使っているのだが、こういうcssフレームワークには大抵レスポンシブapiが備わっている。
chakra-uiの場合にはコンポーネントタグの属性にそれ用の記述をすればok
chakra-uiを使っているところはそのレスポンシブ対応を使って、それ以外のところは別のコンポーネントを利用するかcssに記述する書き方を選択。
ちなみにReactを使った別コンポーネントの利用には**media query**を使うと簡単にコンポーネントの使い分けができる。(https://www.ted027.com/post/react-mediaquery/#react%E3%81%A7%E3%81%AEmedia-query)
java script(配列、条件分岐)


#はじめに
プログラミングの学習を進めて行く中で、JavaScriptの理解が浅いと痛感認め、基礎に戻りました。

今回は、その内容を学習メモとして投稿します。


# 動型付け言語
JavaScriptは”動型付け言語”です。”動型付け言語”とは、自動的に言語が型を判別してくれる言語の事です。

以下、例))

```javascript
const test = 123; //int型と必要がない
const test_2 = 'テスト';　//str型と必要がない

console.log(test);
console.log(test_2);
```

# 静型付け言語(余談)
動型付け言語の逆が"静型付け言語"です。具体的には、自動的に言語が型を判別してくれないため、型を書く必要がある言語です。

**例：**java,goなど、、、
int strなどと型を書く必要のある言語


###動型付け言語の型の確認の仕方

console.log();内にtypeof と書く

```javascript
onst test = 123;
const test_2 = 'テスト';

console.log(test);
console.log(test_2);

console.log(typeof test);
console.log(typeof test_2);

==========================
=> 123
=> テスト
=> number //型の確認
=> string //型の確認

```


#配列と連想配列
配列はとは、値を管理するボックスの様なイメージです。

###書き方と参考例

```javascript
const array = [1,2,3];
const array_2 = [
  ["りんご", "バナナ", "イチゴ"],//0番
  ["ぶどう", "桃", "スイカ"]    //1番
];

console.log(array);
console.log(array[1]);

console.log(array_2);
console.log(array_2[1][2]);

==============
array          => [1, 2, 3]
array[1]       => 2
array_2        => ["りんご", "バナナ", "イチゴ"]
               => "ぶどう", "桃", "スイカ"]
array_2[1][2]  => スイカ
```
##連想配列
オブジェクトの書き方

```javascript
//基本文
const 変数名 = {
  //キー：　バリュー
};
```
###参考例

```javascript
//オブジェクト
const member = {
  //キー：　バリュー
  'name': 'ヤマト',
  'hobby': '音楽'
};

console.log(member);
console.log(member.hobby);


==============

member　     => {name: "ヤマト", hobby: "音楽"}
member.hobby => 音楽
```

#演算子
```
//四則：　+,-,*,/,%
//足し算、引き算、掛け算、割り算、割り算あまり

//代入：　+=
//左に右を代入（加える）

//比較：　>,>=,===,!==
//右左の比較

//理論：  &&,||,!
//左右両方を満たすか、または片方のみを満たすか
```


#条件分岐
・if
・for-of(配列の抽出)
・for,switch,while,配列.foreach

javascriptでのif分の基本的な書き方

```javascript
if(){
  条件が真なら実行
 }eles{
条件が偽なら実行
 }
```

###参考例

```javascript

const num = 10;

if(num === 10){
  console.log('番号は' + num + '番です');
}else{
  console.log('番号が違います！')
}
===============================
=> 番号は10番です

```

**補足**
比較演算し、｀==｀と｀＝＝＝＝｀の違い

|比較演算子|意味|
|---|---|
|==の場合|左右が一致|
|===の場合|左右が一致、また型も一致|

#終わりに
自分学習メモとして、投稿しました。
参考になれば、幸いです。
Djangoで目的の日時のデータを抽出したかっただけの話

初投稿です

#目的の日時のデータを抽出したかった
　タイトルの通りDjangoで特定の日時のデータを取得しようとして四苦八苦した話です。
　目的の処理ができるまでに丸一日費やしてしまったのでこの苦労を忘れないように備忘録として、またこの記事を見た人が同じようなことをするときの苦しみを減らせたらと思い投稿しました。

・DateTimeField に filter をかけるときに month や day を指定するにはどうしたらいいんだ？
 
　といった悩みを持っている人には少しは参考になるかもしれません。
　

```python:models.py
from django.db import models

class Article(models.Model):
  user_id = models.IntegerField()
  wirriten_date = models.DateTimeField()
  text = models.CharField(max_length=255)

  def __str__(self):
    return self.text
```
```python:urls.py
from django.urls import path
from . import views

urlpatterns = [
  path('<int:user_id>/<int:date_delta>/', views.index, name=index),
  # ここで date_delta 今から何日前のものを取得するかを指定します。
]
```

　このようにmodelsとurlsを定義したとき、user_idで指定したユーザーがdate_deltaで指定した日に投稿した文章をすべて取得しようとしました。

#どうしたか

　結論としてビューを以下のように書けばテンプレートにデータを送れることがわかりました。


```python:views.py
from django.shortcuts import render
from .models import Article
from datetime

def index(request, user_id, date_delta):
  date_now = datetime.datetime.now()
  wrriten_date = date_now - datetime.timedelta(days=date_delta)
  article = Article.objects.filter(user_id=user_id, menu_date__month=menu_date.month, menu_date__day=menu_date.day)
  
  context = {
    'article': article,
  }

  return render(request, 'myapp/index.html', context)
```

```html:index.html
<p>
  {{ article.1.text }}
  <!-- 注意！ article[1]としたらerrorになる -->
</p>

```

　一番困ったのはArticle.objectsのfilterメソッド条件をどのように書くかでした。
　menu_dateのあとの__ month と__ day はルックアップフィールドというもので、モデルの変数名につけると条件を加えることができます。

　ルックアップフィールドについては以下の記事を見て知りました。
　・ウェブディー株式会社/サービス/BLOG/Django フィールドルックアップの使い方
　　https://webty.jp/staffblog/production/post-1263/

　テンプレートで各データにアクセスするときは上のように " .データ番号 " とすることで各データにアクセスできます。
    

#タイムゾーンの設定

　前項のようにviewsを記述しても環境によってはうまく動作してくれません。その場合はタイムゾーンの設定を変えればうまく動作するかもしれません。

```python:setting.py

TIME_ZONE = 'Asia/Tokyo'

USE_TZ = True
```

　私の場合はsettingのタイムゾーンに関する設定を以上のように行いタイムゾーンを日本に設定したらうまく動作するようになりました。

#おわりに
　この記事が少しでも誰かの役に立ったら幸いです。
　まだプログラミングもQiitaも初心者なので色々至らぬ点が多いかもしれませんが、今後も積極的にアウトプットを続けていきたいです。
　「ここがおかしいぞ」や「もっとこうするといいよ！」といったアドバイスがございましたら、コメントしていただけると嬉しいです。

#参考文献
　・ウェブディー株式会社 / サービス / BLOG / Django フィールドルックアップの使い方
　　https://webty.jp/staffblog/production/post-1263/
ちょっとまって、そのforループめちゃくちゃ遅くない？？？

色々あって、この令和の時代にjQuery2.xで書かれたコードを読んでいました。
対象のHTMLから、要素の数だけループして特定の値を抜き出す、というごくごくシンプルなjQueryです。
シンプルなのですが、毎回DOMツリーを全探索していて、要素数が多いと遅くなりそうだったので、実際に検証した結果をメモとして残しておきます。

## 結論
結論から先に書くと、やっぱり遅かったので、高速化大事だなぁという話です。
まとめると以下です。

* ループのlengthは毎回計算しない
* 無駄にDOMツリーを全探索してはいけない
* 取得したオブジェクトはキャッシュして使いまわす
* jQueryを使わなくていいなら極力使わない

## 対象のHTML

```html
<div>
    <div class="hoge">
        <a href="#a1">リンク1</a> <!-- ★1 hrefの値を取得したい -->
    </div>
    <div class="fuga">
        なにかしらテキスト1 <!-- ★2 fugaのテキストをhrefの値とペアで取得したい -->
    </div>
</div>
<div>
    <div class="hoge">
        <a href="#b2">リンク2</a>
    </div>
    <div class="fuga">
        なにかしらテキスト2
    </div>
</div>
...
<!-- 以降、データの数だけhogeとfugaを含むdivが続く -->
```

## 対象のjQuery
```javascript
for(var i = 0; i < $(".hoge").length; i++) {
    var hoge_a = $(".hoge a")[i].href;
    var fuga_text = $(".fuga")[i].innerHTML;
}
```

ループが回るたびに、3回DOMツリー全探索とjQueryオブジェクトへの変換が行われるため、要素数が多いページだと遅くなりそうです。

## 比較対象用のコード
比較対象がないと遅いかどうかわからないので、以下の比較用のコードを書きました。なるべく元のコードと似た形で目的を達成しようとしています。

### jQueryを使ったまま改良したコード

```javascript
const target = $(".hoge"); // 取得したオブジェクトはキャッシュする
const len = target.length; // lengthは計算しておく
for (let i = 0; i < len; i++) { // eachは遅いので使わない
    let hoge_a = $(target[i]).children().prop("href"); // 全探索せずに、検索対象を絞り込む
    let fuga_text = $(target[i]).next().text();
}
```

### jQueryを一切使わないコード
もうこれjQuery使うメリット1つもねえだろと思ったので素のJavaScriptで書きました。

```javascript
const target = document.getElementsByClassName("hoge");
const len = target.length;
for(let i = 0; i < len; i++) {
    let hoge_a = target[i].firstElementChild.href;
    let fuga_text = target[i].nextElementSibling.textContent;
}
```

## 検証結果
divを1000個と100個を生成して、それぞれのコードで比較しました。自分のマシンで10回実行した平均値です。

|  対象  |  要素数1000の実行時間(ms)|要素数100の実行時間(ms)  |
|---|---|---|
|元のコード|561|10|
|改良版 jQuery使用|10|2|
|改良版 jQuery無し|1|0|

順位は大体の予想通りになりました。
高速化テクニックに関しては実際の効果の程がわかっていなかったのと、意識しないと自分でもやらかしてしまうので、試してみてよかったです。

## 参考サイト
* [某サイトに見る狂ったjQueryのソースと高速化・改善方法 \| yoshi44ever\.com](http://yoshi44ever.com/blog/insane-jquery-spa-by-ymobile/)
* [jQuery高速化！処理速度を10倍上げるテクニック20選](http://millkeyweb.com/jquery-high/)
Linuxコマンドを用いてテキストマイニング【聖書】

奈佐原顕郎氏の著作『入門者のLinux』(ブルーバックス出版)の282ページに記載されている内容を
自分でやってみる。


### ０. はじめに
彼(奈佐原顕郎氏)は以前、聖書の解析を行ったようです。
聖書の中で最もよく使われる単語は「The」で、「and」「of」「to」「that」の順なのだそうです。
本当にそうなのか、自分もやってみます。

### 1. データの取得
テキストファイル形式の聖書を探してみると、Githubにありました。
こっそりお借りします。
下中央にある「View Law」を押すと手頃なテキストデータが開きます。
Ctrl+Aで全選択し、Ctrl+Cでコピーしましょう。

[bible.txt](https://github.com/mxw/grmr/blob/master/src/finaltests/bible.txt)
![Screenshot from 2020-07-07 22-12-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/8b66c02b-bb26-80df-01a7-205cf81e32a3.png)

続いて、ターミナルを開きます(UbuntuであればCtrl+Alt+T)。

```terminal
$ cat > bible
```
として、先ほどコピーした部分をターミナルの上にペーストし、Enterを押し、Ctrl+Cで完了です。

### 2. 頻出単語の調査(テキストマイニング例)
では早速、聖書の中で最もよく使われる単語を調べます。
ターミナルにコマンドを打ち込みます。


```terminal
$ cat bible | sed 's/[,|.|:|;|"|?| ]/\n/g' | tr A-Z a-z | sort | uniq -c | sort -n -r | less
```

![result_bible.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577794/9a9567c9-5e8c-250f-c4c8-d936e9025edb.png)


「the」が64184回で、確かに頻出単語のようですね。
そして記載通り「and」「of」「to」「that」の順に多いようです。
スペースキーを押してどんどん下まで見ていきましょう。終了するときは q を押します。

### 3. メモ
『入門者のLinux』は非常にわかりやすい本でした。
【R】リスト内のTrue or False判定

#対応手順
①コード作成

#timeテーブル読み込み
繰り返し処理

#idリスト読み込み

id<-vehicle_list/時刻_pick.csv
match_table<-data.table()

繰り返し処理
data<-id file
judge<-all(data$time<0)
tmp<-data.table(id)
match_table<-rbind(match_table,tmp)
write.csv(match_table,c:/~/list/日付_match.csv
3分間ネットワーク備忘録 第８回

## 概要
引き続き[３分間ネットワーク](http://www5e.biglobe.ne.jp/aji/3min/)について、
学習の備忘録を書いていきます。


今回は、少し少ないですが、
- [第１９回](http://www5e.biglobe.ne.jp/aji/3min/16.html)
- [第２０回](http://www5e.biglobe.ne.jp/aji/3min/17.html)

について振り返っていきます。
この第１９回から、ついにこの３分間ネットワークの一番ボリュームのある、
レイヤ３である`ネットワーク層`についての内容となります。

ここからこのレイヤ３について長々と解説が続くことになりますが、
実際に内容はとても面白いですし、非常に重要な内容となります。


### ルータ
まず、レイヤ３の`ネットワーキングデバイス`である`ルータ`の話になります。
以前のレイヤ１で出てきた`ハブ`と呼ばれるものであったり、
レイヤ２で出てきた`ブリッジ`、`スイッチ`がありましたが、
これらを異なるネットワーク間に置いて、それらでデータの転送をになってもいいのでは、
と考えるかもしれませんが、実際、
`ネットワーク間の通信においてはルータを経由する`というルールがあります。

この`ルータ`は、`宛先への距離`であったり、
`使用するメディアの転送速度`、`トラフィックや信頼性`などを考慮し、
ベストとなるデータの転送経路を`ルーティング`する役割を持っています。

### TCP/IP
`TCP/IP`はネットワークを勉強するときに必ず出てくるプロトコルですが、
実際`TCP`、`IP`はそれぞれ代表的なプロトコルの名前で、`TCP/IP`はもっと多くのプロトコルからなっています。

`TCP/IP`　意外でよく知られているのは、`IPX/SPX`　であったり、`AppleTalk`です。

レイヤ３は`パケットの転送`を受け持ちますが、その際に
- 論理アドレスを決定
- 経路を決定
- ベストエフォート型転送を行う
- コネクションレス型通信（事前に「送りますよ」「いいですよ」というような連絡はなし）
を行います。


### パケット
レイヤ３は、レイヤ４から受け取ったセグメントデータに対して、
２０〜６０バイトの`IPヘッダ`を先頭につけ、データを`パケット`にして転送します。

このIPヘッダの中でも重要な`論理アドレス`である、IPアドレスについて、次回からは詳しく解説されています。


今日は時間がないのでこの辺で、


おわり。
docker19.03で最速でGPU機械学習環境を作る

#はじめに

nvidiaのGPUを使った機械学習の環境を整えたい。でも、なんか、面倒臭そう...
いえいえDockerを使えば簡単です。
下記のコマンドを使うと簡単に環境構築ができます。次に詳しく見ていきましょう。

```
docker run -v $PWD:/working -e DISPLAY=$DISPLAY --net host --gpus all --shm-size=8gb --name ml -it --workdir /working gcr.io/kaggle-gpu-images/python:v80 /bin/bash
```

# コマンド説明

短いコマンドから徐々に引数を付け加えていき説明します。

このコマンドでまず[kaggleのGPU版のイメージ](https://github.com/Kaggle/docker-python)をコンテナとして実行します。

オンラインで実行したい場合

```
docker run gcr.io/kaggle-gpu-images/python:v80
```

オフラインで実行したい場合 [参考](https://github.com/Kaggle/docker-python)

```
docker run -it gcr.io/kaggle-images/python /bin/bash
```

#オプションの説明

`-e DISPLAY=$DISPKAY` 環境変数を設定 GUIアプリケーションを実行するためにディスプレイの環境変数を設定する。
`-v $PWD:/working`　ホストとファイルを共有できる。ホストのカレントディレクトリのファイルをdocker上のworkingで操作できるようにする。
`--net host` ネットワーク設定　ホストと同じネットワークを持てるようになる。[参考](https://qiita.com/TsutomuNakamura/items/ed046ee21caca4a2ffd9)
`--gpus all` ホストのGPUをすべてコンテナ上で使えるようにする。
`--name` コンテナの名前をつける
`/bin/bash` bashを起動する。bashの見でも可能
`--shm-size 8gb` dockerの共有メモリのサイズを決定、デフォルトでは64mbで少ないので８GBとした。[参考](https://knowledge.sakura.ad.jp/5118/)
Rubyでgmailからメールを送信する

## はじめに

参加している勉強会でプログラムを書く練習課題として、rubyでメールを送るというお題があり、実施した内容を以下に記載します。

ちなみに自分が普段使っているgmailから送るプログラムになります。

制限時間がある中での課題だったので、焦りながら実施しましたが、思った以上に参考文献、ライブラリが揃っており、助けられました。

### 実施環境、必要なもの

- OS :mac
- ruby 2.6.6
- Googleアカウント

## 実施手順

### Googleアプリパスワードの取得

アプリからメール送信する際の認証には、googleアカウントのパスワードをそのまま使うのではなく、googleのアカウント設定で発行するアプリパスワードを使って認証を行います。
(パスワードをそのまま使うより、セキュリティ的におすすめな方法）

[Account settings](https://accounts.google.com/)

上記画面から、「セキュリティ」→「アプリパスワード」を選択後、アプリ：メール、デバイス（自分の場合はmac)を選択後に、生成ボタンを押すと、アプリパスワードが表示されます。

※なお、前提としてgoogleアカウントの二段階認証が有効になっている必要があります。

### ruby-gmail gemのインストール

大変ありがたいことに、rubyにはgmailを送信するためのgemがあるので、こちらを利用します。

[dcparker/ruby-gmail](https://github.com/dcparker/ruby-gmail)

```ruby
gem install ruby-gmail
```

ruby-gmail gemには単にメール送信の他に、受信メールを読んだり、編集したりといろいろ機能があって面白そう。

### 環境変数の設定(gmailアドレス、アプリパスワード）

セキュリティ観点からgmailアドレスと先に取得したアプリパスワードは、プログラムにベタ書きではなく、環境変数に設定し、プログラムで取得することにします。

```ruby
export GMAIL_ID="送信したいgmailアドレス"
export GMAIL_PASS="gmailのアプリパスワード"
```

設定した環境変数を反映させます。

```ruby
source ~/.bash_profile
```

### メール送信プログラムの作成

今回は、コマンド上で、任意の送信先アドレス、件名、本文を入力できるようにしています。

```ruby
require "gmail"

USERNAME = ENV[ "GMAIL_ID" ]
PASSWORD = ENV[ "GMAIL_PASS"]

gmail = Gmail.new(USERNAME, PASSWORD)

puts "送信先のアドレスを入力してください"
address_to = gets.chomp
puts "件名を入力してください"
title = gets.chomp
puts "本文を入力してください"
text = gets

message =
  gmail.generate_message do
    to address_to
    subject title
    html_part do
      content_type "text/html; charset=UTF-8"
      body "<p>" + text + "</p>" 
    end
  end

gmail.deliver(message)
gmail.logout
```

## 参考記事

プログラムの大部分はこちらを参考にさせていただきました。大変感謝です。

[【Ruby】Gmailアカウントでメール送信 - TakBoy's Programing Note](https://csharpmagazine.hatenablog.com/entry/2019/12/13/%E3%80%90Ruby%E3%80%91Gmail%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%A7%E3%83%A1%E3%83%BC%E3%83%AB%E9%80%81%E4%BF%A1)
【npm install --save】 をyarnで行う場合のコマンド

【npm install --save】をyarnで行う時のコマンド。

```terminal:npm
npm install @nuxtjs/dotenv --save
```
↓↓↓

```terminal:yarn
yarn add @nuxtjs/dotenv
```

こちらのコマンド早見表がとても参考になります。

[npmとyarnのコマンド早見表](https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8)
Gitを使い始める時のHTTPSでの認証情報の設定

## この記事を読むとわかること
HTTPSでGitHubリポジトリをクローンする場合、MacOSXにおいて、バージョン1.7.10以降のGitではosxkeychain資格情報ヘルパーが使える。これを使うと、OSのキーチェーンにOSのユーザーアカウントの認証情報がキャッシュされ、有効期限切れもない。これで資格情報を変更しない限り、接続のたびに認証情報の入力が不要になる。
ちなみにHomebrewを使用してGitをインストールした場合、osxkeychainヘルパーはすでにインストールされている。

## 前提条件
OSバージョン: macOS Mojave Version 10.14.6
homebrewがインストール済みであること
gitバージョン: 2.27.0

## 手順
### 1. Gitの認証情報ヘルパーがすでにインストール済みかを確認する
```
$ git credential-osxkeychain
usage: git credential-osxkeychain <get|store|erase>
```
上記のように出力されればインストール済み。
上記のような表示と違う場合はGitのマニュアルの[このページ](https://docs.github.com/en/github/using-git/caching-your-github-credentials-in-git)の手順2を実行して認証情報ヘルパーをインストールする。

### 2. グローバルcredential.helper構成を使用してosxkeychainヘルパーを使用するようGitに指示する

```
$ git config --global credential.helper osxkeychain
$
```

終わり。


## 参考情報

[Cloning with HTTPS URLs (recommended) (docs.github.com)]
(https://docs.github.com/en/github/using-git/which-remote-url-should-i-use#cloning-with-https-urls-recommended)

[Caching your GitHub credentials in Git (docs.github.com)]
(https://docs.github.com/en/github/using-git/caching-your-github-credentials-in-git)

[7.14 Git Tools - Credential Storage (git-scm.com)]
(https://git-scm.com/book/en/v2/Git-Tools-Credential-Storage)

[Getting Started with Git and GitHub (Codecademy Articles)]
(https://www.codecademy.com/articles/f1-u3-git-setup)
【Vue.js】について

本日は、参加するプロジェクトで利用する予定の[Vue.js](https://jp.vuejs.org/)について勉強をしました。
プログラミングスクールでは、主にRubyを学びましたが、[Vue.js](https://jp.vuejs.org/)についての理解は低く、JavaScriptが使いやすいくらいなのかなとの認識でした。

## Vue.jsとは

- UI(ユーザーインターフェース)を構築するためのJavaScriptフレームワーク
- MVVMモデル型である
- SPA開発ができる
- 記述を少なく済ませることができる

こんな感じです。

## Vue.jsのメリット

- 他のプログラミング言語と比べて学習コストが低い
- MMVVMモデル型のため、レスポンスが早い
- DOMを操作するコード量を減らすことができるため、開発スピードが早くなる

まだガイドを読み終えていないので、他にもたくさんあると思いますが、今日１日コードを打ったりガイドを読んでみた感じはこの辺りかなと思います。

実際にガイドで勉強しながら書いてみたコードが以下です。
HTMLファイルに作成するだけで動作します。

```vuejs:veu.html
  <!DOCTYPE html>
  <html lang ="ja">
    <head>
      <meta charset="UTF-8">
      <title>Vue test</title>
    </head>
    <body>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13"></script>
      <div id= "watch-example">
        <p>
          yes/no で回答するので、質問をどうぞ！
          <input v-model="question">
        </p>
        <p>{{ answer }}</p>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
      <script>
        var watchExampleVM = new Vue({
          el: '#watch-example',
          data: {
            question: '',　// デフォルトの質問は空白
            answer: '質問受付中です^^' // 回答待ち中の質問
          },
          watch: {
            // この関数は　質問が変わる毎に実行される。
            question: function (newQuestion, oldQuestion) {
              this.answer = 'あなたが入力しています。'
              this.debouncedGetAnswer()
            }
          },
          created: function (){
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
            // _.debounce はコストの高い処理の実行を制御するためのlodash の関数
            // この場合、yesno.wtf/apiへのアクセスすべきか制限するために、
            // ユーザー入力が終わるのを待ち ajax リクエストを実行している。
          },
          methods: {
            getAnswer: function () {
              // もし質問の最後に?が入っていない場合の処理
              if (this.question.indexOf('？') === -1) {
                this.answer = '質問は最後に？を入れてください。'
                return
              }
              // 最後に？が入っていた場合、処理に移行する
              this.answer = '考え中です、お待ちください...'
              var vm = this
              axios.get('https://yesno.wtf/api')
              .then(function (response) {
                vm.answer = _.capitalize(response.data.answer)
              })
              .catch(function (error) {
                vm.answer = 'APIにアクセスできませんでした' + error
              })
            }
          }
        })
      </script>
    </body>
  </html>
  
```

質問を入れたら[Yes/No]で回答をしてくれる単純な作りですが、HTMLファイルのこの記述量で動作するのはすごいと思いました。

## 勉強してみた所感
Vue.jsのガイドを勉強してるだけでも、感覚的に操作ができるようになってきたので、楽しいと感じられるようになりました。

非同期コンポーネントの理解を深めていけば、実際の業務でも役に立ちそうな気がしてきたので、引き続き理解を深めていこうと思います。
Userform.ListBox.Columnでメモリ不足エラーを回避できるケース

#要点
・VBAの動的配列は最終要素のみ可変だから、2次元であれば "横長" の表になる。`.List`プロパティに横長配列をセットしようとすれば、行⇔列変換のプロセスを経る必要があり、そこで一時的にメモリが食われる。サイズの大きな配列だと、メモリ不足エラーが返る。
・横長配列をそのまま`Userform.ListBox.Column=array`とセットすれば、メモリの心配なく "縦長" で表示してくれる。

##補足
・ADODB.RecordSetの`.GetRows`で返される配列も "横長"。ここでも`.Column`プロパティが便利。

・配列を`.Column`プロパティでセットしても、`.List`プロパティは引き続き機能する。例えば配列要素を`ListBox.List(ListBox.ListIndex)`で取ることができる（そもそも`.ColumnIndex`プロパティは無い）。

・`ListBox1.List=array`でセットした配列を`array=ListBox1.Column`で再代入すると、転置されている（逆も同様）。Excel関数を使った`Application.WorksheetFunction.Transpose`の転置にはクセがあって、"縦長1列" の2次元配列を転置すると "横長1行" の1次元配列となって自動的に次元が下がってしまうが、`ListBox`の`.List`と`.Column`間では2次元のまま。
Vuetifyのv-selectにてtextの値をカスタマイズする方法

# はじめに

Vuetifyのv-selectでは、デフォルトのitemsの仕様は以下となっています

```
{
  text: string | number | object
  value: string | number | object
}
```

textの値をバインディングしたオブジェクトから値を取り出した後、加工して設定します


# 対処法

itemsとして、以下のオブジェクトを使用する場合のコード例です

```
{
  [
    { id: 1, lastName: "test", firstName: "taro" },
    { id: 2, lastName: "test", firstName: "jiro" },
    { id: 3, lastName: "test", firstName: "saburo" },
    { id: 4, lastName: "test", firstName: "shiro" },
  ]
}
```

textにfirstName + lastName、valueにidを使用する場合、v-selectのitem-valueとitems-textにitemsの対応するキーを指定します。ここでは以下のようにします

- value : id
- text  : firstName + lastName


```
<v-select
  v-model="id"
  label="*氏名"
  :items="items"
  item-value="id"
  :item-text="item => item.lastName + ' ' + item.firstName"
  required>
</v-select>
```


# 参考
[Customizing item-text in v-select](https://stackoverflow.com/questions/50531864/customizing-item-text-in-v-select)
19H2対応版:chocolateyをセットアップし、日本語設定を行ったWindowsサンドボックスを立ち上げる

とっても便利なんだけどなかなか癖があって扱いづらい(当社比)Windowsサンドボックスを、ちょっとだけ扱いやすくする起動用wsb。

あまり使い方の例がないのもあって、ちょっと敷居が高い感じのあるこのファイル形式、作例も兼ねてchocolateyをセットアップするwsbファイルを作ったので、ここに書きます。

なお、ファイル情報だけのものはこちらにアップしましたので、詳細が要らないという方は以下をご覧ください。

* [19H2対応版:chocolateyとMicrosoft TeamsとChromium EdgeをセットアップしUI設定を日本語に設定したWindowsサンドボックスを立ち上げる\(全ファイルを同じフォルダにおいてね\)](https://gist.github.com/TakamiChie/98902ef2c4ffb21ab78841a530f151f7)

# ファイルを作成する
以下のファイル群を作成するフォルダは`sandbox`とします。このフォルダはそのままサンドボックスからアクセスできるようになるため、フォルダ名は変えないようにしてください。
## wsbファイル

まずはwsbファイル。wsbファイルには相対パス表記や環境変数が使えない(こちらはUserVoiceなどで上がっているらしい)のですが、それは嫌なので後述するPowerShellスクリプトで書き換えます。

```xml:template.wsb
<Configuration>
  <VGpu>Default</VGpu>
  <Networking>Default</Networking>
  <MappedFolders>
    <MappedFolder>
      <HostFolder>%CURRENT%</HostFolder>
      <ReadOnly>true</ReadOnly>
    </MappedFolder>
  </MappedFolders>
  <LogonCommand>
    <Command>C:\Users\WDAGUtilityAccount\Desktop\sandbox\run.cmd</Command>
  </LogonCommand>
</Configuration>
```

## 書き換え用PowerShellスクリプト

wsbファイルの中の%CURRENT%という語句を実際にスクリプトがあるフォルダ名に置き換え、そのファイルをtempフォルダに保存して実行します。

```powershell:launch.ps1
Set-Content -Path "$env:TEMP\temp.wsb" -Value (Get-Content "$PSScriptRoot\template.wsb" | % { $_ -replace "%CURRENT%", $PSScriptRoot })
Start-Process $env:TEMP\temp.wsb -Wait
Remove-Item "$env:TEMP\temp.wsb"
```

## サンドボックス環境下で実行するバッチファイル

そして最後に、サンドボックス環境下で実行し、各種環境設定を行うバッチファイル。

これですが、どうも厄介なことに、**ファイル名を単体で記載しないと動かない**模様。`cmd.exe C:\Users\WDAGUtilityAccount\Desktop\sandbox\run.cmd`などではなく、ファイル名だけで起動する必要があるようです(Microsoftのサンプルではそんなこと書いてないみたいなんですけどねえ)。

```bat:run.cmd
rem chocolateyをインストールする
"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

rem Teamsをインストールする
choco.exe install -y -f microsoft-teams
rem Chromium Edgeをインストールする
choco.exe install -y -f microsoft-edge
rem 必要があればここに他のインストールコマンドを書き足す
rem UI設定を日本語にする
powershell Set-WinUserLanguageList -Force ja-JP
rem カレンダー設定を日本語にする
powershell Set-Culture -CultureInfo ja-JP
```

実際本当にコメントを書いてしまうと文字化けを起こしたりして面倒なので、コメントは実際には書かない方がいいです(たぶんShift-JISで書けば問題はないのですが)。

「必要があればここに他のインストールコマンドを書き足す」の行に、自分が環境で使用するツールを書き足せば、もちろんそのアプリもインストールしてくれますので、お好みの環境構築がかなり楽になるのではないでしょうか？

ここまでの処理でだいたい、PowerShellファイルを起動してからサンドボックスの構成が完了するまで2分半ほどかかりましたが、毎回これと同じことを手作業でやることを考えると、結構楽になるのではないかなと思います。

# まとめ

Windows 10 Proに割とひっそり(？)追加された機能、Windowsサンドボックス。

個人的には、書籍やWebメディアに掲載するためのスクリーンショット撮影(なるべくPCの出荷状態に近い状態で撮影したい)とか、アプリの出荷前テスト(なるべくPCの出荷状態に近い形で動作確認したい)に、非常に重宝しています。

とはいえ環境構築がちょっと面倒くさい ということきはこのへんを参考にして構成ファイルを作っておくと良いんじゃないでしょうか？

※ なお、Windows 10 2004 Verでは構成ファイルに使えるタグがちょっと増えています。このままの構成では動かない可能性があるのでご注意ください。
ゼロから始めるLeetCode Day79「1282. Group the People Given the Group Size They Belong To」

# 概要

海外ではエンジニアの面接においてコーディングテストというものが行われるらしく、多くの場合、特定の関数やクラスをお題に沿って実装するという物がメインである。

どうやら多くのエンジニアはその対策としてLeetCodeなるサイトで対策を行うようだ。

早い話が本場でも行われているようなコーディングテストに耐えうるようなアルゴリズム力を鍛えるサイトであり、海外のテックカンパニーでのキャリアを積みたい方にとっては避けては通れない道である。

と、仰々しく書いてみましたが、私は今のところそういった面接を受ける予定はありません。

ただ、ITエンジニアとして人並みのアルゴリズム力くらいは持っておいた方がいいだろうということで不定期に問題を解いてその時に考えたやり方をメモ的に書いていこうかと思います。

[Leetcode](https://leetcode.com/)

Python3で解いています。

[ゼロから始めるLeetCode 目次](https://qiita.com/KueharX/items/6ee2502c3b620c795b70)

前回
[ゼロから始めるLeetCode Day78 「206. Reverse Linked List」](https://qiita.com/KueharX/items/f408439e5d7a8bab1e8f)

今はTop 100 Liked QuestionsのMediumを優先的に解いています。
Easyは全て解いたので気になる方は目次の方へどうぞ。

[Twitter](https://twitter.com/kueharx)やってます。

**[技術ブログ](https://kueharx.blogspot.com/)始めました！！**
技術はLeetCode、Django、Nuxt、あたりについて書くと思います。**こちらの方が更新は早いので**、よければブクマよろしくお願いいたします！


# 問題
[1282. Group the People Given the Group Size They Belong To](https://leetcode.com/problems/group-the-people-given-the-group-size-they-belong-to/)
難易度はMedium。

問題としては、`0`から`n - 1`までのIDを持つ人が`n人`存在し、それぞれはちょうど1つのグループに所属しています。各人が所属するグループのサイズを示す長さ`n`の配列`groupSizes`が与えられた場合、グループの数と、各グループに含まれる人の`ID`を返します。

任意の解を任意の順番で返すことができ、`ID`についても同様です。また、少なくとも一つの解が存在することが保証されています。

>Example 1:

>Input: groupSizes = [3,3,3,3,3,1,3]
Output: [[5],[0,1,2],[3,4,6]]
Explanation: 
Other possible solutions are [[2,1,6],[5],[0,4,3]] and [[5],[0,6,2],[4,3,1]].

>Example 2:

>Input: groupSizes = [2,1,3,3,3,2]
Output: [[1],[0,5],[2,3,4]]


＃解法

```python
class Solution:
    def groupThePeople(self, groupSizes):
        ans,group,next_group = [],[],[]
        for i,j in enumerate(groupSizes):
            group.append((j,i))
        group.sort()
        for length,index in group:
            next_group.append(index)
            if len(next_group) == length:
                ans.append(next_group)
                next_group = []    
        return ans
# Runtime: 64 ms, faster than 75.60% of Python online submissions for Group the People Given the Group Size They Belong To.
# Memory Usage: 12.7 MB, less than 59.40% of Python online submissions for Group the People Given the Group Size They Belong To.
```

最初に`groupSizes`のインデックスと値を入れ替え用意した`group`に入れ、ソートします。

そしてソートした長さとインデックスを取得して長さを`next_group`に追加し、毎回`group`の長さと`next_group`の長さが同値であるかをチェックし、仮に同値であれば返す予定のansに追加、終了です。

その`ans`に追加した後に`next_group`を初期化しておかないと以下のようになる点に注意してください。

```python
Input
[3,3,3,3,3,1,3]
Output
[[5,0,1,2,3,4,6],[5,0,1,2,3,4,6]]
Expected
[[5],[0,1,2],[3,4,6]]
```

Acceptanceが高いので何かあるのかと思いましたが、特に何もなかったですね。

では今回はここまで。お疲れ様でした。
GASでスプレッドシートのシート名とURLの一覧を作成する

# はじめに
スプレッドシートのシートが多数ある時に、シートの移動が面倒なため、
目次として。シート名とシートURLの一覧をつくりたい。

# まずは全コード
``` javascript
function hyperLink() {
    // スプレッドシート内の全シート取得
    let sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
    // スプレッドシートのID取得
    let spreadsheetID = SpreadsheetApp.getActiveSpreadsheet().getId();

    // ハイパーリンク文字列の配列
    let hyperLinkList = [];
    for(let i=0; i<sheets.length; i++) {
        // シートのID取得
        let sheetId = sheets[i].getSheetId();
        // シートの名前取得
        let sheetName = sheets[i].getSheetName();
        // シートのURLからハイパーリンク文字列を組み立て
        let url = "https://docs.google.com/spreadsheets/d/" + spreadsheetID + "/edit#gid=" + sheetId;
        hyperLinkList[i] = [ '=HYPERLINK("' + url + '","' + sheetName + '")' ];
    }

    // 選択中のシートのA1セルにハイパーリンク文字列を入れる
    let sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

    // getRange(row, column, numRows, numColumns) 
    let range = sheet.getRange(1, 1, hyperLinkList.length, 1);
    range.setValues(hyperLinkList);
}
```


# コード説明
## 1. スプレッドシート内の全シート取得
[getSheets()](https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet#getSheets())

``` javascript
// The code below logs the name of the second sheet
var sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
if (sheets.length > 1) {
  Logger.log(sheets[1].getName());
}
```

#### 戻り値
Sheet[] — An array of all the sheets in the spreadsheet.
[Class Sheet](https://developers.google.com/apps-script/reference/spreadsheet/sheet)



## 2. スプレッドシートのID取得
[getId()](https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet#getId())

``` javascript
// The code below logs the ID for the active spreadsheet.
Logger.log(SpreadsheetApp.getActiveSpreadsheet().getId());
```

#### 戻り値
String — The unique ID (or key) for the spreadsheet.



## 3. シートID取得
[getSheetId()](https://developers.google.com/apps-script/reference/spreadsheet/sheet#getsheetid)

``` javascript
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
Logger.log(sheet.getSheetId());
```

#### 戻り値
Integer — an ID for the sheet unique to the spreadsheet



## 4. シート名取得
[getSheetName()](https://developers.google.com/apps-script/reference/spreadsheet/sheet#getsheetname)

``` javascript
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheets()[0];
Logger.log(sheet.getSheetName());
```

#### 戻り値
String — the name of the sheet


# 参考
[【GAS】スプレッドシート内の全シートへのリンク一覧を作る](https://qiita.com/okNirvy/items/d1a2f4918cff8e63dcac)
ｊｓの配列の操作関数　ふえてて　怯えた

jsの配列操作は、ほとんど、毎回googleにたよってるというか、それしかない。

最近、思ったのだが、どんだけ　操作関数が増えてるんだかw

お、これも
お？　ここも

とか　思うけど

最後みたとき

え？
なにげ、スッキリ満足感たっぷりなのだが、きがついてみれば

[...Array(4).keys()]

おいｗこれ

[0,1,2,3]

でいいだろｗ　的なとこがあるｗ

そんだけ贅沢フルセットな関数群であった。ｗ
AWSのリソースイベントを検知する(Amazon EventBridge)

今回は「iam操作を検知」してみます。
何度か「ap-northeast-1」で試してみても上手くいかなかったんですが以下を読む限りiamのイベントは「us-east-1」のEventBridgeにカスタムイベントを追加しないと取れないとのことでした。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/iam-cloudwatch-sns-rule/

EventBridgeの設定
![iam-bdg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/ae7735ea-ea7e-b498-c309-5c26c210b200.png)

検知後Lambdaのログ出力
![cwl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110457/b72fde28-4b72-c587-a52b-234611d3e50e.png)

重要度の高いイベントを検知／適宜監視していきたい。
ParsingとStoringって何 

##Parsingって何
Parsing = Read ＋ Convert
Libraryにあるテキストを読んでRubyで扱えるようにオブジェクトに変えること

##Storingって何
データファイルに情報を送ること
Storing is to put information into a data file.
パソコンが壊れてもアクセスできる！（クラウド的な？）
This way you can access your data even when someone throws your laptop from a window😂.
Vue CLIインストール時のエラー（EEXIST: file already exists, symlink ~）

#エラー発生状況

nodeバージョン：v12.16.3
npmバージョン：6.14.4

Vue CLIをインストールするため

```
npm install -g @vue/cli
```
を実行したところ、

```
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  [Error: EACCES: permission denied, access '/usr/local/lib/node_modules'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
```
と怒られた。

どうやらアクセス権限を拒否されたみたいなので、
コマンドの先頭に**sudo**をつけて

```
sudo npm install -g @vue/cli
```
を実行したところ、

```
npm ERR! code EEXIST
npm ERR! syscall symlink
npm ERR! path ../lib/node_modules/@vue/cli/bin/vue.js
npm ERR! dest /usr/local/bin/vue
npm ERR! errno -17
npm ERR! EEXIST: file already exists, symlink '../lib/node_modules/@vue/cli/bin/vue.js' -> '/usr/local/bin/vue'
npm ERR! File exists: /usr/local/bin/vue
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.

npm ERR! A complete log of this run can be found in:
```
と、さっきとは違うエラーが出た。

#解決策
symlinkがどうちゃらこうちゃらなってるみたいなので色々ググって解決策を試してみたのですが一向に直らず。
でもnpmがおかしいんだろうなとは思っていたのでとりあえず

```
npm install -g npm
```
でnpmをアップデートし、
再度sudo無しで

```
npm install -g @vue/cli
```
を実行したところ、
なんとインストールできました。
足踏みしながらyoutubeの動画を指定した秒ずつコマ送り表示していくPGM

<h3>足踏みしながらyoutubeの動画を指定した秒ずつコマ送り表示していくPGM</h3>
<hr>

カメラを起動し、画像内の差分が一定時間以上発生したときに前進と判定し、指定したyoutubeの動画を指定秒(デフォルト1.0秒)ずつコマ送りしていくPGMを作成しました。

PGMのgithubURL:https://github.com/NanjoMiyako/walkWithYoutube

サンプルページURL:https://nanjomiyako.github.io/walkWithYoutube/

<hr>
使い方
1.再生動画IDの欄にコマ送りしたいyoutubeの動画IDを入力
2.コマ送り時の秒数を入力(デフォルト1.0秒)
3.「再生動画のセット」ボタンをクリック
4.「ビデオ開始」ボタンをクリック
5.「歩きながらyoutube再生」ボタンを2回クリック(なぜか1回だけだと動かない...orz)
6.ここでそのままだと再生されてしまうのでyoutubeのプレーヤー制御コントロールから一時停止
の状態にする(自動的に一時停止させる方法がわからなかった...orz)
7.この状態からカメラ起動しながら動いていればコマ送り、動かなければ一時停止の状態になります。

<hr>
サンプル画像

![sampleImage1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412430/4830141f-adbd-e74c-e1a5-f9a020b5137a.png)
よく使うWindowsショートカットキー

## 全般

```Shift + Windows + s``` 範囲を指定してキャプチャ

```Alt + Tab``` ウインドウ切り替え

```Windows + m``` 全て最小化
```Windows + d``` デスクトップ表示/切り替え
```Windows + l``` 画面のロック

## ファイル操作
```Alt + Enter``` ファイルのプロパティ
```F2``` ファイルのリネーム

## ウインドウ操作
```Alt + Space``` コントロールメニュー表示
```Alt + Space → m``` ウインドウをキーボードで移動
```Alt + Space → s``` ウインドウサイズをキーボードで変更

```Windows + ↑``` 最大化
```Windows + ↓``` 最大化から標準へ戻す
```Windows + ↓``` 最小化
```Windows + ↑``` 最小化から標準へ戻す
```Windows + ←``` 画面の左半分に最大化/切り替え
```Windows + →``` 画面の右半分に最大化/切り替え

```Ctrl + w``` ウインドウ内部の当該タブを閉じる

## マルチモニタ操作
```Windows + p``` 画面の出力先切り替え

```Shift + Windows + ←``` ウインドウを左のディスプレイに移動
```Shift + Windows + →``` ウインドウを右のディスプレイに移動

## エクスプローラ操作
```Windows + e``` エクスプローラ起動

```Alt + ←``` 戻る
```Alt + →``` 進む
```Alt + ↑``` 上の階層に移動
```Alt + d``` アドレスバーにフォーカス
```Alt + 2``` ```Ctrl + Shift + n``` 新しいフォルダを追加

## ファイル名を指定して実行
```Windows + r``` ファイル名を指定して実行ダイアログを表示

```inetcpl.cpl``` インターネットのプロパティ（プロキシ設定等）

```compmgmt.msc``` コンピュータの管理
```devmgmt.cpl``` デバイスマネージャ

```ncpa.cpl``` ネットワーク接続
```desk.cpl``` 画面のプロパティ
```services.msc``` サービス
```appwiz.cpl``` アプリケーションの追加と削除
```sysdm.cpl``` システムのプロパティ

```mstsc``` リモートデスクトップ接続 
```notepad``` メモ帳
```calc``` 電卓
```mspaint``` ペイント

```shutdown /r``` Windows再起動
```shutdown /s``` Windowsシャットダウン
grep時にgrepが出ないようにgrepする

プロセス確認時に任意の文字列を含んだプロセスを抽出するとき

```
ps aux | grep target
```

とすると

```
mochimochi 18277  248  1.4 1122692 367144 ?      Sl   21:18   0:39 ./target_process
mochimochi 18294  231  1.5 1253764 373160 ?      Sl   21:18   0:34 ./target_process
root     18565  0.0  0.0 112828   972 pts/0    S+   21:19   0:00 grep --color=auto target
```

コマンド叩いた自分自身もリスト化されるのが微妙に邪魔
なのでvオプション（除外）を使用する


```
ps aux | grep target | grep -v grep
```

目的の文字列を含みつつgrep除外対象としてgrepを指定する

```shell
mochimochi 18277  248  1.4 1122692 367144 ?      Sl   21:18   0:39 ./target_process
mochimochi 18294  231  1.5 1253764 373160 ?      Sl   21:18   0:34 ./target_process
```
Kali Linux 2020.2にVSCodeを入れてみた

触ったことなかったので、先日までカイル リナックスと呼んでいたおバカです。

Kali Linux にも、普段使い慣れているIDE（いや、そんなに使ったことないからこそ尚更）Visual Studio Code を入れたいと思いました。

以下、https://code.visualstudio.com の [Visual Studio Code on Linux](https://code.visualstudio.com/docs/setup/linux) を参照してみました。

## 公式APTパッケージでインストール
よく考えると、Kali Linuxは Debianベースのディストリビューション。
debでインストールできるじゃん。

### 前処理
　いくつか必要となるパッケージをインストールします。

  * curl<br>wgetで取得するなら必要ないです。
  * gpg<br>説明いらない暗号化ソフト
  * software-properties-common<br>```add-apt-repository```コマンドは、標準ではインストールされていませんので、```software-properties-common```パッケージをインストールする
  * apt-transport-https<br>```deb```コマンドは、パッケージ取得元としての指定で```https```だと対応していないので、このパッケージが必要
 
```bash
sudo apt update && sudo apt install curl gpg software-properties-common apt-transport-https 
```


### Microsoft GPGキーのインポート
　Microsoft GPGキーをKali Linuxにインポートします。

```bash
curl -sSL https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
```

 wgetで取得するなら

```bash
wget -qO - https://packages.microsoft.com/keys/microsoft.asc | sudo apt-key add -
```



### VS CodeのAPTリポジトリの追加
VS CodeのAPTリポジトリをKali Linuxに追加します。

```bash
echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" | sudo tee /etc/apt/sources.list.d/vscode.list
```

### Visual Studio Codeをインストール
Kali LinuxにVisual Studio Codeをインストールします。

```bash
sudo apt update && sudo apt install code
```
※パッケージ名は```vscode```とかじゃないんですよね。

```bash
$ sudo apt info code/stable
Package: code
Version: 1.46.1-1592428892
Priority: optional
Section: devel
Maintainer: Microsoft Corporation <vscode-linux@microsoft.com>
Installed-Size: 271 MB
Provides: visual-studio-code
Depends: libnotify4, libnss3 (>= 2:3.26), gnupg, apt, libxkbfile1, libsecret-1-0, libgtk-3-0 (>= 3.10.0), libxss1
Conflicts: visual-studio-code
Replaces: visual-studio-code
Homepage: https://code.visualstudio.com/
Download-Size: 62.6 MB
APT-Manual-Installed: yes
APT-Sources: https://packages.microsoft.com/repos/vscode stable/main amd64 Packages
Description: Code editing. Redefined.
 Visual Studio Code is a new choice of tool that combines the simplicity of a code editor with what developers need for the core edit-build-debug cycle. See https://code.visualstudio.com/docs/setup/linux for installation instructions and FAQ.

```

#### スクリーンショット

VisualBox上のKali Linuxの画面です。画像のVS Codeは日本語パック入れてます。

![スクリーンショット 2020-07-07 21.18.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/490554/ddd84506-dad1-7da1-b969-bca214a20b2a.png)