OmniAICreator/Qiita-1.07M huggingface dataset:
Next.js と Typescript で React-StyleGuidist を使うための設定

## 概要

Next.jsとTypeScriptでReact-StyleGuidistを利用したかったので調査したときのメモとして残している。

## Next.js プロジェクトの作成

```
create-next-app [prject-name]
```

```
cd [project-name]

mkdir src
mv pages src/
mkdir src/components
mkdir src/styleguide
```

## 必要なパッケージのインストール

```
# NextjsでTypeScriptを使うためのパッケージ
yarn add -D @types/node typescript @types/react

# React-StyleguidistをNextjs,TypeScriptと一緒に使うためのパッケージ
yarn add -D react-styleguidist babel-loader react-docgen-typescript

# Bootstrapを使いたかったので追加しているが、必須ではない。
yarn add bootstrap jquery popper.js
```

## `styleguide.config.js`の設定

```js
const path = require("path");

module.exports = {
  components: "./src/components/**/*.tsx",
  propsParser: require("react-docgen-typescript").withCustomConfig(
    "./tsconfig.json"
  ).parse,
  styleguideComponents: {
    Wrapper: path.resolve(__dirname, "src/styleguide/Wrapper.tsx"),
  },
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          loader: "babel-loader",
        },
        {
          test: /\.css?$/,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  },
};
```

## `src/styleguide/Wrapper.tsx`の設定

```tsx
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";

const Wrapper: React.FC = ({ children }) => {
  return <div>{children}</div>;
};

export default Wrapper;
```


## `babel.config.js`の設定

```js
module.exports = {
  presets: ["next/babel"],
  plugins: [],
};
```

## `package.json`の設定

```json
"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build"
  },
```

## StyleGuistサーバの起動

あとはReactで利用する場合と同じように、
以下のコマンドで起動し、`src/components`にコンポーネントと対応するMDファイルを作成していく。


```
yarn styleguide
```
[OCI] OCIシークレットを使ってシェルスクリプトからOracle Databaseに接続してみた

# はじめに
たまたま@kenwatanさんと同じ趣旨の記事を作成していたのですが、先を越されてしまいましたｗ　こちらの記事は[あちらの記事](https://qiita.com/kenwatan/items/5867a06ef6a00749dcf0)とは少し趣旨を変えて、既存のアプリケーションでよくある、シェルスクリプトからSQL*Plusを起動させるバッチ処理を意識したサンプルを作成してみました。加えて、あちらの記事の補足的な情報も追記しています。

# シークレットでパスワード管理する利点
シークレットを利用すると、OCI CLIのようなAPIを利用して、リモートで管理されているパスワードを取得してからそのパスワードをログインなどで利用する形でアプリケーションを作成することになります。このようにすることで、以下の利点が得られます。

1. シークレットの管理の権限を持つ人だけがパスワード管理を集中的に実施することが可能になる
2. パスワードが記述されたソースコードを介したパスワードの漏洩を防止できる
3. パスワードの変更の際に、アプリケーションの修正が不要になる

# シークレットの作成
大きくは以下の手順となります。

1. ボールトを作成(ボールトがない場合のみ)
2. キーを作成(キーがない場合のみ)
3. シークレットを作成

詳細な手順は[既存の記事](https://qiita.com/kenwatan/items/5867a06ef6a00749dcf0)をご確認いただくとして、補足情報を追記します。
既存の記事ではシークレットに格納する情報をすべてBase64でエンコーディングしていますが、シークレットがテキストの場合、シークレット・タイプに「テキスト」を指定して格納することも可能です。この場合でも、シークレット作成後の内容の確認結果はBase64エンコーディングされた値が表示されます(一時的にプレーンテキストで表示させることも可)。OCI CLIで取得したシークレットもBase64エンコーディングされています。

# シェルスクリプトからシークレットを取得するサンプル
Computeインスタンスから19cのHigh PerformanceのDBCSインスタンスへ接続するサンプルのシェルスクリプトです。

```sample.sh
#!/bin/bash

password=`oci secrets secret-bundle get \
  --auth instance_principal \
  --secret-id=ocid1.vaultsecret.oc1.ap-osaka-1.amaaaaaassl65iqa4nhkpdf42pd52joedsnnb4kbyen4cw6ztrmrd6s2cb2a \
  --query 'data."secret-bundle-content".content' \
  --raw-output \
  | base64 -d`

sqlplus -s test/${password}@pdb1 <<EOF
  select sysdate from dual;
  exit
EOF
```
ociコマンドの戻り値がパスワードのBase64エンコード値なので、base64 -dコマンドで元の値にデコードしています。
以下、2行目のpasswordシェル変数への格納の際に実行しているociコマンドのオプションを解説します。

- --authオプション
　インスタンス・プリンシパル認可を利用するために指定しています。
- --secret-idオプション
　シークレットのOCIDを指定します。本コマンドに必須のオプションとなります。
- --queryオプション
　ociコマンドの戻り値は該当するシークレットに関する情報を連ねたJSONですが、今回必要なのはパスワードの値のみなので、本オプションを利用して、必要な部分だけ抜き出しています。
- --raw-outputオプション
　--queryオプションの戻り値を囲んでいるダブルクォーテーションを取り除くオプションです。

```
$ ./sample.sh

SYSDATE
---------
26-APR-20
```
【透明化】ターミナルの環境設定変更しないと絶対に損します>_<

# ターミナルを透明化にして効率的に
<img width="1440" alt="スクリーンショット 2020-04-26 18.41.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/9208f73c-e320-ac97-dd1f-0130b864c519.png">

ターミナルを透明化にすることで背景のエディタなどが見えるため作業が効率化します！しかもサイズを最大しても背景が見えるためすごく見やすいです^_^
では設定する方法をご紹介します！

## 環境設定の変更
<img width="678" alt="スクリーンショット 2020-04-26 18.43.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/58563579-5685-cd8e-b75b-5aef80b47b9f.png">
まずは環境設定を開きます。

### プロファイルの設定
<img width="500" alt="yqT3iXEGmk83uKf1587894370_1587894512.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/850fe6de-278c-af80-9a74-5e9cdc7e6e10.png">
「カラーとエフェクト」を開きます。
<img width="251" alt="スクリーンショット 2020-04-26 18.44.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/8f6898c9-858c-3b3b-2ac4-43e41af4ff4e.png">
**下記のように設定します。**
白と黒のちょうど中間の色を選択
不透明度を50%
ブラーを0%
<img width="500" alt="yqT3iXEGmk83uKf1587894370_1587894466.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/ca073fa0-dc8b-f508-f023-a67c5e7ac130.png">
次に「テキスト」を開きます。
<img width="251" alt="スクリーンショット 2020-04-26 18.44.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/cfd041f7-5a6f-e56a-da17-c2e6f8ac7b0f.png">
テキストの色を白に設定しましょう。

<img width="1440" alt="スクリーンショット 2020-04-26 18.41.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/587506/698a7c42-b294-84fa-13ce-fb40ceb01d94.png">
そうすることで初期の黒画面から透明のターミナルに変更することができました！
**この設定値はあくまでわたしが試行錯誤して最善と思った**方法なのでちょうどいい設定値を探してみてください^_^
C# Enumの文字列変換は重い

### EnumをToStringすると激重なので、事前にswitch文やarrayで文字列を定義しておくと、パフォーマンスを上げることができる

## コード
```C#
[RankColumn]
public class EnumTest
{
	[Params(Weapon.WeaponType.A)]
	public Weapon.WeaponType weaponType;

	[Benchmark]
	public string Case1()
	{
		return weaponType.GetNameSwitch();
	}

	[Benchmark]
	public string Case2()
	{
		return weaponType.GetNameArray();
	}

	[Benchmark]
	public string Case3()
	{
		return weaponType.GetNameToString();
	}
}

public static class Weapon
{
	public enum WeaponType
	{
		A,
		B,
		C,
	}

	private static string[] weaponTypeArray = {
		"A",
		"B",
		"C",
	};

	public static string GetNameSwitch(this WeaponType type)
	{
		switch (type)
		{
			case WeaponType.A: return "A";
			case WeaponType.B: return "B";
			case WeaponType.C: return "C";
		}
		throw new NotImplementedException();
	}

	public static string GetNameArray(this WeaponType type)
	{
		return weaponTypeArray[(int)type];
	}

	public static string GetNameToString(this WeaponType type)
	{
		return type.ToString();
	}
}
```

## 結果
```C#
//BenchmarkDotNet=v0.12.0, OS=Windows 10.0.18362
//Intel Core i5-9600K CPU 3.70GHz(Coffee Lake), 1 CPU, 6 logical and 6 physical cores
// [Host]     : .NET Framework 4.8 (4.8.4121.0), X64 RyuJIT
//  DefaultJob : .NET Framework 4.8 (4.8.4121.0), X64 RyuJIT

//| Method | weaponType |        Mean |     Error |    StdDev | Rank |
//|------- |----------- |------------:|----------:|----------:|-----:|
//|  Case1 |          A |   1.2287 ns | 0.0263 ns | 0.0246 ns |    2 |
//|  Case2 |          A |   0.0523 ns | 0.0123 ns | 0.0115 ns |    1 |
//|  Case3 |          A | 282.2946 ns | 1.4594 ns | 1.3652 ns |    3 |
```
C# Stringパフォーマンス計測

### よく使うintから文字列への変換Performance測定

# 計測コード
```C#
[MemoryDiagnoser, RankColumn]
public class ScoreBoard
{
	[Params(999999)]
	public int score;

	[Benchmark]
	public string Case1()
	{
		return "Score : " + score.ToString();
	}

	[Benchmark]
	public string Case2()
	{
		return "Score : " + score;
	}

	[Benchmark]
	public string Case3()
	{
		string scoreText = score.ToString();
		return string.Format("Score : {0}", scoreText);
	}

	[Benchmark]
	public string Case4()
	{
		return string.Format("Score : {0}", score);
	}

	[Benchmark]
	public string Case5()
	{
		return $"Score : {score}";
	}

	[Benchmark]
	public string Case6()
	{
		string scoreText = score.ToString();
		return $"Score : {scoreText}";
	}

	[Benchmark]
	public string Case7()
	{
		string scoreText = score.ToString();
		return ZString.Concat("Score : " + scoreText);
	}

	[Benchmark]
	public string Case8()
	{
		return ZString.Concat("Score : ", score);
	}

	[Benchmark]
	public string Case9()
	{
		string scoreText = score.ToString();
		return ZString.Format("Score : {0}", scoreText);
	}

	[Benchmark]
	public string Case10()
	{
		return ZString.Format("Score : {0}", score);
	}
}
```

# 結果
```
//BenchmarkDotNet=v0.12.0, OS=Windows 10.0.18362
//Intel Core i5-9600K CPU 3.70GHz(Coffee Lake), 1 CPU, 6 logical and 6 physical cores
// [Host]     : .NET Framework 4.8 (4.8.4121.0), X64 RyuJIT
//  DefaultJob : .NET Framework 4.8 (4.8.4121.0), X64 RyuJIT

//| Method |  score |      Mean |    Error |   StdDev | Rank |  Gen 0 | Gen 1 | Gen 2 | Allocated |
//|------- |------- |----------:|---------:|---------:|-----:|-------:|------:|------:|----------:|
//|  Case1 | 999999 |  59.98 ns | 0.670 ns | 0.627 ns |    2 | 0.0204 |     - |     - |      96 B |
//|  Case2 | 999999 |  60.23 ns | 0.331 ns | 0.310 ns |    2 | 0.0204 |     - |     - |      96 B |
//|  Case3 | 999999 | 132.33 ns | 1.099 ns | 0.975 ns |    5 | 0.0203 |     - |     - |      96 B |
//|  Case4 | 999999 | 139.31 ns | 1.503 ns | 1.406 ns |    6 | 0.0253 |     - |     - |     120 B |
//|  Case5 | 999999 | 139.09 ns | 0.712 ns | 0.666 ns |    6 | 0.0253 |     - |     - |     120 B |
//|  Case6 | 999999 |  61.18 ns | 0.730 ns | 0.683 ns |    2 | 0.0204 |     - |     - |      96 B |
//|  Case7 | 999999 | 117.34 ns | 0.965 ns | 0.903 ns |    4 | 0.0323 |     - |     - |     152 B |
//|  Case8 | 999999 |  51.19 ns | 0.522 ns | 0.488 ns |    1 | 0.0119 |     - |     - |      56 B |
//|  Case9 | 999999 | 196.12 ns | 1.129 ns | 1.056 ns |    7 | 0.0203 |     - |     - |      96 B |
//| Case10 | 999999 | 108.29 ns | 0.723 ns | 0.676 ns |    3 | 0.0118 |     - |     - |      56 B |
```

---
ZStringが使えるならこれを使ったほうが一番パフォーマンスがいい。
無理なら
ToString() と +演算子の組み合わせ
ToString() と $ - 文字列補間がパフォーマンスが良い

文字列の変換数が増えるとパフォーマンスは変わってくるが...
【Objective-C】nil、Nil、NULL、NSNullの違い

#nil
nilはObjective-Cのオブジェクト(id型)に対して空という意味を表します。
このnilはnullオブジェクトを表し、オブジェクトが未初期化であることや、クリアした状態であることを指します。

```objective_c
NSString example = nil;
```
#Nil
NilはObjective-Cのクラスに対して空という意味を表します。

```objective_c
Class Animals = Nil;
```

#NULL
ポインタ（メモリー上のアドレスを記憶する変数の型のこと）に対して空という意味。
このNULLはC言語互換のNULL。
Objective-CはC言語と互換性がある。

```objective_c

char *pointer = NULL;
```

#NSNull
空の意味を表すオブジェクト。

NSNullはクラスであり、nullを表すオブジェクト。
シングルトンインスタンスなので、常に同じ一つのインスタンスを指す

```objective_c
NSArray *array = [NSArray arrayWithObjects:@"value1", [NSNull null], @"value3", nil];
```

#nilに関する注意点
objective-Cでnullを表現するときは、nilを用います。
しかしNSArrayやNSDictionaryなどのコレクションにはnilを追加することができません。
そのため、その場合はnilの代わりに[NSNull null]を使う必要があります。

nilを使用した場合

```objective_c
//配列を作成
NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:0];
[array addObject:@"value1"];
[array addObject:nil]; //エラーになる
[array addObject:@"value3"];
```

[NSNull null]を使用した場合

```objective_c
//配列を作成
NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:0];
[array addObject:@"value1"];
[array addObject:[NSNull null]]; //エラーにならない
[array addObject:@"value3"];
```

しかしその一方でNSArrayやNSDictionaryにもnilが必要な場合があります。
それが以下のコードです。
nilが配列の一番後ろに指定されていると思います。これは最後にnilを付け加えることで、要素の終端位置を示すために使われます。そのため、この場合は逆にnilを指定しないとエラーを引き起こすので注意が必要です。

```objective_c
NSArray *array = [NSArray arrayWithObjects:@"value1", @"value2", @"value3", nil];
```

#nil、NSNullチェックに関する注意点
nilとNSNullは全くの別物としてプログラム上で扱われるので、nilチェックだけしているとNSNullが値に入ってきた際に、nullチェックをスルーしエラーを引き起こす原因になるので注意が必要です。


**誤ったnullチェックの例**

```objective_c
//配列を作成
NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:0];
[array addObject:@"value1"];
[array addObject:[NSNull null]];
[array addObject:@"value3"];
 
//配列から0番目の要素を取得
NSString *str = [array objectAtIndex:0];
 
//if文でnilチェックしかしておらず、NSNullがチェックできない。
if(str != nil && str.length > 0){
    NSLog(@"%@%@", @"間違った判定1", [array objectAtIndex:0]);
}
 
//この場合は中身が空でも常に真と評価して意図しないことになるのでNG
if(str){
    NSLog(@"%@%@", @"間違った判定2",[array objectAtIndex:0]);
}
```

**正しいnullチェックの例**

```objective_c
//配列を作成
NSMutableArray *array = [[NSMutableArray alloc] initWithCapacity:0];
[array addObject:@"value1"];
[array addObject:[NSNull null]];
[array addObject:@"value3"];
 
//配列から0番目の要素を取得
NSString *str = [array objectAtIndex:0];
 
//変数strの中身が空ではない場合ログが出力される
if(! [str isEqual:[NSNull null]] && [str length] > 0){
    NSLog(@"%@%@", @"正しい判定", [array objectAtIndex:0]);
}
```

#メッセージの送信の違い
nilは他のプログラミング言語と違い、メッセージの送信が許されます。メッセージを送るというのは、Javaなどでいうクラスのインスタンスのメソッドを呼び出すことに当たります。
そのため下記のコードのようにnilチェックをしなくても大丈夫です。
メッセージを送信した時の返り値は、返り値の型がid型のメッセージの場合はnilを返し、
intのようなC言語の型の場合は0を返します。
C言語のstructのような場合は返却値は未定義です。

```objective_c
//nilチェックする場合
if (foo != nil) {
    [foo method];
}

//nilチェックしなくても大丈夫
Foo *foo = nil;
[foo method];
```
一方NSNullの場合はメッセージを送信すると、NSINvalidArgumentExceptionの例外を投げ、これをキャッチしなかった場合はクラッシュするので注意が必要です。

#参考
https://www.itcowork.co.jp/blog/?p=939
https://dev.classmethod.jp/articles/objective-c%E3%81%A7nil%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E3%82%8B%E3%81%A8%E3%81%AF/
リーダブルコードまとめ

# リーダブルコードまとめ

### 概要
全体的な内容を把握するために簡単にまとめました．詳細は書籍でご確認ください．
[リーダブルコード](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655)

## 第一部　表面上の改善

###  1章　理解しやすいコード
    コードは他の人が最短時間で理解できるように書かなければならない
    行数を短くするよりも，他の人が理解するのにかかる時間を短くする

###  2章　名前に情報を詰め込む
- 明確な単語を選ぶ
    - 汎用的な名前はつけない,変数の値表すような名前をつける
- 名前に情報を追加する
    - 値に単位や属性をつける
- 名前の長さを決める
    - プロジェクト固有の単語を省略形にしてはいけない
- 名前のフォーマットで情報を伝える
    - フォーマット規約を整える(ローカル変数，メンバ変数など見分けられるようにするため)

###  3章　誤解されない名前
- 限界値を含めるときはmin,maxを使用する
- 範囲を指定するときは，firstとlastを使用する
- 包含/排他的範囲にはbegin, endを使用する
- 複数の名前を検討する

###  4章　美しさ
- 原則
    - 読み手が慣れているパターンと一貫性のあるレイアウトを使用する
    - 似ているコードは似ているように見せる
    - 関連するコードはまとめてブロックにする
- 一貫性のある簡潔な改行位置
- メソッドを使った整列
- 縦の線を整列させる
- コードを段落に分割させる
    - 似ている考えをグループにまとめる

###  5章　コメントすべきことを知る
- コードからすぐにわかることはコメントに書かない
- 自分の考えを記録する
- コードの欠陥にコメントをつける
- 定数に名前をつける(なぜその値で良いのかを説明する)
- 全体像のコメント
- 要約コメント

###  6章 コメントは正確に簡潔に
- コメントは領域に対する情報の比率が高くなければならない
- 指示語をやめて，正式な名称を記述する
- 入出力結果の実例を書く(関数などに)
- コードの意図を書く(処理全体の概要など)

## 第2部　ループとロジックの単純化

###  7章　制御フローを読みやすくする
- 条件式の引数の並び順は調査対象の式，比較対象の式の順にする
    - (例) if (length >= 10)
- if/elseブロックの並び順
    - 条件は否定形より肯定形を使用する
    - 単純な条件を先に書く(複雑なものは条件化しにくい)
    - 関心を引く条件や目立つ条件を先に書く
- do whileループを避ける
- goto文を使用しない
- ネストを浅くする
    - コードを変更するときは，一歩下がって全体を俯瞰的に見て，読みにくくないか確認する
- 実行の流れを追いにくくなる構成要素の使用をコード全体の割合として大きくしないこと
    - 構成要素
        - スレッド：どのコードがいつ実行されるのかよくわからない
        - シグナル：他のコードが実行される可能性がある
        - 例外：いろんな関数呼び出しが終了しようとする
        - 関数ポインタと無名関数：コンパイル時に判別できないので，どのコードが実行されるのかわからない
        - 仮想メソッド：object.VirtualMethod()は未知のサブクラスのコードを呼び出す可能性がある

###  8章　巨大な式を分割する
- 式を表す変数を用意する　→　説明変数
- 大きなコードの塊を管理，把握を容易にするために要約変数を用いる
- 条件分にはド・モルガンの法則を使用する

###  9章　変数と読みやすさ
- 問題点
    - 変数が多いと変数を追跡するのが難しくなる
    - 変数のスコープが大きいとスコープを把握する時間が長くなる
    - 変数が頻繁に変更されると現在の値を把握するのが難しくなる
- 余計な変数を削除する(一時変数など無くても困らない変数)
- 変数のスコープを縮める(グローバル変数などスコープが大きい変数は追跡が難しい)
- 変数は一度だけ書き込む(何度も変更すると値の追跡が難しくなる)

## 第3部　コードの再構成
    プログラムの主目的と関係のない「無関係の下位問題」を抽出する
    コードを再構成して，一度に1つのことをやるようにする
    最初にコードを言葉で説明する．その説明を元にしてきれいな解決策を作る

###  10章　無関係の下位問題を抽出する
- 考え方
    - 関数やコードブロックを見て「このコードの高レベルの目標は何か?」と自問する
    - コードの各行に対して「高レベルの目標に直接的に効果があるのか?　あるいは，無関係の下位問題を解決しているのか?」と自問する
    - 無関係の下位問題を解決しているコードが早朝量あれば，それらを抽出して別の関数にする．(関数の中に関数化できそうなまとまった処理があれば，関数化する)

### 11章　一度に1つのこと
- 一度に一つのタスクを行う

###  12章　コードに思いを込める
- ロジックを明確に説明する
- ライブラリを知る
- 解決策を言葉で説明する

###  13章　短いコードを書く
- コードを小さく保
    - 汎用的な「ユーティリティ」コードを作って，重複コードを削除する．
    - 未使用のコードや無用の機能を削除する
    - コードの「重量」を意識する．軽量で機敏にしておく．
- ライブラリについて知る(定期的にAPIを読んで，標準ライブラリについて頭の片隅においておく)
WindowsでMac風に「ひらがな」「英数」を切り替える設定

## GoogleIMEのダウンロード
https://www.google.co.jp/ime/

## IMEの設定を変更
![{95085CE3-6490-45C0-92BE-0683CB84F129}.png.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64805/10e48ab0-a127-a115-e1d1-4551c4aa9ebd.jpeg)

### 変換ボタンで「ひらがな」にするように設定
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64805/c746f536-2e9a-2154-c885-e373634d0198.jpeg)

### 無変換ボタンで「英数」にするよう設定
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64805/cf91d98c-06ff-763f-1ac1-b0b8b55ecbe1.jpeg)
ミニマムなVue.jsコンポーネントプログラミングその1(シングルコンポーネント)

Vue.jsを使うと、コンポーネントプログラムというものの楽しさを体感できると思います。(正確に言うと、vue-cliを使ってコンポーネントプログラムを構成すると、かな？)

Web Componentsという概念も最近知ったところですが、MVCという概念に沿って、

- データモデル定義(M)
- UI構造(V)
- データモデルとUI構造の制御インタフェースであるコントローラ(C)

みたいな感じにフォルダをバラバラに分けて管理するのはもう古い、ということなのかも。(適材適所はあるでしょうが)

最終的にやりたいのは、SPAライクなクライアントアプリです。

従って、
ルータを内包し、
サーバサイドレンダリングはせず、
データはResutFul APIサーバを立ててアクセスし、
アプリ自体は部品（コンポーネント）を組み合わせてつくる、
そんなテーマで進めたいと思います。

そして応用編まで行けたら、Typescriptと組み合わせたモダンな記法とか、やってみたいところです。まずはVue.jsネイティブの理解が必要ですけれども。

今回はシングルコンポーネントだけで構成されたVue.jsアプリを組んでみます。


#環境
vue-cli  4.3.1

#プロジェクト作成

```
vue create vue_sample
? Please pick a preset: 
  VueSample (typescript, router) 
  default (babel, eslint) 
❯ Manually select features 
```

まずはミニマム構成を用意したいので、マニュアルを指定。

```
? Check the features needed for your project: 
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◯ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
```
JavaScriptの新しい記法は使いたいので、Babelを選択し、後はオフ。後の設定はデフォルトとして、プロジェクトを作成。

# コンポーネント構造をミニマム化
公開するindex.htmlは、

```html

<div id="app"></div>
```
となっており、すでにミニマムです。

エントリポイントであるmain.jsは、

```javascript

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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

となっており、vueの基幹ライブラリのみimport、
唯一Appコンポーネントのみマウントしており、
こちらもすでににミニマムです。

App.vueを以下のように書き直します。

```html
<template>
  <div>
    <h1>Hello, Vue.js</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
```
UIの構造をテンプレート定義し、データモデルとコントローラを内包可能なVueインスタンスを定義/生成します。

- UIの構造は見出しのみ(h1)
- コンポーネントも名称のみ定義(name: 'App')

以上により、**h1要素のみ備えたAppコンポーネント(Vueインスタンス)をレンダリングするだけのミニマムなプロジェクト**が完成します。

npm run serveして、localhost:8081とかにアクセスすると、
![範囲を選択_011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244766/6f8aa312-539d-0180-8462-e9c85f410688.png)
超シンプルな画面がレンダリングされました。


#補足
Vue.jsの長所の一つに、「プログレッシブなフレームワーク」という文言がありますが、つまりこれは、

- 便利なデータバインディングのみ使う
- 再利用性の高いコンポーネント設計を導入する
 
等々、シーンに応じた導入ができるフレキシブルさを指していると思います。SPAにしたければ内部ルータを埋め込んだり。

今回のようなシンプルなケースでは、データバインディングのみ使った
非コンポーネントVue.jsプログラミングで全然間に合いますが、ヘッダ、フッタ等、画面が増えていけばどうしても部品を組み合わせたくなってくるのでコンポーネント設計を取り組んでみます。

#次回
次回はこのミニマムなコンポーネントの上に、ミニマムな画面遷移(vue-router)を乗せていこうと思います。
LuaStickを使ってLuaとC++をバインドする

LuaStickはWindows上で動作する、LuaとC++をバインドするコード生成プログラムです。
C++の関数・クラス・列挙等の直前に
`/// <stick export="true" />`
を書くだけでLuaにエクスポートできます。

元々Dynamic DrawとLuaをバインドするために書いたものですが、使い勝手が良いので最近公開しました。

LuaStickを使うことで以下が可能になります。
- C++上の関数、クラス、列挙等をLuaプログラム中で操作できるようになります。
- C++からLuaの関数を実行することができるようになります。
- Luaに公開されるC++の機能に関するマニュアルを自動生成します。

以下は、main.h のクラス'X'とメンバー関数'Func'をエクスポートする例です。

```C++
// main.h

/// <stick export="true" />
class X
{
    /// <stick export="true" />
    /// <param name="x" io="in" />
    void Func(int x)
    {
        std::cout << x * 2;
    }
};
```

main.h とLuaをバインドするためのコードを生成させるには、LuaStick.exeを以下のコマンドラインで実行します。

```
>LuaStick.exe -out Stick Sticklib.h main.h
```

実行の結果、LuaStick.exeは、Stick.h、Stick.cpp、Stick.htmlを生成します。

```
     +--------------------------------+          Manual
     |          Application           |      +------------+  Generate
     |                                |      | Stick.html |<---------+
     |   +----------+  +----------+   |      +------------+          |
     |   |Stickrun.h|  |Sticklib.h|---|---+                          |
     |   +----------+  +----------+   |   |       +--------------+   |
     |   +----------+  +----------+   |   +------>|              |---+
     |   | main.cpp |  | main.h   |---|---------->| LuaStick.exe |------+
     |   +----------+  +----------+   |           |              |---+  |
     |                                |           +--------------+   |  |
     |   +----------+  +----------+   |      Generate                |  |
     |   |liblua.lib|  | Stick.h  |<--|------------------------------+  |
     |   +----------+  +----------+   |                                 |
     |        :        +----------+   |      Generate                   |
     |                 |Stick.cpp |<--|---------------------------------+
     |                 +----------+   |
     +--------------------------------+
```

以下の main.cpp は、Luaのスクリプトからクラス'X'のインスタンスを作成し関数'Func'を実行します。

```C++
// main.cpp

#include "Stick.h"

int main()
{
    Stickrun stickrun(luastick_init);
    std::string lua_src =
      "obj=X.New();"
      "obj:Func(10);";
    stickrun.DoString(nullptr, lua_src, "myscript");
}
```

`<summary>`等のタグを記載することで、生成されるマニュアルのコンテンツを充実させることができます。

```C++
// main.h

/// <stick export="true" />
/// <summary>
/// クラスXの機能です。
/// </summary>
class X
{
    /// <stick export="true" />
    /// <summary>
    /// クラスXのメンバー関数です。
    /// </summary>
    /// <param name="x" io="in">パラメーターxです</param>
    /// <returns>xの２倍の値を返します</returns>
    int Func(int x)
    {
        return x * 2;
    }
};
```

詳しくは[マニュアル](https://github.com/hukushirom/luastick/blob/master/manual.jp.md)、及び[サンプル集](https://github.com/hukushirom/luastick/tree/master/Examples_5_3)をご覧ください。
ソースコードは[こちら](https://github.com/hukushirom/luastick)です。
Windowsのバイナリーは[こちら](https://github.com/hukushirom/luastick/releases)からダウンロードできます。
removeclassやaddclassを使用する時に気をつけること

removeclassやaddclassの引数としてクラス名を指定するが、.を入れていたが、それだとは反応しないので、.を抜いて記述する。
というのも、addclassやremoveclassは元々クラス名を前提に引数を指定するものなので、.は必要なかった。
スワイプをJavaScriptで書いてみた

Twitterのサイドバーのような、スワイプ処理をJavascriptで書いてみました !

コードはこんな感じです. 
すべてのコードは[こちら](https://github.com/nibu0215/flic)

```main.js
 function selector(s){
      return document.querySelector(s)
 }
        
      const t = selector('.flick_space');  // .flick_spaceはタッチ可能範囲のクラス名
      var startX;        // タッチ開始 x座標
      var moveX;        // スワイプ中の x座標
      var flag = 0 ;    // フラグ
      var nav_w =selector('nav').clientWidth ; //サイドバー幅

      // タッチ開始時： xy座標を取得
      t.addEventListener("touchstart", function(e) {
          e.preventDefault();
          startX = e.touches[0].pageX;
          
      });
  
          function limit(){
          if(moveX -startX <= nav_w){return -nav_w + (moveX - startX);
            }else{ return 0 }
          }

          function move(){
          if(moveX -startX > 0){return 0 ;
            }else{ return (moveX - startX) }
          }

          function calc(){
           if( flag == 10 ){
              var $obj1 = {
                  func: move(),
                  flag: 0
              }
              return $obj1 ;  
           } else if( flag == 0 ){
             var $obj1 = {
                 func: limit(),
                 flag: 10
             }
             return $obj1 ;  
           }    
         }
      
      // スワイプ中： xy座標を取得
      t.addEventListener("touchmove", function(event) {
         event.preventDefault();
         moveX = event.changedTouches[0].pageX;
         var $obj2 = calc();
       
           document.getElementById("nav").style.transition = "margin-left 0ms" ; 
           document.getElementById("nav").style.marginLeft =$obj2.func + 'px' ;//現在の幅(px)
    
          // console.log($obj2.flag ); 確認用
      });
       
    
      // タッチ終了時： スワイプした距離から左右どちらにスワイプしたかを判定する/距離が短い場合もとにもどる
      t.addEventListener("touchend", function(event) {event.preventDefault();
          var nav_w = selector('nav').clientWidth;
          var distance = (moveX - startX );
     
          if(distance > 40){
              flag = 10; //console.log(flag);
              selector('nav').style.transition = "margin-left  610ms ";  
              document.getElementById("nav").style.marginLeft = 0 + 'px';
      
          }else{ flag = 0; //console.log(flag);
              selector('nav').style.transition = "margin-left  610ms ";  
              document.getElementById("nav").style.marginLeft = - nav_w + 'px';
          }
      });
```

#ポイント
- スライドの部分は `Margin-Left` を使って移動させた　
 (サイドバーが完全に表示されている状態が`margin-left` = 0)
- `flag` を付与することによって、サイドバーをスワイプしてコントロールする関数(2つある)を適切に使い分けることができる (ここでは `0` か `10`) 

****
`.style.transition` はよく見かけていたのですが、`.style.marginLeft` というものが使えると初めて知りました ! 確かにcssプロパティなんだからほかも使えるのは当然だなと笑　[(参考までに)](https://www.w3schools.com/jsref/prop_style_fontsize.asp)

 誤字・脱字、コードの誤りなどありましたら、コメントお待ちしております !

ここまで読んでくださってありがとうございました.
RSpecでUnable to find visible file field が出た

RSspecでのsystemtestでattach_fileしようとしたらfile fieldが見つからなかった

```users_spec.rb
#省略
  attach_file "プロフィール画像を選択", "#{Rails.root}/spec/images/test.jpg"
#省略
```

```edit.html.erb

#省略
  <div class="field">
          <%= f.label :image, "プロフィール画像を選択", class: "form-control" %>
          <%= f.file_field :image, class: "none-form" %>
  </div>
#省略
```

```application.css
.none-form {
  display: none;
}
```

cssでfile_fieldを非表示にしていたのが原因

#解決法
make_visible: trueを加える

```users_spec.rb
# make_visible: true を追加
attach_file "プロフィール画像を選択", "#{Rails.root}/spec/images/test.jpg", make_visible: true
```

---
参照: https://rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/Actions#attach_file-instance_method
Gmailを整理する1 ～メール振り分け～

#はじめに
もはやメールといえばGmail一択という感じでGmailを使っています。
現場は内部メールなのでOutlookですが、自社のメールもGmailだし、個人のメールもGmailです。
むしろ今までなんでやってなかったのかという感じですが、今更ながらGmailを整理しようと思っています。
特に個人のメールがいろんなメールで溢れかえってしまっている状態なので、整理したいです。
 
#振り分け設定する
現場で使っているOutlookではフォルダを作って振り分けしてますが、Gmailにはラベルで振り分けするようです。
ラベル付けすることでそれぞれのメールをグループ化することができるというわけです。

振り分けしたいメールを選択して、右上から「メールの自動振り分け設定」を選択します。
<img width="762" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/37654807-fead-f56c-ee78-5c536614f670.png">


振り分けの条件を指定できます。
今回は、今開いたメルカリから来たメールをラベル付けするのでこのまま「フィルタを作成」を押下します。
<img width="541" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/27178927-f312-7933-ce44-9196571aeec6.png">


次にメールが来た時にどういう動作をするかを選びます。
メールを振り分けるだけならば、次の２つを選びます。
受信トレイをスキップ（アーカイブする）
ラベルを付ける：好きなグループ
<img width="539" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/3cb7e6f8-204b-dc8e-b73c-9382548bd12d.png">


受信トレイをスキップする（アーカイブする）を選択しておくことで、受信トイレ自体にはメールを溜めずに、それぞれを受信トレイとは別の場所に格納できるようです。上のOutlookのフォルダを作るイメージのような感じですね。

あと、あとから気が付きましたが、「一致するスレッドにもフィルタを適用する。」にチェックを入れておくことで、既存のメールにも振り分けを適用することができます。
既に受信したメールもラベル化したい場合はコレにもチェックしておきましょう。

これでだいぶ見やすくなりました。
他にも調べてGmailの機能があればやりながらQiitaに書こうと思っています。
P5.js 日本語リファレンス(bezierPoint)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/private/91818244dc26c767a0fe) の bezierPoint関数を説明します。

## bezierPoint()

### 説明文

ポイント a、b、c、d の位置 t の bezier 値を算出します。パラメータ a と d はカーブの最初と最後のポイントで、b と c は制御点です。パラメータ t は0と1の間で変化します。これは x 座標、y 座標それぞれで実行して t でのベジエ曲線の位置を取得できます。

### 構文

bezierPoint(a, b, c, d, t)

### パラメタ

- a  
Number：曲線上の最初の点の座標

- b  
Number：最初の制御点の座標

- c  
Number：2番目の制御点の座標

- d  
Number：曲線上の2番目の点の座標

- t  
Number：0と1の間の値

### 戻り値

Number：位置 t での bezier の値

### 例1

```javascript

function draw(){
  noFill();
  let x1 = 85,
      x2 = 10,
      x3 = 90,
      x4 = 15;

  let y1 = 20,
      y2 = 10,
      y3 = 90,
      y4 = 80;

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);
  fill(255);
  let steps = 5;

  for(let i = 0; i <= steps; i++){
    let t = i / steps;
    let x = bezierPoint(x1, x2, x3, x4, t); // bezier 曲線上の x 座標を算出
    let y = bezierPoint(y1, y2, y3, y4, t); // bezier 曲線上の y 座標を算出
    ellipse (x, y, 5, 5); // 算出したxy座標上に円を描画
  }
}
```

### 実行結果

![bezierPoint.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/8440f4c1-3cf1-7d68-b1ea-a9e8d2241111.png)


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
Excel×Pythonで作業フローを効率化する方法を調べてみた①

外出自粛の影響もあり、様々なジャンルの本を買って読んでいます。
起こった出来事はいい機会だととらえて、楽しんで勉強しています(笑)

それはさておき、
自動化？効率化？という事に憧れがあり、簡単なことから始めようと思い、
ExcelとPythonでExcelの作業フローを効率化する”方法だけ”を調べてみました。
実践はまた、次の記事で。。

業種に関係なく汎用的に利用できるスキルであるってことも、
勉強しておこうと思った理由の１つでした。
あとは、VBAはあまり気が進まなく必要に迫られた時しか作っていません、
Pythonに逃げられるの？いいねという気持ちです(笑)

#調べたこと

##VBAとは
Visual Basic for Applicationsの略であり、
ざっくりいうとMicrosoftのoffice製品（Excel,Wordなど）を拡張できるプログラムである。
マクロは、VBAで作成したプログラムの事。（あまりわかってなかった。。プログラムじゃあかんのか(゜-゜)）
⇒スキルの適用範囲が限定される。

##Pythonとは
windows,mac,linux等、多様なOSで実行できるプログラミング言語である。
初心者でもわかりやすいといわれている。
また、ライブラリが豊富でいろんなことができます　('ω')漠然。。

##Pythonインストール
▼ここから
https://www.python.org/downloads/

##エディタ（なんでもいいですが。）
Visual Studio Code・・・Microsoftのソース作成支援の無料ツール
https://code.visualstudio.com/
▼入れておきたい拡張機能
・日本語化（Japanese Langbuage Pack for Visial Studio Code）
・Pythonのコード入力支援拡張（Python Extension for Visual Studio Code）

##Pythonライブラリ
###openpyxl
Excelファイル（.xlsx）の読み書きができる
Visula Studioのターミナルで、「pip install openpyxl」
https://pypi.org/project/openpyxl/
▼リファレンス
https://openpyxl.readthedocs.io/en/stable/api/openpyxl.reader.excel.html#openpyxl.reader.excel.load_workbook
https://openpyxl.readthedocs.io/en/stable/api/openpyxl.workbook.workbook.html
###pandas
Excelのピボットテーブルができる
Visula Studioのターミナルで、「pip install pandas」
https://pypi.org/project/pandas/
###pathlib
ファイルや、フォルダをオブジェクトとして扱うことができる
Visula Studioのターミナルで、「pip install pathlib」
https://pypi.org/project/pathlib/

#参考
>https://qiita.com/seradaihyo/items/91c78b05401c9c328bb8
>https://qiita.com/RIKIgigasu/items/9614ad4c1887157fe6c2
>https://qiita.com/KAWAII/items/a7ec5b4fc3c9365cf9fc
>https://qiita.com/Takuya_Fujitani/items/93b534ad94ceaa06b89c

#まとめ
これで、Excelの作業フローを効率化する準備は整ったと思います。
次回は具体的にこういうのをやるぞ！って決めて実行した結果を記事にしたいと思います。
役立つものがいいですねぇ。考えます。

以上です。
Macに入れていた python を 3.7 -> 3.8 にアプデする

AtCoderがPython3.8に対応してくれたのを機に、Macに入れていたPythonもアプデすることにした。

が、ググっても断片的な情報しか出てこなくて変に時間がかかってしまった。
ので、自分用にアプデ手順をまとめた。3.9が出た頃にまた同じ状況に陥りそうなので。

# 筆者の環境
MacBook Air 
OS Catalina version 10.15

# 手順
pyenvからPython3.8.2をインストールしようとしたらこんなこと↓を言われた。

```bash
python-build: definition not found: 3.8.2

See all available versions with `pyenv install --list'.

If the version you need is missing, try upgrading pyenv:

  brew update && brew upgrade pyenv

```

HomeBrewとpyenvが古い、、、？
この辺を頻繁に触っている方なら問題ないだろうが、私のようにたまにしか触らずホコリを被らせている人は諸々アプデしていかなければいけなさそう。

```bash
#HomeBrewのアプデ
brew update

# pyenvのアプデ（1.2.13 -> 1.2.15）
brew upgrade pyenv
```

10分くらいかかってようやくアプデが終わる。（遅すぎ？）
念の為`pyenv install --list`で3.8.2があることを確認した上でPythonインストール開始。

```bash
# Python3.8.2をインストール
pyenv install 3.8.2
```

10分くらい経ってインストールは完了したが、古いのを見ていたので、Global設定をしてやる。

```bash
python -V
# Python 3.7.4

pyenv versions
#  system
#* 3.7.4 (set by /Users/****/.pyenv/version)
#  3.8.2

pyenv global 3.8.2

python -V
# Python 3.8.2
```
おわり
基本情報技術者試験　外部割り込みのまとめ

#外部割り込みとは

##5w1h
###When(いつ）	
いつでも（実行中のプログラムに関係なく）

###Who（だれが）	　

###What(何を）	
実行中のプログラム　

###Where(どこでどこに）	　
CPU外部から？

###How（どうやって）	
中断して、必要とする他のプログラムに切り替える
（アドレス退避して、割り込み処理。完了したら、プログラムの再開）　

###Why(なぜ）	
主な目的は周辺機器からの情報を、他の作業をしながらも取り落とすことなく受け取ること（Wikipedia）
cpu資源の有効活用
応答性の向上
例外処理の効率化
正確なタイミングの取得
[割り込み (コンピュータ)
出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/%E5%89%B2%E3%82%8A%E8%BE%BC%E3%81%BF_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF))


##主な外部割り込み

###機械チェック割り込み

主記憶装置の障害、電源の異常、ハードウェアの故障などが発生したときの割り込み

###入出力割り込み

入出力動作が終了した時に起こる割り込み

###タイマ割り込み

プログラムの実行時間が設定時間を超過したときに起こる

###コンソール割り込み

オペレータが介入したときに起こる割り込み

##まとめ

プログラムの外部の影響で起こるのが
外部割り込み？
I18nについて

# I18nとは
国際化という意味で、「Internationalization」の略です。
１８の部分は"I"と"n"の間に18文字あることから由来しています。
これを利用することで様々な国の言語に対応させることができます！


## 使い方
####tメソッド(tはtranslateの頭文字からきている。)
日本語のアクセスと英語のアクセスに応じて対応可能となる。

```

<%= I18t("sports.soccer") %>
```

```config/locales/ja.yml

ja:
  sports:
    soccer: "サッカー"
```

```config/locales/en.yml

en:
  sports:
    soccer: "soccer"
```

####lメソッド(Localizeの頭文字である)
lメソッドは日付や時刻を表す際に用います。

```config/locales/ja.yml

ja:
  date:
    formats:
      default: "%Y/%m/%d"
      long: "%Y年%m月%d日(%a)"
      short: "%m/%d"
  time:
    formats:
      default: "%Y/%m/%d %H:%M:%S"
      long: "%Y年%m月%d日(%a) %H時%M分%S秒 %z"
      short: "%y/%m/%d %H:%M"

```
実行結果

```ruby

> I18n.l(Date.today)
=> "2020/04/26"                         # 指定がない場合はdefaultを使う
> I18n.l(Date.today, format: :short)
=> "04/26"
> I18n.l(Time.now)
=> "2020/04/26 18:22:54"
> I18n.l(Time.now, format: :long)
=> "2020年04月26日(日) 18時22分54秒 +0900"
```
Pythonで毎日AtCoder #48

### はじめに
[前回](https://qiita.com/taxfree_python/items/427e8b08de9358a3c01e)
今日はABC

### #48
[問題](https://atcoder.jp/contests/abc081/tasks/arc086_a)

**考えたこと**
前に見たことがあるような気がします。それぞれの要素ごとにcountしているとTLEします。ですので、sortして疑似count的なことをします。あとは、要素の数が少ない順に書き換えていくだけです。

```python
n, k = map(int,input().split())
a = list(map(int,input().split()))

a.sort()
num = [0] * n
c = 0
t = 0
for i in range(n-1):
    if a[i] != a[i+1]:
        c += 1
        num[a[i]-1] += c
        t += 1
        c = 0
    else:
        c += 1

s = sum(num)
t += 1
num[a[i+1]-1] = n - s
num.sort()

ans = 0
for i in range(n):
    if num[i] == 0:
        continue
    if t <= k:
        print(ans)
        break
    ans += num[i]
    t -= 1
```


### まとめ
すごく不調なので、ABCまでに回復できるようにします。早く茶色になりたい。ではまた。
Windows Terminal + WSL + tmux でマウスドラッグでテキストを選択する方法

もうすぐ正式にリリースされる「Windows 10 May 2019 Update」に含まれる注目コンテンツの一つである「[Windows Terminal](https://github.com/microsoft/terminal)」を試しに使ってみました。

# tmuxを使っているとき、マウスドラッグでテキストが選択できない。

表題の通りですが、WSLとtmuxを使っている時にマウスドラッグでテキストをコピペできず困りました。

検索してみるとすでに議論がなされていました。

[[Terminal] VT Mouse Support](https://github.com/microsoft/terminal/issues/545)

結論から言うと、tmuxを利用しているときは、「Shiftを押しながらマウスドラッグ」をすることで、テキストが選択できるようになるみたいです。(https://github.com/microsoft/terminal/issues/545#issuecomment-599835717)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70121/d2a79372-4116-149a-0fa0-683ca83222d1.png)
Unknown custom element: <TagName> - did you register the component correctly?

上記のエラー、いくつか原因があるそうです。以下の記事で気づくことができました。助かりました。

* [Vue.jsでコンポーネントが表示されない時に確認する 3 つの事 - すずきライフ](https://belltree.life/vue-component-error/)

自分の場合、循環参照で問題が起こっていました。解決策は、以下のように非同期 import (asynchronous import) させることでです。

```
// 誤
import Component from './Component.vue'
export default {
  components: {
    Component
  },
}
```

```js
// 正
export default {
  components: {
    Component: () => import('./Component.vue')
  },
}
```

他にも require を使う方法も記載されていました。以下、公式ドキュメントになります。

* [Circular References Between Components - Vue.js](https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components)

---

自分の場合はさらに `Content` と言うコンポーネント名を使おうとしていました。これが `content` と言う非推奨になっているタグとバッティングしていたらしく、さきに非推奨の `content` が適用されてさらによくわからない状態になっていました... orz

* [\<content\>: シャドウ DOM のコンテンツのプレイスホルダー要素 - MDN Web docs](https://developer.mozilla.org/ja/docs/Web/HTML/Element/content)
P5.js 日本語リファレンス(bezierDetail)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の bezierDetail関数を説明します。

## bezierDetail()

### 説明文

bezier曲線が表示される解像度を設定します。

デフォルト値は20です。

この関数はcreateCanvas()で WEBGL を指定した場合のみ有効です。

### 構文

bezierDetail(detail)

### パラメタ

- detail  
Number：曲線の解像度

### 例1

```javascript
function setup(){
   createCanvas(100, 100, WEBGL);
   noFill();
   bezierDetail (8); // 曲線の描画を少し粗くする
}

function draw(){
   bezier(-40, -40, 0,
             90, -40, 0,
            -90,  40, 0,
             40,  40, 0);
}
```

### 実行結果
![bezierDetail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43467/af24b412-85cf-13e9-3ec7-b2a3fd03305a.png)


### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。
RecycleViewのviewclassが自身が表示しているdataのindexを知る方法

`RecycleView`はdataを表示するだけならそんなに苦にならないですが、user側の操作によってdataを編集しようとした時にこれまでは色々と苦労していました。ただ最近になって簡単な方法に気付いたのでここに記録します。

例えば次のように`Label`と`CheckBox`を並べて

![Screenshot at 2020-04-26 16-04-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144673/479e6a3b-4e20-b403-c58f-824cfa0d0db8.png)

"delete selection"`Button`を押すことで選択されている行を消せるようにしたいとします。この場合widget階層は次のような感じになると思います。

```python

KV_CODE = '''
<RVItem>:
    Label:
        text: root.text
    CheckBox:
        active: root.is_checked

BoxLayout:
    orientation: 'vertical'
    BoxLayout:
        Button:
            text: 'add data'
        Button:
            text: 'delete selection'
    RecycleView:
        id: rv
        viewclass: 'RVItem'
        RecycleBoxLayout:
            orientation: 'vertical'
'''

class RVItem(Factory.BoxLayout):
    text = StringProperty()
    is_checked = BooleanProperty()
```

すると三者が`CheckBox`の状態を持つ事になります。

![Untitled Diagram(3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144673/51b33e99-d465-0c2a-3038-7e82d660c205.png)


この三者を適切に同期しないといけないのですが、どうするかが悩みの種でした。AとBの同期は既にできています。Aは`RecycleView`自体がやってくれててBはKv言語の以下の行でできています。

````yaml
<RVItem>:
    Label:
        text: root.text
    CheckBox:
        active: root.is_checked  # B
```

userが`CheckBox`を押した時には`CheckBox.active`が変わるのでCとDの同期も行わないといけないのですが、Cは簡単です。例えば

```yaml
<RVItem>:
    Label:
        text: root.text
    CheckBox:
        active: root.is_checked
        on_press: root.is_checked = self.active  # C
```

とするだけなので。問題はDで

- `RVItem`又は`CheckBox`が`rv`への参照を得る方法と
- `RVItem`が自身が表示しているdataのindexを得る方法

を考えないといけません。前者は

```python
class RVItem(Factory.BoxLayout):
    @property
    def rv(self):
        return self.parent.recycleview
```

で解決したので残るは後者なのですが、これまではdataに一意の印を持たせそれを線形探索する事でindexを求めていました。ところが何の事は無く、実は次のようにするだけでindexは求められるのでした。

```python
class RVItem(Factory.BoxLayout):
    def get_view_index(self):
        return self.parent.get_view_index_at(self.center)
```

これを用いることでDの同期は以下のように実現できました。

```yaml
<RVItem>:
    Label:
        text: root.text
    CheckBox:
        active: root.is_checked
        on_press:
            active = self.active
            root.is_checked = active  # C
            root.rv.data[root.get_view_index()]['is_checked'] = active  # D
```

後は"delete selection"`Button`が押された時に

```yaml
        Button:
            text: 'delete selection'
            on_press: rv.data = [record for record in rv.data if not record['is_checked']]
```

という風にcheckしてある物を取り除いて完成。

[code全体](https://gist.github.com/gottadiveintopython/78ece8aab3fbb2cadfa1e30e1b3cc703)
[Youtube](https://youtu.be/1iB40vjQ-yw)
Windows10環境

# 家庭でのWindows10マシン(デュアルブートで2つあるSSDのうち、もう片方にはubuntuが入っている)

- 2020/04/26

steamにてモンハンを起動すると、ドライバが古いとか言われる。
nvidiaのHP[https://www.nvidia.co.jp/Download/driverResults.aspx/159534/jp]からドライバをインストール。
geforce experienceのところでエラー？になった模様。とりあえず閉じるで完了。

- 2020/07/24

OracleのHP[https://java.com/ja/download/win10.jsp] よりJavaSetup8u261をダウンロード、インストール
 
- 2021/12/04

PowerShell7をインストール
(現在のPowerShell5と共存できる模様)

現在のバージョン確認

```powershell
PS C:\Users\tommy> $PSVersionTable.PSVersion

Major  Minor  Build  Revision
-----  -----  -----  --------
5      1      19041  1320
```
更新

```shell
>winget search Microsoft.PowerShell
名前               ID                           バージョン ソース
------------------------------------------------------------------
PowerShell         Microsoft.PowerShell         7.2.0.0    winget
PowerShell Preview Microsoft.PowerShell.Preview 7.2.0.10   winget

>winget install --id Microsoft.PowerShell --source winget
```
結局ポップアップウィンドウが出るんですけど。オプションかなんかで抑制できるのかどうかは不明。

* dotnet.core sdk 3.1をインストール

なぜか.net core はruntimeしか入っていなかったので、sdkを改めて入れた。
dotnet-sdk-3.1.415-win-x64.exe

* dotnet sdk 6.0 をインストール

dotnet-sdk-6.0.100-win-x64.exe

* dotnetで使用可能なpowerShellライブラリをインストール

```shell
C:\Users\tommy>dotnet tool install --global PowerShell
```

* powershell に azure power shellを追加
正直、powershellあんまり使ってないので、ちゃんとわかっているか不明だが、、、、

```powershell
PS C:\Users\tommy> Install-Module -Name Az -Scope CurrentUser -Repository PSGallery

# 以下のようなエラーが、、、
Install-Package: The following commands are already available on this
system:'Login-AzAccount,Logout-AzAccount,Resolve-Error,Send-Feedback'. This module 'Az.Accounts' may override the
existing commands. If you still want to install this module 'Az.Accounts', use -AllowClobber parameter.
# こうすればいいらしい
PS C:\Users\tommy> Install-Module -Name Az -Scope CurrentUser -AllowClobber
# とりあえず完了
```
Flutter開発時の小技　#1超楽々！ウィジェット のラッピング

お急ぎの方は`Flutter開発時の小技`からお読みください。  

お疲れ様です。
Flutterで開発を進めていると、ウィジェットの構造が複雑になります。
親に新しいウィジェットを追加したいと思っても、括弧が間違っていたりちょっとしたミスが出てしまうことありませんか？（私です。。。）
そんな時に役に立つ小技を紹介したいと思います。

雑談にお付き合いさせてしまい申し訳ございませんでした。本題に入りたいと思います。

##Flutter開発時の小技

####複雑に入り組んだウィジェットでも、後から簡単に新規ウィジェットでラッピングする方法

1. ラッピングしたいウィジェットを選択
2. 選択した行の右側に電球マークが出現するので、それをクリック
3. 親に追加したいウィジェットを選択

以上です。（小技感MAX(꒪ཫ꒪; )ﾔﾊﾞｲ）

####例

下記ソースの**Centerウィジェット**を任意のウィジェットで囲いたいとします。
先に**BeforeとAfterの結果**を示し、次に**方法**を示したいと思います。

###### 結果

```dart:before.dart
// ↓ここ
Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        'You have pushed the button this many times:',
      ),
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.display1,
      ),
    ],
  ),
),
```
```dart:after.dart
// ↓ここ
Container(// ←追加されたラッピング
  child: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.display1,
        ),
      ],
    ),
  ),
),
```
###### 方法
Centerをクリックします。
<img width="456" alt="ウィジェットの選択" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255919/d43a7627-9239-ef98-ed6f-96ccd54d53c9.png" title="ウィジェットの選択">
`画像1 ウィジェットの選択`

上記の「画像1ウィジェットの選択」の様に電球マークが出てきますので、それをクリックします。
<img width="518" alt="スクリーンショット 2020-04-26 17.52.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255919/49e3cbd1-21ce-16cd-8eac-e2a94ddb6891.png">
`画像２ 電球マークの選択`
親として追加したいウィジェットを選択します。以下の項目が選択可能です。

  - widjet(選択項目以外で追加したい場合に使用)
  - Column
  - Container
  - Padding
  - Row
  - StreamBuilder
  - Parent
 
今回はContainerを選択します。
<img width="514" alt="スクリーンショット 2020-04-26 17.56.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255919/e3a5d9c3-5939-0e4c-2fd4-0c0add832ada.png">
`画像3 選択結果`

上記の様に、囲うようにウィジェット が追加されました。
自ら追加するよりも、早くなりミスも少なくなると思うので是非試してみてください。

以上　ありがとうございました。

毎週、Flutter関連で情報発信するのでよろしくお願いします。 
**TO「先輩方」**
ご意見ご鞭撻のほど、よろしくお願いいたします。
[@kyota_kobayashi](https://twitter.com/kyota_kobayashi)
VirtualBoxで画面サイズを大きくする方法

VirtualBox起動するとこの画面が小さいですよね。

![aaa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/627304/5dc6b50c-3052-4599-1d79-cd69dcf60613.png)



大きくする方法わかんなくって困ったんでメモ用に書いときます。


やり方
表示　→　仮想スクリーン　→　変えたい大きさをクリック


これだけです。
めちゃ簡単なのに手間取ったなあ。
Dockerのproduction環境でのbundle exec方法

DockerでRailsをする時にProduction環境で`db:create`ができずに調べてもなかなか情報が出てこなかったのでメモ。`docker exec`の`-e`オプションで環境変数をセットしてコンテナ内部のコマンドを呼べます。

```.sh
docker exec -e RAILS_ENV='production' myapp bundle exec rake db:create
```

### 参考
https://devconnected.com/docker-exec-command-with-examples/
bundlerバージョン違いのエラーを解消する

Factory Botをインストールしようとしたらエラー。

### version
- ruby 2.4.9
- Rails 5.1.1
- factory_bot_rails ~> 4.10.0

```bash
bundle install

The dependency tzinfo-data (>= 0) will be unused by any of the platforms Bundler is installing for. Bundler is installing for ruby but the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add those platforms to the bundle, run `bundle lock --add-platform x86-mingw32 x86-mswin32 x64-mingw32 java`.
Fetching gem metadata from https://rubygems.org/............
Fetching gem metadata from https://rubygems.org/.
Resolving dependencies...
Bundler could not find compatible versions for gem "bundler":
  In Gemfile:
    rails (~> 5.1.1) was resolved to 5.1.1, which depends on
      bundler (< 2.0, >= 1.3.0)

  Current Bundler version:
    bundler (2.1.4)
This Gemfile requires a different version of Bundler.
Perhaps you need to update Bundler by running `gem install bundler`?

Could not find gem 'bundler (< 2.0, >= 1.3.0)', which is required by gem 'rails (~> 5.1.1)', in any of the sources.


bundler -v
Bundler version 2.1.4
```

bundler (< 2.0, >= 1.3.0)が必要なのに2.1.4とバージョンが違うからエラーになるらしい。

```bash
# bundlerをインストールできるバージョンを調べる
gem search ^bundler$ --all

*** REMOTE GEMS ***

bundler (2.1.4, 2.1.3, 2.1.2, 2.1.1, 2.1.0, 2.0.2, 2.0.1, 2.0.0, 1.17.3, 1.17.2, 1.17.1, 1.17.0, 1.16.6, 1.16.5, 1.16.4, 1.16.3, 1.16.2, 1.16.1, 1.16.0, 1.15.4, 1.15.3, 1.15.2, 1.15.1, 1.15.0, 1.14.6, 1.14.5, 1.14.4, 1.14.3, 1.14.2, 1.14.1, 1.14.0, 1.13.7, 1.13.6, 1.13.5, 1.13.4, 1.13.3, 1.13.2, 1.13.1, 1.13.0, 1.12.6, 1.12.5, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.2, 1.11.1, 1.11.0, 1.10.6, 1.10.5, 1.10.4, 1.10.3, 1.10.2, 1.10.1, 1.10.0, 1.9.10, 1.9.9, 1.9.8, 1.9.7, 1.9.6, 1.9.5, 1.9.4, 1.9.3, 1.9.2, 1.9.1, 1.9.0, 1.8.9, 1.8.8, 1.8.7, 1.8.6, 1.8.5, 1.8.4, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.15, 1.7.14, 1.7.13, 1.7.12, 1.7.11, 1.7.10, 1.7.9, 1.7.8, 1.7.7, 1.7.6, 1.7.5, 1.7.4, 1.7.3, 1.7.2, 1.7.1, 1.7.0, 1.6.9, 1.6.8, 1.6.7, 1.6.6, 1.6.5, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.3, 1.5.2, 1.5.1, 1.5.0, 1.3.6, 1.3.5, 1.3.4, 1.3.3, 1.3.2, 1.3.1, 1.3.0, 1.2.5, 1.2.4, 1.2.3, 1.2.2, 1.2.1, 1.2.0, 1.1.5, 1.1.4, 1.1.3, 1.1.2, 1.1.1, 1.1.0, 1.0.22, 1.0.21, 1.0.20, 1.0.18, 1.0.17, 1.0.15, 1.0.14, 1.0.13, 1.0.12, 1.0.11, 1.0.10, 1.0.9, 1.0.7, 1.0.5, 1.0.3, 1.0.2, 1.0.0, 0.9.26, 0.9.25, 0.9.24, 0.9.23, 0.9.22, 0.9.21, 0.9.20, 0.9.19, 0.9.18, 0.9.17, 0.9.16, 0.9.15, 0.9.14, 0.9.13, 0.9.12, 0.9.11, 0.9.10, 0.9.9, 0.9.8, 0.9.7, 0.9.6, 0.9.5, 0.9.4, 0.9.3, 0.9.2, 0.9.1, 0.9.0, 0.8.1, 0.8.0, 0.7.2, 0.7.1, 0.7.0, 0.6.0, 0.5.0, 0.4.1, 0.4.0, 0.3.1, 0.3.0)

# バージョン指定でインストール
gem install bundler -v 1.9.9
```
```bash
bundler -v

Bundler version 2.1.4
```
バージョンが変わらない😭

こうやるとバージョンを指定して、インストールできるらしい。
エラーなくFactory Botをinstallできた。

```bash
bundle _1.9.9_ install
```

参考サイト
[Ruby \| bundler を特定のバージョンに切り替えて実行する \- Qiita](https://qiita.com/YumaInaura/items/64e5721549e4927ce85f)
Laravel7 Bladeファイルのひな形を作成するmakeコマンドを自作する

## 概要

前回の記事[Laravel7 makeコマンドのひな形をカスタマイズする](https://qiita.com/ucan-lab/items/eab7d869359b5fa72ba0)でスタブのカスタマイズは行えましたが、makeコマンドを追加したい時の例をご紹介します。

## 環境

- Laravel 7.5.1

## make:blade コマンド

今回は `make:blade` コマンドを自作します。
他のmake系コマンドは`GeneratorCommand`クラスを継承しているのでそれに倣って作成します。

https://laravel.com/api/7.x/Illuminate/Console/GeneratorCommand.html

`app/Console/Commands/BladeMakeCommand.php` ファイルに以下の内容を記述します。

```php:app/Console/Commands/BladeMakeCommand.php
<?php declare(strict_types=1);

namespace App\Console\Commands;

use Illuminate\Console\GeneratorCommand;
use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Symfony\Component\Console\Input\InputOption;

class BladeMakeCommand extends GeneratorCommand
{
    /**
     * The console command name.
     *
     * @var string
     */
    protected $name = 'make:blade';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Create a new blade file';

    /**
     * Execute the console command.
     *
     * @return mixed
     * @throws FileNotFoundException
     */
    public function handle()
    {
        if (parent::handle() === false && ! $this->option('force')) {
            return false;
        }

        return true;
    }

    /**
     * Parse the class name and format according to the root namespace.
     *
     * @param  string  $name
     * @return string
     */
    protected function qualifyClass($name): string
    {
        return $name;
    }

    /**
     * Get the destination class path.
     *
     * @param  string  $name
     * @return string
     */
    protected function getPath($name): string
    {
        return $this->laravel->basePath('resources/views') . '/' . str_replace('\\', '/', $name).'.blade.php';
    }

    /**
     * Get the stub file for the generator.
     *
     * @return string
     * @throws FileNotFoundException
     */
    protected function getStub(): string
    {
        if (file_exists($customPath = $this->laravel->basePath('stubs/blade.stub'))) {
            return $customPath;
        }

        throw new FileNotFoundException('stubs/blade.stub file not found.');
    }

    /**
     * Get the console command options.
     *
     * @return array
     */
    protected function getOptions(): array
    {
        return [
            ['force', null, InputOption::VALUE_NONE, 'Create the class even if the model already exists'],
        ];
    }
}
```

`stubs/blade.stub` ファイルに以下の内容を記述します。

```stubs/blade.stub
@extends('layouts.app')

@section('content')

@endsection
```

## make:blade コマンドの使い方

```
$ php artisan make:blade hello
```

```resources/views/hello.blade.php
@extends('layouts.app')

@section('content')

@endsection
```

`/` で区切るとディレクトリ切って作成できます。

```
$ php artisan make:blade foo/bar
```

```resources/views/foo/bar.blade.php
@extends('layouts.app')

@section('content')

@endsection
```