OmniAICreator/Qiita-1.07M huggingface dataset:
プログラマのための測定入門

# 測定分類
直接(direct)測定・間接測定

能動(active)測定・受動(passive)測定

動的(dynamic)測定・静的(static)測定

##直接(direct)測定・間接測定
###直接(direct)測定
物差しをあてて長さを測るように、物差しの値が、直接、測定対象の値である場合。

##間接測定
建物の高さを測るのに、測定地点から建物までの距離と、測定地点の建物の仰角を測り、計算で建物の高さを求める場合。
直接測定した結果を、計算するため、測定誤差以外に、計算誤差が入る可能性がある。

##動的(dynamic)測定・静的(static)測定
##静的(static)測定
物差しをあてて長さを測るように、測定対象も測定の道具も静止した状態で測定する場合。

##動的(dynamic)測定
動いているものを、動いている状態のまま測定する。
測定系が止まっている場合と、動いている場合がある。
あるいは、相対的には止まっているものを、測定系が動いて測定する。

測定対象が動いている場合には、測定値は、刻一刻と変化する場合がある。
時間測定あるいは時刻同期が必要になる場合があり、時間測定誤差、時刻同期誤差を検討する場合がある。

##能動(active)測定・受動(passive)測定

###受動(passive)測定
測定対象に影響を与えることを行わずに測定する方法。

###能動(active)測定
測定対象に影響を与える測定方法。
測定方法に起因する誤差と、測定方法に起因しない誤差とを区別するための測定を行う場合がある。


#誤差と統計・確率

誤差を考える場合に、測定の種類によって検討すべき事項が異なる場合がある。

##間接測定の誤差

測定誤差と計算誤差がある。

##動的測定の誤差
時間誤差と測定値誤差がある。

##能動測定の誤差
測定行為に起因する誤差と測定行為に起因しない誤差がある



#参考資料(reference)
計測工学とは —それは人間の知欲から始まる—
http://www.me.saga-u.ac.jp/~tera/keisoku01.pdf

 計測工学 -測定の誤差と精度2
http://www.gifu-nct.ac.jp/elcon/labo/t-kitagawa/class/keisoku/keisoku_05_20100517.pdf

計測工学の体系化について　－計測工学の役割と教育･研究の課題及び提言－
「工学共通基盤研究連絡委員会計測工学専門委員会報告」
平成１２ 年７ 月１７ 日　日本学術会議　工学共通基盤研究連絡委員会　計測工学専門委員会
http://www.scj.go.jp/ja/info/kohyo/17htm/17_47.html

# 文書履歴(document history)
ver. 0.01 初稿 20190410 午前
ver. 0.02 日本学術会議、タグ追記 20190410 午後
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
【Kaggle日記】 2019/04/10 LightGBMと樹木モデルのアンサンブル学習について

# 概要

文系大学3年生が  
2019年度内までにKaggle Masterになる  
過程において、
その日学んだことをアウトプットしていきます。
間違いやご指摘などが御座いましたらご教示願います！

# LightGBMとは一体何なのか

KaggleのKernelでよく用いられているLightGBM。

そもそもLightGBMとは一体何なのか。簡潔に自分なりにまとめてみました。

結論から言うと、

LightGBMは、アンサンブル(Ensemble)学習を用いた樹木モデルフレームワークの一種です。

では、アンサンブル学習とは一体何なのでしょう。

## アンサンブル学習とは

アンサンブル学習には、

1. バッギング(Bagging)
2. 勾配ブースティング(Gradient Boosting)

の2種類があり、
LightGBMが用いているのは後者の
勾配ブースティング(Gradient Boosting)です。

順番に説明していきます。

### 1. バッギング(Bagging)

バッギング(Bagging)とは、
すべての弱学習器を独立に学習させ作成していく手法。
ex) Random Forests など

### 2. 勾配ブースティング(Gradient Boosting)

勾配ブースティング(Boosting)とは、
一つずつ順番に前のを反映させて学習させた上で弱学習器を作成していく手法。
ex) Xgboost, LightGBMなど

## 分かりやすい比喩

まず、バッギング(Bagging)について説明します。

fast.aiの創始者であるJeremy Howardは、
Random Forestが用いている バッギング(Bagging)手法については
"Create a bunch of crappy models, and join them together to create a really good model"と言及していたのですが、

バッギング(Bagging)は一言で言うと
**平均化**で
ゴミレベルの学習器を作成し、それを合わせて良いモデルをつくる手法

つまり、入試に例えると

多種多様の凡人たちに問題を解かせ、その解答を全部組み合わせて神解答をつくる手法

です。

それに対して、

勾配ブースティング(Boosting)は一言で言うと
**最適化**で
ゴミレベルの学習器を作成し、それを合わせて良いモデルをつくる手法

つまり、同じく入試に例えると

ある凡人に問題を解かせ、その解答を最適化させた上で、他の人もどんどん問題を解いてもらい、
その都度最適化して次に引き渡すことで神解答をつくる手法

となります。

## それぞれの特徴

### 1. バッギング(Bagging)

得意領域 理解が容易でありシンプル
不得意領域 複雑なデータに対してはパフォーマンスが低い

### 2. 勾配ブースティング(Gradient Boosting)

得意領域 パフォーマンスが高い (Kaggleによく用いられる)
不得意領域 予測の根拠が比較的ブラックボックス・小さなデータの違いによりモデルに大きな差異をもたらす

## 参考・引用文献

- 神資料[https://www.analyticsvidhya.com/blog/2016/02/complete-guide-parameter-tuning-gradient-boosting-gbm-python/](https://www.analyticsvidhya.com/blog/2016/02/complete-guide-parameter-tuning-gradient-boosting-gbm-python/)
- [https://thereputationalgorithm.com/2017/01/21/top-predictive-algorithms-infographic/](https://thereputationalgorithm.com/2017/01/21/top-predictive-algorithms-infographic/)
- [An Overview of LightGBM](https://www.avanwyk.com/an-overview-of-lightgbm/)
- [Parameters Tuning](https://lightgbm.readthedocs.io/en/latest/Parameters-Tuning.html)
- [What is LightGBM, How to implement it? How to fine tune the parameters?](https://medium.com/@pushkarmandot/https-medium-com-pushkarmandot-what-is-lightgbm-how-to-implement-it-how-to-fine-tune-the-parameters-60347819b7fc)
- [Python 勾配ブースティングにおけるパラメータと調整方法について](http://rautaku.hatenablog.com/entry/2018/01/13/190818)
- [Introduction to Machine Learning for Coders!](http://course18.fast.ai/ml)
- [「樹木モデルとランダムフォレスト－機械学習による分類・予測－」－データマイニングセミナー様のスライド](https://www.slideshare.net/hamadakoichi/tree-basedmodelsandrandomforests)

## 最後に

改めてこうしてMLの手法を学び直してみると再発見が多かったです。

1. LightGBMのパラメーターを理解していく
2. LightGBMやXGBoost のソースコードのぞいてみる
3. Highest Scoring Kernel を何としてでも一度超える

最後に  
間違いやご指摘などが御座いましたらご教示願います！
【プログラミング入門編】たった40秒でゲームを作ろう！

#はじめに
私は2018年9月から[秋葉原プログラミング教室](https://www.akiba-programming-school.com/)でこれまで50名以上の小・中学生の生徒さんに教えてきました。
その中でまだまだ**プログラミングは敷居が高い**という感覚を持っている人が多いと気づきました。
そこで今回は**たった9個のブロックを組み合わせるだけで完成するゲームの作り方**を紹介します。
ぜひ「プログラミングって難しそうだな・・・」と思っている方は試して見てください！

#この記事の対象者
・お子さんにプログラミングをこれからやらせてみようかなと考えている保護者の方
・プログラミングをこれからやってみたい小・中学生
・プログラミングって難しそうだなと思っている全ての方

#対象ではない方
・既にプログラミング学習を初めている方(入門者向けの記事です)

#最低限必要な知識
・Google ChoromeやSafariなどのWebブラウザの立ち上げ方を知っていれば大丈夫です！

#たった41秒でゲーム作成
MOONBlockを使えば**たった41秒でゲームを作れます。**
動画を作ったのでよかったら見てください。
[ゲーム作成の様子](https://youtu.be/hRukt26IhLI)

![MOONBlock.png](https://qiita-image-store.s3.amazonaws.com/0/387778/d69a426c-69e1-e224-7a2b-1e10ba69a97e.png)
図1:ゲーム画面

これより早く作れるという方の挑戦をお待ちしています！
※頑張れば30秒以内で作れそうな気もします。

#ゲーム作成の手順
「クマの早押し」ゲーム作成の手順をフローチャートにしました。
クマの早押しゲームは文字通り、画面の外に出て行くクマさんをタップ（クリック）して消して行くゲームです。

*フローチャートとはゲーム作成の過程を表現するための図です。

![フローチャート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/387778/8e22ad18-e253-019a-cfb0-3966cad41b2a.png)

図2:ゲーム作成の手順

それでは順番に見ていきましょう！
今回はプログラミングの細かいロジックを見るというよりは、とりあえず真似をしてみて楽しむ感覚でやってみてください。

###0.MOONBlockのページにアクセスする。
まずはMOONBlockのページにアクセスしましょう。
下のリンク先をクリックしてください。
↓↓↓↓↓↓↓↓↓↓↓↓
[プログラミングへの扉](http://www.moonblock.jp/#)（MOONBlockのホーム画面)

###1.キャラクターのクマを選ぶ###
まずはゲームに出てくるキャラクターを決めます。
今回はクマの早押しゲームなのでクマを選びます。

※ここに順次操作の様子の動画を追加していきます。

###2.クマが出てくる数を決める###
クマが最初に出現する数を決めます。今回は20個のクマを出現させます。

※ここに順次操作の様子の動画を追加していきます。

###3.クマの動き方を決める###
クマがどういう風に動くかを決めます。今回はランダムに動くようにします。
*ランダムとは予測不可能という意味です。

※ここに順次操作の様子の動画を追加していきます。

###4.条件(クマがタップされたとき)を指定する###
プログラミングには○○の時××するという表現があります。
この○○を指定する操作です。

※ここに順次操作の様子の動画を追加していきます。

###5.(クマがタップされたら)音が鳴るようにする###
クマがタップされた時に音が鳴るように設定します。

※ここに順次操作の様子の動画を追加していきます。

###6.(クマがタップされたら)クマが消えるようにする###
クマがタップされた時にクマが消えるようにします。

※ここに順次操作の様子の動画を追加していきます。

###7.(クマがタップされたら)スコアを1増やす###
クマがタップされた時にスコアが1増えるようにします。

※ここに順次操作の様子の動画を追加していきます。

###8.スコアボードを表示する###
スコアボードを作って、点数が増えている様子が見えるようにします。
※ここに順次操作の様子の動画を追加していきます。

###9.背景ブロックを決める###
背景を設定して世界観を決めます。

※ここに順次操作の様子の動画を追加していきます。

#まとめ
まずは難しく考えすぎずに、気軽な気持ちでやってみましょう！
片方のボックスの横幅を固定して、もう片方は自由に。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380575/9177cf6d-9298-41eb-090b-5e89315f90b9.png)

これを用意した、
box2のwidthは200px、box3のwidthは50％という指定である。
ここからbox2,3の横幅の合計がbox1と同じにするには、

#手順

step1
box3に
・float: none;
・width: auto;　　を指定。
すると、フローティングボックスではなくなり、box3がbox2の後ろに回り込む。widthは、100％になる。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380575/99a5c561-a604-508b-ba28-03385930d7ae.png)
step2
box3に
・margin-left: 200px;　　を指定。

すると、完成！
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380575/0f793311-4883-5034-ba3a-df6bf753eb78.png)
#PowerApps のメディアコントロールで CDJみたいなものを実装してみる

# まずはこちらをご覧ください
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/powerapps?src=hash&amp;ref_src=twsrc%5Etfw">#powerapps</a> で <a href="https://twitter.com/hashtag/CDJ?src=hash&amp;ref_src=twsrc%5Etfw">#CDJ</a> っぽいものができてしまった！<br><br>オーケストラとしては使えないかもだけど、クラブシーンでは使える。。。かもしれない🤣 <a href="https://t.co/qrj51mIqTT">pic.twitter.com/qrj51mIqTT</a></p>&mdash; りなたむ || RYOTA NAKAMURA (@R_t_A_n_M) <a href="https://twitter.com/R_t_A_n_M/status/1113095298690084865?ref_src=twsrc%5Etfw">2019年4月2日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# なにしてるの？
CUEボタンを押すと、指定した再生位置に戻るということをしています。
連打することで、あたかもスクラッチしているかのような感じになります(笑)

# 仕組み
メディアコントロールのプロパティに
StartTimeというのがあります。
こちらが、メディアコントロールの再生位置を秒で指定するというものになりますので
スライダーで位置を変えると、StartTimeが設定されて
ボタンを押すことで、メディアコントロールのリセットがTrueになるように設定すれば
押すたびにStartTimeから再生が開始される
という形になります。

# 作り方

## スライダーコントロール
このスライダーを動かすことで、StartTimeの開始位置が設定されます。
なお、StartTimeは秒を指定しますので、楽曲によって秒数が変わりますから
その辺を考慮する必要があります。
また、位置合わせにも細かいところまで設定する必要があることから
操作倍率も設定できるようにします。

```bash:Max
TextInput1 （倍率調整用TextInput）
```

```bash:OnSelect
UpdateContext({STTM:(Audio1.Duration*(Slider2.Value/Slider2.Max))})
```

```bash:OnChange
UpdateContext({STTM:(Audio1.Duration*(Slider2.Value/Slider2.Max))})
```

## メディアコントロール
Reset プロパティと StartTimeプロパティを設定します。
といっても、変数を指定するだけなんですけど

```bash:Reset
RST
```

```bash:StartTime
STTM
```

## ボタンコントロール
ボタンを押した際に、一度メディアコントロールのResetプロパティをTrueにした後
すぐにFalseにする必要があります。

```bash:OnSelect
UpdateContext({RST:true});
UpdateContext({RST:false})
```

これで、CDJライクなことができるようになりますよ！
ぜひお楽しみください♪
C++ Builder XE4 > 処理時間 > VarToDateTime(): 32msec | StrToDateTime(): 20msec

```txt:動作環境
C++ Builder XE4
```

### VarToDateTime()とStrToDateTime()

ATOM E3845 Quad Coreでの処理が遅いので、処理の高速化を検討している。

下記の動作確認はCore i7で実施。

VarToDateTime()の処理での測定で32msecかかっていた。
試しにStrToDateTime()だと20msecとなった。

### はまりポイント

StrToDateTime()には以下の「はまり」ポイントがある。
はまらない状況かどうか考慮して上記の対応をするかどうか決めること。

- [c++ builder > Windows 8.1 English だけ abnormal program terminationが起きる > static const TDateTime kDt = StrToDateTime(L"2000/1/1 00:00:01"); はだめ > 代替案: static const TDateTime kDt = VarToDateTime("2000/1/1 00:00:01"); / リモートデバッグ](https://qiita.com/7of9/items/ab67f7c03459f294aaf8)


### 備考

XE4以外のバージョンでの比較は未実施。
10.2 Tokyoや10.3 Rioではこの違いは小さいかもしれない。

### 備考
(追記: 2019/04/11)

プロダクトコードにて試したところ。両者の処理時間の差が**171 msec**になる例も見つかった。
0から始めるGit運用

## 概要
業務で全くGitを使ってこなかったエセジニアがプロジェクト立ち上げ時にGit運用ルールを作った時の話

## 前提
* ５名程度のメンバー
* 個人のソース管理にGitを使ったことがあっても業務でGitを使ったことがあるメンバーは０
* リモートリポジトリはBacklog上に作成
* Web開発で環境は本番とステージングの２つのみ

## メンバーへのGitについての説明
全くGitを使ったことがない人はいなかったのでコマンドについての説明は必要なかった。
ただし、プルリクエストについては説明が必要だったのでBacklogの[サルでもわかるGit入門](https://backlog.com/ja/git-tutorial/)と運用ルールでフォローした。

## Gitの運用ルール

### ブランチモデル
偉大な先達に倣ってGit flowに沿って運用する。
できる限りシンプルな運用にしたいためブランチは下記の3本とした。

* master（本番環境）
* develop（ステージング環境）
* feature（機能追加）

### featureブランチの命名

`/feature/<修正概要もしくは課題番号>`
**ブランチ名は長くなっても問題ない**

修正概要をどうまとめるか悩む人もいるので、ブランチ名が長くなっても問題ないと周知しておくと悩む時間が減ると思う。

### コミットメッセージの書き方

|行数|記載内容|
|:--|:--|
|1行目|変更内容の要約（コミット種別 概要）|
|2行目|空行|
|3行目以降|変更した理由（詳細）**日本語でも可**|

チーム内に日本人しかいない場合は日本語のコミットメッセージにした方が効率が上がる。
今後日本語ができないメンバーが入る場合、外注する場合を考えると英語の方がいいと思うがまずはとっつきやすさ重視。

#### 1行目

|コミット種別|使用例|
|:--|:--|
|fix|バグ修正|
|add|新規（ファイル）機能追加|
|update|機能修正（バグではない）|
|remove|削除（ファイル）|

シンプルかつ分かりやすく概要を書く。（難しい）
課題番号に紐付いている場合は課題番号の記載のみでも可。
【例】update 顧客リストの削除ボタンを非表示に変更

#### 3行目以降
変更した理由と変更内容の詳細を記載する。
【例】営業チームの要望により誤操作を防ぐため営業がログインした時のみ顧客リストの削除ボタンを非表示化

#### プッシュからプルリクエスト
1. Backlogのリモートリポジトリにプッシュしたら、プルリクエストする。
2. 自分の作成したブランチとマージ先のブランチを指定する。
3. レビューするため担当者には開発リーダーを指定する。
4. 開発リーダーはレビューが終わったら担当者を依頼元に戻す。
5. 依頼者はレビューOKであればdevelopにマージしステージング環境でテストする。
6. ステージング環境で問題がなければmasterにマージし本番環境に反映する。

作成したfeatureブランチについてはdevelopへマージしたら削除すること

### １ヶ月ほど運用した後の課題
レビュワーを開発リーダーに固定したことで質の担保はできたがそこがボトルネックとなり、レビュー待ちで止まっている状況が何度か見受けられた。
ある程度開発が軌道にのってきたらメンバー同士でレビューできるようにすることで効率化を図ることが考えられるが質の担保についても気になるので状況を見ながら判断する予定。
Sublime Mergeをコマンドラインから開けるようにする

[Sublime Merge](https://www.sublimemerge.com/)というツールが爆速だと聞いたので、導入した時のメモです。

Sublime Text3のパッケージ内に`subl`コマンドがあるように、Sublime Mergeのパッケージ内にも`smerge`コマンドがありました。

```
/Applications/Sublime\ Merge.app/Contents/SharedSupport/bin/smerge
```

これをファイルに渡してあげると、Sublime Mergeが爆速で展開されます。

上記のコマンドが長いので、エイリアスを掛けて使うには、

```bash:ex).bash_profile
alias smerge='/Applications/Sublime\ Merge.app/Contents/SharedSupport/bin/smerge'
```

と書いてあげて、

```bash
$ cd （SublimeMergeで開きたいディレクトリ）
$ smerge .
```

これで爆速展開。便利ですね。


## 参考
- [Sublime Text3をコマンドラインから開くようにする](https://qiita.com/ug23/items/08dcdd3785755d308e79)
IBM Cloud Object Storage(ICOS)のファイル転送にWinSCPを使ってみた


IBM Cloud Object Storage(以降ICOS)へのファイル転送をブラウザ上で実施しようとすると200MBのファイル制限があります。
大きなファイルを転送したい場合、[マニュアル](https://console.bluemix.net/docs/services/cloud-object-storage/gui/cyberduck.html#transfer-files-using-cyberduck)に記載のCyberduckというツールを使用したことがあったのですが、WinSCPのほうが使い慣れていたので、WinSCPでファイル転送できたら便利だなと思っていました。

[WinSCPがAWS S3に対応](https://winscp.net/eng/docs/s3)したということで、同じS3プロトコルを使うICOSにも使えるかどうか試してみました。

# ICOS設定の確認
WinSCPに設定する必要のある下記4つを確認します。
・バケット名
・エンドポイント名
・サービス資格情報のアクセスキー
・サービス資格情報のシークレットアクセスキー

1.ICOS管理画面で、対象のバケットを確認します。

|![icos2.png](https://qiita-image-store.s3.amazonaws.com/0/305774/c87bfa55-51cb-13b3-3b52-2a0cde8be6a8.png)|
|:-:|

2.対象のバケットを開き、バケットの構成画面の「エンドポイント」の設定で「パブリック」の右側のクリップボードにコピーのアイコンをクリックして、情報をコピーします。
※後でWinSCPに設定します。

|![icos1.png](https://qiita-image-store.s3.amazonaws.com/0/305774/285bdd35-5878-d7e6-2a65-07b8c2d069d2.png)|
|:-:|

3.ICOSのサービス資格情報画面で、「新規資格情報」をクリックします。
※既に必要な資格情報を定義済みの場合は、この手順3と次の手順4は飛ばしてください。

|![icos3.png](https://qiita-image-store.s3.amazonaws.com/0/305774/7f469026-d7b3-758c-791b-116609ad2e21.png)|
|:-:|

4.名前と役割を設定し、Include HAMC Credentialにチェックを入れて、「追加」をクリックします。

|![icos4-2.png](https://qiita-image-store.s3.amazonaws.com/0/305774/033acb8e-96c8-491f-2433-d2851fe5ec82.png)|
|:-:|

5.作成された資格情報横の「資格情報の表示」をクリックして、内容を展開します。
※後でWinSCPに設定するので、access_key_id, secret_access_key をメモします。

|![icos5.png](https://qiita-image-store.s3.amazonaws.com/0/305774/ed74db8f-4ea2-af45-5d8d-6b349823c07c.png)|
|:-:|

これで、WinSCPに設定する必要のある4つの情報が確認できました。

# WinSCPにICOS接続を登録する
1.WinSCPを起動します。
2.左側で「新しいサイト」を選択し、右側のセッション欄で以下を設定します。
　- 転送プロトコル：**AmazonS3**　　　　←ICOSですが、プロトコルはAmazonS3を選択します。
　- ホスト名：上記手順で確認した**ICOSのエンドポイント名**
　- アクセスキーID：上記手順で確認した**ICOSのaccess_key_id**
　- シークレットキー：上記手順で確認した**ICOSのsecret_access_key**
![icos6.png](https://qiita-image-store.s3.amazonaws.com/0/305774/6ea2317a-1e03-72f0-5969-adbebdf06336.png)

3.「設定」をクリックします。
4.「環境」→「ディレクトリ」を開き、リモートディレクトリ欄にICOSのバケット名を入力し、「OK」をクリックします。
![icos8.png](https://qiita-image-store.s3.amazonaws.com/0/305774/6b0a6a5d-de28-0b32-4ce2-96dc7a38e8c2.png)

5.もとの画面に戻るので、「ログイン」をクリックしてICOSに接続します。
バケット内のファイルが表示されるはずです。
![icos9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305774/ee9c5ec3-8406-922d-6a27-378dd8c46603.png)


# ファイルを転送してみる
PCローカルのC:\tmpにある約270MBのCSVファイルをICOSのバケットにアップロードしてみました。
WinSCPでは、左側のPCローカルから右側のICOSバケットに対して、ドラッグ&ドロップするだけです。

【転送前】
![icos10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305774/dc9fa79f-0f01-5bb6-134d-6782f1de1da7.png)
【転送後】
![icos11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305774/0da0c0ad-c348-ee1e-86d7-98efd5c7b620.png)
無事に200MBを超えるファイルもWinSCPを使ってアップロードできました！

# 参考リンク
WinSCPでS3にアップロードするための覚書
https://qiita.com/hirohiro77/items/86fbb0135d9e76ae1ca3

Transfer files using Cyberduck
https://console.bluemix.net/docs/services/cloud-object-storage/gui/cyberduck.html#transfer-files-using-cyberduck
Ionic4 でのルート処理の変更点

## はじめに

この記事では、以下の記事で、`NavController.goRoot('ルート先')`の
関数が使えなくなっていた。

[Ionic 4とFirebaseでチャットアプリ](https://qiita.com/s_kozake/items/6c7a0cec75c957606a33)

調べてみたら、以下のホームページで変更点があったということが分かったので、
そのことについて記述していきたいと思います。

https://stackoverflow.com/questions/54606227/ionic-4-angular-navigate-as-the-set-root-and-as-the-back-button

## 変更点

```typescript

import {NavController} from '@ionic/angular';
export class RoomPage implements OnInit {
    construtor(public navCtrl:NavController){}
         :
    ngOnInit() {
         :   
       // goBack() →　navigateBack() に変更
       this.navCtrl.navigateBack('ルート先')
    }
}
```

このように、ionic4では、navControllerで、ルート処理に関する変更があった。

- **goForward() → navigateForward()**
- **goBack() →　navigateBack()**
- **goRoot() →　navigateRoot()**

以上の点を踏まえて、進めていく方がいいです。
PythonでExcel書き込み

# 背景
以前使用していたので備忘録用

# 使用ライブラリ
* openpyxl

pip install openpyxl でインストールできます。
他のライブラリもありますがこちらを使用しました。

以下簡易的なコードを記載します。

# ブック関連
```py
import openpyxl

# 新規作成
book = openpyxl.Workbook()
# 既存ファイルオープン
book = openpyxl.load_workbook(filename='既にあるファイル.xlsx')
# 保存
book.save('ファイル.xlsx')
# 終了
book.close()
```

# ワークシート関連
```py
# シート設定
sheet = book.worksheets[0]
# シートのタイトル変更
sheet.title = 'サンプル'
# シート追加
new_sheet = book.create_sheet('追加シート')
```

# セル書き込み
```py
# 行と列を指定する、下記はセルA1を指します
sheet.cell(row=1, column=1).value = 123
# こちらの記法でも可能
sheet['A2'] = 456
# 参照も可能
sheet.cell(row=3, column=1).value = '=A1'
# セルの場所を特定したい場合はこちら
columns_str = openpyxl.utils.get_column_letter(1)
cell_str = columns_str + '2'
sheet.cell(row=4, column=1).value = '=' + cell_str
# Excelの関数も使用可能
sheet.cell(row=5, column=1).value = '=SUM(A1:A4)'
```

…結果は載せなくても分かりますよね？（笑）

# 総括
以上簡単なコードを記載しました。
openpyxl.styles.Fontなどを使用すれば文字を変更できますし、
openpyxl.chartを使用すればグラフ描画も可能です。

```
>>> dir(openpyxl)
['DEFUSEDXML', 'LXML', 'NUMPY', 'PANDAS', 'Workbook', '__author__', 
'__author_email__', '__builtins__', '__doc__', '__file__', '__license__',
 '__maintainer_email__', '__name__', '__package__', '__path__', '__url__',
 '__version__', '_constants', 'cell', 'chart', 'chartsheet', 'comments', 'compat',
 'constants', 'descriptors', 'drawing', 'formatting', 'formula', 'load_workbook',
 'packaging', 'pivot', 'reader', 'styles', 'utils', 'workbook', 'worksheet',
 'writer', 'xml']
```
色々用意されていますので、詳しくは公式ドキュメントを見るとよいでしょう。
https://openpyxl.readthedocs.io/en/stable/index.html
作業効率が上がるかもしれない5つのコマンド、ショートカット


エンジニアの皆さん、そうでない皆さん。どーもです。
[前回の記事](https://qiita.com/joe_hirata/items/e5dcfb4e730b0da2de41)に多くの反応をくださりありがとうございましたm(・ω・)m

さて今回の記事ですが、便利なのにあまり使われていない(かもしれない)コマンド、ショートカットを紹介します。
「ターミナル」での実行を前提としており、コマンドに関しては基本的に「|(パイプ)」と併用して利用します。

ちなみにMacのターミナルで実行してます。

1. [pbcopy](#pbcopyコマンド)
2. [xargs](#xargs)
3. [カーソル移動系ショートカットキー](#カーソル移動系ショートカットキー) *3つ紹介

##pbcopyコマンド

適当にファイル作ります。

```bash
$ touch teiji.txt && for i in `seq 1 10`; do echo "定時退社。" >> teiji.txt; done;
$ wc teiji.txt 
      10      10     160 teiji.txt
$ cat teiji.txt | pbcopy
```

パイプで`pbcopy`を繋げると、出力内容をクリップボードにコピーしてくれます。
貼り付けるには、Mac準拠のショートカットキー、もしくは`pbpaste`で出来ます。

「コマンドの結果を全部コピペしたい」という場合に楽に使用できるので、割と重宝してます。

##xargs

コマンドラインを作成して実行できる。といったほうが良いのでしょうか。
僕も完全には使いこなせてないですが、複数ファイルを操作するのに使ったりしてます。

```bash
## 適当にファイルを100個生成
$ mkdir test && cd test && for i in `seq 1 100`; do touch ${i}.txt; done;
## ファイル名に5を含むファイルだけ削除
$ find . -type f | grep 5 | xargs rm
##grepまでの結果がrmに代入される感じ

## 特定のファイルのみgit add, commitしたい(あまり使わないけど例として)
$ git status  | grep "0.txt" |\
      xargs git add

$ git status  | grep modified | awk '{print $2}' |\
      xargs git commit -m "fix: 編集しちゃった(*´∀｀*)"
```

##カーソル移動系ショートカットキー

普段ターミナルで作業しない方がほとんどだと思いますが、いざという時に楽できますので、以下の３つは覚えてて損はないと思います。

|  キー  | 機能 |
| ---- | ---- |
| Ctrl + a | 行の先頭にカーソルを移動 |
| Ctrl + e | 行の末尾にカーソルを移動 |
| Ctrl + w | １単語分削除(カット) |

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/275273/dd05f264-3e4e-a224-a4a2-e5ef7857f15d.gif)
・`Ctrl+a`、`Ctrl+e`、`Ctrl+w`の順に実行してます

`Ctrl+w`は特に使いますね。コマンドを入力していると単語ごとにカットできるので楽です。

##まとめ

ショートカットを覚えるだけでも楽できますね。
「なにこれ当たり前やん」という意見は受け付けてません。知らなかった方向けの記事なので。

##余談

多分この記事で一番「へぇ」ってなりそうな部分
なんかもっといいやり方あるはずだけど。

```
##適当にファイルを100個生成
$ for i in `seq 1 100`; do touch ${i}.txt; done;
```
brew doctor したらUnbrewed header files were found in /usr/local/include. と言われたから消そうとしたけど消せなかった話

#背景
mysql 8.0を使っていたんですけど、
mysql 2.5で動いていたものが動かなくなってしまい詰まったので、
一度バージョンダウンしてみることに。

アンイストールしていって再度インストールしようとしても出来ず。
brew doctorをしてみました。

それから大量のwarningに悩まされる日々が始まったのでした。

##エラー内容
```bash
$ brew doctor
Warning: Unbrewed header files were found in /usr/local/include.
If you didn't put them there on purpose they could cause problems when
building Homebrew formulae, and may need to be deleted.

Unexpected header files:
  /usr/local/include/node/libplatform/libplatform.h
  /usr/local/include/node/libplatform/v8-tracing.h
  :
  (無限に続く)
```

##試したこと
/usr/local/include内に消さなあかんファイルたちがおるよーって言われているので、
消してみることに。

```bash
$ rm -rf /usr/local/include/node/libplatform/libplatform-export.h
```

すると、

```bash
rm: /usr/local/include/node/libplatform/libplatform-export.h: Permission denied
```

パーミッションで怒られてしまいました。
これ以降、何しようにも最終的に権限がないと怒られてしまい、右往左往することに。

##解決策
最強さんを使えばよかった。

```bash
$ sudo rm -rf /usr/local/include/node/libplatform/libplatform-export.h
```

フォルダごと消すときは、

```bash
$ sudo rm -R /usr/local/include/node
```

これでパスワードを求められるので、入力すれば解決。

##結果

```bash
$ brew doctor
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry or file an issue; just ignore this. Thanks!

Warning: You have unlinked kegs in your Cellar
Leaving kegs unlinked can lead to build-trouble and cause brews that depend on
those kegs to fail to run properly once built. Run `brew link` on these:
  node
```

まだwarningが残っているぅ。。
まあ無限にいたファイルたちは消えました。

##追加で
調べた以下のコードを試してみると、

```bash
$ npm uninstall npm -g
$ rm -rf /usr/local/lib/node_modules/npm
$ brew link node
```

こうなりました。

```bash
$ brew link node
Linking /usr/local/Cellar/node/11.13.0... 
Error: Could not symlink lib/dtrace/node.d
Target /usr/local/lib/dtrace/node.d
already exists. You may want to remove it:
  rm '/usr/local/lib/dtrace/node.d'

To force the link and overwrite all conflicting files:
  brew link --overwrite node

To list all files that would be deleted:
  brew link --overwrite --dry-run node
```

おお、変わった変わった。
で、また色々やったんですけど、最終的には以下で。

```bash
$ brew link --overwrite --dry-run node
inking /usr/local/Cellar/node/11.13.0... 8 symlinks created
```

よっしゃ！
これで！！！

```bash
$ brew doctor
Warning: Broken symlinks were found. Remove them with `brew cleanup`:
  /usr/local/bin/npm
  /usr/local/bin/npx
```

ぐふう、、、。
次こそは、、。

```bash
$ brew cleanup
Pruned 2 symbolic links from /usr/local

$ brew doctor
Your system is ready to brew.
```

わあああああああああああああああああああああああああああああああ

###終わりに
brew doctorというコマンドを使ったことがなかったので、とても便利だと気づきました。
brew使う時に困ったらガシガシ使っていきます。
組合せテストの技法: ペアワイズ法(オールペア法)を3分で理解する

組合せテストの技法: ペアワイズ法(オールペア法)についてはググれば山ほどありますが、
サクっと読んでサクっと理解できるように、
情報を極力絞って書いたドキュメントです。
なのでざっくりの説明しか書きません

> Presented by  [【TEST-HACK | 3分で理解するIT/テスト技術】](https://test-hack.com/)

# ペアワイズ法とは 
ググって出てきたものをそのままコピペすると
> ソフトウェアのバグの多くが1つまたは2つの因子の組み合わせによって発生している という事実に基づいてテストケースを作成する方法です。

例えば、、、

Tシャツを販売しているECサイトで
「色々なTシャツのパターンでテストしたい！（= 組み合わせテスト) 」
「でも全部のパターンを網羅的にテストするのはテストケースが多くなってテスト工数がかかって大変！」
「でもバグは出したくない！」

というような場合に
<font color="red">組み合わせテストケース数を絞って</font>テストする組み合わせ手法の一つです。


ペアワイズ法(オールペア法)を理解するには、まず「因子」と「水準」という言葉に意味を理解する必要があります。

先ほどの
> Tシャツを販売しているECサイト

を例にして、以下のような仕様があったとします。

* サイズは S/M/L 3つのタイプがある
* カラーは RED / BLACK / WHITE / BLUE 4つのタイプがある
* 価格帯は 1000円のものと3000円のものＧある

このような仕様の場合の「因子」と「水準」を
表にして表すと
![スクリーンショット 2019-04-08 14.31.29.png](https://qiita-image-store.s3.amazonaws.com/0/148127/24ee134c-9692-eadf-e2f8-e2e61d4f6740.png)

このような形になります。

この「色々な」パターンの組み合わせを<font color="red">全網羅してテスト</font>しようとすると
全部で24パターンあります。
![スクリーンショット 2019-04-08 14.53.21.png](https://qiita-image-store.s3.amazonaws.com/0/148127/0928f4f5-08d0-9d8f-c8a1-68f15fa2520d.png)

もちろんこれを全てテストする。という場合もありますが、
時間は有限です。なるべくポイントを絞ってテストがしたい。
その場合、前述した原則を思い出してください。

> ソフトウェアのバグの多くが1つまたは2つの因子の組み合わせによって発生している

この原則を基にし、<font color="red">２因子間の組み合わせだけは全て網羅</font>しましょう。
という考え方を基に組み合わせ数を絞る手法がペアワイズ法(オールペア法)です。
２因子間を網羅した組み合わせは以下になります。
![スクリーンショット 2019-04-09 8.26.27.png](https://qiita-image-store.s3.amazonaws.com/0/148127/df70dc1d-da6f-93b0-11e6-c249f60a4494.png)

全網羅の場合、24組み合わせでしたが、
12組み合わせに減りました。

# ではそれをどうやって作るか？


ではペヤワイズ法の組み合わせをどうやって作るか？？？
です。

ツール使ってください。

世の中にはペアワイズ法(オールペア法)の組み合わせを作るツールがいっぱいあります。
無料です。
有名なのでは

* PictMaster

とか、、、ダウンロード先も、使い方もググると一発なので、、詳細は省きます。

> 3分で理解するシリーズ
> [【TEST-HACK | 3分で理解するIT/テスト技術】](https://test-hack.com/)
> [【Page Object Model (POM)を使った自動テストについて3分で理解する】](https://qiita.com/RyomaMaeda/items/517cd5008da40b3fbcee)
オープンデータをBigQueryに入れてみる 

#BigQueryとは？
Google Cloud Platformのサービスのひとつで、ビッグデータ解析のプラットフォームです。
PB（ペタバイト）レベルの膨大なデータを極めて高速なスピードで集計・分析できるとのことです。
今回はPBには遠く及ばないデータですが、オープンデータをBiqQueryに入れて集計してみます。

#使用するオープンデータ
今回は東京都がオープンデータとして開示している、
「明治33年～平成28年　東京都全体　出生数・死亡・死産・婚姻・離婚・合計特殊出生率・平均初婚年齢」のデータを利用します。

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/395230/b9ef1d04-cc7b-2436-f654-40fe3479a88d.png)
http://opendata-catalogue.metro.tokyo.jp/dataset/t000010d0000000009/resource/72db0f68-ee68-4819-876d-7a55de0dabb4

ダウンロードしたデータを確認するとこのような感じになっています。
![図2.png](https://qiita-image-store.s3.amazonaws.com/0/395230/e7ff1083-946c-1f67-9cd4-9b08de4274d8.png)

#BigQueryにデータを入れる
ダウンロードしたCSVデータを、BigQueryに入れていきます。
###Datasetの作成
あらかじめTokyo_populationというプロジェクトを作成しています。
「Create new table」を選択し、次に進みます。
![図4.png](https://qiita-image-store.s3.amazonaws.com/0/395230/f26d366f-2a78-41a6-cf3c-7f01a3462439.png)
###Create Tableの設定
初学者のため、ここで何度が躓きました。以下、躓いたポイント含めて記載します。
![図8.png](https://qiita-image-store.s3.amazonaws.com/0/395230/bda3783c-41d5-13ed-63eb-dbf8016923fa.png)

ここで注意です。ダウンロードしてきたCSVデータの文字コードはShift-jisのため、
そのまま読み込むと文字化けが起きます。必ず文字コードはUTF-8に変換してからアップロードしましょう。
（BigQueryはUTF-8しか対応してないらしいです。）

![図6.png](https://qiita-image-store.s3.amazonaws.com/0/395230/0eef8a02-9cbf-5e35-8302-242bb03bf2b3.png)
データの列名にはかなり適当な名前をつけています。
自分がエラーを何度も吐いたのはデータ型の指定の箇所で、
小数部分を含むデータを読み込んでいるにも関わらずINTEGER型で指定してしまっていました。
また、モードはデフォルトにしています。（NULL型を許可）
![図7.png](https://qiita-image-store.s3.amazonaws.com/0/395230/f25fd002-3252-bacf-0590-5475578704ba.png)
読み込んだデータの一行目には、「年次」「人口」「出生総数」などの文言が記載されているため、
その読み込みをスキップします。これで設定は完了です。データを読み込みましょう。

###Datasetを確認する
suii_dataというデータセットが作成されています。
Previewを見ると、問題なく読み込まれていることが確認できます。
![図11.png](https://qiita-image-store.s3.amazonaws.com/0/395230/51cec33a-9d4b-0a57-f4cf-e1ed41e2522e.png)
※参考（文字コードをShift-jisのまま読み込んだ場合、和暦の箇所が文字化けします。）
![図9.png](https://qiita-image-store.s3.amazonaws.com/0/395230/8061814b-46fa-660e-83f2-c565266aabfb.png)

#データにクエリを実行する
では、試しにクエリを実行してみます。
以下は、平成で人口が多かった順に、婚姻数と共に数値を抽出するクエリです。

```SQL
SELECT
  japanese_year,
  population,
  marriage
From
  Tokyo_population.suii_data
Where
  japanese_year like '%平成%'
Order by 
  population desc;
```
結果はこんな感じです。
近年、東京都の人口は増加し続けているようですが、
婚姻数は平成22年を境に減少傾向に転じていることがわかります。

![図10.png](https://qiita-image-store.s3.amazonaws.com/0/395230/79289272-5c12-877d-b2d2-d390927ef3f4.png)
#Next
今回はBigQueryでのデータの読み込みと、簡単なクエリの実行まで行いました。
次回はもう少し高度な集計分析や集計結果の可視化にチャレンジしていこうと思います。
↓
次回のやつも投稿しました。
[Google Data　Studioでオープンデータを可視化してみた](https://qiita.com/g-k/items/95c3989f5f86cb54e379)
GoLand vgo

## 設定

Preferences で `Enable Go Modules (vgo) integration` を有効にする。

<img width="593" alt="スクリーンショット 2019-04-10 10.55.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/2019/08487314-a262-e9c9-19db-1f16affce44b.png">

※ GoLand で作成するすべてのプロジェクトで適用する場合は、プロジェクトを開く前に設定。
※ 特定のプロジェクトのみ適用する場合は、GoLand でプロジェクトを開いた後に設定。

## 本設定を行わずに、 vgo を利用した場合

* GoLand の External Libraries に `go.mod` で指定したバージョンでないものが表示されてしまう。
* 実際にコンパイルで用いるバージョンでないものが表示されてしまう。
* 利用しているライブラリによっては、自分のソースコードの一部分でエラーとしてハイライトされてされる可能性がある。
* `go.mod` で `module module-name` としていた場合、自作の外部ファイルを利用するには `import "module-name/types"` のような形式になるが、これが解釈されない。
RAKWireless　Lora Gateway　Raspberry Pi  LTE-M

RakWirelessからRaspberryPiのLoraゲートウェイハットが販売されました。
元からあるRak831とは別に新型のモジュールとLTE/LTE-M/NB-IOTのモジュールを搭載した新製品RAK7243です。
（正式名称はPilot Gateway Pro RAK7243）
http://docs.rakwireless.com/en/LoRa/Pilot-Gateway-Pro-RAK7243/Hardware-Specification/Pilot_Gateway_Pro_RAK7243_Product_Brief_V1.1.pdf

![RAK831-RAK7243.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/0fc44c98-27b1-c2de-0283-017cc6438a4b.jpeg)

RAK831もRAK7243もセムテックの８ch対応チップ　SX1301を搭載した製品です。
（RaspberryPi3B+にEG95PiHatとRAK2245、さらにアルミケースをセットしたものです）
ただ、残念ながら現在、技適を取得していない（2019年3月現在）ため、国内では使用できません。

今まで、OSイメージが存在しないため、セッティングに若干手間取りましたが、今回は、そんなことはありません。
https://www.rakwireless.com/en/download/LoRa/LoRa-Gateway-Image#RAK7243(LTE)
リンクからLoraOSのイメージをダウンロードし、PDFの資料通りにすればセッティング完了です。
http://docs.rakwireless.com/en/LoRa/RAK2245-Pi-HAT/Application-Notes/Get_Start_with_RAK_LoRa_Develop_Kit.pdf
(RAK831についてもLoraServerのイメージが用意されました）

EtcherはZIPのままgzもImgも書き込めます。
https://www.balena.io/etcher/

![RAK7243-img-3.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/fb5f6690-bb61-76af-8d3c-d8b9efc74874.jpeg)

IDとパスは“admin”です。(間違えてPiとかRaspberryとかで入らないこと）
日本などはAS923を選択します。
![RAK7243-sever-4-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/285344/c4f3b80f-7ae3-2750-14e3-6912d2f7d6ed.jpeg)

LTE-Mのモデムも搭載しておりLoraの技適を取得したら、この製品を超える手軽なGatewayは存在しないと思います。
特にRAK2013 はBG96はLTEモデムとしても安価であり、技適取得済みのRaspberryPi用LTEモデムとしては最安値かと思います。

なお、現在私はDragino LG01を使用していますが１ch対応のゲートウェイです。
8chのゲートウェイは、10万円クラスのものしかないため
RAK7243やRAK831が技適取得してくれるといいのですがね････
#jq コマンドで #JSON 配列の shift & push 的なことをやる ( 配列の最初の要素を最後に入れ替える例 )

- `.[0:1]` is first element of array
- `.[1:]` is other elements of array exclude first element
- we can concatenate arrays with plus operator `+`

```
$ echo '[1,2,3,4,5]' | jq ".[1:] + .[0:1]"
[
  2,
  3,
  4,
  5,
  1
]
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1154








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【Unity】Buttonのサイズをスクリプトから変更する

UI系の配置はuGUIのAutoLayoutに任せたいが、場合によってはボタンのサイズをスクリプトから変更する必要があったりする。調べてみると**RectTransform.sizeDelta**を使用すればよいみたいな記事を発見したのだが、これではうまくいかない場合もあった。

# RectTransform.sizeDeltaだとどうダメか

こんな風にCanvas直下にボタンを配置してボタンのサイズを300x200に変更してみる。
<img width="246" alt="スクリーンショット 2019-04-10 10.23.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/85509/56e60a8c-b25c-b9bc-adc7-902b2b08c864.png">

Buttonに以下のスクリプトをアタッチする。

```うまく行かない場合がある.cs
using UnityEngine;
using UnityEngine.UI;

public class ButtonSizeFitter : MonoBehaviour
{
    void Start()
    {
        // ボタンのサイズを300x200に変更する
        var targetSize = new Vector2(300, 200);
        GetComponent<RectTransform>().sizeDelta = targetSize;
    }
}
```

これだとButtonのアンカーがどこにあるかで結果が異なってしまう。

### アンカーがボタン中央の場合

<img width="92" alt="スクリーンショット 2019-04-10 10.33.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/85509/763ad4ea-1fdf-2d4d-1e8b-96679e313368.png">

Buttonのサイズそのものが300x200に変更されてうまくいく。

### アンカーが四隅の場合

<img width="101" alt="スクリーンショット 2019-04-10 10.33.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/85509/d80d7faa-a688-8ce3-8ee7-5d5f7766f6f1.png">

Buttonのサイズが親のCanvasより大きくなってしまい、望んだ結果とは違ってしまう。

## なぜこうなる

公式に書いてある。

https://docs.unity3d.com/ja/current/ScriptReference/RectTransform-sizeDelta.html

で、どうやった解決するかと言うと、```RectTransform.SetSizeWithCurrentAnchors```を使えば良いらしい。

# RectTransform.SetSizeWithCurrentAnchorsで解決

SetSizeWithCurrentAnchorsを使用すると現在のアンカーの設定を考慮してサイズを変更してくれ、アンカーが中央だろうが四隅だろうが、同じ結果になった。

```.cs
public class ButtonSizeFitter : MonoBehaviour
{
    void Start()
    {
        var rtf = GetComponent<RectTransform>();
        // 横方向のサイズ
        rtf.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, 300);
        // 縦方向のサイズ
        rtf.SetSizeWithCurrentAnchors(RectTransform.Axis.Vertical, 200);
    }
}
```

https://docs.unity3d.com/ja/2018.2/ScriptReference/RectTransform.SetSizeWithCurrentAnchors.html
ブランチ名からissue 番号を取得してきてgit commitのメッセージに含める

githubのissueに関連付けてブランチを切る時、`feature/#issue番号_何か文字列` という感じのブランチ名にするようなことがよくあると思う。このブランチ名からコミット時にissue番号をコミットメッセージに含めるのを自動化すると、もしかしたらちょっとだけ便利かもしれない。
🔽

```bash
function icommit() {
        if [ -z "$1" ] ; then
                echo "commit commentを入力してください。"
                return 1
        fi

        branchName=`git branch | grep \*`
        branchName=${branchName#*/#}
        issueNumber=`echo $branchName | sed -e "s/[_-].*//g"`

        # 数字判定
        expr $issueNumber + 1 > /dev/null 2>&1
        retNumber=$?
        if [ $retNumber -lt 2 ] ; then
                echo "issue番号：$issueNumber"
                commitCommand="git commit -m \"#${issueNumber} $1\""
        else
                echo "ブランチにissue番号がないので普通にコミットします"
                commitCommand="git commit -m \"$1\""
        fi

        echo -e "実行コマンド：\n"
        echo $commitCommand
        echo -e "\n  実行する場合は y、実行をキャンセルする場合は n と入力して下さい."
        read input
        if [ -z $input ] ; then

                echo "  y または n を入力して下さい."

        elif [ $input = 'yes' ] || [ $input = 'YES' ] || [ $input = 'y' ] ; then

                echo "  コミットを実行します."
                eval ${commitCommand}

        elif [ $input = 'no' ] || [ $input = 'NO' ] || [ $input = 'n' ] ; then

                echo "  処理をキャンセルしました."
                return 1

        else

                echo "  y または n を入力して下さい."

        fi


        return 0
}
```

```bash:使い方
#feature/#9999_hogehoge ブランチにコミットする場合
~/source/testpj(feature/#9999_hogehoge +$)$ icommit "コミットテスト"
issue番号：9999
実行コマンド：

git commit -m "#9999 コミットテスト"

  実行する場合は y、実行をキャンセルする場合は n と入力して下さい.
y
  コミットを実行します.
[feature/#9999_hogehoge 4c4f0d3b] #9999 コミットテスト
 x file changed, y insertions(+)
```
enumを任意の順番に並び替え(ソート)する方法

例えば、以下のenumが定義されているとします。

```rb

class Post < ApplicationRecord
  enum category: { game: 10, beauty: 20, gadget: 30 }
end
```

これを、`beauty(20)`　→　`game(10)` →　`gadget(30)`の順番で並び替えたいとする場合、以下のようにスコープを作ってあげればOK。

```rb
CATEGORY_ORDERS = [20, 10, 30]

scope :order_by_category, -> {
    order_by = [] 
    CATEGORY_ORDERS.each { |category| order_by << "category=#{category} DESC" }
    order(order_by.join(", "))
}
```

```rb

> Post.order_by_category
```
するとSQLはこんな感じになります。

```sql

SELECT `posts`.* FROM `posts` ORDER BY category=20 DESC, category=10 DESC, category=30 DESC
```

順番を変えたくなったら、定数を変更するだけで済むので割と便利かなと。(頻繁に変える場合は変数にすべきですが。。)

参考: https://stackoverflow.com/questions/37599510/custom-order-based-on-enum-values

##追記

配列に対してソートする場合、field関数を使った方が簡潔にできるようです！

```rb

CATEGORY_ORDERS = [20, 10, 30]

scope :order_by_category, -> {
    order(["field(category, ?)", CATEGORY_ORDERS])
}
```

```sql

SELECT `questions`.* FROM `questions` ORDER BY field(category, 20,10,30)
```

調べてくださった@scivolaさん、@QUANONさん、ありがとうございました！

参考: https://qiita.com/chezou/items/8c0481044c954c4bca3b
grep置換

`grep` 置換するときのコマンドを覚えきれなくて

```bash:grep置換
$ grep -lr "検索文字列" 検索パス | sort | uniq | xargs perl -e "s/検索文字列/置換文字列/" -pi
```

`~/.bash_profile` に関数化した。


```bash:~/.bash_profile
# 下記を追加
function grepr() {
        if [ -z $1 ] || [ -z $2 ] || [ -z $3 ] ; then
                echo "第1引数：検索パス、第2引数：検索文字列、、第3引数：置換文字列を入力してください。"
                return 1
        fi

        grep -lr "$2" $1 | sort | uniq | xargs perl -e "s/$2/$3/" -pi
}

```

```bash:
$ source ~/.bash_profile

# ./foo/barフォルダ以下のファイル内の文字列："baz"を、"qux" に置換する
$ grepr ./foo/bar baz qux
```
2020年版：Gulp4でSassとPugをビルドしてBrowserSyncでライブプレビューする

以前書いた「[GulpでPugとSassをビルドしてBrowserSyncでライブプレビューする](https://qiita.com/KazuyoshiGoto/items/8b788279490a6dd006d9)」の**Gulp4**対応版です。

Gulp3から4にうっかりアップデートしたら従来の記述ではエラーを吐くようになったので、これを機にGulp4に対応しました。

サクッとSassを使い始めたい人はコピペしてください。

## 前提

以下はすでに扱えるものとし、説明を省きます。

- Node.js
- npm

### ディレクトリ構成
```
dist/
 ├─css/
 └─js/
src/
 ├─js/
 ├─pug/
 └─scss/
gulpfile.js
package.json
```
distに生成物、srcに編集用ファイルの構成。

## Gulpを初めて使うなら

```
npm i -g gulp
```
Gulpのグローバルインストールが必要です。
Gulpをすでに使っているなら飛ばしてください。


## nodeモジュールのインストール
```
npm i -D gulp
npm i -D gulp-notify
npm i -D gulp-plumber
npm i -D gulp-pug 
npm i -D gulp-sass
npm i -D gulp-autoprefixer
npm i -D gulp-uglify
npm i -D browser-sync
```

~~冒頭にも挙げた[以前の記事](https://qiita.com/KazuyoshiGoto/items/8b788279490a6dd006d9)ではPugも入れていますが、最近は使わなくなったので外しています。~~

最近またPug使うようになったので加えました。



## gulpfile

```gulpfile.js
const gulp    = require('gulp');
const notify  = require("gulp-notify");
const plumber = require("gulp-plumber");
const sass    = require('gulp-sass');
const pug     = require('gulp-pug');
const autoprefixer = require('gulp-autoprefixer');
const uglify  = require('gulp-uglify');
const browserSync = require('browser-sync');

//setting : paths
const paths = {
  'root'    : './dist/',
  'pug'     : './src/pug/**/*.pug',
  'html'    : './dist/**/*.html',
  'cssSrc'  : './src/scss/**/*.scss',
  'cssDist'   : './dist/css/',
  'jsSrc' : './src/js/**/*.js',
  'jsDist': './dist/js/'
}

//gulpコマンドの省略
const { watch, series, task, src, dest, parallel } = require('gulp');

//Sass
task('sass', function () {
  return (
    src(paths.cssSrc)
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(sass({
        outputStyle: 'expanded'// Minifyするなら'compressed'
      }))
      .pipe(autoprefixer({
        browsers: ['ie >= 11'],
        cascade: false,
        grid: true
        }))
      .pipe(dest(paths.cssDist))
  );
});

//Pug
task('pug', function () {
  return (
    src([paths.pug, '!./src/pug/**/_*.pug'])
      .pipe(plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
      .pipe(pug({
        pretty: true,
        basedir: "./src/pug"
      }))
      .pipe(dest(paths.html))
  );
});

//JS Compress
task('js', function () {
  return (
    src(paths.jsSrc)
      .pipe(plumber())
      .pipe(uglify())
      .pipe(dest(paths.jsDist))
  );
});

// browser-sync
task('browser-sync', () => {
  return browserSync.init({
      server: {
          baseDir: paths.root
      },
      port: 8080,
      reloadOnRestart: true
  });
});

// browser-sync reload
task('reload', (done) => {
  browserSync.reload();
  done();
});

//watch
task('watch', (done) => {
  watch([paths.cssSrc], series('sass', 'reload'));
  watch([paths.jsSrc], series('js', 'reload'));
  watch([paths.pug], series('pug', 'reload'));
  done();
});
task('default', parallel('watch', 'browser-sync'));
```

あとはコンソールで `npx gulp` で実行。

## 主な変更点

`gulp.task()`の中でちゃんと`return()`で返してやらないとダメになったようです。実はそこ以外はあまり変わってません。

Gulp4になってから実行コマンドに `npx` が必要になったのが微妙にダルいです。
nuxt.jsに導入したbulma.ioを独自の色でカスタマイズする。

# nuxt.jsにsassを導入する。

`sass`を利用する為に`node-sass` および `sass-loader` パッケージをインストールする。

```
npm install --save-dev node-sass sass-loader
```

# assets内にファイルを作成。
`assets/css/main.scss`
 assets内にファイルを作成。

# nuxt.config.jsに追記。
```javascript:nuxt.config.js
css: [{ src: '~assets/css/main.scss', lang: 'scss' }],
```

# scssファイルを編集。
先ほど作った`main.scss`ファイルに以下を追記します。
公式ガイドを参考にnuxt.js用に編集（importの部分等）して追記します。
http://versions.bulma.io/0.7.0/documentation/overview/customize/

```scss:main.scss
// 1. Import the initial variables
@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";

// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather", "Georgia", serif;

// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;

// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);

// 5. Add new color variables to the color map.
@import "../sass/utilities/derived-variables";
$addColors: (
  "twitter":($twitter, $twitter-invert),
  "linkedin": ($linkedin, $linkedin-invert),
  "github": ($github, $github-invert)
);
$colors: map-merge($colors, $addColors);

// 6. Import the rest of Bulma
@import "~bulma/bulma";
```

#詰まったところ。。

これで設定がうまく反映されるはずでしたが、反映されず。。

`nuxt.config.js`ファイルの`@nuxtjs/bulma`をコメントアウトすることで上手く読み込みが出来ました！！

```javascript:nuxt.config.js
/*
   ** Nuxt.js modules
   */
  modules: [
    // '@nuxtjs/bulma',
    '@nuxtjs/pwa'
  ],
```
Progate HTML&CSS 中級編を終えてつまづいたところ

#はじめに

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンに参加している、tomokiyo_hiromuです。
プログラミングの勉強を始めて約1週間が経過しました。
今回は、Progate中級編を終えてつまづいたところを発信しようと思います。

#marginとtext-alignの使い分け
text-alignの場合は、インライン要素を左右、中央に寄せることができます。
しかし、containerのように要素が広い時はmagrinで設定します。
この区別がきちんと理解できていませんでした。

#基準位置の変更方法
position:absolute;とすると、要素の基準位置を左上に変更できます。
親要素にposition:relative;と指定することで、その要素の左上を基準位置とすることができます。
基準位置をうまく変えられなくて悩んでいましたが、原因はここにありました。

#まとめ
中級編まで終えて、アウトプット量の少なさを実感しました。
理解したつもりでも、演習になると手が動かなくなっていました。
これから学ぶことが増えていくので、それに比例してアウトプットも増やしていきます。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
最後まで読んでいただき、ありがとうございました。
#python の正規表現で名前付きキャプチャグループを使う例 ( ?P<name> )



```py
>>> re.search(r'(?P<first_name>^\w+)', "Alice Liddle")['first_name']
'Alice'
```

```py
>>> re.search(r'(?P<last_name>\w+$)', "Alice Liddle")['last_name']
'Liddle'
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1152








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
RHELでyumをオフラインでメディアから実行

#RHELでyumをオフラインでメディアから実行
いつも忘れるので、メモ。

#準備
##マウント

```sh
# mount -t iso9660 /dev/cdrom /media/
mount: /dev/sr0 is write-protected, mounting read-only
```

##レポジトリファイル作成

```sh
# cd /etc/yum.repos.d/
# vi media_default.repo
[media_default]
name=media_default
baseurl=file:///media/
gpgcheck=0
enabled=0
```

#実行

```sh
# yum --disablerepo=\* --enablerepo=media_default list
```
結果が表示されたらOK

インストール

```sh
# yum --disablerepo=\* --enablerepo=media_default install sftp
```

個別のインストールは怖いので、この方法で実施が楽ですね。
ABC - 102- A&B&C

#AtCoder ABC 102 A&B&C
[AtCoder - 102](https://atcoder.jp/contests/abc102)

#A問題

 - 2とNどちらでも割り切れる整数
    - 入力値Nが2で割り切れる
        - そのまま出力
    - 2で割り切れない場合はNを2倍する
        - 2倍すれば2で割り切れるしNで割りきれる

```java
	private void solveA() {
		Scanner scanner = null;
		int numN = 0;

		try {
			scanner = new Scanner(System.in);
			numN = scanner.nextInt();

			if (numN % 2 == 0) {
				System.out.println(numN);
			} else {
				System.out.println(numN * 2);
			}

			System.out.println("");

		} finally {
			if (scanner != null) {
				scanner.close();
			}
		}
	}
```

#B問題

 - 入力値をソートして、入力値の最小と最大の差をとれば`添え字の異なる数値の差が最大`
    - 最小値と最大値の添え字は異なるので。。。

```java
	private void solveB() {
		Scanner scanner = null;
		int numN = 0;

		try {
			scanner = new Scanner(System.in);
			numN = scanner.nextInt();
			int[] wk = new int[numN];

			for (int i = 0; i < wk.length; i++) {
				wk[i] = scanner.nextInt();
			}
			Arrays.sort(wk);

			System.out.println(wk[wk.length - 1] - wk[0]);

			System.out.println("");

		} finally {
			if (scanner != null) {
				scanner.close();
			}
		}
	}
```

#C問題
 
- $abs(A_1−(b+1))+abs(A_2−(b+2))+...+abs(A_N−(b+N))$

 
 - ⅰ) $abs(xi-a)$ の総和(aとの距離の総和)を最小にするのは中央値
    - $Bi = A_i − i$ と定義すれば、問題は、自由に整数 b を選び、$abs(Bi − b)$ の総和を最小化する問題
    - bを最小にするために、$(A_i − i)$ の中央値をとる
 - ⅱ) $(xi-a)^2$ の総和を最小にするのは平均値

```java

	/**
	 * ⅰ)abs(xi-a)の総和(aとの距離の総和)を最小にするのは中央値で、
	 * ⅱ)(xi-a)^2の総和を最小にするのは平均値
	 */
	private void solveC() {
		Scanner scanner = null;
		int numN = 0;

		try {
			scanner = new Scanner(System.in);
			numN = scanner.nextInt();
			int[] wk = new int[numN];

			for (int i = 0; i < wk.length; i++) {
				wk[i] = scanner.nextInt();
			}

			int[] wkWk = new int[numN];
			for (int i = 0; i < numN; i++) {
				/*
				 * b=(Xi-a)
				 * a=(i+1)
				 */
				wkWk[i] = wk[i] - (i + 1);
			}
			Arrays.sort(wkWk);

			int b = 0;
			if (numN % 2 == 0) {
				b = wkWk[numN / 2 - 1];
			} else {
				b = wkWk[numN / 2];
			}

			long res = 0;

			for (int i = 0; i < numN; i++) {
				res += Math.abs(wkWk[i] - b);
			}
			System.out.println(res);

		} finally {
			if (scanner != null) {
				scanner.close();
			}
		}
	}

```
5Gの概観を探る１　5Gの定義

　この記事は、第5世代移動通信システム(以下、5G)の概観を把握するために、役にたちそうな情報を取りまとめていく。
　その１。

#5Gの名称
　日本語表記では、「第5世代移動通信システム」

　5Gの標準化を進める「3GGP」が発行した「Release15(TR21.915)」中では、「the Fifth Generation of Mobile Communications」と呼ばれ、その略記として「5G」及び「5GS(5G System)」が用いられている。

#Release15
　3GPPが公表した技術報告書の一つ。
　5Gにおける初めての標準仕様となり、ここで策定された5Gの仕組みは「5G Phase1」と位置づけられている。

　5Gの詳細仕様検討は「Release15」以降も進められ、2019年末に予定されている「Release16」にて「5G Phase2」が策定される。

>https://www.3gpp.org/specifications/releases 

#3GPP
　The 3rd Generation Partnership Project
　通信(telecommunications)に関連する標準化団体が集まり誕生した「プロジェクト」。
　これまでにW-CDMA方式等の第3世代移動通信システム（3G）、LTE-Advanced等の第4世代移動通信システムの標準化を行った、移動通信方式の標準化を担うプロジェクトである。
　日本からは、ARIB（一般社団法人電波産業会）とTTC（一般社団法人情報通信技術委員会）が参加している。

>https://www.3gpp.org/about-3gpp
>https://www.nttdocomo.co.jp/corporate/technology/rd/tech/standardization/3gpp/index.html
sftpをシェルで実行

#SFTPをシェルで実行
いろいろと試行錯誤して、対話形式のログインが必須（相手からID、PASSでの認証指定）の場合に下記の方法で実現しました。

ところどころでハマったのでメモしておきます。

```sh

#!/bin/sh
#sftp get用シェル
FNAME="$1" 
HOST="hogehoge.com" 
USER="hogeid" 
PORT="22" 
PASS="hogepass" 
CMD1="cd /data" 
CMD2="get hoge.csv /home/" 

expect -c " 
set timeout 10
spawn sftp -P $PORT $USER@$HOST
expect \"hogeid@hogehoge.com's password:\" 
send \"${PASS}\r\" 
expect \"sftp&gt;\" 
send \"${CMD1}\r\" 
expect \"sftp&gt;\" 
send \"${CMD2}\r\" 
expect \"sftp&gt;\" 
send \"bye\r\" 
expect eof
exit
"
```


#工夫したところ
##エスケープは入念に
パスワードなどで、＄が混ざってたりする場合は、それもエスケープ。
\\\$ （文字として$をつかう場合。変数で使うならエスケープしなくていい。）
ex)pass$wordという文字列がパスワードなら

```sh

send \”pass\\\$word\r\”
```

##終了は下記で
expect内の"interact"の記述。
よく上記のサンプルがあるんですが、よく理解していないとハマります。
シェルにしたいってことは、cronで実行したいとおもうので、

```sh

expect eof
exit
```

とする必要あり。

##画面に表示される文字をexpect

```sh

expect \"sftp&gt;\" 

#「sftp>」は「sftp&gt;」ですね!
```

#注意点
expectの構文に問題なければ、エラーとならない。
ってことは相手と通信エラーや、SFTPコマンドの構文エラーはキャッチできない。。。
実行後にログ等に吐いてチェックロジックを別で作らないといけないかも。

##参考にさせていただいたサイト
https://qiita.com/ine1127/items/cd6bc91174635016db9b

https://blog.wnotes.net/blog/article/expect-other-programs

http://yu-write.blogspot.com/2013/11/shell-crontabexpect.html
【Linuxコマンド】setコマンドでオプション機能on/off

シェルのオプション機能はsetコマンドによりon/offができる。
「-o」でon、「+on」でoff

例）「Ctrl + D」押下してもログアウトしないように設定する。

```
$ set -o ignoreeof
$ set -o | grep ignoreeof
ignoreeof       on
```

#主なオプション
|  |  |
|:-------------------------------|:--------------------------------|
| allexport | 新規作成、変更した変数を自動的に環境変数にエクスポートする |
| emacs | emacsエディタと同じキーバインドにする |
| ignoreeof | Ctrl + D でログアウトできないようにする |
| noclobber | リダイレクト演算子で既存ファイルを上書き不可にする |
| noglob | パス名展開を無効にする(*や?が無効になる) |
| noexec | シェルスクリプトを実行せず構文エラーを確認する |
| vi | viエディタと同じキーバインドにする |

#set -o
シェルのオプションの設定状況の確認

```
$ set -o
noaliases             off
aliasfuncdef          off
allexport             off
・
・
```

# set +o
シェルのオプションの設定状況の確認(コマンド実行形式ver)

```
set +o noaliases
set +o aliasfuncdef
set +o allexport
・
・
```

# set
シェル変数や環境変数、シェル関数を表示

```
HISTFILE=/home/hoge/.zsh_history
HISTSIZE=50000
HOME=/home/hoge
・
・
```
Progate HTML&CSS道場 初級編を終えてつまづいたところ

#はじめに
[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンに参加している、tomokiyo_hiromuです。
プログラミングの勉強を始めて約1週間が経ちました。
今回は、Progate HTML&CSS道場初級編を終えてつまづいたところを発信しようと思います。

#paddingとmarginの違い
演習中に何度か間違えたところです。
paddingは要素の内側の余白のことで、
marginは要素の外側の余白のことです。
この二つを混同させたまま作業を進めていたせいで、何度かエラーが出てしまいました。
対策方法としては、先に要素の外側を調整してから次に要素内の作業に取り掛かることです。
自分の中で順番を明確にすると、ミスが減りました。

#複数のセレクタに同じCSSを指定
例えばh1タグとpタグに同じCSSを指定する場合、
h1 , p {
このようにコンマで区切る必要があります。
それを忘れていて、しばらく先に進めませんでした。

#まとめ
何も見ない状態から始めると、自分が全然できないことに気づきました。
少しずつですが、前に進んでいけたらと思います。
プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
最後まで読んでいただき、ありがとうございました。
【リリース】Nextcloud のバージョン 15.0.7、14.0.10 がリリースされました

2019年4月9日に Nextcloud の最新バージョンとして、15.0.7、14.0.10がリリースされました。今回のリリースの少し前に、15.0.6、14.0.9がリリースされておりましたが、いくつかのバグフィクスが加えられたようです。
15.0.6/15.0.7 では60個程度の変更で15.0.5よりサイズが少し大きくなっております。14.0.9/14.0.10は30個弱程度の修正です。
*※(注)公式 Blog では14系の修正は2個と書かれておりますがこれは14.0.9⇒14.0.10としての修正個数で、14.0.8⇒14.0.9でも修正が加えられております。*

変更としては小さいですが、マイナーバージョンアップでは信頼性、セキュリティー、安定性の向上を目指しています。
リリースにあたっては RC版を提供して広範囲なテストを行っておりますので、より信頼できるものが提供されております。Nextcloud 社の公式 Blog でも `"it is a bad idea to not upgrade!"` (更新しないなんて悪い考え方だ!) と書かれるほどですので、更新を前提とした運用をしていくことが薦められます。

**13系の公式サポートはすでに終了となっており、今後最新バージョンは提供されません。15系もしくは14系へのアップグレードを強くお勧めします。**

### 主な改善点

- ナビゲーション関連の改善
- アクセシビリティとUIの修正
- ユーザ管理の改善
- クラウド共有先から `Google+` を削除。

**★この記事は、[スタイルズ社のNextcloudサイト](https://nextcloud.stylez.co.jp/) の [Nextcloudブログ](https://nextcloud.stylez.co.jp/nextcloudblog)にも公開しております！**
4/10 js コードレシピ集 学習 checked

# checkboxの変更を検知する

チェックされている状態かどうか真偽値で返す

input要素.checked

```html:html
<label>
    <!-- input要素にchecked属性を付与すると、デフォルトでチェックされた状態になる-->
    <input type="checkbox" id="cbA" value="A" checked/>
    チェックボックスA
  </label>
  <label>
    <input type="checkbox" id="cbB" value="B"/>
    チェックボックスB
  </label>
  <label>
    <input type="checkbox" id="cbC" value="C">
    チェックボックスC
</label>
```

```js:js

const cbA = document.querySelector('#cbA');

// チェックされた状態か判定
const checkedA = cbA.checked;

const cbB = document.querySelector('#cbB');
const checkedB = cbB.checked;

const chC = document.getElementById('chC');
const checkedC = cbC.checked;

alert(`checkedは${checkedA}です`); // true
alert(`checkedは${checkedB}です`); // false
alert(`checkedは${checkedC}です`); // false

// チェックの状態を切り替えるには、input要素のchecked属性に真偽値を代入する
// input要素.checked = true or false
cbB.checked = true;

// チェックボックスAの変更を検知する
// チェックボックスAに変更があった時に、アラートで変更結果を表示させる処理
cbA.addEventListener('change', (event) =>
{
  // 対象要素のchecked属性の値を取得
  const value = event.target.checked;

  // 取得した値を代入
  const logA = `チェックボックスAは${value}になりました`;

  // 変更をアラートで表示
  alert(logA);
})
```