OmniAICreator/Qiita-1.07M huggingface dataset:
AWS RDSのログファイルを高速にダウンロードするスクリプト

RDSのインスタンスに保存されているログをダウンロードする方法として、ググると `download_db_log_file_portion` を使う方法がたくさん出てきます。しかし、問題がありましたので、 `downloadCompleteLogFile` というAPIを使うスクリプトを書きました。


# download_db_log_file_portion の問題点：

- awscliだと途中で途切れる（ページネーションしても途切れてしまう）
- APIを直接叩くにも細かく分割が必要で、ダウンロードに時間がかかる
- 文字化けする（日本語の含まれる場合に ? に置き換えられてしまう）

`downloadCompleteLogFile`であればいずれの問題も解消します。


# downloadCompleteLogFileにアクセスするスクリプト

`downloadCompleteLogFile` にアクセスするには自力でSigV4署名する必要があります。IAMユーザまたはIAMロールが必要です。

このPythonスクリプトはダウンロードするcurlコマンドをSigV4署名して作成します。Pythonスクリプト自身はダウンロードを実行しませんので、作成されたcurlコマンドをあとから実行する使い方です。

`~/.aws/config`, `~/.aws/credentials` に適切な権限の設定があることが前提です。

```python
import boto3
from botocore.awsrequest import AWSRequest
import botocore.auth as auth
import urllib.request

import pprint

profile     = "default"
instance_id = "database-1"
region = "ap-northeast-1"

session = boto3.session.Session(profile_name = profile)
credentials = session.get_credentials()
sigv4auth = auth.SigV4Auth(credentials, "rds", region)

rds_client = session.client('rds')
files = rds_client.describe_db_log_files(DBInstanceIdentifier = instance_id)

for file in files["DescribeDBLogFiles"]:
    file_name = file["LogFileName"]

    # ファイル名からダウンロード除外を判定
    if not file_name.startswith("error/"):
        continue
    if file_name == "error/postgres.log":
        continue

    # downloadCompleteLogFileのAPIのURL
    remote_host = "rds." + region + ".amazonaws.com"
    url = "https://" + remote_host + "/v13/downloadCompleteLogFile/" + instance_id + "/" + file_name

    # SigV4署名
    awsreq = AWSRequest(method = "GET", url = url)
    sigv4auth.add_auth(awsreq)

    req = urllib.request.Request(url, headers = {
        "Authorization": awsreq.headers['Authorization'],
        "Host": remote_host,
        "X-Amz-Date": awsreq.context['timestamp'],
       })

    # ダウンロード進捗用のechoコマンド
    echo_cmd = "echo '" + file_name + "' >&2"
    print(echo_cmd)

    # curlコマンド
    header = " ".join(["-H '" + k + ": " + v + "'" for (k, v) in req.headers.items()])
    cmd = "curl " + header + " '" + url + "'"
    print(cmd)
```

このPythonは次のような出力をします。

```
echo 'error/postgresql.log.2020-11-05-23' >&2
curl -H 'Authorization: AWS4-HMAC-SHA256 Credential=AKIAXXXXXXXXXXXXXXXX/20201105/ap-northeast-1/rds/aws4_request, SignedHeaders=host;x-amz-date, Signature=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' -H 'Host: rds.ap-northeast-1.amazonaws.com' -H 'X-amz-date: 20201105T231307Z' 'https://rds.ap-northeast-1.amazonaws.com/v13/downloadCompleteLogFile/database-1/error/postgresql.log.2020-11-05-23'
```

これをBashで実行します。

```console
$ python download-rds-log.py | bash > log.txt
```

curlコマンドを出力しているので、並列実行などに改良することも可能です。改良しなくてもdownload_db_log_file_portionを使うよりはずっと高速です。


# リンク

SigV4署名については以下の記事にも書きました。

- [IAM認証のAWS API GatewayにPythonからSigV4署名してアクセスするには](https://qiita.com/suzuki-navi/items/1ea284c97075f3a34b30)
- [IAM認証のAWS API GatewayにC#からIAMユーザでSigV4署名してアクセスするには](https://qiita.com/suzuki-navi/items/385deb31f36a2a66fac0)
- [IAM認証のAWS API GatewayにC#からIAMロールでSigV4署名してアクセスするには](https://qiita.com/suzuki-navi/items/4bf03406069761b8257f)
【２０点満点】読めるかな？間違えやすいプログラミング用語【珍解答】

## はじめに
こんにちは。Webエンジニアになってはや5ヶ月が経過しました。[yuki](https://twitter.com/yuki82511988)と申します。
プログラミングを勉強し始めた頃に、読めなくてor間違って読んで**恥をかいた**経験があったのでこんな記事を作成してみました。

まったくの余談ですが高校の国語教師をしていました。

## 問題編
以下、自分が間違えたプログラミングやITに関する用語です。
頭の中で読んでみて、先に進んでみましょう。コメントで「こんなのもむずいぞ！」というものがあれば教えてください。

用語の意味は各自調査をお願いします！faultなど、**見かけるけどそれ自体がプログラミング用語とは呼べなさそうなもの**もあるので、ご了承ください。
後、正しいと言っても結局カタカナ読みなので、本当の発音を知りたい方は英語を調べてください。

また、間違いがあればコメントでご指摘お願いします！

### 20問

1. chmod
2. Linux
3. python
4. height
5. nginx
6. async
7. href
8. null
9. prefix
10. none
11. enum
12. lambda
13. Ajax 
14. varchar
15. fault
16. AWS
17. Facades
18. Qiita
19. Vagrant
20. pip

### 解答編

1. シーエイチモッド（諸説あり）
2. リナックス
3. パイソン
4. ハイト
5. エンジンエックス
6. エイシンク
7. エイチレフ
8. ナル
9. プリフィックス
10. ナン
11. イーナム
12. ラムダ
13. エイジャックス
14. ヴァーチャー（諸説あり）
15. フォルト
16. エーダブリューエス
17. ファサード
18. キータ
19. ベイグラント
20. ピップ

### 珍解答（おまけ）
自分で間違って読んでいたものや、他の方が話していて耳にしたものです。

1. チョマド
2. リヌックス
3. フィソン
4. ヘイト
5. エヌジーインクス
6. アシンク
7. フレフ
8. ヌル（別にいいと思いますが…）
9. プレフィックス
10. ノーン
11. エヌム
12. ランバ
13. アジャックス
14. 読めない
15. ファルト
16. アウス
17. ファケイド
18. チータ
19. バグラント  
20. ....

<img width="60"src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/3a9ca719-9d2b-b0d8-5d1b-d60f66262209.png">
【Unity】制限時間が過ぎたらシーンを遷移させる（自分用）

```

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class test_script : MonoBehaviour
{
    private float counttime = 0.0f;//時間をはかる
    public float timeLimit = 30.0f;//制限時間

    void Start()
    {
        
    }

    void Update()
    {
        counttime += Time.deltaTime;//マイフレーム事にかかった時間を足している


        if(counttime > timeLimit)
        {
            SceneManager.LoadScene("");//指定した時間が過ぎたらシーン遷移。("")の中に遷移先のシーンの名前をいれる。
        }

    }
}
```
![“shot” 2020-11-06 14.43.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/688851/ad5f3cc8-aea2-9a8a-04ce-59865f7e3b51.png)

スクリプトを適当なオブジェクトにつけてbuildsettingの中にメインシーンと遷移先のシーンをドラッグドロップで完成。


Time.deltaTimeは最後のフレームを完了するのに要した時間らしい。
それをUpdateの中で足し続けることによって時間を計っている



↓の二つのサイトを参考にした
[時間の測り方](https://xr-hub.com/archives/14465)
[シーン遷移](https://www.sejuku.net/blog/49352)


以上。
[Laravel] テスト実行時にテストデータがDBに残らないようにする方法

laravelでテストを実行したときに、テストデータがDBに残らないようにしたい。
そんな時に便利なのが、LaravelのDatabaseTransactionsトレイトです。

# DatabaseTransactionsの使い方
```ServiceTest.php
use Illuminate\Support\Facades\DB;
use Illuminate\Foundation\Testing\DatabaseTransactions;

class ServiceTest extends \TestCase
{
    use DatabaseTransactions;
    public function setUp():void
    {
      //
```
テストのソースに上記のuse文を3つ追加するだけです。

# DatabaseTransactionsで行われていること
DatabaseTransactionsを利用すると
テストを実行しているあいだだけ有効なトランザクションを作ってくれます。
つまり、テストのsetup時点でbeginTransactionして、テスト終了時にrollbackしてくれます。

## 注意点
autoIncrementのカラムで、自動採番された数字は戻らないです。
例) users.id=1のレコードがrollbackされても、レコードは消えるが、次採番されるidは2になる。

### 参考文献
[データベースのテスト 5.4 Laravel - ReaDouble]
(https://readouble.com/laravel/5.4/ja/database-testing.html)
[LaravelでRefreshDatabaseを使えない場合はどうするべきか](https://qiita.com/aminevsky/items/71e42ffee39c3b77a952)
WindowsでLaravelのphp artisan storage:linkが実行できなかった場合の対処法

## 概要

windowsでVirtualBox上にLaravelのソースをマウントして環境を構築している場合、

```php artisan storage:link```のコマンドでシンボリックリンクを作ろうとしても、権限の問題かプロトコルエラーとなる。

```
ErrorException : symlink(): Protocol error
```

## 解決策その1

コマンドプロンプトを管理者権限で起動し、```php artisan storage:link```を実行する。

## 解決策その2

Windows側でシンボリックリンクを作成する。

コマンドプロンプトを管理者権限で起動して、

```
mklink /D 'Laravelの\public\storageまでのパス' ..\storage\app\public
```

を実行。

## あとがき
ググったらその1の策が出てきますが、自分はそれで解決しませんでした。
Windowsで開発している方々ならではの問題かと思いますので同じような問題に直面した方はお試しください。
【Laravel】orWhere()で任意の値が取れなかった場合に行った対策

## 状況
LaravelのクエリビルダorWhereを使ってコードを書いていた際に、変換されるSQLで任意の値が取れずに苦戦しておりました。
書いていたコードと、実際に実行されていたSQLの主要な部分は以下の通りです。

### コード

```php:Laravel.php
 $Results = IfResult::join('aaa', 'bbb_id', '=', 'ccc.id')
      ->join('table', 'aaa.id', '=', 'bbb_id')
      ->orwhere('sample_column_a',  '>', 0)
      ->orWhere('sample_column_b', '', '')
      // 中略
      ->get();
```

### 実行されていたSQLで問題だった箇所
`where 'sample_column_a' > ? or 'sample_column_b' <> ? and `
where句の後をandまで( )で囲みたかったが、できていないせいで値が取れなかった。

### 修正したコード
orWhereの部分を以下のように修正しました。

```php:Laravel.php
      ->orWhere(
        function ($query) {
          $query->orwhere('sample_column_a', '<>', '')
            ->orwhere('sample_column_b', '>', '0');
        }
      )
```

### 修正されたSQL
`where ('sample_column_a' <> ? or 'sample_column_b' > ?) and`

## 参考
[Laravel5で「.. or ...) and (..」みたいな複雑な条件を書く](https://qiita.com/Hwoa/items/542456b63e51895f9a55)

[Laravel 5.7 データベース：クエリビルダ
](https://readouble.com/laravel/5.7/ja/queries.html)
【v-scroll-lock】モーダル実装時の背景スクロールを制御

備忘録までに。
こちらの記事から引用。
https://www.vuescript.com/prevent-body-scroll/

## インストール

### npm
```
npm install v-scroll-lock --save
```

### yarn
```
yarn add v-scroll-lock
```

### CDN
```main.js
<script src="https://cdn.jsdelivr.net/npm/v-scroll-lock@1.0.1/dist/v-scroll-lock.min.js"></script>
```

## 取り込み
```main.js
import VScrollLock from 'v-scroll-lock'
Vue.use(VScrollLock)
```
```index.html
<template>
  <div class="modal" v-if="open">
    <button @click="closeModal">X</button>
    <div class="modal-content" v-scroll-lock="open">
      <p>Modal Content Here</p>
    </div>
  </div>
</template>
```
```main.js
export default {
  name: 'Modal',
  data() {
    return {
      open: false,
    }
  },
  methods: {
    openModal() {
      this.open = true
    },
    closeModal() {
      this.open = false
    },
  },
}
```

## 概要
`v-scroll-lock`は、インストールされた時点では、`body`全体のスクロールがロックされてしまう。
`data`に、`open: false`を追加。ここの命名は任意。
そうすることによって、通常時（モーダル非表示時）にはスクロールが可能になる。

`methods`に、`openModal`や`closeModal`（命名は任意）を設置し、
`openModal`には`this.open = true`を設置、
これで`v-on:click="openModal"`が呼び出されたときに、背景スクロールは停止。
`body`要素には、`style="overflow: hidden"`が追加されている。

`closeModal`が呼び出されたら、`this.open = false`が発動し、通常時のスクロールは可能となる。
RailsからLaravelのキャッチアップでつまづいたこと、気づいたことのメモ

## はじめに

実務 1 年目の Web エンジニアです。
こちらの記事は、Laravel に関する備忘録と覚えたことのアウトプットです。

こちらの記事はゆるゆるとシリーズ化していきます。
参考図書は三冊、現在二冊目を学習中です。

※非アフィリエイトリンク
[PHPフレームワークLaravel入門](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFLaravel%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798060992/ref=pd_lpo_14_img_0/356-4075068-4162500?_encoding=UTF8&pd_rd_i=4798060992&pd_rd_r=47f16332-e835-4970-8f2b-f110a56c4b3b&pd_rd_w=OZQYD&pd_rd_wg=RaVFt&pf_rd_p=4b55d259-ebf0-4306-905a-7762d1b93740&pf_rd_r=M0YS6Q58QWJBETHZPZB9&psc=1&refRID=M0YS6Q58QWJBETHZPZB9)
[PHPフレームワーク Laravel実践開発](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-Laravel%E5%AE%9F%E8%B7%B5%E9%96%8B%E7%99%BA-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798059072)
[PHPフレームワーク Laravel Webアプリケーション開発](https://www.amazon.co.jp/PHP%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF-Laravel%E5%AE%9F%E8%B7%B5%E9%96%8B%E7%99%BA-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83/dp/4798059072)

もし、Laravel の学習を始めた方がいらしたら一緒に見ていただけると嬉しいです。
ご指摘があればお願いします。

**（元々 Ruby/Rails を使っていたので、同じ方がいたら何か参考になればと・・・）**

今回は、

- ディレクトリ構成に関して
- 名前クラスと use によるクラスのインポート
- Requestクラス
- レイアウトの作成と継承
- おまけの単語メモ

についてメモをしております。

## ディレクトリ構成に関して
忘れがちなディレクトリ構成で重要だと思ったポイントをまとめました。

- bootstrap
  アプリケーションが読み込まれるタイミングで実行される。
- public
  公開されるフォルダ。JS のスタイルシートなどを入れておく。
- storage
  ファイルの保存場所。アプリケーションのプログラムが保存するログなどはここに置かれる。
- app > Http
  Web アプリケーションにアクセスした時の処理をまとめておく場所。

## 名前空間と use によるクラスのインポート
「名前空間」とは難しい日本語だが、**どこにいるか？**というような情報を示す意味合いだと思っている。
`use`に関しては、別のクラスをインポートするために必要な記述である。
Rails の require みたいなものか…？

```php:sample.php
namespace App;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
```

## Requestクラス
クライアントからサーバーへ送る情報がリクエスト、逆がレスポンス。
`use Illuminate\Http\controllers;`で使えるようになる。

```php:sample.php
use Illminate\Http\Request;

function test(Request $request) {
 $request->url();
}
```
※ちなみに、このメソッドの引数にRequestなどを渡すだけで利用できるようになる仕組みを**メソッドインジェクション**という。
依存性の注入。

使えるメソッドは[こちら](https://readouble.com/laravel/5.5/ja/requests.html)。（公式）

## レイアウトの作成と継承
bladeテンプレートを使う場合、@sectionと@yieldという機能を使うことができる。
`@section-@sectionend`で囲んだ部分が@yieldに出力される

なんかvueのコンポーネントと似てることができるなーと感じました。
本より[こちらの記事](https://qiita.com/UncleHoge/items/d48785175deced3a1b90)が参考になりました。


### 単語などtipsメモ
- ヒアドキュメント
PHP の長文テキストなどを記すときに使う。`<<EOF`みたいなやつ。
- シングルアクションコントローラー
アクションが一個だけのコントローラーを作成した場合、routeからもアクション指定せずに、コントローラー名だけで呼び出せる設計。
- 当然Railsと同様コントローラーから変数をviewに渡すことができる。名前もつけられる
```php:sample.php
function index(Request $request) {
 return view("hello.index", ["msg" => $request->msg]);
}
```
$msgという変数で呼び出すことができる。
- HTMLのエスケープ処理
{{!! この中に書いたHTMLタグなどはエスケープされ、テキストとして出力される !!}}

### 参考になった記事
- 依存性に関して
https://qiita.com/harunbu/items/079ea728d2c9cf4f44d5
- クロージャに関して
https://qiita.com/Yametaro/items/7a4521e23520947cc43e
- 全般
https://qiita.com/Masahiro111/items/82677e7cb2d5c1ba8386
- コンポーネント（やっぱりあった）・sectionとかと違ってファイルが違ってもいける
https://qiita.com/taka_no_okapi/items/19bde6089ac1a22822d2

次回はコンポーザあたりからやろうかな…。
「エンジニア」一括りに注意

# はじめに
以前、友人に「エンジニア」と言ってもいろいろあるんだね、知らんかった。
と言われて、
そういえばそう思われがちだよなぁ…自分もそうだったかも。
と思い、ちょっと書いてみました。

# こんな方へ
- エンジニアを目指そうと思っている業界未経験の方
- エンジニアはエンジニアじゃないの…という方

# エンジニア と言えば
何を想像しますか。
未経験の人だったら、よく聞く「SE」や「プログラマー」が多いのではないでしょうか。

ちょっと業界に足を踏み入れた人だと、
「インフラエンジニア」とか
「フロントエンドエンジニア」とか
「バックエンドエンジニア」とか
いろいろあると思います。

もはや、まったく業界を知らない人だと、
「え、エンジニアはエンジニアじゃないの」
ってなると思います。（当初の私）

# 「エンジニア」と一括りにしてはならぬ

もし「先生になりたい」という友達がいたら、「何の先生？」ってみなさん聞くと思います。
そこで、「音楽の先生」ときたら、ピアノを練習する とか クラシックについて知識つける とか出てきて、小学生に教えたいな とかターゲットも見つかっていきます。
そこから、具体的に「小学校の音楽の先生」になるために何をすべきかがはっきりします。

しかし、「んー、なんの先生になろうかな」の場合。
まず先生になろうとしたきっかけや何を教えたいかをはっきりしておかないと、
がむしゃらに勉強しても遠回りしてしまいます。
例えば、「高校体育の先生」と「小学校の音楽の先生」だと、優先すべき勉強内容が違いますよね。

### やってることが全然違うエンジニア

これらは、「エンジニア」も同じだと思っています。
「エンジニア」と言っても、たくさん職種があります。

検索したら、ドドンと出てくるのでここでは紹介はしませんが、、、
以下の記事が参考になるかと思います。

[100日後にエンジニアになるキミ - 1日目 - 目標設定](https://qiita.com/otupy/items/fd41e0f74cf845e336fa)
[未経験だがエンジニアとして活躍したいと思っている方にお勧めするキャリアパス入門](https://qiita.com/mochizuki-shusuke/items/f30bbb93dc18abde02b1)

同じエンジニアでもやってることが全然違うじゃん！ってことが多くあります。

「エンジニア」になってはみたけど合わないかも…という人の場合、「エンジニア」が合わないのではなく、思い描いていた「エンジニアの職種」と、実際にやっていた「エンジニアの職種」が合わなかったということもあります。

### エンジニアの職種を知ってみる

そこで、
「エンジニアになりたい」という人がいたら、「何のエンジニア？(何を作りたい？)」と
問いかけてあげてください。自分だったら自分に問いかけてみてください。

*「ゲームが好きで、ゲームを作ってみたいからゲーム関係のエンジニアになりたい」*
*「おしゃれなWEBサイトを作ってみたい」*
*「交通系や金融など大規模なシステム開発に携わりたい」*

↑は、パッと思いついた例ですが、
「何のエンジニアになりたいか/何を作りたいか」がはっきりしていると、
検索とかしてみると、優先して勉強すべき言語や自分に合っていそうな「エンジニアの職種」が見えてきます。

「作りたいものは特にない」のタイプなら、
作りたいものではなく、働き方からどの「エンジニア」が向いているか選ぶのもありかと思いますが、長続きするかどうかと言われると…別かもしれないです。が、業界に入って作りたいものが出てきたってこともあると思うので、とりあえず業界に足を突っ込むのもいいと思います。

# さいごに
「エンジニア」と言っても本当たくさん職種がありますね…。私が知らない職種もまだまだあると思います。

エンジニアの職種については、検索したらドドンと出てくるのでここでは述べませんが(2回目)
何か作りたいものがある場合、何のエンジニアを目指せばそれが出来るのかを、まずは知っておくことが大事かなと思います。そうすると、次にやらなきゃいけないアクションが見えてきます。

もし、「エンジニア」と一括りに考えていた方がいたら、
一度、自分のなりたい「エンジニアの職種」について考えてみてはいかがでしょうか。
【挿入ソート】PHPでソートと解説を書いてみた

# ご紹介
PHP で挿入ソートを書いてみました。
バブルソートも[こちら](https://qiita.com/yuki82511988/items/77a8e041c390324b3fd4)で解説しています。

挿入ソートって何よ？って方には[コチラ](https://ja.wikipedia.org/wiki/%E6%8C%BF%E5%85%A5%E3%82%BD%E3%83%BC%E3%83%88#:~:text=%E6%8C%BF%E5%85%A5%E3%82%BD%E3%83%BC%E3%83%88%EF%BC%88%E3%82%A4%E3%83%B3%E3%82%B5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%88,%E5%A0%B4%E6%89%80%E3%81%AB%E6%8C%BF%E5%85%A5%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%80%82)
多重代入などすることでコード量をもう少し短く書ける気がします。
解説はコメントに書きました。

是非アドバイスお願いします。

```php
<?php
$numbers = array(1,3,5,4,2,6);
// 挿入ソート

// 出力
var_dump(insertion_sort($numbers));

function insertion_sort($array)
{
    // 配列の要素の数だけ繰り返し処理を行う
    for ($i = 1; $i < count($array); $i++) {
        // 比較する数字【$new_number】とその1個前の数字（比較される数字）の場所を保存する【$old_number_position】を作成
        $new_number = $array[$i];
        $old_number_position = $i - 1;

        // 一番左端に$old_number_positionが行くまで繰り返す
        while ($old_number_position > 0) {
            // 比較する数字が、される数字より小さかった場合、入れ替える
            if ($new_number < $array[$old_number_position]) {
                $temp_number = $array[$old_number_position];
                $array[$old_number_position] = $array[$old_number_position + 1];
                $array[$old_number_position + 1] = $temp_number;
            }
            // 比較される数字を一個左にずらす
            $old_number_position -= 1;
            // ※数字が動く様子を見ることができます。
            print_r($array);
        }
    }
    return $array;
}
```
【バブルソート編】PHPでソートと解説を書いてみた

```php:bubble_sort.php
<?php
$numbers = array(1,3,5,4,2);
// バブルソート

// 出力
var_dump(bubble_sort($numbers));

function bubble_sort($array)
{
  // 配列の要素以下の回数繰り返し処理を行う
    for($i = 0; $i < count($array); $i++)
    {
      // 一列分行うから1個目のfor文の中へ
        for($n = 1; $n < count($array); $n++)
        {
          // 1つ目の要素と、その次の要素を比較して、1つめが大きい場合
            if($array[$n-1] > $array[$n])
            {
              // $temp_numberに小さい方の数字を保存
                $temp_number = $array[$n];
              // 大きかった位置に、正しい小さな数字を挿入
                $array[$n] = $array[$n-1];
              // 大きい方の数字を、本来正しい位置に挿入
                $array[$n-1] = $temp_number;
            }
        }
    }
    return $array;
}
```
slackでオンラインもくもく部屋を簡単に立てる方法

## はじめに
プログラミングスクールを卒業して、現在**物流×IT**の企業でエンジニアをしているyukiと申します。
現在は正社員として勤務しながら、DMMWEBCAMPでメンターをしております。
業務では、Laravel,AngularJS,Railsなどを使っています。

他にも、チームでサービスを開発したり、個人の家庭教師などをしております。
気軽にご連絡ください。どうぞよろしくお願いいたします。

## 記事の対象者
- Googleのサブスクリプションサービス、Google Suiteを使っていない
- slackでGoogle Meetを使ってオンラインもくもく部屋を立てることがある
- または、ツールを問わないため、Google Meetでも別に良い

今回、オンラインもくもく部屋を立てるために使うツールは「Google Meet」を想定しています。

## 早速、方法の説明
早速説明させていただきます。

### Google Calendarの設定
- [Google Calendar](https://calendar.google.com/calendar/)にアクセスし、任意の時刻で予定を作成する
- 予定作成の際に、**Google Meetの会議を設定する**を選択する
- そのURLをコピーしておき、会議を作成する

### slackの設定
- Slackを起動する
- オンラインもくもく部屋を楽に作れるようになりたいワークスペースを開く
- ページ左上のワークスペース名がある場所をクリックし、設定と管理＞以下をカスタマイズ：チャンネル名をクリックする
- Webページが開かれるので、slackbot...という部分をクリックする（下記画像参照）
![スクリーンショット 2020-11-06 14.29.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557847/89575af2-7b25-fdc5-162c-7c1350b075d3.png)


ここは、slackのbotに対し「これを入力したらこれを返信してね」という機能を設定できる場所です。

例えば、「おすすめの朝ごはんは？」とslack上で入力した時に、slackbotが「おにぎりです」と答えてくれます。

この機能を活かします。

- **SlackBotの返信** に先ほどコピーした会議室のURLを貼り付け、**メンバーがこう言ったら**にそれを呼び出す合言葉を入力する

この設定をすれば、設定したワークスペースで合言葉を入力すると、自動的にGoogle Meetが立ち上がります。

## もっと良い方法がきっとある
何個か悩みがあります。一つは、Google Suiteに登録していないと、参加者は毎回主催者にリクエストを送る必要があることです。
また、主催者が先にが抜けるとリクエストを許可できなくなります。
私の調べた限りはGoogle Suiteはお金がかかりそうなので、このような方法をとっています。

もう一つは、slackのコマンドとして登録していないので、合言葉の前後に何か文字があっても、botが誤作動してしまうことです。
例えば

>「おすすめの朝ごはんは？」とslack上で入力した時に、slackbotが「おにぎりです」と答えてくれます。

という設定をした後に、次のような投稿が行われたとします。

>○○さん、そういえばおすすめの朝ごはんは？

何気ない会話ですが、botが反応して「おにぎりです」と答えてしまいます。
ですから、今回設定する合言葉は普段投稿しないようなものがいいですね。

この問題はslack用のbotを自分で作る必要がありそうです。まだ調べきれていないので、ぜひ挑戦してみてください！

現状これで私はできていますが、何か不具合・間違いなどありましたら、いつでもご指摘いただけますと幸いです。
ここまで読んでいただき、ありがとうございました。
【Rails】ajax使用時、「CSRF対策」を意識する。

## 記事の内容
コメント機能(comment)をajaxを使って部分的に遷移させる方法で実装しました。更新機能を実装した際に、つまづいたところを残します。

## 開発環境
Ruby 2.7.2
Rails 6.0.3.4

## 内容
postに紐づく、コメント(comment)の内容(body)を更新する。
コントローラーは、このような感じです。

```ruby:comment_controller.rb
class CommentsController < ApplicationController

  def update
    @comment = current_user.comments.find(params[:id])
    if @comment.update(comment_update_params)
      render json: @comment , status: :ok
    else
      render json: { comment: @comment, errors: { messages: @comment.errors.full_messages } }, status: :bad_request
    end
  end

  private

  def comment_update_params
    params.require(:comment).permit(:body)
  end
end
```

jsのコードはこのような感じです。

```javascript:comment_edit.js
$(function() {
  // 一部抜粋

    $.ajax({
      type: 'PATCH',
      url: '/comments/' + commentId,
      data: {
        comment: {
          body: body
        },
      },
      dataType: 'json',
    }).done(function (data) {

      //成功処理

    }).fail(function () {

      //失敗処理

    });
  })
});
```

コメントの更新が成功すると、成功処理が行われます。
しかし、422エラーが発生したしまいました。Railsのログを確認すると以下のようになっていました。

```
Processing by CommentsController#update as JSON
  Parameters: {"comment"=>{"body"=>"あああ"}, "id"=>"36"}
Can't verify CSRF token authenticity.
Completed 422 Unprocessable Entity in 2ms (ActiveRecord: 0.0ms | Allocations: 834)



ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
```

`Can't verify CSRF token authenticity.`と記載があります。
どうやら、CSRFトークンが付与されていなかったのが原因らしいです。

`application.html.erb`で`csrf_meta_tags`を記載していました。

```ruby:application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title> タイトル </title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
```

CSRFの対応策として記載するものらしいです。詳しくは↓Railsガイドをご確認ください。
[Railsセキュリティガイド](https://railsguides.jp/security.html)

これを踏まえ、CSRFトークンを付与する形で以下のようにコードを追加しました。

```javascript:comment_edit.js
$(function() {
  // 一部抜粋

    $.ajax({
      type: 'PATCH',
      url: '/comments/' + commentId,
      data: {
        comment: {
          body: body
        },
      },
//追記ここから
        headers: {
          'X-CSRF-Token' : $('meta[name="csrf-token"]').attr('content')
        },
//追記ここまで
      dataType: 'json',
    }).done(function (data) {

      //成功処理

    }).fail(function () {

      //失敗処理

    });
  })
});
```

そしたら正常に動きました。


## 所感
PCは正直者です。指示されたものしか受け取りません（笑）

書き方は他にもあると思います。以下のRailsガイドを参考にしてみてもいいかもしれません。
[Railsガイド Ajax CSRFトークン](https://railsguides.jp/working_with_javascript_in_rails.html#ajax%E3%81%AEcsrf%EF%BC%88cross-site-request-forgery%EF%BC%89%E3%83%88%E3%83%BC%E3%82%AF%E3%83%B3)
FactoryBotの[KeyError:Factory not registered: "user"]エラーが発生する一例

半分未解決ですが、ポートフォリオを作っていてこんなやらかしをした・・・という話です。
モデルの単体テストコード実行時にタイトルのエラーが出てしまったわけですが、検索しても同様の事例がなかったので書いてみました。
簡潔に、結論と応急措置に関してのみ記載します。

# 結論：アソシエーションに問題があった(と思われる)
インスタンスはFactoryBotを使用してまとめていましたが、下記の記述があることでエラーが発生していました。
応急措置として、削除したところエラーは消えました。

```spec/factories/contents.rb
association :user
```
FactoryBotのassciationですね。usersテーブルのデータを引っ張りたいために記述していました。
これ自体は別におかしなものではないですが、別のコードの記述に問題があって、これが機能していないということだと思います。
その原因は調査中ですが、これができないとテストができないわけではないため、それは別稿にしたいと思います。

同じエラーが出てしまった時、上記を疑ってみるといいかもしれません。

# 追記
アソシエーションが上手くいかない原因が分かりました。
結論からいうと、spec/factories/user.rbのインスタンスが空っぽだったからです。

```spec/factories/user.rb
FactoryBot.define do
  factory :user do

  end
end

```

何故かもう記述していたとばかり思い込んでいました。
上手くいかないのも当たり前ですね。。。
というわけで、アソシエーション先がそもそもちゃんと書けているかを疑うべきでした。
history履歴をいっぱい持てるようにする

history履歴なくなると結構困る

## bashrcに書く
- `HISTSIZE`をとりあえず増やしまくっておく

```.bashrc
# for setting history length see HISTSIZE and HISTFILESIZE in bash(1)
HISTSIZE=1000000                                                                                                       
HISTFILESIZE=2000000
HISTTIMEFORMAT='%Y/%m/%d %H:%M:%S '
```

## 設定反映

```
source ~/.bashrc
```
[Swift][初心者]]範囲演算子について

#範囲演算子との出会い
最近作りたいアプリがありswiftの勉強を始めたところ、演算子について教材には以下の説明がありました。

+ 算術演算子：+,-,*,/等　(これはよく使うよなぁ)
+ 代入演算子：=　(これも必須でしょ)
+ 比較演算子：==,!=,<,>等　(一番使うレベルかもしれん)
+ 論理演算し：!,&&,||　（javaでもこんな書き方だった気がする）
+ 範囲演算子：...,..<　（！？）

4年間程度仕事してきて様々な言語を経験しましたが、正直一度も使ったことないし、聞いたことなかったので驚きました。 ~~単なる知識不足~~
#範囲演算子の使われ方
swiftではこんな使われ方をするそうです↓

```Swift:sample.swift
var total = 0
for count in 0...5 {
  total += count
}
print(total)
```
名前の通り範囲を示す演算子だそうで、
この場合だと0から5まで足し合わされて表示されます。
調べてみたところswiftではswift3.0からjavaやobjective-cっぽいfor文が書けなくなっていて、` for-in`  で書かないとダメ見たいですね。
[参考記事](https://qiita.com/motokiee/items/4886b603631a7c076f46)

#結論
使えるようにならないとダメじゃん...~~(←範囲演算子)~~
golang の big.Float で誤差なし計算

## はじめに
golang で ETH の四則演算をする場合に、小数点以下の数字が18桁と非常に大きな浮動小数点計算が必用になります。
オーバーフローを意識しないと計算に誤差が出ますので、倍精度浮動小数点型を正しい用法で使用しましょう。

## やってみよう

#### 必用なもの
golangだけ

#### どんな誤差が出る？

1000ETHの予算からETHを減算後に、再加算します。
誤差がなければ、1000ETHに戻るはずです。

```go:error.go
package main

import (
	"fmt"
	"math/big"
	"strings"
)

func main() {
	budget, _ := new(big.Float).SetString("1000")
	amount, _ := new(big.Float).SetString("0.123456789012345678")
	balance := new(big.Float).Sub(budget, amount)
	summary := new(big.Float).SetPrec(128).Add(balance, amount)

	fmt.Printf("budget  = %v\n", formatFloatPrice(budget, 18))
	fmt.Printf("amount  = %v\n\n", formatFloatPrice(amount, 18))

	fmt.Printf("balance = budget - amount = %v\n", formatFloatPrice(balance, 18))
	fmt.Printf("budget = balance + amount = %v\n", formatFloatPrice(summary, 18))
}

func formatFloatPrice(amount *big.Float, decimals int) string {
	str := amount.Text('f', decimals)
	if strings.Contains(str, ".") {
		str = strings.TrimRight(str, "0")
		if strings.HasSuffix(str, ".") {
			str = str + "0"
		}
	}
	return str
}
```

実行すると、1000ETHとなるはずが誤差のせいでうまくいきません。

```text:実行結果
budget  = 1000.0
amount  = 0.123456789012345678

balance = budget - amount = 999.876543210987654309
budget = balance + amount = 999.999999999999999987
```

#### 誤差をなくすには？

魔法のメソッド SetPrec() を使って浮動小数の精度を良くします。
※ ETC20トークンの場合は発行者が桁数を任意に指定できるため、下記の精度でもオーバーフローする可能性があります。

```go:ok.go
package main

import (
	"fmt"
	"math/big"
	"strings"
)

func main() {
	budget, _ := new(big.Float).SetPrec(128).SetString("1000")
	amount, _ := new(big.Float).SetPrec(128).SetString("0.123456789012345678")
	balance := new(big.Float).SetPrec(128).Sub(budget, amount)

	summary := new(big.Float).SetPrec(128).Add(balance, amount)

	fmt.Printf("budget  = %v\n", formatFloatPrice(budget, 18))
	fmt.Printf("amount  = %v\n\n", formatFloatPrice(amount, 18))

	fmt.Printf("balance = budget - amount = %v\n", formatFloatPrice(balance, 18))
	fmt.Printf("budget = balance + amount = %v\n", formatFloatPrice(summary, 18))
}

func formatFloatPrice(amount *big.Float, decimals int) string {
	str := amount.Text('f', decimals)
	if strings.Contains(str, ".") {
		str = strings.TrimRight(str, "0")
		if strings.HasSuffix(str, ".") {
			str = str + "0"
		}
	}
	return str
}
```

無事1000ETHに戻りました！

```text:実行結果
budget  = 1000.0
amount  = 0.123456789012345678

balance = budget - amount = 999.876543210987654322
budget = balance + amount = 1000.0
```
Powershellで英語の月名文字列（完全形・3文字省略形）を数字に変換 

###ログの日付形式に苦しむ
「yyyymmdd」ではなく「Nov  5」なんて出力のログを見て、困る。日が数字1文字の時はスペース2つ入ってるし。

この、英語の月名文字列を数字にサクッと変換したい。
検索すりゃあ、例文なんかサクッと見つかるだろうと思っていたが、ない。

>Three Letters Month Name Change Convert to Number Get-Date Datetime
>英語 月名 短縮 省略 数字に 変換
>Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

…などなど、いろいろ検索した。それっぽいのはあるけど、最適なやつは見つからない。
己の検索力と知識の無さを呪う。

###組み合わせてみた
呪いながら、組み合わせてみたら「こんな感じかな」というのが一応できたので、メモ。

```Powershell
$US = New-Object System.Globalization.CultureInfo("en-US")

# 3文字省略形月名の場合
$MonthName = "Aug"
$NameToNum = [Datetime]::ParseExact($MonthName, "MMM", $US)

# 完全月名の場合
# $MonthName = "August"
# $NameToNum = [Datetime]::ParseExact($MonthName, "MMMMM", $US)

Get-Date $NameToNum -Format "MM"

# 08
```

・・・ニーズないし簡単だから誰も残してくれてないのかな。
・・・「3文字省略形英語月名」の正式名称ってないのかな。

参考）
[文字列を日時型（DateTime）に変換する方法](https://tech.guitarrapc.com/entry/2013/02/09/030226)
[Powershell Get-Date 英語の月名を表示](https://tagook.blogspot.com/2017/01/powershell-get-date.html)
[Converting date time format in PowerShell](https://stackoverflow.com/questions/31808296/converting-date-time-format-in-powershell)
enひかり個人的な問い合わせ内容覚書

[enひかり](https://enhikari.jp/)は基本**電話のみの対応**です。やり取りの中でウェブに載っていないような情報ももらったりしたので、聞いた内容を覚書しておきます。

ちなみに、窓口の人は当たり前かもしれませんが、技術に明るい人が多く、エンジニアにとっては話が通じやすくて、突っ込んだ質問などをしてもちゃんと答えてくれる感じでした。電話だけというのが最初は大丈夫かな｝と思いましたが、つながらないことは今のところないですし、対応もスピーディで、逆に好印象に変わりました。

- IPv6については、「[v6プラス](https://enhikari.jp/v6plus.html)」と「[transix](https://enhikari.jp/transix.html)」という、似たサービスがあるが、オススメは「v6プラス」。どちらも +180円
- 通常v6プラスを契約してIPoE接続になると、自動的にPPPoE接続（IPv4）は使えなくなるが、+500円でIPoEとPPPoEを併用できるサービスもある（ウェブには非掲載なので、電話で問い合わせる）。つまり基本料に 180+500 = 680円 追加になる。
- v6プラスを利用するには手数料2000円がかかり、これは新規申込時に合わせて申し込む場合も、後から申し込む場合もかかってくる（担当者によっては、新規申込時なら手数料かからないと案内があったが、別の担当者から正式に否定された）
- IPoEを使うとVPNに接続できない場合は、上記併用を申込み、下記のような構成にして、VPNに接続するときだけPPPoE接続のネットワークに繋ぐようにするのがオススメとのこと。
    - ONU
    - スイッチングハブ
        - WiFiルーター（IPoE）
        - WiFiルーター（PPPoE）
VScode 行番号の色を変更する方法

#デフォルトの行番号の色、見にくくない？
![git-decorations.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/aaf11463-e605-4367-fbef-652436f4b4b4.png)

**行番号の色、画面を明るくしないと見えないよね？w**

いっつも行番号を確認する時だけ画面を明るくしています。。
それが面倒なので調べてみると、結構簡単にできた！

#設定画面を開いて、行番号の色を変更する
![スクリーンショット 2020-11-06 11.45.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/a0b56698-2e3e-37ad-37bd-dd5cd777c2c5.png)
`Preferences>Settings`を開く


![スクリーンショット 2020-11-06 11.43.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/2f299bfe-dfdf-d3f9-6fcc-f29ab096b9db.png)
コードで開く

![スクリーンショット 2020-11-06 11.43.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/f9904dcf-b3d7-e0b7-689a-e260690127f8.png)
こんな感じでコードを追加すると、行番号が見やすくなりました:grin:

```json
"workbench.colorCustomizations": {
  "editorLineNumber.foreground": "#999999"
}
```

#参考
https://www.it-swarm-ja.tech/ja/themes/vscode行番号の色を変更/944818587/
WordPressのループ処理が複数あってどうすればええねんって話

WordPressでのサイト制作を行っていると、新規のサイト制作もあれば改修案件で人のコードを書き換えることがあります。その際に、投稿のループ処理について自分が普段使うループ処理とは異なるループ処理が書かれており、結局何を使えばいいのかっていうのがよく分からなくなったので、一度整理します。

#そもそもループって

偉大なるCodexでの説明

>「ループ」は、WordPress の投稿を表示するために使われるPHPコードです。このループを使えば、現在のページに表示される各投稿を処理したり、ループタグ内で指定された条件に沿って投稿の形式を整えたりできます。

https://wpdocs.osdn.jp/%E3%83%AB%E3%83%BC%E3%83%97

投稿をwhileループで回して表示させているって考えてもらえばいいかなと思います。

#ループの種類
###1.メインループ
メインループとは、メインクエリから得られた投稿郡をループさせる処理の記述になります。
通常投稿記事をループさせるときに使用。


```index.php
<?php
//記事があればentriesブロック以下を表示
if (have_posts() ) : ?>
<!-- entries -->
<div class="entries">
<?php
//記事数ぶんループ
while ( have_posts() ) :
the_post(); ?>
//ここに記事を投稿
<?php
endwhile;
?>
</div><!-- /entries -->
<?php endif; ?>
```

###2.サブループ(WP_Query)
ここから、メインクエリとは異なる投稿群をループさせる処理になります。
とりあえずサブループでは`WP_Query`を使用すれば間違いないかなって思ってます。ご指摘あれば教えて頂きたい。。

```index.php
<?php
//$argsのプロパティを変えていく
$args = array(
    'post_type' => 'post', 
    'posts_per_page' => -1,
    'no_found_rows' => true,  //ページャーを使う時はfalseに。
 );

$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
  while ($the_query->have_posts()) : $the_query->the_post();
    
  /* ループ内の記述 */

  endwhile;
endif;
wp_reset_postdata();
?>
```
こちらのサイトから拝借。非常にまとまっていて分かりやすい。
https://wemo.tech/160


###3.サブループ（get_posts）

クエリにマッチしたすべてのデータが格納された配列を返す関数になります。
`get_posts関数`は単に情報を取得するだけでグローバル変数には影響を与えないが、後述する`query_posts関数`はグローバル変数の`$wp_query`を使用し、`$post`などの関連する情報も更新される。

`WP_Query`の方が取得できる情報が多いのでこれを使う機会がイマイチ分かりません。
こちらの記事に綺麗にまとまっています。
https://www.m-hand.co.jp/program/4119/

ちなみに、`foreach`が使われている改修案件で初めて`get_posts`の存在を知りました。

```index.php
<ul>
<?php
// get_posts()のパラメータを指定
$args = array(
	// 記事を3件表示
    'posts_per_page' => 3,
    // 記事をランダムで表示
    'orderby' => 'rand'
);
// パラメータに基づいた投稿データの配列を取得
$my_posts = get_posts( $args );

// ループ開始
foreach ( $my_posts as $post ) : 
	// サブループの投稿データをセット
    setup_postdata( $post );
?>
    <li>
		<a href="<?php the_permalink(); ?>">
			<h2><?php the_title(); ?></h2>
			<?php the_content(); ?>
   		</a>
    </li>
<?php
endforeach;
//ループ終了

// メインクエリの投稿データに戻す
wp_reset_postdata(); 
?>
</ul>
```

###４.query_posts()　非推奨
こちらは、メインクエリを変更するためのものです。テーマから読んでしまうと意図しない動作が発生する可能性が高いとのこと。

メインクエリをカスタマイズする際には、`pre_get_posts`を使ってメインクエリ実行前に差し込めるアクションフックがあるので、これを使った方がいいですね。

#まとめ
とりあえずいろいろなループの方法があるのを知っておくことが大切かなと思いました。
自分が実装するときには、テンプレートをつくって毎回使い回す、既存サイトを改修の際に普段使わないループ処理があっても焦らない。これでいきましょう！！
よくつかうLaravel コマンドメモ

マイグレーション

```
php artisan migrate
```

ロールバック

```
php artisan migrate:rollback
```

モデル作成 with migrate ファイル

```
php artisan make:model Board --migration
```

コントローラ作成 with リソース、モデル

```
php artisan make:controller BoardController --resource --model=Board
```

Laravel Adminにモデルを追加

```
php artisan admin:make BoardController --model=App\\Board
```
Railsでajax削除の実装

## はじめに
今回はrailsとjsを使って非同期の削除機能を実装していきます。
素のjsの学習のためにjQueryは使用していませんのでご了承下さい。また、プログラミング初学者のため間違い等ありましたらご指摘の程よろしくお願いします！


##  そもそもajaxって何？
ajaxとは非同期通信とも言われ、画面の遷移を行わずに画面の変更部分のみに変更を加える処理の事です。
これによって無駄なレンダリングをしないのでロード時間も短縮され、ユーザーが快適にサービスを使う事ができます。
ちなみに同期通信は画面全体を再描画するため、例え変更された部分が一部分だとしても画面全体がレンダリングされてしまいます。使っているユーザーからすると少しストレスを感じてしまう可能性があるのです。

## 同期通信と非同期通信の処理の違い
同期通信は削除が行われると指定のコントローラのアクションに移動し、アクション名.html.erbファイルを探します。
それに対し非同期通信は指定のコントローラーのアクションを実行するまでは同じですが、その後、アクション名.js.erbファイルを探しにいきます。これらの処理の流れを意識してこの後の実装をしてみて下さい


## 手順１ remote: trueオプションを追加

```
<li><%= link_to '削除', category_path(category.id), method: :delete, remote: true, class:'category-destroy' %></li>
```
link_toの記述にremote: trueを追加します。
これだけでHTML形式からJS形式でリクエストを送る事ができます。

## 手順２　destroy.js.erbファイルにjsの処理を記述
remote: trueを追加した事でjsファイルを探しにいきます。さらにjs.erbを使う事でjsの記述の中にrubyの文法を埋め込む事ができます。こちらのファイルはあくまでビューファイルとして扱うので対応するviewsフォルダ内に格納して下さい。
querySelector("#category-<%= @category.id %>")で削除したい情報を渡しています。
.remove()で指定の対象を削除しています。
これらの記述でビューで特定の要素を消す事ができます。
ちなみにjsの記述をしなくてもDB上からは削除されていますが、リロードしない限り画面から消えないためjsの記述が必要になります。

app/views/categories/destroy.js.erb

```
(function(){
  document.querySelector("#category-<%= @category.id %>").remove()
})();

```

## 最後に
これで非同期通信による削除機能が完成です！
railsを使っての非同期通信はとても簡単に実装できるので初学者の方も是非使ってみて下さい！
この記事で初学者の助けになれば幸いです。
何か間違えなどあればご指摘お願いします！
Node.jsプログラムがコード3221225477で落ちた際の対処メモ

# 環境
* Windows10
* VSCode V1.50.1
* Node.js V12.0.0

# 現象
Node.jsプログラムをF5デバッグ実行し、ブラウザからアクセスすると、
デバッグコンソールに `Process exited with code 3221225477` が表示され、プログラムが落ちる。

# 対処
Node.jsのバグだった模様。Node.jsのV12系の最新（V12.19.0）にアップデートすることで解消。
※ちなみに「3221225477」はWindowsのアクセス違反に関するクラッシュコードらしいです。

# 参考
https://stackoverflow.com/questions/58756101/npm-err-errno-3221225477-error-in-node-when-making-a-query-using-oracledb
https://github.com/microsoft/vscode/issues/39818
Hugo で つくる website の PDF バージョンをつくる

## 動機
Hugo で documentationを用意しつつ、それを pdf としても読めるようにしたい

## 参考
https://discourse.gohugo.io/t/generate-hugo-website-as-a-pdf/22855/4
Nader_K_Radさんの投稿

## やりたいこと
複数 page を ひとつの pdf として出力

## 方法
guide.pdfというものが出力pdfと想定
一時的に allというcontentを用意して、そこに 全pageをcombineしたhtmlを生成し、それを```wkhtmltopdf```を使って pdf化する。wkhtmltopdfは https://wkhtmltopdf.org/ で手に入れる。

```sh
#!/bin/sh

mkdir content/all
touch content/all/_index.md

hugo --cleanDestinationDir
wkhtmltopdf public/all/index.html --allow public public/downloads/guide.pdf

rm -r public/all
rm -r content/all
```
さて、all/index.htmlはどのようにしてbuild するのか？ これは layoutで定義する。使っている theme の css などを使いつつ、layout定義する場合は、 ```/themes/your_theme/layouts```のなかに```all```というfolderを掘り、そこに```list.html```というfileを用意します。

```html:list.html
<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}} <!-- depends on the theme -->
    <style>
      h1 {page-break-before: always;} <!-- if h1 is only used at the title of the pages, this will be used as page-break in the pdf. -->
    </style>
    <body>
        <div class="container-fluid"> <!-- my theme is based on bootstrap -->
            <div class="row">            
              {{ range .Site.Pages }}
              <div class="main col-12 order-1 col-md-9 col-lg-10 col-xl-10 py-3">
                <h1 id="{{ .RelPermalink }}">{{ .Title }}</h2>
                {{ .Content }}            
                </div>
              {{ end }}
            </div> <!-- /end of row -->
        </div> <!-- /end of container -->
    </body>
</html>
```
これで ```all/index.html``` にすべてのpage (range .Site.Pages) が書き出されるので、それを pdfにしている。
[Azure] App Service の CPU 監視はプランによってメトリックを変えたほうがいい

Azure App Service の CPU 使用状況を監視するためのメトリックには主に二種類あります。

- CPU time
- CPU percentage

これらメトリックの使い分けと確認場所を簡単にまとめました。

本記事では、以下の公式ドキュメントの内容をもとにしています。
https://docs.microsoft.com/ja-jp/azure/app-service/web-sites-monitor#cpu-time-vs-cpu-percentage

## App Service Plan が Free / Shared ⇒ CPU time
Free プランと Shared プランでは使用できる CPU 量の上限があります。
2020 年 11 月時点では、5 分間および 1 日で使用できる CPU 量がクォータによって定義されています。
※ 具体的な上限値は以下をご参照ください。
https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/management/azure-subscription-service-limits#app-service-limits

そのため、これらのプランを使用している際は、CPU time を監視するのがよいでしょう。
**App Service のメトリック**から確認できます。
![2020-11-06_11h07_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423135/bbd93c1e-b744-1f92-b3d2-609a000f4ae6.png)

## App Service Plan が Basic / Standard / Premium ⇒ CPU percentage
これらのプランでは、CPU time による制限はありません。
CPU 使用率 (percentage) を監視するのがよいでしょう。

CPU percentage は、**App Service Plan のメトリック**から確認できます。
App Service には該当のメトリックがないので注意しましょう。
![2020-11-06_11h21_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423135/7f1eaa8f-8757-8677-7709-f49a95c0d30b.png)

また、これらのプランでは CPU percentage に基づいた、インスタンスのオートスケール設定が可能です。
オートスケールの設定方法については下記ドキュメントをご参照ください。
https://docs.microsoft.com/ja-jp/azure/azure-monitor/platform/autoscale-get-started
環境依存文字が含まれるCSVファイルを読み込む際の文字コード設定

CSV取込等行った際、文字コードを「SHIFT-JIS」に設定しているときに、
機種依存文字が文字化けする場合の対処。(Windowsの場合）



機種依存文字とは、、、
①②③④⑤⑥⑦⑧⑨⑩
ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ
髙(はしごだか)



「SHIFT-JIS」ではなく、「windows-31j」を指定してファイル取込


DBでの表示結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617767/bb6d0608-9868-6a6a-2faf-9cbbdb0c2c19.png)
環境依存文字もきれいに出力されました。
【JavaScript】Todoリストを作成

#プログラミング勉強日記
2020年11月5日
JavaScriptでtodoリスト作成の学習をしたので、まとめます。



#出力結果
最終的に表示させたい結果です。
![スクリーンショット 2020-11-06 10.13.48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854121/547bdfa3-55d3-d24b-af44-3356ecbe5e15.jpeg)

#コード
回答コードを掲載します。


```index.html
 <section>
     <h1>やることリスト</h1>
     <ul id="list">

     </ul>
 </section>
```




```script.js

'use strict';

let todo = ['デザインカンプ作成','データ整理','勉強会申し込み', '牛乳買う'];

for(let item of todo ) {
    const li = `<li>${item}</li>`;
    document.getElementById('list').insertAdjacentHTML('beforeend',li);
}

```


#コードの解説

###①use strict宣言を行う
```script.js
'use strict';
```
JavaScript内で`use strict`を宣言すると、`ストリクトモード`になり、厳格なエラーチェックが行えます。


###②変数todoに、配列の形で値を代入する
```script.js
let todo = ['デザインカンプ作成','データ整理','勉強会申し込み', '牛乳買う'];
```
* `let`→変数を定義する宣言
* `todo`→任意の変数名
* ` = `→右辺の値をtodoに代入する。※等しいという意味で使わない！
* `[ ]`→配列の形で値を格納。文字列や数値を格納できる。
* `'デザインカンプ作成','データ整理','勉強会申し込み', '牛乳買う'`→配列の中身


###③for文を書いて、完成
```script.js
for(let item of todo ) {
    const li = `<li>${item}</li>`;
    document.getElementById('list').insertAdjacentHTML('beforeend',li);
}
```
* `for`→繰り返し処理。
* `let item of todo`→定義した変数itemには、繰り返し処理が行われるごとに配列の値が代入される。
* `const li = `→定数名liに値を代入
* `<li>${item}</li>`→テンプレートリテラルで書く
* `document.getElementById('list')`→listというID名を持つ要素を取得する
* `insertAdjacentHTML('beforeend',li)`→取得した\<ul>の最後の子要素の後に\<li>${item}\</li>を追加。 ※今回は元々の子要素がないので、\</ul>の直前を指す


#今回の学び
* for文の扱い方
* insertAdjacentHTMLメソッドの使用方法
* 配列の書き方

#参考資料
* [【JavasScript】use strictとは](https://qiita.com/miri4ech/items/ffcebaf593f5baa1c112)
* [【JavaScript入門】「for – of文」の使い方と間違いやすいポイントを徹底解説！](https://www.sejuku.net/blog/20228)
* [element.insertAdjacentHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML)
* [JavaScript の テンプレートリテラル を極める！](https://qiita.com/kura07/items/c9fa858870ad56dfec12)
Unityメモ

・トランスフォームツールのショートカットキー
一番左　　　　シーンビューの平行移動　　キー「Q」
左から二番目　オブジェクトを移動　　　　キー「W」
左から三番目　オブジェクトを回転　　　　キー「E」
左から四番目　オブジェクトを拡大縮小　　キー「R」
左から五番目　オブジェクトを二次元的に　キー「T」
　　　　　　　とらえた場合の移動、回転
　　　　　　　拡大縮小
一番右　　　　回転、移動、拡大縮小　　　キー「Y」

・シーン再生のショートカットキー
一番左　　　　シーンを再生。もう一度押すと　キー「Ctrl(Command)+P」
　　　　　　　シーンストップ
真ん中　　　　再生を一時停止　　　　　　　　キー「Ctrl(Command)+Shift+P」
一番右　　　　シーンを１フレームだけ進める　キー「Ctrl(Command)+Alt(Option)+P」


・ゲームオブジェクト編集のショートカットキー
Copy         コピー　　　　　　　　　　　　キー「Ctrl(Command)+C」
Paste　　　　貼り付け　　　　　　　　　　　キー「Ctrl(Command)+V」
Rename 　　　名前変更　　　　　　　　　　　ヒエラルキーでダブルクリックでも可
Duplicate　　複製　　　　　　　　　　　　　キー「Ctrl(Command)+D」
Deiete 　　　削除　　　　　　　　　　　　　キー「Delete(Command+BackSpace)」

・親子関係時の重心と向きとショートカットキー
ピボット←→中心　　　　　　キー「Z」
グローバル←→ローカル　　　キー「X」

・矢印の位置
ピボット　・・・　ゲームオブジェクト単体の中心位置
中心　　　・・・　自身と子オブジェクト(孫以下全て含む)の中心位置

・矢印の向き
グローバル　　　・・・　　　現在の回転を0とした場合の向き(選択が切り替わった時の回転を0として扱う)
ローカル　　　　・・・　　　ゲームオブジェクトの回転を考慮した場合の向き

・ローカル座標、グローバル座標(ワールド座標)
ローカル座標　　・・・　　　親から見た相対的な座標(一番上の親からの相対座標ではなく、一つ上の親の相対座標)
グローバル座標(ワールド座標)　　・・・　　親の事を考慮しない座標

・外部ファイル
外部ファイルをプロジェクトウィンドウにドラッグ＆ドロップすればプロジェクトに含めることができる
Albedoの横の四角い部分にプロジェクトウィンドウに入れた絵をドラッグ＆ドロップでテクスチャを張り付ける

・シェーダーとパラメーター
シェーダーとはプログラムの種類
シェーダー側が「こういう種類のパラメータをくれ」と言い、そのパラメータを受け取り、プログラムで計算し物体の見た目を決める

・マテリアルはパラメータ＋シェーダーを持ったもの
マテリアルがシェーダーにパラメータを渡すことによって物体の見え方が変わる

・シェーダーの暗黙的な名前(シェーダーの名前についていたら)　(注)透明なものは皆処理が重い
Unlit　　　・・・　　「光を考慮しない」という意味
Diffuse　　・・・　　「拡散反射」という意味(少しざらざらしたテカテカしてない物体)
Specular   ・・・　　「鏡面反射」という意味(乱反射しない完全な反射を表す)また、反射光を制御するシェーダーであることが多い
Transparent・・・　　「透明な」という意味(処理が非常に重いシェーダーであることが多い)
CutOff     ・・・　　「切り取る」という意味(ある一定値のアルファ値を下回ったところが完全に透明になる)
Emission(Emissive) 　「放射」という意味(自分自身が発光するというシェーダーであることが多い)
Bumped　　 ・・・　　「隆起」という意味(物体を凹ませるシェーダーであることが多い)
Toon　　　 ・・・　　「コミック調の(アニメ風)」という意味(アニメの塗りを表現するために影が段階的になってるシェーダーが多い)

・Rigibodyコンポーネントの追加方法
インスペクターウィンドウで「コンポーネント追加」を押下
検索ウィンドウで「rigidbody」と入力

・当たり判定
Box Colliderというコンポーネントが当たり判定を表す
当たり判定の事をコライダーと言い、○○Colliderという名前は○○という種類の当たり判定を表す
コンポーネントでチェックボックスが存在するやつはチェックを外すと無効にすることができる

・物理演算で計算される重心
「親子関係での物理演算」
Rigidbodyで追加したゲームオブジェクトは「全ての子オブジェクトのコライダー」を考慮した物理挙動をする
重心はすべてのコライダーの真ん中
「親子関係で別々の物理演算を行う」
子オブジェクトにもRigidbodyを追加すればOK

・物理的な素材を変える
マテリアルは見た目だけではなく物体の物理的な材質を設定できる
Railsのfile_fieldで画像クリックでアップロードしてプレビューを差し替える

# 前段
`bootstrap_form`を使ってる場合は、下記のステップが必要です。
`bootstrap_form` を使ってると、このGemがよしなにUIを作成してくれるのですが、今回の実装では逆に邪魔になります。

```erb
<%= f.file_field :image %>
````

![スクリーンショット 2020-11-06 10.34.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37716/7713f9cf-f872-5757-d82d-df0d5b274299.png)

なので、 bootstrapのスタイルが適用されないようにしておきます。

```erb
<%= f.file_field_without_bootstrap :image %>
```
![スクリーンショット 2020-11-06 10.34.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37716/0a0e4ede-8809-eb82-a21c-0c17094e54f2.png)

# 画像クリックでアップロード

```erb
<%= f.label :image do %>
  <%= image_tag('user.png') %>
  <%= f.file_field_without_bootstrap :image, style: 'display:none' %>
<% end %>
```
画像と `file_field` を `label` で囲って、 `file_field` をCSSで非表示にするだけです。
画像の部分をアイコンとかに置き換えればアイコンクリックでアップロードができます。


# 表示されている画像をアップロードした画像に差し替える

JSから要素を取得できるように画像とアップローダーに適当なクラス名を追加。

```erb
<%= f.label :image do %>
  <%= image_tag('user.png', class: 'avatar') %>
  <%= f.file_field_without_bootstrap :image, class: 'uploader', style: 'display:none' %>
<% end %>
```

JavaScriptで選択された画像をbase64にエンコーディングして、元の画像と差し替えます。

```js
window.addEventListener('load', () => {
    const uploader = document.querySelector('.uploader');
    uploader.addEventListener('change', (e) => {
      const file = uploader.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const image = reader.result;
        document.querySelector('.avatar').setAttribute('src', image);
      }
    });
});
```

※見た目の細かい調整は省いてます
※フロントで画像を差し替えただけなので、フォームが送信がされないと画像はサーバーに送信されません
産業用ロボットを活用してパレタイズ・デパレタイズ作業を強化する

包装ラインをアップグレードすると、保険や人件費の削減、生産性の強化など、さまざまな角度から製造工程を改善できます。さらに、ともすると長い間苦労してきた可能性のある現場での応用という問題を解決する手立てになる可能性も。
あなたの下す決定は、今後の生産性に長期的な影響を与えます。考慮すべき要因、そして、手元にある選択肢を把握しましょう。その上で、情報に基づいた決定を下すことができます。

![1600px_COLOURBOX35173208.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857503/daa00820-2884-96a5-ba9a-4a2429182fdd.jpeg)


<h2>産業用パレタイジングロボット選択の際に考慮すべきこと</h2>
事業を行う上で、ロボットには従来型、<b><a href="https://www.universal-robots.com/ja/">ロボット型</a></b>、ハイブリッド型、半自動型、自動型など、さまざまな選択肢があります。低レベル、高レベルの産業用ロボットから選択することもできます。実際に生産ラインに最適な機械というものは、さまざまな要因により左右されます。ここ最近では、産業用ロボットと従来のパレタイザの間で機能とコストに大きな違いが見られるようになりました。
従来のパレタイザは、高速かつ専属のラインに特化しています。一方、以前は、産業用ロボットは、低速で動作する、複数の最小管理単位（SKU）の介在する状況に適していました。しかし今日では、産業用ロボットのパレタイザは高速化でき、同時に、高度な技術により、従来のユニットの柔軟性が向上し、ダウンタイムが短縮されています。
従来の積み上げと、ロボットによる製品の配置を組み合わせた、新しいタイプのハイブリッド型パレタイザもあります。一方で、半自動パレタイザであれば、低速生産ラインを、高い費用対効果で、手動以上のレベルへと引き上げることができます。このように複数の選択肢がありますが、あなたにぴったりなのはどれでしょうか？最適解を導き出すためには、以下にある条件を検討することをお勧めします。

![1600px_COLOURBOX18393220.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857503/643ad814-3924-9dde-3cb7-a33e9f12157d.jpeg)


<h2>扱う製品の種類</h2>
製品タイプについて、こんな点を考えてみましょう。

•製品はどのように梱包していますか？トレイ、ケース、トート、ディスプレイトレイ入りでしょうか？それとも一括収縮包装？
•高価で壊れやすい製品でしょうか？
•何個の在庫管理単位（SKU）をパレタイズしていますか？
•重ねた時の強度に影響を及ぼす可能性のある、包装内部の空間はありますか？それとも製品は密封状態で梱包されていますか？
•軽いですか、それとも重いですか？
•袋を利用している場合には、それはポリエチレンですか、それとも紙ですか？袋のままパレタイズしますか？それを平らにする処理は必要ですか？

![1600px_COLOURBOX35554494.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857503/3c8072d0-64a9-6174-e2d5-1691cef874e7.jpeg)


<h2>ラインの配置</h2>

生産ラインの配置に関して考慮すべき要素は次のとおりです。
•	製品はどのようにパレタイザに送られるでしょうか？
•	オペレーターは複数のラインをパレタイザに送っていますか？
•	作業エリアにはどのくらいの床面積がありますか？

<h3>パレットの要件</h3>
パレットの要件という意味で考慮すべきことは次のとおりです。

•	現在のパレットのパターンはどうですか？どのくらいの頻度で変更されますか？
•	店舗陳列用のパレットは作成していますか？ラベルは？
•	ティアシート、パレットの収縮包装、またはグルードットは必要ですか？
•	積載は混合、それとも、専用？あるいはその両方でしょうか？

<h2>速度の要件</h2> 
生産ラインの効率は、パレタイザの速度と生産に影響されます。互換性のない速度性能や、ダウンタイムの発生は、生産ライン全体に障害を引き起こす可能性があります。スピードに関して、サプライヤーには、あなたのニーズを理解してもらうことが重要です。高レベルの従来のパレタイザは通常、ケース/分でランク付けされ、低レベルのパレタイザは1分あたりのレイヤー（層）の数でランク付けされます。産業用ロボットパレタイザであれば、1時間あたりのサイクル数でランクが決まります。

<h3>予算</h3> 
予算を決めると、選択が進みます。予算が限られている場合は、将来的に予算に余裕ができた際にアップグレードできるよう、柔軟な産業用ロボットを検討すべきでしょう。

![1600px_COLOURBOX35554513.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/857503/20263732-bcbf-2fb3-9c9f-766ff1ceda96.jpeg)


<h2>ソリューションの選択時に考慮すべき要素</h2> 

生産と仕様の目標を設定したら、サプライヤーに要望を伝えることができます。というわけで、パレタイザを選択する際に考慮すべき主な要因のいくつかを見てみましょう。

•	速度

高レベルの従来のパレタイザは、高速ラインで強さを発揮します。低レベルの従来型およびロボット式パレタイザは、ミッドレンジの生産ラインに最適です。一方、半自動パレタイザは、肉体労働からの進歩という意味で、確かな選択肢です。

速度を決定する際に、要件をむやみに引き上げることは避けましょう。というのも、必要のない速度性能のために機械のコストが増加する可能性があります。さらに、気になるロボットがあれば、パフォーマンス実績があるかどうかを確認しましょう。

<h2>考慮すべきその他の要因は次のとおりです。</h2> 

•	メンテナンス
•	予算
•	床面積
•	柔軟性

<h2>まとめ </h2> 
選択肢の種類を理解することは、生産性の長期的な向上を促進することにつながる、情報に基づいた決定を下すことに大いに貢献するはずです。
【webpack-dev-server】Cannot find module 'webpack-cli/bin/config-yargs'【webpack-cli4系】

##記事の対象者

webpack-cli 4.xx.xx系をnpm installして、
Error: Cannot find module 'webpack-cli/bin/config-yargs'と出力されて、どうしようもない方

#結論

```
webpack-cli serve --mode development
```

具体的には、package.json > scriptsにnpm run xxx として使う。
[Error: Cannot find module 'webpack-cli/bin/config-yargs'#2029](https://github.com/webpack/webpack-dev-server/issues/2029#issuecomment-707034614)

[webpack-cli serve -ライブリロードをリリースすることでwebpackを使用します。](https://github.com/webpack/webpack-cli)

###環境

```console
node --version
v12.18.4
```

```package.json
{
  "scripts": {
    "start": "webpack-cli serve --mode development",
  },
  "devDependencies": {
    "babel-loader": "^8.1.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@webpack-cli/init": "^1.0.3",
    "babel-cli": "^6.26.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-env": "^1.7.0",
    "webpack": "^5.4.0"
  }
}
```

```webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public/scripts'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
    }]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    publicPath: '/scripts/'
  }
}
```

###調査の動機
開発したいアプリの要件にJavaScriptがあり、webpackでのバンドルが開発のモダンとのことなので、学習中。
webpack4系の情報が多く、[webpack5系(2020/10/10)](https://webpack.js.org/blog/2020-10-10-webpack-5-release/)での開発環境の情報が多くなかった。
せっかくなので、[ドキュメント](https://webpack.js.org/guides/development/#using-webpack-dev-server)を読みながら開発環境構築の練習をしようと考えた。

###経緯の推測
下記の記事などを確認すると、
[webpack-dev-serverがオワコンになってたのでwebpack-serveに置換えたらwebpack-serveがオワコンになってwebpack-dev-serverが復活した](https://qiita.com/IgnorantCoder/items/74b60ef53c3c1aa4aebc)

①webpack-dev-serverコマンドでライブサーバーを起動できる時代があった。
②webpack-serveコマンドでライブサーバーを起動できる時代があった。
③webpack serveコマンドでライブサーバーを起動できる時代がきている。←イマココ 2020/11/6

webpack serveコマンドと、webpack-dev-serverコマンドはやっていることは一緒みたいだけど、npm runからの起動をしようとすると'webpack-cli/bin/config-yargs'がないよ！というようなエラーがでる。
なんかのバグ対処でconfig-yargsが削除されたらしいけど、詳しいことは探したけどよくわからなかった。なので、削除される前のwebpack-cli 3.3.12(3系の最終？)を使えば、上記①の形でライブサーバーの起動はできる。

以前動作したバージョン↓

```
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
```

公式ドキュメントがなおったみたいだから、今後はwebpack serveが主流になるのではないでしょうか。
https://github.com/webpack/webpack.js.org/pull/4091

###参考
いろいろ。


何か間違っている内容などありましたら、教えてください。
よろしくお願いします。
RAIDの種類の備忘録

#はじめに
LPICを勉強していると時折RAIDに関する内容が出題されるが、理解があやふやなため備忘録として残したい。

#RAIDとは
RAIDとは複数台のHDDを、1つのHDDのように取り扱う技術。
RAIDにはいくつかモードがあり、モードによってディスクの大容量化、高速化、信頼性向上が実現できる。

#RAIDの種類
|RAIDの種類  |説明  |
|---|---|
|RAID0  |複数のディスクにデータを分散して保存する方法で、ストライピングとも呼ばれる。 ディスクの読み書きが高速化できるが、ディスクのうち１台でが壊れたらデータが読み取れなくなる。 |
|RAID1  |あるディスクと全く同じデータをもう一つのディスクに保存する方法で、ミラーリングとも呼ばれる。 ディスクのうち１台が壊れてもデータはなくならない。 |
|RAID5  |データと整合チェック用のデータ（パリティ）を分散配置する。ディスクの読み込みが高速化し、 ディスクのうち１台が壊れてもパリティによってデータを復元できるため安全性が高い。 ただし書き込み時に整合チェック用データの計算をするため少し時間がかかる可能性がある。ディスク３台から利用可能。|
|RAID6  |RAID５と技術は一緒だがRAID6ではディスク４台から利用可能になり、RAID５と比べて１台多く同時に壊れても大丈夫なため、より安全性が高くなっている。ただしその分書き込み速度は遅くなる。  |

参考
https://gihyo.jp/book/2016/978-4-7741-8034-2
https://www.pro.logitec.co.jp/houjin/usernavigation/hddssd/20190809/
https://www.elecom.co.jp/pickup/column/storage_column/00003/