OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScript勉強の記録その7: 配列オブジェクトの作成・追加・削除

#配列の作成方法

[]内にカンマ区切りでデータを入れることで配列を作ることができます。
コンソールに出力してみると、配列の情報が見れます。

```index.js
const scores = [80, 90, 40];
console.log(scores);
//(3) [80, 90, 40]
//0: 80
//1: 90
//2: 40
//length: 3
// .....
```

#配列の要素へのアクセス　
配列の各要素へはインデックス番号を指定してあげることによってアクセスすることができます。

```index.js
const scores = [80, 90, 40];

console.log(scores[0]);
//80
console.log(scores[1]);
//90
console.log(scores[2]);
//40
```

#ループ処理を使い各要素へアクセス
ループ処理を使って、各要素を取り出すこともできます。
配列オブジェクトにはlengthというプロパティというのがありますので、配列名.lengthとすることで配列の長さを取得することができます。
以下の例では、lengthを利用してループ処理をし、各要素を取り出しています。

```index.js
const scores = [80, 90, 40];

console.log(scores.length);
//3

for (let i = 0; i < scores.length; i++) {
  console.log(`it is ${scores[i]}`);
}

//it is 80
//it is 90
//it is 40
```

#データの追加および削除
配列オブジェクトに用意されてあるpushメソッドとspliceメソッドを利用することによって要素の追加および削除ができます。

```index.js
const scores = [80, 90, 40];

scores.push(15,20); 
//配列の後ろから15と20を加える
console.log(scores);
//[80, 90, 40, 15, 20] 

scores.splice(1, 2);
//配列の１番目から２個の要素を削除する
console.log(scores);
//[80, 15, 20]

scores.splice(1, 1, 30, 70);
//配列の１番目の要素から１つの要素を削除して、30と70を入れる
console.log(scores);
//[80, 30, 70, 20]
```
[PM method:Agile] SCRUM Boot CAMP を呼んで

参画中のプロジェクトがAgile(SCRUM)で開発することになりそうなので、勉強しました。
(また先輩から本を借りてます。。)
その時の備忘録です。

1.書籍の紹介
---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319276/6bff88f9-7eae-c7ef-bc95-f3ad669e1b9f.png)
https://www.amazon.co.jp/SCRUM-BOOT-CAMP-BOOK-%E8%A5%BF%E6%9D%91%E7%9B%B4%E4%BA%BA-ebook/dp/B00DIM6BMI


2.書籍の要約
---
**1. 基礎編**

* チーミング(ロール)
　　プロダクトオーナー：作成物の責任者、プロダクトバックログの管理やプロダクトのReviewなど
　　開発チーム；１機能の専門家ではなく、設計〜テスト〜デプロイまで自己完結できる組織
　　スクラムマスター：スクラマの進捗などに責任を持つ

* 会議体
 * スプリント計画  
   開発するもの、期間、フィージビリティなど
 * デイリースクラム(朝会)：開発チームの進捗確認  
　　昨日したこと、今日すること、困っていること
 * スプリントReview：プロダクトオーナーの成果物Review
 * スプリントレトロスペクティブ：スプリント振り返り  
　　Processやツールの振り返りなど

* 成果物
　スプリント計画
　スプリントバックログ；機能、目的、具体的な詳細、優先度、工数見積
　プロダクト：リリース完了の定義は重要
 （コードレビューやチェックイン・ユニッってスト・カバレージなど）

**2. 実践編**

* プロダクトオーナーとスクラムマスターは分けること、
* プロダクトオーナーは情熱のあるひと
* プロジェクトの目的とゴール明確に！（インセプションデッキやエレベーターピッチ） 
https://guildworks.doorkeeper.jp/events/65592
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319276/ba3b66dd-5846-9e9e-0d74-a33e3e13c754.png)
* スプリントバックログ単位で見積る、ポイントをつける（本書では作業量ベース：基準を作って比較）  
  →開発メンバーが必ず見積もる
* ベロシティ(スプリントで完了できるポイント（作業量）)の定義（過去プロジェクトなど）や実測
* スプリント計画で、スプリントで達成するバックログと達成基準を定義する、その後にバックログに対するタスクの洗い出しを行い、フィージビリティをチェック。  
**→確実に完了する計画をすることがポイント**
* タイムボックス（スプリント期間やデイリースクラムの時間）を変更するのはNG、ベロシティの基準がづれるので。。
* ベロシティの安定化が重要。人数を増やしてもベロシティは急激にはあがらない。ベロシティは仕事の効率性を評価しているので、スクラムへの慣れなどを配慮する必要あり
* スクラムマスターの責務はプロダクトオーナーと開発チームの支援。遅延のリスクやバックログの増加など各担当のタスクをサポートするのが役割
* 開発チームの自立化がポイント。タイミングでリーダーシップを取る。また各担当のケイパビリティの見える化も、スプリント推進に有効

3.所感
---
内容が分かりやすく読みやすい、3hくらいでメモしながら読破できた。満足度はかなりあり。スクラムの外観やhowを事例と解決策を分かりやすく説明してくれている。初めて取り組む人にとってもイメージができやすい。
コメント入れるとすると、プロジェクトに落としたときの具体例をもう少し知りたかった。
* (自社開発の話なので)お客様含めたチーミングやR&R、各担当に必要な能力について
* スプリントにおけるタスクの切り出し方や具体例
* 課題発生時の対処方法、ユースケースなどが知りたかった。。
* プロジェクト推進のキーマンやlesson&learn、
* 全体の工程感やSprintごとの成果物の具体例。

と言ってもかなり細かい内容なので、全体を知るのはかなり良かったです。勉強になりました。
2020 Web開発者ロードマップの超要約をメモっておく

# サイト
[Developer Roadmaps](https://roadmap.sh/)
再配布が許可されていないようなので概要レベルで要約して日本語参照するメモとします。
2019との比較は割愛しています。

[The 2020 Web Developer Roadmap](https://levelup.gitconnected.com/the-2020-web-developer-roadmap-76503ddfb327)
英語ですが、はじめてロードマップを見る方や
実際にロードマップにそって学習したい方は一読をおすすめします。
（学習サイト等もたくさんリンクしてくれています。）

## Web開発者に求められる前提知識
- 基本的なターミナルコマンドの使い方
- Git/GitHubによるバージョン管理
- ライセンス・セマンティックバージョニング
- SSH、HTTP/HTTPSプロトコルとAPI
- デザインパターン
- 文字エンコーディング

以下が具体的に何を指しているかはよくわからない
- Data Structure & Algorithms (データの構造・アルゴリズム)

要約すると

- ソース管理とライブラリ管理はわかっといてね
- HTML/CSSで文字エンコーディングわかっといてね
- デザインパターンの話をしてキョトンとしないようにね

といったところでしょうか

## フロントエンド開発
「Web開発者に求められる前提知識」との重複内容は割愛

- HTML/CSS/JavaScript
- パッケージマネージャ(npm/yarn)
- ビルドツール(Task Runners・Module Bundlers)
- Framework(React.js Redux)
- CSS in JS(Styled Components/CSS Modules)
- CSS Frameworks(Reactstrap)
- Testing(Jest/react-testing-library/Cypress/Enzyme)
- Type Checkers(TypeScript)
- Server Side Rendering(Next.js)
- GraphQL(Apollo)
- Static Site Generators
- Mobile Applications(React Native)
- Desktop Applications(Electron)


要約すると

- HTML/CSS/JavaScriptがメインだよ
- npm/yarn使ってね
- TypeScript/React.js/Next.js/Apollo使ってね

## バックエンド開発
「Web開発者に求められる前提知識」との重複内容は割愛

- Internetの基礎知識
- フロントエンドの基礎知識(HTML/CSS/JavaScript)
- OSと情報処理知識
- 言語学習(JavaScript)
- Relational Databases(PostgresSQL)
- More about Databases(ORMs/ACID/Transactions/N+1 Problem)
- NoSQL Databases(MongoDB)
- API学習(REST/JSON APIs)
- 認証(OAuth/Basic Authentication/Token Authentication/JWT)
- キャッシング(CDN/Redis/Client Side)
- Web Securityの知識(Hashing Algorithms, HTTPS/SSL/TLS)
- テスト(Integration Testing/Unit testing/Functional Testing)
- CI/CD
- 設計・開発原理(SOLID/KISS/YAGNI/DRY)
- 構築パターン(Monolithic Apps/Microservices/SOA/Serverless)
- メッセージブローカー(RabbitMQ)
- コンテナ化と仮想化(Docker)
- GraphQL(Apollo)
- Web Server(Nginx)
- 規模拡大（マイグレーション・スケーリング）

要約すると

- InternetとOS基礎知識は備えておいてね
- フロントエンドが必要な知識は把握しといてね
- DevOpsが必要な知識は把握しといてね
- DB・認証よろしく
- ソフトはCI/CDしといて
- 設計・開発でキーマンなれるようにしといて
- 環境構築も手伝ってね

ってかなり意訳ぎみに・・・

# DevOps
「Web開発者に求められる前提知識」との重複内容は割愛

- プログラム言語の基礎知識(Python/Ruby/Node.js/Go/Rust/C/C++)
- OSコンセプトの違いに対する理解
- サーバ管理
- ネットワークとセキュリティ
- 何をどのようにセットアップするか(Proxy/Caching/Load Balancer/Firewall)
- コードによるInfrastructure
    - Containers(Docker)
    - Configuration Management(Ansible)
    - Container Orchestration(Kubernetes)
    - Infrastructure Provisioning(Terraform)
- CI/CDツール(Jenkins/TeamCity/CircleCI)
- ソフトウェアとInfrastructureの監視方法(インフラ監視、アプリ監視、ログ管理）
- クラウドプロバイダ(AWS)

要約すると

- プログラムは読めたらいいよ
- 構築メインだからコード化はできるようにね
- じゃ、サーバ資源・ネットワーク・セキュリティの管理よろしく

# 最後に
はじめはHTML/CSS/JavaScriptのみをしっかり学習し、
Git/GitHub使ってポートフォリオを用意してみましょう
と、読めました。

その次にTypeScriptとFrameworkを学習し、
デザインパターンに沿って実装できるようにしつつ

- パッケージ管理(npm/yarn)
- テスト(Jest/react-testing-library/Cypress/Enzyme)
- GraphQL(Apollo)

を使えるようになればフルスタックに近いステータスになれそうですね。
Google AutoML Visionで企業ロゴの判別はできるのか

キャッシュレスなど様々な企業がキャンペーンを繰り広げてますが、リリースノートには企業名ではなくロゴだけ貼ってあるものも多く、いまいちデータとして取り込みにくいなと思います。

そこで画像認識なのですが、Google AutoML Visionは企業ロゴの判別にどれぐらい使えるのでしょう？

---

写真をアップロードしてタグを付けるだけで準備ができますので、簡単そうですね。とりあえず10枚✕2社分の20枚をアップロードしました。

|<img width="637" alt="ml1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33389/933d64a7-6df3-bc3c-5901-51c3f71c8c06.png">|
|:-:|

---

アップロードには結構な時間がかかります。処理が終わるとメールが飛んでくるので画面の前で待っているのではなく別の作業をしていたほうがよさそうです。

|<img width="498" alt="ml1_1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33389/a97b3620-2365-cd01-9fe5-1320948fd50b.png">|
|:-:|

---

アップロードが終わったらトレーニングを開始します。10枚をトレーニング用に8枚、検証用に1枚、テスト用に1枚と割り当ててくれます。

|<img width="782" alt="ml2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33389/e62d6a39-65ac-b341-0813-508b2c873b67.png">|
|:-:|

---

気になるコストですが、40ノード時間まで無料です。1ノード時間あたり3.15ドルで、1000枚で16ノード時間（＝５０．４ドル≒５５００円）ぐらいになるようです。

|<img width="565" alt="ml3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33389/718ced16-f116-cc51-ce2e-4ff03a773b6e.png">|
|:-:|

---

普通にチュートリアル用の花の画像３７００枚で学習したら一気に１万円以上飛んでいきました。チュートリアルをせず、自分が試したい画像でやった方が無料枠を効果的に使えますね。

---

ちなみに残りの額がどうなってるかは、こんな感じで確認することができます。

|<img width="778" alt="ml4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33389/0f31b245-1716-bbe6-d018-e4b7f8f8a1f7.png">|
|:-:|

---

結果です。ツルハドラッグとwelciaを学習させてみて、両方とも検出するようになったのですが、こんな感じでツルハドラッグしか検出してくれないケースや別の企業ロゴとの誤認識もありました。

|<img width="866" alt="ml5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33389/aad115ca-5b58-0488-0340-42e2d5e0e868.png">|
|:-:|

---

最低限の10枚でやってみましたが、やっぱり100枚必要なのかな。これを本格的に使うかどうかは手間とコストと相談ですね。
M5StickC のジャイロセンサー (MPU6886) を使って ワイヤレススピーカーシステム Sonos を操作してみた。

# はじめに
<A HREF="https://qiita.com/advent-calendar/2019/m5stack">M5Stack Advent Calendar 2019</A> 17 日目の記事「<A HREF="https://qiita.com/kitazaki/items/005bda4e3c809ffaa9eb">M5Stack / M5StickC で Sonos を操作してみた。</A>」の発展形になります。

<A HREF="https://sonos-com.amebaownd.com/">SONOS Japan User Group</A> に他の記事もあるので参考になります。

# やったこと
M5StickC のボタン操作で「曲の巻き戻し」「音楽再生の一時停止・再開」「曲の先送り」を行なっていましたが、M5StickC に搭載されているジャイロセンサー「MPU6886」を使用して M5StickC の回転操作でも「曲の巻き戻し」「曲の先送り」を行えるようにしました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/91a257c0-60b0-8480-f9bc-4fcf5552e745.png" width="50%">

## 動画
<A HREF="https://youtu.be/P7keDcvDNog"><img width="75%" alt="スクリーンショット 2020-01-12 15.53.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/58e3762d-e148-0b8d-6a16-d9499d8b5751.png"></A>

## ジャイロセンサー (MPU6886) の動作確認
まずは簡単なコードを書いてジャイロセンサー (MPU6886) の動作を確認します。
Arduino IDE のシリアルプロッタの機能を使用してセンター値を見える化 (グラフ化) します。
M5StickC を動かしながらそれぞれの値がどのように変化するか観察します。
今回の場合は Y 軸ジャイロセンサー値 (gyroY) が ± 50.0 以上 (左回転の場合は -50.0以下、右回転の場合は +50.0以上) に変化した場合をトリガーにしました。
最初、加速度センサー値 (Accel) を使用する予定でしたが、 M5StickC の傾きに応じて加速度センサー値が変化するので、M5StickC の取り扱いを間違う (縦や横に置く) とセンサー値が変化して曲が変わってしまうため、今回の場合は不都合でした。

(ジャイロセンサー値の変化)
<img width="75%" alt="getGyroData.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/e2d2e170-91e0-6ca9-b6d3-c7d098439287.png">

(加速度センサー値の変化)
<img width="75%" alt="getAccelData.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3980c7db-c315-740a-ace6-7cde0e6228bb.png">

```c++:M5StickC_MPU6886.ino
#include <M5StickC.h>

float gyroX, gyroY, gyroZ;  // ジャイロデータ取得　→回転(左90 0/-50/0, 右90 0/50/0)
float ax, ay, az;  // 加速度データ取得　→傾き(X/Y/Z: 正 0/0/1, 左90 1/0/0, 右90 -1/0/0, 上90 0/-1/0, 下90 0/1/0)

void setup() {
  Serial.begin(115200);
  M5.begin();
  M5.MPU6886.Init();
}
void loop() {
  M5.MPU6886.getGyroData(&gyroX, &gyroY, &gyroZ);
  M5.MPU6886.getAccelData(&ax, &ay, &az);
  M5.Lcd.setCursor(0, 30);

  M5.Lcd.printf("X:%7.2f\nY:%7.2f\nZ:%7.2f mg", gyroX * M5.MPU6886.gRes, gyroY * M5.MPU6886.gRes, gyroZ * M5.MPU6886.gRes);
  Serial.printf("%7.2f,%7.2f,%7.2f\n", gyroX * M5.MPU6886.gRes, gyroY * M5.MPU6886.gRes, gyroZ * M5.MPU6886.gRes);
  M5.Lcd.printf("X:%7.2f\nY:%7.2f\nZ:%7.2f mg", ax , ay , az );
  Serial.printf("%7.2f,%7.2f,%7.2f\n", ax , ay , az);

  delay(50);
}
```

# ソースコード
<A HREF="https://github.com/kitazaki/sonos/blob/master/examples/Sonos_Controller_M5StickC_2/Sonos_Controller_M5StickC_2.ino">こちら</A> です。
JSファイル net::ERR_ABORTED 404 (Not Found)と言われた時の対処方法

## JSファイルが net::ERR_ABORTED 404 (Not Found)と言われた時の対処方法

Laravelでの開発でのスクリプトを、bladeへの直書きではなくて、外部JSファイルとして外出しした書き方をしている場合、コンソール画面にて、**net::ERR_ABORTED 404 (Not Found)**となりました。

## 原因：JSファイルの置き場所が間違っていた！！
JSファイルのbladeへの呼び出し方によって、**ファイルの置き場所にお作法がある**そうなんです。

## JSファイルの置き場所の「お作法」

#### ケース１： JSファイルを作成して読み込む場合は、public/jsの下に配置

#### ケース２： JSファイルを作成し、Laravel Mixでコンパイルして読み込む場合は、resources/js/assets/の下に配置


ということでした。

## 反省
基礎からコツコツ学習している人にとっては、当然のことなんだと思うんですが、手当たり次第にLaravelを触っている身としては、こんな初歩的な事も知らなかったのです。お恥ずかしい・・・。
転職日記5日目

こんにちは

5日目といいつつ更新頻度がともなってないのが反省点であります。

ついにポートフォリオの作成に取り掛かり、ましたがまぁてんやわんや

あれ、HTML学習したはずだけどほとんど覚えてないわ、cssの書き方？

あーわかんね状態。

Macも買ったのでこちらも起動して慣れなきゃいけないなどなど・・・

他のQiitaで転職活動について書かれている人を見ると皆さん並行して

いろんなことをやっていたりしてますね。

自分は一つずつやっていくまさに効率の悪い人間の代名詞であるという気はしているのですが、

もうそんなことはいてられないのであります。

今日もHTML&CSSそしてMac、Rubyも使ってしっかり自分をとらえて頑張ろうと思います！
PlantUMLに画像を埋め込む手順

# はじめに
CircleCIのアイコンをPlantUMLで使用したかったのですが、[こちら](https://github.com/tupadr3/plantuml-icon-font-sprites)には無かったので生成しました。
その時の備忘録です。

# 画像の準備
埋め込みたい画像を用意してください。
注意点として、ファイルサイズが大きい画像だとエンコードは出来ても、デコード時に失敗します。
どのくらいが限界なのか分からないのですが、今回は48x48 pxの画像を用意しました。
また、透明箇所は黒として処理されるようなので、背景が白の画像を用意してください。

<img width="909" alt="スクリーンショット 2020-01-12 15.46.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444088/3cecfe9f-37c7-945b-9cb3-fd5084705e61.png">


# グレースケールにエンコード
次に画像をグレースケールにエンコードする必要があります。
ターミナルで下記のコマンドを実行します。

```
$ java -jar plantuml.jar -encodesprite 16z circleci.png
sprite $circleci [48x48/16z] {
bLPLWiKm20nnPUz_shLN2zHclYgu6mdoiRG_bEIjUG25qdd7gF6EXL9dYL7S5NbSg0L6fZDgL_aAFMZoCFW6MTd2zoYpJOaPOGZyZ79mTV0Bf2tidTzW-8K-
gp-jv5ALb4QdrjJm-KukYp_H_A7CGhpPOUT_dPJuGdTvYS9wcKSPwYQ2KoMrJAKp_XYNqs9lnnmS3VpQCk9ppO7Mbya0Ycb5N2YeVgBXj88Xmh6GBp-TZf7J
z56wxtX7kFDlyT-EOmOawF3Noth4wL5xK7_HUABvkgY7Sb4FQBsXzGps2zgFQB-3ymITL-0y1ESjEC_HVG7k8t3VuViKtzVuFO3V6-WzymC
}
```

実行結果を.puファイルにコピペします。

```pu:sample.pu
@startuml

sprite $circleci [48x48/16z] {
bLPLWiKm20nnPUz_shLN2zHclYgu6mdoiRG_bEIjUG25qdd7gF6EXL9dYL7S5NbSg0L6fZDgL_aAFMZoCFW6MTd2zoYpJOaPOGZyZ79mTV0Bf2tidTzW-8K-
gp-jv5ALb4QdrjJm-KukYp_H_A7CGhpPOUT_dPJuGdTvYS9wcKSPwYQ2KoMrJAKp_XYNqs9lnnmS3VpQCk9ppO7Mbya0Ycb5N2YeVgBXj88Xmh6GBp-TZf7J
z56wxtX7kFDlyT-EOmOawF3Noth4wL5xK7_HUABvkgY7Sb4FQBsXzGps2zgFQB-3ymITL-0y1ESjEC_HVG7k8t3VuViKtzVuFO3V6-WzymC
}

rectangle Sample [
    <$circleci>
]

@enduml
```

問題無くプレビューにCircleCIのアイコンが表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/444088/61d4f34d-0e13-67a0-8eb0-9d35338ad378.png)
＠Stateの$についてのメモ

一応SwiftUIのtutorialとか見てみたけれど"$"とかなんなんだよってなったので調べた。


# Stateとは
SwiftUIでViewが変数を監視するために使用する。
Stateの値にアクセスするためには使用する前に"$"をつけなければならない。また、値の変更は宣言したviewのbodyの中でしか行うことができないため、実質privateになっている。
この値が変更されるとview側はbodyの値を必要に応じて再計算し直す。またその逆で、view側になにかstateの変数の値を変化させる操作があった際にstateの変数の中身も変更される。

``` swift
import SwiftUI

struct ContentView: View {
    @State var textData: String = "" // これ。
    
    var body: some View {

        var body: some View {
        VStack {
            TextField("to variable", text: $textData, onCommit: {
            // "text: $textData"でバインディングをしている。
            // TextFieldの内容が変更されるとtextDataの中身も変更される。(viewからstateを変更する例)
                print(self.textData)
            })
            
            Button("reset textfield") {
            // ボタンが押されるとtextDataが""になり、TextFieldも空になる(stateからviewを変更する例)
                self.textData = ""
            }
        }
    }
}
```

一応SwiftUIのtutorialやってみたけどprefixの"$"とかなんなんだよってなったので調べた。

# $とは
この$をつけると、StateはBindingという別の型を作成するらしい。
documentationのStateのページでは以下のように言われている。

 > You can get a binding from a state with the `binding` property, or by using the `$` prefix operator.

ではこのbindingとは一体何なんだという話になるが、view側はstateの変数を直接弄っているのではなく、このbindingを介してstateの変数を弄っているみたい。
documentationのbindingのページでは以下のように言われている。

>Use a binding to create a two-way connection between a view and its underlying model. For example, you can create a binding between a Toggle and a Bool property of a State.

実際先の例で$を外してみると「wrapperであるBindingを使えや」みたいなエラーが出てくる。

<img width="582" alt="スクリーンショット 2020-01-12 5.37.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65510/9beded86-b86a-9bee-3265-8c397c8dc8ee.png">

# 参考サイト
[state and data flow(apple)](https://developer.apple.com/documentation/swiftui/state_and_data_flow)
[Bindingとは(apple)](https://developer.apple.com/documentation/swiftui/binding)
[Stateとは(apple)](https://developer.apple.com/documentation/swiftui/state)
【完全初心者向け】JupyerLab ショートカットメモ【Mac】

# Overview
ここではJupyterLab を使う上で最低限抑えておくべきショートカットをまとめる。
Mac共通のショートカットや、一般的なエディタに搭載されているものは省略、随時更新予定。

# ショートカット一覧
⇧：シフトキー
⌥：オプションキー
⌘：コマンドキー
⇥:タブキー
↩︎:エンター（リターン）キー

### 基本操作系
| コマンド | 操作 |
| --- | ---|
| Y | 対象のセルをCodeタイプに切替 |
| M | 対象のセルをMarkdownタイプに切替 |
| R | 対象のセルをRawタイプに切替 |
| ↩︎ | 対象セルに対してエディットモードに切替 |
| ^M, ESC | エディットモードからコマンドモードに戻る |
| D, D| 選択中のセルを削除（コマンドモード時）
| ⌘ + S | 保存 |


### 移動系
| コマンド | 操作 |
| --- | ---|
| j | カーソルを下に移動（コマンドモード時のみ） |
| k | カーソルを上に移動（コマンドモード時のみ） |
| ⌥ + ⇥ | エディットモードのセルを下に移動（エディットモード時のみ）  
| ⇧ + ⌥ + ⇥ | エディットモードのセルを上に移動（エディットモード時のみ） | 




### コード入力系
| コマンド | 操作 |
| --- | ---|
| ⌘ + / | コメントアウト |
| ⇥ | 入力補完、候補の表示 |
| ⇧ + ⇥ | メソッドの定義を表示|

入力補完が効くのは意外だった。

メソッド定義の表示はオプション等も表示されるので便利。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/38277/41fac9ad-ee48-2166-b832-f8e501ba977f.png)


### 実行系

| コマンド | 操作 |
| --- | ---|
| ^ + ↩︎ | セルを実行（移動しない） |
| ⇧ + ↩︎ | セルを実行し、下セルに移動 |
| ⌥ + ↩︎ | セルを実行し、下に新規セル作成 |


### ショートカットカスタマイズ
`Settings > Advanced Settings Editor (⌘ + ,) > Keyboard Shortcuts`から、ショートカットのカスタマイズが可能。
詳細は後日。
wp_enqueue_scrpts の読み込みをすべて defer にする

最近のブラウザで js を読み込む場合、 async defer を付与して、
dom パースを邪魔しない事が求められていますが、
WordPress の js 読み込み関数である、 wp_enqueue_scripts では、まだサポートされていません。
それを強制的につけるコードです。

なお、コード自体は、 WordCamp Osaka 2019 で講演された kite さんの、
以下スライドを元にしています。
若干の改変です。
[WordPress でも大丈夫！実例で見るウェブパフォーマンス改善 65ページ目](https://speakerdeck.com/ixkaito/wordpress-demoda-zhang-fu-shi-li-dejian-ruuebupahuomansugai-shan-741c01d3-186e-4be5-b53c-683977f2e0b9?slide=65)


```functions.php
add_filter( ‘script_loader_tag’, function ($tag, $handle) {
     if( is_admin()) return $tag; 
     if( !preg_match( ‘/¥b(async|defer)¥b/‘, $tag ) ) {
         return str_replace( ‘ src’, ‘ defer src’, $tag );
     }
     return $tag;
} , 10, 2 );
```
remove_action を考慮しなくて良いので、無名関数にする方が利便性あるかなと思い、改変しています。

<img width="1044" alt="スクリーンショット 2020-01-12 15.23.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132405/69ed2ca9-ebb0-0cd9-216a-ab021acda461.png">

こんな感じで defer が付与されます。
create-react-appでpackage.jsonが作成されない

#package.jsonが作成されない...
Reacteでアプリ作成しようと色なサイトみながらやっているのですが、環境構築初っ端から起動しない。

 #バージョン
yarn 1.21.1
node 12.14.1
npm 6.13.4
**create-react-app 3.3.0**
<font color="blue">※ここが3.3.0の方は注意</font>

#原因
結論から言うとどうやら**create-react-app 3.3.0**このバージョンに限って、**<font color="red">.gitignore</font>**ファイルが存在する状態でやるとバグか何かで動作しないらしい。

#解決
Node指定→githubでリポジトリ作成→git clone ~~ → create-react-app ../アプリ名
だと**Node指定**のタイミングで**<font color="red">.gitignore</font>**こいつができてしまうのでこの手順でやるならNode指定はせずに、
githubでリポジトリ作成→git clone ~~ → create-react-app ../アプリ名
の手順でやるとpackage.jsonが目だたく作成できた！！


#まとめ
無知のことを一からやるときは苦労がつきものだが、諦めなければ必ず解決までたどり着ける！！
と再度認識できた！！！！笑

P.S.
まとめはReact関係ありません。笑
オンボードVGAとNVidia製グラボを併用してマルチディスプレイにしていたらハマった

# ０．あらすじ
- オンボードVGAにモニター1枚、外付けグラボ（NVidia GTX1050i）にモニター2枚を挿してトリプルディスプレイ環境にしていた
- NVidia Control Panelという良さげなソフトがあったので「複数ディスプレイ」などの設定をいじって遊んでいた
- 突然オンボードVGAだけが映らなくなった
- NVidia Control Panelが、BIOSのオンボードVGAを勝手に無効化したらしい
- BIOSの設定でオンボードVGAを有効化したら治った
- 「オンボードVGA 外付けグラボ 併用 映らなくなった」などの検索語で検索してもヒットしないので投稿する

# １．もともとの環境
**PC:** HP Compaq Elite 8300 SFF
**グラボ:** MSI製 NVidia Geforce GTX1050Ti
**モニター:** マウスコンピューター iiyama ProLite XUB 2495 WSU×3台
**OS:** Windows 10 Pro

# ２. 不具合までの経緯
もともとモニター3枚を、1枚は本体のVGA、2枚はグラボのHDMIとDPに挿していた。
グラボはあと1つの端子がDVIで、家に長いDVIケーブルがないのでやむなくそうしていた。
以前からトリプルディスプレイは、スクショが必ずメインディスプレイに出たり、アプリで表示させたダイアログボックスがあさっての画面に出たりするので、不満を持っていた。
それで、Windowsなどの設定項目で治せるんじゃないかと思って、いろいろいじっていた。

# ３．不具合
NVidia Control Panelというユーティリティが入っていて、「複数ディスプレイ」という項目があった。
なんか良さげな感じがしたが、とうぜんグラボに挿している２枚しか認識していない。

「Surroundスパン」という機能があって、複数の物理モニターを１つの論理画面につなげて使えるらしい。
面白そうなのでオンにしてみた。たしかにグラボに挿している２枚が連続的になった。
（あまり便利な感じはしなかった）
それはいいんだけど、PCに直で挿している１枚が認識しなくなった。
（真っ黒になった）

再起動したり、ケーブルを抜き差ししたり、メモリを抜き差ししたり、CMOSクリアしたりしたが、現象は改善できなかった。（この間の騒動は下に書く）

# ４．解決
それで「Compaq オンボードVGA 認識しない」で検索したら、以下のページが当たって、修復できた。
https://support.hp.com/jp-ja/document/c03590154

手順は以下のとおり。

1. BIOSに入るため、PCを再起動して[F10]を連打する。メーカーのロゴ（うちのはhp）が表示されるが、油断せずに連打する
1. BIOSが起動したら、Setup => Device Option control
1. Integrated VGAがDisableになっているのでEnableにする
1. Save&Exit

上のWebページにはさらにPrimary Deviceがどうこうと書いているが、関係ないようだ。
これだけのことで１時間ぐらい悩んだ。

# ５．上記３と４の間の騒動
- 原因が皆目見当付かなかったとき、いぜん不具合が解決したときに用いた、メモリをいったん抜いて再度挿すという技が効くかと思ったが、このときの再挿入が甘かったらしくてPC自体起動しなくなった（ピーッ、ピーッ、ピーッ、ピーッ、ピーッと５回ビープ音がなる状態）
- 再度おちついてメモリを抜いて挿し直したが、PCは起動するが画面が出ない（ピーッ、と１回ビープ音がなる状態）
- 実はこのとき、起動してはいたのだが、無効化された本体のVGA端子にだけモニターをつないでいたので画面が確認できなかったのだ。マヌケ！
- ビープ音の回数の意味については以下のページが参考になる
https://www.4900.co.jp/smarticle/7850/

- 以下のページを参考にCMOSクリアを行った
https://www.tekwind.co.jp/ASU/faq/entry_33.php
- CMOSクリアのジャンパーピンが見つからなかったので、ボタン電池の端子をペーパークリップでショートさせて放電させた
- hpでCMOSクリアすると「Set the correct system time」と表示されるがそのままWindowsが起動する（まだBIOSを変えていないので、グラボに挿したモニターだけが映る状態）
- ここで４の解決法を見出して解決に至った

# ６．反省と課題
- Windows内のユーティリティがBIOSレベルの設定項目をいじることがままあると分かっていたが、今回これが理由だとは思わなかった
- それにしても、メインのパソコン以外の通信機器（今回はiPhone）があって良かった。検索の神様に感謝
- 長いDVIケーブルがあれば、全部グラボに挿せるのだが、もうその価値はないかなとも思う
- グラボはもうDVI端子をやめてもいいんじゃないか。今度グラボを買うときは全部DPかHDMIのを買おう
- もともと悩んでいた、マルチディスプレイ使用時の不便さは解決法が見つからない。一番使わない右の画面をメインディスプレイにして、そこは基本なにも使わないことにすればまあまあいいような気がするけど後ろ向きの解決だ。

**（以上）**
Python3 文系学生の独学メモ① 関数定義

###1から100まで表示するプログラム
```
x = 0
while(x < 100):
    x += 1
    print(x)
```
###defで定義して同様のプログラムを書く
```
def xplus(x):
    return x + 1

a = 0

while(a < 100):
    a = xplus(a)
    print(a)
```

上記のプログラムについてteratailで質問しています。
https://teratail.com/questions/234617

###コラッツの問題（奇数なら+1、偶数なら÷2...を解く）
```
x = int(input())
while(x > 1):
    if x % 2 == 0:
        x //= 2
        print(x)
    else:
        x += 1
        print(x)
```

上記のプログラムについてteratailで質問しています。
https://teratail.com/questions/234626
Talking Head Anime from a Single Image でバ美肉してみる [python 準備編]


# はじめに

この記事は ["Talking Head Anime from a Single Image でバ美肉してみる"](https://qiita.com/tomato_/items/8176fa11f2751f2e992c)  に続く記事です.
先にそちらの記事から読むことをおすすめします.

Talking Head Anime from a Single Image を動かすには Python が必要です.
この記事では誰にでもバ美肉できるように Python を 1 から導入していきたいと思います.

# 必要なもの

[talking-head-anime-demo](https://github.com/pkhungurn/talking-head-anime-demo) の README.md を読んでみると以下のものが必要であるとわかります.

* Python >= 3.6
* pytorch >= 1.1.0
* dlib >= 19.17
* opencv-python >= 4.1.0.25
* pillow >= 6.2.0
* numpy >= 1.17.l2 

左に書いてあるのが Python 本体とライブラリというものです.
右に書かれている数字は version で, これより新しいものを用意する必要があります.

また pytorch には CUDA が dlib には C++ の開発環境と cmake というライブラリがそれぞれ必要なのでそれらも用意していきます.

# Anaconda
必要なものをそろえる前提として Anaconda をインストールしていきます.
Anaconda は Python 本体と科学技術計算向けのいくつかのライブラリを提供するプラットフォームです. 
インストールによって簡単に Python を利用する環境を構築することができます.
また pillow と numpy が標準でインストールされているため, それらの導入が不要になります.

1. まずはこちらの [Anaconda ディストリビューション](https://www.anaconda.com/)にアクセスします.

2. Download から Python 3 version を選択して, ダウンロードします.
必要なものに書かれているように, 3.6 以上の version を選択してください.

3. 手順に従って Anaconda をインストールします.


# CUDA

CUDA は GPU で並列コンピューティングするために必要なプラットフォームおよびプログラミングモデルです.

1. [CUDA Toolkit](https://developer.nvidia.com/cuda-toolkit) へアクセスして, Download Now をクリックします.

2. Select Target Platform から自分の環境にあったプラットフォームを選択し, ダウンロードします.

3. 手順に従って CUDA をインストールします.


# C++ の開発環境

必要なライブラリの１つである dlib をインストールするために C++ の開発環境を整えます.
Microsoft Visual Studio がその環境を提供してくれます.

1. [Visual Studio](https://visualstudio.microsoft.com/ja/downloads/) にアクセスします.

2. Visual Studio Community をダウンロードして, インストーラーを起動します.

3. C++ によるデスクトップ開発をチェックしてインストールします.


<img width="600" alt="C++.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88255/902b4503-d38d-149c-3ce1-898559fb195b.png">

# ライブラリのインストール

必要なライブラリをインストールしていきます.

1. Anaconda Prompt を起動します.

2. Anaconda Prompt に `conda install pytorch torchvision -c pytorch` と入力して, Enter キーを押してしばらく待つと,　`Peronceed ([y]/n)?` と聞かれるので `y` と入力してインストールします.

3. `pip install opencv-python` で opencv-python をインストールします.

4. `pip install cmake` で cmake をインストールします.

5. `pip install dlib` で dlib をインストールします.



# まとめ

以上で Python の準備は終了です.
["Talking Head Anime from a Single Image でバ美肉してみる"](https://qiita.com/tomato_/items/8176fa11f2751f2e992c)に戻って, 実際に動かしてみましょう.
TECH::CAMPにて受講開始

1／11（土）とうとうプログラミングスクールでの学習を開始。
はじめメンターとの面談を行い、直近の学習スケジュールを立てる。
目標は週20時間。
平日には平均2時間ほどしか時間の確保ができないと考えると、土日に合計10時間は勉強する必要あり。

HTMLとCSSの基礎を学習した。とりあえず理解は置いておいてコードを書いてみるようにと指示があったので
教材通りどんどん書き進める。なんとなーくわかったようなわからないような。。。

3時間ほど作業を行い、ホームページのトップ画面のようなものが完成。プロパティはたくさん使ったが、どれがなんの機能を果たしているのかは全然わかりませんでした。

自分でウェブサイトを作って見たらモチベーション続くかな。
智恵にこのことを話して、どんなサイトを作ったら楽しそうか話してみよう。
<img width="1440" alt="スクリーンショット 2020-01-12 15.18.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565375/a09242e1-2ca6-b0cf-a02a-1af117d5e97c.png">
【JavaScript】getElementByIdでnullが返ってきたときに確認すること

#はじめに#
凡ミスで長い時間つまずいたのでメモ。
あと役に立ちそうなサイトもメモ。

#jsのコードの場所を確認#
外部ファイルを読み込むにしろ, htmlの中に書くにしろ, どこに書くかは割と重要ですね。
外部ファイルでつまずいたのでそちらの事例を書きます。

```html
<script src="menu.js"></script>
<div id="menu"></div>
```

```javascript

var menu = document.getElementById('menu');
```

この例だと`変数menu`は`null`になってしまいます。
理由は簡単ですが, `<div id="menu"></div>`の前にjsファイルを読み込んでいるので, `menu`というid属性なんて知らないわよ! どこにあるの!ってなってしまいます。
ってわけなので, 順番を入れ替えてあげればなおります。

```html
<div id="menu"></div>
<script src="menu.js"></script>
```

#その他#
他の事例は[こちらのサイトが参考になるかも](https://www.sejuku.net/blog/27019)
Railsチュートリアルメモ - 第6章

[メモの目次記事はこちら](https://qiita.com/yokohama4580/items/dedfd5510080273dc2a0)

[Railsチュートリアル第6章へのリンク](https://railstutorial.jp/chapters/modeling_users?version=5.1#cha-modeling_users)

## サマリ
- ユーザーモデルの作成とユーザー登録機能の追加
- パスワードのハッシュ化保存
- パスワードの認証

## ポイント
- Active Recordを使うことで、RailsからDBの詳細を隠蔽し、切り離すことができる。
- SQLについて学ばずにDBに対してCRUD操作を行える。

- 以下コマンドでモデルを生成し、DBに反映できる
    - `rails generate model User name:string email:string`
    - `rails db:migrate`
- `rails generate migration`で指定するマイグレーション名の最後に`_to_users`を付与しておくと、usersテーブルへのカラム追加だと判断してファイルを作成してくれる。
    - `rails generate migration add_password_digest_to_users password_digest:string`

- テストクラスのsetupメソッド内に書かれた処理は、各テストが走る直前に実行される
- モデルのvalidateの文法
    - `validates :name, presence: true, length: { maximum: 50 }`
- modelの検証でエラーになった内容は`user.errors.full_messages`で確認できる

- %w[]で文字列の配列を作れる e.g. `%w[foo bar baz] => ["foo", "bar", "baz"]`
- callbackメソッド => ある特定の時点で呼び出されるメソッド
    - e.g. `before_save { self.email = email.downcase }`

- ハッシュ化した後の値のことをダイジェストという。本章ではパスワードのダイジェストをDBに保存する。
- パスワードを平文ではなくダイジェストで持っておくとDBからデータが流出したとしても、パスワードに復元できないので乗っ取られることがない。
- Rails標準の`has_secure_password`を使ってパスワードのハッシュ化保存を実装できる
- `has_secure_password`を使用するには以下2点を満たす必要がある
    1. モデルに`password_digest:string`を追加する必要がある
    2. 'bcrypt'gemが必要なので、Gemfileに追記してbundle installしておく
- `has_secure_password`を追加すると、`authenticate`メソッドが使えるようになる

- 多重代入 (Multiple Assignment) 
    - 次のような文法で2箇所に同時に同じ値を代入できる
        - `@user.password = @user.password_confirmation = "a" * 5`
Eclipseのデバッグで変数の値を変更する

# Eclipseのデバッグで変数の値を変更する
##### デバッグ中に「変数タブ」の「値の変更」により変数の値を変更する
- listに値を追加する

![debug_value_change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565572/0207a205-b261-3e2b-d50b-521eda775324.png)

```console:設定例
Dto dto = new Dto();
list.add(dto);
return list;
```
なぜ、全結合層(fully connected layers)を最上位層(Top layer)というのか

CNNは図で表すと下記のようになる。だから、自分は全結合層を最下位層と思っていた。しかし、論文では全結合層を最上位層と言っている。なぜだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396969/e48c09f0-5cb8-50d4-0007-ca970a8d09a2.png)


下記のリンクが参考になった。
https://stackoverflow.com/questions/46742491/why-do-we-call-the-fully-connected-layers-in-cnn-the-top-layers

入力レイヤーが最下位層で、出力レイヤーが最上位層。
ヒアドキュメント【Ruby】

今回はRuby技術者認定試験で意外と狙われるヒアドキュメントについて書きます。

#### そもそもヒアドキュメントとは？

ヒアドキュメントは改行コードを含めて複数行の文字列を書くことができます。

ヒアドキュメントを使わない場合。

```ruby
puts "ヒアドキュメントを使わない場合はこのようにクオーテーションで囲い、\n改行したい箇所に\\nを書くことで改行できる。\nちなみにバックスラッシュを二つ使う\\ことで改行(\\n)をエスケープできる"
```
【実行結果】

```
ヒアドキュメントを使わない場合はこのようにクオーテーションで囲い、
改行したい箇所に\nを書くことで改行できる。
ちなみにバックスラッシュを二つ使う\\ことで改行(\n)をエスケープできる
=> nil
```

ただしヒアドキュメントを使うと

```here.rb
doq = <<EOS
昨日は雨

今日は晴れ

明日は曇りらしい
EOS
puts doq
```
【実行結果】

```
昨日は雨

今日は晴れ

明日は曇りらしい
```
上記のように\nを書かずに改行の文字列を記載することができます。

ちなみに習慣で識別子にEOSとEOLがよく使われるそうです。

意味はEOSは(end of string)、EOL(end of line)の略です。

他の文字を使っても大丈夫です。

というより、識別子に指定する文字列はヒアドキュメントの内容が理解できるものの方が良いそうです。

```here.rb
doq = <<WEATHER
昨日は雨

今日は晴れ

明日は曇りらしい
WEATHER

puts doq
p doq
```

【実行結果】

```
昨日は雨

今日は晴れ

明日は曇りらしい
"昨日は雨\n\n今日は晴れ\n\n明日は曇りらしい\n"
```

### <<-
<<-はスペースを書く場合やメソッドチェーンにするときに使います。

```here.rb
doq = <<-WEATHER.lines　#linesは各行を配列にするstringsのメソッド
  昨日は雨

 今日は晴れ

明日は曇りらしい
WEATHER

```

```
  昨日は雨

 今日は晴れ

明日は曇りらしい
["  昨日は雨\n", "\n", " 今日は晴れ\n", "\n", "明日は曇りらしい\n"]
```

### ""
ダブルクォートを使うことで式展開ができる

```here.rb
a = '雨'
b = '晴れ'
c = '曇り'
doq = <<"WEATHER"
昨日は#{a}

今日は#{b}

明日は#{c}らしい
WEATHER
puts doq
p doq
```

【実行結果】

```
昨日は雨

今日は晴れ

明日は曇りらしい
"昨日は雨\n\n今日は晴れ\n\n明日は曇りらしい\n"
```

###エラー
ちなみに下記はエラーになる

```here.rb
doq = <<WEATHER
昨日は雨

今日は晴れ

明日は曇りらしい
 WEATHER
puts doq
p doq
```
【実行結果】

```
here.rb:4: can't find string "WEATHER" anywhere before EOF
```
原因は終端のWEATHERにスペースがあるから。

これを解決するにはスペースをなくすか、<<-にする

```here.rb
doq = <<-WEATHER
昨日は雨

今日は晴れ

明日は曇りらしい
 WEATHER
puts doq
p doq
```

【実行結果】

```
昨日は雨

今日は晴れ

明日は曇りらしい
"昨日は雨\n\n今日は晴れ\n\n明日は曇りらしい\n"
```

以上がヒアドキュメントでした。

###参考
今回は参考図書に[Ruby技術者認定試験合格教本（Silver/Gold対応）Ruby公式資格教科書](https://gihyo.jp/book/2017/978-4-7741-9194-2)を使用しました。
macOS Catalina からデフォルトになった zsh 環境をシンプルに改善する

今までずっと `bash` 一択だったんですが、macOS のデフォルトシェルが `Catalina` で `zsh` に変更されたのを受けて Apple 信者の僕は早速 `zsh` ユーザーに転生しました

`zsh` は高機能なだけに設定が複雑になってしまう印象があったので嫌だったんですが、いろいろ試してみたらかなりシンプルで理想的な環境が構築できたので、晒します

[https://github.com/hysh8392/dotfiles/](https://github.com/hysh8392/dotfiles/)

## TL;DR
**プロンプト**
<img width="570" alt="スクリーンショット 2020-01-12 12.21.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554236/dbcb7319-7eb4-2d87-c477-e29cccf4cef4.png">
↓
<img width="570" alt="スクリーンショット 2020-01-12 12.23.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554236/97a1b63e-ae0b-1f19-2c9c-807a3b9b38ff.png">

**タブ補完**
<img width="570" alt="スクリーンショット 2020-01-12 12.22.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554236/7f2ee85b-d738-de9c-1d73-1f2befb7bd35.png">
↓
<img width="570" alt="スクリーンショット 2020-01-12 12.26.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554236/426b3b48-b4ba-86c1-513a-7e1d37140ad9.png">

**.zshrc**

```zsh
autoload -Uz colors && colors
autoload -Uz compinit && compinit
autoload -Uz vcs_info

PROMPT='%F{green}%n@%m:%f%F{blue}%~%f
%# '
PROMPT2="> "

setopt prompt_subst
zstyle ':vcs_info:*' check-for-changes true
zstyle ':vcs_info:*' stagedstr "%F{yellow}!"
zstyle ':vcs_info:*' unstagedstr "%F{red}*"
zstyle ':vcs_info:*' formats "%F{green}%c%u[%b]%f"
zstyle ':vcs_info:*' actionformats '[%b|%a]'
precmd () { vcs_info }
RPROMPT=$RPROMPT'${vcs_info_msg_0_}'
```

## 手順とか
クリーンインストールしたばかりの `Catalina` 環境を汚したくない方は、一旦 Docker で試しましょう

```zsh
% docker run --interactive --tty --rm alpine:3.11 ash
```

とりあえず最低限必要なパッケージをインストールします

```zsh
# apk add curl git zsh zsh-vcs
```

`github` に公開してる `.zshrc` をダウンロードします（もちろん直接 `vi` で書いてもいいです）

```zsh
# cd ~/ && curl https://raw.githubusercontent.com/hysh8392/dotfiles/master/.zshrc --remote-name
```

`zsh` に切り替えて適当な git リポジトリを取得していろいろ試します
<img width="570" alt="スクリーンショット 2020-01-12 14.43.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554236/7be6a471-3157-5bce-718b-98b00b1390f0.png">
いい感じですね！

凝りだしたらキリがないのでこれぐらいにしときましょう笑

気に入ったら↑の `.zshrc` をコピペして `mac` 環境に適用しちゃってくださいw

**参考記事**
- [zshプロンプトのカスタマイズ](https://qiita.com/yamagen0915/items/77fb78d9c73369c784da)
- [zsh の vcs_info に独自の処理を追加して stash 数とか push していない件数とか何でも表示する](https://qiita.com/mollifier/items/8d5a627d773758dd8078)
[PyCPA]Pythonデータサイエンス実践講座 第1回でのゆる〜い気付き

# Pythonデータサイエンス実践講座 第1回
## 1.はじめに
PyCPAというCPA(公認会計士)向けコミュニティの勉強会に参加させて頂いた翌日の、自分なりのゆる〜い気付きポイントのまとめです。
[Pythonデータサイエンス実践講座 第1回 Powered by PyCPA](https://pycpa.connpass.com/event/159618/)
![SS 2020-01-12 13.17.04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/a03c00d1-a594-c63e-fe25-b4bf5afab11e.jpeg "20200111_PyCPA")

なお講義内容にはほとんど関係ないので:sweat:、内容が気になる方は、講座で使用している以下の書籍や、この本のベースとなった無料コンテンツを参照してください。
書籍：[東京大学のデータサイエンティスト養成講座](https://www.amazon.co.jp/dp/4839965250/)
無料コンテンツ：[GCIデータサイエンティスト育成講座演習コンテンツ 公開ページ](https://weblab.t.u-tokyo.ac.jp/gci_contents/)

## 2.Jupyter NotebookにTwitter情報挿入

###(1)やりたかったこと
勉強会はTwitter(ハッシュタグ#PyCPA)も使いながら進んだのですが、途中でこんな投稿が流れました。
https://twitter.com/KoheiSakamoto88/status/1215905958414544896?s=20

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">リスト内法表記を利用する事で, アルファベットのリストも作れます.<br>大文字<br>[chr(ord(&#39;A&#39;)+i) for i in range(26)]<br>小文字<br>[chr(ord(&#39;a&#39;)+i) for i in range(26)]<a href="https://twitter.com/hashtag/PyCPA?src=hash&amp;ref_src=twsrc%5Etfw">#PyCPA</a></p>&mdash; Kohei.Sakamoto (@KoheiSakamoto88) <a href="https://twitter.com/KoheiSakamoto88/status/1215905958414544896?ref_src=twsrc%5Etfw">January 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ハンズオンで使用しているJupyter Notebookに、このTweetを埋め込んでおいて、後で参照できるようにしたいなーと思いました。
###(2)やったこと
なんのことはない、QIITAと同じで、埋め込みコードをコピペして入れるだけです。

・Twitter画面で埋め込みコード表示
![SS 2020-01-12 13.50.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/9021a9ee-7f66-8cc0-fddf-ce823e3847e6.jpeg)
![SS 2020-01-12 13.54.03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/8298a9bd-8a88-cf32-c749-bebc449521d4.jpeg)
・埋め込みコードをコピー
![SS 2020-01-12 13.56.41.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/96351357-2edf-b691-0e7e-ead9e408a81e.jpeg)
![SS 2020-01-12 13.57.40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/e5a2fd82-2011-d9eb-07a5-6391db31ea1a.jpeg)

Jupyter Notebook画面でセルをMarkdownにして、ペーストして完了です。

![SS 2020-01-12 13.45.16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/c5823a70-974b-0008-31a9-5b2b05474c86.jpeg)

## 3.Numpy Array変数のコピー

###(1)やりたかったこと

ハンズオン中にこんなコードがありました。
![SS 2020-01-12 14.18.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/a43ef814-df93-1f05-22ed-4ea3f3f8fde0.jpeg)

sort()は破壊型メソッドのようなので、元データを退避して実行したいと思いました。
![SS 2020-01-12 14.19.27.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/32bfe53c-0712-027a-76c3-7fa6d1804b2d.jpeg)

データ退避先 data1も内容が変わっています。

以下コピペ用コードです。

```python
import numpy as np
data = np.array([9,2,3,4,10,6,7,8,1,5]) 
data1 = data
data.sort()
```



###(2)やったこと

ググってこんなページを見つけました。
[NumPyのコピー(copy)とビュー(view)を分かりやすく解説](https://deepage.net/features/numpy-copyview.html)

こんな感じでarray変数の退避が出来ました。
![SS 2020-01-12 14.32.51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79389/36dcfb38-9dbc-d444-1a51-fe0671f93125.jpeg)

以下コピペ用コードです。

```python
import numpy as np
data = np.array([9,2,3,4,10,6,7,8,1,5]) 
data1 = data.copy()
data.sort()
```
次回の2回目が今から楽しみです:smile:
JavaScript勉強の記録その6: 色々な関数の定義方法

#関数の定義

JavaScriptにはいくつか関数定義の方法があります。

#関数宣言
一番ポピュラーなやり方として、関数宣言があります。

以下の例ではsumという関数を定義した後、sumの呼び出しを行なっております。

```index.js
function sum(a, b, c) {
  return a + b + c;
}

console.log(sum(1,1,1));
//3
```

#関数式
変数や定数に代入するような形で関数を定義することもできます。
以下の例では定数であるsumに関数を代入し、定数sumに（）を付けて実引数を渡しています。

```index.js
const sum = function(a, b, c) {
  return a + b + c;
}

console.log(sum(1,1,1));
//3
```

#アロー関数
関数式をより短く書く方法も用意されてあり、それをアロー関数と呼びます。
書き方としては、functionと書く代わりに=>を{}と繋げてあげればOKです。

```index.js
const sum = (a, b, c) => {
  return a + b + c;
}

console.log(sum(1,1,1));
//3
```


#もっと短くアロー関数
さらに短く書く方法も用意されてあり、処理結果を返すだけであれば{}とreturnを削ることもできます。

```index.js
const sum = (a, b, c) => a + b + c;

console.log(sum(1,1,1));
//3
```


#もっともっと短くアロー関数
引数が１つだけの場合は（）すらも省略できる書き方も用意されてあるようです。
以下の例ではコメントアウトされてある関数式と、コメントアウトされていない部分は同じ意味になります。

```index.js
//const doble = function(a) {
  //return a * 2;
//}

const doble = a => a * 2;

console.log(doble(2));
//4
```
VBAで特定のフォルダ以下のファイルを全て取得する関数(正規表現によるフィルター対応)

.NETのDirectory.GetFilesとか Directory.EnumerateFilesにあたる機能がほしかったのですが無かったみたいなので忘却録のような形で。
FileSystemObjectのFileオブジェクトを取得するため、フルパス、名前だけ、更新日時など簡単に出力時に切り替えられるかと。

以下を任意モジュールに以下をコピーして下さい。

```vb
Private Filedic As Object 'Dictionary , 参照:Microsoft Scripting Runtime
Private Reg As Object 'RegExp , 参照:Microsoft VBScript Regular Expressions 5.5

Public Function GetFilesForAllDirectories(currentFolder As String, Optional regPattern As String = ".*", Optional regIgnoreCase As Boolean = False) As Variant

    Set Filedic = CreateObject("scripting.dictionary") 'New Dictionary(Microsoft Scripting Runtimeが有効な場合)
    Set Reg = CreateObject("VBScript.RegExp") 'New RegExp(Microsoft VBScript Regular Expressions 5.5が有効な場合)
    Reg.Pattern = regPattern
    Reg.IgnoreCase = regIgnoreCase 'デフォルトはTrueです。True=大文字小文字を区別しない、False=区別する
   
    Call GetFilePath(currentFolder)
    GetFilesForAllDirectories = Filedic.Keys

End Function

Private Function GetFilePath(folderPath As String) as Variant

    Dim fso As Object: Set fso = CreateObject("scripting.Filesystemobject") ' New FileSystemObject (Microsoft Scripting Runtimeが有効な場合)
    Dim subfolder As Object 'Folder(Microsoft Scripting Runtimeが有効な場合)
   
    For Each subfolder In fso.GetFolder(folderPath).SubFolders
        Call GetFilePath(subfolder.Path)
    Next
   
    Dim file 'as Fileとしたいですが for eachで帰ってくる要素はVariant限定なのでas Fileはデバッグ以外で使用できません
    For Each file In fso.GetFolder(folderPath).Files
        If Reg.test(file.Path) Then
            Filedic.Add file, 0
        End If
    Next
   
End Function
```


使い方
regPatternを指定しなかった場合は全てのファイルを取得します。
以下では、xls/xlsx/xlsm/xlsmなどのexcelファイルを取得しています。

```vb
Sub PrintGetFilesTest()

    Dim currentFolder As String: currentFolder = "C:\hogehoge\"
    Dim regPattern As String: regPattern = ".*\.xls.?$"
   
    Dim files:files = GetFilesForAllDirectories(currentFolder, regPattern, True)
    Dim file 

    For Each file In files
        Debug.Print file.Path 
        'ファイルオブジェクトを取得しているため
        'file.Pathだとフルパスを、file.Nameだとファイル名だけを、file.DateLastModifiedだと更新日時を取得できます。
        'ex .Attributes→拡張子 .DateCreated→ファイル作成日 .DateLastAccessed→最終アクセス日 .Size→ファイルサイズ
    Next
End Sub
```
resourcesを多段階ネストさせた時のform_forメソッド

##概要

resourcesを多段階ネストさせた時のform_forメソッドの使用方法に関する記事があまりなかったので、備忘録として纏めます。

スポット（Post）ごとに写真（Image）が投稿でき、写真ごとにコメント（Comment）が投稿できる旅行カタログアプリケーションを作成しております。

ビューはHamlで書いております。

作成途中のため、細かいところはご容赦くださいませ。

##ルーティング

``` routes.rb
  resources :posts, only: [:index, :new, :create, :edit, :update] do
    resources :images, only: [:index, :new, :create, :show] do
      resources :comments, only: [:index, :create]
    end
  end
```

##コントローラ

1つ目のネストのimageは下記の通り。

``` images_controller.rb
class ImagesController < ApplicationController
  before_action :set_post

  def index
    @images = @post.images.includes(:user)
  end

  def new
    @image = Image.new
  end
  
  def create
    @image = @post.images.new(image_params)
    if @image.save
      redirect_to post_images_path(@post)
    else
      @images = @post.images.includes(:user)
      render :index
    end
  end

  private

  def image_params
    params.require(:image).permit(:text, :image).merge(user_id: current_user.id)
  end

  def set_post
    @post = Post.find(params[:post_id])
  end

end
```

2つ目のネストのcommentは下記となる。
PostのIDを定義する必要があることに気付くのに時間がかかりました・・・

``` comments_controller.rb
class CommentsController < ApplicationController
  before_action :set_image

  def index
    @post = Post.find(params[:post_id])
    @comment = Comment.new
    @comments = @image.comments.includes(:user)
  end

  def create
    @post = Post.find(params[:post_id])
    @comment = @image.comments.new(comment_params)
    if @comment.save
      redirect_to post_image_comments_path(@post, @image)
    else
      @comments = @image.comments.includes(:user)
      render :index
    end
  end

  private

  def comment_params
    params.require(:comment).permit(:content).merge(user_id: current_user.id)
  end

  def set_image
    @image = Image.find(params[:image_id])
  end
end
```

##モデル

``` image.rb
class Image < ApplicationRecord
  belongs_to :post
  belongs_to :user
  has_many :comments
  validates :image, presence: true
end
```

``` comment.rb
class Comment < ApplicationRecord
  belongs_to :post
  belongs_to :user
  validates :content, presence: true
end
```

##ビュー
``` new-image.html.haml
.new-image__form
  = form_for [@post, @image] do |f|
    = f.label :image, class: 'form__image' do
      = icon('fas', 'image', class: 'icon')
      = f.file_field :image, class: 'hidden'
    .new-image__form__mask
      = f.text_field :text, class: 'form__text', placeholder: 'type a caption'
    = f.submit 'Send', class: 'form__submit'
```

``` new-comment.html.haml
.comments__content__list__form
  = form_for [@post, @image, @comment ] do |f|
    .comments__content__list__form__new-comment
      .comments__content__list__form__new-comment__input-box
        = f.text_field :content, class: 'new-comment__input-box__text', placeholder: 'コメントを追加...', inputtype: "text", style:"border:none"
      = f.submit 'Send', class: 'new-comment__submit-btn'
```

2段ネストした場合のform_forの引数は、親、子、孫の関係になるため、post, image, commentの3つを渡しています。

##以上です

間違いあればご指摘お願いいたします！
JavaでSLF4Jを使用する際のLoggerFactory.getLoggerの引数のクラス名取得方法

# 一般的な取得方法

`private static final Logger logger = LoggerFactory.getLogger(TestSub1.class);`

この場合、クラスファイル毎に記述が異なり、コピーする場合注意する必要がある。

```java:TestSample1.java
package test;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class TestSample1 {

	private static final Logger logger = LoggerFactory.getLogger(TestSub1.class);

	public void exec() {
		logger.debug("Exec method was executed.");
	}
}

```


# thisを使って取得

`private final Logger logger = LoggerFactory.getLogger(this.getClass());`

thisを使用する場合、`static`にすることができないが、どのクラスファイルでも記述が同じため、コピーすることができる。

```java:TestSample2.java
package test;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class TestSample2 {

	private final Logger logger = LoggerFactory.getLogger(this.getClass());

	public void exec() {
		logger.debug("TestSample#Exec method was executed.");
	}
}
```

# クラス名取得メソッドを使用

`private static final Logger logger = LoggerFactory.getLogger(Util.getClassName());`

`Util#getClassName`メソッドを使用することで、どのクラスファイルでも記述が同じため、コピーすることができる。また`static`でも使用可能。

```java:TestSample3.java
package test;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

public class TestSample3 {

	private static final Logger logger = LoggerFactory.getLogger(Util.getClassName());

	public void exec() {
		logger.debug("TestSample3#exec method was executed.");
	}
}
```

```java:Util.java
package test;

public class Util {
	public static String getClassName() {
		return Thread.currentThread().getStackTrace()[2].getClassName();
	}
}
```

# CDIの場合

`@Produces`と`@Inject`を使用して、`Logger`にインスタンスを注入することが可能。
どのクラスファイルでも記述が同じため、コピーすることができる。

```java:SampleManagedBean.java
package test.mb;

import java.io.Serializable;

import javax.enterprise.context.SessionScoped;
import javax.inject.Inject;
import javax.inject.Named;

import org.slf4j.Logger;

@Named
@SessionScoped
public class SampleManagedBean implements Serializable {

	private static final long serialVersionUID = 1L;

	@Inject
	private transient Logger logger;

	public String execute() {
		logger.info("SampleManagedBean#execute method was executed.");
		return null;
	}
}
```

```java:LoggerFactoryProducer.java
package test.util;

import javax.enterprise.context.Dependent;
import javax.enterprise.inject.Produces;
import javax.enterprise.inject.spi.InjectionPoint;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

@Dependent
public class LoggerFactoryProducer {

    @Produces
    public Logger getLogger(InjectionPoint ip) {
    	return LoggerFactory.getLogger(ip.getMember().getDeclaringClass().getName());
    }
}
```

以上
とりあえずArchLinuxをインストールしてみる。

# インストールしてみる。

ArchLinuxはインストーラーとか無さげなので、VirtualBoxで配布ISOを起動して、一般的に利用出来る所まで[インストールガイド](https://wiki.archlinux.jp/index.php/%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%82%AC%E3%82%A4%E3%83%89)を参考にインストールしてみる。

# パーティションニング

配布CD直後、ArchLinuxはcdfsでrootで起動されている。
VirtualBox上では30GB程の仮想ディスクを割り振っているので、まずここにパーティションをふる事からする。
以下、まだXとか起動しておらず、クリップボードも起動していないので、大体の記述。

```
# ls /dev/sda*
/dev/sda
# まだ、sdaしか無い事が確認出来る。
# fdisk /dev/sda
Partition Typeが聞かれるので、primaryで。
サイズが聞かれるので、+10Gで。
これで一旦終了。
残りを/home用に割り当てる。
最後に w で書込みして終了。

ls /dev/sda*
/dev/sda /dev/sda1 /dev/sda2

mkfs.ext4 /dev/sda1
mkfs.ext4 /dev/sda2
```

# mount

```
# mount /dev/sda1 /mnt
# mkdir /mnt/home
# mount /dev/sda2 /mnt/home
```

# swap

```
# dd if=/dev/zero of=/mnt/swap bs=1073741824 count=8
# mkswap /mnt/swap
# swapon /mnt/swap
```

# network

```
# ping archlinux.jp
で接続されているのを確認
```

駄目な場合は[ネットワーク設定](https://wiki.archlinux.jp/index.php/%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E8%A8%AD%E5%AE%9A#IP_.E3.82.A2.E3.83.89.E3.83.AC.E3.82.B9.E3.81.AE.E8.A8.AD.E5.AE.9A)周りを確認

# いよいよインストール

pacmanを利用して、各種ファイルを流し込むらしい。なので、pacmanの優先mirrorsiteを設定する。 /etc/pacman.d/mirrorlist の先頭(どうやら先頭一致が優先らしい)に日本のミラーを記述する。

## ベースシステムのインストール

```
# pacstrap /mnt base linux linux-firmware base-devel vim dhcpcd
```
でベースシステムを入れる。

## fstabの生成

```
# genfstab -U /mnt >> /mnt/etc/fstab
```

# 作成した環境(/mnt)にchrootして作業

```
# arch-chroot /mnt
```

## タイムゾーン

```
# ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
# hwclock --systohc --utc
```

## ロケール

```
# /etc/locale.genを編集し、必要なlocaleだけコメントを外す。
# その後、generate
locale-gen
```

## ロケールをen_US.UTF-8へ。

ja_JP.UTF-8にすると、現時点でフォントが入ってないので豆腐になる。

```
# echo LANG=en_US.UTF-8 > /etc/locale.conf
```

# ネットワーク

## ホスト名の設定

```
# echo arch > /etc/hostname
```

## ネットワーク設定

```
# systemctl start dhcpcd@enp0s3
# systemctl enable dhcpcd@enp0s3

ping www.google.com
```

# ブートローダ

```
# pacman -S grub
# grub-install --target=i386-pc /dev/sda
# grub-mkconfig -o /boot/grub/grub.cfg
```
リモートデスクトップ解除後、アプリが終了してしまう問題

# リモートデスクトップでPCをロックさせずにアプリケーションを起動しておきたい。
リモートデスクトップはセッションという単位で外部からのアクセスを管理しているようで、セッションが終了するとWindows10では画面がロックされてしまいます。
ブラウザなど、一部のアプリケーションはリモートデスクトップ解除後も状態を保持するようですが、終了してしまうアプリケーションもあります。
リモートでVirtualDesktopStreamerを起動させたいと思ったとき、起動はできても、VR端末でアクセスしようとするとセッションを奪い合うような形になり、表示がおかしくなって上手くいきませんでした。

## 追記 23/11/19
Windows11でも動作することを確認できました。

## 追記 2021/10/30
この方法を利用すれば、VirtualDesktopStreamerだけでなく、Steam Linkで
"Would you like to accept secure desktop input from Steam?....."
の警告メッセージを回避できる事が確認できました。

## tsconコマンド
リモートデスクトップを終了すると、本機がロック状態になってしてしまうので、コマンドプロンプト上で[tsconコマンド](https://docs.microsoft.com/ja-jp/windows-server/administration/windows-commands/tscon)を使い

```DOS:sess.bat
tscon [リモート・セッションID] /dest:console
```

リモート・セッションから物理コンソール（コンソール・セッション）というメイン？のセッションに切り替える事で、
本機がロック状態から復帰できる事を確認しました。
リモート・セッションのセッションIDは以下のコマンドで確認できます。

```DOS:sess.bat
query session
```

rdp-tcp#XXとなっているセッションのIDをtsconで指定します。
さて、ロック解除できるようになったので、
アプリケーションも起動できるはずです。
これらをまとめてbatファイルに書き出します。

```DOS:sess2.bat
@echo off

tscon 0 /dest:console
timeout /t 5
call “C:\xxx\VirtualDesktop.Streamer.exe"
```

timeoutはアプリケーションをすぐに起動できなかったので、多少遅延させました。
これで、VirtualDesktopStreamerがリモート・セッションではなく、コンソール・セッションでアプリケーションが立ち上がったままの状態になります。
tox設定ファイル　チートシート

# 概要
Pythonモジュールに対するCIで、勉強がてらtoxを導入してみたため、自分用に設定ファイルによく書きそうな内容をまとめて記述しておきます。
※toxバージョン`>=3.14`での内容となります。

# toxとは
`virtualenv`を利用したMultiEnvironmentでのテストを実施することができるツールです。
複数バージョンのPythonでモジュールに対するテスト実施できる点が便利です。

## 設定ファイル種別
ドキュメントによると、３種類のファイルを次の優先順位で読み込みます。
1. pyproject.toml
2. tox.ini
3. setup.cfg

以下に記載していくのは`tox.ini`の内容となります。

## 埋め込み変数

各セクションで利用できる埋め込み変数の一覧です。

|設定名|概要|
|:---|:---|
|{toxinidir}|`tox.ini`の配置されているディレクトリ
|{toxworkdir}|仮想環境が作成されるディレクトリ
|{envname}|仮想環境名、`[tox:{envname}]`の部分で記載したもの
|{envdir}|仮想環境ディレクトリ、デフォルトで`{toxworkdir}/{envname}`

## globalセクション
共通設定を記載するセクションです。`[tox]`以下に記載します。

|設定名|概要|デフォルト値|
|:---|:---|:---|
|envlist|実行環境を羅列、コンマ区切りまたは改行して複数記述可能<br>**基本的に記述**<br>`py37``py38`などデフォルトで用意されているものもある|-
|toxworkdir|仮想環境が作成されるディレクトリ<br>toxによって作成されたファイル等はこのディレクトリに格納される|{toxinidir}/.tox
|skipsdist|結果をパッケージ化するか<br>`true`でスキップする|false
|skip_missing_interpreters|interpreter関係で失敗した場合のリターンコードを設定<br>`true`で失敗した場合も成功したとみなしたコードを返却、`config`は設定ファイルから読み込む|config

example

```config:tox.ini
[tox]
envlist =
    py38, py37
    flake8
    isort
skipsdist = true
skip_missing_interpreters = true
```

## envセクション
globalセクションのenvlistに記載した各環境の詳細を記載するセクションです。`[tox:{envname}]`以下に記載します。

|設定名|概要|デフォルト値|
|:---|:---|:---|
|commands|**必須**<br>現在の環境で実行するコマンド内容<br>`coverage run -p -m pytest`や`flake8`などを設定|-
|deps|コマンド実行に必要な依存関係を指定<br>直接モジュールを指定するか、requirement.txtに記載して`-rrequirements.txt`で指定する<br>要は`pip install`のオプション部分|-
|passenv|実行仮想環境に引き継ぎたい環境変数を指定<br>`LANG``PIP_INDEX_URL`などを設定可|-
|setenv|実行仮想環境に新たに環境変数を設定|-
|whitelist_externals|実行仮想環境側には用意されていないが、ローカル環境のコマンドで問題なく、これを使いたい場合に指定する|-
|alwayscopy|Pythonファイルへのシンボリックリンクではいやだという場合に`true`指定|false
|changedir|コマンド実行時のワーキングディレクトリを指定|{toxinidir}
|envlogdir|ログファイル置き場を設定|{envdir}/log
|description|簡単な説明文をかける<br>toxでの環境表示コマンド実行時にverboseを指定していると内容が表示される|no description

example

```config:tox.ini
[tox]
envlist =
    py38
    flake8
skipsdist = true

# py38環境の詳細
[testenv]
passenv = LANG
deps = -rrequirements.txt
passenv = PYTHONPATH
setenv =
    PYTHONDONTWRITEBYTECODE=1
changedir = tests
commands =
    coverage run -p -m pytest

# flake8環境の詳細
[testenv:flake8]
skip_install = true
deps =
    flake8 >= 3.7
    flake8-import-order
changedir = {toxinidir}
description = 'check pep8 style'
commands = flake8 module
```

pytestやflake8自体の設定は`setup.cfg`に記載します。

```config:setup.cfg
[tool:pytest]
testpaths = tests

[coverage:run]
branch = True
source =
    module
    tests

[flake8]
exclude = build,.git/*,.tox/*,./tests/*
ignore =
    # allow Multiple spaces before Operator
    E221
max-line-length = 140
```

# Reference
- [公式ドキュメント](https://tox.readthedocs.io/en/latest/)
mysql DB作成におけるメモ

ど忘れしていたので、個人的メモ。

rails db:createできない時は以下の4点を確認。

・mysql側にuserが作成されているか
・そのuserはpasswordがあるか
・database.ymlにusernameとpasswordの記載があるか
・そのuserは権限付与されているか