OmniAICreator/Qiita-1.07M huggingface dataset:
【AWS】サブネットとは

#プログラミング勉強日記
2021年5月1日

#サブネットとは
　サブネットはCIDR範囲で分割したネットワークセグメント。簡単に説明すると、ネットワーク内のさらに分割された小さなネットワークのこと。1つの大きなネットワークで管理するのは大変なので、いくつかのネットワークの集まりとして管理する。

　サブネットはVPC内に複数設置することができて、1つのAZを指定して配置される。複数のAZをまたいでサブネットを作ることはできない。

#パブリックサブネットとプライベートサブネット
　パブリックサブネットは、トラフィックがインターネットゲートウェイにルーティングされているサブネット。つまり、インターネットのアクセスができるサブネットのこと。
　プライベートサブネットは、インターネットゲートウェイへのルートがないサブネット。

　パブリックサブネットを作りたい場合は、「まず、パブリックサブネットを作成する！」というやり方絵はなく、プライベートサブネットを作成してそのプライベートサブネットにインターネットゲートウェイへのルートを設定する。(パブリックサブネットに変更するという方法で行う。)
　一般的にはVPCにCIDR`/16`を設定してサブネットに`/24`を設定することが推奨されている。

　プライベートサブネットからインターネットに接続するためにはNATゲートウェイがパブリックサブネットに必要になる。NATゲートウェイをパブリック側に設置して、そこにアクセスしてからインターネットに接続する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/7d9243e0-d88f-7137-4a3c-c6383e81aee3.png)
[Rails] Rspecでテストコードの実装①

#はじめに
本日より何回かに分けて、テストコードに関しての知識をこちらでアウトプットできればと思います
#テストの必要性
絶対に壊れない機械がないように、絶対に不具合のないシステムはありません。しかし、サービスの一時停止や不具合は、サービスへの信頼度を著しく下げ、ユーザ離れを引き起こします。（もっといろいろな問題はありますが）
こうした問題を起こさないように、ちょっとでも防ぐためにテストを行います。例えば、何か新しい機能を追加した時に他の機能との競合を確認しないままリリースしてしまえば、メイン機能が止まる可能性もあるわけです。とはいえ、毎回機能実装のたびに手動で確認するのは非効率でミスが起こりやすいです。そこで活躍するのが、テストコードです。

#テストコードとは。
テストコードとは、動作を確認するためのコードを書くことで、自動で挙動確認するという方法です。こうしたコードをテストコードと言います。Railsにおいては、今回、テストコードの実装にはRspecを使います。

基本的に、境界値分析など様々なテストケースの考え方があります。この記事では、特にわかりやすい正常系と異常系のテスト行います。
###正常系
「ユーザーが開発者の意図する操作を行った時の挙動」をテストするもの
###異常系
「ユーザーが開発者の意図しない操作を行った時の挙動」をテストするもの

#テストの種類
テストは大きく分けて単体テストと結合テストの2つがあります。
###単体テスト
モデルやコントローラーといった機能ごとのテスト。例えば、バリデーションが本当に機能しているかなどを調べます
###結合テスト
ユーザーがブラウザで操作する一連の流れを再現して、問題がないか確かめます。例えば、「ユーザはログイン情報を入力し、送信ボタンを押したら、成功した旨が表示されマイページにと遷移するかどうか」を確認したりします。


#テストコード実装準備①

テストコードの実装には、Rspecというgemを使用します。早速インストールしましょう。
Gemfileに以下を記載しましょう

```Gemfile
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 4.0.0'
end
```
ターミナルでbundle installを忘れないように！！！！

次に、Rspecの設定をします。
以下のように、コマンドを打ってください。

```terminal
rails g rspec:install
```
このコマンドで生成されたファイルのうち.rspecファイルを開き、以下のように記述します。
テストコードの結果をターミナル上に可視化するための記述です。

```.rspec
--require spec_helper
--format documentation
```

#テストコード実装準備
ここからはUserモデルのテストコードを書く準備を行います。

```terminal
 rails g rspec:model user
```

これを行うと、以下のファイルが生成されます。

```spec/models/user_spec.rb
require 'rails_helper'

RSpec.describe User, type: :model do
  pending "add some examples to (or delete) #{__FILE__}"
end

```

これからはこのファイルにテストコードを記述していくこととなります。

ちなみに、一行目のrails_helperはRspecを用いてRailsの機能をテストするときに、共通の設定を書いておくファイルです。各テスト用ファイルでspec/rails_helper.rbを読み込むことで、共通の設定やメソッドを適用します。
rails gコマンドでテストファイルを生成すると、rails_helperを読み込む記述が、自動的追加されます。

#おわりに
今回は一旦概念の理解と準備までを完了しました！
次回は実際にテストコードを実装していきましょう！！！


つづき！！！↓
[Rspecでテストコードの実装②](https://qiita.com/tochisuke221/items/6d09c2a1baf249ce4e75)
golangでsliceを関数に渡すときの挙動

# はじめに
golangでserial通信のread, writeをしたくて、それのテストするために、mockを使って動きを模擬してた。

serialは、これを使った。
[tarm/serial](https://github.com/tarm/serial)

readは、適当にメモリを確保して、`[]byte`で渡して、そこにデータが書き込まれるC言語的な感じの挙動。
サンプルコードはこんな感じ。

```go
package main

import (
        "log"

        "github.com/tarm/serial"
)

func main() {
        c := &serial.Config{Name: "COM45", Baud: 115200}
        s, err := serial.OpenPort(c)
        if err != nil {
                log.Fatal(err)
        }
        
        n, err := s.Write([]byte("test"))
        if err != nil {
                log.Fatal(err)
        }
        
        buf := make([]byte, 128)
        n, err = s.Read(buf)
        if err != nil {
                log.Fatal(err)
        }
        log.Printf("%q", buf[:n])
}
```

どうやってmock作ったらいいんやろうと思って、いろいろ試してた。mock内でもらったsliceが指してるアドレスの値を書き換えたい。sliceを理解しないと前に進めないことがわかったので、調べつつ、手を動かして挙動を確認した。

# sliceを関数にわたすときの挙動
sliceをわたして、1. `=`でまるっと代入する場合と、2. 要素ごとに代入する場合と、3. `copy()`使う場合を確認した。2. 要素ごとに代入する場合と、3. `copy()`を使う場合に関数呼び出す側のsliceも上書きされた。
わからんでもない挙動。sliceは実体はarrayでそれを参照してるから、まるっと代入するときは、あたらしくarrayを用意して参照先をかえちゃってる感じか（アドレスを渡してる感じ）。要素ごとに代入するときと`copy()`を使うときは参照先のarrayに値を入れてる感じか。

https://play.golang.org/p/WFZJaxomXqg

```go
package main

import (
	"fmt"
)

func test1(hoge []int) {
	foo := []int{-1,-2,-3}
	hoge = foo
	fmt.Printf("hoge1: %v\n", hoge)
}

func test2(hoge []int) {
	hoge[0] = -10
	hoge[1] = -20
	hoge[2] = -30
	fmt.Printf("hoge2: %v\n", hoge)
}

func test3(hoge []int) {
	foo := []int{-100,-200,-300}
	copy(hoge, foo)
	fmt.Printf("hoge3: %v\n", hoge)
}

func main() {
	fuga := []int{1, 2, 3}
	fmt.Printf("fuga0: %v\n", fuga)
	test1(fuga)
	fmt.Printf("fuga1: %v\n", fuga)
	test2(fuga)
	fmt.Printf("fuga2: %v\n", fuga)
	test3(fuga)
	fmt.Printf("fuga3: %v\n", fuga)
}
```

```
fuga0: [1 2 3]
hoge1: [-1 -2 -3]
fuga1: [1 2 3]
hoge2: [-10 -20 -30]
fuga2: [-10 -20 -30]
hoge3: [-100 -200 -300]
fuga3: [-100 -200 -300]
```

# おわりに
あんまり、深入りしたくないけど、やりたいことはできるようになった。sliceあなおそろしや。

# 参考
ここが詳しかった。日本語情報ありがたや。
[GolangのSliceを関数の引数に渡した時の挙動 - Carpe Diem](https://christina04.hatenablog.com/entry/2017/09/26/190000)
URLの一部をパラメータとして扱うには

# やりたいこと
* URLの一部をパラメータとして扱いたい
* 仮想的にURLとして扱いたい

こんな感じで
https://blog.tanukey.com/date/2021-04-30
https://blog.tanukey.com/single/2021-04-30/1
URLのうち、
「/date/2021-04-30」「/single/2021-04-30/1」
をパラメータと扱い実態は存在しない（架空のパス）。

# 処理イメージ
1. どのようなリクエストを受けても、URLをそのままに特定のファイル(例:index.php)リダイレクトする。(リダイレクトしても、リクエストのURLは保持されます)
1. リダイレクトされたファイルは、リクエストを解析しDB処理などを行う。
1. 適切なレスポンスを返す。
![o.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443524/e13fcd96-d5ea-00f6-2487-83080fea862b.png)

# 方法
## リクエストを一か所(index.php)に集める
### Apache をお使いの場合
.htaccessファイルを作成し、下記コードを記載する。

``` [.htaccess]
RewriteEngine On　# 設定の書き換えを有効にします。
RewriteBase / # ディレクトリごとの書き換えのベースURLを設定します
RewriteRule ^index\.php$ - [L] # 正規表現で一致した場合、置換せずに処理を停止します。すなわち、index.php の場合は何もしない。
RewriteCond %{REQUEST_FILENAME} !-f # リクエストがファイルでない場合
RewriteCond %{REQUEST_FILENAME} !-d # リクエストがディレクトリでない場合
RewriteRule . /index.php [L] # すべてのリクエストをindex.phpにする
```
### IIS をお使いの場合
web.configファイルを作成し、下記コードを記載する。

``` web.config
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Imported Rule 1" stopProcessing="true">
                    <match url="^(.*)$" ignoreCase="false" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="index.php" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
```

## index.php でリクエストを取得して処理する

``` index.php
<?php
  $request = $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
  # ここで $request を処理して、レスポンスを返す。
?>
```
$request からパラメータを取得し、パラメータをキーにDBから情報を取得するなどの処理をした結果をレスポンスとして返すことができます。

# 参考サイト
* [EDINET 提出書類](https://blog.tanukey.com/)
* [Apache チュートリアル: .htaccess ファイル](https://httpd.apache.org/docs/2.4/ja/howto/htaccess.html)
* [今さら人に聞けない！WordPressで使われているmod_rewriteの説明書](https://html-coding.co.jp/knowhow/tips/wp_modrewrite/)
【初心者でもわかる】CSSで作れる波線は2種類

#どうも7noteです。CSSで作れる波線は2種類だけ

CSSで波線を再現する方法！
それは以下の2種類しかありません！

**・text-decolation: wavy;**
**・波パーツ画像のループ表示**

グラデーションを駆使して作っているものも見ましたが、実用性はあまりないかと。
また、SVGを使う事で波の背景を作る方法はあるようです。

## 1行で書くなら「`text-decolation: wavy;`」

```style.css
p {
  text-decoration: #f00 wavy underline; /* 色,波線,線を引く場所を指定 */
}
```

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/dbe7c29c-fe9e-64d9-1942-d7995b2a5deb.png)

テキストに波線を書く方法です。色や線を引く場所は変えれますが波線の曲がり具合や大きさは変更できません。

## ・自由度を求めるなら「波パーツ画像のループ表示」

このような波のパーツ画像を用意し、繰り返し表示することで波線を再現します。

![parts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d550d1b7-d48d-0247-7d19-30a38f5a233b.png)

```index.html
<p><span class="wave">波下線を引く</span></p>
```

```style.css
.wave {
  padding-bottom: 5px;
  background: url(parts.png) repeat-x bottom left / auto 5px;
}
```

**結果**
![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/522cd163-b70a-7feb-6021-b09b13960f31.png)

インライン要素、もしくはインラインブロック要素に指定しましょう。

## まとめ

現状CSSだけでは上記の方法でしか波線を再現することはできません。
それっぽいものは作れるかもしれませんが実運用を考えると上記の2つの方法のどちらかを選ぶしかないと思います。
ただwavyもあまり美しい感じではないので、実質背景画像を使った方法1択ではないかなと思います。

SVGを使った方法が知りたい方はこちらから。

https://www.webopixel.net/javascript/1024.html



#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
CSSの参照について

##CSSの基礎知識

開始5分で得た知識です。


# 1.インラインスタイル
```html
 <h1 style="font-size: : 50px;">入会申し込み</h1>
 pxは光の粒＝解像度の単位。数字が大きければ大きいほど文字を大きく表示できる
```
* style属性はすべてのタグに使える＝グローバル属性と言われる
* font-sizeはプロパティと呼ばれる
* タグの中に属性を書いていくことを、インラインスタイルシートと言う。

# 2.内部参照
```html
  <style>
    p {
      font-size: 14px;
    }
  </style>
```
* headタグの中に書く
* pはセレクターと言い、セレクターに対してスタイルシートを指定する
* スタイルシートとhtmlを分離して書くことができる

# 3.外部参照
```html
  <link rel="stylesheet" href="style.css">
　rel（リル）＝リレーションのこと　href（エイチレフ）＝シートの名前
```
* headタグの中に書く

```style.css
p {
  font-size: 14px;
}
```



基本的には外部参照がすっきりして良いが、
一部だけ変えたい、このページだけ変えたい　といった場合は
インラインや内部参照を使うことも。

ただし、優先順位がある
**外部＞内部＞インライン**
ので、設定するときは注意が必要な模様。


以上
[VBA]データが入っている最終行を取得する方法（使用頻度：高）

## [0]はじめに
Zitanです。
Excelマクロで業務効率化をしよう！と思ったときに必ずといっていいほど
よく使う構文(?)があります。これからVBAを勉強してみたい、と思う人にはきっとお役立ちできるかと思います。理解して使えるようになると記録マクロから卒業する第一歩になります。

## [1]前提
Excel(2016を使用)を開きます。
Sheet1に下の図のような表を用意します。
<img width="150" alt="Sheet1_社員表" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/2f271b4e-d2bb-65eb-d08a-7bcabe7e6ab1.png">

## [2]これを使う
A列(社員番号)のデータが入っている最終行を取得します。
今回はデータが入っている最終行の行番号は「5」です。
記録マクロだとデータが増えたときに対応できませんが、
次に示す構文(?)を使うと、解決できます。

```ruby:最終行の行番号を取得する
Dim lastRow As Long
lastRow = ThisWorkbook.Worksheets("Sheet1").Cells(Rows.Count, 1).End(xlUp).Row
```

`.Cells(Rows.Count, 1).End(xlUp).Row`
この部分について説明します。
※直前で、操作する対象を長々と指定していますが、これも結構大事です。
オブジェクト変数に入れて短く表現することもできますが、今回は割愛。

<b>さて、分解して説明します。</b>

`.Cells(Rows.Count, 1)`
Cells("行","列")でセル番地の場所を表します。
「Row.Count」によって、操作しているExcelシートの最終行を取得できます。

<b>※あくまでもExcelの最終行です。</b>"<font color="Magenta">データが入っている"最終行ではありません。</font>
Excel2016の最終行は1048576行目です。
「1」は1列目のことを指しています。1列目の最終行ということですね。
※別の記事でご紹介していますが
Enum(列挙型)を使うと列番号を直接入力するというハードコーディングから解放されます。

さて、話を戻しますが、「Row.Count」が返す結果は、
下の画像の場所のセルです。
<img width="100" alt="Sheet1_最終行" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/627919e3-7e93-a125-849d-7a36226c0df4.png">

取得したいのは、<b>データが入っている最終行</b>なので、更にこのコードを追加します。
`.End(xlUp).Row`
「Ctrl＋↑」と同じ操作を行った際の着地行番号

すなわちここの行番号(5)が取得できます。
<img width="100" alt="Sheet1_最終行" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1408638/26c4f947-59a1-9163-647a-e620612c9f01.png">
数値型の変数「lastRow」にデータが入っている最終行の行番号が代入されます。

## [3]注意すべきこと
このコードは便利なのですが記述する場所に注意が必要です。
処理の途中でデータの入っている最終行が変化する場合は、
都度、プログラムコードの中で変数の値を初期化(上書き)する必要があります。
※最初は最終行が５だったけど他の処理を加えたことで、10になることもあるわけで。。。
　その瞬間での最終行の行番号を取っているんだということをお忘れなきよう…。

## [4]使い方と応用
実現したいことによって使い方は変わってくるのですが、
長くなるので別の記事でご紹介しようと思います。

## [5]まとめ
いかがでしょうか。
他のサイト様でも、ググればすぐ出てくる内容なのですが、
ポートフォリオという都合上、応用記事をご紹介する前段として記事にさせていただきました。
GCPのProfessional Data Engineer試験に合格したので情報共有

2021年2月にGCP(Google Cloud Platform)の
Professional Data Engineer試験に合格にしました。
時間が空いてしまいましたが
勉強方法や使用した教材などを共有します。

# 資格について
Professional Data Engineer試験ではGCPを使用した
データ分析、活用などデータにまつわるシステムの構築・運用を主題とした習熟度を認定する資格の１つです。

試験では、以下に関する能力が求められます。

* データを収集、変換処理するためのシステム構築、運用
* データ分析するシステムのシステム構築、運用
* 機械学習モデルの構築運用
* ソリューションの品質保証

## 公式ページ
最初に資格試験の情報について確認していきます。

https://cloud.google.com/certification/data-engineer

## 概要
* 試験時間は2時間あり、設問数は50問です。
    * 合格ラインは非公開です。
* 試験は選択式で、記述や計算問題はありませんでした。
* 試験はリモートかテストセンターから選べます。
    * ただリモートは生体認証を作成したり、すこし敷居が高い印象です。
    * 私は素直にテストセンターで受験してきました。
* 費用は$200。
    * レートによって変動しますが2万円くらいです。
* 推奨されている経験。
    * 業界経験が3年以上、その中でGCP経験が1年以上。

# 私の経験について
* 以前はニフクラやAWSのクラウドサービスを使用してRuby on Railsでサービス開発を行ってきました。
* 直近の2年はAWSをメインにデータ基盤の構築、運用をしています。
* GCPに関してはほぼ未経験から始めています。

# 実践した学習
自分は2ヶ月くらい下記の流れで学習しました。

1. 公式ページの試験概要確認
2. 1度目の模擬試験
3. Coursera(Data Engineering, Big Data and ML on Google Cloud 日本語版)
4. 2度目の模擬試験
5. スケーラブルデータサイエンス データエンジニアのための実践Google Cloud Platform
6. 3度目の模擬試験

## Coursera
本資格に関する書籍などは日本語では、あまり出回っておらず
私はCourseraの「Data Engineering, Big Data and ML on Google Cloud 日本語版」を受講しました。

https://ja.coursera.org/specializations/gcp-data-machine-learning-jp

各コースは「動画」「Qwicklabs」「試験」で構成されており
動画で知識をつけ、Qwicklabsで手を動かし、試験で定着といった流れになっています。

「Qwicklabs」はクラウドサービスをハンズオンで学べるサービスであり
Courseraの料金に含まれており追加でGCPの料金はかかりません。

## 書籍
* スケーラブルデータサイエンス データエンジニアのための実践Google Cloud Platform

スケーラブルデータサイエンス自体は詳しく書かれており
考え方や概念を学ぶには良書です。
大変お世話になりました。

全くの未経験から始めるならGCPの入門書は読んで全体像を見渡した後に
「Google Cloudではじめる実践データエンジニアリング入門」から入り
「スケーラブルデータサイエンス」に繋げることで理解が深まるかもしれません。

内容は重複する部分は出てきてしまいますが
自分は同じ内容でも手を変え品を変えしないと理解できないので
上記の方法で学んだ方が理解が早かったのかもしれません。

## 模擬試験
この試験には公式に準備された模擬試験があります。
ただし、こちらは何度受けても設問は変わらないようです。

そのため受けすぎると覚えてしまうかもしれませんが
得意な分野、不得意な分野を自覚するためによく使用しました。
分からなかったところや不安だった部分はドキュメントを行ったり来たりしました。

https://cloud.google.com/certification/sample-questions/data-engineer

# 試験の感想
一つ一つのサービスに対して知識を問うような問題ではなく
ケーススタディを問われるような問題がほとんどだった印象です。

自分の試験時間の2時間は
1時間程度でまず全体を解き、残り時間で見直しを行いました。

試験は模擬試験より難しく、焦らず解いたつもりですが
見直しの中で設問の意味を取り間違っている部分があり
時間的に余裕のある試験であることに助けられました。

# 最後に
今回はProfessional Data Engineer試験についてまとめさせていただきました。
データエンジニアの分野に興味を持った方々の参考に少しでもなれば幸いです。

次はProfessional Cloud Developer試験の合格を目指して頑張ります。
wslに配置したsqliteファイルをVSCodeを使って表示する

wsl側に置いてあるsqliteファイルがDB Browserで開けなかったので、代わりのviewerがないか調べてみたところ、VSCodeの拡張機能でそれっぽいのがあったので試してみた。

![スクリーンショット 2021-05-01 204316.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/e72f16d4-7d84-3116-8877-558f79b86401.png)


## プラグイン（SQLite）をインストール

インストールするプラグインは「SQLite」。2021/5/1時点で587kもインストールされているので使いやすそうです。

![スクリーンショット 2021-05-01 212333.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/89aa7830-157f-4ae3-51f7-ada5f3b7f46a.png)


コマンドラインから``code --install-extension alexcvzz.vscode-sqlite``を実行してプラグインをインストールする。

```
code --install-extension alexcvzz.vscode-sqlite
```

## databaseに接続

``ctl + shift + p``から[**sql**]と入力し[**SQLite: Open Database**]選択する。

![スクリーンショット 2021-05-01 210148.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/fedf922b-003d-a29f-9a9c-9d7a763b58d4.png)

sqliteファイルへのパスを入力する。

![スクリーンショット 2021-05-01 210252.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/0ec52b66-73da-7f9a-7fec-a3fdb201f4d2.png)


するとエクスプローラーに**SQLITE EXPLORER**が追加される。

![スクリーンショット 2021-05-01 204054.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/3e9a6e88-63ad-5d52-367f-67295df8a6b9.png)


## テーブルを開く

エクスプローラーに表示されている各テーブル名の横にある「▶」をクリックすると、新規タブでテーブルの中身が表示される。

![スクリーンショット 2021-05-01 204727.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/d49ef0e6-a01a-6a0b-7b42-1bbb71991b68.png)


## クエリを発行する

``ctl + shift + p``から[**sql**]と入力し[**SQLite: New Query**]を選択する。新規タブが開かれるので任意のsqlを書く。sqlが用意できたら、``ctl + shift + p``から[**sql**]と入力し[**SQLite: Run Query**]を選択する。すると、新規タブで結果が表示される。

![スクリーンショット 2021-05-01 211335.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/780549/4aa1a245-5562-1420-61a0-c29835850a4e.png)

### 「Run Query」を選択しても何も起こらないとき

「SQLite」というタブがすでに開いているときは、そちらに実行結果が表示されています。
【初学者による】Dockerに初めて触るぞ！　$ docker run hello-world まで

$ docker run hello-world
初めてこのコマンドを打つまでの解説


# Dockerに必要なもの
* Dockerコンテナ
* Dockerイメージ 
* Dockerfile

## Dockerコンテナとは？

実行環境
このDockerコンテナの中でOSとかプログラミング言語とかが動くぞ

##Dockerイメージとは？

Dockerコンテナを起動させるためのベース
アプリのコードやOSの情報などをひとまとめにしたもの

DVDのリッピングなどをしたことがある人は、**.iso** というファイルを見たことがあるのでは。
あれも映像とか音声がひとまとまりになってるでしょ？あれみたいなやつ

##### DockerイメージからDockerコンテナが作られそして起動する
ということを覚えておこう

# Dockerfileとは
Dockerイメージの構成情報を記述するファイル

## $ docker run hello-world は何をしてんのさ
Docker童貞の方々は、導入後とりあえずこのコマンドを打っていることでしょう

```
$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
d1725b59e92d: Pull complete
Digest: sha256:0add3ace90ecb4adbf7777e9aacf18357296e799f81cabc9fde470971e499788
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

なにやらいっぱい表示されていますが、要は
"hello-world"というイメージをもとにコンテナを作成、そして起動したということ。
そもそもこのhello-worldは、
「Hello from Docker! This message shows that your installation appears to be working correctly.」というメッセージを表示するだけのイメージ。
なのでコンテナは自動的に停止するぞ

細かく見ていくと...

```
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
d1725b59e92d: Pull complete
Digest: sha256:0add3ace90ecb4adbf7777e9aacf18357296e799f81cabc9fde470971e499788
Status: Downloaded newer image for hello-world:latest
```
これは、「君のパソコン内にhello-worldというイメージは見当たんない！
だから公式のライブラリ(Docker Hub)からイメージをダウンロードするぞ！そして完了したぞ！」
という意味


$ docker run 〇〇　とするだけで、
Dockerイメージをすでに持ってれば起動してくれるし、
無くても「ねーよそんなもん」と言うだけでなく気を効かせてDocker Hubまで見に行ってくれるスゴイ奴

もちろん持ってもいない、Docker Hubにも存在しないコンテナ名を入れても無駄だぞ

```
$ docker run sonzaishimasenn
Unable to find image 'sonzaishimasenn:latest' locally
docker: Error response from daemon: pull access denied for sonzaishimasenn, repository does not exist or may require 'docker login': denied: requested access to the resource is denied.
See 'docker run --help'.
```
Pythonのインストールやバージョンアップのまとめ

Pythonのバージョン確認やアップデート方法をメモ。

#### pythonバージョン確認
``` python --version ```

#### brewバージョン確認
pyenvをインストールするのにHomebrewを使うのでインストール状況の確認をしておく。

``` brew -v ```

#### pyenvのインストール
``` brew install pyenv ```

#### pyenvのバージョン確認
``` pyenv -v ```

#### pyenv の設定（.bash_profile の設定変更）

``` echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile ```
``` echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile ```
``` echo 'eval "$(pyenv init -)"' >> ~/.bash_profile ```

#### pyenvの設定確認
``` cat ~/.bash_profile ```

#### インストール可能な Python のバージョンを確認
``` pyenv install --list ```

#### ver.x.x.x をインストール
``` pyenv install x.x.x ```
``` pyenv versions ```

#### global（* マーク）が system のままなので global を 3.9.4 に変更
``` pyenv global 3.9.4 ```
``` pyenv versions ```

#### 変更されていることを確認してから反映
``` source ~/.bash_profile ```

#### 最後にバージョンを確認
``` python -V ```
変数にしっかり名前をつけよう (今日のPython Day1)

##0. はじめに
　毎日1問、Pythonの問題を出題します。出題範囲は特に定めていませんがはじめの1ヶ月くらいは『入門Python3　第2版』の第1～11章までのことが分かれば解ける問題にしたいと思います。

##1. 問題
半径5の円の面積を求めなさい。ただし円周率は3.14とします。

##2. 解答

```python
r = 5
s = r * r * 3.14
print(s)

# ->78.5
``` 

##3. 解説
　円の面積の求め方覚えていましたか？(小６で習っているらしいです) 冗談は置いておいてきちんと78.5と出力されましたか。今回伝えたかったことは「義務教育って案外難しい」ということではなく、変数をきちんと用いようということ、そして分かりやすい変数を使おうということです。

```python
print(5 * 5 * 3.14)
```

　もちろん上記のようなコードでも間違えではありません。しかし実は半径が10だったり今度は半径が別の円の面積を求めたくなるかもしれません。そんなとき、上記のようなコードだと修正する箇所が２箇所出てきてしまいます。なのでr = 5と変数を用いましょう。
　また変数だからx, y, zを使うというのも間違えではありません。しかしxやyだと何を指しているか分かりません。それよりも半径を表す英単語radiusを省略したrを変数にした方が分かりやすくなります。

##4. まとめ
・変数を用いよう。
・分かりやすい変数名にしよう。

##5. おまけトーク
初回だからprint("Hello World")ではなかったですね。
Controllerの作成(Laravelでウェブアプリを作ろう⑤)

##Controller(コントローラー)
ユーザーがアクセスしたアドレスをルーティングが割り振り、実際に実行すべき処理を実行します。その実行すべき処理をコントローラーに記載します。
ルーティングについて不明な方は[こちら](https://qiita.com/kunrenyouAcount/items/90f612399ba402a0238e)

###Controllerの作成
Controllerの作成は手動でも行えますが、コマンドで実行したほうが間違いがなく確実です。

```terminal:Controllerの作成
php artisan make:controller モデル名Controller
```

コマンドを実行すると``app>Http>Controllers``にファイルが生成されます。
単純な全件取得や削除処理など、モデルに処理を依頼するまでもない場合Controllerから直接データベースにアクセスすることが可能です。
その場合、以下のように実装が可能です

```php:UserController
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use \App\Models\User;

class UserController extends Controller
{   

    //全件取得します
    public function getAll(){
        return User::all();
    }

    //1件取得します
    public function getOne($userId){
        return User::find($userId);
    }

    //新規に作成します。
    public function create(Request $request){
        $newUser = new User;
        $form = $request->all();
        $newUser -> fill($form) -> save();
        //登録したidを返却します
        return $newUser->id;
    }

    //名前を変更します。処理一緒？
    public function changeName($userId){
        $newUser = new User;
        $form = $request->all();
        $newUser -> fill($form) -> save();
        //登録したidを返却します
        return $newUser->id;
    }

    //削除します。
    public function delete($userId){
        User::delete($userId);
    }   
}
```

##Routesの作成
routesというのはURIとコントローラー内のメソッドの紐付けのことで、これを行うことにより様々な処理ができるようになります。
上記で作成したように手動でコントローラーの中身を作成することもできれば、下記のように記述し、簡単に実装することもできます。

```php:あまり使わない方がいいかも？
Route::resouce
```

ただし、この方法で実装した場合には必要のないURIを作成してしまったり、逆に必要なURIが足りない場合に追加したりすると、何があるのか分かりにくくなることがあります。(「更新処理と全件取得は実装しない」「名前の更新とパスワードの更新の処理を分けたい」など)
そのため、少し作業は多くなりますが最初から自動実装の機能を使わずに実装した方が結果的に見やすくなることが多いです。
``routes>api.php``の内容を以下に書き換える

```php:api.php
Route::group(['middleware' => ['api']], function(){
    //users
    //全件取得します
    Route::get('users', 'UserController@getAll');
    
    //1件取得
    Route::get('users/{userId}', 'UserController@getOne');
    
    //新規作成
    Route::post('users/', 'UserController@create');
    
    //名前の更新
    Route::put('users/{userId}', 'UserController@changeName');

    //削除
    Route::delete('users/{userId}', 'UserController@delete');
});
```

###エラーが出る場合
ただし、このまま実装するとエラーになります。(Laravelのバージョンによってはエラーにならないかも)
以下の操作を追加してください
``app/Providers/RouteServiceProvider.php``を開き、下記の一文のコメントを解除してください。(command+/)

```php:RouteServiceProvider.php
//protected $namespace = 'App\\Http\\Controllers';
```

この一文がないとControllerが正しく動作しないため、エラーになるようです。
名前空間の指定がされていないとか、、、、
JS~反復メソッドを使った処理~

#概要
配列には、配列のすべての要素に対して処理を行うメソッドがあります。
配列のすべての要素に対して行うメソッドには3つあります。

```index.js
.forEach(f)
.map(f)
.filter()
```
これらの反復メソッドは、アロー関数で表されます。

#アロー関数とは
関数は、名前を付けて使用するとしてきました。しかし、関数は名前を付けずに使用することもできます。しかし、名前のない関数は呼び出すことができません。そこで、使用するためにオブジェクトのプロパティに入れる、関数の引数にする、すぐにその場で使用する。という方法があります。

```
1、オブジェクトのプロパティに入れる▶メソッド
2、関数の引数にする▶コールバック関数
３，その場で使う▶即時関数
```
アロー関数は、多くの場合関数の引数に設定するコールバック関数として使います。

#コールバック関数
引数に、要素、位置、配列そのものを取ります。コールバック関数に渡される値はメソッド実行時の値です。コールバック関数が呼ばれるのは、値が代入済みの要素です。


#forEach(f)

配列の各要素をコールバック関数fで処理します。
値を代入していない値は実行されません。

```index.js
const fruits = ["りんご","ばなな","いちご","メロン"];

fruits.forEach((fruit,index) =>{
  console.log(`${index}個：${fruit}`);
});
//0個：りんご
//1個：ばなな
//2個：いちご
//3個：メロン
```

#.map(f)
配列の各要素をコールバック関数fで処理して、関数の戻り値から新しい配列を作って返します。数値から作った文字列の配列を作ります。

```index.js
const num = [1,2,3,4,5,6];
    
const num2 = num.map(x => `${x}番目`);
    
console.log(num2);

//["1番目", "2番目", "3番目", "4番目", "5番目", "6番目"]
```
*アロー関数は、引数が1つの場合は()を省略することができ、処理が1つの場合は{}も省略することができます。

#.filter(f)

配列の各要素をコールバック関数fで処理して、trueとみなす値を返した要素のみの新しい配列を作って返します。

```index.js
const num2 = num.filter(x =>{
  if (x % 2 === 0) {
    return true;
  } else {
    return false;
  }
});

console.log(num2);
//[2, 4, 6] 
```
*細かく記述すると上記の様な記述になります。しかしif文は省略することができます。そして、アロー関数では処理が1行のみの場合、{}とreturnを省略することができます。その場合は、処理結果がそのまま戻り値になります。

```index.js
const num2 = num.filter(x =>x % 2 === 0); 

console.log(num2);
//[2, 4, 6]
```

#メソッドチェーンの使用(番外編)

メソッドチェーンとは、あるオブジェクトに対してメソッドを.（ドット）で連結して繋げていくことです。
前のメソッドで返ってきた値を次に繋げたメソッドが受け取って処理していきます。

```index.js
[400,533,632,333]
.map((x,i) => ({i: i, n: x})) //位置と値を記録したオブジェクトの作成
.filter(x => x.n % 2 === 0) //偶数の要素のみを抜き出す
.forEach(x => console.log(`${x.i}番目${x.n}`)); //文字列にして出力
```
[JS] Fetch APIでFormDataをPOSTするときにContent-Typeを指定しないようにしよう。

(久しぶりに[Swift](https://Swift.org/)以外の記事…)

# はじめに

結論はタイトルの通り: 「Fetch APIで`FormData`を`POST`するときにContent-Typeを指定しないようにしよう。」
その理由は…？


# Content-Typeの指定あり/なしで比較

次のコードを実行してみてください。Content-typeを`multipart/form-data`に設定しています。

```JavaScript:post.js
const formData = new FormData();
formData.append('name', 'value');
const request = new Request('/do-something', {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data',
  },
  body: formData,
});
const response = fetch(request);
```

そうすると次のようなリクエストが送られます(例: Safariの場合; 一部のヘッダは省略)。

```http:Content-Type指定あり
POST /do-something HTTP/1.1
Accept: */*
Content-Type: multipart/form-data
Content-Length: 140
Host: example.com
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

------WebKitFormBoundaryHwUCy8Y0kR36DASN
Content-Disposition: form-data; name="name"

value
------WebKitFormBoundaryHwUCy8Y0kR36DASN--
```

これの何が問題なのでしょう？
既にお気づきの方もいらっしゃるかとは思いますが、次は前出のコードの`'Content-Type': 'multipart/form-data',`をコメントアウトして実行してみてください。その場合のリクエストは次のようになります。

```http:Content-Type指定なし
POST /do-something HTTP/1.1
Accept: */*
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryRAycGNoAYaQ0xKA0
Content-Length: 140
Host: example.com
Accept-Encoding: gzip, deflate, br
Connection: keep-alive

------WebKitFormBoundaryRAycGNoAYaQ0xKA0
Content-Disposition: form-data; name="name"

value
------WebKitFormBoundaryRAycGNoAYaQ0xKA0--
```

さて、Content-Typeを指定する場合と指定しない場合のHTTPリクエストの違いが見えましたか？

Content-Typeを指定しない場合、`Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryRAycGNoAYaQ0xKA0`のようにクライアントが適切なContent-Typeを設定します。そして大切なのは、`FormData`を`POST`するときにはContent-Typeのパラメータに"boundary"を含めなければいけないということです[^boundary]。

[^boundary]: "boundary"は基本的にクライアントがランダムな文字列を含めることが一般的です(実際Safariもリクエストごとに文字列が異なる)

しかし、JavaScriptで`Request`を生成する際にContent-Typeを指定してしまうと、適切なboundaryを指定することができません。すると、サーバ側でmultipartの境界を判別できずにデータの受け取りに失敗することになります。…リクエストボディの1行目をみればboundaryは一目瞭然じゃないかって？もしかしたら「優しいプログラム」は1行目をみてboundaryを判断することがあるかもしれません。しかし、サーバ側のすべてのプログラムがそのように「優しい」ことを期待してはいけません。サーバ側のプログラムを書く人間からすると、リクエストのContent-Typeにboundaryが指定されていない場合に1行目の文字列からそれが勝手にboundaryと判断することはデータを誤って解釈することになりかねず(入れ子になったmultipartとか…実は別のデータだったとか…)、基本的にはboundaryの指定がなければエラーとするでしょう。


# もう一度結論

**Fetch APIで`FormData`を`POST`するときにContent-Typeを指定しないようにしよう。**
HTML最初に書くこと


**HTMLの基本**
---

忘れそうな知識の置き場です〜
めちゃくちゃ基本
プログラミングの勉強を開始して15分で得た知識です。
（厳密に言うとまだプログラミングでもない）



---
# 1.inputタグ 
* 綴じタグなし
* name属性必須（自由に命名）
* type属性は必須ではない（デフォルトでtextになる）
* value属性は初期値を表示できる


# 2.buttonタグ 
* inputタグでも作れるが古い記法なので、buttonの方が良い


# 3.決まり文句
```html
<!DOCTYPE html> 　→これはhtmlだ！という宣言 
<html>　→html書くよ〜
<head>　→色々と設定していくよ〜
  <meta charset="UTF-8">
　 →charset＝文字コード　日本語コードの１つであるUTF−8で設定
　　近年ではUTF-8しか使われない、他のコードになると文字化けする
  <meta name="viewport" content="width=device-width">
　 →スマホ幅viewportを端末幅に合わせるwidth=device-width設定
　　昔はここで幅を設定していたが、今はメディアクエリで設定するので
　　ここの記述はこの形で決まり文句化している
  <title>入会申し込み</title>
　　→自由にタイトルつけよう（WEBでタブに表示されるよ）
</head>　→設定終わり！
<body>　→htmlの中身書いてこ〜！
　
</body>　→中身ここまで！
</html>　→html書き終わりました！
```

---

ふぅ。ひとまずhtmlはこんなもんか。

せっかち関西人ですので、すでにやきもきしていますが、
丑年だけに1歩ずつ着実にいきたいと思います。

以上
CloudFrontとは

##概要
**AWS版のキャッシュサーバー**でユーザーはEC2に直接データを取得しに行かなくても、仲介するCloudFrontにEC2などからコピーされたデータを取りに行くため、Webページの表示が早くなる。(静的及び動的な Web コンテンツの配信を高速化するサービス。)
EC2やS3といったサービスはデータを渡す処理が減り、負荷の軽減になるといったメリットがある。
サービス開始後、データの配信元を指定すると世界中のエッジロケーションにデータがコピーされる。

###基本動作
①オリジンサーバーにオブジェクト格納 
②クライアントからの初回アクセス時に、最も地理的に近いエッジサーバーのキャッシュを参照しにいき、キャッシュがなければ、オリジンサーバーから該当コンテンツを取得してキャッシュする流れです

![CloudFront講座_1.005.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/8b4fb515-5f95-b7c5-43b8-0539de5b4d75.jpeg)

※CDN・・・コンテンツデリバリーネットワークという意味
※AWS WAF・・・ウェブアプリケーションファイアーウォール(サイバー攻撃からシステムを守る仕組み)

https://aws.amazon.com/jp/cloudfront/?nc=sn&loc=0

##用語

![CloudFront講座_1.007.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/7e0ae25f-01fa-13b2-7e16-6cd0e504467a.jpeg)

Viewer・・・アクセスしてくる人
Origin・・・コンテンツの配信元(EC2,S3,ELBなど設定できる)

※TTL・・・Originに最新のデータがあるか何秒置きに確認しますかという秒数の設定

##設計ポイント

![CloudFront講座_1.008.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/207512/04f9c7c6-0412-8ef2-7f29-c307fda9fe54.jpeg)

レポート機能が備わっており、設定後に少しずつ調節していく運用がおすすめ

##
・CloudFrontを利用する上で、配信先が多数ある場合の利用料金の削減に有効な方法
→エッジロケーションにあるファイル圧縮機能を使用する

オリジンからファイルを取得するときに、CloudFrontは各エッジロケーションでファイルを圧縮します。コンテンツを圧縮するように CloudFront を設定すると、**既にエッジロケーションにあるファイルは圧縮しません**。
CloudFrontのデータ転送コストは**供給されたデータの総量**に基づきます。

##参考
この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com
AHKをスタートアップに登録する

AHKをコンパイルして作成したexeファイルをPC起動時に自動的に起動できるようにできないか調べてみたら簡単に見つかった

https://pc-karuma.net/windows-10-app-startup/#shellstartup

ここから行き着くフォルダパスはこれ
C:\Users\ユーザー名\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

ここにAHKのショートカットを放り込めばいいだけ

## スタートアップメニューのフォルダを開くコード
各ユーザにユーザー名をいちいち入力してもらうのも面倒なのでvbsコードにまとめた
とりあえずこれを実行すればスタートアップフォルダが開く

さすがにこのフォルダにショートカットをコピーして持ってくるとかはいささか乱暴なのでパス

``` vb:GetUserName.vbs
'ユーザー名を取得する
Dim x
Set x = WScript.CreateObject("WScript.Network")
'WScript.Echo "ユーザ名：" & x.UserName		'ユーザー名をポップアップ表示


'パスをセット
Dim Path
Path = "C:\Users\" & x.UserName & "\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup"

Dim objFolder

'WshShellのオブジェクトを作成する
Set objFolder = WScript.CreateObject ("Shell.Application")

'Exploreメソッドの引数にパスを指定する
objFolder.Explore Path

Set objFolder = Nothing
```
東証上場の全銘柄の株価（日足、分足）を取得して分析してみた

# はじめに
突然ですが、2021年4月から株式投資（デイトレード）を始めました。その中で「この銘柄は初めに（株価が）上がれば、陽線になることが多いなぁ」「この銘柄は一度（株価を）下げて利確をこなしてから（株価が）上がることが多いなぁ」と思うことがありました。もしも「一日の初めの5分足が陽線ならば、その日の日足も必ず陽線になる」銘柄があれば、何も考えずに9:05頃にエントリーするだけで利益出せそうですよね！

# ということで調べてみた
Yahoo（米国）が株価取得のためのAPIを提供しているようでしたので、そちらを使い日足、分足（5分足）のデータを取得してみました。

## APIの使い方
以下の通りです。簡単ですね！このURLにアクセスするとJSONが返されます。

```Python
RANGE = '60d' # 何日間のデータを取得するか
DAY_INTERVAL = '1d' # これを'5m'にすれば5分足のデータを取得できる
ticker = '2413.T' # 調べたい銘柄コード

response_data = requests.get('https://query1.finance.yahoo.com/v7/finance/chart/' \
                              + ticker + '?range=' + RANGE + '&interval=' + DAY_INTERVAL + '&indicators=quote&includeTimestamps=true')
```

1銘柄のデータを取得するだけあればこれでいいのですが、複数銘柄のデータを取得しようとするとこの処理を繰り返すことになり、途中でサーバーからエラーのレスポンスが返ってきてしまいました。そこで次の銘柄のデータを取得するまで次のようにして5秒スリープすることにしエラー回避しました。

```Python
for row in df.itertuples():
  analyzer(row) # データ取得＆分析処理
  time.sleep(5)
```

## 分析処理全体
GitHubに公開していますので[こちら](https://github.com/shoji9x9/Analyze-Daily-and-Minute-Bar)をご確認下さい。

## 分析結果
2/3～4/30の60日間の東証上場の全銘柄（4,000社以上！）を対象に分析したところ、次の銘柄は初めの分足とその日の日足の型（陽線/陰線）の一致率が高いことがわかりました（一部抜粋）。反対に日足がその日の初めの分足と反対方向にいつも行くような天邪鬼な銘柄はなかったです。全結果はGitHubに公開しています。

|銘柄コード|会社名|一致率|
|---|---|---|
|8628.T|松井証券|85.0%|
|4452.T|花王|80.0%|
|4088.T|エア・ウォーター|78.3%|
|4502.T|武田薬品工業|78.3%|
|6902.T|デンソー|78.3%|

# 株のブログ始めました
[株って美味しいんですか？](https://stock-begginer.hatenablog.com/)を始めてみました。興味のある方はこちらも読んでみて下さい。

# 今回参考にしたサイト
- https://note.com/aiduudia/n/na9ea4f90e255
Learn Python In Seminar〜欠損値〜

# 概要

読み込んだデータの欠損値を処理する方法
他にも「[Learn Python In Seminar](https://qiita.com/k8m/items/4952894a80c1833e5501)」のシリーズとして書いているので、よければご覧ください！

# 実装

## データの種類

1. **明確な欠損値**：「スペース」や「NaN」
1. **曖昧な欠損値**：「?」や「-」、本来のデータとは性質が違う値

1の「**明確な欠損値**」はpandasで自動認識ができるが、**曖昧な欠損値**は自動認識できない。

## Pandasをインポート

```
import pandas as pd
```

## 確認

Pandasライブラリのisnull関数で欠損値を確認

```
# データの要約
df.info()

# 欠損値はTrue、欠損値以外はFalse
DataFrame.isnull()

# sum関数を加えることで、「どのカラム」に「どれだけ」の欠損値があるか確認可能
DataFrame.isnull().sum()

# 欠損値を含むサンプルを抽出
DataFrame[DataFrame.isnull().any(axis=1)]
```

## 処理

### 削除する場合

欠損値が入っている場合は行自体が欠損値となるため、欠損値の行を削除

```
DataFrame.dropna()
```

### 補完する場合

補完する場合は数的データは平均値、質的データは最頻値で置き換えることが多い

```
# シリーズ名A内の欠損値を、対応するシリーズBの値に変換
# シリーズAに直接上書き保存
DataFrame[シリーズ名A].fillna(シリーズ名B, inplace=True)

# 確認
DataFrame.loc[行（インデックス）,列（カラム]
```
[Vue.js]Vue.jsをインストール

## はじめに
Vue.js初心者です。Vue.jsをインストールしたのでメモ
下記の記事を参考にさせていただいています。

https://qiita.com/watataku8911/items/26f2ce546fcd562e4b46

## Vue.jsのインストール
今回はnpmを使ってインストールしていきます。
まずnodeとnpmが入っているか確認します。
`node -v`と`npm -v`を実行してみてください
入っていない場合はインストールを行なってください


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

```
$ vue -V
2.9.6
```

```
$ vue init webpack test
$ cd test
$ npm run dev
Your application is running here: http://localhost:8080
```

`localhost:8080`にアクセスしてみてくださいVueの初期ページが表示されていると思います。

以上です。
テーブルを作成する際の制約について

最近SQLの学習をしているのですが、テーブル設計に関する項目を学習したので、テーブル作成時に使用する、制約についてまとめておきたいと思います。

## そもそもなぜ、制約をかけるのか
データベースはというものは非常に重要で、簡単書き換えられてはいけません。
なので、あえて制約をかけ、予期しない値を格納できないようにすることで、人為的ミスによるデータ破壊の可能性を減らすことができます。


### NOT NULL 制約
NOT NULL制約はが設定された列にはNULLは格納されません。
NOT NULL制約が設定された列に対してINSERTしようとするとエラーが発生し、処理が失敗します。
NOT NULL制約はDEFAULT指定と組み合わせて利用されることが多い。

### UNIQUE 制約
ある列の内容が決して重複しない場合はUNIQUE制約を設定します。
例えば、カテゴリーなどはは同じものがデータとして登録されることがないのでUNIQUE制約がかけられます。
また、NULLが格納された行が複数存在することは許容されています。

### CHECK制約
ある列に格納される値が妥当であるかを細かく判定したい場合は、CHECK制約を設定します。
CHECKの後ろのカッコ内に記述した条件式が真となるような値だけが格納できます。

### 主キー制約
主キーとは...その列の値を指定すれば、どの一行か完全に特定できる列のこと（いわゆるID列）
主キーの性質として、他の行と重複してはならない、必ず値が格納されていなければならない。
UNIQUE制約とNOT NULL制約の両方の性質を持っているが、主キーを担う列に主キー制約（PRIMARY KEY 制約）を設定する

### 外部キー制約
外部キー...関連したテーブル間を結ぶために設定する列のことで、データの整合性を保証するために設定する。
参照整合性...外部キーが指し示す先にきちんと行が存在してリレーションが成立していること。

外部キー制約とは参照整合性を崩壊させないための制約である。
外部キー制約を設定していると、参照整合性を崩すような操作をしようとした時にエラーを発生させて強制的に処理が中断される。


普段SELECT文ばっかりだったので改めて制約について学んでみると、データベースのことを深く知れた気がします。

ちなみに僕が今学習中の本は下の本です。
初心者でもわかりやすいと思います。


https://amzn.to/3nDOBpV

※Amazon.co.jpのアフィリエイトになっています。
ModelとSeederの作成(Laravelでウェブアプリを作ろう④)

##Model(モデル)
Modelはテーブルとマッピングされたオブジェクトで、DB操作を行うためにクラスです。

###Modelの作成
Modelはテーブル名の単数系を名前につけることで、自動的にそのテーブルとマッピングします。

```terminal:ローカル環境でのModelの作成
php artisan make:model モデル名
```

```terminal:docker環境でのModelの作成
docker-compose exec app php artisan make:model モデル名
```

##Seeder(シーダー)
Seederはテストデータやマスタデータなどの**アプリケーション起動時に必要なレコードをコマンドで登録する仕組み**です。

###Seederの作成

```terminal:Seederの作成
php artisan make:seeder データベースのテーブル名TableSeeder
```

シーディング時に[public function run()]関数が呼ばれるので、ここに追加したいレコードの情報を記載しておきます。
最後にforeachでcreate関数を呼び出して登録処理を行います。

```php:UseresTableSeeder.php
<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use \App\Models\User;


class DatabaseSeeder extends Seeder
{
    public function run()
    {
        $users = [
            [
                'title' => "タイトル1",
                'description' => "説明1",
            ],
            [
                'title' => "タイトル2",
                'description' => "説明2",
            ],
            [
                'title' => "タイトル3",
                'description' => "説明3",
            ]
        ];

        //一括登録
        foreach($users as $user) {
            User::create($user);
        }
    }
}

```

###Seeding(シーディング)

```terminal:ローカル環境でのSeeding
php artisan db:seed
```

```terminal:docker環境でのSeeding
docker-compose exec app php artisan db:seed
```

mysqlに対しselect文を発行し、レコードが追加できていればOKです。
crontabでうまく起動しなかった時の自分流対処方法

#crontab
スクリプトを定期的に起動するおなじみのcrontab。
ラズパイをメディアサーバーとして使ったり、VPSをソケット通信のサーバーにしたり、
ラズパイカメラで定時撮影したり。
そんな時にcrontabを使っています。

systemctlも定期で使えるのですが、書き方が複雑でとっつきにくく。。
無意識にcrontabを使っています。

#crontabが起動しない
コードは完成したのに、いざcrontabを書いてワクワクしながら待っていても
プログラムが起動しないという虚しいことが多々あります。

ネット上の偉大な先輩たちは、「いや、だからログを残せよ！！」と言っていますが、
とりあえずこの方法でほぼできるので書いておきます。

#sleepで時間解決
crontab内に、@ rebootで起動時にスクリプトを起動するようにしている場合、
システムの起動の準備ができていないのに、スクリプトを実行してしまい、
エラーになっている場合があります。
そこで、実行するのをシェルスクリプトで待ってあげます。

```ruby:exe_script.sh
#!/bin/sh

#システムが準備ができるまで少し待つ。
sleep 10
#スクリプトの実行
/usr/bin/python3 /home/user/main_script.py
```
これをcrontabで呼び出します。

#screenで起動
「手動ではエラーなしで実行できるのに、crontabではできてない！」
という場合、screenコマンドを使うと解決しちゃうことがあります。
(エラーの原因はわからず終いですが...)

```ruby:exe_screen.sh
#!/bin/sh

#システムが準備ができるまで少し待つ。
sleep 10
#「server」というセッションでスクリプトを実行。
LD_LIBRARY_PATH=. screen -dmS server /bin/sh /home/user/exe_file.sh
```

これをcrontabに書いておきます。 

###確認
そして、実行がどんな感じになっているか確認するときは、

```ruby:shell
screen -r server
```
とすると、セッションに入ることができます。

終了する場合は

『Ctrl + a』の後に、『d』を押すと、終了せずに抜けることができます！
FlutterプロジェクトでGitHub Actionsを利用してパッケージ更新のPRを自動で定期的に作成する

Flutterプロジェクトの依存パッケージのバージョンアップ、いつもどのタイミングで実施するか悩むので、スケジュールを組んで自動でパッケージ更新のPRが提出されるようにしましたので、その際のメモです。

# 手順
Flutterプロジェクトのリポジトリにおいて、GitHub ActionsのWorkflowを新規作成し、設定ファイルを以下のように設定します。

```yaml:.github/workflows/update-dependencies.yml
name: Update Dependencies

on:
  workflow_dispatch: # 動作確認用に手動トリガーをONに設定している
  schedule:
  - cron: '0 19 * * sun' # UTCで設定。JSTだと、毎週月曜4:00となる

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - uses: subosito/flutter-action@v1

      - name: Update Dependencies
        run: flutter pub upgrade --major-versions

      - name: Create Pull Request
        id: cpr
        uses: peter-evans/create-pull-request@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          branch: scheduled/update_packages
          commit-message: 'chore: パッケージ更新'
          title: 'chore: パッケージ更新'
          body: |
            パッケージ更新のPRです。これは予め組まれたスケジュールに基づいて作成されています。

            レビュアーは動作確認を行い、必要であればコードを修正した上で、マージしてください。

            このPRは、[create-pull-request](https://github.com/peter-evans/create-pull-request)により作成されています。
          reviewers: userName # レビュアーに割り当てたいユーザーのGitHubのアカウント名を記載(省略可)
          labels: scheduled
```

これにより、指定したスケジュールでPRが作成されてレビュアーに割り当てられるので、動作確認やコード修正をしてマージします。

# 補足
## パッケージ更新に利用しているコマンド
公式ツールのコマンド`pub upgrade`の`--major-versions`オプションを利用しています。

```shell
flutter pub upgrade --major-versions
```

https://dart.dev/tools/pub/cmd/pub-upgrade#--major-versions

これを実行すると、全てのパッケージにおいて、`pubspec.yaml`のバージョン制約を無視しつつ、パッケージの依存関係の解決可能な範囲で、最新バージョンが利用されるようになります。その結果、**新たなバージョン制約が`pubspec.yaml`に反映され、ファイルの内容が書き換わる**場合があります。

通常`pubspec.yaml`におけるバージョン制約は、以下のようなキャレット構文で記述し、破壊的な仕様変更が発生しないと想定される範囲を指定しているかと思います。

```yaml:pubspec.yaml
dependencies:
  shared_preferences: ^2.0.4 # 2.0.4 以上 3.0.0 未満の範囲を示す
```

ところが、このコマンドでは上記のバージョン制約を無視するため、コマンド実行前と実行後でパッケージの破壊的な仕様変更が発生し、ビルドできなくなったり正常に動作しなくなったりするなどの事象が発生しやすくなります。そのため、その辺りは手動でフォローが必要です。

## その他参考

https://github.com/marketplace/actions/create-pull-request

https://dart.dev/tools/pub/dependencies#version-constraints

https://dart.dev/tools/pub/versioning#semantic-versions
AtCoder Beginner Contest 199（Sponsored by Panasonic） 振り返り

#何を書くか
AtCoder Beginner Contest 199(https://atcoder.jp/contests/abc199) の振り返りメモ
初心者中の初心者なのでお手柔らかに

#実行環境
+ 言語：C++


#A-Square inequality
###内容
整数の計算をしてやればできた。
これは特に書くことないかな。

コードだけ載せておく

```C++
#include <iostream>
 
using namespace std;
 
int main(){
  int a, b, c;
  cin >> a >> b >> c;
 
  if(a*a + b*b < c*c){
    cout << "Yes" << endl;
  }
  else{
    cout << "No" << endl;
  }
  return 0;
}
```

#B-Intersection
###解き方
全ての場合で条件を満たしているかの判定を行うために、変数によって真偽を判断した。
条件を満たす数字の個数を確認する`c`という変数も作り、条件を満たしている時`c++`をして数字のカウントを行った。

コード

```c++
#include <iostream>

using namespace std;


int main(){
  int n, c = 0, jud = 0, max = 0;
  int a[100], b[100], judge[100];
  cin >> n;
  for(int i = 0; i < n; i++){
    cin >> a[i];
  }

  for(int i = 0; i < n; i++){
    cin >> b[i];
    if(b[i] > max){
      max = b[i];
    }
  }

  for(int i = 0; i < max+1; i++){
    for(int j = 0; j < n; j++){
      if(a[j] <= i && b[j] >= i){
        judge[j] = 1;
      }
      else{
        judge[j] = 0;
      }
    }

    for(int i = 0; i < n; i++){
      if(judge[i] == 1){
        jud = 1;
      }
      else{
        jud = 0;
        break;
      }
    }
    if(jud == 1){
      c++;
    }
  }
  cout << c << endl;
  return 0;
}
```

#まとめ
とりあえず確実に解けたのはここまで
C問題は計算量が多すぎてダメと言われた。
解き方は友人に教わって理解したので気が向いたら投稿しようかな。
【React】Materialu-uiでGoogle関連のアイコンを表示する方法

皆さんこんにちは！

ふと、Materialu-uiのアイコンで「Google」のアイコンを表示させたかったのですが、なぜかMaterialu-uiには存在しませんでした。

YoutubeアイコンはあるのになぜGoogleアイコンは無いんでしょうね。。。

そんな問題に直面していたのですが、解決することができました。

npmの**@trejgun/material-ui-icons-google**というパッケージです。

これを使えばGoogle関連のほとんどのアイコンを使用することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/39e0e8bc-7eca-39a8-7987-ff785e27335d.png)

こんな感じで。

一応URLも載せておきますね。

[https://www.npmjs.com/package/@trejgun/material-ui-icons-google](https://www.npmjs.com/package/@trejgun/material-ui-icons-google)

こちらのサイトにもやり方は書いているのですが、せっかく見て頂いた方々にこちらを見て下さいなんて言えない。

ということで説明していきます！

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

まずはパッケージのインストールを行います。

```powershell
npm i --save @trejgun/material-ui-icons-google
```

# コンポーネントとして使用

あとはいつも通りコンポーネントとして使用します。

```js
import { Search } from "@trejgun/material-ui-icons-google"

<Button startIcon={<Search />}>Google アカウントでログイン</Button>
```

こんな感じでMaterialu-uiでGoogle関連のアイコンを使用することができます！

以上、「【React】Materialu-uiでGoogle関連のアイコンを表示する方法」でした！！

Thank you for reading
CentOS 7のインストールの仕方（2021年4月現在）

https://www.sbcr.jp/product/4797380941/

「新しいLinuxの教科書」を読んでいて、本に従ってCentOS7のインストールを進めようと思いましたが、本に載っているURLの先にインストールすべきものが見当たらず、ググっても情報が出てこず、迷子になりました。

そのURLは下記です。
>CentOS
URL http://www.centos.org/

そこのどこかに、ミラーサイト一覧に行く道があり、「CentOS-7-x86_64-DVD-1503-01.iso」みたいな感じのファイル名の「DVD ISO」イメージなるものがあるそうなのですが。

これを開いてもこういうページになってしまい、ありませぬ...↓
![スクリーンショット 2021-04-10 17.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/16f6d5d2-bfcf-f483-c019-b4da7d9c1f8e.png)

で、彷徨っていたら、このページにたどり着きました。
DVDあった！ミラーサイト（mirrors）もあるぽい！
https://wiki.centos.org/Download
![スクリーンショット 2021-04-10 17.29.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/9bdf5d9a-4b23-c761-9abf-48b87f3c439b.png)

jpドメインサイトならどこでもOKと本に書いてある通り、jpドメインのリンクもある！
![スクリーンショット 2021-04-10 17.29.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/5d27efa4-0e1e-a4b7-d090-483efd112797.png)

>本書執筆時点ではCentOS-7-x86_64-DVD-1503-01.isoというファイル名となっていました。

それに似てるファイルある！
![スクリーンショット 2021-04-10 17.27.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/294c2f1e-4a27-8468-6f10-3c1ed3383e97.png)

これをダウンロードすると、その後無事に参考書に合流することができます。
[Rails & PostgreSQL]rails db:createをするとPG::InsufficientPrivilege: ERROR:  permission denied to create databaseが発生

Postgres初心者です。エラーを解決した備忘録として残しておきます。

## 環境
Amazon Linux2
Rails 6.0.3
Posgres 11.5

## 起きていること
本番環境で`rails db:create`を入力したところ以下のようなエラーが発生した

```
$ rails db:create RAILS_ENV=production
PG::InsufficientPrivilege: ERROR:  permission denied to create database
Couldn't create 'travelour_production' database. Please check your configuration.
rails aborted!
ActiveRecord::StatementInvalid: PG::InsufficientPrivilege: ERROR:  permission denied to create database
bin/rails:4:in `<main>'

Caused by:
PG::InsufficientPrivilege: ERROR:  permission denied to create database
bin/rails:4:in `<main>'
Tasks: TOP => db:create
(See full trace by running task with --trace)
```

##解決方法
どうやらデータベースの作成権限がないらしい。そこでpostgresにログインして、権限を付与していく

```
#ログイン
$ psql -U postgres
```

`ALTER ROLE`コマンドでデータベース作成権限を与える

```
postgres=# ALTER ROLE {ユーザ名} WITH CREATEDB;
ALTER ROLE
```

その後`service`コマンドで再起動

```
 sudo service postgresql restart
```

これで`rails db:create`コマンドができるようになります。

```
rails db:create RAILS_ENV=production
Created database `travelour_production`
```
RSpec導入手順

最近RSpecを使い始めたので、導入手順をメモ

### 環境
Rails 6.0.3.6
MySQL
Docker

``--skip-test``を指定して ``new``

## Gem

```:Gemfile
.
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'capybara'
  gem 'rspec-rails'
  gem 'factory_bot_rails'
end
.
```

``webmock``等は一旦入れない予定で。

## RSpecをインストール

```
bin/rails g rspec:install

Running via Spring preloader in process 167
      create  .rspec
      create  spec
      create  spec/spec_helper.rb
      create  spec/rails_helper.rb
```

上のように4つ作成される。

- **.rspec** : RSpec用の設定ファイル

- **spec** : スペックファイルを格納するディレクトリ

- **spec/spec_helper.rb**, **spec/rails_helper.rb** : RSpecでカスタマイズするヘルパーファイル

## テスト用のDB準備

```
bin/rails db:migrate RAILS_ENV=test
```

## RSpecの書式変更

``--format documentation`` を追加することで、RSpecの出力を読みやすいドキュメント形式に変更することができる

```.rspec
--require spec_helper
--format documentation
```

## FactoryBot設定追加

以下の様に設定することで、FactoryBotのメソッドの呼び出しが楽になる。

```spec/rails_helper.rb
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods

end
```

（例）

```ruby
# 設定前
user = FactoryBot.create(:user)

# 設定後
user = create(:user)
```

## rails_helper.rbに設定追加

``Dir[Rails.root.join('spec', 'support', '**', '*.rb')].sort.each { |f| require f }``がコメントアウトされているので、それを外す。

そうすることで、``spec/support/配下のファイル`` を読み込むことができる。

```spec/rails_helper.rb
require 'spec_helper'
.
.
Dir[Rails.root.join('spec', 'support', '**', '*.rb')].each { |f| require f }
.
RSpec.configure do |config|
 .
 .
```

## rspec生成ファイルの定義を修正

プロジェクト作成時に``--skip-test``を指定していると、``Minitest``が作られないが、それと同時にRSPecを導入しても、Model等を生成した時に、同時にrspecファイルを生成してくれないようになっているため設定する。

下記コードの一番上の行をコメントアウトにし、以下の様に設定を追加する。``false``を設定してrspecファイルは自動生成されなくなる。

```config/application.rb
# config.generators.system_tests = nil

config.generators do |g|
  g.test_framework :rspec,
    fixtures: false,
    routing_specs: false
end
```



## RSpecを起動してみる

ここまで設定したら、動作確認してみましょう

```
bundle exec rspec

No examples found.

Finished in 0.00231 seconds (files took 0.17073 seconds to load)
0 examples, 0 failures

```

テストファイルは書いていませんが、RSpecが動作していることは確認できました


**後日、capybaraの設定等を追加します**


### 参考記事

- [RailsアプリへのRspecとFactory_botの導入手順](https://qiita.com/Ushinji/items/522ed01c9c14b680222c)

- [【Ruby on Rails】RSpec導入まで](https://qiita.com/japwork/items/2a499c5f09cd53838d84)

- [Ruby on Rails のテストフレームワーク RSpec 事始め](https://qiita.com/tatsurou313/items/c923338d2e3c07dfd9ee#request-%E3%83%86%E3%82%B9%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
Fetch APIのResponseオブジェクトのjsonメソッドやtextメソッドはなぜPromiseを返すのか

Fetch APIの使い方といえば

```typescript
const response = await fetch("https://api.example.com/");
const json = await response.json();
```

のように、レスポンスオブジェクトを得るためにまずawait、そしてさらにそこからデータを取り出すためにもう一度Promiseの解決を待つ必要がある。これはなぜなのか。少し考えれば当たり前の話なのだが、日本語の記事が見つからなかったので書いておく。

ちなみに[axios](https://github.com/axios/axios)とかだと

```typescript
import axios from "axios";
const json = await axios.get("https://api.example.com/");
```

これだけ。JSONのパースも暗黙的に行われるし、レスポンスヘッダがエラーだったらPromiseはリジェクトされる。うーんeasy。さすがVueの標準なだけのことはある。

今まであまり考えずに使ってきたが、よくよく考えれば当たり前だった。

[fetchメソッド](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/fetch)のMDNに詳しい説明が書いてある。

> **`fetch()`** は [`WindowOrWorkerGlobalScope`](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope) ミックスインのメソッドで、ネットワークからリソースを取得するプロセスを開始し、**レスポンスが利用できるようになったら**満足するプロミスを返します。このプロミスはリクエストに対するレスポンスを表す [`Response`](https://developer.mozilla.org/docs/Web/API/Response) で解決します。プロミスは HTTP エラーでは拒否されず、ネットワークエラーでのみ拒否されます。 HTTP エラーをチェックするには、 then ハンドラーを使用する必要があります。

簡潔で明確な説明である。Promiseがfullfilledになるのは、「レスポンスが利用できるようになったら」、つまりHTTPのレスポンスヘッダまで受信を終えてレスポンスボディの受信を開始するタイミングということなのだろう。

そして、fetchメソッドの戻り値に使用されている[Response](https://developer.mozilla.org/docs/Web/API/Response)オブジェクトは、[Body](https://developer.mozilla.org/docs/Web/API/Body)を実装している。このオブジェクトはRequestオブジェクトにも実装されているが、その中核は[bodyプロパティ](https://developer.mozilla.org/docs/Web/API/Body/body)としてアクセス可能な単なるReadableStreamだ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534541/add02301-7eff-6a0d-0eb6-8887f4881886.png)

ただ、Bodyにはリクエストボディやレスポンスボディを処理するための便利メソッドがたくさん用意されている。それがお馴染みのjsonやtextメソッドだ。ただ、JSONや文字列を返すためには、先にbodyのReadableStreamをメモリ上に最後まで読み切る必要がある。このため、これらのメソッドの戻り値はPromiseだったのだ。

> **[Body.json()](https://developer.mozilla.org/ja/docs/Web/API/Body/json)**
> [Response](https://developer.mozilla.org/ja/docs/Web/API/Response) ストリームを取得し、**完全に読み込む**。 ボディのテキストを [JSON](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) として解析した結果で解決する promise を返す。
>
> **[Body.text()](https://developer.mozilla.org/ja/docs/Web/API/Body/text)**
> [Response](https://developer.mozilla.org/ja/docs/Web/API/Response) ストリームを取得し、**完全に読み込む**。 [USVString](https://developer.mozilla.org/ja/docs/Web/API/USVString)（テキスト）で解決する promise を返す。 レスポンスは常に UTF-8 でデコードする。

メモリの制限にかかるくらい大量のデータを扱う必要がある場合はBody#textやBody#arrayBufferよりもBody#bodyを直接使ったほうがよさそうだ。