OmniAICreator/Qiita-1.07M huggingface dataset:
rails sを実行したら　Address already in use と表示された時の対処法

####アプリ作成中にこのエラーに遭遇したため記録しておく

####解決したい事
rails  sを行うと

```ruby 
Address already in use - bind(2) for "127.0.0.1" port 3000 (Errno::EADDRINUSE)
```

とターミナルに表示されてしまいrails sを実行できない


####解決法

#####すでにrails sが他のターミナルなどで実行されているかを確認。

rails sが実行されているのが確認できなければ

```ruby:ターミナル
% ps ax | grep rails
```
を打ち込み出てきたプロセス番号を

```ruby:ターミナル
%　kill -9 プロセス番号
```
でプロセスを止めることで解決する事ができる。
Core Web Vitals を見て、サイトを最適化しよう！

# はじめに
Google の検索においてその表示順序は、いくつかの指標によってランキング付けされています。

その指標には、現在

1. 読み込み速度
2. モバイル対応
3. セーフブラウジング
4. HTTPS対応
5. インタースティシャル

があり、このうち読み込み速度が「Core Web Vitals」という指標に変わります。

# Core Web Vitals
![スクリーンショット 2020-07-18 17.50.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/659561/042a2b8f-76fc-dee8-41aa-0bda8d3bcb5f.png)

## Largest Contentful Paint(LCP)
ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

この LCP は、`<img>`, `<image>`, `<video>`, `背景画像` などが表示されたタイミングになります。

この指標を悪化させる原因としては、

* サーバーの応答時間が長い
* JavaScriptやCSSによるレンダリングブロックが起きている
* リソースの読み込みに時間がかかっている
* クライアントサイドのレンダリングに時間がかかっている

があります。

これらを改善させることで LCP の数値は良くしていきます。

### クリティカル CSS
Google Page Speed Insights で出る改善案に「スクロールせずに見えるコンテンツのレンダリングをブロックする JavaScript/CSS を排除する」と言うものがあり、これに対応するためにスクロールせずに見えるコンテンツ以外には初めはスタイルを当てずにレンダリングを終えるのが良いとされています。
タスクランナー中でこのスタイルを分ける方法やツールを使って、抽出する方法などあるので、それらを使用して、必要ないスタイルは非同期で読み込むようにすると良いです。

## First Input Delay(FID)
最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。

JSの実行なども終わり、ユーザからの入力を受け付けるようになるまでの時間になります。

この指標を悪化させる原因としては、

* サードパーティーのコードによる影響を受けている
* JavaScript実行にかかる時間が長い
* メインスレッドの作業が多い
* リクエスト数や転送量が多い

があります。

これらを改善させることで FID の数値は良くしていきます。

## Cumulative Layout Shift(CLS)
ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

このレイアウトのズレは、（影響を受けた面積）×（移動した距離）によって計算されます。

この指標を悪化させる原因としては、

* 画像、広告など埋め込まれる要素にサイズが指定されていない
* コンテンツが動的に埋め込まれる
* Webフォントの読み込み

があります。

これらを改善させることで CLS の数値は良くしていきます。

### 画像を表示させる
以下のようにアスペクト比を指定すると良いです。

```css
img {
  aspect-ratio: attr(width) / attr(height)
}
```

### 画像サイズによって、画像ソースを分ける
```html
<img width="1000" height="1000" alt="Shoe"
  src="shoe-1000.jpg"
  srcset="shoe-1000.jpg 1000w,
          shoe-2000.jpg 2000w,
          shoe-3000.jpg 3000w
  />
```

### 広告を動的に挿入するのも避けるべき
以下のように表示領域を先に確保して、画面全体がずれないようにすると良いです。

```css
<style>
.container {
    display: block;
    width: 720px;
    height: 90px;
    background: #ccc;
    overflow: hidden;
}
</style>
```

# 測定方法
Google はすでにこれらの指標を計測するためのツールをいくつか用意しています。

* PageSpeed Insights
* Chrome UX Report
* Search Console
* Chrome DevTools
* Lighthouse
* Web Vitals Extension

これらのツールを駆使して、開発中のサイトは改善していくと良いかと思います。

# おわりに
この「Core Web Vitals」が導入されたからといって、ランキングに大きく影響を与えるということはなく、依然として、関連性の高いコンテンツの方が重要になります。しかし、UX 的にはこれらの数値が良い方が良いので、改善しておくに越したことはありません。また、この指標が導入される半年前には発表があるので、それぐらいには対応しておきたいものです。

# 参考
https://web.dev/vitals/
無料のIDEA IntelliJ Ultimate beta版を入れてみよう

## ダウンロードURL
Mac
https://www.jetbrains.com/idea/download/download-thanks.html?type=eap&platform=mac

Windows
https://www.jetbrains.com/idea/download/download-thanks.html?type=eap&platform=windows

Linux
https://www.jetbrains.com/idea/download/download-thanks.html?type=eap&platform=linux

## 何故無料？法律に触るか？

> Both Community and Ultimate Edition EAP builds can be used for any purpose, including writing __proprietary or commercial software__. 
> Note, however, that because EAP is always work in progress, some of their features might not always work as expected. Please use these builds at your own risk.

Early access programに参加して、無料のBeta版を使用させてもらうということです。

Beta版だが、正式版がリリースされたあとでも、一定期間引き続き使えます。（もし使えなくなったら、次のEAPを待つしかないです。）

バージョンは[RC版（2020年7月）](https://confluence.jetbrains.com/display/IDEADEV/IntelliJ+IDEA+2020.2+EAP+(202.6397.59+build)+Release+Notes)の一つ前のBeta版です（RCから有料となるが）。

## Clionなどを使いたいが、できるかな？

URLをすこし変えると、ダウンロードできます。
https://www.jetbrains.com/clion/download/download-thanks.html?type=eap&platform=mac
AtCoderBeginnerContest174復習＆まとめ（前半）

# AtCoder ABC174
2020-08-02(日)に行われたAtCoderBeginnerContest174の問題をA問題から順に考察も踏まえてまとめたものとなります．
前半ではABCまでの問題を扱います．
問題は引用して記載していますが，詳しくはコンテストページの方で確認してください．
[コンテストページはこちら](https://atcoder.jp/contests/abc174)
[公式解説PDF](https://img.atcoder.jp/abc174/editorial.pdf)


## A問題　Air Conditioner
> 問題文
> あなたは、室温が$30$度以上のとき、またそのときに限り、冷房の電源を入れます。
> 今の室温は$X$度です。冷房の電源を入れますか？
> 出力
> 冷房の電源を入れるならば'Yes'、入れないならば'No'を出力せよ。

```python:abc174a.py
x = int(input())
if x >= 30:
    print("Yes")
else:
    print("No")
```

## B問題　Distance
> 問題文
> $2$次元平面上に$N$個の点があります。$i$個目の点の座標は$(X_i,Y_i)$です。
> これらのうち、原点からの距離が$D$以下であるような点は何個ありますか？
> なお、座標$(p,q)$にある点と原点の距離は$\sqrt{p^2+q^2}$で表されます。

平方根の計算で誤差が出るのが嫌なので，$\sqrt{p^2+q^2} \leqq D$の両辺を二乗した$p^2+q^2 \leqq D^2$を用いて判定を行った．

```python:abc174b.py
n, d = map(int, input().split())
d = d * d
count = 0
for i in range(n):
    x, y = map(int, input().split())
    if x * x + y * y <= d:
        count+= 1
print(count)
```

## C問題　Repsept
> 問題文
> 高橋君は$K$の倍数と$7$が好きです。
> $7,77,777,…$という数列の中に初めて$K$の倍数が登場するのは何項目ですか？
> 存在しない場合は代わりに'-1'を出力してください。

苦戦しました．
すぐに，$5$の倍数と$2$の倍数は存在しないことはわかったのですが，そこからが個人的には難しく感じました．
かなりの時間をレピュニットの性質を調べるのに使ってしまいました．
個人的な解釈としては，$7,77,777,…$という数列は初項を$a_1=7$とすると，
$a_{n+1}=10a_n+7$
と表すことができる．
これを$mod K$における数列を考えることで解くことができます．
例えば，$K=9$のとき，
$7,77,777,…$の数列を$9$で割った余りの数列は，$7,5,3,1,8,6,4,2,0,7,…$となり$9$項目が$9$の倍数であることがわかる．この数列を$b_n$とする．
例えば$3$項目に着目すると$777$を$9$で割った余りは，$b_3 \equiv 10b_2+7　(mod　9)$で計算することができるため，もし$K$の倍数が存在するならば初項から$K$項目までに少なくとも一回は出現するため($K$で割った余りは，$0 \leqq x \leqq K-1$となるため)，その範囲で余りが$0$のものが出現すれば出力し，出現しなければ'-1'を出力する．
実装では，$b_{n+1} \equiv 10b_n+7　(mod　K)$から，$K$が$5$の倍数または$2$の倍数の場合，$b_n \equiv 7　(mod　K)$となるためそこで場合分けを行い，それ以外の場合は必ず存在するため答えが出るまでループを繰り返すように実装した．

```python:abc174c.py
k = int(input())
if k % 2 == 0 or k % 5 == 0:
    print(-1)
else:
    c = 7
    count = 1
    while True:
        if c % k == 0:
            print(count)
            break
        else:
            c = (10 * c + 7) % k
            count += 1
```

前半はここまでとなります．
最近は公式の解説がとても丁寧に記述してあったので，詳しい解法はそちらを参考にしてもらえたらと思います．
前半の最後まで読んでいただきありがとうございました．

後半はDEF問題の解説となります．
[後半に続く](https://qiita.com/takaito0423/items/b8df211b5dd7e9161ed4)．
AtCoderBeginnerContest174復習＆まとめ（後半）

# AtCoder ABC174
2020-08-02(日)に行われたAtCoderBeginnerContest174の問題をA問題から順に考察も踏まえてまとめたものとなります．
後半ではDEの問題を扱います．[前半はこちら](https://qiita.com/takaito0423/items/5f7a5c32bb65e5e68ce8)
問題は引用して記載していますが，詳しくはコンテストページの方で確認してください．
[コンテストページはこちら](https://atcoder.jp/contests/abc174)
[公式解説PDF](https://img.atcoder.jp/abc174/editorial.pdf)

## D問題　Alter Altar
> 問題文
> 祭壇に、左から右へと一列に並ぶ$N$個の石が祀られています。左から$i$個目$(1 \leqq i  \leqq N)$の石の色は文字$c_i$として与えられ、$c_i$が'R'のとき赤、'W'のとき白です。
> あなたは、以下の二種の操作を任意の順に何度でも行うことができます。
>　・石を$2$個選び (隣り合っていなくてもよい)、それらを入れ替える。
>　・石を$1$個選び、その石の色を変える (赤なら白に、白なら赤に)。
> 占い師によると、赤い石の左隣に置かれた白い石は災いを招きます。そのような白い石がない状態に至るには、最小で何回の操作が必要でしょうか。

問題を読んだときに「・石を$2$個選び (隣り合っていなくてもよい)、それらを入れ替える。」だけで解けそうだと思いました．
「・石を$1$個選び、その石の色を変える (赤なら白に、白なら赤に)。」を使わないことで，最終的な答えのない状態は一通りに定まります．
例えば，$N=9$で
'WRWWWRRWR'
の入力は
'RRRRWWWWW'
となるように操作を最小に行うことを考えれば答えを出すことができる．
これは，入力に含まれる赤い石の個数$N_r$とし，入力の$1$から$N_r$番目までの白い石の個数が必要な操作数であることがわかる．（例の場合，'WRWWWRRWR'の$1$から$4$番目の'WRWW'における白い石の数なので$3$が答えとなる．）

```python:abc174d.py
n = int(input())
mozi = input()
a_list = []
for i in range(n):
    if mozi[i] == 'W':
        a_list.append(0)
    else:
        a_list.append(1)
r_count = sum(a_list)
print(r_count - sum(a_list[0:r_count]))
```

## E問題　Logs
> 問題文
> 丸太が$N$本あり、それぞれ長さは$A_1,A_2,⋯,A_N$です。
> これらの丸太を合計$K$回まで切ることができます。 長さ$L$の丸太を片端から$t(0 < t < L)$の位置で切ると、長さ$t,L−t$の丸太に分かれます。
> 丸太を合計$K$回まで切った後最も長い丸太の長さが最小でいくつになるか求め、小数点以下を切り上げた値を出力してください。

二分探索に気がつけず，$x = 1$から貪欲に探索していたためコンテスト中に解けませんでした．

```python:abc175e.py
n, k = map(int, input().split())
a_list = list(map(int, input().split()))
a_list.sort(reverse=True)
if k == 0:
    print(a_list[0])
else:
    start = 1
    end = a_list[0]
    x = (start + end) // 2 
    while True:
        k_count = 0
        flag = 1
        for a in a_list:
            temp_k = 0
            if a % x == 0:
                temp_k = a // x - 1
            else:
                temp_k = a // x
            if temp_k == 0:
                flag = 1
                break
            k_count += temp_k
            if k_count > k:
                flag = 0
                break
        if flag == 1:
            end = x
        if flag == 0:
            start = x
        next_x = (start + end) // 2
        if next_x == x:
            if flag == 1:
                print(x)
            if flag == 0:
                print(x + 1)
            break
        x = next_x
```

後半も最後まで読んでいただきありがとうございました．
フレーム補完するGANを作ってみた

少し前にSRGANを作ったがこれを応用すればフレームも補完できるのでは？と考え、お遊び程度に作り始めた。したがって仕組みはSRGANと全く同じである。
[前作ったSRGANのリンク](https://qiita.com/AokiMasataka/items/bfb5e338079f01bfc996)
[今回作ったフレーム補間GANのリンク](https://github.com/AokiMasataka/FrameInterpolation)
###全体の仕組み
生成器のネットワークは入力6chの出力3ch、入力データは出力フレームの前後のフレームをdim=0で結合させたものを使用する。
![FIGAN_info.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558031/afbd3f9c-5c6e-82f3-c3cf-d7a294db549b.png)
Discriminatorやloss関数などは上のリンクのものと全く同じものを使用している。
###学習結果
![FIGAN.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/558031/7d383e52-0387-1ffd-273f-8a0bd5c6bacc.gif)
左がオリジナルの動画で右がフレーム補完をしてレームレートを2倍にした動画である。
補完したフレームが全体的に色が落ちており不鮮明に映っている。さらに生成したフレームは入力フレームのちょうど中間のフレームではなく、時折前後のどちらかに片寄ったフレームを生成して滑らかに見えないときがある。
結果としては、あまりうまくいかなかった。当初思い付きではあるものの、まだましな物が出来上がると思っていたので、フレーム補完についてはまた挑戦したいと考えている。
Google Domainのメールエイリアスからメールを送信できるようにする

同じ現象で困ってる人いそうなのでログを残しておきます。

### 公式のヘルプページをみても全然うまくいかない

https://support.google.com/domains/answer/3251241?hl=ja
https://support.google.com/domains/answer/9437157

### 問い合わせ

Google Oneの問い合わせに問い合わせたら上記のサイトを紹介されるだけだったのでGoogleDomainの問い合わせからおくってみた


### 返事来た

お客様へ

Google Domainsにご連絡いただきありがとうございます。Google Domainsチームの<〇〇>と申します。

<メールエイリアスアドレス>からメール送信の件についてですが、こちらでドメインアカウントを確認しましたところ、<メールエイリアスアドレス>というのはメール転送のエイリアスでございます。Gmailでエイリアスからメールを送信するためお手数ですが、以下の手順を行っていただきますようお願いいたします。

「認証が失敗しました。」というエラーを解決するには、下記の方法を行います。
1. このリンク「Unlock Captcha」を<ドメイン取得してるGoogleアカウントのメールアドレス>としてクリックします。
2. 「次へ」をクリックします。
3. Googleアカウントからログアウトします。
4. Googleのページ（www.google.comなど）にアクセスします
5. 右上に表示されるプロフィール画像またはイニシャルを選択します。
6. メニューで [ログアウト] を選択します。

2-1. Gmailアカウントにログインし、「2 段階認証プロセス」が有効になっていることを確認します。
2-2. Googleドメインのアプリ パスワードを生成します。
2-3. 「アプリ パスワード」 ページに<ドメイン取得してるGoogleアカウントのメールアドレス>としてアクセスします。
2-4. 「アプリを選択」で 「その他（名前を入力）」を選択し、「ドメイン名」を入力します。
2-5. 「生成」ボタンをクリックします。
2-6. 黄色のバー内の 16 文字のコードをコピーしてノートパッドなどに貼付けします。
2-7. 「完了」ボタンをクリックします。

3-1. Gmailに<ドメイン取得してるGoogleアカウントのメールアドレス>としてログインします。
3-2. 右上にある設定アイコンをクリックします。
3-3. 「設定」をクリックします。
3-4. 「アカウントとインポート」 タブまたは 「アカウント」 タブをクリックします。
3-5. 「名前」で、「他のメール アドレスを追加」 をクリックします。
3-6. メールの送信に使用する名前とアドレス<メールエイリアスアドレス>を入力します。
3-7. 「次のステップ」をクリックします。
3-8. SMTP サーバー欄に「smtp.gmail.com」を入力します。
3-9. ポートを587にします。
3-10. ユーザー名欄に「<ドメイン取得してるGoogleアカウントのメールアドレス>」を入力します
3-11. パスワード欄に黄色のバー内の 16 文字のコードを入力します。
3-12. 「アカウントを追加]をクリックします。

### 知らんがな！
Oracle ApexでCRUD画面を爆速開発 - その5（Classic Reportのヘッダの上にグループヘッダ行を作る）



# シリーズ
[Oracle ApexでCRUD画面を爆速開発 - その1（構成周り、一覧表示）](https://qiita.com/harukb/items/bad041174f59a9f07141)
[Oracle ApexでCRUD画面を爆速開発 - その2（詳細表示）](https://qiita.com/harukb/items/d4996b5a9a11ee2f3165) 
[Oracle ApexでCRUD画面を爆速開発 - その3（登録/更新処理,Validation,アクセス制限など）](https://qiita.com/harukb/items/f63c9035de34282320d6) 
[Oracle ApexでCRUD画面を爆速開発 - その4（選択リストの内容で一覧表示内容を更新させる）](https://qiita.com/harukb/items/7b86706f010f886b89f0) 


# 今回の主な内容
- ClassicReportのヘッダーを2段にしてグループ化したい

# ClassicReportのヘッダーを2段組にしてグループ化したい

※　Excelだと簡単にできるんだけどなぁと~~言われちゃう~~思っちゃうこういうヤツです。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/6c2f8000-0e72-34e4-db56-8d351e1157ab.png)|
|:-:|

## Template(Standard)のコピー
※ 今回はデフォルトでReportに設定されているStandardをコピーして作成したStandard2に対して内容変更をします。

1 Shared Component>Templateを開きます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/e2accfc6-1cb4-45d9-a2a3-775f0e05d12d.png)|
|:-:|

2 下の方にスクロールするとType:Report Name:Standardが見つかります。

|!![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/e32bc81f-4cba-f2c3-9f98-774c183b2326.png)|
|:-:|

3 対象行の右側にある「Copyボタン」をクリックし開かれたダイアログでコピー先名称を入力します。終わったら「Copy」ボタンをクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/5712f8ab-c0dd-6a42-2e2d-ccf344b7a79a.png) |
|:-:|

4 "Standard2"が作成されたことを確認します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/f4702e14-e51e-cf60-68fb-383481034d33.png)|
|:-:|

## テンプレート(Standard2)の修正

1 作成したStandard2テンプレートを開き、"Column Headings-Before Column Heading"項目を探します。

2 以下のHTMLコードを<thead>の後に追記します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/6491fc8a-4760-4dab-3611-257ea7d56436.png)|
|:-:|

`<th class="t-Report-colHead" colspan="4">GROUP1</th><th class="t-Report-colHead" colspan="3">GROUP2</th>`


2 右上の「Apply Changes」で保存し、新しいテンプレートを適用させたいClassicReportに戻る。

## テンプレート(Standard2)の適用

1 対象のClassic Reportの"Attribute"をクリック。"Appearance"にてTemplateを"Standard2"に変更。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/ce73ecfb-b3c7-2522-af0c-58b44f70bec2.png)|
|:-:|

↓

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/71650749-1295-dbef-a965-e0e61b4f3d76.png) |
|:-:|

2 Saveして実行
※Colspan指定の不足も含めて、きちんと反映されました。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/c3e1a1d3-e876-3954-1f62-4b0acfb01187.png)　|
|:-:|
【Python】0からWebアプリ！ハンズオン(2)～ハローワールド編～

# 概要
Pythonで0からWebアプリを作る機会があったので、そのまとめとして！
この記事ではAPIでハローワールドする方法について書いています。

これまでの記事
[【Python】0からWebアプリ！ハンズオン(0)～環境構築編～ - Qiita](https://qiita.com/tsumasakky/items/d8069418d1fa6f2fa185)
[【Python】0からWebアプリ！ハンズオン(1)～設計、DB構築編～ - Qiita](https://qiita.com/tsumasakky/items/8993b6645f2d8bef43f2)

# こんな方に読んでほしい
* プログラミング未経験だけどアプリ作ってみたい方
* 新人Webプログラマの方
* 経験者だけどPythonでWebアプリ書いたことない方

# ゴール
HTML, CSS, JavaScript, Python, SQLを使ってCURD機能を持ったWebアプリを作成するのが目標です。

# 必要なもの
* PC（Windows OS）
* インターネット回線
* わくわくした気持ち

# 1. フォルダ構成
今回作成するフォルダ、ファイルは以下の通りです。

todo/
　└ api/
　　└ index.py

# 2. Bottle
Webアプリを作るときに大きな要素となるのがWebフレームワークです。
今回使用するBottleはPythonの軽量Webフレームワークです。
[Bottle: Python Web Framework — Bottle 0.13-dev documentation](https://bottlepy.org/docs/dev/)
他にもDjango、Flaskといった有名なフレームワークがありますが、今回は小規模なので軽量で簡単なBottleを使うことにしました。
また、WSGIというインターフェースに対応しています。本来ならWebアプリをサーバーに配置するときに結構いろいろと考慮しなきゃいけないところ、結構簡単にWebアプリが作れるよ！ということです（ざっくり）

以下参考までに各フレームワークの特徴です。

* Django: 大規模向け、機能豊富
* Flask: 中小規模向け、そこそこの機能、WSGI準拠
* Bottle: 小規模向け、軽量、WSGI準拠

# 3. Bottleのインストール
コマンドプロンプトを管理者で開き、以下のコマンドを実行してください。これだけです。
`pip install bottle`

# 4. ハローワールドしてみる
適当に作業フォルダを作り、そのフォルダをVSCodeで開きます。
そして、以下のフォルダ、ファイルを作成します。(.vscodeはVSCodeが勝手に生成します)
todo/
　└ api/
　　└ index.py

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/1174ec4c-6833-d93a-d359-cd4c4106a73a.png)

そして、index.pyにコードを書いていきます。

```py:index.py
# -*- coding:utf-8 -*-

# 外部のパッケージを読み込む
from bottle import route, run

# @routeに/helloと設定すると、http://localhost:8080/helloでアクセスできる
@route('/hello')
def hello():
    # Hello World!という文字列を返却
    return "Hello World!"

# Webサーバーの実行構成
# URLの "http://[host]:[port]/[route]" の構成となる
run(host='localhost', port=8080, debug=True)
```

F5キーを押して、「Python File」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147118/70a15c42-3741-ab68-366a-d7ccf8667b28.png)

http://localhost:8080/hello
にアクセスしてみると、「Hello World!」と表示されているはずです！

# まとめ
API実装の第一歩目として、ハローワールドしてみました！

# 次回は･･･
APIからデータベースに接続します！
[【Python】0からWebアプリ！ハンズオン(3)～API実装編～ - Qiita](https://qiita.com/tsumasakky/items/0aed1f2bd0b983e6d8ec)
オープンソースのAndroid(AOSP)にGooglePlayStoreを入れる

# Step1 端末にあったファイルをダウンロードする
PlayStoreを利用するには、以下の3つのパッケージが必要となります。

- GoogleServicesFramework
- Phonesky(GooglePlayストア)
- PrebuiltGmsCore(GooglePlay開発者サービス)

これらは[Open GAPPS](https://opengapps.org/)からダウンロードすることができます。

手持ちのAndroidに合わせてPlatform,Androidを選択しましょう。
Variantはpicoあたりで大丈夫です。

CPUを確認するコマンド(armeabi-v7aであれば32bitARMです)
`adb shell getprop ro.product.cpu.abi`

バージョンを確認するコマンド
`adb shell getprop ro.build.version.release`

# Step2 必要な.apkファイルを揃える
ダウンロードしたファイルを解凍すると、Coreフォルダ内に以下の3つのファイルがあると思います。

- gmscore-arm.tar.lz
- gsfcore-all.tar.lz
- vending-arm.tar.lz

これらをlzipで展開します。
`tar --lzip -xvf [ファイル名]`
または
`lzip -d -c [ファイル名] | tar xvf -`

展開すると、nodpiフォルダ内に.apkファイルがあるので、それらを別フォルダにまとめておきましょう。

# Step3 システムアプリとしてインストールする
## 1) システムへの書き込み権限を与える
通常の方法ではインストールができないので、手動でインストール作業をします。
まずどこのパーティションが/systemに割り当てられているかを確認します。
`adb shell cat /proc/mounts | grep system`

すると以下のように表示されると思います。
`/dev/block/mmcblk2p5 on /system type ext4 (ro,seclabel,relatime,data=ordered)`

書き込み権限がないようであれば(roと書いてある)、書き込み権限をつけてマウントしなおします。
`adb shell mount -o rw,remount /system`

## 2) フォルダを作成し、パッケージを入れる
**/system/priv-app**に、以下の３つのフォルダを作成します。

- GoogleServicesFramework
- Phonesky
- PrebuiltGmsCore

```
adb shell mkdir /system/priv-app/GoogleServicesFramework
adb shell mkdir /system/priv-app/Phonesky
adb shell mkdir /system/priv-app/PrebuiltGmsCore
```

Step2で抽出したパッケージをこのフォルダに入れていきます。

```
adb push PrebuiltGmsCore.apk /system/priv-app/PrebuiltGmsCore/
adb push GoogleServicesFramework.apk /system/priv-app/GoogleServicesFramework/
adb push Phonesky.apk /system/priv-app/Phonesky/Phonesky.apk
```

フォルダとファイルの権限を絞ります。

```
adb shell chmod 755 /system/priv-app/GoogleServicesFramework
adb shell chmod 755 /system/priv-app/Phonesky
adb shell chmod 755 /system/priv-app/PrebuiltGmsCore

adb shell chmod 644 /system/priv-app/GoogleServicesFramework/GoogleServicesFramework.apk
adb shell chmod 644 /system/priv-app/Phonesky/Phonesky.apk
adb shell chmod 644 /system/priv-app/PrebuiltGmsCore/PrebuiltGmsCore.apk
```

# Step4 端末での設定
最後に端末を再起動すると、インストールされたアプリが確認できると思います。
`adb reboot`

あとは端末上で、先ほどインストールしたアプリに権限をつけていきます。
**Settings>Apps**(設定>アプリ)に移動し、右上のメニューから**システムアプリを表示**させましょう。
以下のものがインストールされていると思います。

- Google Play Store(Google Play ストア)
- Google Play Services(Google Play開発者サービス)
- Google Services Framework

それぞれのアプリの権限を全て許可させれば終了です。

# その他
場合によっては、**GoogleLoginService**(Googleアカウントマネージャー)が必要となるかもしれません。
この場合Step2で**gsflogin-all.tar.lz**を展開し、あとは同様の手順を辿るとよいでしょう。

このドキュメントは以下のサイトを参考にしました。
[Install Google App on AOSP Build](https://stackoverflow.com/questions/41695566/install-google-apps-on-aosp-build)
[Install Google Play Store on Android 7.1.1(API 25) emulator](http://songzuk.blogspot.com/2016/11/install-google-play-store-on-android.html)

ちなみに、GMS搭載のライセンスはGoogleへの申請が必要となります。
AnacondaをインストールしたらPipがSSLエラーを吐いた[pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.]

### TL;DT
PCの環境変数に`Anaconda\Library\bin`を加える。

### 環境
Windows 10 Home
Anaconda 2020.07

### 発生した問題
Cドライブに入っていたAnacondaをアンインストールし、
Dドライブにインストールし直し、
`~/Anaconda`,`~/Anaconda/Script`を環境変数として設定し、
追加のパッケージをpipで入れようとpowershellで`pip install`したところ、

```powershell
pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.
```

というエラーが出ました。
この時、同じコマンドをAnaconda promptで実行するとエラーは発生しませんでした。

### 詳細
以下のコマンドを打つともうすこし詳細に原因がわかります。

```
python -c "import ssl"
```


**もし`Module not found` なら、PCの環境変数に`Anaconda\Library\bin`を加えることで解決する可能性があります。**

これは、`Anaconda/Library/bin/` 以下のlibcrypto-1_1-x64.dll, libcrypto-1_1-x64.pdb, libssl-1_1-x64.dll, openssl.exe, libssl-1_1-x64.pdb, openssl.pdbといったSSL関連のファイルにpipがアクセス出来ていないのが原因なようです。

(`Procedure entry point not found` ならdllファイルが壊れているか間違ったdllを参照しているかだそうで、この記事で書いた内容で改善するかはわかりません。)

<参考>
https://github.com/pypa/virtualenv/issues/1139#issuecomment-477186474
https://github.com/pypa/virtualenv/issues/1139#issuecomment-454207932

####備忘録
Anacondaをインストールして環境変数を設定するときは`~/Anaconda`,`~/Anaconda/Script`,`~/Anaconda/Library/bin`の3つを設定する。
【2020年版】Trelloをもっと使いやすく！おすすめChrome拡張4選+α

## introduction
みなさん、Trelloは使ってますでしょうか？
マイルストーン・課題管理などに便利ですよね！

今日、アジャイル開発のソフトウェアも増えてきて、
そちらでカンバンを用意しているから不要だと思われている方もいらっしゃるかと思います。

Trelloの魅力は気軽になんでもカード化して共有・相談できる「気軽さ」にあるのではないでしょうか？
アジャイル開発のソフトウェア+αで気軽に課題を上げる場として
Trelloはまだまだ魅力的なソフトウェアだと思います。

ただ、Trello標準では、機能が制限されていたり、見辛いなどの課題があるかと思います。
一応、Trello公式の拡張機能として「Power-Up」がありますが、
無料プランではインストール数が制限されていますし、
有料プランに切り替えるのはなかなかハードルが高いのではないでしょうか。

そういった時は無料プランを使いつつ
「Chrome拡張機能」でカスタマイズしてみることをオススメします。

本記事では筆者が使用して見て便利だと感じた
「Chrome拡張機能」を紹介していきたいと思います！


## おすすめChrome拡張4選

### Next Step for Trello
[chromeウェブストア](https://chrome.google.com/webstore/detail/next-step-for-trello/iajhmklhilkjgabejjemfbhmclgnmamf?hl=ja&)
カードに追加したチェックリストを一覧でも見れるようにしてくれます。
一覧上で、チェックをつけることもできるので管理に非常に役立つオススメの拡張機能です。
![next_step.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/c4f1c0ef-735c-5621-301c-53a852e1e2d4.png)

### Trello Birds-eye
[chromeウェブストア](https://chrome.google.com/webstore/detail/trello-birds-eye/jddlcajmgfdpfnekdppnapoldfhabkeg?hl=ja&)
カード一覧を見やすいスタイルに変更してくれます。
一通り全てのカードを把握したい場合などに、オススメの機能です。
![bird_eyes.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/f13c2184-b234-ef94-c83b-d02352e23b45.png)

### Card Colors for Trello ※
[chromeウェブストア](https://chrome.google.com/webstore/detail/card-colors-for-trello/nodlpencjjlohojddhflnahnfpfanbjm?hl=ja&)
ラベルのカラーをカード全体に反映してくれます。

※ 追記：
2017年以来更新がなく、最新のTrelloで使用できなくなっている模様です。
詳しくは[こちら](#おまけ)

### Card Numbers for Trello
[chromeウェブストア](https://chrome.google.com/webstore/detail/card-numbers-for-trello/ddadhlcejiholmdiihbdcfoapdfkhicn?hl=ja&)
こちらはカード番号を表示してくれるようにする拡張機能です。
こちらはIssueとして管理する場合など、カード番号でやりとりがチームメンバーと
スムーズにできるようになるため、非常にオススメです！
![card_number_for_trello.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/7c557f96-e042-7c41-bac9-9cc5a56792c5.png)


## おまけ
2020年現在、筆者の環境では「Card Colors for Trello」が利用できなくなっています。
どうやらTrelloの内部の仕組みが変わり、動的にカードをUpdateするようになり、
更新タイミングで設定したカードカラーが外れてしまうようです。

筆者が一番気に入っていた拡張機能だったので残念でしたが、
ここで諦めないのがエンジニアのサガ(~~ロマンシング・サガ~~)というわけで

現在使用できないなら
「現在のTrelloに対応した拡張機能作ればいいじゃない」
ということで早速作りました。
[Trello Design](https://chrome.google.com/webstore/detail/trello-design/bddemgibaehjbclgpppopnlcaohlikki)
![trello_design.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/682611/3a80c328-b781-ced9-c163-04dadf6e98fb.jpeg)
※ おまけで「カードNo.表示」の機能もついてます。


[Trello Design](https://chrome.google.com/webstore/detail/trello-design/bddemgibaehjbclgpppopnlcaohlikki)では今後も便利な拡張機能を追加して行けたらと思ってます。
よろしければご利用ください。

また、１つ１つインストールして環境をカスタマイズしたい方は、
記事内で紹介しました、[おすすめChrome拡張4選](#おすすめChrome拡張4選)を元に
是非、Chrome拡張機能を入れてみてはいかがでしょうか？


**それでは、良いTrelloライフを!!**
【numpy, scipy】半正定値エルミート行列の平方根を計算する方法


```Python
import numpy as np
import scipy.linalg as LA

def sqrtmh(A):
    vals, vecs = LA.eigh(A)
    return vecs @ np.diag(np.sqrt(vals)) @ vecs.T.conjugate()
```

#参考
- [行列の平方根](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E5%B9%B3%E6%96%B9%E6%A0%B9)
- [行列の定値性](https://ja.wikipedia.org/wiki/%E8%A1%8C%E5%88%97%E3%81%AE%E5%AE%9A%E5%80%A4%E6%80%A7)
ゆっくりGo vol.2

#前回のおさらい
・私にとっての明日は今日なので…(目そらし)
・`for`まで習ったぞ!
・個人的に好きな言語!
・型のあたりがもやもやするぞ!

#ほんへ
```if.go
//------------------------------------------------
func pow(x, n, lim float64) (float64, float64) {
	if v := math.Pow(x, n); v < lim {
		return v,lim
	}
	return lim
}

func main() {
	fmt.Println(
		pow(3, 2, 10),
		pow(3, 3, 20),
	)
}
//----------------------------------------------
```
ifと言うより関数が独特に感じる。

上記のコードを走らせると、こんなエラーが返ってくる。

```e1.go
./prog.go:12:2: not enough arguments to return
	have (float64)
	want (float64, float64)
./prog.go:17:6: multiple-value pow() in single-value context
./prog.go:18:6: multiple-value pow() in single-value context
```
内容としては引数と戻り値の数が一致してないよ!ってことっぽい。

原因としては、ifの外側の`return`に戻り値が一つしかない点にある。

それを修正すると、

```e2.go
./prog.go:17:6: multiple-value pow() in single-value context
./prog.go:18:6: multiple-value pow() in single-value context
```
が返ってくる。

単一の変数なのに、中に二つも数字があるよ!ってことっぽい。

この原因は`fmt.Println(,)`みたいな書き方をしている所にあるっぽい。

色々書き直して、最終的にこんな感じに……

```Exacer_if.go
package main

import (
	"fmt"
	"math"
)

func pow(x, n, lim float64) (float64, float64) {
	if v := math.Pow(x, n); v < lim {
		return v, lim
	}
	return lim, n
}

func main() {
	fmt.Println(pow(3, 2, 10))
	fmt.Println(pow(3, 3, 20))
}
```
一応うまいくいった。

ただ面白いのが、戻り値を省略することができない点。

戻り値の数だけ、きちんと明記しなければならない。

可読性の観点でいえば、非常に重要機能だと思う。

何より、この次も非常に面白かった。

```if_else.go
//---------------------------------------------
func pow(x, n, lim float64) float64 {
	if v := math.Pow(x, n); v < lim {
		return v
	} else {
		fmt.Printf("%g >= %g\n", v, lim)
	}
	// can't use v here, though
	return lim
}

func main() {
	fmt.Println(
		pow(3, 2, 10),
		pow(3, 3, 20),
	)
}
//-------------------------------------------
```
面白いのって`fmt.Printf("%g >= %g\n", v, lim)`の文。

これって`return`だと戻り値の制約に引っかかる所を、

表示の文を入れることで、それに対処している。

`if-return`みたいな思考回路の私には一生思いつかない書き方。

少し詰まったExercise

```Newton_Raphson.go
package main

import (
	"fmt"
)

func Sqrt(x float64) int {
	var z float64 = 1
	var i int = 1
	for ; i < 11; i++ {
		z = z - (z*z-x)/(2*z)
		fmt.Print(z, "\n")
	}
	return (i)
}

func main() {
	fmt.Println(Sqrt(2))
}
```
・iは`0+1`からスタート
・zをしくじってfor内に書いてしまう

なんてことをしていました。

Switch構文は良いですね!

Fortranの`case`より使い勝手がよさそうです。

……気になるのが、Fortranの`case`って数値だけしか取れないんですかね?

正直一番気になったのは`defer`

便利そうな構文で上手に使えれば面白そうでした。

```defer.go
//----------------------------------
func main() {
	fmt.Println("counting")

	for i := 0; i < 10; i++ {
		defer fmt.Println(i)
	}

	fmt.Println("done")
}
//---------------------------------
```
普通なら評価が終わった順に何かしらされますが、

終了した全部の評価を逆順ソートして出力するみたいな動きですかね?

何か悪さができそうですね………

#感想
`Flow control statements: for, if, else, switch, and defer`

まで終了しました。

想定していたスピードよりも大分遅いですが、ぼちぼちとしておきます。

`A Tour of Go` ですが、

色々とimportについての説明が欠片もないので、

少し大変かなぁと。
リモートでデュアルブートを切り替える

以前使っていた旧PCにUbuntu、Windowsをデュアルブートして遊んでいたのだが、キーボードが壊れしばらく放置していた。

時がたち、ふとWindowsをアップデートしようと立ち上げるもキーボードがない。
デフォルトでUbuntuを起動する設定しているのでWindowsが立ち上がらない。

メインPCからキーボードをつなぎなおすのも億劫なので、どうにかこうにかリモートでWindowsを立ち上げるお話です。

# 環境
* 旧PC
  * キーボード、マウス接続なし
  * ディスプレイはつながっている
* OS
  * Ubuntu 18.04(デフォルト)
  * Windows 10
* GRUB2

# やったこと
起動時、GRUBのメニューに表示される場合、Windowsの位置を控えておく

例えば、
```
Ubuntu
memtest+
Windows
```
であれば、上から0,1,2の番号が割り当てられるので、
2番となる。

Ubuntuが立ち上がり、SSHでつないで、
```
$ sudo grub-reboot 2 
```
grub-rebootは次回起動時のGrubメニューのデフォルトを設定するコマンド。

# その後
無事、切り替えができるようになったのだが、再起動ごとに上のコマンドをうち、再起動を行うはめに・・・

素直にキーボード買って来た方が良さそうですね。
競技プログラミング練習記 No.63【ABC101練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC101](https://atcoder.jp/contests/abc101)を解きました。
3完です！
Dは難しくて解けていません。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A | 2min |-| 8ms|
| B | 3min |-| 6ms|
| C | 9min |-| 7ms|

## A - Eating Symbols Easy
```c++
  string s;
  cin >> s;
  int ans = 0;
  for(const auto&  c : s)
  {
    if (c == '+') ans++;
    if (c == '-') ans--;
  }
  cout << ans;
```

`+`がきたら`1`増やして、`-`がきたら`1`減らせば答えがわかります。

## B - Digit Sums
``` c++
  int n;
  cin >> n;

  int num = n;
  int a = 0;

  while(num > 0)
  {
    a += num % 10;
    num /= 10;
  }
  cout << (n % a == 0 ? "Yes" : "No");
```

`%10`の値を足して、`10`で割ることを繰り返せば各桁の和が求まります。
`n`の元の値は後で使うので、二次変数`num`で受けています。

## C - 	Minimization

``` c++
  ll n, k;
  cin >> n >> k;
  if (n == k) cout << 1;
  else cout << 1 + (n - k - 1) / (k - 1) + 1;
```
入力は数列 $A_i$ もあるのですが、結論から言うと不要です。
`N`と`K`だけで答えがわかります。

$A_i$ は $1,2,...,N$ を並び替えたものなので、 $1,2,...,N$ をそれぞれちょうど1つずつ含みます。
つまり、数列内の最小値は必ず`1`になりますね。
数列の要素をすべて等しくすることが目的で、最小値が必ず`1`なので、最後は`1`が`N`個つづく形になります。

ここで、連続した`K`個の要素で`N`個の要素をカバーすることを考えます。$A_i$ の値についてはいったん忘れます。
最小個数でカバーする場合、`N / K`個の範囲でカバーできますね。
ですが、ここでは`K`個のそれぞれの範囲は隣の範囲と1要素分だけ重複するようにします。
こうすると、ある範囲内を最小要素で置き換えた場合、となりの範囲にもその結果を影響させられます。

この形にしたら、あとは置き換え処理の順番を考えます。
目的は全要素を`1`に書き換えることでしたね。$A_i$ のうち`1`が現れるのは1か所だけです。
そのため、`K`の範囲のうち`1`を含むもの1番目に、あとは隣接する範囲から順に処理していきます。
そうすると、最小手順で`1`が`N`個つづく形になります。

この個数は`1 + (n - k) / (k - 1)` ですね。
割り算の部分は切り上げです。切り上げに対応するため、コードでは少し違う処理もしています。
`N`要素のうち、初めの1回は`K`の範囲をとって、残りの`n-k`要素は`k-1`の範囲ずつ取っていく計算です。

以上より、$A_i$ の順番に関係なく、`N`と`K`だけで答えを出すことができました。

以上です。ありがとうございました。
Vue CLIでbuildしたWebサイトを公開する方法

#この記事で行うこと
この記事ではVue CLIで作成したプロジェクト（Webサイト）をデプロイして公開するまでの手順を解説しています。

#背景
今回初めてvue-cliを使ったWebサイトを作成して「いざ公開」という時につまづいてしまった為、対処方法をまとめました。

#参考サイト
下記のサイトを参考にさせていただきました。
[・Vue-CLI3でbuildすると画面が真っ白になる](https://qiita.com/heyheyww/items/5d06936745118045a308)

#環境
Mac
-vue/cli v4.4.6
-npm v6.14.6
-node v12.16.3

#つまづいた原因
作成したデータをbuildすることはできましたが、buildされたdistフォルダをサーバーにアップロードされても何も表示されませんでした。

原因を調べてみるとbuildされたindex.htmlが参照するcssやjsのパスが違うことによるものということが判明
（[Vue-CLI3でbuildすると画面が真っ白になる](https://qiita.com/heyheyww/items/5d06936745118045a308)を参照）

#build準備からアップロード（デプロイ）まで
##buildする準備
プロジェクトのディレクトリ直下にvue.config.jsを作成して下記を記述する。

```vue.config.js
module.exports = {
    publicPath: './'
}
```
以前はpublicPathではなくbaseUrlで実行することができたようですが、現在baseUrlでbuildを行うと
```ERROR  Invalid options in vue.config.js: "baseUrl" is not allowed```
と表示され正しくbuildすることができません。

##build
ターミナルを開いて下記のコマンドを実行していきます。

buildしたいディレクトリに移動
```cd ディレクトリ名前
```
buildする
```npm run build
```
実行後に
``` DONE  Build complete. The dist directory is ready to be deployed.```
と表示されればbuildは完了です。

##サーバーにアップロードする
あとはサーバーの任意のディレクトリに```/dist```フォルダ内にあるファイルやフォルダをアップロードすれば完了です!

#最後に
以上がVue CLIで作成したプロジェクト（Webサイト）をデプロイして公開するまでの手順です。
この記事が参考になれば幸いです。
Pythonスクレイピングの基礎の基礎

PythonのrequestsモジュールとBeautiful Soupを使った
スクレイピングの基礎の基礎


Webからコンテンツ(主にHTML)を取得する
--

- URLのHTMLを全て取得して表示するコード：

```python:HTMLを取得
import requests

url = "https://hogehoge12345.html"

response = requests.get(url)
response.encoding = response.apparent_encoding

print(response.text)
```

・``requests.get()``で, 引数のURLに対してHTTPリクエストを送信し, サーバーから返されるHTTPレスポンスを戻り値にする.
・apparent_encodingで, 文字化けが極力起こらないようにする.
・response.textが、取得したコンテンツの中身
・URLでアクセスできるものなら, CSVや画像ファイル、動画ファイルなども取得できる(コードは上と変わらない).

```python:1秒の間隔を空ける
import time

time.sleep(1)
```

・複数のURLから連続してHTTPを取得する際は, 相手のサイトに迷惑をかけないように最低1秒ずつ間隔を空けること.
・そもそもそのサイトにプログラムからアクセスしてもよいのか, 公開している内容をデータ化してといった利用制限を確認する必要がある.

```python:取得したWebコンテンツをファイルに保存する
response = requests.get(url)
response.encoding = response.apparent_encoding

exam_html = response.text

with open('exam.html', mode='w', encoding='utf-8') as fp:
    fp.write(exam_html)
```

HTMLの解析
--

- **Beautiful Soup** というライブラリを使う.
- HTMLの字句解析をして, タグなどをデータ構造として取得するプログラムをHTMLパーサーという.

```python:
import requests
from bs4 import BeautifulSoup

url = "https://hogehoge12345.html"
response = requests.get(url)
response.encoding = response.apparent_encoding

# HTMLを解析する
bs = BeautifulSoup(response.text, 'html.parser')

# ulタグで囲まれた部分を抽出する
ul_tag = bs.find('ul')

# ulタグの中のaタグを抽出する
for a_tag  in ul_tag.find_all('a'):

    # aタグのテキストを取得
    text = a_tag.text        # => "クリックするとリンクに飛びます"

    # aタグのhref属性を取得
    link_url = a_tag['href'] # => "https://hogehoge12345.html/next"

    print('{}: {}'.format(text, link_url))
```

・``bs.find('ul')``で, \<ul>から\</ul>までのHTMLコードを取得
・findメソッドは先頭から辿って最初の要素だけ取り出すが, find_allメソッドは全ての要素をイテラブルに取り出す(= forループに使える). 詳しくは[リンク](https://kubogen.com/web-programing-252/).


CSSセレクター
--

-　特定のタグ（あるCSSクラスを持つタグなど）の抽出には, **CSSセレクター**を用いる
-　タグとCSSクラスをドットで繋いで表現 ``<div class="exam_exam1"> -> div.exam1``

```python:selectメソッド
# div.exam1で囲まれた部分を抽出する
div_exam1 = bs.select('div.exam1')
```
・select()は, 機能はfindやfind_allと同じようにHTML要素の取得してリストで返すことだが, 検索条件にCSSセレクタを指定できる(詳しくは[リンク](https://gammasoft.jp/blog/difference-find-and-select-in-beautiful-soup-of-python/)).
Vuetifyのpaginationのshadowを無くす

## Vuetifyのページネーションのシャドーを消したい！

Vuetifyの`v-pagination`はデフォルトでシャドーが付いています。
しかし、マテリアルデザインでシャドーの無いフラットなデザインにしたいのでこいつを消してやりたい…。

![スクリーンショット 2020-08-03 12.19.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206542/2f599fa2-73fa-8f50-836c-cf0b03821b67.png)


## 結論

![スクリーンショット 2020-08-03 12.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206542/dfecea72-ae27-7d18-c7ab-c9f9b74033e4.png)


CSS書いて読み込んむ

```css
.v-pagination__navigation {
  box-shadow: none !important;
}

.v-pagination__item {
  box-shadow: none !important;
}
```

### nuxt.jsならnuxt.config.jsで読み込む

全体で読み込んで上げたい場合はこの様に呼び出す。

```js:nuxt.config.js
export default {
  css: [
    '@/assets/css/globalStyle.css'
  ]
}

```
docker rails db:migrateにてエラー(StandardError: An error has occurred, all later migrations canceled:)

Qiita初投稿となります。よろしくお願いします。

# 環境
- image: mysql:5.7
- FROM ruby:2.6.3
- Rails 5.2.4.3

# エラー

docker環境で構築したrailsにて、docker-compose exec web rails db:migrateとしたところ、以下エラー

```
rails aborted!
StandardError: An error has occurred, all later migrations canceled:

Mysql2::Error: Invalid use of NULL value: ALTER TABLE `tasks` CHANGE `name` `name` varchar(255) NOT NULL
....以下省略

```

# 原因
完全な特定には至らなかったが、以前行ったマイグレーションの処理がうまくいっていない可能性がある。テーブル作成周りでエラーが出ていた。
エラーのMysqlに関しては修正しているはず・・・。

#解決方法
データベースのリセットを行う。


```
$ docker-compose exec web rails db:migrate:reset
```
再度マイグレーション

```
$ docker-compose exec web rails db:migrate
```
これで修復できました。確認の為、コンソールから正しくDB周りが動いてるか見るといいと思います。
調べるときどのサイトを見れば良い？


`公式ドキュメント`・・内容は正確。でも分かりにくい
`大学が出してるサイト（〜ac.jp）`・・良い
`Quita`・・信頼できる投稿者を見つけよう
`会社のサイト`・・大体正しいけどちょっと注意
ls -la | grep　文字列

`ls -la | grep　文字列 `・・指定された文字列が含まれる全てのファイルやディレクトリを詳細に表示する


結果（例）

```
drwx------@  3 ・・・
drwx------@  7 ・・・
drwx------+  4 ・・・
-rwx------@ 17・・・
drwxr-xr-x   3 ・・・
```

※dから始まる→ディレクトリ
　-から始まる→ファイル
JSのprototype_初心者覚書

初心者が記事などを見てメモをしています。
（記事を理解しようとしてメモをしているだけなので、下記の記事を見た方がわかりやすいです。すみません、、）

参考：
[【JavaScript入門】プロトタイプ](https://www.sejuku.net/blog/47722)

###「prototype」とは？
「プロトタイプ」と呼ばれる最小テンプレートがあり、それをコピーして新しいオブジェクトを作るようなイメージ
オブジェクト同士の繋がりを保持する機能もあるため「継承」も簡単に行えるわけです。JavaScriptはプロトタイプベースのオブジェクト指向言語

###「prototype」の使い方

#### 基本的なコンストラクタの作成方法

```js

var User = function(name,age){
  this.name = name;
  this.age = age;
}
var taro = new User('太郎','12');
console.log(taro);
```

```console.js

User {name: "太郎", age: "12"}
age: "12"
name: "太郎"
__proto__: Object

```


#### prototypeを使ってメソッド定義

- プロパティだけでなく、メソッドも一緒に定義する場合、プロトタイプでメソッドを効率的に定義することができます。

```
オブジェクト名.prototype.メソッド名＝function（）{}
```

- メソッドはどのインスタンス先でも内容は同じなので、一緒にコピーするのは無駄
- 「参照」であれば、大量のメソッドがあってもインスタンス化する度にメモリが圧迫されない

```js
var User = function(name,age){
  this.name = name;
  this.age = age;
}
User.prototype.getName = function(){
  return this.name;
}
```


```js
var User = function(name,age){
  this.name = name;
  this.age = age;

  this.getName = function(){
    return this.name;
  }
}
```
- 参照されないので、毎回メソッドがコピーされてメモリを無駄遣い



```複雑な書き方.js
var User = function(name, age) {
    this.name = name;
    this.age = age;
}


User.prototype.getName = function() {
    return this.name;
}

User.prototype.getAge = function() {
    return this.age;
}
```

- オブジェクト形式でメソッドを定義すると簡潔に書ける

```完結な書き方.js
var User = function(name, age) {
    this.name = name;
    this.age = age;
}

User.protptype = {
  getName: function(){
    return this.name;
  },
  getAge: function(){
    return this.age;
  }
}
```

### プロトタイプチェーンの仕組み

```js
var User = function() {};
var MemberA = function() {};
var MemberB = function() {};
```

```js
MembarA.prototype = new User():
```
- 「User」と「MemberA」のプロトタイプはそれぞれ参照できる状態に

```js
MemberB.prototype = new MemberA();
```
- 「MemberB」と「User」も同じように参照関係


```js
var User = function() {};
var Member = function() {};

User.prototype.hello = function() {
    return 'こんにちは！';
}

Member.prototype = new User();
```

```js
Member.prototype.hello();
"こんにちは！"

```
Please verify your account to install this add-on plan を解決する (Herokuのアドオンの追加)

自分がrailsチュートリアルを進めていく上で、発生したエラーを記録していきます。
ハードはMacBook Air, 開発環境はVScodeを用いています。

#発生しているエラー

railsチュートリアル11章の最後に、「SendGridのHerokuアドオンを追加するために、次のコマンドを実行します。」という指示があるので、それに従って、以下のコマンドを実行するとエラーが発生しました。

```
$ heroku addons:create sendgrid:starter
Creating sendgrid:starter on ⬢ tutorial-20200717... !
 ▸    Please verify your account to install this add-on plan
 ▸    (please enter a credit card) For more information, see
 ▸    https://devcenter.heroku.com/categories/billing Verify
 ▸    now at https://heroku.com/verify
```

#解決策

https://heroku.com/verify へ飛んで、クレジットカード情報や、住所を登録します。

Herokuはクレジットカード情報を登録すると1000時間/月の分だけ無料で利用できます。無料枠を超えると、アプリは停止し、利用できなくなります。なので、クレジットカードを登録しても、**勝手に課金はされないので安心してください。**

---

役に立ったら、是非LGTMボタンをポチッと押していただけると嬉しいです。
一緒に Rails学習 頑張りましょう！:raised_hand_tone1:
正規表現でグループの繰り返しがあるときのキャプチャは最後の結果だけになる

#概要
やりたかった正規表現による抽出(それ自体繰り返しされるグループを抽出)は（おそらく)(正規表現だけでは）できないということがわかった。その代わり目的は正規表現においては先読みによる置換で達成できるが、GASはサポートしていない。splitなどで代替するのが良いか。

#やりたかったこと
spreadsheetにある、
```παρά (+gen) from, by; (+dat) with; (+acc) beside = 194```
という文字列から
```παρά (+gen) (+dat) (+acc)```
という文字列を得たい。

#やったこと
* spreadsheetの関数で`regexextract`を使う。
* apps scriptで`re.exec(text)`してみる。
* 先読み！
* splitゴリ押し

#結果
##SparedSheetで頑張る！
```javascript
=regexextract(A1,"([^ ]+)(?:(?:[^\(]+)(\(.*?\)))*")
```
これはだめ。セルにエラー（#REF!）が出る
```Error
Array result was not expanded because it would overwrite data in A1.```

ちなみに

```javascript
=regexextract(A1,"([^ ]+)(?:(?:[^\(]+)(?:\(.*?\)))*")
```

とすれば`παρά`だけが出る。要するにマッチしてキャプチャする要素が一つだけなら行けるらしい。
それ以上の時はApps Scriptを書けばいいのかと思って次に、
##Apps Scriptで頑張る！

```javascript
const text = "εἰς (εἷς_1) (+acc) into, to, for (prep) = 1767";
/([^ ]+)(?:(?:[^\(]+)(\(.*?\)))*/.exec(text).forEach(function(element){
  Logger.log(element);
});
```
を走らせてみる。しかし結果は、

```
[20-08-03 11:18:33:886 JST] εἰς
[20-08-03 11:18:33:888 JST] (prep)
```

となる。これはcaptureを全てにしてみると何が起きてるかわかる。

```javascript
/([^ ]+)(([^\(]+)(\(.*?\)))*/.exec(text).forEach(function(element){
  Logger.log(element);
});
```
とすると

```
[20-08-03 11:21:27:879 JST] εἰς (εἷς_1) (+acc) into, to, for (prep)
[20-08-03 11:21:27:881 JST] εἰς
[20-08-03 11:21:27:882 JST]  into, to, for (prep)
[20-08-03 11:21:27:883 JST]  into, to, for 
[20-08-03 11:21:27:885 JST] (prep)
```

となる。要するにcapturingは最後の結果しか保持してくれない。後方参照について何か誤解していたみたいだ。

###先人の知恵
https://stackoverflow.com/questions/37003623/how-to-capture-multiple-repeated-groups#:~:text=6%20Answers&text=With%20one%20group%20in%20the,that%20matches%20it%20gets%20stored.

##先読みで頑張る！
正規表現のこといろいろ調べてたらなんか先読みあと読みって概念があるらしいことに気づいて、これ使えるんじゃね？って思ってやったら...

###GASのマニュアル
https://support.google.com/docs/answer/3098245
ここに
>メモ
Google サービスでは RE2 正規表現を使用しています。Google スプレッドシートでは、Unicode 文字クラスのマッチング以外の RE2 を使用できます。詳しくは、RE2 正規表現の使い方についての説明をご覧ください。

とある。
そしてRE2では、
https://github.com/google/re2/blob/master/doc/syntax.txt
>
| (?=re) | before text matching «re» NOT SUPPORTED |
|:--|:--|
| (?!re) | before text not matching «re» NOT SUPPORTED |
| (?<=re) | after text matching «re» NOT SUPPORTED |
| (?<!re) | after text not matching «re» NOT SUPPORTED |

だそうです（ｼｭﾝ）。
##splitゴリ押し
結局これだよ

```javascript
function EXTRACT_WORD_INFORMATION(string) {
  const splitedBySpace = string.split(" ");
  const word = splitedBySpace[0];
  const followings = splitedBySpace.slice(1);
  const informations = followings.filter(function(element){
    return /\(.+\)/.test(element);
  });
  const result = word + " " + informations.join(" ");
  Logger.log(result);
  return result;
}
```

#教訓
正規表現だけに頼ってはだめ。
Githubコミットまでの流れ

コード変更
↓
【状態】Untracked（エディタでは赤色でModifiedと表示される）・・新規にファイル作った時
↓
 `git add ファイル`
↓
【状態】Staged(エディタでは緑色でModifiedと表示される）・・次コミットできる
↓
`git commit`
↓
【状態】unmodified・・コミットした後（エディタに表示はされない）


※ModifiedとStagedはブランチ移動したときに受け継がれる
該当ブランチをcommitしたら消える
Laravel-SnappyでPDFを出力するときにチャートが表示されなくなった

Laravel 環境でPDFを作成するとなると Laravel-snappy を使うとケースがあると思います。ついでに google chart api を使って、グラフも出力してしまおう。

この記事では、そんな環境下で突如としてグラフが出力されなくなった方のお役に立てれば良いなと思いまとめた記事になります。

## 環境

現象が発生した環境です。

- Laravel 5.8 (5.8.36)
- laravel-snappy 0.4.6
- wkhmltopdf 0.12.4

## 参考記事

- [Laravel-Snappyでpdfを出力できるようになるまで](https://qiita.com/ats05/items/cbb2956727cad2681d1d)
- [Google charts are not showing in Snappy PDF](https://stackoverflow.com/questions/62433527/google-charts-are-not-showing-in-snappy-pdf)

## 今回発生した現象

２０２０年５月辺りから、PDFに表示できていたグラフが表示されなくなり、真っ白なPDFが作成されてしまう現象が起きるようになりました。

それまでは、[Laravel-Snappyでpdfを出力できるようになるまで](https://qiita.com/ats05/items/cbb2956727cad2681d1d) でご説明頂いているような対応で出力しています。

### 問題が発生するまで使っていたコード

```javascript
function init() {
    google.load('visualization', '1.1', {
        'packages': ['corechart'],
        callback: drawCharts
    });
}
```

## 修正後のコード結果

原因の說明の前に対応策から、出力できるように書き換えたコードはこのようになります。
[Laravel-Snappyでpdfを出力できるようになるまで](https://qiita.com/ats05/items/cbb2956727cad2681d1d)にも書かれていますが、`setOnLoadCallback` メソッド内で Promise が使われているため、 `wkhtmltopdf` がES6に対応しておらず、JavaScriptが発火しません。その代わりとして、 `setInterval` メソッドで対応することで、比較的最近のバージョンでも出力できるようになっています。

コード内に書かれている `'48'` というのが重要で、[Googleのサンプル](https://developers.google.com/chart/interactive/docs/basic_load_libs) にかかれている `current` にするとエラーになってします。（原因は、調査中）

### 修正後のコード

```javascript
function init() {
    google.charts.load('48', {'packages':['corechart']});
    var interval = setInterval(
        function() {
            if ( google.visualization !== undefined && google.visualization.DataTable !== undefined && google.visualization.PieChart !== undefined ){
                clearInterval(interval);
                window.status = 'ready';
                drawCharts();
            }
        }, 100);
}
```

## 原因

TBD
React native 自分メモ

##初めの作業
```
cd 作業ファイル
expo init pjt_name
cd pjt_name
```

```
npm install @react-navigation/native
```

```
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
```


```ruby:webview導入
expo install react-native-webview
```


```ruby:redux導入
yarn add redux react-redux
brew update && brew cask install react-native-debugger
yarn add redux-devtools-extension
```
Materializeをflexbox化してcolの高さを適応的に揃える

# ポイント
- floatで作るグリッドは横並び部品のcolの高さを揃えることができない。揃えようとしたらheightに固定値を入れるしかない
- materialize.cssなどfloatベースで作られているグリッド実装があるので注意。ただし、適当なcssを足してflexboxベースで動かすようにすることは可能

# floatでグリッドを作った場合の動き
float: leftな要素は一行に入りきらないときに「上から下に入れる場所を探索していって、入れる行が見つかったら左に(止まるまで)スライドして行って、結果全域が入ればそこに表示」という仕組みと思われる。なので一行目に並んでる要素たちの高さが一定でないと変なところに配置される。

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<div class="container blue" style="width: 600px;">
    <div class="row orange" style="margin-bottom: 0;">
        <div class="col s6">
            <div class="card yellow">
                1.あああああああああああああああああああああああああああああああああああああああ
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                2.一行目のcolの高さが不一致だと
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                3.これが変な位置に入ってしまう
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                4.ああああああ
            </div>
        </div>
    </div>
</div>
```

![スクリーンショット 2020-10-02 9.13.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56846/5d4dc200-8f72-a0bb-c55e-cdc9105595e5.png)

# flexboxでグリッドを作った場合の動き
flexboxは横並びのcolの高さ (の関係性) を明示的に指定できるようになっている。ちなみに2020年7月現在、flexboxを使っていてもそれ自体が致命的な表示崩れになることはあんまりなさそう。

- align-items: stretch (デフォルト: 高い方に合わせて低い部品も引き伸ばす)
- align-items: center (中央に寄せる)
- その他詳しくは[公式](https://developer.mozilla.org/ja/docs/Web/CSS/align-items)を参照

flexboxはほかにも、部品を並べる方向、幅が足りないとき折り返すかどうか、各部品の伸縮する割合、配置する順番、などなどいろいろ調整できる。メディアクエリを組み合わせるとモバイルときは1,2,3 ラップトップ幅では1,3,2みたいな順番で表示・折り返しなどできる。

# materialize.cssをflexbox化する
float関係のcssを打ち消して、flexbox関連のcssを足すと、materialize.cssを使ったままflexboxベースでレイアウトできるようになる。その指定のためのcss classの名前をとりあえずm-flexとかにすると、こんな感じ。

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style type="text/css">
.row.m-flex{
    float: none;
    display: flex;
    flex-flow: row wrap;
}
.row.m-flex.m-flex .col{ /* 優先度を上げるために2回指定 */
    float: none;
}
.row.m-flex.m-flex .col:not([class*="offset-"]){
    margin-left: unset; /* 元々ついているmargin-left: autoを解除 */
}
</style>
<div class="container blue" style="width: 600px;">
    <div class="row m-flex orange">
        <div class="col s6">
            <div class="card yellow">
                1.あああああああああああああああああああああああああああああああああああああああ
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                2.一行目のcolの高さが異なっていても
            </div>
        </div>
        <div class="col s6">
            <div class="card yellow">
                3.これは次の段に必ず入る
            </div>
        </div>
        <div class="col s4 offset-s1">
            <div class="card yellow">
                4.offsetとかもそのまま使える
            </div>
        </div>
    </div>
</div>
```

![スクリーンショット 2020-10-02 9.12.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56846/9eac124d-6d0b-7bdc-f478-391d59e80f02.png)
非同期的なバリデーションエラーを VeeValidate にマニュアルで追加する

Vue のバリデーションライブラリの一つである [VeeValidate](https://logaretm.github.io/vee-validate/) を使うと動的なバリデーションチェックが行われるフォームを低コストで実装することができます。通常はクライアント側で持っているデータやロジックに基づいたバリデーションを行いますが、 Web API など非同期的な処理を挟んだ動的なバリデーションチェックを実装する機会があったので、その方法をメモします。

なお API client の実装自体は本題から逸れるので割愛します。

## TL;DR

- [ValidateProvider の applyResult](https://vee-validate.logaretm.com/v2/guide/components/validation-provider.html#adding-errors-manually) を利用すればバリデーションエラーをマニュアル追加できる。

## 環境

- Vue: 2.x
    - [Composition API](https://composition-api.vuejs.org/) を使用
- VeeValidate: 3.2.5
- TypeScript: 3.7.4

## 実装

シチュエーションとしてはホテルや旅客機などの予約日を入力するフォームを想定しています。
以下のコードでは日付のフォーマットなどをフロントエンドのみでバリデーションチェックし、指定した日付が予約可能かのチェックでサーバへの問い合わせを行います。

```vue:components/price.vue
<template>
  <ValidationProvider
    v-slot="{ errors }"
    ref="provider"
    name="予約日"
    rules="required|'date_format:dd/MM/yyyy'"
  >
    <input
      v-model="value"
      type="text"
      @blur="checkRegistrable"
    />
    <span>{{ errors[0] }}</span>
  </ValidationProvider>
</template>

<script lang="ts">
import { createComponent, ref, watch } from '@vue/composition-api'
import { ValidationResult } from 'vee-validate/dist/types/types'

import { useReservationDate } from '~/compositions/reservation-date'

export default createComponent({
  setup() {
    const { checkIfRegistrable } = useReservationDate()
    const value = ref<string | null>(null)
    const checkRegistrable = async () => {
      const result: ValidationResult = await provider.value.validate()
      if (!result.valid) {
        return
      }

      const canRegister: boolean = await checkIfRegistrable(val.value)
      if (!canRegister) {
        provider.value.applyResult({
          errors: ['この日付は指定できません。'],
          valid: false,
          failedRules: {}
        })
      }
    }
    return {
      value,
      provider
    }
  }
})
</script>
```

`<input>` タグで blur イベントが発生した際に `checkRegistrable` というメソッドが実行されます。

メソッド内部ではまず通常のバリデーションチェックを行い、結果が valid だった場合は予約日に関するロジックを集約した composition の `useReservationDate` から `checkIfRegistrable` を呼び出します。ここで `checkIfRegistrable` は API の呼び出し結果を boolean で返すようなメソッドとなる想定です。

この結果が false の場合は [ValidateProvider の applyResult](https://vee-validate.logaretm.com/v2/guide/components/validation-provider.html#adding-errors-manually) というメソッドを利用してバリデーションの状態を invalid に変更します。
Github基本コマンド


<h2>ローカルをリモートに反映させ、リモートをローカルに反映させるまで</h2>
ソースコードの変更
↓
`git add —all`
↓
`git commit　-m “コミットメッセージ”`
 ※-m以下がない場合viモードでコミットメッセージを入力
　(iでインサートモードにする→入力→escでインサートモード終了→:wq!で保存＆終了）
↓
`git push　origin ブランチ名`
↓
githubでマージする
↓
`git pull origin master` リモートをローカルに反映


<h2>その他のコマンド</h2>
`git init プロジェクト名` ・・プロジェクト名/.git（.gitディレクトリ）を生成し、その中にリポジトリ作る
`git checkout ブランチ名`・・ブランチに移動
`git branch -d ブランチ名`・・ブランチを削除
`git status`・・branchの場所とか、修正ファイルが何かとか分かる
`git branch -v`・・ブランチ確認
`git log`・・commitのlogを見る
<a>, <button>, <input type=button>どれを使うか。

リンクを付与するときには、aタグ、buttonタグ、inputタグのどれでいくか。


### 結論
初心者の僕が悩みながら、どれを使うかを調べた結果、

- 一般的には、aタグでボタンタイプをつける。

- formタグでつかいたいなどの特殊なときは、button を使うこととする。

buttonタグを使う場合は、
リンク先は、onclick=”location.href=’aa.html'”と記述する。aタグよりもちょっと長くなる。

#### 参考文献
https://www.ameamelog.com/html-a-button/
JavaScript: Promise.raceのどれかがエラーになったらどうなるか？

JavaScriptの`Promise.race`は2つ以上のPromiseに対して、早く完了したものを戻り値として得られる関数です。

もし、`Promise.race`で競争するPromiseのうち、どれかがエラー(reject)になったら、どうなるのでしょうか？ これについて検証してみます。

## 早いほうがエラーになった場合

下のサンプルコードでは、2つのPromiseが競争します。

ひとつは、100ミリ秒後にエラーになるPromise。もうひとつは、200ミリ秒後に成功裏に完了するPromiseです。

この2つのPromiseを`Promise.race`で処理すると、前者のエラーのほうが勝ち、`new Error('100ミリ後にエラーになった処理')`のほうが戻り値になります。


```javascript
async function test1() {
  // 100ミリ後にエラーになる処理
  const willError = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('100ミリ後にエラーになった処理')), 100),
  )

  // 200ミリ秒後に完了する処理
  const willSuccess = new Promise(resolve =>
    setTimeout(() => resolve('200ミリ後に完了した処理'), 200),
  )

  try {
    await Promise.race([willError, willSuccess])
  } catch (error) {
    console.log(error.message)
    //=> "100ミリ後にエラーになった処理"
  }
}

test1()
```

## 遅いほうがエラーになる場合

今度は、エラーのほうが遅い場合です。

ひとつめのPromiseは、100ミリ秒後に成功裏に完了します。もうひとつは、200ミリ秒後にエラーになるPromiseです。

この2つのPromiseを`Promise.race`で処理すると、前者のほうが勝ち、戻り値としては文字列の`'100ミリ後に完了した処理'`になります:


```javascript
async function test2() {
  // 100ミリ秒後に完了する処理
  const willSuccess = new Promise(resolve =>
    setTimeout(() => resolve('100ミリ後に完了した処理'), 100),
  )
  
  // 200ミリ後にエラーになる処理
  const willError = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('200ミリ後にエラーになった処理')), 200),
  )

  const result = await Promise.race([willSuccess, willError])
  console.log(result)
  //=> "100ミリ後に完了した処理"
}

test2()
```