OmniAICreator/Qiita-1.07M huggingface dataset:
Rails5 yarn addでEIO: i/o errorになる場合の対応

## 発生したエラー

パッケージ追加しようとしたら。。。

```
# yarn add jquery-file-upload
yarn add v1.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
error An unexpected error occurred: "EIO: i/o error, scandir '/sakura/node_modules/request/lib'".
info If you think this is a bug, please open a bug report with the information provided in "/sakura/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
```

`error An unexpected error occurred: "EIO: i/o error, scandir`ってなんですかね。投げやりすぎやしませんかね。どうすればいいんですかね。

## 解決方法

`yarn`を実行するだけだった。
参考：https://github.com/yarnpkg/yarn/issues/4455

```
# yarn
yarn install v1.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 159.12s.
```

## 改めてパッケージ追加

できた!

```
# yarn add jquery-file-upload
yarn add v1.19.1
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 4 new dependencies.
info Direct dependencies
└─ jquery-file-upload@4.0.11
info All dependencies
├─ async@3.2.0
├─ form@0.2.4
├─ jquery-file-upload@4.0.11
└─ validator@12.2.0
Done in 174.41s.
```
namespaceの利用

## namespaceとは
・namespace = 名前空間
・メソッド名や変数名が衝突しないようにするための機能で、classやmoduleを使用する。
・衝突とは同名での定義のことである。
・通常同名のメソッドがあった場合にはエラーが発生せずに実行可能なメソッドを実行してしまう。両方とも実行可能な場合は後に定義された方
・同名のメソッドを定義できるように、機能ごとにclassで分ける方法(PostやTweetなど)とmoduleで分ける方法がある。両者の違いは以下
* classはインスタンス化ができる
* moduleはインスタンス化ができない(固定値やメソッドのみをもつ)

## module

```ruby
module A
  def self.say_hello
    puts "Hello"
  end
end

module B
  def say_hello
    puts "Hello"
   end
  module_function :say_hello
end
A::say_hello
B::say_hello
```
module XXX ~ end のようにmoduleを定義する
外部からこのメソッドを実行するにはselfをつけるかmodule_functionを定義する必要がある
module内のメソッドを実行するにはmodule名::メソッド名と記述する

## namespaceを用いた機能の管理
管理者機能をまとめたコントローラーをcontroller/admin以下に作成した場合にルーティング生成に必要な記述は以下の通り

```ruby:product_controller.rb
class Admin::ProductsController < ApplicationController
  def index
  end
end
```
adminフォルダ内にあるためAdmin::ProductControllerと表記する


```ruby:routes.rb
namespace :admin do
  resources :products, only: :index
end
```
namespace :admin do
でフォルダの場所を記述し、その中でproductsコントローラのルーティングを記述する(今回はindexのみ)
ActiveRecord

##ActiveRecordとは
データベースからオブジェクトを取り出すための便利なメソッドです。
allメソッド
newメソッド
saveメソッド
createメソッド
fromメソッド
findメソッド
などがあります。
[Active Record クエリインターフェイス](https://railsguides.jp/active_record_querying.html)
Ruby 標準入力 ファイルからの入力をコマンドとして実行する方法

#はじめに
標準入力の実行をローカル環境でも試すための方法です。

###前提
使用言語：Ruby

##実行コマンド
```
$ ruby hoge.rb < input.txt
```

###解説
`hoge.rb` : 実行するrubyファイル
`input.txt` : 標準入力したいデータが格納されたtxtファイル

今までは、メソッドの引数に標準入力して得られた配列を考慮して、コーディングテストを受験していましたが、こちらの方法を実行してからは格段に効率が上がりました。

##参考
[標準入出力、リダイレクト、パイプ](https://kin29.info/%E6%A8%99%E6%BA%96%E5%85%A5%E5%87%BA%E5%8A%9B%E3%80%81%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E3%80%81%E3%83%91%E3%82%A4%E3%83%97/)
あなたの macOS には何種類のPythonが入っていますか？私は401種類でしたが。

[あなたの Window 10 には何種類の Python が入っていますか？私は5種類でしたが。](https://qiita.com/hkzm/items/1f00caf199ea059ee800)という記事が「いいね！」を集めていますが、大変残念なのは「結局どの Python を残したのか。」という段落があることです。この記述があたかも「５個もPythonがインストールされているのは異常」という印象を与えてしまっています。

**真のPythonistaは、もしもの時の動作確認用に、全てのPythonをインストールしておくものです！！**

というわけで、以下のコマンドで全てのPython（2020年3月9日現在で398種類）をインストールできます！この他にOS用のと、HomeBrewのPython2と3がインストールされているので**401種類**ですね！

```bash
pyenv install -l | tail -n +1 | cut -b 3- | xargs -n 1 pyenv install -f
```

なお、真面目な話をすると・・・

普通に開発業務をしていると、全プロジェクトが最新版Pythonを使っているわけではないので、サポート中のメジャーバージョン（過去３バージョン）ぐらいは、常に必要になります。マシンを支給された時に、先回りしてインストールしておいた方がいいです。

```bash
# 3.6.x 最新版
pyenv install -l | tail -n +1 | cut -b 3- | egrep '^3.6.\d+$' | tail -1 | xargs -n 1 pyenv install -f

# 3.7.x 最新版
pyenv install -l | tail -n +1 | cut -b 3- | egrep '^3.7.\d+$' | tail -1 | xargs -n 1 pyenv install -f

# 3.8.x 最新版
pyenv install -l | tail -n +1 | cut -b 3- | egrep '^3.8.\d+$' | tail -1 | xargs -n 1 pyenv install -f
```

３バージョンインストールした場合、1(OS) + 2(HomeBrew) + 3(pyenv) = 6種類になります。
【Laravel】Route [login] not defined. を解決する

# 環境
- Laravel Framework 6.14.0

# エラーメッセージ
```php

Symfony\Component\Routing\Exception\RouteNotFoundException
Route [login] not defined.
```

# 経緯
未認証のユーザを弾くため、コントローラに以下のコードを追加したらエラーが発生した。
名前付きルート`login`が存在しないと怒られている。

```php:Http/Controllers/HogeController.php

public function __construct(){
    $this->middleware('auth');
}
```

# 解決法
未認証のユーザはトップページに飛ばしたかったので、トップページへのgetに名前を付けました。

```php:routes/web.php

Route::get('/', function () {
    return view('index');
})->name('login');
```
JSDocのありがたみを知った日

今までコメントは適当に書いてた。反省している。
ひとまず、自分流は以下。

#1.始めはVSCodeでのGASクラスのコードヘルプ

コードヘルプなしでやってるとTypoが多くて実行時にやっと気づくレベル
VSCodeの設定をいじって、ちゃんとクラス、メソッドをでるようにしたらこのTypoが減った（当たり前）

#2.オブジェクト変数でメソッド呼ぶときに不便を感じる

普通に型などなく、letだったり、関数の引数だったりすると、ヘルプは出ず、いままで使ったメソッドがずらり。

#3.ヘルプが出る仕組みをみてメソッドのDocを書いてみた

```javascript

/**
* @param {GoogleAppsScript.Spreadsheet.Spreadsheet } spreadsheet
*/
function func_A(spreadsheet){

}

```
これで、spreadsheet. と.をうった時点でSpeadsheetクラスのメソッドリストがでる。
ありがたい（当たり前）

#4.メソッドの返り値も書いてみる

@returnsというのがあるので、これも記載。（書き方があってるか不安だが気にしない）

```javascript
/**
* スプレットシートで何やらする関数
* @param {GoogleAppsScript.Spreadsheet.Spreadsheet } spreadsheet
* 
* @returns {GoogleAppsScript.Spreadsheet.Spreadsheet } spreadsheet
*/
function func_return_Spreadsheet(spreadsheet)
{
  let result = spreadsheet;
  ...

 return result;
}
/**
* 処理のメインな関数
*/
function main()
{
  let spreadsheet = func_return_SpreadSheet(SpreadsheetApp.getActive());

  spreadsheet.
}
```

こちらも、戻りのspreadsheetのあとに.をうった時点でクラスメソッドやらの一覧がでる。
ありがたい。（当たり前）

#5.当たり前だけどちゃんと書こう

ちゃんとやってる人は書いてる（と思う）けど、ちょっとGASでツールを、となると書いてない人もいるんではないだろうか。
GASはちょっと、で始めると関数爆発しちゃうから、ES６でちょっとした構造化したり、Doc使って引数やら返り値の型を知らせてあげると、ミスが減るんではないかー。と思った次第。

#6.余談
自作クラスもオブジェクト化したり、スタティック関数を呼ぶ場合はヘルプとして出る。
しかし、自作クラスのメンバーは型がAnyになってしまう。
宣言の仕方はいまのところ見つけれてない。
本末転倒だけど、以下のようにしてみた。

```javascript
class A
{
  /**
  *
  * @param {GoogleAppsScript.Spreadsheet.Spreadsheet}
  */
  constructor(spreadsheet)
  {
    this.mySpreadsheet = spreadsheet;
  }
  /**
  *
  * @returns {GoogleAppsScript.Spreadsheet.Spreadsheet } mySpreadsheet
  */
  getMySpreadsheet()
  {
    return this.mySpreadsheet;
  }

}
```
一応、これだと、this.getMySpreadsheet()の戻り値にはSpreadsheetクラスのヘルプが表示される。
コードの量やらコメントが増えるからゴニョゴニョ感じなくはないけど。

**追記**

@memberというのがあった。
上記は以下でもヘルプがでる模様。

```javascript
class A
{
  /**
  *
  * @param {GoogleAppsScript.Spreadsheet.Spreadsheet}
  */
  constructor(spreadsheet)
  {
    /**
    *
    * @member {GoogleAppsScript.Spreadsheet.Spreadsheet}
    */
    this.mySpreadsheet = spreadsheet;
  }

}
```



試行錯誤で作ったので、もっとこうやったほうがいいよ、というのがあったら教えて下さいませ。
AWS AutoScalingについて

#はじめに
AWSのAutoScalingは
AWS 5つの設計原則と11のベストプラクティスの**信頼性**と**パフォーマンス効率**に該当します。
https://qiita.com/avicii2314/items/6553492a3f54cd8e15b2

#Auto Scalingとは
- インスタンスの数を自動で増減できる
- インスタンスの数は最少、最大を指定する
- 増減のトリガーはCloudWatchのメトリックスを指定できる
- 増減のトリガーは時間を指定できる



#Auto Scalingのコンポーネント
###<font color="green">Loaunch Configuretions:起動設定

- Auto Scaling時に起動するEC2インスタンスを定義する
- AMI ID、インスタンスタイプ、ディスクサイズ、キーペア、セキュリティグループ,IAMロール等を指定（EC2インスタンス作成に指定する項目とニアイコール）

###<font color="green">Auto Scaling Groups
- オートスケール対象のEC2インスタンスグループの管理単位
- EC2インスタンスの最少数、最大数、希望する数を指定
- 起動台数をAZ間でバランシングする
- AZ障害時は障害のない別のAZにその分のインスタン
スを起動する

###<font color="green">スケーリングプラン（スケーリングポリシー）
Auto Scalingをいつ、どのタイミグで実施するかの条件を指定
CloudWatchメトリックス（CPU使用率等）、スケジュール、現在のインスタンス数を維持、手動でのスケーリングでの指定が可能

##使い捨てリソースの使用
サーバーなどのコンポーネントを一時的なリソースとして利用・設計する
<img width="234" alt="スクリーンショット 2020-03-08 16.02.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522222/0be9998a-60ae-a25d-9c9f-aebe7e3d6168.png">


##スケーラビリティの確保
需要増にトラフィック量が処理できなくなる前に、処理サーバーを拡張することで対処する必要がある
<img width="416" alt="スクリーンショット 2020-03-08 15.59.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/522222/ef37a195-bdcc-37a1-4a9a-ba45a79eee1f.png">


###スケーリングの種類
スケーリングタイプは垂直スケーリングと水平スケーリングの
2タイプ。Auto-scalingは水平スケーリング

###垂直スケーリング
【拡張方法】
スケールアップ：メモリやCPUの追加・増強
【低減方法】
スケールダウン：メモリやCPUの削減・低性能化

###水平スケーリング
【拡張方法】
スケールアウト：処理する機器／サーバー台数を増加する
【低減方法】
スケールイン：処理する機器／サーバー台数を低減する


#ユースケース
###負荷に基づいた利用
webサイトへのアクセス数の増減
ランダムに要求が発生するバッチ処理のジョブ数が増減

###スケジュールに基づいた利用
毎月決まった時間に発生するバッチの処理
チケット販売などで販売時刻が決まっているwebサイト

###正常なEC2インスタンスの台数を維持するための利用
数分のダウンタイムは許容される一台構成のシステム
Power Automateで、配列の先頭からN個、末尾からN個要素を取得する (take,skip) 

# FirstN,LastN
コレクションやテーブルから最初のN要素、最後からN要素を取得する関数がPower Appsでは用意されています。
それがFirstN、LastNです。名前もそのままなのでわかりやすいですね。

一方で、Power Automateではというと、first関数、last関数はありますが、firstN、lastNはその名前では存在しません。
今回はPower AppsでのFirstN、LastNに対応するような関数を紹介します。

## そもそもどういうときに使おうか

たとえばPower Automateの文脈で私がよく使うとすれば、以下のようなHTMLを分解してデータ化するときです。

```sample.html
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
```
このテーブルをデータにするために、素直にやるのが、trでsplitして、得られた配列をさらにtdでsplitとします。ここで余分なのは、最初のtrでsplitしたときの先頭です。

split結果は以下のような配列になります。(見やすさのために改行コードは取り除いてあります)

```
[
  "<table style=\"width:100%\">",
  "<th>Firstname</th><th>Lastname</th><th>Age</th></tr>",
  "<td>Jill</td><td>Smith</td><td>50</td></tr>",
  "<td>Eve</td><td>Jackson</td><td>94</td></tr></table>"
]
```
一目瞭然、最初に余分な要素がありますね。これを取りのぞきたい！

また各行を今度はtdでsplitしますが、その際には、

```
[
  "<td>Jill",
  "<td>Smith",
  "<td>50",
  "</tr>"
]
```
今度は最後に余計な要素が入っている。。。

このような、最初の1行が不要/最後の1行が不要 のような場合に、使える関数が**[take()](https://docs.microsoft.com/en-us/azure/logic-apps/workflow-definition-language-functions-reference#take)** と**[skip()](https://docs.microsoft.com/en-us/azure/logic-apps/workflow-definition-language-functions-reference#skip)** です。

# take = 最初のN要素を取得する
実際は文字列も対象とできるのですが、割愛します。
take関数は配列の先頭N要素を取得する関数です。先ほどの配列```["<td>Jill","<td>Smith"...]``` のケースでいえば、

```
take(....,3)
```
と書くことで、最後の1つ余分な要素を除外できます。結果以下のような配列が得られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/8abb7225-e078-e565-e764-a5978aebe0bf.png)

もし一般的に書きたい場合には、

```
take([元の配列], sub(length([元の配列]),1))
```
このように書けば、最後の1つを取り除いた結果が任意の行数の配列で得られます。

# skip = 最後のN要素を取得する
引数の指定は少し違いますが、大体意味は同じです。
skip関数は配列の先頭M個をスキップした(取り除いた)結果を返します。

```
skip(createArray(0,1,2,3),2) --> [2,3]
```
ですね。
LastNと同じように、最後からN要素を指定したい場合には、skipの2個目の引数として

```
sub(length([元の配列]),N)
```
を与えればよいです。
最初の配列ではもっと単純に最初の1要素を飛ばしたいので、skip(...,1)とします。

```
[
  "<table style=\"width:100%\">",
  "<th>Firstname</th><th>Lastname</th><th>Age</th></tr>",
  "<td>Jill</td><td>Smith</td><td>50</td></tr>",
  "<td>Eve</td><td>Jackson</td><td>94</td></tr></table>"
]
```
結果は
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/e1398dea-bbfd-3267-b0dd-bf912b7ed12f.png)

目的の配列が得られました。


# 補足
最初のHTMLのテーブルですが、skipとか使うときれいにデータ化できます。(このくらい簡単な場合にはxml化してもよいですが）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202779/226aab52-ad78-f326-5368-ec464ac32d24.png)
【CSS】計算式の関数 calc()

最近もう一度、HTMLやCSSの勉強し直したいと思ったので調べているのですが、

CSSに計算式を可能にする関数calc()というのがあるみたいですね。

横のサイズが

~~~ :CSS
div {
     width:calc(100% - 20px);
}
~~~
レスポンシブな対応時には色々と使えそうです。

CSSについてまとめていきます。
[【ホームページ】 CSS](https://note.com/thecardgame/n/n0c14436741e1)


## 関連記事

【About】(http://qiita.com/sunstripe) - サンストライプ

---

## 制作チーム：サンストライプ

[![sunstripe_logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80600/322f2d60-f19d-af9e-2b6f-7290ca546848.png)](http://sunstripe.main.jp/)
http://sunstripe.main.jp/

(月１WEBコンテンツをリリースして便利な世の中を作っていくぞ！！ボランティアプログラマー/デザイナー/イラストレーター/その他クリエイター声優募集中！!)

### 地域情報 THEメディア
THE メディア 地域活性化をテーマに様々なリリース情報も含め、記事をお届けしてます！！
https://the.themedia.jp/

### ゼロからはじめる演劇ワークショップ
多様化の時代に向けて他者理解を鍛える

https://workshop.themedia.jp/

### プログラミングワークショップ・ウェブ塾の開講！！！
様々なテーマでプログラミングに囚われずに取り組んでいきます。
詳しくはこちら　↓　↓　↓　↓　↓　↓　↓　↓
[プログラミングサロン 月１だけのプログラミング学習塾](https://workshop.themedia.jp/posts/7057553?fbclid=IwAR32CfRQ7RvDOhvuogoSwqxDLMOU7Jvuzljlnx-TMc27qBPX1BnWsfLcBR8
)

### 協力応援 / 支援者の集い
## チーム：サンストライプ
#### プログラミングラボ
https://twitter.com/sunstripe2011

一緒にポートフォリオを作りませんか？現場の体験やそれぞれの立場から年齢関係なく作品を作りたい方々と一緒にチームを作って、作品を作っています。現場に行きたい人には、職場紹介や職場の体験や悩み相談なども受けております。
様々な職種からプログラミングの知識を得たい、デザインの知識を得たい、データーベースの知識を得たいという人が集まっております。
週１のミーティングにそれぞれの近況と作業報告して、たまにリモート飲み会などをしております！！

興味がある方は、DMに話しかけてみてください。

## トラストヒューマン
http://trusthuman.co.jp/
私たちは何よりも信頼､人と考えてます｡

｢コンサルティング｣と｢クリエイティブ｣の両角度から｢人材戦略パートナー｣としてトータル的にサポートします！！

キャリア教育事業
広域学習支援プラットフォーム『のびのび日和』
https://slc-lab.amebaownd.com/

#スポンサー募集
CocoaPodsのインストールで手間取ったこと

Flutterの環境構築で少し詰まったのでメモ。

## 詰まったこと

flutter doctorでエラーを消していく作業中、CocoaPodsのインストールで手間取った。

```
$ sudo gem install cocoapods
~~~省略~~~
Building native extensions. This could take a while...
ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.
```

native extensionsとは。
gemでなんとなく予想はついていたけれど、Ruby関係のエラーっぽい。
とはいえ、Rubyは触ったことがないのでよく分からない。
gemが何なのか分からなかったので調べてみると、Rubyのライブラリ？のようだ。
ということは、何かしらの依存関係が原因でエラーが出ている？？
native extensionsについても調べてみると、Ruby以外の言語（C++とか）で書かれているライブラリを参照しているRubyのコードがあるときに発生するエラーらしい（日本語がわかりにくい）。
現時点で分かっている情報を整理すると、gemの一種であるCocoaPodsをインストールしようとしたけど、CocoaPodsと何かの依存関係が原因で、インストールできなかったと。
こういうこと？？
## さらに
CocoaPodsが何とうまくいっていないのか調べてみると、RubyとCocoaPodsのバージョンが怪しい。
CocoaPodsの最新バージョンはGitによると1.9.0。
しかし、Mojave(10.14.6)にもともとインストールされているRuby2.3.7では正常に動かないらしい。
Rubyのバージョンを下げるか、インストールするCocoaPodsのバージョンを下げることが解決策になるのか・・・？

## 結局

```
$ sudo gem install -v1.8.4 cocoapods -n /usr/local/bin
```
インストールするCocoaPodsのバージョンを1.9.0の一つ前の1.8.4にを下げました（正確にいうとインストール時にバージョン指定した）。
末尾の```-n /usr/local/bin```は、Mojaveではroot権限を持っているユーザーでもusr直下に何かをインストールできないという制約があるため、```-n /usr/local/bin```でインストール先をデフォルトではない```/usr/local/bin```に明示的に変えています。


## 参考
[Rubyのgemをインストールしている際に他のライブラリのインストールを要求してくるnative extensionとは何者か](http://woshidan.hatenadiary.jp/entry/2017/01/21/150948)
[Cocoapodsがインストール出来ず、エラーが発生する](https://teratail.com/questions/243840)
[CocoaPods1.9.0 cannot install on Mojave10.14.6](https://github.com/CocoaPods/CocoaPods/issues/9568)
[MacOSX El Capitanでcocoapodsインストールが出来ない時の対処法]
(https://qiita.com/tasaiii725/items/4bb4708de03e6ee14a4a)
[CocoaPods](https://github.com/CocoaPods/CocoaPods)
Laravel 6.x Font Awesome 5を導入メモ

タイトル通りです。

```sass:/resources/sass/app.scss
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
```

```shell
npm run dev
```

```php:/resources/view/app.blade.php
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
```

できたできたと思ったら、

```
GET http://localhost/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2?462806316fea535a6a57651bc2b000b0 net::ERR_ABORTED 404 (Not Found)
```

なぜかFontsリソースがNot Found
webpackファイルも書き換えが必要とのこと

```js:webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .setResourceRoot('../');
```

無事に表示！！
１時間ぐらいハマってしまった。。。

#参考
https://stackoverflow.com/questions/54839609/how-to-change-the-import-path-of-fontawesome-with-laravel-5-7
VirtualBox + Vagrantで環境構築しよう

駆け出しデータサイエンティストのNishです
仮想マシンを利用した環境構築で、以前にVirtualBoxを紹介しました
[VirtualBoxのインストール](https://qiita.com/Nish1729/items/d92ff401cb3161d768e9)
VirtualBoxを使えば仮想マシンを作成することが出来ますが、GUIでの操作性が微妙だったりするので、
Vagrantを組み合わせて利用するのがオススメです

Vagrantを使用すると、コマンドから仮想マシンの作成が可能なので、作業がかなり楽です
仮想マシンを起動してログインするという一連の作業がコマンド２つで済みます

```
$ vagrant up
$ vagrant ssh
```
↑のコマンドを入力して完了です
便利ですね、Vagrant

今回は、そんなvagrantについての記事です
具体的には、以下の項目について解説します

- Vagrantのインストール
- Vagrantから仮想マシンの作成/起動/停止/削除
- Vagrant+VirtualBoxでPythonの環境構築

# Vagrantのインストール
Vgarantのインストールは簡単です
以下のリンクを参考にして、作業を行って下さい
15分もあれば、vagrantをインストールできると思います
[VagrantをmaxOSにインストール](https://weblabo.oscasierra.net/install-vagrant-onto-macosx/)

# Vagrantから仮想マシンを操作
Vagrantはコマンドから仮想マシンを操作します
ここでは、仮想マシンの作成/起動/停止/削除について解説します
(実際に記載しているコマンドを実行するとCentOS7で動作する仮想マシンが作成されます)

## 仮想マシンを作成
仮想マシンを動作させるためのOSはBoxファイルという形式で扱います
分かりやすい例えで言えば、仮想マシンのテンプレートのようなものです
例えば、CentOS7で動作する仮想マシンを作成する際には、
'centos/7'というBoxファイルをマシンのテンプレートとして使用します

まずはテンプレートをダウンロードする必要がありますね
CentOS7のBoxファイルをダウンロードしましょう

```
$ vagrant box add centos/7
```

仮想マシンのテンプレートがダウンロード出来たのか、確認します

```
$ vagrant box list
```

上記コマンドを入力して、centos/7が表示されていればOKです

さて、テンプレートが手に入りました
まずは、作業ディレクトリを移動して、

```
$ cd ~/Documents/
$ mkdir workspace
$ cd workspace
```

仮想マシンを作成します

```
$ vagrant init centos/7
```
はい、仮想マシンの出来上がりです！(なんと簡単なんだ)
なお、workspaceディレクトリ内にVagranfileなるものが生成されているはずですが、
仮想マシンの各種設定を記述するためのファイルです
このファイルを編集をすることで、自分なりにカスタマイズされた仮想マシンが作れるという訳です

## 仮想マシンを起動
仮想マシンを起動してみましょう
これも、コマンド一発です

```
$ vagrant up
```

起動した仮想マシンへのログインしてみましょう

```
$ vagrant ssh
```
仮想マシンにログイン出来たので、あとはPythonなりNode.jsを入れるなりして環境構築完了ですね
めでたし、めでたし

## 仮想マシンを停止

仮想マシン上での作業が済んだら、ログアウトして、マシンを停止しましょう

```
$ exit
$ vagrant halt
```

## 仮想マシンを削除
仮想マシンを作成して色々作業している途中でやらかしたとします。。
ぐぐり倒しても解決策が見つからない。。
こんなときは最終手段として、仮想マシンを削除して最初からやり直しましょう

```
$ vagrant destroy
```
これで仮想マシンが削除されるので、新規に仮想マシンをつくり直しましょう

# 参考リンク

[Vagrant + VirtualBoxでWindows上に開発環境をサクッと構築する](https://qiita.com/ozawan/items/160728f7c6b10c73b97e)

こちらの記事、とても分かりやすいと思うし、コマンドの一覧もあるので、読むべしといった感じですね
HYC New Product – 1×N MEMS Optical Switch

With the rapid development of optical fiber, the traditional communication devices with electricity as the core is hardly to meet the needs of high-speed and large-capacity optical communication network. MEMS optical switch has become one of the important devices in all optical communication network due to its small size, easy integration and large capacity.

MEMS optical switch is based on Micro-Electro-Mechanical System(MEMS) technology, using the micromirrors to control and switch the optical path. Its function is shown in the following figure:
![未标题-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/85d39306-bb45-592a-cb85-5e98ecdd49aa.jpeg)

MEMS is a micro-device or system which can be produced in batches by interating micro-machinery, micro-actuators, signal processing and control circuits. The principle of MEMS optical switches is very simple. When optical exchange is performed, the angle of the MEMS micro-mirror is moved or changed by the driving of electrostatic force or magnetic power, and the input light is switched to different output ends of the optical switch to realize the switching and on-off of the optical path. Its schematic diagram is shown in the following figure:
![未标题-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/26e356ae-6a0f-a68c-ff37-acf26e60206c.jpeg)

Compared with traditional mechanical optical switches, MEMS optical switches have the following advantages:
1.Small size and large exchange capacity
2.MEMS chip can be mass produced, so the single cost is not high

MEMS Optical Switch is an ideal component for OXC，MCS, system monitoring and protection, optical fiber sensing, and equipment reuse protection.
![Optical switch.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/f33b6eb2-2c81-375e-7905-f4fc5abae960.jpeg)

Now, HYC can provide a series of MEMS optical switches in 1×N configuration, such as 1x2, 1x4, 1x8, 1x16, 1x32, 1x48, etc. Customization is available. The general indicators are as follows: 
![未标题-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/190420ea-873d-6b6a-073c-6074913683ff.jpeg)

About HYC Co., Ltd(http://www.hyc-system.com)
Founded in 2000, HYC CO., LTD (HYC) is the world’s leading passive optical devices OEM/ODM manufacturer who engages in R&D, producing, marketing and providing service of fiber optical products.

Our main products are: Optical Fiber Connector, WDM, PLC splitter, MEMS optical switch and other optical passive basics devices. HYC products and solutions are widely used in 4G/5G, Telecom, Data Center,  Cloud Computing industry and other fields.
【Numba初心者用】高速化が実現されているかチェックするために、nopython=Trueにしておくほうが良い（version 0.50.0以前の場合）

注：Numba version 0.50.0以降はobject mode fall-backが廃止になる予定（http://numba.pydata.org/numba-doc/latest/reference/deprecation.html#deprecation-of-object-mode-fall-back-behaviour-when-using-jit） で、本記事の内容はそれ以前のバージョンに限ります。

Numbaって何？という方はこの方の記事をご覧ください：
https://qiita.com/gyu-don/items/9d223b007ca620e95abc

******************************

Numbaではまずnopythonモードで高速化を試み、それに失敗したらobjectモード（却って遅くなる）に切り替えて実行します（object mode fall-back）。
ところが、__わりと些細なコードの変更でnopythonモードになるか否かが変わってくるため、安全のために最初からnopython=Trueに設定しておいたほうが良い__、ということが本記事の内容です。（デフォルトはnopython=Falseで、これをnopython=Trueにしておくとnopythonモードが失敗した時にはエラーを返してくれます。）


例えば以下のコードで、assert文をコメントアウトした場合はnopythonモード、コメントアウトしない場合はobjectモードで実行されます。

```py
import numpy as np
import numba

@numba.jit
def myfunc():
    for i in range(1000):
        for k in range(1000):
            #assert 0<1
            pass
    hoge = [1,2,3]
    hoge = np.array(hoge)

myfunc()
```

このコードの場合は、そもそも同一の変数名hogeに異なる型（リストとndarray）の変数を割り当てている時点でNumba的に良い書き方ではないのですが、そのような悪い書き方の場合でもnopythonモードで実行される場合があるようです。しかしforループの中にassert文があると、途端にobjectモードになってしまいました（私には原因は分かりません）。
また、良い書き方をしている場合でも、nopythonモードがサポートしていない関数を使うとobjectモードになってしまいます。例⇒ http://numba.pydata.org/numba-doc/latest/reference/deprecation.html#id1

最近のNumbaのバージョンでは、nopythonモードの実行が失敗した時は警告メッセージが出るのですが、__古いNumbaのバージョンではnopythonモードが失敗しても警告メッセージが出ない__（version 0.48.0では警告が出ましたが、version 0.41.0では警告が出ませんでした）ので、いろいろコードをいじっている時に突然に実行速度が遅くなっても、原因に気づきにくいです。

@numba.jit(nopython=True)とすると、nopythonモードの実行が失敗した場合にエラーを返してくれるので安全です。
[GitHub Actions]自動的に古いworkflowをキャンセルする

CircleCIの [Auto-cancel redundant builds](https://circleci.com/docs/2.0/skip-build/) のようなことを実現するやり方です。

下記のように、[Github Actions build canceller](https://github.com/yellowmegaman/gh-build-canceller) の設定を行う。

workflows_filterには、workflowのnameを使用する。


```yaml

name: build_canceller
on:
  pull_request:
jobs:
  build_canceller:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: stop old workflow
      uses: yellowmegaman/gh-build-canceller@v1.6
      with:
        github_token: ${{secrets.GITHUB_TOKEN}}
        workflows_filter: "Test"
```

これで多少節約できるはず。

## 参考
[Github actions: Cancel redundant builds](https://github.community/t5/GitHub-Actions/Github-actions-Cancel-redundant-builds/td-p/29549/page/3)
C言語　配列の最大値を求めるコードいろいろ

配列と配列数が与えられる。インクリメントでミスが内容に、最初と最後に最大値があるテストケースを用意した。

```c
    int a[6] = {1,3,4,8,7,7};
    int b[6] = {1,3,4,5,7,8};
    int c[6] = {8,3,4,5,7,1};
    int n = 6;
```


forと配列を使った書き方

```c
int arrayMax(int *a, int n)
{
    int max = 0;
    for(int i = 0; i < n; i++){
        if(max < a[i]){
            max = a[i];
        }
    }
    return max;
}
```

forとポインタを使った書き方

```c
int arrayMax(int *a, int n)
{
    int max = 0;
    for(int i = 0; i < n; i++){
        if(max < *a){
            max = *a;
        }
        a++;
    }
    return max;
}
```



whileと配列を使った書き方

```c
int arrayMax(int *a, int n)
{
    int max = 0;
    while(n > 0){
        n--;
        if(max < a[n]){
            max = a[n];
        }
    }
    return max;
}
```

whileとポインタを使った書き方

```c
int arrayMax(int *a, int n)
{
    int max = 0;
    while(n > 0){
        if(max < *a){
            max = *a;
        }
        a++;
        n--;
    }
    return max;
}
```
【備忘】AWSでWindows ServerのAMI(日本語版)を見つけるコツ

#何がしたかったか

・AWSでWindows ServerのEC2を立てたい。
・日本語化&パッチあてが面倒なので、AWSから公式に出ているAMI使いたい。

#見つけるコツ(2020年3月時点)

【Windows_Server-yyyy-Japanese】と探す。
※yyyyには適宜構築したい年度を入力
![search.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319379/83879f37-6800-8474-f833-e56b13aff421.png)


去年くらいまでは、検索窓に「japanese　windows」とか入れるだけで見つけられたはずが、
今やるとAND検索がうまくいかなくなったのか、マーケットプレイスのAMIしか出てこなくなってしまった・・・
package.jsonに"engines"を設定すると「このバージョンのNode.jsでしか動かない」を表明できる

特定のバージョンのNode.jsでしか動かしてほしくないパッケージがある場合、package.jsonの`engines`フィールドに、Node.jsのバージョンを明記しておくと、`yarn install`や`npm install`したときに警告を表示できるようになる。

* 実行環境のバージョンを固定したいときに便利。

## 例: Node.js 12だけに限定したい場合

例えば、Node.js 12で実行してほしい場合、次のように`engines`フィールドをpackage.jsonに追加する:

```package.json
{
  "name": "my-module",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "engines": {
    "node": "12.x"
  }
}
```

この設定で、Node.js 13環境下で`yarn install`すると、エラーを起こすことができる:

<img width="471" alt="Hyper.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/43fdb41f-0eaf-42a1-1806-3f0352cb618d.png">

## NPMの場合は、`--engine-strict`オプションが必要

`npm install`で同様の警告を起こすためには、`--engine-strict`オプションをもたせる必要がある。

<img width="473" alt="Hyper.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/0caa0eae-b08c-eaed-515c-cacf13fc2d54.png">

毎回指定するのは面倒なので、.npmrcに設定しておくといい:

```bash:~/.npmrc
engine-strict=true
```

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローお願いします:relieved:→[Twitter@suin](https://twitter.com/suin)
[Flutter]BoxConstraints forces an infinite width .の対処法

## 原因
`Row/Column`が幅(高さ)無限の子ウィジェットを持つときなど、このエラーが起きます。

```dart
Row(
      children: <Widget>[
        Container(
          width: double.infinity,
        ),
      ],
    );
```

## 対処法
`mainAxis` (`Row`ならwidth)方向でエラーが出ている場合、問題が起きている子ウィジェットを`Expanded`で囲みます。

```dart
Row(
      children: <Widget>[
        Expanded(
          child: Container(
            width: double.infinity,
          ),
        ),
      ],
    );
```


## 参考
[Flutter Deep Dive Part 1: “RenderFlex children have non-zero flex…](https://medium.com/flutter-community/flutter-deep-dive-part-1-renderflex-children-have-non-zero-flex-e25ffcf7c272)
【Swift】UIPickerViewのデフォルト値を変更する

## 要約

UIPickerViewのデフォルト値を変更したい場合、以下の2箇所を変更する必要がある。

- PickerViewを開いた後、選択されている値を変更する

``` swift
self.pickerView.selectRow(index, inComponent: 0, animated: false)
```

- PickerViewで選択された値を表示しているTextFieldなどの値を変更する。

``` swift
pickerViewTextField.text = optionList[index]
```

## 備考
- `selectRow`だけ設定すけばいけるやろと思ってハマった…ので備忘録です。
独立した２群の差のt検定 (分散が等しいと仮定できる場合)

## 母平均の検定
「XXの平均とYYの平均」について，２つの平均の間には「差がある」のかどうかを検定する．

帰無仮説は「平均に差がない」，対立仮説は「平均には差がある」

- 独立な２群のt検定
    - 対応のない２群のt検定(２つの母集団の分散が等しいと仮定できる場合)：スチューデントのt検定
    - 対応のない２群のt検定(２つの母集団の分散が異なると仮定できる場合)：ウェルチのt検定
- 対応のある2群のt検定
    - 調査の被験者が同じで，異なる複数の測定が行われた時


## スチューデントのt検定の条件
1. 標本抽出が無作為に行われていること
2. 母集団の分布が正規分布に従っていること
3. ２つの母集団の分散が等しいと仮定できること

この時，２つの母集団それぞれの標本を取り出したときの標本平均の差の分布は，次のようになる

```math
\bar{x_1} - \bar{x_2} \  \~ \     N(\mu_1 - \mu_2, \sigma^2(\frac{1}{n_1} + \frac{1}{n_2}))
```

これを標準化すると

```math
\frac{\bar{x_1} - \bar{x_2} - (\mu_1 - \mu_2)}{\sigma\sqrt{\frac{1}{n_1} + \frac{1}{n_2}}} \~ N(0, 1^2)
```

標準正規分布に従うようになる．分母にある未知の母標準偏差σは次の式で推定できる．

```math
\widehat{\sigma}_{pooled} = \sqrt{\frac{(n_1 - 1)\hat{\sigma_1}^2 + (n_2 - 1)\hat{\sigma_2}^2}{n_1 + n_2 - 2}}
```

$\hat{\sigma_1}^2$と$\hat{\sigma_2}^2$はそれぞれ群の不偏分散を，$n_1$と$n_2$はそれぞれ群のサンプルサイズを示している．

**検定統計量tの実現値**は

```math
t値 = \frac{\bar{x_1} - \bar{x_2}}{\sqrt{\frac{(n_1 - 1)\hat{\sigma_1}^2 + (n_2 - 1)\hat{\sigma_2}^2}{n_1 + n_2 - 2} (\frac{1}{n_1} + \frac{1}{n_2})}}

```

## 例題
ある外食チェーンで，主力メニューを10人に試食してもらい，基準値を50点とする100点満点で採点してもらった．別の８人にはライバル店の主力メニューを食べてもらい，採点してもらった．主力メニューの平均点が77.5点，ライバル店の平均が82.5点だった．この平均に差があるか？

```R
data <- read.csv("./r_sample/chap07/sec02/mean_difference_s/採点.txt", header=T)
menu1 <- data$当店
menu2 <- data$ライバル店[!is.na(data$ライバル店)] #欠損値を除いてベクトルに代入

mean_menu1 <- mean(menu1)
mean_menu2 <- mean(menu2)

pool <- sqrt(  # poolされた標準偏差
  (
    (length(menu1) - 1) * var(menu1) + 
      (length(menu2) - 1) * var(menu2)
  )
  / (length(menu1) + length(menu2) - 2)
)

#統計検定量t値の分母の計算
dn <- pool * sqrt(1 / length(menu1) + 1 / length(menu2))
#統計検定量の実現値を求める
st <- (mean_m1 - mean_m2) / dn

#自由度
dof <- length(menu1) + length(menu2) - 2
#自由度がサンプルサイズの合計 - 2 のt分布における下側確立0.025のt値を求める
t_low <- qt(0.025, dof)
t_upp <- qt(0.025, dof, lower.tail = FALSE)

curve(dt(x, dof), -3, 3)
abline(v=qt(0.025, dof))
abline(v=qt(0.975, dof))
```

<img width="537" alt="スクリーンショット 2020-03-09 11.21.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/6854beb3-8b76-0246-e290-0aacf372dfee.png">

統計検定量t値の実現値は-1.57だった．棄却域に入っていないので，帰無仮説の「２つの商品の平均点には差がない」を採択する．

## p値を求めてt検定を行う
**p値**とは，帰無仮説が正しいという仮説のもとで，「標本から計算した検定統計量の実現値以上の値が得られる確率」のこと．

```R
p <- 2 * pt(st, dof)
# stは検定統計量，dofは自由度
# 0.133... で0.05より大きいので，帰無仮説を棄却．平均に有意な差はない．
```

## t.test()関数で検定統計量t値の実現値を求める
`t.test(data1, data2[, var.equal=T])`
var.equal=Tでスチューデントのt検定を行う

```R
t.test(menu1, menu2, var.equal = T)
```

<img width="503" alt="スクリーンショット 2020-03-09 11.31.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517036/bd75c8c5-c82c-a0e2-2a01-90ec5fa12f13.png">
Checkbox の Vue コンポーネントを作成する Tips

前提
----
- `vue-property-decorator`
- TypeScript


やりたいこと
-----

ただのチェックボックスをコンポーネント化して複数のページから使いたい。

![capture.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49585/b8a28193-bd61-4be1-ebd1-e1acf187e6ef.gif)



# やり方

大きく２ステップ。

## Checkbox を親コンポーネントから渡した値を設定する。

子は prop を受け取るようにして。


```
@Component
export default class MyCheckbox extends Vue {
  @Prop({ default: false }) checked
```

親はデータを渡すだけです。

```
<my-checkbox v-model="isChecked"></my-checkbox>
```

## Checkbox の変更を親コンポーネントへ通知する。

emit を利用して更新された値を通知してあげます。

```vue
<input 
  id="checkbox" 
  type="checkbox" 
  :checked="checked" 
  @input="$emit('input', $event.target.checked)">
```

# ハマったところ

## チェックボックスの View が更新されない

<img width="277" alt="スクリーンショット 2020-03-09 11.15.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49585/104a4674-0253-0689-7ea1-73f476bcfa89.png">

^こういう状態が起きていました。value には true が設定されているが、チェックボックスに反映されていません。

v-model は `:value` `@input` のシンタックスシュガーという理解だったので `:value="checked"` を設定していたのですが、チェックの状態を同期したいので正しくは `:checked="checked"` でした。

## 警告が表示される

<img width="905" alt="スクリーンショット 2020-03-09 11.20.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/49585/8dcdcbad-a157-d0a3-3ef8-b8ae22974ed9.png">

Vue には**利用されるコンポーネント(子コンポーネント)は props で渡された値を変更してはいけない**という原則があり警告が表示されます。

親コンポーネントへの通知は以下のように設定していました。
これでは props のデータを上書きしてしまいます。

```vue
@input="checked = $event.target.checked"
```

以下のように通知することで警告なしに同様の結果を得られることができました。

```vue
@input="$emit('input', $event.target.checked)"
```

## まとめ

- checkbox の bool 値を制御したい場合は value ではなく checked を。
- input の変更を親に通知して値を変更したい場合は `$emit('input', xxx)` を利用する。


全体図
----

### 親

```vue
<template>
  <div>
    <my-checkbox v-model="isChecked" label="チェックボックス"></my-checkbox>
    <p>設定された値：{{ isChecked }}</p>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import MyCheckbox from '~/components/MyCheckbox.vue'
@Component({
  components: {
    MyCheckbox
  }
})
export default class index extends Vue {
  isChecked = true
}
</script>
```

### 子

```vue
<template>
  <div>
    <label>{{ label }}
      <input id="checkbox" type="checkbox" :checked="checked" @input="$emit('input', $event.target.checked)">
    </label>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class MyCheckbox extends Vue {
  @Prop({ default: false }) checked
  @Prop() label
}
</script>

<style scoped>
  /* 好きなスタイルを当てる */
</style>
```

参考
---
- https://jp.vuejs.org/v2/guide/components.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%A8%E5%80%A4%E3%82%92%E9%80%81%E5%87%BA%E3%81%99%E3%82%8B
- https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86
在宅ワークで作業進捗が2倍近くになった話

# 概要
タイトルの通り、リモートワークにより、仕事の進捗が爆速になりました、という話。
ただ、私個人の性質によるものが非常に大きいので、これをすれば、誰でも爆速になりますよ、という話ではありません。

# はじめに
2020年3月の執筆現在、某ウイルスの影響で弊社では、暫定的に、在宅リモートワークが推奨されています。
なお、執筆時点では継続中ですが、あくまでウイルスの感染リスクが高い期間限定の対応という位置付けです。

私はエンジニアで、私のチームはスクラム開発をしているのですが、週１のスプリント計画ミーティングの時は出社し、その他の日は在宅勤務にしようということにしました。

それまで弊社は、原則リモートワークは禁止であったため、働き方が大きく変わりました。
今回は、その結果(チームではなく、私個人の話)を共有します。

# 在宅ワークの成果
## よかった点
**作業進捗が2倍近くになりました。**

スクラム開発では、ベロシティという概念があります。
スプリント計画時に、1スクラムで実施するタスクを洗い出し、各タスクに仕事量のポイントを付与します。(ポイントは他タスクとの相対量であり、絶対的な基準があるわけではありません。)

これまで、私個人が1スプリントで消化できるポイントがおよそ13~15であったのに対し、在宅リモートワークにより、**20~30**まで増大しました。

## 悪かった点
* 他メンバーとのコミュニケーションが、基本電話会議になるため、ホワイトボードを使ったコミュニケーションが困難。
    * ツールの工夫次第で解消できる問題だと思います。
* 仕事とは直接関係ない話をすることができない。
    * エンジニアであれば、ちょっとした技術の話などを雑談することもあると思いますが、要がないと会話しようとしないので、そのような会話ができません。

他にも、在宅ワークが長期化し、積み重なると顕在化する懸念事項はあると思いますが、現時点で感じた部分としては以上です。

# 理由分析
今回、よかった点にフォーカスしたいので、悪かった点については特に細かく分析しません。

## 質(作業効率)
#### 概要
* 集中力が向上
* 気分転換が容易
* 会話と集中の時間が分けられる

#### 集中力が向上
これは人によって逆になります。 事実、チームメンバーには、会社の方が集中できる、という人もいます。(というか、そちらのタイプの方が多い気がします。)

一方、私個人としては、子供の頃から家が一番集中できる人間でした。学校や図書館では人目が気になるのか、どうしても集中力が落ちてしまいます。

また、職場にある値段の高い高級な椅子よりも、家の安っぽい座椅子とコタツ机でやる方が集中できます。

#### 気分転換が容易
喫煙者であれば、喫煙所でタバコを吸うことで、気分転換をする人もいるかと思いますが、私はタバコを吸わないので、別の手段が必要です。

会社の場合、散歩くらいしか選択肢がないです。
散歩はいいのですが、一度ビルから降りないといけず、歩けば歩くほど、自席から遠のいてしまい、咄嗟に仕事に戻りたいと思っても、戻るまで時間を要してしまいます。

家にいる場合、<font color="Red">皿洗いや部屋掃除など、家事をする</font>という気分転換ができます。(家事では気分転換にならない、という人もいるかと思いますが)
あとは、誰もいないので、<font color="Red">部屋の中で歩き回ったり、ジャンプしたり、肩を回したり</font>といったことも自由です。
しかも、ひらめきがあって<font color="Red">仕事に戻りたいと思った時、すぐに戻れます</font>。

#### 会話と集中の時間が分けられる
会社にいると話しかけやすいので、どうしても話しかけられ、集中が途切れてしまうことも多いです。
一方、在宅ワークとなると、「〜について、会話したいので、XX時から電話会議お願いできますか？」となるので、予め、切り替えの時間がわかります。

集中と会話の時間が予め区切れていると非常にありがたいです。

## 量(作業時間)
#### 概要
* 通勤時間がなくなる
* ワークライフバランスではなく、ワークアズライフになる

#### 通勤時間がなくなる
特に説明不要でしょう。 普段、どれだけ通勤時間で仕事の時間を無駄にしているかがわかります。

この通勤時間を節約するために、会社の近くに住む人もいますが、私は会社のために家を選ぶという行為が好きに慣れないので、これまで通勤時間を犠牲にしてきました。

#### ワークライフバランスではなく、ワークアズライフになる
これが、最大要因かと考えています。

在宅リモートワークをしていると、寝ている時間など人間として生きていく上で必要な時間以外のほとんどを仕事をする時間になりました。(これは、**自分は、仕事が好きである**、という前提があります)

まず、朝の時間です。上で通勤時間の節約とありますが、実際はそれ以上です。
出社する場合、朝起きてから、業務開始まで私はおよそ2時間ありました。しかし、在宅ワークの場合、**起きてから仕事を始めるまでの間は、<font color="Red">およそ5分**</font>です。

朝食は摂るタイプなのですが、調理するわけでもないので、気分転換の間にでも食べればいいです。

夜は朝以上です。
出社する場合、「**これから帰らなければならない**」というタスクがあるため、ある程度の時間で仕事を切り上げようという意識が働きます。

一方、家にいる場合、「**帰る**」というタスクがなくなるので、他にやりたいことができたり、眠くなるまで、終わらせる必要がありません。

これらにより、仕事時間がグッと上がりました。

# おわりに
在宅ワークがあう人、合わない人。 リモートワークが良い会社、良くない会社、それぞれだと思うので、自分や会社にあう形を選ぶのがいいかと思います。

私は在宅ワークを試してみて、在宅ワークの方が自分の力を発揮できるタイプだと感じました。
VirtualBoxのインストール

駆け出しデータサイエンティストのNishです
プログラミング学習する上で、開発環境の構築でつまずくことは多々あると思います
ちなみに僕は、会社貸与のPCでPythonのバージョンが切り替えられなくなり、かなり焦ったことがありました

手軽に(ビビらず)環境構築ができる、仮想マシンについて紹介します
今回は、仮想マシンを実際に作成するところまでを書きました
(間違っている箇所がありましたら、指摘していただけると助かります。.)

# 仮想マシン

僕はmacOSのマシンを使用して開発していますが、このmacOSマシン上にLinuxで動作する仮想マシンを作成しています
OSの動作をソフトウェアでシミュレートしているイメージですね
このように、ソフトウェアによってシミュレートされたマシンを仮想マシンと呼びます
物理的な実態がないから「仮想」マシンなんですね

仮想マシンを利用することで、Linuxで動作するプログラムの開発をmacOSから行えるようになります
また、冒頭にも述べた通り、環境構築で下手を打っても焦る必要がなくなります
なぜかというと、作成した環境を削除して作り直すことが出来るからです
「やべ。ミスった。。」
「まぁでも最初からやり直せばいっか！」
みたいな感じで、ミスっても特に何も焦ることがありません

といったように便利な仮想マシンを実際に作成するために利用するのが、次にお話しするVirtualBoxです

# VirtualBox

## VirtualBoxの雰囲気をつかむ

VirtualBoxを利用することで仮想マシンを作成することができます
VirtualBoxで作成した仮想マシンはGUIで操作することができるので、敷居は低いように思います

![スクリーンショット 2020-03-09 10.42.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597134/62b21c03-6aa3-b227-fd8f-727b0b098bed.png)

このように、左側に作成した仮想マシンの一覧が表示されます
仮想マシンを選択して、

![スクリーンショット 2020-03-09 10.42.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597134/f335ec75-82e6-0a64-4f15-14c1e2219910.png)

起動ボタンをポチッとします
すると、黒い画面が表示されます
ユーザ名とパスワードを入力すると、仮想マシンに無事、ログインすることができました

![スクリーンショット 2020-03-09 10.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597134/81681ea5-b84c-ca05-f217-a818e7793de4.png)

この黒い画面で各種コマンドを打つことで、環境構築を行うことができます

## VirtualBoxを実際にインストールする

VirtualBoxをインストールするには、

[公式ページ](https://www.virtualbox.org/)にアクセスして、
![スクリーンショット 2020-03-09 10.53.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597134/0e00e7de-6043-5e68-6356-2d3cf7ecc57b.png)

Downloadとかかれたボタンをクリックする
ダウンロードページに移動するので、

![スクリーンショット 2020-03-09 10.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597134/fd1df17f-8ef3-7710-c879-de07052718fd.png)

自分の環境に合わせて、インストールを行って下さい
以下のリンクを参考にしながら、作業を行えば、無事にインストール出来るはずです

[VirtualBoxのインストール方法](https://qiita.com/yacchi1123/items/3a9cbdcc8e9e2508b035)

[[初心者でもわかる]VirtualBoxのインストール方法](https://eng-entrance.com/virtualbox-install)
PHP7.3以降でAsia/TokyoでUTCとの時差が9:18:59になることがある

下記のようなコードで検証。

```php
<?php
$zero = new DateTime('0000-01-01', new DateTimeZone('utc'));
$zero->setTimezone(new DateTimeZone('Asia/Tokyo'));
var_dump($zero->format('Y-m-d H:i:s')); // string(19) "0000-01-01 09:18:59"

$y1887 = new DateTime('1887-01-01', new DateTimeZone('utc'));
$y1887->setTimezone(new DateTimeZone('Asia/Tokyo'));
var_dump($y1887->format('Y-m-d H:i:s')); // string(19) "1887-01-01 09:18:59"

$y1888 = new DateTime('1888-01-01', new DateTimeZone('utc'));
$y1888->setTimezone(new DateTimeZone('Asia/Tokyo'));
var_dump($y1888->format('Y-m-d H:i:s')); // string(19) "1888-01-01 09:00:00"

$y2000 = new DateTime('2000-01-01', new DateTimeZone('utc'));
$y2000->setTimezone(new DateTimeZone('Asia/Tokyo'));
var_dump($y2000->format('Y-m-d H:i:s')); // string(19) "2000-01-01 09:00:00"
```

なんで 1887年以前だと"9:15:59"なん?ってのは [18分59秒をめぐって日本標準時の歴史をひもとくことに - エムスリーテックブログ](https://www.m3tech.blog/entry/timezone-091859) に詳しく書かれてます。

PHP7.2までだと発生しなかったようなので、PHP7.3になってから、いつの時差なのかを考慮するようになったのかなと思います。
HTMLコンテンツをcurlで取得して特定タグ内だけ抜き出す

# コンテンツ取得
```sh:コンテンツ取得
#!/bin/sh
curl -fsSL http://www.wisdomsoft.jp/190.html |
    tr '\n\r' '\t' |
    sed -e 's/\t//g' |
    grep -oP '<div class="SectionContents".*?</div>' |
    sed -re 's_</?p>_\n_g' |
    grep -vE '</?div'
```

1. curlでURLのコンテンツ取得
1. trで改行(\r\n)をタブ文字(\t)に変換
1. sedでタブ文字を消す
1. grepでSectionContentsクラスを抜き出す。-PでPerl正規表現を使って最短一致する。これをつけないと最長一致で</div>を抜き出してくる
1. sedで`<p>`タグを改行にする。-rで拡張正規表現を使わないと?(0文字または1文字)を表現できない
1. grep -vで`<div>`タグを消す。-Eで拡張正規表現を使わないと?(0文字または1文字)を表現できない

# リンク抜き出し
```sh:リンク抜き出し
#!/bin/sh
curl -fsSL http://www.wisdomsoft.jp/189.html |
    grep -o '<li><a href=".*.html">.*</a></li>' |
    tr '"<>' ' ' |
    awk '{print "http://www.wisdomsoft.jp/"$4.html,$5}'
```

1. curlでコンテンツ取得
1. grep -oでリストタグ内のリンク行のみ抜き出し
1. trで "と<と>をスペースに変換
1. awkで特定列の取得とリンクの保管


# wisdomsoftコンテンツをすべてtxtに書き出す
```sh:wisdomsoftコンテンツをすべてtxtに書き出す
#!/bin/sh
# http://www.wisdomsoft.jp/189.htmlのリンクから
# リンク先のコンテンツをwisdomsoft.txtに書き出す
URL="http://www.wisdomsoft.jp/189.html"
./wisdomsoft_link.sh ${URL} |
    awk '{print $1}' |
    xargs -I{} ./wisdomsoft_content.sh {} > wisdomsoft.txt
```

# まとめ
pythonのBeautifulSoup4を使ってコネコネしていましたが、ふとshellスクリプトを組みたくなって、15分休憩時間X3で作ることができました。shellって素晴らしい。

sed -rとかgrep -Pとか拡張正規表現[^1]を使う方法が勉強になりました。
この程度だったらgrepよりawkの方がパフォーマンス良いのかな？
改善あったら教えてください。。

[^1]: [【正規表現】個人的備忘](https://qiita.com/kod314/items/8e09b9c6d17c544d3b5e#2-%E6%9C%80%E5%88%9D%E3%81%AB%E5%87%BA%E7%8F%BE%E3%81%99%E3%82%8B%E6%8C%87%E5%AE%9A%E6%96%87%E5%AD%97%E3%81%BE%E3%81%A7%E3%83%9E%E3%83%83%E3%83%81)

[Gist/u1and0](https://gist.github.com/u1and0/5a98450281e651f73e3ef19d52b4ec9a)
UILabelやUITextFieldなどで箇条書きをきれいに表示する

# 概要

iOSのUILabelやUITextで箇条書きテキストを表示したい場合の実装例です。

単純に実装すると以下のBeforeのようにインデントや適切な行間がなく見辛くなってしまいますが、これをAfterのようにきれいに表示できます。

|Before|After|
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113553/b56149de-0077-6ef1-a446-2371b211d6c1.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113553/1be25c2f-6702-a04c-3139-1ac93ed4a871.png)|

# 実装方法

XcodeのPlaygroundで実行可能なコードサンプルです。

```swift
import UIKit
import PlaygroundSupport
let text = "※以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。※上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。※ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。"

let label = UILabel()
let bulletString = "※"

// 段落のインデント幅を決定するよりも前にフォントサイズを設定する
var attributes = [NSAttributedString.Key: Any]()
attributes[.font] = UIFont.systemFont(ofSize: 10)

// 段落設定で段落のインデント幅、段落間の余白を設定する
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.headIndent = (bulletString as NSString).size(withAttributes: attributes).width
paragraphStyle.paragraphSpacing = 8
attributes[.paragraphStyle] = paragraphStyle

// PlaygroundやXIBで日本語フォントが正しく表示されない問題の対応
attributes[kCTLanguageAttributeName as NSAttributedString.Key] = "ja"

let bulletedListText = text
    .split(separator: "※")
    .map { bulletString + $0}
    .joined(separator: "\n")
label.attributedText = NSAttributedString(string: bulletedListText, attributes: attributes)
label.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
label.textColor = .label
label.backgroundColor = .systemBackground
label.numberOfLines = 0

PlaygroundPage.current.liveView = label
```
ssh接続先でのfstabから情報取得しコマンド実行したい

接続先のfstabを読み込んで、特定マウント先のみアンマウントしようと思っています。
下記スクリプトだと接続元のfstabを読み込んでしまいます。
接続先のfstabを読み込んで動作させるためにはどのようにしたら良いでしょうか？

------------------------
fstsb=/etc/fstab
while read line; do
 expect -c "
  spawn echo $line |grep 10.200.xxx.xxx | awk -F " " '{print "umount " $2}'
  expect \"~]# \"
 "
done </etc/fstab
C言語　再帰処理とリンクリスト構造を使った数字のリスト

C言語　リンクリスト構造を使った数字のリスト - Qiita
https://qiita.com/Kchan_01/items/282d413beffc35696ce8
で書いたコードが再帰処理を使って書き換えられると指摘を頂いたので、書き換えてみる。

__再帰的な処理は、帰納的に定義されたデータ・セットに対して相性がいい__ということを身を以て体感できた。


```c
#include <stdio.h>
#include <stdlib.h>

typedef struct List List;
struct List
{
    int number;
    List* next;
};

List* addListNotFirst(List* list, List* newList);
List* addList(List* list, int n);
List* displayList(List* list);
void deleteAll(List* list);

int main(void)
{
    List *list;
    list = NULL;
    list = addList(list, 30);
    list = addList(list, 33);
    list = addList(list, 35);
    list = addList(list, 36);
    list = addList(list, 38);
    list = displayList(list);
    deleteAll(list);
    return 0;
}

List* addListNotFirst(List* list, List* newList)
{
    if(list->next == NULL){
        list->next = newList;
    } else {
        addListNotFirst(list->next, newList);
    }
    return list;
}

List* addList(List* list, int n)
{
    List* newList;

    newList = malloc(sizeof(List));
    newList->number = n;
    newList->next = NULL;

    if(list == NULL){
        list = newList;
        return list;
    }
    return addListNotFirst(list, newList);
}

List* displayList(List* list)
{
    if(list != NULL){
        printf("%d\n",list->number);
        displayList(list->next);
    }
    return list;
}

void deleteAll(List* list)
{
    if(list->next != NULL){
        deleteAll(list->next);
    }
    free(list);
}
```

##所感
__再帰的な処理は、帰納的に定義されたデータ・セットに対して相性がいい__。ということが身を持って理解できた良い経験だった。


最初書き直した時、下記のような書き方をした。
この書き方だと今回は想定されていないが、NULLのリストが渡されたときに危険。

```c
void displayList(List* list)
{
    printf("%d\n",list->number);
    if(list->next != NULL){
        displayList(list->next);
    }
}
```

なので、下記のようにまずリストがNULLでないか確認するように書くほうが安全。

```c
List* displayList(List* list)
{
    if(list != NULL){
        printf("%d\n",list->number);
        displayList(list->next);
    }
    return list;
}
```

また、変数を宣言させた書き方もしてしまったが、これだと再帰の良さを活かせていない。再帰は最初に呼び出した段階に戻ってこさせることができるので、一時的に保持させる変数を置かなくてよいところがメリット。

```c
List* addListNotFirst(List* list, List* newList)
{
    List* first = list;
    if(list->next != NULL){
        addListNotFirst(list->next, newList);
    } else {
        list->next = newList;
    }
    return first;
}
```

下記のように書ける

```c
List* addListNotFirst(List* list, List* newList)
{
    if(list->next == NULL){
        list->next = newList;
    } else {
        addListNotFirst(list->next, newList);
    }
    return list;
}
```



【振り返り用：first code】再帰処理とリンクリスト構造を使った数字のリスト
https://qiita.com/Kchan_01/private/5981b8f76a4dea09958e
スムーススクロール 2020年版

#やりたいこと
- アンカーリンク（#から始まるリンク）をクリックすると、スクロールして移動する
- #を含むURLの場合は、遷移した先で該当箇所までスクロール移動

#できたコード
```function.js
$(window).on('load',function(){
    var locUrl = location.href;
    var setHash = locUrl.split('#');
    //現在のページURLに#が含まれる場合はスクロール移動
    if(setHash[1]){
        hashMove("#"+setHash[1]);
    }
    //#pagetop
    $('#pagetop a').on('click',function() {
        var href = $(this).attr("href");
        var clkUrl = href.split('#');
        hashMove("#"+clkUrl[1]);
        return false;
    });
    //#から始まるリンクはスクロール
    $('a[href^="#"]').on('click',function() {
        var href = $(this).attr("href");
        var clkUrl = href.split('#');
        hashMove("#"+clkUrl[1]);
    });
    //#を含むリンクは、リンク先と現在のページのURLを比較して判断
    $('a[href*="#"]').on('click',function() {
        var href = $(this).attr("href");
        var pageURL = location.pathname;
        reg = new RegExp(pageURL);
        //ページ名が同じならスクロール移動
        if (href.match(reg)) {
            var clkUrl = href.split('#');
            hashMove("#"+clkUrl[1]);
        }
    });
 
    function hashMove(trg){
        var position = $(trg).offset().top;
        if($('body').hasClass('admin-bar')){
            position = position - 50;
        }else{
            position = position - 20;
        }
        if($('body').width() <= 980){
            position = position - 50; //見出しの文字が切れるのを防ぐ
        }else{
            position = position - 150; //見出しの文字が切れるのを防ぐ
        }
        $('body,html').animate({scrollTop:position}, '800', 'swing');
    }
});
```
WordPressで使用することを想定しているので、admin-bar の有無判定をしてます。
pagetopの箇所はサイトに合わせて変更してください。

#注意事項
- 使用jQueryは3.xを想定。
- 使用ページでLazyLoadなどを使っていると、高さをうまく計算できず、正しい場所にスクロールしないので併用しない方がいいです。

※自分の個人ブログからの転載です（https://memo.ark-under.net/memo/4571 ）
【Linux】ファイル、ディレクトリ操作のコマンド

業務でLinuxを使って開発をすることになった・・・
が、コマンド操作が分からないので基本から勉強（使いこなせないと、業務効率が悪い）。
アウトプットして、使いこなせるようになりたい。

## [ **ls** ] : ファイルやディレクトリの参照
```ruby:書式
ls [オプション] [ファイル]
```
|オプション|オプション説明|
|---|---|
| -a|隠しファイル含めて、すべて出力する|
| -l|長形式で出力する|
| -t|更新時間でソートして出力する|
| -r|逆順でソートして出力する|

## [ **cp** ] : ファイルのコピー
```ruby:書式
cp [オプション] コピー元 コピー先
```
|オプション|オプション説明|
|---|---|
| -i|処理を実施するときに、確認をする|
| -r|ディレクトリを対象にする|
| -p|元ファイルの情報を保存する|

## [ **mv** ] : ファイルの移動
```ruby:書式
mv 移動元ファイル 移動先ファイル
```
|オプション|オプション説明|
|---|---|
| -i|処理を実施するときに、確認をする|
| -f|強制的に処理を実行する|

## [ **rm** ] : ファイルの削除
```ruby:書式
rm ファイル名
```
|オプション|オプション説明|
|---|---|
| -i|処理を実施するときに、確認をする|
| -f|強制的に処理を実行する|
| -r|ディレクトリを対象にする|

## [ **pwd,cd,mkdir,rmdir** ] : ディレクトリの操作

|コマンド|説明|補足|
|---|---|---|
| pwd|現在のディレクトリを表示する||
| cd|ディレクトリを変更(移動)する|cd -（ハイフン）で移動前のディレクトリに戻る|
| mkdir|ディレクトリを作成する||
| rmdir|ディレクトリを削除する||

## 特別なディレクトリを表す記号

|コマンド|説明|
|---|---|
| .|カレントディレクトリ|
| ..|親ディレクトリ|
| ~|ホームディレクトリ(ユーザの作業開始位置)|
| /|ルートディレクトリ(ディレクトリ階層の最上位階層を示す)|

## [ **cat** ] : ファイル内容を表示
```ruby:書式
cat ファイル名
```
|オプション|オプション説明|
|---|---|
| -n|行番号を付加して表示する|

## [ **less** ] : ページャを使ってファイル内容を表示
```ruby:書式
less ファイル名
```
|オプション|オプション説明|
|---|---|
| スペース|次のページに進む|
| b|前の一画面に戻る|
| f|次の一画面に進む|
| ↑|前の行に進む|
| ↓|次の行に進む|
| /単語|単語を検索する　nキーで検索結果に飛ぶ|
| q|ページャコマンドを終了する|

## [ **find** ] : ファイルの検索

```ruby:書式
find パス -name ファイル名
```
|オプション|オプション説明|
|---|---|
| -type f|ファイルのみを対象とし検索する|
| -type d|ディレクトリを対象とし検索する|

## [ **help** ] : ヘルプの使い方
```ruby:書式
コマンド --help
```

## [ **man** ] : マニュアルの使い方
```ruby:書式
man コマンド名
```
|オプション|オプション説明|
|---|---|
| -k 単語|単語が含まれているエントリ一覧を出力する|

## [ **touch** ] : ファイルのタイムスタンプの変更
```ruby:書式
touch [オプション] ファイル名
```
|オプション|オプション説明|
|---|---|
| -t|更新時刻を指定する [[CC]YY]MMDDhhmm[.SS]形式 ([]内は省略可)|

## [ **head,tail** ] : ファイルの一部取得
```ruby:書式
head [オプション] ファイル名
tail [オプション] ファイル名
```
|オプション|オプション説明|
|---|---|
| -n|先頭/末尾から指定した行を標準出力する|
| -c|先頭/末尾から指定したバイト分を標準出力する|

## [ **diff** ] : ファイルの比較
```ruby:書式
diff [オプション] ファイル1 ファイル2
```
|オプション|オプション説明|
|---|---|
| -c|context diff 形式で差分出力する|
| -u|unified diff 形式で差分出力する|
【Nuxt.js】ラジオボタンのイベントの値を取得する方法

### やりたいこと
ダウンロードしたsvgを使って、ラジオボタンを実装したい
そのためにラジオボタンのイベントの値を取得したい（changeイベント）

### 実際のコード

```vuejs:radio.vue
<template>
  <section>
    <div class="radio_label">性別</div>
    <div class="radio_select">
      <input
        type="radio"
        name="sex"
        id="male"
        value="男性"
        v-model="picked"
        v-on:change="onChange"
      />
      <label for="male">
        <RadioInSvg v-if="maleFlag" />  <!-- maleFlagがtrueの場合 -->
        <RadioOutSvg v-else />  <!-- maleFlagがfalseの場合 -->
        男性
      </label>
      <br />
      <input
        type="radio"
        name="sex"
        id="female"
        value="女性"
        v-model="picked"
        v-on:change="onChange"
      />
      <label for="female">
        <RadioInSvg v-if="femaleFlag" />  <!-- femaleFlagがtrueの場合 -->
        <RadioOutSvg v-else />  <!-- femaleFlagがfalseの場合 -->
        女性
      </label>
    </div>
  </section>
</template>

<script>
import RadioInSvg from "@/assets/radio_in.svg"  // svgはassets配下に配置しimportする
import RadioOutSvg from "@/assets/radio_out.svg"

export default {
  components: {
    RadioOutSvg,
    RadioInSvg
  },
  data() {
    return {
      maleFlag: false,  // 初期値の設定
      femaleFlag: false  // 初期値の設定
    }
  },
  methods: {
    onChange(event) {  // クリックイベントでイベント発火
      if (event.target.value === "男性") {  // input type="radio"のvalueを取得して判定
        this.maleFlag = true
        this.femaleFlag = false
      } else if (event.target.value === "女性") {
        this.maleFlag = false
        this.femaleFlag = true
      }
    }
  }
}
</script>
```
- 今回svgを使用してラジオボタンの実装を行うので、ラジオボタンの標準スタイルは非表示に変更

```vuejs
<style>
input[type="radio"] {
  display: none;
}
</style>
```

### 参照
- [フォーム入力バインディング — Vue.js](https://jp.vuejs.org/v2/guide/forms.html)