OmniAICreator/Qiita-1.07M huggingface dataset:
オプション引数の使い方と機能について

##はじめに
オプション引数の使い方と機能について説明します。

##オプション引数とは
使い方：(** 引数)　　　←引数の前に" ** "をつけます。

オプション引数は、引数としてハッシュしか受け取れないようにする働きがあります。
使用する目的としては、間違ってハッシュ以外の引数を渡したときに、エラーが出るようにするためです。
(データの整合性を保つためにオプション引数で記述する)

##処理の流れ
newメソッドよってinitializeメソッドが呼び出され、ハッシュの引数(name: "山田太郎")が(**params)に渡されます。
そして   @name = params[:name]によって、@nameに"山田太郎"が代入されます。
同時にこのとき、Personクラスがインスタンス化されます。

次にperson.introductionによってintroductionメソッドが呼び出され
puts "私の名前は#{name}です。"の#{name}に"山田太郎"が代入されてputsが出力されます。

```
class Person
  attr_reader :name

　# (**params)と書いてオプション引数を使用し、ハッシュしか受け取れないようにしている
  def initialize(**params)
    @name = params[:name]
  end

  def introduction
     puts "私の名前は#{name}です。"
  end
end
　
 #ハッシュ(name: "山田太郎" )をinitializeメソッドに渡している
 person = Person.new(name: "山田太郎" )
 
 person.introduction


#出力結果
私の名前は山田太郎です。
```

##ちなみに
オプション引数を使用した状態で引数をハッシュ以外にした場合、下記エラーが発生します。

```
#変更前
person = Person.new(name: "山田太郎" )

#変更後
person = Person.new("山田太郎" )

#変更後の出力結果
`initialize': wrong number of arguments (given 1, expected 0) (ArgumentError)

```

##最後に
今回は、オプション引数について説明させていただきました。
データの整合性を保つことを意識して、今後使用していきたいと思います。
ありがとうございまいした。
GitHubへSSH接続できなかった話

# 状況
どこでも見る、sshの接続確認の方法。これはできてた。

```shell
$ ssh -T git@github.com
Hi yo16! You've successfully authenticated, but GitHub does not provide shell access.
```

but〜は気にしなくていいらしい。

しかし、git pullができない！という問題。リモートリポジトリはあるよ！スペルミスもなし！（ `git config remote.origin.url` で何度も確認済み）

```shell
$ sudo git pull origin main
Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
```
ちなみに `sudo git` してるのは、ローカルを更新する権限がないよ！と言われてしまうからです。**＜これが今回のキモでした！！＞**

結果的には恥ずかしい感じなんですが、きっとハマる人がいるので恥を晒していきますよ！

# 原因
`ssh -T git@github.com` を実行しているときに使うsshキーは、 `~/.ssh/id_rsa` って、普通のユーザーの id_rsa のファイルです。ところが、 `sudo git pull` とかでgithubへ接続するときに使うsshキーは、 `/root/.ssh/id_rsa` です！

なので、 `~/.ssh/id_rsa.pub` をgithubへ登録すると、 `ssh -T git@github.com` ではそれを使うので「正常」と言われます。でも、 `sudo git pull 〜` では、 `/root/.ssh/id_rsa` を使うので、そんな人知らないとなるわけです。

configを使うにしても、 `sudo git 〜` と入力したら、 `~/.ssh/config` なんて見てないです！超時間かけて調べて試行錯誤してたのに全部無駄だったのね〜！！という話ですよ。

# 対策
ケースバイケースでいろいろだと思いますが、今回の私の場合は今回の端末を１人でしか使わないし、使う予定もないので、rootさん大活躍で問題なし。ということで、 `/root/.ssh/id_rsa.pub` をgithubに登録して終了。

gitでリモートリポジトリを使うときは、 `sudo git 〜` で！

（たぶん、いや絶対、もっといい方法あるわ。知らんけど。）

# 雑記
linuxの経験の浅さによって、５時間ほどずっぽりとハマりました。ググってもググっても、このこと書いてる人に当たらない！みなさん賢いです！その点自分はどんだけ・・・

どうやって気づいたかと言うと、githubのヘルプ。

> Should the sudo command be used with Git?
You should not be using the sudo command with Git. If you have a very good reason you must use sudo, then ensure you are using it with every command (it's probably just better to use su to get a shell as root at that point). If you generate SSH keys without sudo and then try to use a command like sudo git push, you won't be using the same keys that you generated.
*引用元 [Error: Permission denied (publickey)](https://docs.github.com/en/github/authenticating-to-github/error-permission-denied-publickey#should-the-sudo-command-be-used-with-git)*

えっと、このエラー対策の記事の一番上に書いてあるモノです。。git に sudo 使わない方がいいんじゃない？という感じでしょうかね。もし使うんなら全部にしなよ！そんなやついないと思うけど！みたいな？（どんだけ英語苦手なんだ訳）

ssh-keygen を sudo でやんないといけないのかなーくらいにぼーっと考えてやってみたら、ssh-keygen で id_rsa を上書きするよ？というメッセージが**出なくて**、今回の原因に気づきました。（そこ！？）

git コマンドをsudo 使わずにやりたいなー毎回めんどくさいし。でもやりかた調べてもわからない。そこは繋がらないことの本質ではないから後で考えよう。って考えが、泥沼から出られなかった大きな一因でした。ええ、結局今もわからないですが。

いやーよかった。linux経験の底の浅さが見事に露呈した問題でした。でもどうせまたすぐ忘れると思うので、自分用メモとして、また新人が陥ってたら優しく先輩が教えてあげるネタとして、恥を忍んで書き残した次第でございます。
RAIDとは。

#【RAIDとは。】

基本情報技術者試験やAWS認定試験などでも出題されますし、
IT業界で働いていく人にとっては必須の知識なので簡単にまとめました。

##RAID（Redundant Arrays of Inexpensive Disks）

複数HDを組み合わせることによって、1台の仮想的なHDとして認識させる。
これによって、システムの冗長性を向上させる技術のこと。

##主なRAIDレベル

###RAID0：ストライピング

複数のHDに同時に分散して読み書きをさせる。
まとめて1台の装置のように管理するRAIDの技術方式。

複数の装置に均等にデータを振り分け、並行して同時に記録することで読み書きを高速化することが可能。
しかし、複数のHDDに同じデータが保存されていないので冗長性や耐障害性がない。

###RAID1：ミラーリング

複数のHDに同じデータを書き込む。
同じデータを2台以上のディスクに書き込むRAIDの技術方式。

複数の装置に同じデータを書き込ませるので、ハードディスクの耐障害性を実現させることが可能。
しかし、複数のHDDに同じデータを書き込むのでディスク容量の利用効率が50%以下になる。

###RAID5

データからパリティを生成し、3台以上のハードディスクに分散して書き込む。
RAID0のように複数のディスクに分散しているため読み出し性能が優れている。
それに加えて、1台のHDDに障害発生しても残りのHDDにより継続利用することが可能。

信頼性、可用性が向上する。
また、容量コストのパフォーマンス向上にもなる。
Git のブランチ と ソーシャルコーディング

# 勉強の記録
- Git のブランチ と ソーシャルコーディング 3/14
- 今回は２回分です。

## 勉強した内容
- ブランチ
- マージ
- プルリクエスト

## 何をベースに勉強してるか
- [N予備校 プログラミング入門](https://www.nnn.ed.nico/courses/668/chapters/9515)

## 内容の詳細
- 作業するページを複数作ることで、失敗しても大丈夫にする。
- それによって複数人で同時に作業する事が可能。
- だからこそCoC、マナーや尊重が大事！

### わかったことについて
- ゲームっておそらくこういう感じで作ってるんだろうなって想像できた。
- みんなで本やノートを作ってる感じかな？ もし同じページを作ってもすぐにわかる！

### むずかしかったよ
- 特になし

## 次回やる予定のこと
- 次回から本格的に授業が始まる…！？
[Swift] UITableViewで無限スクロールを実装する方法[初心者用]

##概要
UITableViewをスクロールしていき、一番下まで到達したら新しいセルが新たに表示されるようにする。
###コード
```
import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var tableView: UITableView!
    
    let cellId = "cellId"
    var numbers:[String] = ["No.1","NO.2","NO.3","No.4","NO.5","NO.6","No.7","NO.8","NO.9","No.10","NO.11","NO.12"]
    var count:Int = 0
   
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        tableView.delegate = self
        tableView.dataSource = self
        
        count = numbers.count
    }
}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
    //セルの数
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return numbers.count
    }
    //セルの登録とラベルの設定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! TableViewCell
        cell.numberLabel.text = numbers[indexPath.row]
        return cell
    }
    //セルの高さ
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 60
    }
    
    // 現在取得している最後のセルを表示したら新しく１０個のセルを追加するメソッド
    func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        if indexPath.row == numbers.count - 1  {
            while count <= indexPath.row + 10{
                numbers.append("No.\(count + 1)")
                count += 1
            }
            self.tableView.reloadData()
            
        }
        }
    }
//UITableViewCellの指定
class TableViewCell:UITableViewCell{
    @IBOutlet weak var numberLabel: UILabel!
}
```

大切なのはwillDisplayのあたりぐらいですかね。willDisplayメソッドの中で使っているif文は「indexPath.rowがnumbers.count - 1に一致したら{}の中の処理を走らせてね」ってことです。
if文の条件が満たされたらwhile文を使って配列のnumbersに新しく要素を追加することでセルの数を増やしていってます。
##まとめ
willDisplayを使えば、Twitterのプロフィール画面みたいにツイートを遡っていくこともできそうですね。私自身初心者なので誤りがあるかもしれませんが、その時はぜひご指摘のほどよろしくお願いいたします。
もしよろしければ使ってみてください。ありがとうございました。
Ruby on Rails ディレクトリ構造

#【Ruby on Rails ディレクトリ構造】

Ruby on RailsでのWebアプリケーション開発をする時に
ディレクトリ構造の理解が必要なため備忘録としてまとめました。

Webアプリケーションを開発する時は、app、config、dbをよく使います。

##それぞれのディレクトリ構造の理解をしよう。

<strong>app：</strong>MVCのアプリケーションに関するものを管理
<strong>bin：</strong>Webアプリケーション起動時に使用するスクリプトファイルを管理
<strong>config：</strong>ルーティングやDBの設定ファイルを管理
<strong>db：</strong>DB関連のマイグレーションスクリプトやシートデータを管理
<strong>lib：</strong>全体で共有する必要のあるライブラリを管理
<strong>log：</strong>Webアプリケーション実行時のログファイルを管理
<strong>public：</strong>静的なファイルやページなどのリソースを管理
<strong>test：</strong>テスト用のコードファイルやデータなどを管理
<strong>tmp：</strong>一時的な情報を管理
<strong>vendor：</strong>第三者によって開発されたコードを配置する

##Webアプリケーション直下に生成されるファイル

<strong>.gitignore：</strong>gitのバージョン管理対象から外すファイル
<strong>.ruby-version：</strong>Rubyのバージョンを管理するファイル
<strong>Gemfile：</strong>Railsで使用するGemパッケージの設定ファイル
<strong>Gemfile.lock：</strong>Gemパッケージの依存関係を管理するファイル
<strong>README.md：</strong>起動実行手順の説明用のファイル
<strong>Rakefile：</strong>Rakeコマンドの実行を管理するファイル
<strong>config.ru：</strong>Rackがrailsサーバー起動に使用する設定ファイル
<strong>package.json：</strong>npmを使用する場合に必要なファイル
サーバの負荷状況をuptimeで確認しログファイルに出力する　〜Linux シェルスクリプト〜

初めましてshoです。

シェルスクリプトの学習、練習メモです。

***内容「サーバの負荷状況をuptimeで確認しログファイルに出力する」***
ー詳細
　uptimeの出力結果をログファイルに5秒おき3回出力する
　実行毎に前回の実行結果を削除して最新の実行結果を出力する

（※学習記録やメモ書き目的で始めました。ほぼ初学者レベルなので理解が浅いところや誤りがあるかと思いますがよろしくお願いします。またアドバイス等コメントいただけるとすっごく嬉しいです。）

#uptimeコマンド
uptimeは稼働時間を調べるコマンド


#スクリプト

ログファイル　uptime.log　を作成してその中へ出力

```

#!/bin/sh
 
 : > /var/log/uptime.log
# :(ヌルコマンド)で前回の出力を空にしてます
 
 for i in 0 5 5;do (sleep ${i}; uptime >> /var/log/uptime.log ) done

```

#実行結果

uptime.logファイル確認
（※コマンド実行時の表示はなし）

```

   1  00:06:17 up 10:18,  4 users,  load average: 0.00, 0.01, 0.05
   2  00:06:22 up 10:18,  4 users,  load average: 0.00, 0.01, 0.05
   3  00:06:27 up 10:18,  4 users,  load average: 0.00, 0.01, 0.05

```


以上です！

##参照サイト

https://qiita.com/hiro-d/items/c3f724cb3d377e21cd91

https://eng-entrance.com/linux-command-uptime
【p5.js】WebEditorで自作の画像を使用する

お手軽で十分きれいなデザインの開発環境を調べたらp5.jsを見つけた。
往々にして日本語情報が少ないので調査ログを残していく。

### 開発環境
p5.js Web Editor
https://editor.p5js.org/

## 画像をアップロードする

1. エディタの中段上部　sketch.js 1の右側の＜をクリックしてファイルツリーを表示する
2. Sketch Filesを右クリックしてCreateFolderから画像保存先フォルダを作成する。※フォルダは無くても問題ない。
3. Sketch Filesを右クリックしてUploadFileから画像をアップロードする。
![Screen Shot 2021-03-14 at 13.14.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394058/536d63d7-cf49-3b13-8291-2a8c69d89971.png)

##画像をpreloadしてから描画する


```javascript


let alien;
let img;

// 画像はキャンバスのsetupより前にpreloadする
function preload(){
  img = loadImage('assets/invader1.png')
}

function setup() {
  createCanvas(400, 400);
  // 下記でAlienクラスのフィールドに画像をセットする
  alien = new Alien(50,50,img)
}

function draw() {
  background(220);
  //ロードした画像の描画、draw()メソッドはimage()を呼び出している。
  alien.draw();
}

class Alien {
    constructor(x, y, image) {
        this.x = x;
        this.y = y;
        this.image = image;
    }
 
    draw() {
        image(this.image, this.x, this.y, this.image.width/30, this.image.height/30);
    }
}
```
### 実行結果
![Screen Shot 2021-03-14 at 13.32.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394058/c37861e2-26df-447d-7c2f-2ae0e7d58a1e.png)


## まとめ
詳細は腹括って公式リファレンスを読もう。
https://p5js.org/reference/#/p5/loadImage
[SQL Server]データベースの空き容量を確認して、閾値以下の場合イベントログに書き出すスクリプト

趣旨
-------------
SQL Serverデータベースの空き容量を確認して、設定した閾値を下回った場合に、イベントログにエラーメッセージを書き出すスクリプトです。

作成した背景
-------------
OSディスクの空き容量の関係上、データファイルの自動拡張ができない環境において、データベースの空き容量が無くなる前に何らかの手段で検知する仕組みが必要となったため作成しました。

やり方は、色々あるかと思いますがこれが一番簡単な方法かと思います。

データベースの空き容量が閾値を下回った場合に、イベントログにエラーメッセージが出るので、後はそれをZabbix等の監視ツールで拾って貰えれば、事前に検知できます。

また、空き容量がどの位のペースで減っていっているのか、確認できるように、ログファイルに確認した時点の空き容量をデータ蓄積するようにしています。
それをエクセルに取り込んで、グラフ化すれば良いかと思います。

利用上の留意点
-------------
・SQL Server2016及びWindows Server2012で動作確認をしています
・それぞれの利用環境に応じて適宜修正をしてください
・「dbcheck.sql」の「where name like '%_Data%'」の箇所は、私の環境ではデータファイルの名前に「_Data」を含めているためこの様にしています。
　データファイルのみ集計対象となるようにしてください

実行するスクリプト
----

### ①データベースの空き容量を確認するSQLファイル

```sql:dbcheck.sql
set nocount on

select
name,
(cast (size as bigint) * 8/1024)-(FILEPROPERTY(file_name(fileid),'SpaceUsed')*8192.0/power(1024,2)) as [freespace]
into #dbfreespace
from dbo.sysfiles
where name like '%_Data%'

select sum(freespace) as 空き容量合計
from #dbfreespace

drop table #dbfreespace
```

### ②上記のSQLファイルを実行させるバッチファイル

```bat:dbcheck.bat
@echo off
setlocal

rem 一時ログファイル名
set fileLog=freespace.log
rem 空き容量データの蓄積ログファイル名
set log_file=db_freespace_check_log.txt
rem sqlcmd接続情報
set sqlcmd=sqlcmd -S testdb -E -d test -W -h -1 -i
rem 実行するsqlファイル
set sqlfile=dbcheck.sql
rem アラート監視閾値をMB単位で指定する
set Threshold=10000

rem ログファイルに記載する日時の書式設定
set CUR_DATE=%date:~-10%
set CUR_TIME=%time:~0,8%
set CUR_TIME=%CUR_TIME: =0%

rem sqlcmdで接続を行う
%sqlcmd% ./%sqlFile% -o ./%fileLog% 2>&1

for /F "tokens=1 delims=." %%a in ( ./%fileLog% ) do set FREESPACE=%%a

if %FREESPACE% lss %Threshold% (
eventcreate /id 999 /l application /so db_FreeSpace_Check /t ERROR /d "データベースの空き容量がアラート監視閾値を下回りました。"
 )

rem 空き容量データのログ出力蓄積(単位は「MB」)
echo %CUR_DATE% %CUR_TIME%,%FREESPACE%>> ./%log_file%

del .\%fileLog%

exit
```

空き容量監視バッチの定期実行
----
①上記のスクリプト２つ(sql・バッチファイル)を任意のフォルダに配置する
②タスクスケジューラに、任意のトリガー(30分間隔等)でタスク実行されるように登録する
VRoid Studioデータのヘアマテリアルを削除する

# この記事の趣旨
下記のソフトウェアを作った本人ではあるのですが、この辺りのソフトウェアで既に実装済みであって、これとは別の実装を作りたい人とか、pixivの中の人とか、原理がわからないとツールを使うのが不安の人とか、いろんな立場の人に読んでもらいたいなと思っています。

https://susanoo.booth.pm/items/2451683

https://susanoo.booth.pm/items/2537949

# VRoid運営がなんと言おうと.vroid内の不要マテリアルは削除していい
複製ボタンで一発で増殖したマテリアルは削除ボタン一発で削除できるのがUI/UXとして好ましいし削除機能を実装しないのは（某天才プログラマーさんの言葉を借りるなら）「けしからん」と思うわけです。
間違えてマテリアル増やしちゃうことだってあるわけじゃないですか。そういううっかりって取り消せること国は権利として認められているのですね。民法９５条にも書いてある。

![任天堂さんごめんなさい](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931697/0cff64bb-d96a-2849-3c8d-119918724d5c.png)

# 削除処理の実装の実際
それでは処理を順を追って説明します、

##.vroidファイルの構造

VRoidファイルは、ZIPで固めた複数のファイルで構成されますが、説明に必要な部分に絞って表示しております。

![Network Diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931697/8011bd80-7113-f8c4-1844-ab264cac742f.png)

## Hairishesから参照されている／いないHair-Materialをグループ分けする

髪が参照しているマテリアルというのはhairs_defs.jsonのHairishesの各ノードのParam > _MaterialValueGUIDの値がこれに該当します。
なお、Hairishesは髪グループと髪との２階層構造になっていますが、両方の階層を見る必要があります。

### ポイント：material_defs.jsonは髪以外のマテリアルも含む

新しめのバージョンで新規作成したモデルは、便宜上、３つの分類が存在することになります。今回は２のみが削除対象となります。

1. Hairから参照されているヘアマテリアル
2. Hairから参照されていないヘアマテリアル
3. 髪以外のマテリアル


### 髪のマテリアルであることの識別方法は３つ

また髪かそうでないかを見分けるには以下のいずれかのKey-Value値を見れば良いかと思います。

```ruby
_PrototypeId => "Flora/F00_000_Hair_00_HAIR"
_SphereAddTextureId => "/Matcaps/Matcap_RimHair"
_Tags => ["HairEditor"] 
```

私は_SphereAddTextureIdを使っています。
というのも"Flora/F00_000_Hair_00_HAIR"の部分は条件によって異なる場合があるからです。

## 削除するテクスチャの選定
マテリアルとテクスチャは1:1で紐づいていて、削除対象のマテリアルノードの **_MainTextureId** キーに格納されているIDが削除対象のテクスチャとなります。
ひょっとしたら複数のマテリアルで1枚のテクスチャを共有するケースはあるかもしれません。一応用心のため、削除しないマテリアルから参照されているテクスチャIDが削除対象のテクスチャIDに含まれていないことを確認し、もし重なる部分があれば削除対象から除外しましょう。

## SQLiteのエントリー削除

テクスチャの管理テーブルはcanvasとlayerの２つのテーブルで十分じゃないかという気もしないでもないのですが、４つのテーブルから構成されています。

![ER図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/931697/3a263c81-07b5-872f-8ecd-6d08ee7b7c05.png)

正攻法としてはcanvas_idからこれに属するlayer_idを求め、layer_order, layer_info, raster_layer_contentの各テーブルのレコードを削除し、canvas_infoのレコードを削除する流れとなるかと思います。
髪のテクスチャIDはcanvas_infoのIDではなくnameの方に紐づいているのでその点だけ注意。

各レイヤーのテクスチャ本体はraster_layer_contentのBLOBに上下反転した状態で入っています。

## レンダリング済みテクスチャの削除
rendered_texturesの下にPNGファイルが複数あるかと思いますが、削除対象は先のテクスチャIDに.pngを付けたものが対応しています。

# Rubyの実装例
そんなわけで以前実装したものを紹介しておきます。

https://gist.github.com/yakumo-proj/b4871a563d9365ba6862bd65af4410bf

# 実はヘアプリセットの出力でもマテリアルは削減している。
実はVRoid Studioのヘアプリセットを出力する処理においても、Hairishesから参照されているヘアマテリアルのノードを抽出し、これに紐づくテクスチャのみしか出力しない処理がなされています。
（出力内容を見る限りでは）等価の処理を再現したのが下記のスクリプトです。

こちらも meta.json + hair_defs.json + material_defs.jsonと関連するテクスチャ(PNGファイル)から生成するので、原理としてはかなり近いです。

https://gist.github.com/yakumo-proj/f6c2a48af8cd7e2cb7e42a40f52603bf

これは、VRoid Studioにおいてもヘアプリセットのエクスポートの処理を転用すればヘアマテリアルの削除が容易に実装できることを意味しています。

# まとめ

VRoidのサポートページを見る限り、マテリアルを削除できないこと、これを削除できるよう要望があることは十分認識していて、それでもなお実装を後回しにしているのは何かしらの事情がありそうだということ。
困っているユーザーがいるのに「何もしない」という答えは最善ではないと思うので、私はマテリアルを削除する手段を作りました。
useStateとか、Hookとかに拒否反応を示していた私が開眼した件👁

# useStateってよく目にするけどよく分からない（嫌い😬）
`私はプログラミング初学者です。現在はReactでTODOリストなど簡単なコードの実装をして勉強しています。
勉強する中で、「useState」という文字をよくコード内で目にするのですが、正直この子の正体がよく分かっていません。よく分かっていないまま勉強を進めてきたら、useStateさんを目にする度に拒否反応を示す私がいることに気づきました^^;
ここで克服しなければ！useStateさんと仲良くならなければ！と思い、今自身で調べながらQiitaへ投稿してみます。同じようにuseStateさんとまだ仲良くなれていない初学者の方の手助けになれば幸いです。
本投稿は、私個人の理解と偏見と感覚で作成していますので、多少単語の意味合いに相違があるかもしれませんが、ご理解ください🙏`

# 開発環境
- MacOS

- VScode

- React

- Github

- Chrom 

# useStateって一体何者なのか
Hook(フック)です。フックはいろんな種類があるのですが、そのうちの一つです。<br>この記事の下の方にHookをいくつか書きましたので参照ください。

# Hook(フック)って一体何者なのか
フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。<br>フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。フックは React をクラスなしに使うための機能ですので、クラス内では機能しません。<br>要は、useStateはフックなんです、フックはいろんな種類があります。

- 基本のフック<br>useState<br>useEffect<br>useContext

- 追加のフック<br>useReducer<br>useCallback<br>useMemo<br>useRef<br>useImperativeHandle<br>useLayoutEffect<br>useDebugValue

> とりあえず、初学者は上記のフックが存在するということだけ何となく分かっていればいいのではないでしょうか。私は今のところ、useStateしか知りません😅

# クラスコンポーネント　と　関数コンポーネント
1. まず、コンポーネントって何？<br>コンポーネントとは、「（何かの）部品」。難しく考えず、そう信じていれば大丈夫。混乱するから初学者はこれ以上突き詰めなくてよし。 <br>**関数コンポーネントは、簡潔なコードが書ける**。だからクラスコンポーネントより好まれる傾向にある。

2. クラスコンポーネント<br>昔（そんなに昔でもないけど）は主流だったが、今はサブキャラとなったコンポーネント。
3. 関数コンポーネント<br>近年登場したコンポーネント。クラスコンポーネントに代わり今の主流となっている。useStateは、関数コンポーネントの派閥に属する。<br>（関数コンポーネントは、Hookを使える⇨useStateはHookの一つ。）
4. とりあえずの結論<br>関数コンポーネントをどんどん使お！

# useStateを使った実装例（超簡単なコード）
- つべこべ言わずに公式を覚えましょう<br>

【公式1】 setState関数をインポートする

```react
import React, {useState} from 'react';
```
 【公式2】useState関数を定義する

```react
const [name, setName] = useState('yui');
```
【公式3】useState関数の呼び出し

```react
<input /**中略**/ onClick = {()=> setName(name)} />
```
- コード（useStateを使って適当にコードを書いてみました。）

```react
import React, {useState} from 'react';
import "./styles.css";

const App = () => {
const [name, setName] = useState('yui');
  return (
    <div className="App">
      <h1>こんにちは、{name}さん</h1>
      <button onClick = {()=> setName(name + 'i')}>ボタン</button>
    </div>
  );
};

export default App;

```


- ボタンを押すと名前の「yui」の「i」の字が増えるというなんの役にも立たないやつ（笑）です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183440/cab20abc-4c23-282c-c802-237c964b1855.png)

- ボタンを1回押すとこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183440/a7520c46-b07f-9bfa-0886-4753fa1c6630.png)

- ボタンを連打するとこんな感じ😂

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1183440/4d2676e6-12ae-bf4b-aa0e-c6aede0e8e40.png)


> タイトルには「開眼した！」って書きましたが、まだ目は半開きです。もっと勉強します！！😅



# 参考文献
https://www.youtube.com/watch?v=Vzvbke_CLAs&t=143s&ab_channel=%E3%80%90%E3%81%A8%E3%82%89%E3%82%BC%E3%83%9F%E3%80%91%E3%83%88%E3%83%A9%E3%83%8F%E3%83%83%E3%82%AF%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E5%AD%A6%E7%BF%92%E8%AC%9B%E5%BA%A7

https://ja.reactjs.org/docs/hooks-overview.html

https://wa3.i-3-i.info/word12384.html
new Date()が現在時間と一致しない時の対処法

#概要と結論
### 概要
GASで`new Date()`で現在時間を取得すると日本時間と一致しない場合の対処法を記載する

### 結論
「appsscript.json」マニフェストファイルの`timezon: "America/New_York",`を`timezon: "Asia/Tokyo",`に変更
また、スプレッドシート自体のタイムゾーン設定は`new Date()`には影響しなかった


それから、新規作成時にデフォルトで`timezon: "Asia/Tokyo",`にする設定を探したが見つからなかった
（知っている方がいれば教えていただけると幸いです。）





# 変更操作キャプチャ
## 新エディタの場合

![新エディタ_マニフェストファイルの表示方法-min.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666347/0d86c296-e618-7da9-eaf5-f1da51e8e13f.jpeg)

![新エディタ_タイムゾーン変更場所-min.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666347/f4b2e9f3-a84d-a721-459f-26bcd492d7f3.jpeg)





## 旧エディタの場合

![旧エディタ_プロジェクトのプロパティ表示方法-min.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666347/2eb2f39f-113c-b8fb-9f2d-ac9662e70194.jpeg)

![旧エディタ_タイムゾーン操作場所-min.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666347/4cb2a850-3a6d-a5a9-ebda-309addb7f210.jpeg)



## スプレッドシートのタイムゾーン変更
**※スクリプトの`new Date()`に影響しない**

![スプレッドシート_設定表示方法-min.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666347/bb19b188-f4d3-fd3a-a7c8-4390187c524b.jpeg)

![スプレッドシート_タイムゾーン変更場所-min.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/666347/22e5cb14-137e-a169-3eee-84e68454c2c9.jpeg)



---
# 参考させていただいたページ

https://qiita.com/park3taro/items/a4c61305386e151a6529

https://qiita.com/kawamurayuto/items/e98ce7f38cb572ae616a

https://walking-elephant.blogspot.com/2021/01/gas.timezone.html

https://masa-enjoy.com/gas-dateobject-timezone
【Django】管理サイトに自作した操作を追加する方法

### 前置き
サイト構築で試行錯誤していると、データにまとめて同じ操作を行いたい場面がちょこちょこ出てきます。デフォルトでは削除のみが用意されているので、それ以外の操作を行いたい場合は自分でadmin.pyを編集する必要があります。少し手こずったので、備忘録代わりに記録しておきます。

### 参考にさせていただいたサイト
 - [【Django】Adminで簡単にアクションを追加する](https://tsukasa-blog.com/programming/django-admin-action/)
 - [Admin actions | Django documentation](https://docs.djangoproject.com/en/3.1/ref/contrib/admin/actions/#actions-as-modeladmin-methods)

### コード

以下のようなモデルを想定します。私が実際に使っているモデルを簡易化したものです。

```python:models.py
class EnglishWord(models.Model):
    # 英語のスペル
    spell = models.CharField(max_length=30)
    # 難易度
    difficulty = models.IntegerField(default=0)
```

difficultyはユーザ側の行動により随時変化していきます。ここで、テストであれこれ弄ったデータをまとめてデフォルトの状態、すなわち0に戻す操作を追加します。

管理サイトの操作は、admin.pyで設定します。

```python:admin.py
class EnglishWordAdmin(admin.ModelAdmin):
    # 自作した操作を追加
    actions = ['make_english_words_difficulty_zero']

    # 自作した操作
    def make_english_words_difficulty_zero(self, request, queryset):
        for english_word in queryset:
            english_word.difficulty = 0
            english_word.save()
    # 管理サイト上での表示を決定
    make_english_words_difficulty_zero.short_description = "英語の難易度を0にリセット"
```

クラス内に追加したい操作を関数として書いて、actionsに登録。同時に管理サイト上でどのように表示するかを.short_descriptionで決定します。また、querysetからオブジェクトを読み込むことで、データを変更する操作が可能です。

### まとめ
なにか分かりづらかったり、誤っていたらコメントの方へお願いします。集合知に感謝。
備忘録 とりあえずなVue.jsプロジェクトの始め方

##はじめに
これはメモです。

####初回のみ
Vue.jsをグローバルインストール

```
npm -g install vue-cli
```

プロジェクト毎、ルーターなどインストールされた状態

```
vue create (projectName)
vue init webpack (projectName)
npm run serve
```

##参考
Vue.jsをvue-cliを使ってシンプルに初めてみる
https://qiita.com/567000/items/dde495d6a8ad1c25fa43
ルーティング
https://qiita.com/567000/items/d6a7c694a370dc92e774
pythonでネタソートを自作してみた

#初めに
随分前のものになるが、スターリンソートなるものを見た。
そして、これよりも計算量が少なるソートを考えてみた。

その名も、**切り捨てソート**
計算量が少ないのかは知らんが。
#切り捨てソート
切り捨てソートとは強引にソート(昇順)にさせる。
その名の通り、昇順になっていない要素があったら、その後ろの値全てを粛清する。
昇順になってさえいればソートである。(暴論)

```python
def CutSort(L):
    R=[]
    imax=-1
    for i in L:
        if imax<i:
            R.append(i)
            imax=i
        else:break
    return R
```

入力:`[4,8,9,10,4,6,7,2]`
出力:`[4, 8, 9, 10]`

いい感じだ。
一つでも不適格なのがあるとその後ろを見ずにバッサリと切り捨てる。
なんと素晴らしいソートであろうか。

こう考えるとまだ全体をみてやるスターリンソートのほうが優しいのかもしれない。
[OutSystems]Expose REST APIのOnResponseを試す

OutSystemsでREST APIを作って公開するExpose REST APIの機能には、前処理を行えるOnRequest、後処理を行えるOnResponseというプロパティがあります。

OnResponse（後処理）の動作を確認してみました。
ExposeしたREST APIで、各メソッドの処理を実行した後に動作するActionを作れる機能です。
出力パラメータをText型またはBinary型として受取り、その値を修正して出力パラメータに設定することで後処理できます。

OnRequest（前処理）については、
[Expose REST APIのOnRequestを試す](https://qiita.com/jyunji_watanabe/items/899b11aa21a980aa1712)で確認しています。

# 確認環境
Personal Environment(Version 11.10.0 (Build 22910))
Service Studio(Version 11.10.13)

# 操作対象はBODY
これはOnRequestのときと同じ。
Expose REST APIの機能としては、ヘッダに値を出力することもできますが、OnResponseで提供する仕組みではその値にアクセスできません。

# 出力変数の属性が1つのときは値そのものが来る
出力変数の属性が1つだけで、Basic Typeである場合です。
以下のようなREST APIメソッド（出力変数はText型1つ）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/0616dc55-4d73-9c9f-7db1-d24d467cd5c5.png)

OnResponseに来た出力は以下の形式でした。JSONでなくただのテキスト形式で届くようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/42879ade-a2d3-89dc-e594-24c2a99420c0.png)

この変数を編集してみます。
値を変更するときは、OnResponse ActionのCustomizedResponse出力変数に、Response入力変数を編集したものを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/4e8358dc-5748-7666-4946-01090a13fa66.png)

ブラウザには以下のレスポンスが返ってきました。

```
メッセージテキスト　メソッドで追加　OnResponseで追加
```

# 出力変数の属性が複数のときはJSON
Expose REST APIでは、BODYに出力する変数は1つだけに限られています。
では、どうやって複数の値を返せばいいかと言うと、複数の属性を持つStructureを定義して、APIの出力変数の型に設定します。

ここでは、Text型のMessageとInteger型のNumberを持つStructureを出力変数の方に定義しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/b2ffbef3-8c89-bd13-a6a2-00307dad7f35.png)

この状態でOnResponseに渡ってくる値を確認してみます。
結果は特に指定していないのですが、JSONになっていました。

```
"{""Message"":""メッセージテキスト　メソッドで追加"",""Number"":1230}"
```

次に、この値を書き換えて見ます。
後処理で決まった項目を追加するような状況を想定して、JSONの最後の属性として、実行日時を足す。

ちょっと手を抜いて、JSON末尾に「}」を「, RunAt="日時"}」で置き換え（属性に複合型が含まれていると誤動作する）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/b054cb88-9f38-961a-02c8-52b6e92df77e.png)
上のAssignは、実行日時を「年/月/日 時:分:秒」形式で取得。
下のAssignが、出力変数に、JSON末尾に「, RunAt="日時"」を追加する処理。

```
RunAt=FormatDateTime(CurrDateTime(), "yyyy/MM/dd HH:mm:ss")

CustomizedResponse.ResponseText = Replace(Response.ResponseText, "}", ", ""RunAt"": """ + RunAt + """}")
```

# ResponseBinaryはResponseTextをBinaryに変換したもの
OnResponseで、入力変数のResponse.ResponseBinaryをText型に戻して、どんな値が入っているか確認。

BinaryData型をText型に変換したいときは、BinaryDataモジュールのBinaryDataToText Actionです。変換時に元データを解釈するエンコーディングを指定する必要があります（ないとASCIIとして読んでしまう）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/49054a6c-3c2d-b2a6-e454-be6b1ee8547b.png)


Debuggerで止めて、Response.ResponseTextとText型に変換したResponse.ResponseBinaryを比較すると、やはり一致していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/4d95b4fd-4fd7-6cfd-b595-9638c8e18229.png)
【日本語訳】Implement a code workflow in your build pipeline by using Git and GitHub


Microsoft Learnの下記モジュールをGoogle翻訳で日本語にしたものです。（ここでいうモジュールとは、ラーニングパスの小単位のことです）
非公式のため、参考程度にご覧ください。

明らかに意味がおかしい部分は修正していますが、理解に差し支えのない程度の場合は、あまり神経質にならずに放っておいています。
原文を併記していますので、訳が気に入らない場合はそちらを参照いただければと思います。

https://docs.microsoft.com/ja-jp/learn/modules/implement-code-workflow/

> Collaborate with others and merge only the highest quality code.
> ####Learning objectives
> In this module, you will:
> 　

> * Collaborate with others by choosing an appropriate branching and merging strategy.
> * Add a badge to your GitHub repository to show the status of the latest build.
> * Add a dashboard widget to help visualize your build history.
> * Set up a rule on your GitHub repository to require a review.

他の人と協力して、最高品質のコードのみをマージします。

####学習目標
このモジュールでは、次のことを行います。

* 適切な分岐およびマージ戦略を選択することにより、他の人と協力します。
* 最新のビルドのステータスを示すバッジをGitHubリポジトリに追加します。
* ダッシュボードウィジェットを追加して、ビルド履歴を視覚化するのに役立てます。
* レビューを要求するルールをGitHubリポジトリに設定します。

> Prerequisites
> 
> * An Azure DevOps organization
> * Visual Studio Code
> * .NET Core 3.1
> * Git
> * A GitHub account

####前提条件
* AzureDevOps組織
* VisualStudioコード
* .NET Core 3.1
* Git
* GitHubアカウント

####目次
> Introduction
> Choose a code flow strategy
> Exercise - Set up your Azure DevOps environment
> Exercise - Create a pull request
> Exercise - Push a change through the pipeline
> Exercise - Add a build badge
> Exercise - Track your build history
> Exercise - Add a rule to require a review
> Exercise - Clean up your Azure DevOps environment
> Summary

[はじめに](https://qiita.com/HINAMI_Hibiki/private/f5439a6c2801c8a6b085)
コードフロー戦略を選択する
演習-AzureDevOps環境をセットアップします
演習-プルリクエストを作成する
演習-パイプラインを通じて変更をプッシュする
演習-ビルドバッジを追加する
演習-ビルド履歴を追跡する
演習-レビューを要求するルールを追加します
演習-AzureDevOps環境をクリーンアップします
まとめ

[開始](https://qiita.com/HINAMI_Hibiki/private/f5439a6c2801c8a6b085)
【クソサイト】世界一情報量が多いサイト【個人開発】

![スクリーンショット 2021-03-15 182443.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/0592d3a0-138f-7556-ff98-86c3698b95af.png)


#はじめに
情報量が多い画像、情報量が多い動画などはたくさんあるのに「情報量が多いサイト」というのは見つからなかったので作ってみました。

https://www.zyouhou.net/
#概要

為替
ニュース
名言
じゃんけん
投稿
情報量の多い画像
日付け
イカれた鳥
天気予報
などの情報が載ってます。

マークダウンにも対応しています。
自分で好きな画像を張ってさらに情報量をふやしていってください!

あと隠しページがありますので暇な人は探してみてください。そこそこむずいです。

#工夫した点
###APIを大量に使う

大量と言っても5つですが
NewsAPI...ニュース
exchangeratesapi...為替
名言教えるよ...名言
official_joke_api...ジョーク
dogAPI...犬の写真

を使いました。

###色使い
原色、反対色、相性の悪い色
をあえて大量に使いまとまりをなくしました。

###画像
あえてリサイズをせずサイズをバラバラにしてみました。

###動き
スライドショーやイカれた鳥を使い動きを持たせさらに混乱するようにしました。

#まとめ
深夜テンションで決めたネタを続投しないよう法が良い

ツイッターやってます
https://twitter.com/yamada1531

##追記
皆さん、隠しページ見つけるの早いですね...。公開して3日くらいは絶対見つからないと思ってたのにもう１、２人...。
もうちょっと難しくしようかなーなんて思ってます。


##追追記
~~少しの間、メンテナンスモードにしておきます。ご迷惑をお掛けします。~~
メンテナンスモード解除しました。
著作権的にグレーだった画像を削除しました。
その代わりジョークAPIを追加しました
すこし面白みが減った気がしますが...

##追追追記
URL変えました。
今までのものでも新しいURLにリダイレクトされるようになっているので大丈夫だと思いますが、念のためブックマークをされてる方は「www.zyouhou.net」に変えておいてください。

##追追追追記 2021 3/26
久しぶりのアップデートです！
天気予報API追加しました。
【Heroku】Failed to install gems via Bundler.の解決方法

仮想環境構築中、いっそのこと新しいバージョンにできるものは
バージョンアップした結果、bundlerがHerokuに対応していないバージョンになったためだったと思います。

## 解決策
bundlerを2.1.4に戻したら、デプロイできました。

```
# バージョン確認
$ bundler -v
Bundler version 2.2.11

$ gem list bundler
gem list bundler
bundler (2.2.11)
capistrano-bundler (2.0.1)
```
capistranoは自動デプロイツールのようです。

下記、参考サイトを見ながらbundlerの入れ直しを行いました。

```
# bundler削除
$ gem uninstall bundler
Successfully uninstalled bundler-2.2.11

# 2.1.4インストール
$ install bundler -v 2.1.4
Successfully installed bundler-2.1.4

# バージョン確認
$ bundler -v
Bundler version 2.1.4

# 再度bundle
$ bundle install
```
これでgit pushしてから、
git push herokuで正常にデプロイできました。

新しいバージョンだからいいってもんでは、
やっぱりないのですね(ｏ'∀')ﾉ

## 参考サイト
https://qiita.com/Miyayan/items/fb71e39701e1b80bd09f
ユーザーアカウント（/etc/paswd）のカラム１を取得する　〜Linux シェルスクリプト〜

初めましてshoです。
シェルスクリプトの学習、練習メモです。

***内容「ユーザーアカウント（/etc/paswd）のカラム１を取得する」***
カラムの１だけ表示させます。

（※学習記録やメモ書き目的で始めました。ほぼ初学者レベルなので理解が浅いところや誤りがあるかと思いますがよろしくお願いします。またアドバイス等コメントいただけるとすっごく嬉しいです。）

#cutコマンド
cutはテキストファイルを横方向に分割して、必要な項目を抜き出せるコマンド。

#使用オプション
-d → 区切り文字を指定
-f → 必要な項目を項目数で指定


#スクリプト

```

#!/bin/sh

cut -d: -f1 /etc/passwd

```

#実行結果

```
root
bin
daemon
adm
lp
sync
shutdown
halt
mail
operator
games
ftp
nobody
systemd-network
dbus
polkitd
sshd
postfix
chrony
penguin1
guest1
guest2
apache
mysql

```

シェルスクリプトというかコマンド練習ですね。

以上です！！

##参照サイト

https://eng-entrance.com/linux-command-cut
AWS SDK for Javaで "JAXB is unavailable" と言われたら

# 環境
- AWS SDK for Java S3 1.11.327
- Zulu 11.0.9.1
- M1版 macOS Big Sur 11.2.3

# 現象
`AmazonS3#putObject()` でS3にファイルをアップロードすると、 `JAXB is unavailable. Will fallback to SDK implementation which may be less performant` という警告ログが出ます。

# 原因
JDK 11にはJAXB実装が含まれないからです。JDK 8とかだと、この現象は起こらないはずです。

# 解決方法
JAXBを明示的に追加すればOKです。

```xml:pom.xml
    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.amazonaws</groupId>
                <artifactId>aws-java-sdk-bom</artifactId>
                <version>1.11.327</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>com.amazonaws</groupId>
            <artifactId>aws-java-sdk-s3</artifactId>
        </dependency>
        <!-- この2つ！ -->
        <dependency>
            <groupId>jakarta.xml.bind</groupId>
            <artifactId>jakarta.xml.bind-api</artifactId>
            <version>2.3.3</version>
        </dependency>
        <dependency>
            <groupId>com.sun.xml.bind</groupId>
            <artifactId>jaxb-impl</artifactId>
            <version>2.3.3</version>
            <scope>runtime</scope>
        </dependency>
    </dependencies>
```

# 注意点
jakarta.xml.bind-apiやjaxb-implのバージョンは必ず `2.3.3` にしてください。最新の `3.0.0` だと問題は解決しません。

おそらくAWS SDK側が `jakarta.*` ネームスペースに対応していないからだと思われます。

# 参考URL
https://github.com/aws/aws-sdk-java/issues/2036

https://eclipse-ee4j.github.io/jaxb-ri/

# Issue立てました
「いいね」などよろしくお願いします。

https://github.com/aws/aws-sdk-java/issues/2527
【初心者でもわかる】jQueryで作る「再生停止ボタン付き自動スクロール機能」

#どうも7noteです。再生停止ボタン付き画面の自動スクロール機能の実装方法

jQueryを使った、画面の自動スクロールを作っていきます。
シンプルな機能ですが、再生停止を操作できるような作りなので、サイトをみた人が自分で自動スクロールさせるかどうかを決めることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/409521b4-590e-4eb1-864e-93682f4840d2.gif" width="250">

## 画面自動スクロールの作り方

```index.html
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

<div class="btn" id="stop">STOP!</div>
<div class="btn" id="start">START!</div>
```

```style.css
.box {
  width: 100%;        /* 横幅いっぱい */
  height: 100px;      /* 高さを300pxに指定 */
  background: #aaa;   /* 背景色を灰色にする */
  margin: 50px 0;     /* 上下に適度な余白 */
  position: relative; /* 相対位置の設定 */
}

.btn {
  color: #FFF;        /* 文字色を白に指定 */
  width: 80px;        /* 適当な大きさに指定 */
  height: 80px;       /* widthと同じ高さを指定 */
  text-align: center; /* 文字を中央揃えにする */
  line-height: 80px;  /* 行間を高さと一緒にして上下中央に文字を配置 */
  border-radius: 50%; /* 角丸で円形にする */
  position: fixed;    /* 絶対位置に指定 */
  right: 10px;        /* 画面の右から10pxの位置に指定 */
  bottom: 10px;       /* 画面の下から10pxの位置に指定 */
  cursor: pointer;    /* ホバー時のカーソルを指の形にする */
}

/* スタート、ストップのボタンの色指定 */
#start {background: #6c6;}
#stop {
  display: none;  /* stopははじめ非表示に指定 */
  background: #f66;
}
#start:hover {background: #8e8;}
#stop:hover {background: #f99;}
```

```script.js
// 初期値を設定
var speed = 1; //スクロール量（1 = 1px）
var interval = 50; //スクロール間隔（1000 = 1秒）
var scrollTop = $(window).scrollTop(); // 現在のスクロール量を計測

// スタートボタンがクリックされた時
$('#start').off('click');  // on clickの重複防止のため
$('#start').on('click', function(){
  
  /* スタートボタンを非表示にして、再生ボタンを表示 */
  $(this).hide();
  $('#stop').show();
  
  var scroll = scrollTop + speed; // 次の移動先までの距離を指定
  var scroll = setInterval(function() {
    window.scrollBy(0, scroll);   // スクロールさせる
    $('#stop').off('click');      // on clickの重複防止のため
    
    //スクロール中に停止ボタンが押された時
    $('#stop').on('click', function(){  
      clearInterval(scroll);      // setIntervalの処理を停止
      $(this).hide();             // 停止ボタンを非表示にして、
      $('#start').show();         // 再生ボタンを表示
    });

  },interval);  // setIntervalを変数intervalの間隔で繰り返す。
});
```

## 解説

大きく分けると2つのプログラムが動いています。
自動スクロールを行う部分と、その自動スクロールをボタンで制御する部分に分かれており、これらのプログラムの動作の順序を整理して1つのjavascriptにしているようなイメージです。

流れを書くと、

①再生ボタンを押す
②自動スクロールが始まり、ボタンが停止ボタンに切り替わる
③停止ボタンを押す
④自動スクロールを停止させ、ボタンが再生ボタンに切り替わる

これを繰り返している状態です。

まずはじめはスクロールがされていない状態です。このときに初期値が設定されます。
次に再生ボタンが押された場合、という処理を書きます。on()メソッドを使い処理を書いています。
ボタンが押されたら、ボタンの表示を切り替えたのち、自動スクロールを始めます。
自動スクロールの処理は`setInterval()`をつかっており、これは処理を一定速度で繰り返すことができます。これを使い０.X秒ごとにXpxうごかすという処理を連続して行うことで自動スクロールが行われているような状態になります。
そして、自動スクロールを起こしている`setInterval()`を無効化させるにはストップボタンを押します。ストップボタンが押された場合、ボタン表示を切り替えつつ`clearInterval()`を使うことで`setInterval()`の処理を停止させることができます。

## まとめ

onの処理だとクリックイベントが重複してしまうので、ofF()を使い重複対策をしています。
写真などをゆっくり眺めるようなサイトにはこういう自動スクロール機能とかがあってもいいかもしれませんね。

参考：https://ti-tomo-knowledge.hatenablog.com/entry/2018/05/08/083500

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
SQLアンチパターンを読んだ感想

# 前置き？
情報は何かを活かすためのデータ。データは事実だけの集まり

# 1章　ジェイウォーク（信号無視）
1つのカラムに`hoge,fuga`みたいに複数の値を入れるのはやめよう

# 2章　ナイーブツリー（素朴な木）
階層型のテーブルを表現する時は、系列列挙（gem ancestorsのやつ）が安パイ。ただし参照整合性を持てなかったり、パフォーマンス面にやや不安あり。

# 3章　IDリクワイアド（とりあえずID）
ただしactiverecordみたいなORMだと、自動でidが生成されるのは問題なし。設定より規約だから(Coc)

# 4章　キーレスエントリ
外部キー制約はちゃんと貼ろう。思わぬ箇所でエラーが発生する恐れがある。データに不整合を生む可能性があるから、原則つけること
たまに外部キーつけないで実装しちゃうことあったから、常日頃から外部キー制約をつける習慣をつくる

# 5章　EAV（エンティティ・アトリビュート・バリュー）
カラムの内容をテーブルで動的に管理するのは、コストが高すぎるので基本的にやらない方が良い

# 6章　ポリモーフィック関連
基本的にめんどくさいから触らないほうが良い。無理して使う必要はない。どうしても必要な場面があった時に検討するぐらい。

# 7章　マルチカラムアトリビュート
このアンチパターンを破ってもいいのは、下記の2パターンが多い
・変更される可能性が極端に少ない
・1つのカラムに同じ値が入ることが保証されている

# 8章　メタデータトリブル（メタデータ大増殖）
増加が予想されるカラムを列持ちしない
パーティションか別テーブルに切り出す
検索するのが鬼辛い。でも履歴テーブルなどは例外

年度ごとに分けるテーブルだったり正規化は大事。変更にめっちゃ柔軟になる。カラムで管理すべきものとしないものを考える。
方法は、当たり前だけどそれぞれのメリット・デメリットと行動を網羅的に考える

# 9章　ラウンディングエラー（丸め誤差）
給与や金額、時給だったり小数点がある数値の計算は、DBとかプログラミング言語の仕様上、人間が思った挙動にならないパターンが多い。

# 10章　サーティーワンフレーバー（31のフレーバー）
ENUMは変更コストが高いので、あまり使わないほうが良い。
変更が疑われる複数の状態を持つカラムは、別テーブルに切り出すのもおk

# 11章　ファントムファイル（幻のファイル）
carrierwaveとかは画像を格納するんじゃなくて、画像のパスを格納してる。曖昧な理解でした
画像をDBに保存するか、S3みたいな外部に保存するかはよく仕様検討すること。メリットデメリットを洗い出して網羅的に考える。

# 12章　インデックスショットガン（闇雲インデックス）
Rails出身者だったり、インデックスはただ貼れば処理が早くなるって思い込みがちだと思った。自戒。
インデックスの役割とかデータベースの仕様を理解して、適切にインデックスを貼る。
カーディナリティとかも考える。
データベースによってインデックスの仕様が違うのは厄介だなーって思った。
MySQLは値が散らばってるほどインデックスが有効とか。
数値の計算後の値をインデックスで検索したりとかはやらないこと。

パフォーマンス分析の手法で、MENTORってのがある

# 13章　ふぃあ・おぶ・じ・あんのうん（恐怖のunknown）
NULLの仕様を理解して向き合う
SQLでIS NULLでNULLを返す理由が理解しきれてない。値の分類が3つあるのは分かる。
NULLの思わぬ挙動で、意図した結果が取れた！って勘違いするケースもある。

# 14章　アンビギュアスグループ（曖昧なグループ）
曖昧なクエリ結果を避けるために、単一の結果を返すSQLを書け

# 15章　ランダムセレクション
ランダムな処理は基本的にSQLでやるのは良くない。
全県取得した後に絞り込むっていう処理をするせいで、メモリに無駄が発生する。
最初は処理が軽く見えて、レコード数が増えてくると重くなって牙を出す。
それで苦しめられる人が以外にも多いらしい。

# 16章　プアマンズ・サーチエンジン（貧者のサーチエンジン）
LIKE句で部分一致で検索する人は多いけど、それは良くない。
全県探すっていう方法を取っちゃうから。
やるとしたら、MySQLは文字列にインデックスを貼る？みたいな仕様があるらしい。
ただし可読性とか工数は劣るから、必要に応じて使い分ける。LIKE句を使うのが絶対悪じゃない。ケースバイケース

# 17章　スパゲッティクエリ
一度で複数の結果を返すようにするな。シンプルにしろ。
後で管理しやすさだったり、他の人が読むときにも読みやすくて理解しやすい。
長すぎると改修がくっそむずくなる

# 18章　イグジットカラム（暗黙の列）
思考停止でセレクト句とワイルドカードを使ってると、思わぬところでエラーを吐くかも。
列指定でSQLを実行するな。
多少手間でもほしいテカラムを明示したほうが良いらしい？

# 19章　リーダブルパスワード（読み取り可能パスワード）
セキュアにするためにパスワードは解読できるようにするな。
ただしサブアプリだったり、パスワードが漏れても問題ないものは例外になる可能性あり。

# 20章　SQLインジェクション
activerecordみたいなORMに頼ってると、SQLのセキュリティーを考える機会は少ないけど、実際は深く考えるべき。特にユーザーがパラーメーターを送れる時。
思わぬ方法で突破してくるから、網羅的に考える。
具体的な対策は、パラメーターを送れるのを制限する、文字列に加工する。とか

# 21章　シュードキー・ニートフリーク（疑似キー潔癖症）
自動生成のIDを再利用しては絶対にいけない。もしやるなら、自然キーを使う。前に実際に要望があってIDを再利用しかけたから気をつけねば

# 22章　シー・ノー・エビル（臭いものにフタ）
エラーメッセージをしっかり返そう。DRYにならなくても例外処理はしっかりやること。
良いアプリの50％はエラーハンドリング系の処理だとか

# 23章　ディプロマティック・イミュニティ（外交特権）
アプリエンジニアだから、DBにアクセスできないから、俺は関係ないからDBは理解しなくて良い。っていう考えはやめろ。
DBに少しでも関連するなら、常に仕様を理解しておく。

# 24章　マジックビーンズ（魔法の種）
モデルに何でもかんでも詰め込みすぎると、疎結合じゃなくなって詰む。
モデルはテーブルから分離させる？
Python Robot Simulator (Klampt)


##Klamp't (Kris' Locomotion and Manipulation Planning Toolbox)
###概要
Klamp't（Kris'Locomotion and Manipulation Planning Toolbox）は、ロボットのモデリング、シミュレーション、計画、最適化、および視覚化のためのオープンソースのクロスプラットフォームソフトウェアパッケージです。これは、ロボット工学の学習、ロボットの分析、アルゴリズムの開発、およびインテリジェントな動作のプロトタイピングのための、アクセス可能な幅広いプログラミングツールを提供することを目的としています。ロボットの操作と移動に特に強みがあります。

歴史的に、それは主に研究プラットフォームとして2009年からインディアナ大学で開発を開始しました。 2013年以降、インディアナ大学とデューク大学の教育で使用されています。それ以来、世界中の他のラボで採用されています。


###特徴

- ロボットモデリング、キネマティクス、ダイナミクス、制御、動作計画、シミュレーション、および視覚化のための統合C ++およびPythonパッケージ。
- 脚式および固定ベースのロボットをサポート
- Robot Operating System（ROS）およびOpen Motion Planning Library（OMPL）と相互運用可能
- 多くのサンプリングベースのモーションプランナーが実装されている
- 高速軌道最適化
- リアルタイムの動作計画
- フォワードおよびインバースキネマティクス、フォワードおよびインバースダイナミクス
- 接触力学の計算（力の閉鎖、サポートポリゴン、剛体および作動ロボットの安定性）
- 計画モデルは、シミュレーションモデルから完全に切り離されています。これは、不確実性とモデリングエラーのシミュレーションに役立ちます。
- 三角形メッシュ/三角形メッシュの衝突によるロバストな剛体シミュレーション。
- PID制御、トルク制御、および速度制御モーターのシミュレーション。
- カメラ、深度センサー、レーザー距離計、ジャイロスコープ、力/トルクセンサー、加速度計などのさまざまなセンサーのシミュレーション。
- いくつかのプラットフォームで動作(*nux環境,Windows,MacOS,Google Colab)

https://github.com/krishauser/Klampt

###使ってみる

##install

```bash:環境
ubuntu18.04
```

```bash:intall
pip3 install klampt
pip3 install PyQt5
git clone http://github.com/krishauser/Klampt-examples
cd Klampt-examples/Python3/demos
```

##デモ
####gl_vis
```
python3 gl_vis.py
```

![Screenshot from 2021-03-14 11-26-32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/8440e566-8b64-c107-c214-bce7d45c8bf3.png)

####mouse_capture
```
python3 mouse_capture.py
```
![Screenshot from 2021-03-14 11-31-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/0d9d2201-42e8-6320-b2fd-2d4a9e884fad.png)

####path_test

```
python3 path_test.py
```


####planning_test

```
pyhton3 planning_test.py
```

![Screenshot from 2021-03-14 11-36-22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/5dd8275c-84da-4d1e-8a98-d13b74fce2d8.png)

####resouce_demo

```
python3 resouce_demo.py
```

![Screenshot from 2021-03-14 11-37-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/0cdcb8d1-6b2c-029e-1f88-0c4fb891404d.png)



####sensor_test
```
python3 sensor_test.py
```
![Screenshot from 2021-03-14 11-22-36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/8ac5c24a-7d77-80e7-77e4-bf982b3f12e6.png)

####robotiq_test

```
python3 robotiq_test.py
```

![Screenshot from 2021-03-14 11-38-33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/d20e8192-7133-cd6d-e645-d7d96348ac0c.png)

####sphero.py

```
python3 sphero.py
```

![Screenshot from 2021-03-14 11-39-48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/7a73acc8-f380-0fb0-e256-4468ddb65374.png)

####trajectory_test

```
python3 trajectory_test.py
```

![Screenshot from 2021-03-14 11-40-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589906/9b8b29ef-cdf9-7583-3867-768a5ed549c5.png)
1〜100の和を表示させる　〜Linux シェルスクリプト〜


初めましてshoです。

シェルスクリプトの学習メモです。


***内容「1〜100の和を表示させる」***

基礎中な基礎ですね。



（※学習記録やメモ書き目的で始めました。ほぼ初学者レベルなので理解が浅いところや誤りがあるかと思いますがよろしくお願いします。またアドバイス等コメントいただけるとすっごく嬉しいです。早く先輩方のお力になれるよう精進します。）
#スクリプト

```

#!/bin/sh

result=0

for (( i = 1; i <= 100; i++ )){
  (( result += i ))
}
echo "$result"

```

#実行結果

```
5050

```

#ちなみに

echo "$result"の位置を{ }内に入れると(( result += i ))　の処理結果がその都度表示される

```

#!/bin/sh

result=0

for (( i = 1; i <= 100; i++ )){
  (( result += i ))
echo "$result"
}

```

#実行結果

```

1
3
6
10
・
・
・
（省略）
・
・
・
4753
4950
5050

```

以上！！
難読化とMinifyについて

## はじめに（調べるに至った経緯）
ども！ワンピースの光月おでんがカッコよすぎて日々アニメを漁りながら自宅待機中の光月ギノキンです。

（・・・ではでは）

さっそく調べるに至った経緯ですが、近頃はフロント業務をやらせてもらっていて、Sentry（監視ツール）に届いたエラーをchromeのdevツールで検証しているのですが、devツール上で`main.js`の中身を見てみるとソースコードの記述とは違う乱数があり、

> なんだこれ。。エラー追えないやん。。。

ってなったので調べてみると、「難読化」、「Minify」を行っているらしかったので調べるに至りました。

## 難読化とは

> プログラマーがソースコードなどを意図的に読みにくく記述することで、可読性を著しく下げたり、解析し辛くする技術を「難読化」と呼びます。プログラムやアルゴリズムを隠したり不明瞭にすることにより、攻撃者にソフトウェアプログラムをリバースエンジニアリングされることを防止できます。
> 参照元：[「難読化」でリバースエンジニアリングを阻止しよう！](https://note.com/toast_nhnjp/n/na716cf7f37cb)

### メリット
- 可読性を下げることよってリバースエンジニアリングを防止することができる
- 盗難防止のためにソースコードの公開を避ける
- サイズが小さくなるのでデータの読み込み速度が向上する
- 変数名が小さくなるのでローディング速度が向上する
- メモリ使用量が減少するため、キャッシュ回数が減り、速度が向上する

> リバースエンジニアリング・・・ソフトウェアを厳密に分析しソースコードなどの情報を明らかにする行為のこと

### デメリット
- デバックが複雑になる
    - JSファイル全て難読化せず、関数の中だけを難読化する
    =>`function`毎に分けて難読化することで、それぞれ管理しやすくなり、デバックもしやすくなる。


## Minify(ミニファイ)とは
> JavaScript（以下、JSと略記）やCSSのコード内の不要な改行やインデントを削除して、動作はそのままの状態で、圧縮・軽量化することをいいます。
> 参照元：[Minify（ミニファイ）とは何か？圧縮方法とJS・CSSの軽量化のメリットを解説](https://ssaits.jp/promapedia/technology/minify.html#:~:text=Minify%EF%BC%88%E3%83%9F%E3%83%8B%E3%83%95%E3%82%A1%E3%82%A4%EF%BC%89%E3%81%A8%E3%81%AF%E3%80%81,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E3%81%84%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)


### メリット
- webページ速度が上がる
- ソースコードの解読を難しくし、盗用防止


### デメリット
- デバック時の可読性が下がる



## 難読化とMinifyの違い
調べたが大きな違いは無いようで、理解としては下記の様な理解で問題なさそう。

> 難読化とは
変数名を乱数で短縮したり、可読性を下げて盗用を防止する
>
>minifyとは
人間用のコメントやインデントなどを消して無駄を無くす

## 最後に
難読化については、関数単位で難読化すればデバックしやすくなるみたいなので、もうちょい調べてみようと思います。
セキュリティ面やパフォーマンスを維持しつつ、保守性も考えて開発をしていけたらみんなハッピー！！
【Google Apps Script】データ登録webアプリを作る

# 始めに

本記事ではGASを使い，情報を登録する簡単なwebアプリを作成します．

# 完成品

作成方法を紹介する前に，まずは完成品を紹介します．
最終的に，以下のような挙動をするwebアプリを作ります．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125965/234eecbd-efb9-20d3-131c-70037f42f400.gif">

# webアプリを作る

## 使用したもの

- [Google Apps Script](https://developers.google.com/apps-script/)
- [Bootstrap](https://getbootstrap.jp/)（外観を整えるために使用）

## 機能

フォームから以下の情報を受け取ります．（いずれも入力必須）

- 利用者名
- メールアドレス
- パスワード

その後送信ボタンを押すと，以下の情報をスプレッドシートに保存します．

- **id**
- 利用者名
- メールアドレス
- パスワード
- **登録日時**

## コードを書く

今回は，スプレッドシートのツールからスクリプトエディタを開きます．
詳細な方法は他の記事を参照してください．

1. `コード.gs`を以下のように修正します．
2. webアプリのURLを取得するために，一旦**webアプリとして**デプロイします．
2. 右のメニューから「ファイル」 > 「＋」 > 「HTML」を選択し，HTMLファイルを作成します．
3. `index.html`を以下のように修正します．
4. もう一度デプロイします．

```javascript:コード.gs
// GET通信時の処理
function doGet(e){
  return HtmlService.createTemplateFromFile('index').evaluate();
}

// POST通信時の処理
function doPost(e){
  const sheet = SpreadsheetApp.getActiveSheet();

  // 保存する情報を取得
  let id = sheet.getLastRow();  // id
  let username = e.parameter.name;  // 利用者名
  let e_mail = e.parameter.mail;  // メールアドレス
  let password = e.parameter.password;  // パスワード
  let date = new Date();  // 登録日時

  // 取得した情報をスプレッドシートに記入
  sheet.appendRow([id, username, e_mail, password, date]);

  return HtmlService.createTemplateFromFile('index').evaluate();
}
```

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>app_test</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  </head>
  <body class="container">
    <h1 class="display-4">My awesome database app</h1>

    <form method="post" action="事前に取得したwebアプリのURL">
    <div class="form-group">
      <label>username：</label>
      <input type="text" name="name" class="form-control" placeholder="name" required>
    </div>
    <div class="form-group">
      <label>e-mail：</label>
      <input type="email" name="mail" class="form-control" placeholder="xxx@yyy.zzz" required>
    </div>
    <div class="form-group">
      <label>password：</label>
      <input type="password" name="password" class="form-control" required>
    </div>
    <input type="submit" class="btn btn-primary" value="SUBMIT!">
  </form>

  </body>
</html>
```

## 使ってみる

デプロイが終わったら，発行されたURLにアクセスしてみましょう．
最初の[完成品][1]と同じ挙動になっていれば成功です．

[1]: #完成品

# まとめ

ここまでで，簡単なデータ登録webアプリを作成しました．
入力するデータを変更したり，他のgoogleのサービスとの連携等の様々な応用ができるので，機会があれば挑戦しようと思います．
Laravelのデフォルトのメーラーを取得する

## 概要

`config/mail.php` で設定したメーラーにアクセスします。

## 環境

Laravel 7.x, 8.x で動作確認しています。

## 取得方法

```php
app('mailer');
```

または

```php
app('mail.manager')->driver();
```

または

```php
app('mail.manager')->mailer();
```

どれも `Illuminate\Mail\Mailer` を返します。

https://laravel.com/api/8.x/Illuminate/Mail/Mailer.html

また、デフォルト以外のメーラーは `driver('ses')` のように引数を与えると取得できます。

## mail.manager について

`app('mail.manager')` は `Illuminate\Mail\MailManager` を返します。

https://laravel.com/api/8.x/Illuminate/Mail/MailManager.html

## 資料

https://readouble.com/laravel/8.x/ja/facades.html#facade-class-reference
Python3: Zoom の token を取得

参考ページ
[ christophercollins/ZoomToken ](https://github.com/christophercollins/ZoomToken)

Arch Linux で必要なライブラリーをインストール

```bash
sudo pacman -S python-pyjwt
```

```py:gen_tokey.py
#! /usr/bin/python
#
#	gen_tokey.py
#
#						Mar/14/2021
# ------------------------------------------------------------------
import os
import jwt
import time
import json
from dotenv import load_dotenv
# ------------------------------------------------------------------
def file_write_proc(file_name,str_out):
#
	fp_out = open(file_name,mode='w',encoding='utf-8')
	fp_out.write(str_out)
	fp_out.close()
#
# ------------------------------------------------------------------
dotenv_path = '.env'
load_dotenv(dotenv_path)
API_KEY = os.environ.get("API_KEY")
API_SECRET = os.environ.get("API_SECRET")

expiration = int(time.time()) + 3600

encode = jwt.encode(
            {"iss": API_KEY, "exp": expiration},
            API_SECRET,
            algorithm="HS256",
            headers={"typ": "JWT"},
        )
token = encode.decode('utf-8')

unit_aa = {}
unit_aa['token'] = token

out_str = json.dumps(unit_aa)
file_out = "token.json"
file_write_proc(file_out,out_str)
# ------------------------------------------------------------------
```

```text:.env
API_KEY = '*******'
API_SECRET = '********************************'
```
マイグレーションファイルを変更する方法(Rails)

#マイグレーションファイル変更する方法
参考にしたサイト [Railsチュートリアル(5.1)](https://railstutorial.jp/chapters/advanced_login?version=5.1#toc)



```
$ rails db:rollback
$ rails db:migrate VERSION=0
$ rails db:rollback STEP=○
```
- 1つ前の状態に戻します。
- 最初の状態に戻したいときは`VERSION=0`つける
- 最後のマイグレーションファイルから数えて戻したい数だけ戻せる

```
$ rails db:rollback
$ rails db:migrate:status

Status   Migration ID    Migration Name
--------------------------------------------------
   up     20200830060821  Devise create users
  down    20200830062141  Create books

```
`$ rails db:migrate:status`を使うことで変更できるファイルの一覧を確認できます。
downが変更可能でupが変更できないファイルです。
`$ rails db:rollback`を使うとdownに変更されていると思います。

```:
$ rails g migration add_index_to_users_email
```
usersテーブルの中にemailカラムをを追加するコマンド

#おまけ
```
$ rails db:migrate 
$ bundle exec rake db:migrate 
```
- Rails 5以降のコマンド
- Rails 4以前のコマンド