OmniAICreator/Qiita-1.07M huggingface dataset:
既存のAngularプロジェクトにAngular Elementsを導入する

# はじめに
メモ書き程度。
Github pageで使うように出力先は `docs` になっているので注意。

# プロジェクトにAngular Elements用のモジュールを生成する
```
ng g module custom-element/custom-element
```
生成されたmoduleを以下のように変更

```ts:custom-element.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
  ],
  entryComponents: []
})

export class CustomElementModule {}
```

# Moduleにカスタムエレメントにするコンポーネントの作成
```
ng g component custom-Element/hoge-fuga/hoge-fuga -v Native
```
先程作成した `custom-element.module.ts` の `entryComponents` に作成したコンポーネントを追加し、カスタムエレメントのセレクターを追加する。

```ts:custom-element.module.ts
import { createCustomElement } from '@angular/elements';

...

import { HogeFugaComponent } from './hoge-fuga/hoge-fuga.component'

...

export class CustomElementModule {
  constructor(private injector: Injector) {
    const element = createCustomElement(HogeFugaComponent, { injector });
    customElements.define('app-hoge-fuga', element);
  }

  ngDoBootstrap() { }
}

```

# Angular Elements用のビルド設定を追加
tsConfigを作成する。

```json:tsconfig.element.json
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/app/custom-Element/custom-element.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}
```

`angular.json` の　`projects > architect` に以下を追加する。

```json:angular.json
"element": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "docs/elements",
    "main": "src/app/custom-Element/custom-element.ts",
    "index": "src/index.html",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.element.json",
    "aot": true,
    "assets": [],
    "styles": [
      "src/styles.scss"
    ],
    "scripts": []
  },
  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "none",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ]
    }
  }
}
```

普通のビルド設定と変わらないので適宜変更する。

# ビルド用のコマンドを追加する

```json:package.json
...
scripts: {
  ...
  "build:element": "ng run プロジェクト名:element:production --output-hashing=none && cat docs/elements/{runtime,polyfills,main}.js > docs/elements/hoge-element.js"
}
...
```

# 使い方
```html:何かしら.html
<body>
  <app-hoge-fuga></app-hoge-fuga>
  <script src="hoge-element.js"></script>
</body>
```

# 参考
https://mae.chab.in/archives/60134
https://winsmarts.com/getting-started-with-angular-elements-1bbdf2e748a6
error MSB3073 は コマンドの構文が誤っています。

# だいたいパスのマクロで間違えている説

結論から書くとパス系、ファイル名系のマクロは、ダブル（シングル）クォーテーション`"$(...)"`で囲みましょう。

## `copy`コマンドと`$(TargetPath)`マクロで例えます

次のようにクォーテーションで囲っていない場合、エラーになる可能性があります。

```:マクロが置換される前
copy $(TargetPath) C:\Test\
```

`$(TargetPath)`マクロは実際のビルド出力先のフルパスに置き換えられます。フルパスを仮に`C:\foo bar`とします。
下記にマクロがフルパスに置き換わった例を書きます。

```bat:マクロが置換された後（動作しません）
copy C:\foo bar C:\Test\
```

`copy`コマンドに限った話ではありませんが、パスにスペース文字が含まれるとコマンドとしての意味が変わってきます。結果コマンド構文エラーになります。

```bat:基本的な書き方👍
rem 書式: copy <送り側> <受け側>
rem                   ^ (スペース（空白）文字で区切ることで「送り側」と「受け側」を認識する)
rem 細かいオプションは省いてますが、スペース文字ひとつで意味が変わります

copy "$(TargetPath)" "C:\Test\"
```

大事なことなので繰り返しますが、パスは**クォーテーション`"$(...)"`で囲みましょう**。

* [MSBuild のコマンドとプロパティの共通マクロ](https://learn.microsoft.com/ja-jp/cpp/build/reference/common-macros-for-build-commands-and-properties)

# 【おまけ】`rename`のワナ

```bat:👎
rename "C:\Test\$(TargetFileName)" "C:\Test\$(TargetFileName).old"
```

？？？💢
これにはちょっと引っかけられました。

`rename`のヘルプは次のようになってます。

```
RENAME [ドライブ:][パス]ファイル名1 ファイル名2
REN [ドライブ:][パス]ファイル名1 ファイル名2

ファイル名2 には新しいドライブもパスも指定できないので注意してください。
```

もうお分かりですよね。

```bat:👍
rename "C:\Test\$(TargetFileName)" "$(TargetFileName).old"
```

素直に`move`コマンドに切り替えたほうが良い説ある…。
USB-LANアダプタがVMware上のUbuntsuで認識できない・・・

プログラミングではないのですが、仮想マシン環境でのUbuntsu上でUSB-LANを使おうとして、単純ミスでハマってしまったので、書き起こしておこうと思います。

＜環境＞
ホストOS：Windows10pro 64bit
仮想化ソフト：VMware Workstation 15 Player
ゲストOS：ubuntsu18.04LTS
USB-LAN：Buffalo　LUA4-U3-AGTE-BK

＜症状＞
USBデバイスを認識するアイコン上では、USB-LANが、ASIX　AX88179と表示されます。
ゲストOSに接続を試みると、以下のダイアログが表示されます。
![VM_Ubuntsu_USB_NG01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542103/1100a97b-cdf1-1d99-f28b-765d801b354c.png)
![VM_Ubuntsu_USB_NG02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542103/ebfdb6e9-aca0-4c32-09bd-8ae1ce76a24c.png)

lsusbコマンドで、USBの認識状況を見てみると、AX88179は存在しません。

```
$: lsusb
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 002 Device 002: ID 0e0f:0002 VMware, Inc. Virtual USB Hub
Bus 002 Device 003: ID 0e0f:0003 VMware, Inc. Virtual Mouse
Bus 002 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
```

＜結論＞
使用したUSB-LANは1000Base-T対応で、USB3.0で動作します。
仮想マシン設定で、USBコントローラのUSB互換性をUSB3.0以上にしなければなりませんでした。
USB互換性は、デフォルト値がUSB2.0となっていました。
ポータブルHDDなどUSB3.0を使用していると同じ現象になると思います。

![VMware_setup.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542103/dcaad249-5ba4-70ff-9ef4-a3298031cd1a.png)

lsusbコマンド結果
正しく認識されました。

```
$: lsusb
Bus 004 Device 002: ID 0b95:1790 ASIX Electronics Corp. AX88179 Gigabit Ethernet
Bus 004 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 003 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 002 Device 002: ID 0e0f:0002 VMware, Inc. Virtual USB Hub
Bus 002 Device 003: ID 0e0f:0003 VMware, Inc. Virtual Mouse
Bus 002 Device 001: ID 1d6b:0001 Linux Foundation 1.1 root hub
```
Visual Studio InstallerのSetup Projectでunder source code control and is not checked outと言われた時の対処

# 概要

過去から引きずってきたVisual Studio Installerを使っているプロジェクトに改修をいれ、いざInstallerを作成しようとVersionをアップデートすると、

```Text
The command you are attempting cannot be completed because the file '***.vdproj' is under source code control and is not checked out.
```

などと言われてVersionが変化しない時の解決法

# 前提

- 過去にTFSでバージョン管理していた
- 現在はgitで管理
- 元はVS2010、現在VS2017

# 解決した方法

vdprojを開き、

```
"SccProjectName" = "8:SAK"
"SccLocalPath" = "8:SAK"
"SccAuxPath" = "8:SAK"
"SccProvider" = "8:SAK"
```

となっている箇所を、

```
"SccProjectName" = "8:"
"SccLocalPath" = "8:"
"SccAuxPath" = "8:"
"SccProvider" = "8:"
```

とした(`SAK`を消した)。
[PHP on Windows] composer をインストーラから導入、プロキシ関連エラーが出たら手入力指定で回避できるかも

#はじめに
企業内プロキシ配下の Windows10 に XAMPP + Composer を導入しました。
Composer-setup.exe から既定の設定でインストールしたとき、次のエラーで失敗しました。

>The "https://getcomposer.org/versions" file could not be downloaded: SSL operation failed with code 1. OpenSSL Error messages: error:1408F10B:SSL routines:ssl3_get_record:wrong version number Failed to enable crypto failed to open stream: operation failed Retrying...

エラーの原因はさまざまあるかもしれませんが、この現象を回避して無事インストールできたので一例として共有します。

##環境
- Windows 10 Pro（プロキシ配下）
- [XAMPP](https://www.apachefriends.org/jp/index.html) 7.4.8
- [Composer](https://getcomposer.org/) 1.10.9

#回避策
Composer-setup.exe インストーラーのウィザード画面で初期設定される、レジストリから読み出したプロキシ設定を、手入力したものへ変更します。
具体的には、Proxy Settings の画面で...

1. Ignore settings from registry にチェックを入れます。Enter proxy url の初期設定が消え、Use a proxy...のチェックも消えます。
2. Use a proxy server to connect to internet にチェックを入れます。Enter proxy url へ入力可能になります。
3. Enter proxy url へプロキシサーバー情報を手入力します。（例 http://proxy.example.com:3128/）
4. "Next >" で次の画面に進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100206/8b9ec919-a9b3-9553-bc7a-4e04fc3e5961.png)

以上です
競技プログラミング練習記 No.50【ABC112練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC112](https://atcoder.jp/contests/abc112)を解きました。
4完です！
4完ですが、D問題はコンテスト時間を超えて解きました。悔しい。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A |  1min |-|  7ms|
| B |  3min |-| 12ms|
| C | 43min |全探索| 16ms|
| D | 75min |約数|  6ms|

# まとめ
先にまとめを載せます。これ自体は最後に書いてます。

`tuple`は2つ以上の要素をまとめて管理したいときに便利です。
演算子のオーバーロードのような操作なしでsortもできます。


## A - Programming Education

```c++
  int n;
  cin >> n;
  if (n == 1)
  {
    cout << "Hello World";
    return;
  }
  int a, b;
  cin >> a >> b;
  cout << a + b;
```
`N`が`1`の時は出力をして早期returnです。
`N`が`2`の時は追加の入力を受けとって出力しました。
`N`は`1`か`2`の2通りなので、`else`句などは必要ありません。

## B - Time Limit Exceeded

``` c++
  int n, t_in, c, t;
  cin >> n >> t_in;
  int ans = 100000;
  for(int i = 0; i < n; ++i)
  {
    cin >> c >> t;
    if (t <= t_in) ans = min(ans, c);
  }
  if (ans == 100000) cout << "TLE";
  else cout << ans;
```
もらった入力が`T`以内であれば答えを更新します。
過去や未来の入力は影響しないので、逐次処理できますね。

答えが一度も更新されていなければ`TLE`との判断をします。

## C - Pyramid

``` c++
ll calcDiff(ll cx, ll cy, ll x, ll y)
{
  return abs(x - cx) + abs(y - cy);
}

void solve()
{
  ll n, x, y, h;
  cin >> n;
  vector<tuple<ll, ll, ll>> a(n);
  for(int i = 0; i < n; ++i)
  {
    cin >> x >> y >> h;
    a[i] = make_tuple(h, x, y);
  }

  sort(a.rbegin(), a.rend());

  for(ll cx = 0; cx <= 100; ++cx)
  {
    for(ll cy = 0; cy <= 100; ++cy)
    {
      bool ok = true;
      ll ch = calcDiff(cx, cy, get<1>(a[0]), get<2>(a[0])) + get<0>(a[0]);
      for(const auto& t : a)
      {
        ll diff = calcDiff(cx, cy, get<1>(t), get<2>(t));
        ok &= ( ( ch == diff + get<0>(t) ) || (diff > ch && get<0>(t) == 0) );
      }
      if (ok)
      {
        cout << cx << " " << cy << " " << ch;
        return;
      }
    }
  }
}
```
`tuple`を使ってみました。
2つ以上の要素をまとめて管理したいときに便利です。
演算子のオーバーロードのような操作なしで`sort`もできます。

中心地がわかれば高さを求める式からピラミッドの高さがわかりますね。
ただ、入力の`h`が`0`の時はうまくいかないので注意です。

また、中心地の`X, Y`座標はそれぞれ`[0, 100]`の範囲内です。範囲が狭いので全探索が選択肢に入ります。
中心位置を仮に決めて入力の通りになるか試し、矛盾する点がなければその位置が答えになります。
これは、入力情報でピラミッドの位置が一意に決まるためにできる操作です。

入力数は100以下なので、最大計算量も以下のようになり間に合います。
`[Xの候補数] * [Yの候補数] * [入力数] = 101 * 101 * 100 ≈ 10^6`

はじめは数学的に考えて、絶対値を外して連立方程式を作って。。。
というようにゴリゴリやっていたのですが、途中で全探索すればいいことに気づきました。
もっとはやく全探索を思いつきたかった。こういうミス(?)が多いので減らしたい。


## D - Partition

``` c++
  ll n, m;
  cin >> n >> m;

  ll ans = 1;
  for(ll i = 1; i * i <= m; ++i)
  {
    if (m % i == 0)
    {
      if (i * n <= m) ans = max(ans, i);
      if (m / i * n <= m) ans = max(ans, m / i);
    }
  }
  cout << ans;
```
`a1,a2,a3,...`の最大公約数は`M`の約数になるので、`M`の約数を順にみます。
求める答えは最大で`M/N`になるので、`M`の約数であって`M/N`以下の数字が答えになります。

書くのは単純でコードも単純なのですが、気付くのに時間がかかかりました。
約数の問題は得意だと思っていたので、もっと速く解きたかった。。。

以上です。ありがとうございました。
ロボットが安定して働いてくれない①

# 自動化したものの...
RPAでロボットに作業をお任せしているのですが、ロボットが行う作業の内容によっては安定して動かないものがある、ということがわかってきました。PCの業務は何でも自動化できるというのは、安定して動き続けるということとは違うのですね。
今後のロボットつくりのために、ロボットの動きが不安定になるケースと対応したことを書き出してみることにします。今回は画像による指定でモニタにうつっていないことで発生したエラーについて取り上げます。

# モニタにうつっていない場合はエラーになる
たしかにモニタにうつっていない場合はエラーになります。操作しようにもモニタにうつっていないのですから。うつっていないものは人間でも操作できません。でもね、ロボットを作っているときはモニタにうつっていたじゃないですか。

## 指定した箇所がモニタの表示範囲外になっている場合
表を操作している場合に発生しました。表の行数が多い、だから指定した箇所がモニタの表示範囲外になる、そうすると指定した箇所がない、ロボットのエラーが発生する...。

## 対応方法
表示範囲外になっていてエラーになったら、スクロールして表示個所を下にずらすことで対応しました。

## 指定した箇所がモニタに表示されるのに時間がかかることがある
データをダウンロードして、ダウンロードしたファイルを開くボタンをクリックする場合に発生しました。ロボットを作成しているとき、ダウンロードに時間がかかることが分かっていたので、ロボットの動きを一時停止してからクリックするようにしていたのに。ダウンロード完了するまでの時間がいつも同じではなく、ロボットをどのくらい一時停止すればいいのか適切な時間がわからず振り回されました。

## 対応方法
ダウンロード中にクリックするアクションを実行してエラーになった場合は、一時停止してからクリックするアクションを実行する...、としてこれをクリックするアクションが成功するまで繰り返し行う設定にしました。

# まとめ
画像による操作個所の指定はロボットがエラーになることが多く不安定でしたが、ロボットのつくり次第ではなんとかなることがわかりました。
一番いいのは画像による指定をしないことなんですけど。
rubocopに追加された Style/HashLikeCase Consider replacing case-when with a hash lookup

# rubocopに追加された Style/HashLikeCase
case文で記述しなくても良い場合は配列で定義してしまいましょうというルール。

rubocop `0.88.0` で追加、非常に良いですね。

```rb:悪い例
type = 'test'
case type
when 'interview'
  'インタビュー'
when 'test'
  'テスト'
when 'standard'
  '通常'
end
```

```rb:良い例
TITLES = {
  'interview' => 'インタビュー',
  'test' => 'テスト',
  'standard' => '通常',
}

type = 'test'
TITLES[type]
```

## 公式リポジトリの情報
### issueと経緯
https://github.com/rubocop-hq/rubocop/issues/8247

### PRと実装
https://github.com/rubocop-hq/rubocop/pull/8280
Mobプログラミング


今回は実際に2週間ほどMobプログラミングをチームで行いました。
実際にやってみて感じたことをまとめてみました。

#Mobプログラミングとは？
Mobプログラミングは
１つの作業を同じ時間、同じ部屋、
同じコンピュータで行うプログラミングのことです。
複数人のチームで作業します。

このプログラミングの方法は
ペアプログラミングにも似ています。

ペアプログラミングでは
２台のパソコンを使って共同作業を行いますが
Mobプログラミングの場合
１台のパソコンを使って作業するため
その点で異なっています。

※以降MobプログラミングをMobプロと表記します。

#Mobプロ環境
Mobプロでは人間工学的な面も考える必要があります。

例えば
・画面が見にくい
・マウスが操作しにくい
・椅子が座りにくい

などといったことはできるだけ避けたいです。

そのため人数によっては１人あたりのスペースも
狭くならないよう考える必要があります。

#Mobプロで使うもの
Mobプロでは１台のコンピュータを使って作業を進めます。
その他にマウス、キーボードが必要です。

１台のコンピュータにコードを打ちこみますが
調べたいことがあると思うので１人１台コンピュータを
手元に置いておくとよいでしょう。

また、チームで話し合うときにホワイトボードなども
用意しておくと作業がもっとスムーズに進みます。

#Mobプロの進め方
コンピュータに打ち込む人のことをドライバー、
その他の人はナビゲーターと呼びます。

ドライバーはナビゲーターの案を実装します。
ドライバーはタイピングとコーディングに焦点を当てているため
ナビゲーターはドライバーが理解できる分かりやすい説明が必要です。

また、ドライバーだけでなくチーム全体にも共有する必要があるため
説明する際は大きな声で説明する必要があります。

Mobプロでは
時間でローテーションします。
10分～15分のタイマーをセットし、
現在のドライバーは自分の番が終わると
次の人にキーボードとマウスを渡します。

集中力の持続のために
休憩時間を用いたほうが
開発の効率は上昇すると思います。

#Mobプロのメリット
実際にやってみて感じたメリットを
以下に箇条書きしていきます。

・チーム全体で理解しながら進めていけるため
共有の手間がなくなる

・知らない知識をその都度知ることができる。

・1人でする時より解決策が見つかりやすい

・新入りの初心者には知識の共有の場として良い

#Mobプロのデメリット

・案がなくなると沈黙が続く

・開発スピードの低下の恐れ

・簡単なタスクは個人のほうが良い

・集中力が散漫になる可能性

#まとめ
Mobプロには
多くのメリット、デメリットが存在します。
ですが入りたての私にとっては
理解していくうえでとても役に立ちました！

難しいタスクなど初心者1人ではできないタスクを
Mobプロに取り入れていけばいいのではないか。
と思います！！！
どうやってiPhoneは完全に無音で、音が出ないのですか

設定で設定するか、[左側のボタンを押](https://www.ceodata.com/iphone-ringer-alert-volume/)してミュートできます。:relaxed:

具体的な操作：

1.電話で設定を開きます

2. 一般を入力

3.アクセシビリティを押します

4. アクセシビリティでAssistiveTouchをオンにします。開くと、小さな白い点が画面に表示されます。

5.次に、画面上の白い点をクリックして、デバイスを押します。

6.もう一度ミュートを押します。
VScodeでターミナルを開くコマンド

はじめまして。当記事は新米の自分の備忘録のような意味合いの記事となっておりますのでお手柔らかにお願い致します。あわよくば超初心者が超超初心者のかたの参考になればと。

## VScodeでターミナルを下部に表示するコマンド

**[ctrl] + [`]**

今までどうやって下部にターミナルを表示するか忘れていたため困っていました。macの「ターミナル」でもいいのですが下部で手軽に挙動確認しながら作業できるのが良い点だと思っています。
【Docker】exec形式とshell形式

# DockerのENTRYPOINTとかCMD書くときの形式ってどうすればいいのか

[Dockerfileのリファレンス](http://docs.docker.jp/v1.11/engine/reference/builder.html#entrypoint)では`exec形式`が推奨されている。
[shell形式とexec形式の違い](https://docker.open-code.club/shell%E5%BD%A2%E5%BC%8F%E3%81%A8exec%E5%BD%A2%E5%BC%8F%E3%81%AE%E9%81%95%E3%81%84.html#exec%E5%BD%A2%E5%BC%8F:%20[%22%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%22,%20%22%E5%BC%95%E6%95%B01%22,%20%22%E5%BC%95%E6%95%B02%22..])

## シェル形式

`/bin/sh -c "コマンド 引数1 引数2"`として実行される

```terminal:shell形式
RUN bundle exec rails assets:precompile
```

## exec形式

`コマンドを直接(シェルを通さず)実行`。`コマンドや引数を囲むときのシングルクォートは使えない`。

```terminal:exec形式
CMD ["bundle", "exec", "rails", "server", "-b", "0.0.0.0"]

# シェルで実行したい場合には(パイプ等が使用できる)
CMD ["ash", "-c", "bundle exec rails server -b 0.0.0.0"]
```
iOSアプリ開発で参考にしたiOSエンジニア YouTuber

#はじめに
本格的にiOSアプリを開発してから約２年が経ちましたが、始めた当初から独学しています。というのもインターネット上に情報が溢れているのでネイティブアプリの構成やデバッグ方法、作りたい機能は大体検索すれば出てきます。

参考にしたサービス：
・YouTube
・StackOverflow
・Medium
・Qiita
・Teratail
・Udemy

始めた当初は動画で見れるYouTubeは特に参考になりましたので、iOSエンジニアYouTuber(英語)を紹介します。

#iOSエンジニアYouTuber
**・ Let's build that app(私のメンター)**
https://www.youtube.com/channel/UCuP2vJ6kRutQBfRmdcI92mA
アジア系アメリカ人のブライアン。この人がいなかったらiOSアプリ開発出来ていなかったと思います。
iOSプログラミングの基本、応用、デザインはほぼから彼から学びました。
このチャンネルは『このアプリを作ろう』的なシリーズ系をたくさん載せています。例えば、『Firebaseを使ってチャットアプリを作ってみよう』、『YouTubeを作ってみよう』、『Twitterを作ってみよう』などなど。
そのほかにもアルゴリズム系の動画を載せています。

**・Code with Chris**
https://www.youtube.com/user/CodeWithChris
ビギナー用の動画がたくさんあります。
１年前に公開された『How to make an app for Beginners』は２４３万回も再生されています。
ほかにもサードパーティーライブラリ(SDWEBIMAGEやSVProgressHUD)の使い方も解説しています。

**・Sean Allen**
https://www.youtube.com/channel/UCbTw29mcP12YlTt1EpUaVJw
基本的なSwift(ViewControllerの解説、ClassやStructの使い方、if文やswitch文の使い方、enumの使い方)の構造などを説明しています。

**・ArchetApp**
https://www.youtube.com/user/Archetapp
サードパーティーサービス(Firebase, Stripe, Realm)を使ったプロジェクト作成動画を載せています。

#最後に
YouTubeは無料で見れる上、内容の濃いコンテンツが多いのでおすすめです。
技術的な面を解説している日本人iOSエンジニアYouTuberの方が見つからなかったため、外国人YouTuberを参考にしています。
Jetbrain InteliJのターミナル設定を、WindowsのコマンドプロントからWSLのubuntu環境に変える

## 環境
- InteliJ
- Windows 
- WSL

## やりたいこと
Jetbrainが提供する、webstorm・InteliJ等のIDEのエディタのターミナルを、
Windowsのコマンドプロントから、WSL(ubuntu)のターミナルへと変えたい！

## 手順
1. File > Setting > Tools > Terminal を開く
![inteliJ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557811/12ee244f-e574-5ac8-085e-9e1525bca351.png)

2. Application setting > Shell pathを変更。

`C:\Windows\System32\cmd.exe`[コマンドプロント]から
`C:\Windows\System32\bash.exe`[wsl] に変更。(bash.exeは、人によって違うので、対応するパスを設定)
vFilOでハイブリッドクラウドなNASの事始め

DataCore vFilOを使ってもっとも初歩的なハイブリッドクラウド、すなわちオンプレNASとクラウドのオブジェクトストレージで階層化されたネームスペース（←言い換えるとNAS、Share、共有フォルダ）を作ってみます。

この場合、Objectiveでポリシーをどう書くかが動的配置の決め手になります。

さっそく寄せられた質問を元にサンプルを書いてみます。

##もっともよく使われるであろう、○○時間（秒、分、時間、日、週、月、年）アクセスがなかったらクラウドへ移動
###使用できる時間表現
SECONDS
MINUTES
HOURS
DAYS
WEEKS
MONTHS
YEARS

###一週間アクセスがなかったら、の例
####パターン1 ファイルが開かれた時点でオンプレに移動される場合

```
IF LAST_USE_AGE<1*WEEK
THEN {SLO('place-on-<ボリューム名orノード名>')}
ELSE {SLO('place-on-object-volumes')}
```

####パターン2　キャッシュされて開かれ、ファイルが保存（更新）されるタイミングでオンプレに保存される場合

```
IF ACCESS_AGE<1*WEEK
THEN {SLO('place-on-<ボリューム名orノード名>')}
ELSE {SLO('place-on-object-volumes')}
```

##作成されて一週間経過したら、の例
この場合はアクセス頻度に関わらず作成されてからの時間で移動されます。対象になるシェアに紐づくプロジェクト等の期間が固定の場合に有効です。

```
IF CREATE_AGE<1*WEEK
THEN {SLO('place-on-<ボリューム名orノード名>')}
ELSE {SLO('place-on-object-volumes')}
```

##もう一つ時間のパラメータ CHANGE_AGE による移動
すみません、使い方を確認中…　たぶんctimeの更新？
8/20追記：ctimeでした。

```
IF CHANGE_AGE<1*WEEK
```

次回は時間以外の条件を試してみます。お楽しみに。
Visualforce apex:attributeでオブジェクトのリストを受け取る方法


# カスタムコンポーネントでの値の受渡し

カスタムコンポーネントを作り、親pageから値を渡し

```html
<c:ZZ_ReturnManagementSlipBasecopyCommon xxx="{!xxxx}" />
```

受け取る時に `apex:attribute` を使用すると思います。
その際、受け取るときに型指定が必要になりますが、オブジェクトのリストってどうやって渡すんだろうとなりました。

```html
<apex:attribute name="xxx" type="xxx" description="xxx" required="xxx" />
```




# オブジェクトのリストを渡す場合は？

文字列ならstring、数値ならintegerとそのまま指定してあげればいいですが、

List<オブジェクト>を渡す場合の型指定は、 `オブジェクト名[]` で受け取ることができます。

例
`type="Shop__c[]"`

```html
<apex:attribute name="shopList" type="Shop__c[]" description="店舗リスト" required="true" />
``` 

listを渡すから、listと指定だよねと思い `type="list”` と書いていたのですが、その場合、配列にキャストされるようでフィールドへのアクセスが出来ず四苦八苦しました。。
テーブルの結合（標準とOracle特有の比較）

# はじめに
テーブルの外部結合がいつもわからなくなるのでメモ。
特にレガシーシステムの改修を行っていたらOracle特有の書き方に出くわして、
どっちが左？どっちが右？となるので、標準的な書き方とOracle特有の書き方を列挙。

# テーブル
テーブルは以下のように「animalsテーブル」と「categorysテーブル」を用意

###animalsテーブル

| id  | name    |category_id|
|:----|:---------------|:----------|
| 1   | 柴犬           |  1        |
| 2   | トイプードル   |  1        |
| 3   | にわとり       | 3         |
| 4   | へび           | 4         |
| 5   | さんま         | 5         |

###categorysテーブル

| id  | category_name  |
|:----|:---------------|
| 1   | 犬         |
| 2   | 猫           |
| 3   | 鳥         |
| 5   | 魚           |

## 内部結合
まずは普通に内部結合
###標準の書き方
```sql
SELECT animals.id, animals.name, categorys.category_name
  FROM animals INNER JOIN categorys 
               ON animals.category_id = categorys.id;
```

### 別解
```sql
    SELECT animals.id, animals.name, categorys.category_name
      FROM animals, categorys
     WHERE animals.category_id = categorys.id;
```

### 結果
| id  | name    |category_name|
|:----|:---------------|:----------|
| 1   | 柴犬           |  犬        |
| 2   | トイプードル   |  犬        |
| 3   | にわとり       | 鳥         |
| 5   | さんま         | 魚         |



## 外部結合（左結合）
###標準の書き方
```sql
SELECT animals.id, animals.name, categorys.category_name
  FROM animals LEFT OUTER JOIN categorys 
                    ON animals.category_id = categorys.id;
```

###Oracle特有の書き方

```sql
SELECT animals.id, animals.name, categorys.category_name
  FROM animals, categorys 
 WHERE animals.category_id = categorys.id(+);
```

### 結果
| id  | name    |category_name|
|:----|:---------------|:----------|
| 1   | 柴犬           |  犬        |
| 2   | トイプードル   |  犬        |
| 3   | にわとり       | 鳥         |
| 4   | へび           | NULL       |
| 5   | さんま         | 魚         |


Oracle特有の書き方の場合、
**(+)**をつける方が親に対してテーブルのデータが足りないという風に考えておく！
**(+)**をつけた方にNULLが入るみたいなイメージ

## 外部結合（右結合）
###標準の書き方
```sql
SELECT animals.id, animals.name, categorys.category_name
  FROM animals RIGHT OUTER JOIN categorys 
                    ON animals.category_id = categorys.id;
```

###Oracle特有の書き方

```sql
SELECT animals.id, animals.name, categorys.category_name
  FROM animals, categorys 
 WHERE animals.category_id(+) = categorys.id;
```



### 結果
| id  | name    |category_name|
|:----|:---------------|:----------|
| 1   | 柴犬           |  犬        |
| 2   | トイプードル   |  犬        |
| NULL| NULL         | 猫         |
| 3   | にわとり       | 鳥         |
| 5   | さんま         | 魚         |
Raspberry Pi 4 と Mac をリモートデスクトップ接続

**環境**

- Rasberry Pi 4
- Mac Pro
- Raspbian GNU/Linux 10.4

#### Rasberry Pi 側で vnc server 構築

インストール可能なパッケージの一覧を更新する。

```ruby:rasberrypi
$ sudo apt-get update
```

インストール済みのパッケージ更新をおこない、新しいバージョンにアップグレードする。
上記で更新されたパッケージ一覧ともとにアップグレードされるため、apt-get update と組み合わせてつかう必要がある。環境によってしばらく時間がかかる。

```ruby:rasberrypi
$ sudo apt-get update
```

RealVNCサーバーをインストールする。

```ruby:rasberrypi
$ sudo apt install realvnc-vnc-server
```

RealVNCサーバーを有効化する。

**RaspberryPiをの設定**を選択する。

<img width="1440" alt="スクリーンショット 2020-07-21 10.26.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/053af7cc-b48d-de6f-0cb5-bcc35afb0ccb.png">

**VNC**を**有効**にする。

<img width="1440" alt="スクリーンショット 2020-07-21 10.27.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/dc28f7fc-cc3c-720d-2df3-6c66efb4b84b.png">


自分の場合はこの時点で一旦接続すると、以下のエラーが発生した。

**「リモートコンピューターのソフトウェアが、このバージョンの画面共有と互換性が内容です。」**

よって、以下をRaspberryPi側で設定する。

**VNC**をクリックする。

<img width="1440" alt="スクリーンショット 2020-07-21 10.29.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/6d69469e-155f-b701-c9c9-509284069fe8.png">

**設定メニュー**をクリックする。

<img width="1440" alt="スクリーンショット 2020-07-21 10.29.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/1bd89fc2-5ebe-1501-6100-01ae948764ee.png">

**Options**をクリックする。

<img width="1440" alt="スクリーンショット 2020-07-21 10.30.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/a57366fc-21c0-d35a-05af-f5e4ffbb46ab.png">

デフォルトで**Authenication**はUNIX passwordとなっているが**VNC Password**に変更する。

<img width="1440" alt="スクリーンショット 2020-07-21 10.31.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/417fd543-6cc2-c539-6e42-8e1e91b81289.png">

#### Mac 側で VNC Viewer を使って接続する。

Macに [VNC Viewer](https://www.realvnc.com/en/connect/download/viewer/) をインストールする。

<img width="1436" alt="スクリーンショット 2020-07-21 10.50.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/0e6df220-4979-ecf3-63db-86d64d3bf27e.png">

デフォルトの設定でインストールを進めて起動する。
接続先に **ipアドレス：ポート番号** を入力する。

<img width="936" alt="スクリーンショット 2020-07-21 10.52.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/db13e257-ec7a-3a20-edd8-f6ef5ddc0be3.png">

繋がった！

<img width="1440" alt="スクリーンショット 2020-07-21 10.56.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/b1e4560c-35eb-2056-408a-2e881249cb29.png">

<img width="930" alt="スクリーンショット 2020-07-21 10.55.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/dfc6f053-8574-72ff-1989-92670fb59aaf.png">

**補足**
Macの画面共有を使って接続すると表示された画面が小さくサイズ調整もよくわからなかったため
VNC Viewerを採用することにした。

以下、画面共有で表示

<img width="1440" alt="スクリーンショット 2020-07-22 5.09.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535832/27e430fc-4735-dbf6-6b1b-c6e012d529bd.png">

**参考サイト**
- [Mac で ラーパイさん[Raspbian]へのVNC接続が Apple Remote Desktop で接続できない件](https://denseforestreviewcannotsay.blogspot.com/2019/12/mac-raspbianvnc-apple-remote-desktop.html)
- [ラズベリーパイにVNCで接続する](https://kinacon.hatenablog.com/entry/2018/08/22/212010)
お名前サーバでSTRIPEは使えない

#お名前サーバで決済サービスのSTRIPEは使えない
お名前サーバ（共用レンタルサーバSDプラン）でドメインを取得・設定。
STRIPEからユーザにメールを送る際に、STRIPEからではなくこちらで作ったドメインから送りたい。

これは**ダメ！**

お名前サーバでは複数のCNAMEを設定できない。
STRIPEから提供されるアンダーバー付きのホスト名はお名前サーバのDNSに登録できない

お名前のDNSサービスを使うと共用レンタルサーバで設定したメール、Webが使えなくなる。

結果
```
STRIPEを使いたければお名前.comは使うな
```
NITIC CTF WriteUp

NITIC CTFに参加しました。
公式から答えが出ていますが、備忘録としてWritesupを記載します。
スコアサーバー
https://ctf.waku-waku-club.com/contest/nitic_ctf_1


![score.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/f4d7f92f-97c6-d34b-568b-9965fb2a7861.png)

# Dangerous Twitter
対象のアカウントから、サイトのパスワードを調査するもの。
色々見ていたところ、投稿されている画像の一枚(https://twitter.com/FPC_COMMUNITY/status/1284684386361724928/photo/1 )に、パスワードが記載されており
それが答えになる。

FLAG:<font color="Lavender">nitic_ctf{abaE33F5}</font>
~~色々調べすぎて、作者の裏アカウントまで知ってしまいました~~

# 8^2
与えられた文字をブラウザにそのまま入力するとフラグを得られます。

FLAG:<font color="Lavender">nitic_ctf{nemu_numu_panti_shitai}</font>


# prime_factorization
与えられた数（408410100000）を素因数分解することでフラグを得られる。
素因数分解ができるサイト（https://keisan.casio.jp/exec/system/1161228771 ）があったので、計算するとフラグが得られる。

FLAG:<font color="Lavender">nitic_ctf{2_5_3_5_5_5_7_5}</font>

# anim
対象のファイルを確認するとzipファイルであるので、解凍する。
中を確認すると、pptフォルダ、[Content_Types].xmlがあるため、パワーポイントのファイルであると分かる。
更に中を確認していくとanim\flag\ppt\mediaにフラグがあることが分かる。
FLAG:<font color="Lavender">nitic_ctf{ppppptx}</font>

# Fortran
対象ファイルをstringsで確認すると中にフラグがあることが確認できます。
![strings.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156890/a26d8660-665a-c3c6-56d5-1fc3a7303260.png)


FLAG:<font color="Lavender">nitic_ctf{No_FORTRAN_Yes_Fortan}</font>


# cha1n
中を確認すると、複数のファイルが格納されている。
そのファイルを標題通りの順番で実行すると、フラグが得られる。

FLAG:<font color="Lavender">nitic_ctf{cha1n_cha1n_cha1n_cha1n_cha1n_5combo}</font>

# shift_only
pythonのプログラムとフラグがエンコードされたファイルが渡される。

プログラムを確認すると、
i.元の文字を１~９文字のいずれかの値でずらす
ii.ずらした結果をshift_tableの長さで割り、shift_table[あまりの数字]で置き換える
iii.全ての文字をずらした後に、ずらした数を先頭に付与する。
iv.i~iiiをFORMATの文字列分繰り返す。

そのため、解読するためには文字列の先頭が数字かどうか確認し、数字でない場合終了。
数字の場合には、先頭を除いたうえで、先頭の数字分前にずらしていくことを繰り返すことでフラグが得られる。

回答コード

```py
enflag="6}bceijnob9h9303h6yg896h0g896h0g896h01b40g896hz"
shift_table = "abcdefghijklmnopqrstuvwxyz0123456789{}_"


while(1):
    if enflag[0].isdecimal()!=True:
        break
    else:
      enflag_1=enflag[1:]
      res = ""
      for c in enflag_1:
          res += shift_table[(shift_table.index(c) - int(enflag[0])) % len(shift_table)]
      enflag=res

print(enflag)
```

FLAG:<font color="Lavender">nitic_ctf{shift_shift_shift_and_shift}</font>


#感想
サクサク解けて非常におもしろかったです。
相変わらず、Pwnが解けないので精進したいと思います。
Xcodeでソースコードの差分を見る

Xcode上でソースコードの差分を見る方法を紹介します。
↓の画像のようになります。
<img width="1418" alt="diff.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/96c5e9e2-f584-55b3-351d-6e8b9463e8c1.png">

## ソースコードの差分を表示する
* `Show or Hide Code Review` ボタンを押す
* `Show or Hide Code Review` ボタンが選択状態になり、エディタの左右にソースコードが表示されていればOK
<img width="1308" alt="show_or_hide_code_review.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/790a13e7-731f-21e9-91ac-fc4908cd0e00.png">
<img width="1418" alt="button.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/3fc3dfbe-b12a-0e30-4e0c-c73ba113ca8d.png">

### 補足
* 上の状態でソースコードを編集すると、最終コミットからの差分がわかるように表示してくれる
<img width="1418" alt="show_diff.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/ae1e81ef-a83c-aa41-52da-9d0edf2a763e.png">

## 過去のコミット時のソースコードを表示する
* ↓画像の赤枠をクリックする
<img width="1418" alt="select_commit.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/e22788d5-fff4-d5db-0b0b-b6e6c40a2e09.png">

* 比較したいコミットを選択する
<img width="633" alt="select_commit_from_list.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/b4a797a5-a47e-107f-b5ee-a58185b85d77.png">

* 選択したコミット時のソースコードが表示され、現状との差分が表示される
    * ↓の場合、選択した2019/12/09時点のコミットでは  `MessageGenerator` 以下の実装がまるっと無かったことがわかる
<img width="1418" alt="diff.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/87484189-d4ca-1040-72fb-7a5c89fc40bf.png">


### 補足
* ブランチ部分をクリックすると、他のブランチの任意のコミットを選択可能

<img width="617" alt="select_branch.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102583/79256b91-b5b1-a451-455d-2a6562e4955e.png">

## 環境
* Xcode 11.4
JS 配列の後ろからN個返す

## LodashのtakeRight関数を作成してみた

### メソッド使用せずに作成した場合

~~~javascript
const takeRight = (array = [], takeRightNum = 1) => {
  if (takeRightNum === 0) {
    return []
  }

  if (array.length < takeRightNum) {
    return [...array]
  }

  let newArray = []
  for (let i = 0; i < takeRightNum; i++) {
    const index = array.length - (1 + i)
    newArray.push(array[index])
  }
  return newArray
}

console.log(takeRight([1, 2, 3]))
// => [3]

console.log(takeRight([1, 2, 3], 2))
// => [2, 3]

console.log(takeRight([1, 2, 3], 0))
// => []

console.log(takeRight([1, 2, 3], 5))
// => [1, 2, 3]
~~~

### sliceメソッドで作成した場合

#### sliceメソッドとは
- の引数に抜き出す範囲を指定すると、新しい配列オブジェクトとして返します
- マイナス数字だと後ろから順に選択する

▼以下の記事を参考にさせて頂きました
[suin: JavaScriptで配列の後ろからN個の要素を取り出す
](https://suin.io/559)

~~~javascript

const takeRight = (array = [], takeRight = 1) => {
  if (takeRight === 0) {
    return []
  }
  return array.slice(-takeRight)
}
~~~
180日でWeb開発者になるための備忘録（HTMLの基本）

#はじめに
こちらは
[180日でWeb開発者になる方法(コンピューターサイエンスの学位なしで)](https://qiita.com/baby-degu/items/a06bddd1a61b7d907a55)
を参考にSESエンジニアがWeb開発できるまでの備忘録です。
開発者になりたい！！！！！っていう反骨心が自分のモチベです。
毎日続けていきたいので、どんなに少なくても投稿していきたいと思っています。
投稿できなかったらごめんなさい。
現状は[atom](https://atom.io/)でhtmlを書いています。

#今回は何やった？
ざっくりと以下の内容を学び直しました（Progate中級までで似たようなことを少しやった経験あり）
1.HTMLの要素（pタグとかclassとか）
2.HTMLの構造（head,title,bodyとかの構成要素とか）
3.マークアップ（今このQiitaでも使っているものですね）

#何を学べたか？
サイト自体の学習内容ではないのだが、atomを利用している際に
「閉じタグ毎回書くの面倒だなー」
と思いググってみたら閉じタグの[プラグイン](https://atom.io/packages/tag)を入れて試した時の衝撃ですよ。
<ul>タグ入れた後、</まで入れたとこで欲しい閉じタグのul君がビターーーっと一瞬で入って感動しましたね。
自分もこんな便利なプログラム書いて人に便利だなって思われるようになりたいと思った今日この頃です。

#どんなものできた？
こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/677811/3c981c90-cbc5-e9ed-5e29-ac10b635b159.png)
**猫がデカすぎる**
画像の縮小とかの方法はおいおい学んでいきます、やった記憶あるけど忘れてしまった・・・
Dead by Daylightのサバイバーパークの共起性を可視化する

# やりたいこと
2020/07/01 ~ 2020/07/14（4周年期間中）のDead by Daylightで僕がご一緒したサバイバーのプレイヤーのパークを分析します．このゲームをプレイする上で役に立ちそうな情報を分析したくなったのがきっかけです．

## [Dead by Daylight](https://store.steampowered.com/app/381210/agecheck?l=japanese)について
最近ハマっている4vs1の非対称型対戦ゲームです．殺人鬼（キラー）1名と生存者（サバイバー）4名に分かれて，箱庭と呼ばれるステージで追いかけっこをします．最近4周年を迎えたり芸人の狩野英考さんがYouTubeでゲーム実況を始めたりと，今とてもアツいと個人的に思っているゲームです．

[EIKO GO!チャンネル](https://youtu.be/wF8xojkZ724)

### パークとは
ゲームを有利に進めるために4つまで特殊能力を試合に持ち込むことができます．この特殊能力のことをパークといって，代表的なものには以下のような能力があります．※ [PERKS](https://w.atwiki.jp/deadbydaylight/pages/32.html)より引用

- デッドハード（Dead Hard）: 疲労状態でない負傷中に走っている時、Eキーを押すと効果発動．短時間だけ前方にダッシュし、その間あらゆるダメージを受けない．このパーク効果が発動すると60・50・40秒間は疲労状態となる．
- セルフケア（Self Care）: 回復キット無しで自分自身を治療可能(ただし治療速度は通常の50%)．自分に使う時のみ回復キット使用時の使用効率が10・15・20%上昇．

今回は生存者側のパークの共起性（同時採用率）を中心に分析したいと思います．

## 集めたデータ
生存者のランクと採用されたパーク4つを80名分記録しました．僕と一緒にプレイしていただいた方のみを対象にデータ収集しているため，全ユーザの統計データとはならないので一例として考えてください．ランク自体を記録したはいいものの，公式がランクシステムの廃止をアナウンスしていたため，あまり意味はなかったです．

データの形式はこんな感じです．

```Python
df = pd.read_csv("perks.csv")
df
```
<img width="548" alt="スクリーンショット 2020-07-21 10.09.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593087/9e1ee1c8-9381-7d9a-4d77-d37fc755f1c0.png">


## 分析
パーク同士の共起性を示す指標としてJaccard係数を採用しました．Jaccard係数を利用した共起ネットワークについては[こちら](https://www.dskomei.com/entry/2019/04/07/021028)の記事を参考にさせていただきました．

Jaccard係数は以下の式で表され，集合の類似度を示します．

$Jaccard = \frac{n(A \cap B)}{n(A \cup B)}$

今回はパークが採用されることを事象の単位とするため，パークAとパークBの同時採用回数とどちらか一つでも採用されている回数の比を計算することになります．$n(A \cup B)$は以下の式で簡単に計算できます．

$n(A \cup B) = n(A) + n(B) - n(A \cap B)$

今回集めたデータから簡単に計算できます．

可視化結果はこんな感じ．
<img width="609" alt="スクリーンショット 2020-07-19 22.51.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593087/078d4fca-272d-53d3-6cf7-cc3f817f0dfe.png">

中心にあるほど採用数が高く，エッジが太いほど共起性が高くなっています．デッドハード（Dead hard）・鋼の意思（Iron Will）・与えられた猶予（Borrowd Time）・決死の一撃（Decisive Strike）などはどんなパークとでも組み合わせやすいため，中心に分布しています．一方で，素早く静かに（Quick & Quiet）と真っ向勝負（Head On），ソウルガード（Soul Guard）と不滅（Unbreakable），コソ泥の本能（Plunderer's Instinct）と最後の切り札（Ace in the Hole）などの採用数が少ないものの組み合わさることによって効果を発揮するパークは外側に配置されて太い線で繋がっています．

単純な単体の採用数もこちらに載せておきます．
<img width="249" alt="スクリーンショット 2020-07-19 23.07.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593087/d3e7beeb-1a22-0868-73d6-fe0febf5455d.png">

採用数と共起性を考えると，テンプレ構成は以下のようなものが考えられます．
- デッドハード・鋼の意思・セルフケア・決死の一撃
- デッドハード・鋼の意思・与えられた猶予・決死の一撃
- デッドハード・凍りつく背筋・与えられた猶予・決死の一撃
デッドハードはほとんどの構成に採用されていて，デッドハードの枠を全力疾走に変えている構成も頻繁に見られました．

後ほどコードを公開しようと思います．
xontribを作る上で引っかかったポイント

# まず

xonshと言ったらばんくしさんのブログを見ましょう。これを見れば大体できます。

https://vaaaaaanquish.hatenablog.com/archive/category/xonsh


# 目次

1. cookiecutter-xontribが使えない！
1. 関数を別モジュールに切り出したい
1. -eとgitでモジュールが読めなくなる話
1. テストを書きたい話



## cookiecutter-xontribが使えない！

xontribの雛形を作るのに便利ですが、 `https://github.com/laerus/cookiecutter-xontrib` がなくなってしまっています。

xonsh公式が出しているのでそちらをそのまま使いましょう。 https://github.com/xonsh/xontrib-cookiecutter  
作成直後の構造↓

```
.
├── LICENSE
├── README.rst
├── setup.cfg
├── setup.py
└── xontrib
    └── sample.xsh
```

ちなみに、公式版では新しく `setup.cfg` が追加されていますが、今までsetup関数に与えていた引数を別出ししているだけなので特に変わりなく使えます。


## 関数を別モジュールに切り出したい

[公式のチュートリアル](https://xon.sh/tutorial_xontrib.html)にもあるように、libモジュールを作成して読み込みたい時

```
xontrib/
 |- javert.xsh     # "javert", because in xontrib
 |- your.py        # "your",
 |- eyes/
    |- __init__.py
    |- scream.xsh  # "eyes.scream", because eyes is in xontrib
```


```
[javert.xsh]

from .eyes import scream # ○
from eyes import scream  # ×
```

xontribよりpython全般の話になってきますが、相対読み込みを使わないとこけます。半日溶かしました



## xpip install -e と　pip install git+ で動きが違う（動かなくなる）話

前者は動き、後者は動かなく（module not found）なりました。

結論としては、setupの書き方に問題がありました。

```python
...
package_data = {'xontrib': [ここ]},
...
```

xontribの先人の方々は `*.xsh` と書いていたため、「この部分にパッケージに含めるファイルを記述する」と推測して `./**/*.py` と記述すると動きます。

これも半日溶かしました。


## テストを書きたい

こちらの記事（すごい！）を参考にして全てpyに置き換えている前提です。

https://qiita.com/74th/items/857e9a7aed5671e968bc

普通にunittestを走らせると、 `builtins.__xonsh__.env` を呼んでいるタイミングで落ちると思います。xonshがないので当然といえば当然です。  
なので、mockを使います。


```python
import unittest
from unittest.mock import patch, MagicMock

# 別ファイルにすると見栄えがいい
sample_xonsh = {
    "env": {
		# モックにしておきたい環境変数を作る
    },
    "execer": MagicMock()
}
mock_xonsh = MagicMock()
mock_xonsh.__getitem__.side_effect = sample_xonsh.__getitem__
mock_aliases = MagicMock()
# -------------------------

class TestSample(unittest.TestCase):
    def setUp(self):
        self.patcher_xonsh = patch('builtins.__xonsh__', new=mock_xonsh, create=True)
        self.patcher_aliases = patch('builtins.aliases', new=mock_aliases, create=True)
        self.mock_xonsh = self.patcher_xonsh.start()
        self.mock_aliases = self.patcher_aliases.start()
    
    def tearDown(self):
        self.patcher_xonsh.stop()
        self.patcher_aliases.stop()
    
    def test_sample(self):
        from xontrib.hellolib import hello
        # テストを行う

if __name__ == "__main__":
    unittest.main()
```

ポイントは

- `create=True` でパッチを作成すること（上書きではないので）
- xontribのインポートは各テスト関数内で行うこと（patchより先にインポートしてしまうとモック化の意味がない（エラー））
- execerにMagicMockを代入しておくこと（execer.evalは関数なので引数を後から見れた方が良い感じ）


xontribのテストはモックの量がめちゃめちゃに多くなりそうで悲しくなっています。  
また詰まったときは追記していきます。
redirect_toとrenderの使い分け

## 概要
Railsで`scaffold`を使ったらcreateアクションは以下のようになる。
保存に成功した時は`redirect_to`でページ遷移するのに失敗したときは`render`を使っている。
この違いを解説する。

```user_cocntroller.rb
def create
    @user = User.new(user_params)

    respond_to do |format|
      if @user.save
        format.html { redirect_to @user, notice: 'User was successfully created.' }
        format.json { render :show, status: :created, location: @user }
      else
        format.html { render :new }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end
```

## 結論
redirect_toはHTTPリクエストが走る。
renderはviewをただ表示するだけ(=URLは変化しない)

## redirect_toを使用したい時
データの更新が成功したときは、HTTPリクエストを走らせて別のページに遷移する。
そうすることで、リロードで同じデータが登録されないようにする。

## renderを使用したい時
保存に失敗したときは、エラーメッセージを添えてviewを表示してやるだけでOK。
無駄にリクエストを増やさないようにする。
データの登録は行われていないので、リロードされても問題ない。
ブートマネージャーの問題

##ブートローダー
ブートローダは記憶装置内のカーネルをロードし、カーネルに制御を移す役割を果たします。
ブートローダは第一段階と第二段階に分かれています。
第一段階部分はMBR(Master Boot Record)に格納、第二段階部分は記憶装置内(HDD)の別の場所に格納されています。
第一段階のブートローダはMBRの先頭446バイトの領域にインストールされます。
→起動時に呼び出されて、OSを動かすプログラムなんだな。
/boot/grub/menu.lstに入ってる。
ディストリビューションによっては「/boot/grub/grub.conf」

例）「/dev/hda」にGRUBをインストールする場合

# grub-install /dev/hda = 例）「/dev/hda」にGRUBをインストールする場合
GRUBのバージョンが0.9x系のものを「GRUB Legacy」、1.9以降のものを「GRUB2」と呼びます。
どちらのバージョンもインストールは、grub-installコマンドを利用します。


・GRUB2の場合
GRUB2の設定ファイルは「/boot/grub/grub.cfg」です。しかし、「/boot/grub/grub.cfg」ファイルを直接編集することはありません。設定内容は「/etc/default/grub」ファイルおよび「/etc/grub.d」ディレクトリ内のファイルに記述し、「grub-mkconfig」コマンドで設定内容を「/boot/grub/grub.cfg」ファイルに反映させます。

##GRUB
![名称未設定.pngokoo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620109/a00d8a71-b76a-6c5d-ce43-7f23109af795.png)
ブートローダであるGRUBのバージョンが0.9x系のものを「GRUB Legacy」、1.9以降のものを「GRUB2」と呼びます。
パーティション番号は、GRUB Legacyは0から、GRUB2は1から数えるディスク番号はGRUB Legacy/GRUB2どちらでも0から数えます。

GRUBに代表されるブートローダはHDDの最初のセクタ（512バイト）にあるMBR（マスターブートレコード）に格納されています。MBRは以下のように使用する領域が決まっており、ブートローダは先頭の446バイトの領域に格納されています。

##ルートパーティションを設定する。
GRUB2の場合、以下のようにして起動オプションを指定します。
grub> linux カーネルイメージ [オプション]


・init=/dev/sda2
initの代わりに指定コマンドを実行する起動オプションです
・root=/dev/sda2
rootパーティションを設定する。


##systemdの起動時のターゲットを指定する
systemdが動作するシステムにおいて、起動時のターゲットを指定するカーネルパラメータは systemd.unit です。systemd.unit パラメータの値に起動時のターゲットを指定します。ターゲット名は .target を省略することができます。


##起動中のカーネルから出力される情報を抑制したい
quietを使う。
PRML　演習問題 6.3（基礎）　解答 

## 問題
> 最近傍法（2.52節）は、新しい入力ベクトル$\mathbf{x}$を、訓練集合の中でこれにもっとも近い入力ベクトル$\mathbf{x} _ {n}$を持つものと同じクラスに分類する。最も単純な場合では、距離はユークリッド距離$||\mathbf{x} - \mathbf{x} _ {n}||^2$が用いられる。これをスカラー積で表すことで、カーネル置換を用いて、一般的な非線形カーネルを用いた最近傍法を導け。

## 解答
この問題は本文において二乗和誤差に対してカーネル置換を用いたのと同じように、最近傍法に対してもカーネル置換が適用できることを確認する問題である。
ユークリッド距離はスカラー積で表すと、

```math
\begin {align*}
\left\|\mathbf{x}-\mathbf{x}_{n}\right\|^{2}=\mathbf{x}^{\top} \mathbf{x}-2 \mathbf{x}^{\top} \mathbf{x}_{n}+\mathbf{x}_{n}^{\top} \mathbf{x}_{n}
\tag{ex6.3.1}
\end {align*}
```  

となる。
線形カーネル$k(\mathbf{x}, \mathbf{x'}) = \mathbf{x}^{\top} \mathbf{x'}$を用いて(ex6.3.1)を書き直すと、

```math
\begin {align*}
\left\|\mathbf{x}-\mathbf{x}_{n}\right\|^{2} = k(\mathbf{x}, \mathbf{x}) - 2k(\mathbf{x}, \mathbf{x}_{n}) + k(\mathbf{x}_{n}, \mathbf{x}_{n})
\tag{ex6.3.2}
\end {align*}
```  

線形カーネルを用いてユークリッド距離での最近傍法を表現できる。
また、今回はユークリッド距離を用いた最近傍法について述べたが、距離表現には様々なものがあり、例えば、

- **ミンコフスキー距離**

```math
\begin {align*}
d\left(\mathbf{x}_{i}, \mathbf{x}_{j}\right)=\left(\sum_{k=1}^{q}\left|x_{i k}-x_{j k}\right|^{p}\right)^{1 / p}
\tag{ex6.3.3}
\end {align*}
```  

- **チェビシェフ距離**

```math
\begin {align*}
d\left(\mathbf{x}_{i}, \mathbf{x}_{j}\right)=\max _{k}\left(\left|x_{i k}-x_{j k}\right|\right)
\tag{ex6.3.4}
\end {align*}
```  

- **キャンベラ距離**

```math
\begin {align*}
d\left(\mathbf{x}_{i}, \mathbf{x}_{j}\right)=\sum_{k=1}^{q} \frac{\left|x_{i k}-x_{j k}\right|}{\left|x_{i k}\right|+\left|x_{j k}\right|}
\tag{ex6.3.5}
\end {align*}
```  

などが定義されている。
最近傍法においてこのような距離を用いる場合を考慮して、(ex6.3.1)における$\mathbf{x}^{\top} \mathbf{x'}$を非線形カーネル$\kappa(\mathbf{x}, \mathbf{x'})$で置き換えれば、

```math
\begin {align*}
\kappa(\mathbf{x}, \mathbf{x}) - 2\kappa(\mathbf{x}, \mathbf{x}_{n}) + \kappa(\mathbf{x}_{n}, \mathbf{x}_{n})
\tag{ex6.3.6}
\end {align*}
```  

これで一般的な非線形カーネルを用いた最近傍法を導くことができた。
(参考：PRML本文p7)
RestTemplateにてGetをList形式のDTOで行う

## 概要

ここでは、ParameterizedTypeReferenceを使います。
また、getForObjectではなくRestTemplate.exchange()を使用します。

（List<DTO>のラッパークラスを作成すればgetForObject()でも取得できるようですが、
　ラッパークラス作成が手間なので、今回はやりません）

以下のコードはBearerトークンを使う外部API呼び出しで試したので、
Bearerに関係するコードがありますが、認証が無いAPIをコールするなら必要ありません。

## 実装

``` Player.kt
data class Player (
    val name : String,
    val podition: String
)
```

``` APICaller.kt
fun getPlayers(url: String, token: String) {
    val header = HttpHeaders()
    headers.setBearerAuth(token)
    val entity = HttpEntity<HttpHeaders>(header)

    val players = RestTemplate().exchange(
                   url,
                   HttpMethod.GET,
                   entity,
                   object: ParameterizedTypeReference<List<Player>>(){}).body

    players.foreach {
        println("名前:" + it.name + " 守備位置:" + it.podition)
    }
}
```

```
名前:松坂大輔 守備位置:投手
名前:イチロー 守備位置:外野手
名前:城島健司 守備位置:捕手
```

## 参考
https://spring.pleiades.io/spring/docs/current/javadoc-api/org/springframework/web/client/RestTemplate.html#exchange-java.net.URI-org.springframework.http.HttpMethod-org.springframework.http.HttpEntity-org.springframework.core.ParameterizedTypeReference-
【ネットワークインターフェースのデタッチで】You do not have permission to access the specified resource.が出る

# 原因
**You do not have permission**と書かれてますが特に権限がないわけではなく、**関連付けられているリソースが存在**するため削除できない状態にあります。


# 対処法
descriptionを参照して、関連付けられてるリソースを先に削除するとエラーが解決します。

![スクリーンショット (98).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536448/85541ff2-1313-2a52-33a1-97a50b478db4.png)


NatゲートウェイとRDSが原因になっている場合が多いようです。
【GCP】VMのアクセススコープで混乱した話

私は今 Associate Cloud Engineer の資格取得を目指し勉強中なのですが、とある模擬試験問題で突如現れた「アクセススコープ」という、一見わかりやすそうな単語の意味がわからなくて困りました。いい機会だと思ったので自分なりの解釈を書き残すことにします。（初投稿）
もしも誤りを見つけてくださった方はご指摘いただけるとうれしいです。

#想定読者
以下２点をご存知の方
　・GCPの利用にはアカウントが必要であること
　・アカウントは付与された権限の範囲内でサービスを利用することができること

#VMの認証
VM上で稼働するアプリケーションは、他のサービス（Google Cloud API）と対話するとき、VMに紐付けられたサービスアカウントの認証情報を使用してやり取りを行います。

「ですよね。だから、もし Cloud Storage にファイルを保存するアプリケーションを Compute Engine に載せようと思ったら、Cloud Storage の保存権限を持っているサービスアカウントをVMに紐付けてやればOKですよね。」

と思ってたらちょっと違いました。その紐付けだけでは不十分。さらにアクセススコープの指定が必要なようです。ここで私は混乱してしまいました。こんな具合に。

「アクセス権のようだけど、それはサービスアカウントに付与してるし冗長じゃない？本当に必要？？」

#アクセススコープとは
[Google Cloud のドキュメント](https://cloud.google.com/compute/docs/access/service-accounts?hl=ja)にはこうあります。
> アクセス スコープは、インスタンスの権限を指定するレガシーな方法です。アクセス スコープはセキュリティ メカニズムではなく、gcloud ツールまたはクライアント ライブラリからのリクエストで使用されるデフォルトの OAuth スコープを定義するものです。これは、gRPC や SignBlob API など、OAuth を介して認証を受けないリクエストには影響しないことに注意してください。

#私の解釈
つまりこういうことだと解釈しました。

<b>VMのアプリケーションから Google Cloud API を使うためには
サービスアカウントとVMの各々にアクセス権を与える必要があるのだ。</b>
サービスアカウントにはIAMで。VMインスタンスにはアクセススコープを。

冗長じゃありませんでしたね。すっきりしました。
以上です！
Elastic BeanstalkのドメインをRoute53の独自ドメインに紐付ける方法

# はじめに
Elastic Beanstalkで構築したWebアプリケーションを独自ドメインに紐付ける方法をまとめました

# 方法
Route 53にて、独自ドメイン（Aレコード）を選択して、エイリアスに「はい」を選択する
その後、エイリアス先にElastic Beanstalkのドメインを記入する

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103774/b325f15c-31ea-68f1-b2b3-7a6b383813d4.png)


# 参考
[Route 53 でエイリアスレコードを作成する方法を教えてください。](https://aws.amazon.com/jp/premiumsupport/knowledge-center/route-53-create-alias-records/)

[エイリアスレコードと非エイリアスレコードの選択](https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/resource-record-sets-choosing-alias-non-alias.html)
【JS】経過時間を取得する

# 経過時間を知りたい
どれくらい時間が経過したのか知りたいときに便利です。

```.js
const startTime = Date.now();
let nowTime = 0;

nowTime = (Date.now() - startTime) / 1000;
```

`Date.now()` で
>UTC (協定世界時) での 1970 年 1 月 1 日 0 時 0 分 0 秒 から現在までの経過時間をミリ秒単位で返します。

*参考*
[Date.now()
](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/now)

なので、`1563292043074` みたいな数字が返ってきます。

`startTime` に `Date.now()` が格納された時間から、今この瞬間の`Date.now()` を引くと経過時間のミリ秒がわかります。

求められたミリ秒を1000で割ると秒数を求めることができます。
curl の代わりに POSTMANを使って楽々 REST-APIのテスト、それに新型コロナの公開データへアクセスも可

REST-APIを開発してテストするために、curl はシンプルで、どこでも利用できるから便利だけど、あまり生産性が良くない。そこで、フリーで使える便利なツールを発見したので、忘れないように、情報共有の記事を書くことにした。

Postmanという名前は、ケビンコスナーが主演していたPostmanという映画もあった。それに、至ところでsendmailのメールサーバーのホスト名につけられていたので、メールのツールと一瞬誤解したが、そうではなく、HTTP POSTを手軽に実行できるので、POSTMANとなったのではないかと思う。

## 入手元

ツールの名前は**Postman**で、https://www.postman.com/ からダウンロードできる。

このサイトでは、Postmanの利用用途として、以下６つを挙げている。

* APIクライアント
* 自動テスト
* 設計やモック開発n
* ドキュメント作成
* モニタリング(監視)
* 共有ワークスペース


## 使い方

HTTPプロトコルのGET,POST,PUT,DELETEなどをウェブGUIから選択して、アクセステストができる。GETでREST-APIをアクセスして、以下のように、JSON形式のデータを表示と保存ができる。

![スクリーンショット 2020-07-21 8.59.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42829/19706aff-4bc1-eff0-a7bc-7b27e1a99370.png)

REST-APIでデータ登録の場合は、POSTを選択して、 登録するべきデータは、Body、raw、TEXからJSONを選択して、JSON形式のデータを書いて、Sendとすれば良い。 複数登録したい時は、タブを増やしていくことができる。 また、コレクションに保存しておき、後からの再利用もできる。

![スクリーンショット 2020-07-21 9.02.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42829/8d5d3dc9-4610-996f-f8e0-fe0354906265.png)


実行結果は、画面下の方に受信したボディを表示してくれ、HTTP Statusコードも表示してくれる。

![スクリーンショット 2020-07-21 9.06.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42829/9afe08e0-89d2-b780-f359-4b8b52b865e8.png)


アカウントを登録して、ログインすれば、複数のPostmanのクライアント同士で、コレクションを共有できるようだ。 REST-API開発にとって、とても役に立つ.


## パブリックデータのアクセスも可能

https://covid-19-apis.postman.com には、新型コロナウィルスに関するデータを公開しているリンクがある。この中から適当に選んで、URLなどをPostmanへインポートして利用できる。これは、COVID-19 Tracker というサイトで、各国の感染状況を入手できる。

![スクリーンショット 2020-07-21 9.19.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42829/104739dd-0a05-b2d0-7128-bbdd32496247.png)



## 最後に

IBM Cloud の KubernetesでREST-APIをテストするのに、良いツールはないかと探していたら見つけました。 ウェブサイトでは、いろいろな会社で使われる汎用性が高い有用なツールであることがわかります。
Vue.js  ディレクティブの省略記号

#Vue.jsのディレクティブについて
省略記号は２つのみ（公式より）
https://jp.vuejs.org/v2/guide/syntax.html

###v-bind と v-onの２つ


#結論
####v-bind:は「:」
####v-on:〇〇は「@〇〇」

に省略可能


以下は公式より

```javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
 v-bind 省略記法
<!-- 完全な構文 -->
<a v-bind:href="url"> ... </a>

<!-- 省略記法 -->
<a :href="url"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a :[key]="url"> ... </a>

v-on 省略記法
<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a @[event]="doSomething"> ... </a>

</body>
</html>
```
Vue(Nuxt.js) で親子コンポーネント間でdataを受け渡す方法

Vue(Nuxt.js) で親子コンポーネント間でdataを受け渡す方法です。

## 親コンポーネントから子コンポーネントにdataを渡す方法
↓親コンポーネント↓

```vue:Parent.vue
<template>
  <div class="parent">
    <Childe :user="user" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Childe from '~/components/Childe.vue'

export default Vue.extend({
  components: {
    Childe
  },
  data() {
    return {
      user: {
        name: 'Taro',
        age: 20,
        comment: 'Hello'
      }
    }
  }
})
</script>
```

↓子コンポーネント↓

```vue:Childe.vue
<template>
  <div class="child">
    {{ user.name }} <!--Taro-->
    {{ user.age }}  <!--20-->
    {{ user.comment }}  <!--Hello-->
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  props: ['user']
})
</script>

```

親コンポーネントは`<Childe :user="user" />`で子コンポーネントにdataを受け渡しています。
子コンポーネントは `props: ['user']` で受け取ります。
`{{ user.name }}{{ user.age }}{{ user.comment }}`で受け取ったdataを表示可能です。
複数のdataを受け取る場合は`props: ['user', 'user2', 'user3']`  のように配列に追加することできます。 

### propsは型を定義して受け取ることも可能

```vue:Childe.vue
<script lang="ts">
export default Vue.extend({
  props: {
    user: {
      type: Object,
      required: true,
      default: {}
    }
  }
})
</script>
```

上記の方が明示的です。

## 子コンポーネントから親コンポーネントにdataを渡す方法

```vue:Childe.vue
<template>
  <div class="child"></div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      user: {
        name: 'Taro',
        age: 20,
        comment: 'Hello'
      }
    }
  },
  mounted() {
    this.$emit('childe-data', this.user)
  }
})
</script>

```

```vue:Parent.vue
<template>
  <div class="parent">
    <Childe @childe-data="childeData($event, user)" />
    {{ user.name }}
    {{ user.age }}
    {{ user.comment }}
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Childe from '~/components/Childe.vue'

export default Vue.extend({
  components: {
    Childe
  },
  data() {
    return {
      user: {}
    }
  },
  methods: {
    childeData(user: {}) {
      this.user = user
    }
  }
})
</script>

```

子コンポーネントは`this.$emit('childe-data', this.user)` を用いて、親コンポーネントにイベントとdataの値を引数として渡しています。

親コンポーネント`<Childe @childe-data="childeData($event, user)" />`で受け取り、`this.user = user`で自らのdataに代入しています。

$emitやイベント（メソッド）の受け渡しについては下記の記事でまとめています。
[Vue(Nuxt.js) で親子コンポーネント間でイベント（メソッド）を呼び出す方法](https://qiita.com/TK-C/items/0a3acb9d0d310f8fd380)
Reactのreturn内でコメントアウトする方法

##JSXファイルのreturnで、コメントアウトしようとしたら適用されなかったので方法を調べた。

##結論

// ではなく {/* */} でコメントアウトできる

##環境

atomエディタを使用

##状況

LinkButtonを使用しないので、コメントアウトしようと
command + /　でコメントアウトしようとした。

##変更

```
constHoge = (props) => {
  return (
    <div>
      <h2>{props.title}</h2>
      {/*<LikeButton count={props.count}/>*/}
    </div>
  )
};
```