OmniAICreator/Qiita-1.07M huggingface dataset:
React学習 基礎

#Reactとは
Facebookが開発、OSSとして公開しているライブラリ。
GitHubリポジトリはfacebook/reactにある。

Reactでは、ボタンやテキストボックスなどの汎用的なComponentに分け、それを組み合わせることでアプリケーションを構築していきます。
これにより、独自のUIパーツやウィジェットを、手軽に再利用できるようになりました。

そして、Reactの特徴として描画(Render)を行うことによって、Virtual DOMという仮想的なDOMを構築します。
直接DOM操作するのではなく、プログラム的に仮のDOMを構築してそれを操作することで、軽くて高速な処理ができるようになっています。

#JSX
Reactでは、HTMLのタグを直接JavaScriptのスクリプトに記述する仕組みを持っています。これを**JSX**といいます。
Reactを使う上でJSXの利用は必須というわけではありませんが、JSXを利用することでより自然にReactライブラリが使えるようになります。
また、埋め込まれた値をレンダリングする前に、エスケープしてくれるので、インジェクション攻撃を防ぐ事も可能です。

```react:JSX
const e = <h1 id="greeting">Hello, World!</h1>
```

```react:JSXを使わない場合
const e = React.createElement('h1', {id: 'greeting'}, 'Hello, World!')
```

JSXはJavaScriptのシンタックスシュガーであり、簡易的でより自然にReactの操作が可能となる。

##JSXを記述する際の注意

```react:JSXでエラーになる例
function getDOM() {
  return
  <div><p>JSXテスト</p></div>
}
```

この場合はJSXの範囲を丸括弧で括る必要がある。

```react:丸括弧で括る
function getDOM() {
  return (
  <div><p>JSXテスト</p></div>
  )
}
```

また、JSXでは複数のHTMLタグを並べて記載することはできない。
必ず、一つのDOM要素に全て含む必要がある。

```react:JSXでエラーになる例
function getDOM() {
  return (
    <div><p>JSXテスト1</p></div>
    <div><p>JSXテスト2</p></div>
  )
}
```

```react:一つのDOM要素に含める
function getDOM() {
  return (
    <div>
      <p>JSXテスト1</p>
      <p>JSXテスト2</p>
    </div>
  )
}
```

##JSXでstyleを指定する方法
JSXでstyle属性に文字列を指定することはできないため、CSSのスタイルをオブジェクトのプロパティに指定したものを与える必要がある。

```react:style属性にオブジェクトを与える
const obj = {prop1:value1, prop2:value2, prop3:value3 ... }
const dom = <div style={obj}> ... </div>
```
データサイエンス100本ノックを、Google ColabとAzure Notebooksで気軽に行いたい！

#はじめに
2020年6月15日に、データサイエンティスト協会より発表されました「データサイエンス100本ノック（構造化データ加工編）」の素晴らしさに感動した私は早速ドリルを解き、めくるめくデータサイエンスの大冒険をエンジョイしていた。

しかし、ふと気づくとOriginalのデータサイエンス100本ノック（構造化データ加工編）はDocker形式で提供されており、実践的な演習が可能である一方でお手軽感はかった。同じ思いの人も数多く存在すると考え、より気軽に100本ノックするためにGoogle ColabとAzure Notebookで実行可能な演習スクリプトと解答編スクリプトを作成した。なお、作成者である私がPythonしか使えないのでPythonのみである。R派の方、申し訳ない。

#どうやって始める？
こちらにコード＋説明文をアップしました。こちらのQiitaを見ていただくか、Github上のREADME.mdを見ていただければ。

noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook
https://github.com/noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook

#いや、だからどうやるの？
## Google Colab を使う場合

1. こちらをクリック

 1. 演習: https://github.com/noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook/blob/master/preprocess_knock_Python_Colab.ipynb

 2. 解答編: https://github.com/noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook/blob/master/answer/ans_preprocess_knock_Python_Colab.ipynb

2. ipynbファイルプレビューの上部にある「Open in Colab」をクリック。

3. もしくは、Google Colabの画面上部のファイル -> ノートブックを開く -> 「GitHub」タブを選択 -> 「GitHub URLを入力するか、組織またはユーザーで検索します」に「noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook」と入力し検索 -> 出てきたリストから「preprocess_knock_Python_Colab.ipynb」を開く。解答編は「answer/ans_preprocess_knock_Python_Colab.ipynb」を開く。

4. 100本ノックをお楽しみください。

 
## Azure Notebooksを使う場合
 1. Azure Notebooksに接続後、プロジェクトに入ります。なければ、適当なプロジェクトを作成してください。
 2. 「Upload」より、「From URL」を選択します。
 3. File Urlに「https://raw.githubusercontent.com/noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook/master/preprocess_knock_Python_Azure.ipynb 」を入力し、「I trust the contents of this file」にチェックマークを入れ、「Done」をクリック。
 4. なお解答編は、「https://raw.githubusercontent.com/noguhiro2002/100knocks-preprocess_ForColab-AzureNotebook/master/answer/ans_preprocess_knock_Python_Azure.ipynb 」を入力。
 5. 自動的にファイルがインポートされ、jupyter notebookが実行されます。
 6. 100本ノックをお楽しみください。

# オリジナル
一般社団法人データサイエンティスト協会(The Data Scientist Society)

The-Japan-DataScientist-Society/100knocks-preprocess
https://github.com/The-Japan-DataScientist-Society/100knocks-preprocess

# 謝辞＆あとがき
データサイエンティスト協会様が作られた素晴らしい教育コンテンツを、より良く多くの方に使っていただきたい思いで作成しました。この場をお借りしまして、データサイエンティスト協会様に感謝申し上げます。すべてソースコードの権利はデータサイエンティスト協会様にあります。多くの方がGoogle Colab,およびAzure Notebooksを用いて、気軽にスキルを向上していただければ幸いです。私のコンテンツに問題点がございましたらご連絡ください。
【React入門】コンポーネントとは

#コンポーネントとは
コンポーネントとはアプリケーションの部品や構成要素のこと。
Reactを用いた開発ではまずコンポーネントを作成し、組み合わせることでUIを構築します。

概念的には他言語でいう関数やクラスのようなものです。
コンポーネントは任意の入力を受け取り、React要素という「DOMの設計図」を返します。

Reactコンポーネントの使用例は以下の通りです。

```React:HelloMessageコンポーネント
// HelloMessageコンポーネントの定義
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  //コンポーネントの呼び出し
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);
```

`ReactDOM.render()`メソッド内の`<HelloMessage name="Taylor" />`がコンポーネントの呼び出し部分で、HelloMessageクラスが呼び出し先のコンポーネントとなります。

## JSX
上記のコードを見るとHMTLとJavaScriptが一体化したような特徴的な見た目になっていますが、これはJSXというJavaScriptの拡張シンタックスが使用されているためです。

Reactは従来式の表示とロジックを分けるやり方ではなく、コンポーネントという「関心」の集まりで処理の分離させるようデザインされています。

表示とロジックが1箇所にまとめて書くことになるReactにおいて、JSXを使うメリットは直感的にわかりやすい見た目になることです。



##コンポーネントを定義する
コンポーネントを定義する方法は以下の2種類あります。
・関数コンポーネント
・クラスコンポーネント

###関数コンポーネント
JavaScriptの関数定義で作成されるコンポーネントです。

```javascript:SayHelloコンポーネント
function SayHello(props) {
  return <h1>Hello, {props.name}</h1>;
}
```

上記は引数として受け取った`props`のname属性の値を参照し、React要素を出力するコードです。

###クラスコンポーネント
ES6のクラス定義で作成されるコンポーネントです。
クラスコンポーネントを作成する場合はReact.Componentの継承と、renderメソッドの実装が必須です。

```javascript:SayHelloコンポーネント
class SayHello extends React.Component {
  render(){
    return <h1>Hello, {this.props.name}</h1>;    
  }
}
```

###関数コンポーネントとクラスコンポーネントの違い

以前はstate(状態)を定義することができるかできないか、の違いがありました。
関数コンポーネントはあくまで関数であるため、クラスのようにstateを持つことができなかったのです。

しかし関数コンポーネントを高機能化するHooksの登場で、関数コンポーネントであってもstateを使用することが可能となったため、stateの有無という明確な差異は無くなりました。

機能面で大きな差異は無くなったため、どちらを使っても問題はありません。
関数コンポーネントを見る機会が増えたということなので、Hooksと合わせて学習しどちらも読めるようにしておきましょう。


#参考文献
・Reactチュートリアル
https://ja.reactjs.org/

・入門React コンポーネントベースのWebフロントエンド開発
https://www.oreilly.co.jp/books/9784873117195/
"Real Time For the Masses"から"RTIC"に名前が変わりました

# はじめに

Rustの組み込み環境で有名なリアルタイムシステム向けの並行実行フレームワークである"Real Time For the Masses"ですが、2020/6/12頃名前が変わりました。
新しい名前は "Real-Time Interrupt-driven Concurrency" 略して "RTIC" です。

公式サイトも https://rtic.rs になっています。
（古い https://rtfm.rs からも転送はかかっています）

読み方は「アールティック」らしいです。
（発案者？より北極`arctic`と発音が似ているとのコメントあり。もともとのRTFMがスウェーデンの大学発なので北極圏との関連性を持たせたかったようです）

# 経緯

もともと欧米ではRTFMは"Read The Fucking Manual"（「マニュアルを読みやがれ」という感じ。日本でいうググレカスですね）の略として一般的らしいです。
そのため検索性も悪いし企業など公式の場で呼びにくい、ということでこの4月くらいから新名称を検討していたようですね。

久しぶりにRTFMのページを見に行ったら、特に説明もなく変わっていてびっくりしましたが
「アールティック」は読みやすくていいと思います。
Vue.jsで複数モーダルを表示した時に背景(オーバーレイ)が重ならないようにする

こんな感じのモーダルコンポーネントがあるとします。

```vue
<template>
    <div class="background" @click.self="closeModal()">
        <div class="Modal--form__medium">
            <div class="Modal__header">
                <div v-show="title" class="Modal__title--center">
                  {{ title }}
                </div>
                <slot name="header_button" />
            </div>
            <slot name="subtile" />
            <div class="Modal__body--dialog">
                <slot name="main" />
            </div>
            <div class="Modal__footer">
                <slot name="footer" />
            </div>
            <slot name="modal" />
        </div>
    </div>
</template>
```

backgroundクラスにモーダルのオーバーレイにbackground-color:rgba(0,0,0,0.75);みたいなスタイルが設定することが多いと思います。
しかし、そうした場合、複数のモーダルを表示した場合にbackground-colorが重なってしまって濃い色になってしまう場合があります。
つまりは、一つのモーダルの背景のみbackground-colorをつけたいです。

そこで以下のようなmixinを書くことで複数モーダルが出ていても必ず一つのモーダルのみ背景を当てることができます。
document.querySelectorは一番最初に見つけた要素しかとってこないためその仕組みを利用して#backgroundにスタイルを当てています。

```javascript

   import { mapGetters } from 'vuex';

    export default {
        computed: {
            ...mapGetters({ modals: 'modal/modals' }),
        },
        watch: {
            modals: {
                immediate: true,
                handler(newValue) {
                    this.$nextTick(() => {
                        const background = document.querySelector('#background');
                        if (background) background.style.background = 'rgba(0, 0, 0, 0.5)';
                    });
                }
            }
        }
    };
```


これを使えば複数のモーダルの管理しやすくなると思いますので是非お試しください。

もっといい方法あるがあればコメントいただければと思います！

そろそろvue3もでるし、勉強熱が高まりますね。

ここまで見ていただきありがとうございました。
.NETCore3.1でのスキャフォールディングでMVCを生成する

# はじめに
「MVCを生成する」とか言いながら、生成するのは「VC」だけです。

さて、.NETCore自体の構築及びDBとの導通については既に完了しているものとして進めます。
構築から始めたいという方はいくつかエントリーがありますので、探してみてください。

もしSQLServer以外で組みたいという方がいらっしゃいましたら以下のエントリーをどうぞ。
[.NETCore3.1＋MariaDB ＆ Identity導入](https://qiita.com/taka-k-ch/items/2a54e28a9c53f8f1db12)

# DBの用意
DB+任意のTableを構築しておいてください。

# Modelの実装
Models以下に任意のModelを用意しておいてください。

# DbContextの実装
DbContextを用意しておいてください。
Pathは状況によって違うかもしれませんね。

# packageの導入

```
cd your/work/directory
dotnet tool install -g dotnet-aspnet-codegenerator
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design
```

# いざ実行

```
dotnet aspnet-codegenerator controller -name YourController -m YourModel -dc YourDbContext -outDir YourDirectory -udl
```

コマンドは以下の解説を元にお好きにどうぞ。

| Option | Name | Memo |
| --- | --- | --- |
|-name | YourController | 作成されるコントローラ名。URLにもなるので、その点を意識して命名したい |
|-m | YourModel | スキャフォールディング対象のModel名 |
|-dc | YourDbContext | DbContext名 |
|-outDir | YourDirectory | 新Controllerの生成先Directory。通常は「Controllers」で良い |

# 結果
何事もなければ指定した-outDir以下に新Controllerが、Views以下にCRUDのView群が、それぞれ自動生成される。
生まれたての段階でも速攻でDBに値を入れることもできる。

# ひとりごと
Inputの不要なカラムの分までInput作ってくれたりするのでアレなとこはありますが、まま工数削減できるのではないでしょうか。
その辺はあらかじめModelに細工しておけば回避できるのかな？
Linux 基本

###基本コマンド
* ps -as
    * 稼働中のプロセスを見る
* ps -ef|egrep|[見たいプロセス名]|[見たいプロセス名]|・・・|grep -v grep
* systemctl status firewalld.service
* systemctl list-unit-files -t service
    * 全サービスの稼働状況をみる

####vim
* 検索で次のヒットに移動する
    * /で検索した後に「n」
* 元に戻す [u]
* 元に戻したのを戻す [Ctrl+r]

###mysql
* 同時接続数のマックス確認

```sql
show variables like 'max_connections';
```

###プロセスのkill

```
ps aux | grep '探したいプロセス'
kill -9 pid(プロセスID)
//-9 はSIGKILLで強制終了の意味
```
###error message対応

* "daemon-reload"は「Unitファイルに加えた変更を読み込む」ためのもの
    * https://arailab.info/2018-02-26/?p=4880

###システムリソース確認

* https://sisidovski.hatenablog.com/entry/2015/07/07/072150


```
free -m //メモリ使用量確認
top //CPU利用率とか
```
Unity　シングル・ダブルクリック　回数に応じたイベント実行


Unityでクリック数に応じたイベント処理を実装したい場合、
どう記述すべきか簡単に考えたので自分用のメモとして残す。


```ruby:ClickCounter.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ClickCounter : MonoBehaviour
{

    int counter;
    bool isClickStart;

    void Start()
    {
        counter = 0;
        isClickStart = false;
    }

    void Update()
    {
        // メモ　クリックを検知したら、加算
        if (Input.GetMouseButtonDown(0))
        {
            counter++;
            StartCoroutine("MouseCounter");
        }
    }

    IEnumerator MouseCounter()
    {

        //メモ　１回目のクリックを検知した後、if内の処理が実行されないよう制御する
        if (isClickStart == false)
        {
            isClickStart = true;

            //メモ　下記の時間待機　この設定した時間の間、クリックされるとupdateにあるcounterが加算される 
            yield return new WaitForSeconds(0.2f);

            //メモ　クリックされた回数に応じて処理が分岐する
            if (counter > 1)
            {
                Debug.Log("複数クリック処理");
            }
            else
            {
                Debug.Log("ワンクリック処理");
            }

            //メモ　初期化（未検知に設定）
            isClickStart = false;
            counter = 0;
        }
    }
}

```

処理概要
　一定時間内にクリックされた回数を加算し、回数に応じて処理を実行する

補足
・Invokeでも実装できると思うものの引数が渡せないので、今後の拡張を見据えて
　今回はコルーチンを使用している
・int counter → Event e = Event.current に、counter を e.clickCount　としても
　問題ないが、一定時間の幅を調整したかったのでこのような形にした。
(0,fn)(args)

## これ何？

タイトルを見てなんだこれはと思われた方もいらっしゃると思いますが

Babelでトランスパイルをしたコードを見ていると

```js:title=トランスパイル前
import { b } from './a.js'

function c(n) {
  return b(n)
}
```

```js:title=トランスパイル後
var _a = require('./a.js')

function c(n){
 return (0,_a.b)(n)
}
```

のようなコードが出てくる事が気になって調べた。

ちなみにBabelのREPL結果、presetsはenvのみ適用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/f49fcdd5-2693-c840-207b-ea5ea52dbf91.png)


ちょっと抽象的すぎるコードなので、 `fn(args)` を実行した時との動作の違いがわかるようなコードを用意した。というかStackOverflowから引っ張ってきた。

```js:title=より具体的な例
var foo = { 
              fullName: "Peter", 
              sayName:  function() { console.log("My name is", this.fullName); } 
          };

// もしくは単に、fullName = 'Shiny';
window.fullName = "Shiny";

foo.sayName();       // My name is Peter
(foo).sayName();     // My name is Peter
(foo.sayName)();     // My name is Peter
(0, foo.sayName)();  // My name is Shiny
```

ブラウザで実行してみた例↓

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/68393c9f-7231-53d4-5dc7-245438e29028.png)


この例をみてわかるように、 `(0, foo.sayName)()` 以外で実行した時は`fullName`は `foo` オブジェクトにbindされているが、 `(0, foo.sayName)()` の `fullName`は~~グローバルオブジェクトにbindされている。~~ 
(2020/06/19追記: fooへのbindが解除されて結果、グローバル変数であるfullNameを参照する事になるとの事でした。@shiracamusさん、丁寧な解説ありがとうございました。:bow:)

ちなみに最初の数字は `0` 以外でもいけるみたいだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/4f844adc-5068-c0ef-432f-c99102ef0685.png)

何個でも0書いても結果は同じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/6e3f0250-f200-4837-e0a2-ac39ab68d621.png)

nullでもundefinedでもなんなら、fooオブジェクトでも、最後がfoo.sayNameなら実行できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/afcd7204-ff4f-9caa-37d0-905756d95b43.png)


どうも右から左に評価されて最後に評価された結果を返すらしい。

## 活用事例

```js
var a = 0,
    b = 1,
    c;

c = ( a++, b++, a + 2 ); // a is added, b is added, and a is added then returned

a; // 1
b; // 2
c; // 3
```

よく見る例としては、for文

```js
for (i = 0, j = 42; i < 10; i++, j--) {}
```

`i = 0` が評価されて、 `j = 42; i < 10; i++`　が評価されて、最後に `j--` が評価されると見るらしい。

なるほど！

for文をこのように解釈したのは生まれて初めてかもしれない。

## まとめ

しかし、なぜBabelはimportしたオブジェクト`a`のプロパティー(関数) `b`を実行する時に、bindをグローバルにするのかよく分かってない。
__(2020/06/19追記。解決したのでコメント欄に書いております。@shiracamusさん、丁寧な解説ありがとうございました。:bow:)__

~~テクニックの一つとして覚えておいたら役に立つ時がくるのかな？~~

Babelを学ぶとJavaScript力つくなこりゃ...

## この記法について

__(2020/06/20追記)__ 
この `(0, fn)(args)` は `acorn` で調べたら、`SequenceExpression` となっているので、 `シーケンス式` と呼べるものだと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/113181/d208197f-8d0b-e3ed-23a0-3a7d3c5fe4b0.png)



## 参考

- [JavaScript syntax (0, fn)(args)](https://stackoverflow.com/questions/11541134/javascript-syntax-0-fnargs)
Jupyter Notebook のカーネルに仮想環境をセットする方法

## はじめに
venvを使って仮想環境を作成した時、デフォルトでは Jupiter Notebook 上からその実行環境を指定することができなかったので、そのやり方を記載しました。


## 前提条件

【PC環境】
　　Windows 10 Pro　
【ローカル環境のpython.Ver】
　　python3.8.3
【仮想環境のpython.Ver】
　　python3.8.3

※venvで仮想環境を作成した場合、python自身のバージョンはそのタイミングのローカル環境バージョンと一緒になる。

## 手順

１．ローカル環境にJupyter Notebookをインストール(既にある人は不要)
２．仮想環境に入りipykernelをインストール

#### 早速始めます！
###１．ローカル環境にJupyter Notebookをインストール
`pip install jupyter notebook` コマンドでインストールするだけ。

インストール前：`pip list`
![Qiita-no003_img01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/d7a6ee57-422b-c253-8b8b-cf1418cfa62e.jpeg)

インストール後：`pip list`（図は一部分のスクショ）
![Qiita-no003_img02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/0e2f461d-7eb0-8346-ff29-593266daf57d.jpeg)
インストールは完了

**■jupyter 起動確認**
 `jupyter notebook`
![Qiita-no003_img03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/27b8dade-52df-c830-8c24-6aa2d5a94b5b.jpeg)
デフォルトでは仮想環境が表示されない事を確認！
一旦 Jupyter Notebookは閉じる。



### ２．仮想環境に入りipykernelをインストール

**■仮想環境に入る**
`.\for_scraping\Scripts\activate`

**■仮想環境内でipykernelをインストール**
`pip install ipykernel`

**■仮想環境内のライブラリ確認**
`pip list`
![Qiita-no003_img04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/5c1e381f-edfa-dd3f-702e-6caf687080d0.jpeg)
※いくつかライブラリが増えてるけど、notebook 自体は仮想環境にはない。

**■Jupyter にカーネル追加**
`ipython kernel install --user --name=pj_scraping`
　※ [pj_scraping] の部分は好きな名称でよい。
＜追記＞
　削除する場合は、`jupyter kernelspec uninstall [カーネル名]`
　カーネル名の一覧は、`jupyter kernelspec list`のコマンドで確認できる。


**■仮想環境を抜けて Juypter Notebookを起動**
![Qiita-no003_img05.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/3b3995a6-6226-617d-edd7-308493f6216c.jpeg)

**Jupyter Notebook のカーネルに仮想環境をセットできました！**


#### 環境が不要になってvenvで作成したフォルダを削除した場合でも、ノートブックの方には上記の様にKernelに残ってしまいます。その場合は以下、コマンドプロンプト上で以下のコマンドを実行すれば解決！（仮想環境がActivateになっていない状況で）

```:
jupyter kernelspec uninstall 【Kernel名】
```

## まとめ
これで作成した仮想環境をJupyter Notebookで選択できる様になりました！
特にハマる事もなく、簡単に設定できて良かったです :)
自分はJupyter Notebook を使ってコーディングすることが多いので、これはかなり役立ってます。
dockerをアンインストールしてみる (EC2 amazon linux 2)

とりあえずdockerを使ってみたかったので何も考えず yum -y install docker でdockerをインストール。ところが少し調べてみるとdocker(無印)は古くて、今は docker-ce か docker-ee になっているとのこと。

少しは調べてからインストールすれば良かったと後悔しながら、[docker公式](http://docs.docker.jp/engine/installation/linux/docker-ce/centos.html)にアンインストール方法が載っていたのでやってみる。

※最終的に下記4パッケージが削除されればOKとのことだったので、いま何が入っているかは気にせずyum removeでえいやっと削除。

```sh
$ sudo yum remove docker docker-common docker-selinux docker-engine
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
No Match for argument: docker-common
No Match for argument: docker-selinux
No Match for argument: docker-engine
Resolving Dependencies
--> Running transaction check
---> Package docker.x86_64 0:19.03.6ce-4.amzn2 will be erased
--> Finished Dependency Resolution

Dependencies Resolved

======================================================================================================================
 Package               Arch                  Version                          Repository                         Size
======================================================================================================================
Removing:
 docker                x86_64                19.03.6ce-4.amzn2                @amzn2extra-docker                161 M

Transaction Summary
======================================================================================================================
Remove  1 Package

Installed size: 161 M
Is this ok [y/N]: y
Downloading packages:
Running transaction check
Running transaction test
Transaction test succeeded
Running transaction
  Erasing    : docker-19.03.6ce-4.amzn2.x86_64                                                                    1/1 
  Verifying  : docker-19.03.6ce-4.amzn2.x86_64                                                                    1/1 

Removed:
  docker.x86_64 0:19.03.6ce-4.amzn2                                                                                   

Complete!
$ 
```
　
　
以上です。おつかれさまでした。
listをポインタで弄る方法

#privateなlistをポインタからアクセスする。
ポインタからのアクセスなので要素へは`->`を使用する。

```c++:main.cpp
#include <list>

class Data//listで使うデータをまとめたクラス
{
    public:
        float a;
        int b;
};

class MainList//listを管理するクラス
{
    private:
        std::list<Data> data;//Data型のlistを作る。
   
    public:
        std::list<Data>* GetPointer();//Data型listのポインタを返す関数。
};

std::list<Data>* MainList::GetPointer()//MainListクラスにあるGetPointer()関数を定義。
{
    return& data;//アドレスを返す。
}

void main()//C++のmain()関数。
{
    Data data;//データを作る。
    MainList main_list;//MainListを作る。
    
    main_list.push_back(data);//dataをlistにプッシュ。

    main_list.GetPointer()->begin()->a;//GetPointer()関数を通してDataクラスのa要素を見る。
    main_list.GetPointer()->begin()->b;//GetPointer()関数を通してDataクラスのb要素を見る。

    return 0;
}
```
C++の拡張for文　名前あってる？？

#注意事項
自分用メモ何でテキトーです。あしからず。

for文はfor(int i=0; i<MAX; i++) ~ みたいな感じで書くものやと思ってたけど、違う書き方があるらしい

#サンプルコード

```c++
#include<bits/stdc++.h>
using namespace std;

int main(){
	int n=3, sum=0;
	int num[3] = {1, 2, 3};

	/*これが拡張for*/
	for(int i: num) sum+=i;
	cout << sum << endl;
	return 0;
}
```

まあ要するに、for(変数:配列)的な書き方で、配列の前要素にアクセスできる感じかな？
ロボット制作がしたい

自分でロボットを作ってみたい人は多いと思います！
ですが，何をどのように学んでいくのか...イメージがつかない人もいると思います．
この記事では，私（高専ロボコン経験者）の場合を振り返りつつ書いています．

中学生〜高校生を対象に書いているつもりです．

# ロボットを作るために必要なもの

* 機構
* 回路
* プログラム
* センサ
* モータ
* などなど...

私は機構設計をやったことがありませんが，その他について浅く広くやって来ました．
私は電子工作から入ったので，以下はほぼ電子工作の入門となっています.

# Level 1  電子工作キット
まずは電子工作から初めてみましょう！
電子工作キットから始めるのがおすすめです．
抵抗，コンデンサ，トランジスタ，LED，...様々な電子部品に触れることができます．
（私は小学生〜中学生の頃，コロコロコミックに広告が載っていた「新・電子工作通信講座」というものをやってました）
## 目標
* 電子パーツに慣れる
    * 抵抗・コンデンサ・トランジスタ・LEDなどなど...
* はんだごてを使うことができる
* ものづくりができる

# Level 2 マイコンプログラミング
次にマイコンを使ったプログラミングを初めてみましょう！
マイコンとは小さなコンピュータのことです．身の回りの電化製品などには，このマイコンが入っています．
ここでおすすめするマイコンは "Arduino" です．
また，ブレッドボード，ジャンパピンやスイッチ，LEDなど回路の部品も買っておきましょう．
Arduinoを手に入れたら，LEDを点滅させるプログラムから入り，以下のように進めていってください！
どんどんやれることが広がっていきます！
（私は高専に通っていた頃，部活内で学びました）

## 目標
* Arduino言語の習得
    * ArduinoでLEDをチカチカさせる． (digitalWrite)
    * ArduinoでLEDをぼんやり光らせる． (analogWrite)
    * スイッチを使ってみる． (digitalRead)
    * ボリューム（可変抵抗）を使ってみる． (analogWrite)
* プログラム自体の練習
    * 文字の出力（Serial.println）
    * 変数 (int / float / ...)
    * 条件分岐 (if / switch)
* ブレッドボードを使った回路設計
    * 接地（GND）の概念が理解できる
    * 抵抗の使い方 (LEDを使うときに抵抗が必要，オームの法則など)
    * プルアップ抵抗，プルダウン抵抗（入力にスイッチを使うときに必要）


## 補足　マイコンについて
* Arduino
一番おすすめのマイコンです．
プログラムがわかりやすく，色々な機能が使えるためおすすめです．
また，シールドという拡張基板も売っていて，Bluetoothなどの通信も使えるようにできます．
（私は高専ロボコンで，Arduinoをロボット制御によく使っていました）


* RaspberryPi
Arduinoと比べられることも多いと思いますが，こちらはOS（Operating System)が載っています．
難しいですがその分，やれることが増えます．
（完全にArduinoより勝るかというと，そうではありません．
特に入力に対して反応が素早くできる，綺麗な出力波形が出る（リアルタイム性）という面で
ロボットに向いているのはArduinoの方だと思っています．）
以下のようなことができます．Arduinoの次のマイコンとしておすすめ！
    * 簡易的なWebサーバ （ホームページ）
    * 音楽サーバ (Volumioなど)


* その他PICなど多種多様なマイコン
主にC言語を使って開発します．
データシート（説明書）の読み込みなどが大変です．

# Level 3 新たな部品
ここまで来たら，自分が思い描くモノを作るため，
Amazon，SwitchScience，秋月電子通商などのサイトで，センサや新たな部品を買ってみましょう！
（私は高専にいた頃，部活内で色んな部品を買わせていただきました．
高専ロボコンでは以下のセンサをよく使っていました．）
## センサ（Arduinoへの入力）
* 距離センサ
* ホイールエンコーダ（回転数が分かります）
* 傾きセンサ，ジャイロセンサ
* 気温・気圧センサ
* 赤外線センサ　など多種多様なセンサがあります．Arduinoで使ってみましょう！
* カメラ　はArduinoでは厳しいです.　RaspberryPiやPCを使いましょう！

## アクチュエータ(Arduinoから出力)
* モータ（モータードライバという回路も必要かも）
* 様々なLED(赤色LEDから，電車内の掲示板ようなドットマトリクスLEDまで色々なものがあります）
* スピーカ　など

# Level ? ロボット制作
ここまでくれば，次はロボット！...と言いたいですが，
ロボットを作るには，以下の理由で，お金・技術・時間が必要です．
一人でロボットを作るのはなかなか大変な作業です．
もしあなたが可能であれば，
高校・高専・大学などでロボットに関する研究やコンテストに携わることが１つの答えだと思います．

## 機構設計など
ロボットを作るとなると，外側が必要だと思います．
ロボットが何ができるかの大部分は，その機構にかかっていると思います．（私はこの分野は分かりません）

## 回路設計など
大きなモータを回すためにはモータドライバという回路が重要です．
トランジスタやFETやオペアンプを使った回路で，マイコンの信号を増幅させてあげることも重要です．
回路の開発にはオシロスコープなど計器も必要になってきます．
また，快適に操縦するには通信技術も大切です．

## センサ
センサは基本的に高級なほど良いものです．
安いセンサはノイズが酷かったり，時間がかかったり，クセがあるモノもあります...
特にkinect, LiDARなど距離に関するセンサは高級な印象があります．

## プログラム
センサに比例してできることが広がっていきます．
例えばロボットにカメラを付けたら，画像処理ができるようになり，
ディープラーニング技術などで物体の認識ができます．
上に挙げたような高価な距離センサがあれば，ロボットの位置を推定することができ，
ロボットに目的地を伝えるだけで自動運転をすることができます．
ただ複雑なことをさせようとすると，マイコンではスペックが足りなくなるかもしれません...

# まとめ
ロボットに興味がある人は多いのではないでしょうか？
私の経験が誰かの参考になれば幸いです．
【Laravel+MySQL+Docker+nginx】Laravel開発環境をDockerで構築する手順

#はじめに
Laravelの勉強するための開発環境作成手順メモです。
自分用なので雑い。

#準備
Dockerの設定だったりしていきます。
##ディレクトリ
プロジェクトディレクトリ配下に以下2つのディレクトリを作成。

- Docker
- server

##docker-compose.yml
プロジェクトディレクトリ配下にdocker-compose.ymlファイルを作成。

```docker-compose.yml
version: '3'

services:
  php:
    container_name: php
    build: ./docker/php
    volumes:
      - ./server:/var/www

  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
    volumes:
      - ./server:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php

  db:
    image: mysql:5.7
    container_name: db
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: test_db
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 4306:3306
```

##Dockerfile
Dockerディレクトリ配下にphpフォルダを作成。
その中にDockerfileを作成。

```dockerfile
FROM php:7.3-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
    && apt-get install -y zlib1g-dev libzip-dev mariadb-client \
    && docker-php-ext-install zip pdo_mysql

#Composer install
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1

ENV COMPOSER_HOME /composer

ENV PATH $PATH:/composer/vendor/bin

WORKDIR /var/www

RUN composer global require "laravel/installer"
```

##PHPの設定
Dockerfileと同階層でphp.iniファイルを作成。

```php.ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
```

##nginx
Dockerディレクトリにnginxフォルダを作成。
その中にdefault.confファイルを作成。

```default.conf
server {
  listen 80;

  root  /var/www/public;
  index index.php;

  location / {
    try_files $uri $uri/ /index.php$is_args$args;
  }

  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass   php:9000;
    fastcgi_index  index.php;

    include        fastcgi_params;
    fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param  PATH_INFO $fastcgi_path_info;
  }
}
```

##MySQL
Dockerディレクトリにdbフォルダを作成。
その中にmy.cnfファイルを作成。

```my.cnf
[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

[client]
default-character-set=utf8mb4
```

#Laravelプロジェクト
プロジェクトのルートディレクトリに移動。
以下コマンドを実行。

```
docker-compose up -d
docker-compose exec php bash
laravel new
```

#確認
locallhostで画面が表示されれば成功。
やったね。

#DB設定
dockerで開発環境を作った場合、.envファイルとdocker-compose.ymlファイルの情報を合わせとかないとmigrateできなかったりとめんどくさいので今やっとく。

```.env
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=test_db
DB_USERNAME=root
DB_PASSWORD=root
```
これでDBの登録も問題なし。

#まとめ
自分用メモなのでめちゃくちゃざっくりしてますが参考になれば。
ノンプログラミング

#初めに
ここ最近ノンコーディングという言葉を聞くようになった。
ひと昔前までは、何かを自動でするためにはプログラミングをする必要があった。
WEBサイトを作りたい？
　⇒HTML + CSS でWEBサイトを作って、サーバ立ち上げて初めてWEBサイト公開ができる。
エクセルに毎月似たような情報を打ち込んでるのを解消したい
　⇒エクセルにマクロ組めばいいじゃん。VBA書けばできるよ。

できるか！普段からプログラミング言語に馴染んでる人ならともかく
一般企業のちょっとPC使っているくらいのサラリーマンにそんな難しいことできるか。
勉強しろ？んな暇あるなら営業行って売上上げるわ！今月ノルマが・・・・
って思った人は多々いると思っています。

最近だと
WEBサイトを作りたい？
　⇒CMSサイト使えばいいじゃん。お絵描き感覚でサイト作れるよ。
　　サーバ？なにそれ？ワンクリックで公開できるよ。
エクセルに毎月似たような情報を打ち込んでるのを解消したい
　⇒RPA組めばいいじゃん。入力ルールを整理して画面でポチポチすれば単純作業はやってくれるぜ！

便利な世の中になったなー

#エンジニアでなくても作れる？
ツールの使い方が分からない。やったことないから分からない
という声はよく聞きます。ただよく考えてください。
誰だった最初は分からないです。エンジニアである私でも初めて触るツールは分からないですし戸惑います
一つ一つ調べて使える機能を増やしてやっとツールが使えるようになるだけです。
エンジニアは人よりそういったツールを使っているからこそ
ツールの特徴などの勘所を掴むのが少し早いだけです。
営業だろうと事務の人だろうと普段からツールに触る事に慣れていればそこまでスキル差は出ないと思います。

PCは使えないけどスマフォは得意よ。
私から言わせると意味が分からない。
PCもスマフォのOSがあってその上に様々さアプリが動いているだけである。※少々極端ですが
自分が普段使い慣れているスマフォは自分が気に入ったアプリを入れてよく触っているから分かるだけで
PCも本質は一緒です。
windows やmac と言うOSに対してエクセルやワードというアプリが動いているだけです。

#ノンコーディングWEBアプリケーション
今回私が一番言いたかったことはここです。
今時はWEBサイトだけでなくWEBアプリケーションまでノンコーディングで作れる時代です。
CMSみたいなWEBサイトを簡単に作れるってツールはよく聞きます。
有名どころでいうと
・WordPress
・Drupal
・heartcore
などなど

ただ最近では
Webアプリケーションまで自動生成できるWeb Performerなども出てきている。

以下参考
https://www.canon-its.co.jp/products/web_performer/
クライアントサイドだけでなくDB接続、業務ロジック全てノンコーディングで出来る。
それこそSQLやjavaなどの知識がなくてもWEBアプリケーションが出来る時代になっている。

さすがにDB設計したり、ロジックの設計したりと誰でも出来るとまでは言いませんが、
それでも確実にエンジニアへのハードルは下がっていると感じる。

まだ洗練された技術ではないですし、出来ることは限られていると思います。
大手企業で使用するような大規模システムなどには向かないと思いますが、
小規模なシステムでそこまで複雑な業務ロジックを必要としなければこういったアプリの選択肢もありです。


少し余談になってしまいますが、私がエンジニアになりたての頃はフレームワークすら採用されている
システムが少なくHTTPを生で取得してhttpRequestパラメータを解析して取得したり、
DB接続もJDBCドライバで自前でコネクションを張りSQLを組み立てて実行し取得した情報を自前でjavaBeanに設定したりしてました。
今やアノテーション一つでHTTPリクエストがjavaBean形式で受け取れたり、
アノテーション一つでトランザクション管理が出来たりSQLの定義ファイルを用意するだけでSQLを作ってくれたりとソースコードを書く量が当時よりものすごく減っています。
最近ではクライアントサイドの開発が進み、サーバサイドはAPI化して必要な事しかしなくなってたりもします。
こういった流れを見るとそのうちサーバサイドはノンコーディング。DBから情報を持ってくるだけ。ってなったりするのかなーって個人的には思います。
プログラミング好きな人種としては便利さもありますが一定量寂しさもあるなと感じます。



#エンジニアとノンコーディング
上記でノンコーディングが流行ってきてる。エンジニアじゃなくてもできると言っていますが
エンジニアはまだまだ必要です。
ノンコーディングで作れるものはまだまだ限られています。
リッチクライアントみたいなJavaScriptでゴリゴリのWEBサイトなどは作れないですし、
サーバサイトで複雑な業務ロジックだったりを組むのも難しいと考えます。

こういったものを全てノンコーディングで出来るようになるのはまだまだ先のことです。
それにそれらのツールを作る人はやっぱりエンジニアでなくては不可能です。
なので、エンジニアじゃない人が出来ることが多くなるだけでエンジニアは
そういった人たちの出来ることを増やすためにアプリづくりにずっと勤しんでると私は考えます。
【React】コンポーネントに引数有の関数を渡す方法

初歩的ながらハマったので自戒の念を込めてメモ。


## イベントハンドラに引数有の関数を渡す方法

イベントハンドラに引数有の関数を渡したい場合、2通りの書き方があります。

ひとつはアロー関数を使う方法。
もうひとつはbindメソッドを使う方法です。

アロー関数

```React
<Component onClick={() => this.handleClick(i)}>
```

bindメソッド

```React
<Component onClick={this.handleClick.bind(this,id)}>
```

ここでポイントは上のどちらも関数を渡しているいうことです。

アロー関数は無名関数を定義する記法、bindメソッドはthisを変更した新たな関数を生成するメソッドであるため、`onClick`に渡されるのはどちらも関数そのものです。

## 何にハマったか？

引数無しの関数をイベントハンドラに登録する時は以下のように書くので

```React
<Component onClick={this.handleClick}>
```


同じように引数有の関数を登録しようとすると想定外の挙動になりました。

```React
<Component onClick={this.handleClick(i)}>
```

上の例は関数の登録ではなく、関数の実行として扱われます。
onClickイベントの発火を待たず、コンポーネントがレンダリングされた時点でメソッドが動くことになるため、まだクリックしてないのに勝手に動いている…といった状況になりました。

# まとめ
イベントハンドラには関数を渡すこと。
アロー関数やbindを使用すること。

なんとなくで書かず、自分が何をしているのか理解した上でコードを書かなければいけませんね…
Twelve Factor APPについてのまとめ（前半）

# はじめに
https://12factor.net/ja/ に書いてある内容を自分なりに噛み砕いてまとめました。

# Twelve Factor APPとは
現代では、ソフトウェアはWEBアプリケーションや、Software as a Serviceという形で提供されています。Twelve Factor APPは、そのようなソフトウェアを次のようなものにするための方法論です。

* わずかな時間とコストでプロジェクトに新しい開発者が参加できる
* 実行環境間での移植性が高い
* クラウドプラットフォームを利用することでサーバー管理やシステム管理が不要
* 継続的デプロイが可能
* 低コストでスケールアップが可能

Twelve-Factorの方法論は、プログラミング言語やバックエンドサービス（データベース、メッセージキュー、メモリキャッシュなど）に依存しておらずどのようなものにでも適用可能です。

Twelve Factor APPはその名の通り12のファクター(要因)があります。

# Ⅰ. コードベース
* Twelve-Factor Appはバージョン管理システムで管理される
* コードベースとアプリケーションは 1:1の関係である

ここで、コードベースとはアプリケーションを構成するソースコードの集合のことです。プロジェクトやリポジトリと言った方がしっくりくるかもしれません。重要なのは、**1つのアプリケーションに対して2つ以上のコードベースがあってはならない**ということです(コードベースがライブラリなどの外部のコードを利用するのはOK)。
また、実際に動作しているアプリケーションのことを*アプリケーションのデプロイ*と呼びます。アプリケーション:コードベース = 1:1ですが、アプリケーション:デプロイ = 1:n でもOKです。例えば、一つのアプリケーションでも、本番で動いているアプリケーション/ステージング環境で動いているアプリケーション/ローカルで動いているアプリケーションなどの複数のデプロイがあります。しかしこれらは(バージョンの違いを除けば)一つのコードベースを参照していると言えます。

# II. 依存関係
* 依存関係の定義にはパッケージ管理システムを用いる
* アプリケーションが依存する物は全て**依存関係宣言マニフェスト**で宣言する。
* 依存関係宣言マニフェストで宣言された物は**依存関係分離ツール**を用いてインストールする

抽象的な表現が多かったので、言語ごとに例をあげると次のような物になると思います。要は**システムにグローバルにインストールしたパッケージではなく、プロジェクト用にインストールされたパッケージを使用せよ**ということだと理解すれば良いかと思います。
また、アプリケーションがImageMagickやcurlなどのどこにでもありそうなシステムツールに依存する場合でも、それらをアプリケーションの依存として定義する、またはアプリケーション自体に組み込む必要があります。

|言語|パッケージ管理ツール|依存関係マニフェスト|依存関係分離ツール|
|---|---|---|---|
|Ruby|Bundler|Gemfile|bundle exec|
|Python|Pip|Pipfile|Virtualenv|
|PHP|Composer|composer.json|composer install & autoload.phpの読み込み|

このようにしておくことで、後から参加した開発者も環境構築が容易になり、デプロイ先の環境が変わってもシステムツールの有無に振り回されることがなくなります。

# Ⅲ. 設定
* デプロイごとに異なる設定項目は環境変数へ格納する

当たり前のことですが、デプロイ環境ごとに異なるアプリケーションの設定項目をソースコードにハードコーディングしてはいけません。Railsではバージョン管理システムの配下におかない、config/database.ymlなどに設定を記述したりしますが、Twelve-Factor Appはこれすらも推奨していません。何故なら、誤ってgitの管理下においてしまうこともあり、設定をtest, prodなど環境ごとにグルーピングする際、デプロイ先が増えるごとに新たな環境**名**(develop, staging, my-stagingなど)が必要となるため管理が大変になり、スケールアップが難しいためです。
代わりに、環境変数をデプロイごとに独立して管理することでスムーズにスケールアップさせることができるようになります。

# Ⅳ. バックエンドサービス
* バックエンドサービスをアタッチされたリソースとして扱う

バックエンドサービスの例としてはmysqlなどのDBやPostfixなどのSMTPサービス、Memcachedなどのキャッシュシステムなどがあります。これらサービスはローカルで動いている可能性もあれば、サードパーティによって提供されていることもあります。Twelve-Factor Appは、これらがどこでどのように動いているかには関心は持たず、先に述べた設定項目を変えるだけで、一切コードに手を加えることなくバックエンドサービスを自由にアタッチしたりデタッチすることができる必要があります。


# Ⅴ. ビルド、リリース、実行
* アプリケーションのデプロイへの変換をビルド、リリース、実行の3つのステップへ分ける
* 全てのリリースは全て一意の識別子を持つ
* 作成されたリリースは変更しない。更新する場合は新しいリリースを作成する

実行に動作しているアプリケーションをデプロイと呼ぶことは先に説明しましたが、このデプロイの状態へアプリケーションを変換するまでに3つのステップを経ます。ソースコードをコンパイルしたものをビルド、ビルドに対して各種設定を適用した物をリリースと呼びます。デプロイツールは通常、リリースをロールバックさせたり等のリリース管理の仕組みを持っています。このため、各リリースには一意の識別子が必要です。
また、実行ステップにあるソースコードを変更しても、それは**そのデプロイにしか適用されずビルド、強いてはコードベースへは適用されない**のでやってはいけません。


# Ⅵ. プロセス
* Twelve-Factor App はステートレスかつ、シェアードナッシングである

アプリケーションが状態を持つ必要がある時は、データベースなどの永続化可能なバックエンドサービスを使用する必要があります。メモリやディスクにキャッシュされた物は、プロセスが再起動やデプロイなどによって意図せず消えてしまうことがあるので、これらは短いトランザクション以外では使用してはいけません。


# 続き

後半へ続く
【Laravel】Laravelメモ

#経緯
ずっとRailsをしてたのですが、ありがたいことにPHPメインの自社開発企業に就職できたので現在PHPを勉強しています。

ただMVCの仕組みだったりあんなにRailsで頑張って覚えたのに、私の記憶が頼りないせいで忘れてしまいそうなので、考えが似た感じのPHPフレームワークLaravelで定着させようと思い勉強し始めました。

まだめっちゃ基礎の段階ですが、とりあえず復習のために色々メモします。

#Laravel
PHPのフレームワーク。
多分今PHPのフレームワーク＝Laravelみたいになってる。

まだ初歩なので何とも言えませんが、今のところRailsと似てるので割と理解しやすい印象です。

##デバックツール
```
composer require barryvdh/laravel-debugbar
```

##artisan
Railsコマンド的なやつ。
Serverディレクトリで実行します。

```
php artisan ~~~
```

##Model
Model名は単数形。
###作成
```
php artisan make:model Models/name
```

マイグレーションファイルとコントローラーも同時に作成する場合

```
php artisan make:model Models/name -mc
```

マイグレーションファイルだけ一緒に作りたい場合

```
php artisan make:model Models/name -m
```

##Migration
テーブル作成の履歴的な。
Migration名は複数形。
###作成
```
php artisan make:migration create_names_table
```

Databaseフォルダに作成される。
カラム追加は公式参照。
https://readouble.com/laravel/5.5/ja/migrations.html
追加したらMigrateする。

```
php artisan migrate
```

カラムを追加したいとき

```
php artisan make:migration add_カラム名_to_カラムを追加したいテーブル名_table —table=カラムを追加したいテーブル名->after('後ろに挿入したい既存カラム名');
```

##Controller
いろんな処理するところ。
###作成
```
php artisan make:controller *****Controller
```
よく使う機能を最初から付けれる。

```
php artisan make:controller *****Controller --resource
```

###記述
class内にpublicでメソッドを作成。

```***Controller.php
return view(‘viewのフォルダ名.表示させたいファイル名’);
```

###リクエストの記述
PHPではグローバル変数の$_POSTでデータを受け取っていたが、Laravelでは第一引数にRequestクラスを設置する。

```***Controller.php
public function store(Request $request)
    {
        $your_name=$request->input('your_name');
    }
```

##View
ファイル名には必ず「***.blade.php」とつける。

###actionやhrefの書き方
```***.blade.php
<a href="{{route('表示したいViewのフォルダ名/表示したいファイル名')}}"></a>
```
```***.blade.php
<form method="POST" action="{{route('コントローラー名.メソッド名')}}">
    //laravelでformを動かす場合は@csrfを入れる
    @csrf
</form>
```

##Route
###記述
```web.php
Route::get('表示したいViewのフォルダ名/表示したいファイル名','コントローラー名@メソッド名');
```
###グループ化

```web.php
Route::group(['prefix'=>'表示したいViewのフォルダ名','middleware'=>'auth'],function(){
    Route::get('***','コントローラー名@メソッド名')->name('表示したいViewのフォルダ名.表示したいファイル名');
});
```
###ルート一覧書き出し
```
php artisan route:list > ファイル名.text
```
##ファサード
get,select,where,groupbyなどSQLに近い構文。

```***Controller.php
DB::table(テーブル名)->get();
```

###クエリビルダ
```***Controller.php
use Illuminate\Support\Facades\DB; //Controllerに貼り付け
```

##Laravel UI
jsやsassを入れる。
ログイン・新規登録機能などをつける。

【参考】
https://www.techpit.jp/courses/laravel6-aws/lectures/13324326

##メッセージの日本語化
下記ファイルをlangフォルダにコピー。
https://github.com/minoryorg/laravel-resources-lang-ja

config/app.phpのlocationがjaになってるか確認。

#まとめ
公式見るのがぶっちゃけ一番早い。
Railsと違ってわかりやすかったのでとりあえず困ったら公式でまず検索かけるのが良いと思いました。

あくまでメモなので随時追加していくと思います。

【公式】
https://readouble.com/laravel/7.x/ja/releases.html
Debug モードで PowerShell スクリプトを実行する

PowerShell をターミナルから実行しているときは ```$DebugPreference``` から Debug 設定を変更できる

```powershell
$DebugPreference = "Continue"
Write-Debug "Hi! I'm debugging."

# 出力
# DEBUG: Hi! I'm debugging
```

スクリプトファイル (.ps1) を powershell.exe で実行したいときは、次のようにすると Debug モードでスクリプトを実行できる。

```powershell
powershell -executionpolicy Bypass -command "`$DebugPreference='Continue'; & ".\sample.ps1""

# .\sample.ps1
Write-Debug "Hi! I'm debugging."

# 出力
# DEBUG: Hi! I'm debugging
```
Reactの基本的な使い方

# プログラミングの勉強日記
2020年6月19日　Progate Lv.137
ReactⅠ
　Reactはサイトの見た目を作れるJavaScriptのライブラリ。Reactのモバイル版であるReact Nativeを使うとiOSとAndroidのアプリを作ることもできる。

##ブラウザに表示する
　JavaScriptファイルのrenderメソッドの`return`内に`<h1>~</h1>`と記述するとブラウザ上に表示できる。

```react:App.js
class App extends React.Component{
  render(){
    return(
      <h1>Hello World</h1>
    );
  }
}
```
##JSX
　HTMLと同じように記述できる。見出しには`<h1>`タグ、文章には`<p>`タグなどHTMLと同様のタグが使える。<font color=blue>ただし、return内に複数の要素があるとエラーになる。</font>そのため、複数の要素がある場合は1つの要素にまとめる。
　<font color=blue>imgタグを使う場合、`<img src="画像のURL" />`と書くので、この`/`を忘れないようにする。</font>

```react:App.js（エラーが出る）
render(){
  return(
    {/* 複数の要素があるのでエラーになる */}
    <h1> h1 </h1>
    <h2> h2 </h2>
    <p> p </p>
  );
}
```

```react:App.js（正しい記述）
render(){
  return(
    {/* 1つの要素にまとめる */}
    <div>
      <h1> h1 </h1>
      <h2> h2 </h2>
      <p> p </p>
    </div>
  );
}
```

##App.jsの構造とコメントアウトの方法
　renderメソッドのreturn内のみJSXで記述する。JSXで記述された要素はブラウザに表示される。
　return内では`{/* コメント */}`として書き、他のところでは`//コメント`として書く。

```react:App.js
import React from 'react';  //1. Reactをimport
class App extends React.Component{  //2. React.Componentを継承するクラスの定義
  render(){  //3. JSXを戻り値とするrenderメソッドの定義
    return(
      ...
    );
  }
}
export default App; //4.クラスをインポート
```

##JSXにJavaScriptを埋め込む
　JavaScriptの部分を`{}`で囲む。タグの属性の値にも使える。

```react:App.js
render(){
  const text='Hello World';
  return(
    <div> {text} </div> {/*中でJavaScriptを埋め込んでいる*/}
  );
}
```

```react:App.js
render(){
  const imgUrl='https://~~~.png';
  return(
    <img src= {imgUrl} />
  );
}
```

##ボタンの作成
　`<button>`タグを用いる。ボタンには`<button>`タグで囲まれる文字が表示される。

##イベント
　何かが起きたときに処理を実行するように指定できる。タグ内に`イベント名={ ()=> {処理}}`と書くことで指定したタイミングで処理を実行できる。<font color=blue>アロー関数はJavaScriptなので`{}`で囲む。</font>

```react:App.js
<button イベント名 = { ()=> {処理} }> </button>
```

###onClickイベント
　クリックされたときに処理を実行するイベント。イベント名にonClickを指定する。

```react:App.js
<button onClick = { ()=> {console.log('Hello World')} }>
  Hello World
</button>
```
　この例はクリックするとコンソールに「Hello World」と出力される。
PowerShellで一定期間経過したフォルダを削除する

趣旨
-------------
あるフォルダ内で一定期間経過したフォルダを削除する必要があったので、備忘録的な自分用メモです。

実行コマンド
----

### 当月から2ヶ月前の「YYYYMM」名のフォルダを削除する場合

```ps1:
$now = (Get-Date).AddMonths(-2)
$delMonth = $now.ToString("yyyyMM");

Get-ChildItem D:\test\pdf | Where-Object {$_.Attributes -eq "Directory" -and $_.Name -eq $delMonth} | Remove-Item -recurse -force
```

### 当月から2ヶ月前の「YYYYMMDD」名のフォルダを全て削除する場合

```ps1:
$now = (Get-Date).AddMonths(-2)
$delMonth = $now.ToString("yyyyMM");

Get-ChildItem D:\test\pdf | Where-Object {$_.Attributes -eq "Directory" -and $_.Name -match "$delMonth(0[1-9]|[12][0-9]|3[01])"} | Remove-Item -recurse -force
```

### 念のため削除前に確認をしておく
```ps1:
Remove-Item -recurse -force
を
Sort-Object Name
に変更して、意図したフォルダ名が表示されていることを確認する
```

定期的な削除の実行
----
上記のスクリプトをバッチファイルから呼出し実行するバッチファイルを作成して
タスクスケジューラに、任意のトリガー(月一)でタスク実行されるように登録する
Excel VBA + SeleniumBasic でブラウザ操作

## 環境
windows10
Excel（Office365）
Google Chrome ver 83.0.4103.106

## SeleniumBasicのインストール
https://github.com/florentbr/SeleniumBasic/releases/download/v2.0.9.0/SeleniumBasic-2.0.9.0.exe

## ChromeDriverのインストール
Chromeのバージョンに合わせたものをインストール
https://chromedriver.storage.googleapis.com/83.0.4103.39/chromedriver_win32.zip

インストールしたフォルダを展開し、chromedriver.exeを、
SeleniumBasicフォルダ（C:\Users\[ユーザ名]\AppData\Local\SeleniumBasic)に貼り付け。
（元のchromedriver.exeと入れ替える）
chromedriver.exeを実行。

## 設定
Excel起動
VBE起動
ツール => 参照設定 => sを押す => Selenium Type Libraryにチェック

## Googleを開く
```vb:test1.xlsm
Sub test()
    Dim Driver As New Selenium.WebDriver
    Driver.Start "chrome"
    Driver.Get "https://www.google.com/"
    Stop
End Sub
```

## セルに入力された値でgoogle検索
```vb:test1.xlsm
Sub search()
    Dim Driver As New Selenium.WebDriver
    Dim searchWord As String
    
    'セルの値を取得
    searchWord = Range("D9").Value
    ' chromeを開く
    Driver.Start "chrome"
    ' googleへアクセス
    Driver.Get "https://www.google.com/"
    ' 検索窓に値を入力
    Driver.FindElementByXPath("//*[@id='tsf']/div[2]/div[1]/div[1]/div/div[2]/input").SendKeys searchWord
    ' 検索ボタンをクリック
    Driver.FindElementByXPath("//*[@id='tsf']/div[2]/div[1]/div[3]/center/input[1]").Click
    Stop
End Sub
```

## Googleを開き、別タブでYahooを開く
```vb:test1.xlsm
Sub openGoogleAndYahoo()
    Dim Driver As New Selenium.WebDriver
    Dim ks As New Keys
    
    ' Chromeを開く
    Driver.Start "chrome"
    ' Googlを開く
    Driver.Get "https://www.google.com/"
    
    ' 新しいタブを開く
    Driver.ExecuteScript "window.open()"
    ' タブを切り替える
    Driver.SwitchToNextWindow
    ' Yahooを開く
    Driver.Get "http://www.yahoo.com/"
    Stop
End Sub
```
## 参考
VBAのスクレイピングを簡単楽にしてくれるSelenium
https://excel-ubara.com/excelvba4/EXCEL_VBA_401.html

Excelからセレニウム(Seleniumbasic)を使ってブラウザ操作をオートメーション！
https://shigetin.com/20181220/246
Nuxt.js 初期処理を考えてみる

`vue-cli` の場合は `main.js` で初期処理を記述するため、ここでアプリケーション全体で１回だけ実行したい処理をはさめる。では、`nuxt.js`はどこで処理すべきかを考えてみた。

vue-cliやっていて、nuxt.jsにきた人向けかもしれない。

## プラグインを利用する

プラグインはアプリケーション内で利用する共通関数などを登録するイメージがあるが、公式サイトの説明は以下。

> Nuxt.js では JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーションがインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使用する際にとりわけ有用です。
> https://ja.nuxtjs.org/guide/plugins#vue-%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3

つまり、ここで初期処理を入れてしまうと良い。

```js:nuxt.config.js
// pluginsに処理を挿入する
// 記述した順番で処理されるため、”ここで記述する順番”は重要。

export default {
  plugins: [
    '~/plugins/init.js',  // 1番目に実行される
    '~/plugins/auth.js',  // 2番目に実行される
    '~/plugins/master.js' // 3番目に実行される
  ],
}
```

```js:plugins/init.js
// storeアクセスできるため、ここでは初期処理をしたいactionをディスパッチする
// この場所でAPI通信等の処理も記述できますが実行結果はstore内に保持しておきたいので
// 個人的には初期処理を行いたいactionをディスパッチが良い。

export default async ({ store }) => {
  const result = await store.dispatch('setup/fetchData')
  if (result) {
    // 成功後の処理
  } else {
    // 失敗後の処理
  }
```

```js:store/setup.js
// 処理はイメージです。
// actionsで通信処理して結果をコミットして true/false を返す

export const state = () => ({
  data: {}
})

export const mutations = {
  initData(state, result) {
    state.data = result
  }
}

export const actions = {
  // 成功、失敗でtrueまたはfalseを返す
  async fetchData({ commit }) {
    try {
      const result = await fetch('https://xxxxxxxxx')
      commit('initData', result)
      return true
    } catch (e) {
      return false
    }
  }
}

```

## 別の方法
検討中...
ProgateのRuby on Railsコースの気になった所【params】


プログラミング未経験の初心者ですが、少し前にProgateのRuby on Railsコースを終わりました。

Railsチュートリアルをしながら復習してみると、Progateをやっていた時はあまりピンと来なかったけど、今なら少し理解できることが増えたので、気づいた点をまとめていきたいと思います。
Progateしているけど、ピンと来ていないな、ここ分からないなと思っている方のお役に立てば幸いです。

# paramsとは何か【コースⅢ】
Railsコースで頻出するparamsですが、正直「わかるような、わからないような...」と思っていました。

平たく言うと、
paramsはURLから送られてきた値やフォームで入力した値を`params[:パラメーター名]`で取得するメソッドです。


2020/6/20　とても参考にしたページのURLを追記します
https://note.com/sakusaku34/n/nc143e418b700



例をあげると投稿内容の詳細ページの場合だとこのような使い方になります。

    def show
     　@post = Post.find_by(id: params[:id])
    end

自分の場合、一つひとつの知識はその時には言っていることは分かるけど、記述していると知識が繋がらなかったので、なるべく分解して要素にするようにしています。例にあげたコードはこんな感じになります。


前提としてこの子たちはアクションといいます。

>controllerで定義されるメソッドを指してアクションと呼びます。

引用＆参考記事　https://qiita.com/morikuma709/items/5b21e9853c9d6ea70295

1. まず、`@post`は変数です。
まずここがピンときていなかった！（致命的）
2. `@post`を定義して、Postテーブルからidを探します。`find_by[id:(id番号)]`で探します。
`find_by[id:(id番号)]`はid以外もデータベースから1つの要素のものを探すことができます。(userとか)
3. このコードは「find_byでidを探す」、と指定しています。
そこから、探したいidは何かを記述します。今回の場合、`params[:id]`がそのidにあたります。
このparamsはURLから送られてきた値やフォームで入力した値を`params[:パラメーター名]`で取得するメソッドです。（大事なことなので2回書きました）
4. つまりどこからかidとして値を送られていて、それを受け取るということになります。
どこからidが送られているのか、
それは、データベースに登録されている固有のidを持ったPostのルーティングからとってきています。

このコードはつまり、「ルーティングで各投稿のデータベースidをURLとしたから、`find_by[id:(id番号)]`で、id番号が同じものを探して表示してね」という内容になります。

## まとめ
・paramsはURLから送られてきた値やフォームで入力した値を`params[:パラメーター名]`で取得するメソッド
・`find_by[id:(id番号)]`はid以外もデータベースから1つの要素のものを探すことができます。






初心者なので認識不足な部分もあるかもしれませんが、ここまでお読みいただきありがとうございます。
修正や訂正ポイントがあればコメントいただけると嬉しいです。
Ruby on Rails のquery attributeを使ってみる

## 結論: blank?とpresent?の代わりにattribute名?が使える(一部気をつける必要あり)

### 背景: integerのarrayを足しあげたかった(nilの可能性があり)

元々の私のコード...

```ruby
[ここはhogeをkeyにもつObjectの配列].reject(|obj| !obj.hoge.nil?).sum(:hoge)
```

`reject(|obj| !obj.hoge.nil?)` でhogeがnilのものを取り除き、 `sum(:hoge)` でnilを取り除いたhogeを足しあげるつもりでした。

### 修正版

```ruby
[ここはhogeをkeyにもつObjectの配列].select(&:hoge?).sum(:hoge)
```

`reject(|obj| !obj.hoge.nil?)` が `select(&:hoge?)` になりました。
hoge?がtrueに評価されるものをselectするようにしました、ここが今回学んだことです。
attribute名?という表現ができることです。

### 解説
[類似記事](https://qiita.com/yusabana/items/67ae553824166a39b61e)が既にあります
私の元々のコードはBad smellのするよくないコードだったようです。([参考ページ](https://rails-bestpractices.com/posts/2010/10/03/use-query-attribute/))

[Rails本体のコード](https://github.com/rails/rails/blob/7834363bbfdb68d734143063932ccc5a8814c97f/activerecord/lib/active_record/attribute_methods/query.rb)も見てみました。
[このcase文](https://github.com/rails/rails/blob/7834363bbfdb68d734143063932ccc5a8814c97f/activerecord/lib/active_record/attribute_methods/query.rb#L15)が該当の箇所のようです。
case文もまとめると、、、

まずtrue なら true、false, nil なら falseですね

```ruby
when true        then true
when false, nil  then false
```

次にレシーバに指定のattributeがある場合とない場合で大きく切り分けられるようです。

```ruby
if !type_for_attribute(attr_name) { false }
  if Numeric === value || !value.match?(/[^0-9]/)
    !value.to_i.zero?
  else
    return false if ActiveModel::Type::Boolean::FALSE_VALUES.include?(value)
    !value.blank?
  end
elsif value.respond_to?(:zero?)
  !value.zero?
else
  !value.blank?
end
```

`!type_for_attribute(attr_name) { false }` にてレシーバに該当のattribute名がなければtrueとなります。
その上で、`Numeric === value || !value.match?(/[^0-9]/)`の場合(数字)、0の時false、それ以外はtrueとなります。
数字以外の場合は、falseの時はfalse、それ以外の時はblank?の結果が帰るようです。

次はレシーバに該当のattribute名がある場合です。
`value.respond_to?(:zero?)` で zero?を持つ場合は `!value.zero?` が評価され0の時false、それ以外はtrueとなります。
zero?を持たない時は、!value.blank?の結果が帰るようです。

### まとめ
多くの場合で`attribute名.blank?`や`attribute名.present?`の代わりに使えるなと思いました。
気をつけたいのは、0の時にfalseになるということですね。
[参考記事](https://qiita.com/yusabana/items/67ae553824166a39b61e)でも言及されていました。
私がしたかったことは単純に足し上げだったので0が弾かれても困りませんが、場合によっては困ることもあるかなと思いました。

ここまで読んでいただきありがとうございました。
間違い等あればご指摘くださいまし、修正いたします。
(この記事は会社とは関係ありません)
CircleCIのSlack通知設定を新UIから旧UIに戻して行った時のメモ

## はじめに
数ヶ月前にUIが新しくなったCircleCI。

2020/6/15頃、そのCircleCIの新UIでSlack連携を試みた。が、うまくいかなかった。
その上、Slackにある「セットアップの手順」も旧UIでの説明のままだった。
なので旧UIにもどして実施することにした。
これはそのときのメモ。

※新UIと旧UIの切り替え方法は[こちら](https://support.circleci.com/hc/en-us/articles/360047237534-Switching-to-CircleCI-s-Old-UI-and-back-to-the-New-UI-)
※旧UIから新UIに戻そうとした際にバナーが出てこないときは[こちら](https://support.circleci.com/hc/en-us/articles/360047658813-I-can-no-longer-opt-in-to-the-new-UI)

## Slack側の設定手順
- [SlackのCircleCIアプリ](https://lh-sale-businessunit.slack.com/apps/A0F7VRE7N-circleci?next_id=0) からCircleCIを追加
- 通知したいチャンネルを選んで、Webhook URLを控える
- 任意でその他入力項目を修正し、Save Integrationを押す

## CircleCI側の設定手順
基本的にSlack側でCircleCIを追加した際にでてくる「セットアップの手順」（ページ下部に画像あり）を参考にすればOK

- 追加したいプロジェクトの右横の設定マークを押す
- NOTIFICATIONSにあるChat Notificationsを押す
- SlackのWebhook URLに先ほど控えたURLをいれる
- Test Hookを押し、Slackに`Hello from CircleCI`と通知がくることを確認したあと、Saveを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140790/eaa1a9e3-68bd-49b3-2ea4-79ff8a316d48.png)
Railsで「整数のみ」、「０以上の正の数のみ」のvalidatesの書き方

#環境
Rails 5.1.7
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-linux]

#結論
```
 validates :price, presence: true, numericality: {only_integer: true, greater_than_or_equal_to: 0}
```

#解説
「整数のみ」の箇所
```only_integer: true,
```

「0以上の正の数のみ」の箇所
```greater_than_or_equal_to: 0
```
form_withでのredirect_toについて

# 初めに
ポートフォリオを改善しようとコード弄っていたところ、form_forを使ったままの記載を発見。
form_withに書き換えたろ、安易な考え。。。

※ 本内容は以下の記事を参考にさせて頂き、問題を解決・記事を書くことにしました。
https://qiita.com/Ryoga_aoym/items/ac2918259744da128e86

## 開発環境
ruby 2.5.1p57
rails (6.0.3.1)

## 何が起きたか
[![Image from Gyazo](https://i.gyazo.com/78136b05e068274c51751b7aaaadf3c3.png)](https://gyazo.com/78136b05e068274c51751b7aaaadf3c3)

簡単な入力フォームを作成、createを押下すると情報が登録できる

**form_for**の場合では以下の記載で実装

```haml
= form_for @target do |f|
省略
  = f.submit "Create"
```
これを書き換えて以下の記載で**form_with**に変更

```haml
= form_with model: @target do |form|
省略
  = f.submit "Create"
```

## ところが
書き慣れている人なら当たり前なのかもですが、submit押下時のページ遷移(redirect_to)が動作せず。
データは保存されているが、何度もcreateを押下出来るので同じ内容が増殖。
createの処理

```ruby

  def create
    @target = Target.new(target_params)
    if @target.save
      redirect_to root_path
    else
      render :new
    end
  end
```

## 原因調査
とりあえず、binding.pry → 停止したため、正常動作。
save

```ruby

  def create
    @target = Target.new(target_params)
    if @target.save
      binding.pry
      redirect_to root_path
    else
      render :new
    end
  end
```

パターン2、binding.pry → 停止したがredirect_toが動作していれば停止しないはず。
redirect_toが動作していないと推測。

```ruby

  def create
    @target = Target.new(target_params)
    if @target.save
      redirect_to root_path
      binding.pry
    else
      render :new
    end
  end
```
あとはgoogleで検索あるのみ。

## 結果
form_withのオプション抜けが原因。
動作するように記載すると以下になった。

```haml
= form_with model: @target, local: true do |form|
省略
  = f.submit "Create"
```

原因としてはform_withではajax通信でformを送信。
そのajaxを使ってformを送信すると送信先のコントローラーで実行されるredirect_toの挙動にturbolinksが関わってくる。
そして、自分はturbolinksを入れていないため動作しなかった、ということらしい。

解決方法は二つあり、turbolinksを導入するかajax通信を切るかの二択で自分はajax通信を切るためにlocal: trueを追記した。

# 終わりに
スクールで習った気がするーという内容でしたが、いざ、体感すると忘れている物でした。。。
初めて記事投稿するので、マナー違反や解釈の誤り、改善あれば教えて頂ければ幸いです。

ありがとう御座いましたー。
Rubyでアルゴリズムを実装する:Day 2 -バブルソート-

正直やるか迷った２日目。
１日目はこちら＜[Rubyでアルゴリズムを実装する:Day 1 -ユークリッドの互除法-](https://qiita.com/Atarubift/items/4b7018c6ec8168dbc9be "Rubyでアルゴリズムを実装する:Day 1 -ユークリッドの互除法-")＞

今日はバブルソートを実装する

# バブルソートとは
隣り合う数字を比較して条件に応じた交換を行うアルゴリズム
今回は数列の右側から比較して小さい順に並べるという実装を行う

# bubbleSort.rb
## コード
```rb
# バブルソート

def bubbleSort(num)
  len = num.length                           # 数列の長さを格納
  len.times do |i|                           # 数列の長さ分ループ
    (len - 1).downto(i+1) do |j|             # 数列の長さ-1～i+1までループ
      if num[j]  < num[j-1]                  # 数列の一番奥とその一つ手前を比べる。
        num[j], num[j-1] = num[j-1], num[j]  # 奥の数の方が小さければ入れ替えを行う
      end
    end
    puts "#{i+1}回目；#{num.join(" ")}"       # 出力
  end
end

puts "数字を入力"
number = gets.split().map(&:to_i)             # 入力した数字をint型で配列に格納
bubbleSort(number)                            # 実行                                               
```

## 実行
```sh
数字を入力
5 9 3 1 2 8 4 7 6
1回目；1 5 9 3 2 4 8 6 7
2回目；1 2 5 9 3 4 6 8 7
3回目；1 2 3 5 9 4 6 7 8
4回目；1 2 3 4 5 9 6 7 8
5回目；1 2 3 4 5 6 9 7 8
6回目；1 2 3 4 5 6 7 9 8
7回目；1 2 3 4 5 6 7 8 9
8回目；1 2 3 4 5 6 7 8 9
9回目；1 2 3 4 5 6 7 8 9
```

多分これで合っている、、、はず。
今回は配列の奥から。要は後に入れた数字から順番にソートをした。
そのため、いつもどおりtimesで繰り返すのではなく、downtoを使ってみた。

downtoメソッド
>downto(min) {|n| ... } -> self 
self から min まで 1 ずつ減らしながらブロックを繰り返し実行します。 self < min であれば何もしません。。
[参照：[Ruby 2.7.0 リファレンスマニュアル](https://docs.ruby-lang.org/ja/latest/method/Integer/i/downto.html)]

# 最後に
条件を変えることでいろいろな実装ができそうで、書いていて楽しかった。
配列の要素の入れ替えもRubyならでは？なのかなって感じがしたけどほかの言語わかんないから比べようがなかった

同じ条件で実行早くしたり、コードの簡略化ができそうな気もするので、有識者のみなさん知恵を貸してください。

明日は二分探索を実装します。