OmniAICreator/Qiita-1.07M huggingface dataset:
deviseメール認証時、認証メールに画像を挿入する --備忘録--

#前提
deviceのログイン機能
[【Rails】deviseを導入してみる
](https://qiita.com/Hal_mai/items/350c400e8763ce0487a3)

メールの認証機能
[【devise】メール認証のサインアップ・イン・アウト機能](https://qiita.com/jungissei/items/a3bb837cfdedda7b5d85)
 [devise でメール認証を実装したい【Rails】](https://k-koh.hatenablog.com/entry/2020/09/22/164141)

上記2つの機能を実装済みです。

#mailerをオーバーライドし、メソッドを作成
「app/controllers/users」に「mailer.rb」を作成します。
deviceのmailerを継承します。


```ruby:mailer.rb
class Users::Mailer < Devise::Mailer
end
```
「config/initializers/devise.rb」の設定をします

```ruby:devise.rb
config.mailer = 'Users::Mailer'
```

挿入したい画像を「/app/assets/images/mailer/」に入れる。
先ほど作成した「mailer.rb」にHTML形式のメールにで挿入する為のメソッドを追記する。

```ruby:mailer.rb
class Users::Mailer < Devise::Mailer
  before_action :add_image

  private

  def add_image
    images = ['***.png', '***.jpg']

    images.each do |img|
      attachments.inline[img] = File.read("#{Rails.root}/app/assets/images/mailer/" + img)
    end
  end
end
```

#HTMLの編集
[/app/views/users/mailer/confirmation_instructions.html.erb」のファイルを修正する

```ruby:confirmation_instructions.html.erb
<p>Welcome <%= @email %>!</p>

<p>会員登録ありがとうございます。</p>
<%= image_tag attachments['***.png'].url, alt: "***" %>
<%= image_tag attachments['***.jpg'].url, alt: "***" %>
<p><%= link_to 'アカウント有効化', confirmation_url(@resource, confirmation_token: @token) %></p>
```
こちらで会員登録した際に画像が挿入されています。

以上。ここまで読んでいただきありがとうございます。


#参考
[Rails Devise でパスワードリセットなどのメールテンプレート（Mailer ビュー）をカスタマイズ](https://easyramble.com/customize-mail-template-of-devise.html)

[Deviseの認証メールをカスタマイズする方法](https://www.jabba.cloud/20150820230500/)

[HTMLメールで画像を載せる [rails][初心者]](https://qiita.com/royroy/items/edfeb3ef9c523fce9213)

本番環境
[【Rails】メール送信設定 〜gmail利用〜](https://qiita.com/ozackiee/items/f260f34db4e5c887460d)
Githubに追加されたissueを自動でProjectに追加する

## このページでわかる事
Githubにて新規issueを作成した際に、自動でそのissueをProjectに追加する方法。

## はじめに
GithubのProjectでは、issueやMerge RequestをTrelloなどのカンバンツールのように管理する事ができます。また、issueのopenやclose、reopenに応じてカードを動かすような作業を自動化できます。しかし、自動でissueをProjectに追加する方法が今のところなさそうです。

そこで今回は、Github Actionsを用い、新規issueが作成された際に、自動でそのissueをProjectに追加するよう設定してみたので、その方法を記します。


## 1. Actionsの設定
これ->[GitHub Project Automation+](https://github.com/marketplace/actions/github-project-automation) を利用しています。

`.github/workflows/opened-issues-triage.yml`と言う名前でファイルを作成し、以下をコピペします。 「name」,「project」,「column」は自分の「適当なタイトル」,「Projectの名前」,「カラム名」を正確に記入してください。

```..github/workflows/opened-issues-triage.yml
name: Move new issues into プロジェクト名 (ここは好きに書いてください)
on:
  issues:
    types: [opened]

jobs:
  automate-project-columns:
    runs-on: ubuntu-latest
    steps:
      - uses: alex-page/github-project-automation-plus@v0.3.0
        with:
          project: プロジェクトの名前
          column: カラム名
          repo-token: ${{ secrets.GH_TOKEN }}
```

## 2. Personal Access Tokenの作成
[この記事](https://qiita.com/athlaliel/items/cfef41949f62638c13da)を参考にしています。

2.1. Githubにログイン
2.2. 右上のアイコンから`Settings`をクリック
![settings](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/604b18da-2444-d089-5046-d440243855c1.png)

2.3. 下の方の`Developer Settings`をクリック
![Developer settings](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/2207b5a9-9654-88f4-67db-137c80308bad.png)

2.4. 下の方`Personal access tokens`をクリックし、`Generate new token`をクリック
![Personal Access Tokens && Generate new Token](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/a5375ad6-f354-281b-efbb-6902d8a9c683.png)

2.5. Noteは「GH_TOKEN」とし、Select scopesは「repo」のみチェックをいれる(多分)
![Permition: repo](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/41c0cf93-65e9-c096-4c59-c6cbb5cc3224.png)


2.6. 一番下の`Generate Token`をクリックし、Tokenを作成。

2.7. Token的なやつをコピーする。（Personal access toknesのページにリダイレクトされるので、コピーボタンからTokenをコピーする。一度ページを離れると、そのトークンはもうわからないみたいなので注意してください。）

![スクリーンショット 2021-01-16 19.39.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/cc901b5e-eccd-7427-c04a-585ce44c8737.png)



## 3. リポジトリにてSecret Tokenを設定
3.1 自動化したいリポジトリに移動
3.2 `Settings` -> `Secrets`に移動し、`New repository secret`をクリック
![2021-01-16 19.37.41  Actions secrets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/418b5750-6310-2805-4225-f300ad55ac74.png)


3.3 Nameには`GH_TOKEN`、Valueには`2.7でコピーしたToken的なやつ`をペーストする
![2021-01-16 19.46.40  Actions secrets.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/2d087403-9405-a097-c5d9-5b8d1ec6c86f.png)


## 4. 完了確認
4.1 適当に新規issueを作成する
4.2 Actionsに移動し、以下画像のように緑のマークが出てたら成功。赤いマークが出てたら、失敗している。
僕は、プロジェクト名をタイプミスしていたので一度失敗していた。もしこの記事に間違えがったら、教えてください。

![2021-01-16 19.51.12  Actions · haruu11113_paper.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/254065/e3d83c64-b432-1dec-61d6-c1c747a3d7a7.png)


以上です。
dotenv-rails必要なのか？

### 現在awsで作成しているアプリケーションをデプロイ中に<br>dotenv-rails必要あるのかと思ったので投稿

####・`dotenv-rails`とは

[Railsで使える環境変数を管理できるgem(dotenv-rails)や.envの導入方法](https://qiita.com/ryosuketter/items/ceb592dc6b23a20e51b5)

簡単にいうと自分で変数セットしていろんなところで使えちゃいます。ということなのだが

rails5.2からは`credentials.yml.enc`という物がデフォルトで追加されています。皆さんのconfigフォルダの中にも存在すると思います。これも環境変数指定できいろんなところで使えちゃいます。

どっちも同じならどっち使ってもいいじゃん！て思いますよね〜

ただただ変数をセットする`dotenv-rails`とは違い`credentials.yml.enc`は暗号化して環境変数を保持するんです！そしてconfig/master.keyを使って複合して使うという違いがあります。

環境変数は見られたくないんだけど〜っていうところに使う物なので暗号化は大切ですね！

もし`dotenv-rails`を使い大事な値を.envで管理していると何かの拍子にフォルダを見られた際にふむふむここねといって.env内見られたら終わりです。

`credentials.yml.enc`であれば見られても暗号化されているので「わけワカメ」となるわけですね。

#####おまけ

`credentials.yml.enc`はgitに上げてもmaster.keyがないかぎり他の人はどうしようもないのでデプロイの際にcloneで持ってきてmaster.keyをローカルから引っ張ってこれば使えちゃうんですよね。

セキュリティー面を考えたらこっちの方が良いのは明らかですねー

ただ`credentials.yml.enc`を使用する時には

```
Rails.application.credentials.セットした環境変数
#dotenv-railsだと
ENV['セットした環境変数']
```

長い！！ でもVScodeだと何回か打ってると予測してくれるから問題なし

そして環境変数を設定するときも(dockerだと)

```
docker-compose run -e EDITOR="vim" web rails credentials:edit
```
でvim開いて編集という面倒くささはあります。

ちなみにFile encrypted and saved.とでてしまう人は多分vimが入っていないのでinstallしてください

僕の場合だと

```
Dockerfile
#追加　apt-get install vim
```

いやーまだまだ知らないことがたくさんあって面白いな〜

何か間違っていたらご教授お願いします。

では〜⭐️
UIUXデザインの原則

「[UIUXデザインの原則](https://www.amazon.co.jp/UI-UX%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%AE%E5%8E%9F%E5%89%87-%E5%B9%B3%E7%9F%B3-%E5%A4%A7%E7%A5%90/dp/434492620X)」を読んで参考になった部分もまとめました。![img.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197635/f1a62e3f-9383-5e10-3691-402bfd1a2dcc.jpeg)


#UIUXをデザインするということ
####ユーザーのサービスの期待値を正しく理解し、「自分だとこう使う」とイメージしやすくする状態をつくる。
- ユーザーがサービスに何を期待しているか
- ユーザーがどんな事を感じたり、不満に思っているか

#ユーザー体験の時間軸を捉える
####サービス利用中だけでなく、前後の体験も含めてデザインする
###【例】
####利用前
【課題】
難しそうで不安

【対策】
サイトの雰囲気をPOPにしてとっつきやすくする
####利用中
【課題】
わからなくなったらどうしたら？

【対策】
テンプレートを用意する・問い合わせフォームをわかりやすく

####利用後
【課題】
結果を他の人とも共有したい

【対策】
シェア機能

#ユーザーテスト
使い勝手の検証の他に、サービスを利用してもらいながら思考発話してもらうこと。
まだサイトに存在していないコンテンツや機能のニーズが掴める。

###ユーザーテストの実施フロー
####(1)ユーザーの目的を立てる
- 使い勝手検証するためなのか、潜在ニーズを探るためなのか等 目的を明確にする

####(2)使う人のペルソナを考える
- テスト対象者の性別や年代・経験の度合い等
- そこまで細かくなくてOK

####(3)シナリオ作成（タスク設計）
- どのようなテスト内容にするか
- どのような質問をユーザーに実施するか

#####テストの目的
- 設計通りに利用するか
- 分かりづらい点、情報不足している点を洗い出す
- ユーザーがどのような情報を求めているか
- 既存のユーザーがスムーズに利用できているか

#####シナリオ作成できをつける
- 初めて利用するユーザーと既存ユーザーでグループを分ける
- それぞれのグループが普段どのようにサイトを利用しているかイメージして、その思考が行動にあったシナリオにする

####(4)パイロットテスト
- 近しい人テストシナリオのテストを行ってもらう

> 【シュチュエーション】
普段仕事で忙しいあなたは通勤時間の合間にネットスーパーで1週間分の食材の買い物をしています。

|タスク|知りたいこと|
|:--|:--|:--|
|自身がネットで食品を買う際に注意して見ている点を教えてください|そもそもどういう情報を求めているか|
|自身が欲しい商品を自由に探してみてください|設計通りに使うか|
|振り返って分かりづらい点があれば教えてください|分かりづらい点がないかどうか|
|購入を検討する上で不足していると思った情報があれば教えてください|不足している情報はないか|
|1週間後前回買ったものと同様のものを買いたいと思いました。再度サイトを開いて買い物かごに入れてください|繰り返し買いやすいか|


####(5)リクルーティング(確定した内容で実施する)
- 1回のテストで5人くらいが理想

ユーザーテストは少ない人数（5人くらいで）何度も繰り返し行う方が精度が高まる

####(6)テスト実施

#ユーザーの心理/行動をUIUXに落とし込む
####(1)情報設計
- ユーザー視点で情報をデザイン
- 初期体験こそ大切に
- 説明は常に不足していると考える
- ユーザーにとって不利益となる体験は排除する
- 提供者の写真が誠実さ・信頼性を演出する

####(2)ビジュアルデザイン
#####CTAの周辺でマイクロコピーを活用する
- 実績を訴求するマイクロコピー
- 手軽さ・簡単さを訴求するマイクロコピー（分よりも秒の方が良い）

> 例：40代500人が利用
>↓
>40代10人に１人が利用（より身近に感じる表現）

#入力フォームのストレスを解消するTips
- 小文字・大文字・半角・全角が指定されていたら、自動で変換できるようにする
- ハイフンの有無がわかりにくい
- 注意事項・入力例はフォーム外に記述する（入力内だと、入力時に見えなくなってしまうため）
- 必須か任意か分かりづらい（※だけでなく「必須」と表記する）
- 今の状態【ステップ・完了率】が確認できない（あとどれくらいなのか不安になる）
- エラー時のフィードバック（送信ボタン後ではなく、入力した時点でフィードバック）
- エラーの理由が説明されない
- フォーム送信後のアクションが明記されていない

#気持ちよく使い始めてもらうためのTips

サービスの印象は最初の第一印象で決まる（使いにくいとサービスの印象も悪くなる）

#####パーソナライズにする（自分好みにカスタマイズすると愛着がわく）

> 例：初期設定で好きなジャンルを選択させたり

#####プッシュ通知の許可は、承諾する価値を伝えてから表示する

> アプリダウンロードしたての時よりも、少し経った使い勝手がわかるようになった時に通知する

#####必要なタイミングで最低限の説明をする
#####ツールチップはユーザーが該当の画面を表示した時に、理解して欲しい所に表示される説明。他の画面を阻害せずに最小限の範囲で説明する。

> アプリダウンロード後、起動直後に特徴や使い方を説明したスライド式チュートリアル流し読みされる確率が高い。いきなり全部説明されてもわからない。

#####最初にやるべき事を制限する
> たくさん機能があると便利だが、何をしていいかわからない。
> アプリ初日利用直後にやることリストを設けて、ステップごとにやる事を明確化

#使い心地がいいおもてなしTips
#####待ち時間を工夫

> 読み込み中の表現をスピナーにして、後どれくらいで終了するかわかるようにする

#####重要なページから離脱する時は確認画面が表示される

> このページを離れてしまうと今までの入力が無効となりますがよろしいですか？等

#####検索時に候補をレコメンド
#####最小のページ切り替えで情報を把握する
#####相談して決める事を考慮する

> 高価な商品・旅行などは他の人と相談して決める事が多いため、検索結果一覧ページ・詳細ページにシェアボタンを設置する
Deviceの導入に関してのまとめ

### ※アプリケーション作成からDeviseの導入までをメモがわりに記入しています。

# 前提
ruby 6.0.0
rails 6.0.3.4
mysql2 0.5.3
devise 4.7.3

上記の環境で作成する。

# 簡易的な流れ
①作りたいアプリケーションを立ち上げます。

```Ruby:コンソール
% rails _6.0.0_ new アプリ名 -d mysql
```

②アプリ内のdatabase.ymlの記述を書き換えます。

```Ruby:config/database.yml
#中略
default: &default
  adapter: mysql2
# ↓↓元々はencoding: utf8mb4
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock

#以下略
```

③gemfile内の最下層に追加したいgemを記入します。

```Ruby:Gemfile
#中略
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

gem 'pry-rails'
gem 'devise'
```

④gemを読み込ませます。

```Ruby:コンソール
% bundle install
```

```Ruby:コンソール
% yarn install
```

⑤コンソール上の作成したアプリのディレクトリでデータベースを作成します。

```Ruby:コンソール
% rails db:create
```

⑥アプリにDeviseをインストールします。

```Ruby:コンソール
% rails g devise:install
```

⑦Deviseを用いたモデルの生成をします。
　（マイグレーションファイルやルーティングも自動生成されます。)

```Ruby:コンソール
# モデル名は単数
% rails g devise モデル名
```

⑧新規登録とログインのためのビューファイルを作成します。

```Ruby:コンソール
% rails g devise:views
```

⑨ローカルサーバーを起動します。

```Ruby:コンソール
% rails s
```

⑩マイグレーションファイルに追加するカラムを記述します。
※emailとpasswordについてはdeviseで生成した時に作成されています。

11.テーブルをマイグレーションします。

```Ruby:コンソール
% rails db:migrate
```

12.各編集・設定を行います。
view/devise/registrations　→新規登録画面の編集
view/devise/sessions     　→ログイン画面の編集
model/テーブル名.rb        　→バリデーションの設定

13.application_controller.rbを編集します。

```Ruby:controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
# keysの内容はdeviseのテーブルに追加したカラム名
    devise_parameter_sanitizer.permit(:sign_up, keys: [:カラム１, :カラム２, ‥])
  end
end
```

以上

# その他注意点など
・新規登録ページ、ログインページに至るためのルーティングは、モデル作成時に自動で生成されています。

・ユーザー管理機能に必要なコントローラーの処理は裏側に隠れているため、コントローラーを統括している「application_controller.rb」に対して記述することになります。

・「rails g devise:install」がうまくいかない時は、以下を実行してみましょう。

```Ruby:コンソール
$ bundle exec spring stop
```
Cloud9でWordPress環境を構築 1

WordPressの学習＆AWSに触れるのを目的として
AWS Cloud9でWordPress環境を構築するまでの備忘録。

#はじめにやっておいたこと
- AWSアカウント登録
- 学習用IAMユーザー作成
- 学習用ユーザへのアタッチポリシー：とりあえず次の4つ
  - AmazonEC2FullAccess
  - AdministratorAccess
  - IAMUserChangePassword
  - AWSCloud9User

#この記事の目次
- インスタンス作成
  - EC2インスタンス作成
  - ディスク拡張
- MySQLインストール
 - MariaDBアンインストール
 - MySQLインストール


#インスタンス作成
- EC2インスタンス作成
- ディスク拡張
 
##EC2インスタンス作成

Cloud9のCreate environmentからCloud9環境&EC2を作成する。
こだわりはないので、Amazon Linux2にしておく。他はデフォルト。

##ディスク拡張
容量に余裕がない（使用率85%）ので拡張する。30GBまでなら無料らしい。
EC2 > Elastic Block Store で 作成済のボリュームを変更する (10GB→20GB)
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html
L 例: EBS ボリュームのファイルシステムの拡張

ボリュームを変更後、Cloud9のIDEのターミナルからコマンド実行。
パーティションを拡張する。

~~~
$ sudo growpart /dev/xvda 1
$ sudo xfs_growfs -d /
~~~

※作成したリージョンが違う、ルートアカウントで作成したなどで
　立ち上げたEC2が見れずに何回か手間取った……。

#MySQLインストール
 - MariaDBアンインストール
 - MySQLインストール

##MariaDBアンインストール
デフォルトでMariaDBがインストールされているが、どうにも動かない。

~~~
$ mysql --version
mysql  Ver 15.1 Distrib 10.2.10-MariaDB, for Linux (x86_64) using  EditLine wrapper

$ sudo service mysqld start
Redirecting to /bin/systemctl start mysqld.service
Failed to start mysqld.service: Unit not found. 
~~~

諦めてアンインストールしてMySQLをインストールする。
※ディスク拡張作業をしたのは主にこれのため

~~~
#MariaDBがインストールされているか確認
$ sudo yum list installed | grep mariadb
mariadb.x86_64                        3:10.2.10-2.amzn2.0.3          @amzn2extra-lamp-mariadb10.2-php7.2
mariadb-common.x86_64                 3:10.2.10-2.amzn2.0.3          @amzn2extra-lamp-mariadb10.2-php7.2
mariadb-config.x86_64                 3:10.2.10-2.amzn2.0.3          @amzn2extra-lamp-mariadb10.2-php7.2
mariadb-libs.x86_64                   3:10.2.10-2.amzn2.0.3          @amzn2extra-lamp-mariadb10.2-php7.2

#MariaDBのアンインストール (libsはcommonに依存で削除)
$ sudo yum remove mariadb -y
$ sudo yum remove mariadb-common -y
$ sudo yum remove mariadb-config -y

~~~
##MySQL5.7 インストール
触ったことがある5.7をインストールする。

~~~

#mysql8.0のリポジトリを追加（5.7も含む）
sudo yum localinstall https://dev.mysql.com/get/mysql80-community-release-el7-1.noarch.rpm -y

#mysql8.0のリポジトリを無効化
$ sudo yum-config-manager --disable mysql80-community

#mysql5.7のリポジトリを有効化
$ sudo yum-config-manager --enable mysql57-community

#mysqlインストール
$ sudo yum install mysql-community-server -y

#mysqlバージョン確認
$ mysql --version
mysql  Ver 14.14 Distrib 5.7.32, for Linux (x86_64) using  EditLine wrapper

#mysql起動
$ sudo service mysqld start
Redirecting to /bin/systemctl start mysqld.service
$ sudo service mysqld status
Redirecting to /bin/systemctl status mysqld.service
● mysqld.service - MySQL Server
   Loaded: loaded (/usr/lib/systemd/system/mysqld.service; enabled; vendor preset: disabled)
   Active: active (running) since Sat 2021-01-16 09:30:20 UTC; 3s ago
~~~

次、MySQLのデータベース作成など。
[Cloud9でWordPress環境を構築 2](https://qiita.com/ttyoku/items/f7b5c763cbe5ff80eed4)
JavaScriptの関数とオブジェクトにおける最低限の知識

# 本記事の目的
この記事は自身のJavaScriptに対する知識の定着を図るため、また、同じような初学者が理解するきっかけになればと思い作成しています。間違い等ございましたらお手数ですがご連絡いただけますと幸いです。

# JavaScriptの概要とメリット
プログラミング言語の一つ。クライアントサイドに用いられる。
例えば某サイトで服を購入しようと考えた際に服→メンズ→サイズ...と選択する際にマウスのポインタを選択肢上に移動させると次々に新しい選択項目が表示されるようなものをイメージしてもらうとわかりやすいかと思う。
上記の例で話すのであれば、**ページの移動なしで画面の表示を変更することができる**、**サーバーとの通信回数を減らすことができる**というメリットがある。

# コンソールパネルを用いてJavaScriptを実行する
JavaScriptのコードを実行し、その結果を表示するためにはデベロッパーツールを使用する。一般的なブラウザに付属しており誰でも使用することができる。
ブラウザ上で右クリック→検証を押す、もしくは`command + option + c`キーで表示可能。
また、デベロッパーツールは検証ツールと言われ、以下のような作業ができる。

- 表示しているサイトのHTMLの要素の確認・編集
- 表示しているサイトのCSSの確認・編集
- JavaScriptの実行

# JavaScriptにおける変数について
var,const,letの三種類を用いて変数を定義する。
それぞれの違いは以下の通り。
var・・・再定義と再代入が可能。
const・・・再定義と再代入ともに不可能。
let・・・再代入は不可能だが、再定義は可能。

# varの使用(検証ツールのconsoleより)
    'var'
    var sample = "Hello"
    console.log(sample)
    Hello（←が表示される）
    
    '再定義'
    var sample = "再定義"
    console.log(sample)
    再定義（←が表示される）

    '再代入'
    sample = "再代入"
    console.log(sample)
    再定義（←が表示される）
# constの使用(検証ツールのconsoleより)
    'const'
    var sample = "Hello"
    console.log(sample)
    Hello（←が表示される）

    '再定義'
    var sample = "再定義"
    console.log(sample)
    エラーになる
    
    '再代入'
    sample = "再代入"
    console.log(sample)
    エラーになる


# letの使用(検証ツールのconsoleより)
    'let'
    let sample = 'Hello'
    console.log(sample)
    Hello（←が表示される）

    '再定義'
    let sample = "再定義"
    console.log(sample)
    エラーになる
    ※2021年1月16日現時点で、Google chromeだとエラーにならない。バージョンアップにて変更した模様？
    要注意です！

    '再代入'
    let sample = "再定義"
    console.log(sample)
    再定義（←が表示される）

# オブジェクト
プロパティを複数集めたものの集合体のこと。また、プロパティとはキーとバリューによって構成されている。

オブジェクトの値を取得するためには**オブジェクト名.プロパティ名**のように記述することで取得することができる。

    '例'
    const sample = { color: 'blue'}
    console.log(sample.color)
    blue(←が表示される)
【AppleScript】Evernoteバージョン10で非対応になったので暫定対応

2020年10月にリリースされたEvernoteバージョン10は、AppleScriptに非対応になりました。
[公式ブログ](https://evernote.com/blog/jp/new-windows-mac/)によれば「まだ実装されておりません」とのことなので、いずれは対応されるかもしれませんが、とりあえず現時点では旧バージョンの[Evernote Legacy](https://help.evernote.com/hc/ja/articles/360052560314-以前のバージョンの-Evernote-をインストールする)で対応してね、という状況です。Legacyと最新版は共存できます。

[Evernote Legacy](https://help.evernote.com/hc/ja/articles/360052560314-以前のバージョンの-Evernote-をインストールする)がインストールしてある状態で、

```
tell application "Evernote"
```
としていたところを、

```
tell application "Evernote Legacy"
```

と変更すればOK。
なぜリファクタリングが必要なのか（初心者向け）

# メリットがあるから
バグが起きた時に、原因を特定するまでの時間が短くなる。
バグが起きた時に、修正するまでの時間が短くなる。
バグが起きた時に、修正漏れが少なくなる。
機能を追加する時に、影響調査にかける時間が短くなる。
機能を追加する時に、修正するまでの時間が短くなる。
現行のシステムの挙動を調査する時に、かかる時間が短くなる。

# デメリットは？
機能を追加する時に、リファクタリングする分は時間がかかる。

# 注意点
小規模なシステムでは上記のメリットはあまり当てはまらない。
ちゃんとリファクタリングしないと上記のメリットは当てはまらない。

# なぜ良いことがあるのか（一例）
変数などの名前が適当であることで、処理を読み込まなくても内容の検討がつくから（時間が短くなる）。
変数などのスコープが適当であることで、処理を読み込まなくても調査する範囲を絞り込めるから（時間が短くなる）。
コメントが適当であることで、処理を読み込まなくても内容がわかるから（時間が短くなる）。
処理を再利用することで、抜け・漏れ・見落としがすくなくなるから（品質が良くなる）。
処理を再利用することで、同じ処理であることが明示的になるから（品質が良くなる）。
データの性質を適当に定義することで、不確定要素が少なくなり、予期せぬ挙動がへるから（品質が良くなる）。
（ほかにもいろいろありそう・・）
gitのブランチ削除コマンド

#ブランチの削除
####ローカルブランチの削除

```
$ git branch -d ブランチ名
```

####リモートブランチの削除

```
$ git push --delete origin ブランチ名
```

#最後に
スクールでチーム開発をしたことはあったのですが、時間が経つと忘れることも多くまとめてみました。
ブランチを切ったり、プルすることもなくなってしまったので今後のためにも、一人擬似チーム開発をしながら学習していこうと思います。
AWSで試しにシステムを構築するとき、最初にすべきこと

#対象
『ちょっと試しにAWSでシステムを構築してみたい』
『そんなにお金をかけずにやりたいな』
という人向け

自分はAWSを使ったことはあったけれど自分で構築した実績がなかったので欲しかったのと、以前契約していたVPSの環境を手放して、そろそろまたちょっとしたコードを試せるような環境が欲しくなったのでやってみることにした。

#最初に抑えておきたい料金のこと（AWSの料金体系）
最初に抑えておきたいポイントは、『AWSっていったいいくらかかるの？』という、お金のことかと思う。

調べるために、まず公式サイトを見に行く。

■ AWS公式サイト
https://aws.amazon.com/

あたりまえのことなんだろうけど、AWSのサイトを見るときは、__言語を日本語に切り替えたほうが良い__。
自分は英語のまましばらく頑張って読んでおり、不自由だった。
## 無料枠について
さて、公式サイトの情報を見るとと無料枠の情報が出て来る（2021年1月現在）。
無料枠には３種類がある。

1. 常に無料   
文字通りずっと無料、例えばAmazon DynamoDB（AmazonのNOSQLデータベース）は25GBまで無料。Amazonとしては__品質向上に役立つデータ収集が目的__でユーザに使ってほしいのかもしれない。

2. 12ヶ月無料   
12ヶ月（1年間）無料になる。__AWSの中核となる製品__で用意されている。サーバ構築＆運用のサービスEC2、ストレージのS3、データベースのRDSなど、これぞAWSという製品がここに分類される。1年経ったら料金が適用されるので、試しに構築してみるのに良い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018028/7bbb7fd0-f8db-b64e-3a19-8cc13612c382.png)
 ※EC2とRDSは750時間=31.25日なので、12ヶ月間の間は完全に無料。

3. トライアル      
AWS 無料利用枠のページにはいつまで無料なのか明記されていないので、製品ごとに異なるのかもしれない。例えばAmazon Lightsail。サービス内容を見ると、あまり運用保守に工数や技術を投資できない人向けのサービスみたい。機能を拡充して他社と差別化して、__ここから収益を上げる計画__なんだな、という印象。
   
##無料枠と思惑について
今回私が使ってみたいのは2．12か月無料に入っているEC2。（EC2とS3使いたいって人がまあ大半なんじゃないかな。）必要があればRDSも使ってみようかな、と考えている。

となれば、気になるのは当然、__『12ヶ月経っちゃったらいくらになるのよ？』__ってところだ。12か月しか使わない、というわけにはなかなか行かないのがこの世の常なのだ。
今までも、仕事上の付き合いで「今回のオンプレミスの契約のおまけにCloudを1年分サービスするんで使ってみてください！リソースも潤沢です！」と営業さんに言われてうまい話だと使ってみたことはある。
ところがCloudの気軽さってちょっとした依存性がある。おそらく潤沢に与えられたリソースも一種の仕掛けなんだろう。
オンプレミス環境ではプロジェクトやチームの間で奪い合いだったリソースが、金持ち喧嘩せずで皆仲良く思い思いの環境を構築し、「あったらいいな」が実現された『みんなの楽園』の様を呈するのにそう時間はかからなかった。
そしてそこから脱却するのは苦い思いを伴うのだ。

だから、12ヶ月後にいくらかかるんだ、というところはきっちり抑えておく必要がある。

#EC2の料金体系
それぞれの製品の料金については、製品ごとにページがあるのでそこを参照する。
EC2の場合以下の５種類だ
1. オンデマンド
2. スポットインスタンス
3. Saving Plan
4. リザーブドインスタンス
5. Dedicated Hosts

1.オンデマンドが一番スタンダードな料金体系で、それ以外は運用スタイルが定まったサーバについて、稼働の制約を設ける代わりに料金を割引くという形になっている。
ここでは『ちょっとためしてみたい』という人を対象とするので、計画的な運用を求められる2.～4.はあてはまらない。5.も物理機なのでCloudという位置付けと少し違っている。（基本的にCloudを使うんだけれど、一部物理機が必要となるシステム構成、という場合に組み合わせて使うのかもしれない）（https://aws.amazon.com/jp/ec2/pricing/）

##EC2 オンデマンドの場合の課金
オンデマンドの場合、時間ごとの課金になる。金額の多寡はサーバのスペックで決まる。このサーバスペック、あまりにも選択肢があって困るのだけど、幸い12ヶ月分の無料枠があるのはt2.microというタイプだけなので、これ一択になる。危なかった。迷いすぎて構築を先送りしてしまうところだった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018028/e165499e-7dd0-a074-8d0b-ce1cf8c1b86a.png)

t2.microの場合、１時間0.0152ドルという料金である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1018028/8fc01072-2104-4753-cbcf-e67cf8c3aa23.png)

一ヶ月は750時間なので、

>■ Amazon EC2 月額料金（東京リージョン）
>0.0152ドル×750時間=11.4ドル

※以下のような見積ツールもある。
　　　　https://calculator.aws/#/
　このツールを使うと、上記の製品は出てこないんだけど…
　最小構成として、t4g.microが出て来る。

まあ試しに使ってみるということだから、無料枠を使ってみようと思う。
pandas の簡素な説明(Cheat Sheet)


私英語が苦手なのですが、絵で見て何となくわかるので重宝してます。

[オリジナルへのリンク](https://pandas.pydata.org/Pandas_Cheat_Sheet.pdf)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/2970228e-67b9-d9db-aa02-b7ccce173990.png)](https://pandas.pydata.org/Pandas_Cheat_Sheet.pdf)
[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468328/ad235e55-16de-b1d4-d283-3afa7f551d1c.png)](https://pandas.pydata.org/Pandas_Cheat_Sheet.pdf)

[pandas Getting started](https://pandas.pydata.org/docs/getting_started/index.html)の下の方にCheat Sheetへのリンクがあります。Getting startedのページも参考になります。（私は英語が苦手なので「日本語に翻訳」様にいつも助けてもらいます）
ruby色々なメソッド(数値編）

##始めに
皆さん、こんにちは
私は某スクールに通っており現在転職活動中です

rubyのメソッドやクラス、オブジェクト指向について不足しているなあと感じ今一度復習の為勉強しております
今回は数値クラスのメソッドについてまとめました

### 数値クラスのメソッド
※変数（num)には２.９を代入しております

- 変数.round・・・四捨五入して整数にする

```
irb(main):005:0> num.round
=> 3
```

- 変数.floor・・・切り下げ（て整数に変換）

```
irb(main):006:0> num.floor
=> 2
```

- 変数.ceil・・・切り上げ（て整数に変換）
 
```
irb(main):007:0> num.ceil
=> 3
```
- 変数.truncate・・・小数点の切り捨て

```
irb(main):008:0> num.truncate
=> 2
```
###判定
特定の判定なのでtrueかfalseで判定します
メソッドの後ろに？がつくと真偽値を返してくれるメソッドになります

- 変数.zero?・・・数値がゼロかどうかの判定

```
#変数（num)に０が代入されていた場合
irb(main):010:0> num = 0
=> 0
irb(main):012:0> num.zero?
=> true
#変数（num）に１が代入された場合
irb(main):013:0> num = 1
=> 1
irb(main):014:0> num.zero?
=> false
```

- 変数.odd?・・・数値が奇数かどうか？

```
#変数（num）に１が代入された場合
irb(main):016:0> num.odd?
=> true
```
- 変数.even?・・・数値が偶数かどうか？

```
#変数（num）に１が代入された場合
irb(main):017:0> num.even?
=> false
```

##最後に
ぶっちゃけ判定以外使った事がなかった・・・💦
今後使うかどうかわからないけど、頭には入れておいた方が何かの役に立つから予習、復習はかかさずにしようね

次回は文字クラス（string)について書きます！
【2021年版】ド素人がAWSソリューションアーキテクトアソシエイト合格まで

# 試験前の状態など

- AWS使用歴は10カ月少し
- 使用サービスは　Cloud9, VPC, EC2, RDS, Route53 くらい
- Rubyを使ったプログラム勉強中
- ITパスポート所持

AWSに関してはEC2にアプリをデプロイしたりRoute53のDNSを使用したりするくらいで、使用したことのあるサービスは4,5個程度でした。

そのサービスも限定的な使い方しかしていなかったため、参考書を読んだときはなんじゃこりゃという状態です…

## 参考書を使った基礎インプット
早速

## 問題集
参考書に付属の総合問題に挑戦。
基礎的な問題や本を読み返すと答えが見つかるようなものが多かったため、結果は60%くらいです。
しかしまだまだ合格の72%には届かないですね…

ということで参考書の復習とそれぞれのサービスとノートにまとめ、特徴や使い方をまとめました。

## AWS公認模擬試験

ある程度問題にも慣れてきたということでいよいよ公式の模試を受けてみることにしました。
公式の模試はオンラインで受けられて値段も¥2,200でしたので気軽に受けることができました。

結果はというと…


45%…

難しい。
とにかく答えが分からない。

本番を2回受けた今ですらあの時の模試が一番難しく思えるほどです。


## AWS公認模擬試験～2回目～

本試験前に試験慣れするためにもう一度受けてみました。
結果は60%。

# AWS本試験　～1回目～　不合格

結果1回目は不合格でした。

点数は675点と、実はあと50点ないくらいで受かっていたのかと思うとかなり悔しかったです…

受けた感想としては

・**CloudFront+S3の問題が多い**
・**S3,EC2,Glaierのコスト最適選択典型問題も出題**
・リードレプリカとマルチAZ構造など似た問題も多い
・マルチAZ+AutoScaling+ELBなどの理想構造を答える問題も出た印象

と、全体像を掴みつつ細かい違いも区別し正しい選択肢を選ぶ問題が多かったイメージです。

そして模擬試験より解きやすい…

全体の難易度推移は

マニアックなサービスを例にした高難易度問題 >> 
複数サービスが連携している例を挙げた中級問題　>>
単一のサービスを選択する初級問題

と**後半に行くほど難易度が下がる構成**になっているように思えました。

そのため、序盤では答えが絞り切れないような問題の連発で、メンタルがやられました。
本当にこれ受かるのかな…と常に不安でいっぱいです。

しかし20,25問目を過ぎたあたりから見慣れた問題が増えてくるので何とか最後まで集中力を落とさず解き進めましょう。


# リベンジ

ということでリベンジ戦です。

## 黒本でおさらい

新たに黒本を購入しておさらい。

## AWS公認模擬試験～3回目～

65%取得と前回よりも点数が上がりました。

## Udemyの模擬試験6本

[>> 【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/)

これがいい練習になりました。

**高難易度問題×5 + 中難易度1問の構成で**

これの中難易度が本番試験にかなり地下難易度だった印象があります。

また高難易度テストは本番の序盤で出てくる高難易度問題に近いです。

実際模試で受けた点数が750で試験とかなり近かったため、こちらが参考になると思います。

# AWS本試験　～2回目～

ようやく合格しました！！

正直一回目より難易度が上がっていて不安でしたが755点というギリギリの点数で合格できました。

試験終了後の画面に
「おめでとうございます。合格です」
と出たときは心がほっとしました。

やっぱりリアルタイムで合否が出るオンライン試験は嫌な待ち時間がなくていいですね。

# トータルでかかった費用など
最後にここまでの投資額や時間をまとめました。

### 金額

- [ ] 　本試験(16,500) ×2 = **33,000**
- [ ] 　模試(2,200)×3　　= **6,600**
- [ ] 　参考書　　　　　 ≒ **5,000**
- [ ] 　AWS使用料 　　　≒ 5,000
- [ ] 　Udemy模試　　　 = **1,200** ←　コストパフォーマンス最高でした

※カフェでの勉強代などは除外

### 時間
**約40日**
**120時間くらい**

### 合計

時間:　**約120時間**
金額:　**約¥58,00**

この中で

もし今からもう一度勉強を始めるとしたら…

黒本熟読(2~3週間)
↓
黒本模試
↓
AWS公認模試
↓
Udemy模試
↓
本番

の順で勉強すると思います。

これからAWS認定を受ける方の参考になれば幸いです。
よいAWSライフを！

AWSソリューションアーキテクチャ試験で紛らわしいことや、分かりにくかった問題もまとめましたので、よかったらこちらもどうぞ！

[>>AWSソリューションアーキテクチャ紛らわしい問題](https://qiita.com/ichihara-development/items/ec9e1f70dddc008eef81)
【GitHubまとめ第3回】プルリクエスト

## はじめに
必須スキルとなっているgit・gitHubの基礎についてまとめました。今回は「プルリクエスト」について記述しています。初学者向けの内容です。コマンドはコピペしやすいように、$をあえてつけていません。

全3回に渡って、下記の計画で進めています。
【計画】
第1回目 git基礎コマンド (https://qiita.com/tatsuya_1995/items/b0747759630b6c230684)
第2回目 ブランチ・マージ・リベース・コンフリクト （https://qiita.com/tatsuya_1995/items/04148896a7f23a1f2090)
<font color="red">第3回目 プルリクエスト（今回）</font>

## プルリクエスト
自分の変更したコードをリポジトリに取り込んでもらえるよう依頼する機能。
A.バグを未然に防止する。
B.ソースコードの変更点を明らかにする。
C.ソースコードに関するコミュニケーションをとる。
などを目的にしており、結果として開発者が品質の高いコードを書くことに繋がる。

参考：https://backlog.com/ja/git-tutorial/pull-request/01/

## プルリクエストの手順

1. masterブランチを最新に更新
2. ブランチを作成
3. ファイルを変更
4. 変更をコミット
5. GitHubへプッシュ
6. プルリクエストを送る
7. コードレビュー
8. プルリクエストをマージ
9. 2.で作成したブランチを削除


## 1. masterブランチを最新に更新

```
git pull origin master
```
>origin:リモートリポジトリのアクセス先に対してGitがデフォルトでつける名前。

## 2. ブランチを作成

```
git branch -b <ブランチ名>
```
`-b`オプションがついているため、新規ブランチ作成後、そのブランチに移動する。

## 3. ファイルを変更

お任せ!!

## 4. 変更をコミット

### ステージへ追加

```
git add <ファイル名>  
```

### ローカルリポジトリへコミット

```
git commit 
```

## 5. GitHubへプッシュ

```
git push origin <ブランチ名>
```

## 6. プルリクエストを送る

I.GitHub→リポジトリ名→Pull requests(下図番号①)→New pull request(下図番号②)を選択。
II.Create pull requestボタンを押す。
III.タイトルとコメントを記述。


![pull request.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/e55daeff-fd0e-03a1-74a2-098497999007.png)

統合するブランチ(下図赤枠)と統合元のブランチ(下図青枠)の名前を選択し、New Pull Requestを押す。

![branchSelect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/f82ed73e-9655-906a-55e1-bb725a83b57d.png)
## 7. コードレビュー

Reviewersボタンからレビューしてもらう人を選択。通知が行くのでレビューしてもらう。レビューの動作については割愛。~~（その立場になるのは少し先なので…）~~

![レビュー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/91483c4d-8347-e729-cb83-a63b3aaa2850.png)


## 8. プルリクエストをマージ

Merge Pull request→Confirm mergeでマージする。コンフリクトが発生した場合は、先に修正。
![pullrequest.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/dee5f425-f4e2-f065-c36a-280791829d18.png)

## 9. 2.で作成したブランチを削除

マージされた後に、Delete branchボタンが表示される。これを押すとGitHub上で、ブランチが削除される。

![スクリーンショット 2021-01-16 18.15.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/969534/4b899b32-2a20-eb36-a1d9-5fcd5e729780.png)

最後にターミナルのコマンドでローカルで切ったブランチを削除しておく。

```
git branch -d <ブランチ名>
```

## 最後に
今回はgitのプルリクエストについてまとめました。gitは想像以上に覚えておくべきことが沢山ありますね。少しなめていました…。精進します。
（もしこの記事に誤りがありましたらご教授いただけると幸いです。）
[React] Reactの学習をします（1-1）

#Reactの学習をします（1）

Reactの学習をしてみることにしました。

##教材

[Reactチュートリアル1：犬画像ギャラリーを作ろう](https://zenn.dev/likr/articles/6be53ca64f29aa035f07 "Reactチュートリアル1：犬画像ギャラリーを作ろう")

likr さんが公開している「Reactチュートリアル1：犬画像ギャラリーを作ろう」という記事を教材に学習させて頂きます。

素晴らしい教材をありがとうございます。

##学習日記

本日は「React とは」～「Hello, World!」までやりました！

きちんと Hello, World! が表示されました！

##補足

ところで、本題とは全然関係ないのですが、

>npm start

を実行しますと「--scripts-prepend-node-path」云々というエラーメッセージが出ていました。

何だろうと検索しますと、検索結果にQiitaの記事が出てきました。

・[npm runコマンドを実行したら警告が出るようになった](https://qiita.com/isamusuzuki/items/738a2736a746b67bd977 "npm runコマンドを実行したら警告が出るようになった")

Nodist を使用していると出る警告のようです。

>npm config set scripts-prepend-node-path true

記事の内容の通り、上記コマンドを実行すると警告は消えました。

ありがとうございます。
【Dockerfile】tzdataの設定について

#目的
Docker上のubuntuにjupyterlabをインストールするため、docker imageを作成しようとした。
#詰まった問題
Dockerfileからdocker imageを作成するため、下記のファイル(dockerfile)をコマンドで実行しようとする…

```dockerfile:dockerfile
FROM ubuntu

RUN apt-get update
RUN apt-get install -y sudo
RUN sudo apt install -y python3-pip
RUN sudo apt install -y language-pack-ja
RUN sudo update-locale LANG=ja_JP.UTF-8
RUN sudo apt install -y nodejs npm
RUN pip3 install jupyterlab
RUN pip3 install pandas
RUN pip3 install matplotlib
RUN pip3 install sklearn
```

コマンドは以下の通り。

```powershell
docker build -t jupyterlab:latest ./
```
しかし、実行途中に以下のように表示されてしまう

```powershell
Please select the geographic area in which you live. Subsequent configuration
questions will narrow this down by presenting a list of cities, representing
the time zones in which they are located.

  1. Africa      4. Australia  7. Atlantic  10. Pacific  13. Etc
  2. America     5. Arctic     8. Europe    11. SystemV
  3. Antarctica  6. Asia       9. Indian    12. US
Geographic area:
```

このとき、6と入力しEnterを押すも反応せず…
どうやらタイムゾーンを選択すると解決するようだ。
#解決法
上記のdockerfileにタイムゾーンを設定する文を追加することにより解決した。（追加した文）

```dockerfile
FROM ubuntu

RUN apt-get update
RUN apt-get install -y sudo
RUN sudo apt install -y python3-pip
RUN sudo apt install -y language-pack-ja
RUN sudo update-locale LANG=ja_JP.UTF-8
#追加した文↓
ARG DEBIAN_FRONTEND=noninteractive
ENV TZ=Europe/Moscow
RUN apt-get install -y tzdata

RUN sudo apt install -y nodejs npm
RUN pip3 install jupyterlab
RUN pip3 install pandas
RUN pip3 install matplotlib
RUN pip3 install sklearn
```
ActiveRecordでwhere in句を書こうとして詰まったこと

SQLで書くとわかるが、Railsでどのように書くか悩んだので、書いておく

知りたかったこと

```sql
SELECT * FROM Tables WHERE (name, task) not in ((yamada, "running"),(yamada, "swimming"));
```

いろいろ悩んだが上手くまとめられなかったので、サブクエリで解決しました〜！
配列で渡すと複数個渡せますし、このようにサブクエリにすると欲しい条件が作れるのかなと思います！

```ruby:期待値通りのクエリが発行
Table.where.not(id: (Table.select(:id).where(name: yamada).where(task: ["running", "swimming"])))
```

### 当初の方針

最初の方針ではwhere句を複数繰り返すことで条件を絞れると思ってましたが、以下のように書いたら"yamada"さんの全てのtaskを弾いてしまいます。実際に発行されるSQLも下に記載しておきます。
ベン図を頭の中に描きながら書いていきました。

```ruby:期待値と違うクエリが発行
Table.where.not(name: yamada).where.not(task: ["running", "swimming"])
```

```sql:期待値と違うクエリ
SELECT `tables`.* FROM `tables` WHERE `tables`.`deleted_at` IS NULL AND (`tables`.`name` != "yamada") AND (`tables`.`task` NOT IN ("running", "swimming"))
```

### 参考文献

[Rails ガイド](https://railsguides.jp/active_record_querying.html)
yarnを最新化する

# はじめに
yarnを最新化する時に手間取ったので、備忘録としてメモを残す。

結論としては、yarnのアンインストール->インストールだけでは不十分で、local/bin/配下のyarn,yarnpkgを削除する必要がある。

# 開発環境
* macOS Big Sur（バージョン 11.1）

# 最新化する手順
1. /usr/local/bin配下のyarn,yarnpkgを削除する

2. /usr/local/lib/node_modules/yarn/bin配下のyarn,yarnpkgを最新化する
3. 
```
$ npm uninstall --global yarn
$ npm install --global yarn
```

# あと書き
npm uninstallは/usr/local/lib/node_modules/yarn/bin配下のファイルを削除するのであって、/usr/local/binを更新してくれるわけではなさそう。
クレジットカードの公開鍵の書き方

# javascriptファイルへ、クレジット決済会社の公開鍵を書く方法
① クレジット決済会社のサイトから、公開鍵を取得する
② .jsファイルへ記述する
例)
javascript/〜.js

const pay = () => {
  ~.setPublicKey("pk_test_******************");
Google App Engineのスタンダード環境とフレキシブル環境

# Google App Engineについて知りたい
はじめまして。インフラ初心者の[Papillon6814](https://github.com/Papillon6814)です。
今までは`GCE`と`Docker`なら多少触ったり使ったりしたことがある程度です。
しかしこれから開発でApp Engineを使うので、知識を得ておかなければと思った次第であります。

しかし、GAEのドキュメントが難しくてなかなかスムーズに読み進んでいけません。
なので、自分の理解を文字に起こしながら読み進めていきます。
まだ知識がとても浅いので、とりあえず今回は環境について調べていきます。

## Google App Engineとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352824/e456d6c5-aeb6-78ba-8a71-ad8b41013400.png)

この概要の文章を読んでも、初心者の僕にはまったくわかりません。
さらに選択の言語に**Elixir**がありません！（Elixirでやりたい）

しかし止まってしまうと進まないので、とりあえず`App Engine`がどういう感じかを掴みたいので進めていきます。

## スタンダード環境とフレキシブル環境
GAEにはスタンダード環境とフレキシブル環境の２つがあるみたいです。

### スタンダード環境
スタンダード環境は、「指定した言語のアプリケーションをGAEが管理するセキュリティ保護された環境内（サンドボックス内）で実行する環境」らしいです。[参考](https://open.spotify.com/track/1B2PpFJRANhp33Tui76CRY?si=yaPiB_szT_WjXpvO10VMuA)

このスタンダード環境は、デベロッパが開発に集中できる（インフラの手間が少ない）ことが特徴の１つのようです。

スタンダード環境ではリクエストを複数のサーバーに分散し、
通信の量に合わせてサーバーの強さを変更してくれるみたいです。
そのため、アプリケーションを安全性と信頼性の高い環境で実行できます。

スタンダード環境で使えるのは、

- Python
- Java
- Node.js
- PHP
- Ruby
- Go

の６つの言語に限定されているようです。

次は、フレキシブル環境についてです。

### フレキシブル環境
まず、フレキシブル環境がスタンダード環境と違うところは、

- スタンダード環境はGAEのサンドボックス内コンテナで実行される。
- フレキシブル環境はGCEの仮想マシン上でコンテナが実行される。

という部分が挙げられます。

こちらはGCEが使われており、Dockerfileで自由に環境を構築できるのでスタンダード環境よりもカスタマイズできる幅が広いらしいです。
サポートされている機能も多く、CDNやらSQLやらがサポートされているようです。
さらに、重要なOSの更新は自動で適用してくれたり、AppEngineのインスタンスに対するヘルスチェックを行ってくれたりと様々な特徴があります。

フレキシブル環境でサポートされているのは、

- Go
- Java 8
- PHP 5 / 7
- Python 2.7 / 3.6
- .NET
- Node.js
- Ruby
- カスタム

のランタイムのようです。
ランタイムというのは、コンピュータに実行されるプログラム群のことを指します。

しかしスタンダード環境と違い、フレキシブル環境では**無料運用ができない**みたいです。

### どっちを選ぶ？

スタンダード環境は
- スタンダード環境でサポートされているプログラミング言語とバージョンで記述されている。
- 低コストでの運用を目的とする。
- 通信の急激な増加があったりして、即時のスケーリングを必要とする。

フレキシブル環境は
- フレキシブル環境でサポートされているプログラミング言語で記述されている。
- サポートされていないプログラミング言語で書かれたものをDockerコンテナで実行する。
- Compute Engineネットワークにあるリソースにアクセスする。

といったときに利用されるようです。

## ざっくりわかったのでまとめ

- **スタンダード環境は、指定されたランタイムなら簡単に迅速に整備ができる。**
- **フレキシブル環境は、カスタムで色々なことができる分スタンダードよりもやることが重い**

という感じでした。
まだまだわからないことがとても多いので、少しずつ詳しくなっていけたらなと思います。

# 参考リンク
> https://cloud.google.com/appengine/docs?hl=ja
> https://www.serversus.work/topics/5jbu7y90jk81kcdqfzf0/
> https://cloud.google.com/appengine/docs/the-appengine-environments?hl=ja
[React + TypeScript ] HTMLSelectElementのつもりなのに、Property 'options' does not exist on type 'HTMLElement'.

#課題
今日もTypeScriptから怒られた。

```tsx:something.tsx
const months = document.getElementById('datetime_2i')
months ? (months.options[1].selected = true) : null
```

```error:エラー
> Property 'options' does not exist on type 'HTMLElement'.
```

HTMLSelectElementのつもりなんだけどな。

#結論
つもりなら書けと言うことらしい。
地味に時間取られる。

```tsx:something.tsx
const months = document.getElementById('datetime_2i') as HTMLSelectElement
months ? (months.options[1].selected = true) : null
```

TypeScript素人故怒られまくる。
エラー解決するたびに只管メモします。

#参考情報
Property 'selectedOptions','selectedIndex','options' does not exist on type 'HTMLElement'
https://sharepoint.stackexchange.com/questions/283252/property-selectedoptions-selectedindex-options-does-not-exist-on-type-htm
virtualbox host OS 連動 自動起動／終了

# virtualbox host os 連動 自動起動／終了

ホスト OS （ubuntu20）の起動／終了にゲスト OS （VM）の起動／停止を連動させる
毎日やると意外とゲスト OS の起動／終了は面倒である

## 概要

ゲスト（vm） 起動／終了のサービスを作って systemd に登録する方法で実現する
systemd に登録することでホストOS起動、終了時に作成したサービスを読み込んでくれる
VM の起動／終了はVBoxManage コマンドを利用する
https://www.virtualbox.org/manual/ch08.html

VM 開始／終了するためにVM の UUID を調べる XXXX-XXXX-XXXX-XXX-XXXXX の部分

```
$ VBoxManage list vms
"VM_Name" {XXXX-XXXX-XXXX-XXX-XXXXX}
```

VM 開始
--type headless はウィンドウ（GUI）非表示で起動

```
VBoxManage startvm VM_UUID --type headless
```

VM 終了

```
VBoxManage controlvm VM_UUID acpipowerbutton
```


## vm 起動/終了サービス用のディレクトリ作成
ディレクトリ名はなんでもいい。ここでは、ubuntuVMService とした

```sh
mkdir ~/ubuntuVMService
cd ~/ubuntuVMService
```

## vm 起動サービス用のシェル
※sleep 10 念のため入れてるけどなくても大丈夫かもしれない

```
$ vim start.sh
#!/bin/sh
sleep 10
VMID="bcff1cd2-6410-4eaf-908d-b4cc5e93f34a"
VBoxManage startvm $VMID --type headless
exit
```

## vm 終了サービス終了シェル
※echo ...stop.log の部分は動作確認後は消してもいい  

```
$ vim stop.sh
#!/bin/sh
echo `date "+%Y/%m/%d %H:%M:%S" 'ubuntuVM stopping'` > ~/ubuntuVMService/stop.log

VMID="bcff1cd2-6410-4eaf-908d-b4cc5e93f34a"
VBoxManage controlvm $VMID acpipowerbutton

sleep 10
echo `date "+%Y/%m/%d %H:%M:%S" 'VBoxManage list runningvms'` >> ~/ubuntuVMService/stop.log
echo `VBoxManage list runningvms` >> ~/ubuntuVMService/stop.log

exit
```

## シェル実行権限を与える

```
$ ll
合計 8
-rw-rw-r-- 1 user user 110  1月 16 15:20 start.sh
-rw-rw-r-- 1 user user 351  1月 16 15:20 stop.sh

$ chmod 755 *.sh

$ ll
合計 8
-rwxr-xr-x 1 user user 110  1月 16 15:20 start.sh*
-rwxr-xr-x 1 user user 351  1月 16 15:20 stop.sh*
```

## vm サービス登録用定義ファイル

Ubuntu では、 systemd でサービスが管理されており、サービス定義ファイルは /etc/systemd/system 配下にある
*.service という定義ファイルを用意する  
サービス登録のお作法としては
/lib/systemd/system/my-app.service に定義ファイルを配置して
/etc/systemd/systemn/multi-user.target.wants/my-app.service にシンボリックリンクを張る  

ただいつも作ったファイルがどこのディレクトリか忘れるので
今回は、~/ubuntuVMService/ubuntuVM.service を作って
/lib/systemd/system/ubuntuVM.serviceシンボリックリンクを張り
さらに/etc/systemd/system/multi-user.target.wants/ubuntuVM.serviceにシンボリックリンクを張って構築する  

```
$ vim ubuntuV.MService
[Unit]
Description=VirtualBox VM
After=network-online.target

[Service]
User=user
ExecStart=/home/user/ubuntuVMService/start.sh
ExecStop=/home/user/ubuntuVMService/stop.sh
Restart=no
Type=forking

[Install]
WantedBy=multi-user.target
```

## サービス定義ファイルのシンボリックリンクを張る
```
sudo ln -s /home/user/ubuntuVMService/ubuntuVM.service /lib/systemd/system/ubuntuVM.service

sudo ln -s /lib/systemd/system/ubuntuVM.service /etc/systemd/system/multi-user.target.wants/ubuntuVM.service
```

## systemctl コマンドでサービスを登録する
```
$ sudo systemctl enable ubuntuVM.service
Created symlink /etc/systemd/system/ubuntuVM.service → /home/user/ubuntuVMService/ubuntuVM.service.
```
## サービスの起動確認
```
sudo systemctl start ubuntuVM
```
## VM が起動しているか確認する
```
$ VBoxManage list runningvms
"vmub20_1" {bcff1cd2-6410-4eaf-908d-b4cc5e93f34a}
```

## サービスの終了確認
```
sudo systemctl stop ubuntuVM
```

## VM が終了しているか確認する
```
$ VBoxManage list runningvms
何も表示されなければVMは終了している
```

## 最後にホストOSを再起動してVM が起動しているか確認して起動していればOK
```
sudo reboot
```

OS再起動後

```
$ VBoxManage list runningvms
"vmub20_1" {bcff1cd2-6410-4eaf-908d-b4cc5e93f34a}
```

以上。
Xcode 12.3 が頻繁にフリーズする問題に対処した

## はじめに
数分に1回、Xcode v12.3 がフリーズする状況に陥りました。
フリーズするとレインボーアイコンが出て、数分間操作ができなくなります。
だいぶ辛いです。

## 環境

- macOS Catalina v10.15.7
- Xcode v12.3

## 対処方法

Apple のDeveloper Forums に[Xcode freezes after upgrade to 12.3](https://developer.apple.com/forums/thread/669378) という質問が挙がっています。その回答を参考にします。

### Devices and Simulators を開く

Xcode が応答するまで待つか、Xcode を強制終了させて再度立ち上げます。
Xcode が応答しなくなるまでの間に、メニューで `Window` -> `Devices and Simulators` を起動させておきます。

### Connect via network のチェックを外す

Devices and Simulators に登録されている全ての実機について、Connect via network のチェックを外します。
(ワイヤレスデバッグが出来なくなるが致し方ない。。)
(余談ですが、有線の方が実機への転送が速いので、普段はワイヤレスデバッグは設定だけしておいて、なるべくUSBケーブルを使うスタイルで開発しています。)

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17330/c6a48826-9553-94bb-233f-680ce62f34b7.png)


### Unpair Device を行う

Devices and Simulators に登録されているが、電源をオフにしており現在起動していない端末について。
それら全ての実機について、Unpair Device を行って登録を解除します。
(必要があれば、再度デバイスを登録します。)

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17330/38494acd-9918-3132-8696-703712fa6663.png)

## (追記) ワイヤレスデバッグしていたデバイスをケーブルで繋ぐ

@koogawa さんからコメントを頂きました。

> ワイヤレスデバッグしていたデバイスをケーブルで繋ぐことでも解決できました。
> 一度繋げば、その後は Xcode を再起動するまでフリーズしなくなります


## さいごに
筆者の環境では、上記の対応をすることによってXcode のフリーズが起こらなくなりました。
記事執筆時点ではDeveloper Forums のスレッドでは未解決となっています。
次のXcode バージョンで解決されるのでしょうか。
【初学者】rails6アプリにCDNを使わずにbootstrapを導入しようとして学んだ事【アセットパイプライン】

## はじめに
ポートフォリオのためにrails6でアプリケーションを作っていたが、気軽に綺麗なフロントが欲しかったためBootstrapを導入したかった。
以前は完全にCSSだけで作られていたCSSフレイムワークであるBULMAを使っていた。
**CDNを使って導入するのではなく、gemを使って導入したいと思いました。**
>### 事前知識
>Bootstrapをgemで導入するには、大きく以下の3つの要素が必要。
>- bootstrap (gem)
>- popper.js (bootstrap (gem)に含まれている)
>- jquery-rails (gem)
> 導入は以下の公式文章を元に実施しました。
> [bootstrapの導入方法（公式文章）](https://github.com/twbs/bootstrap-rubygem)

## 結論
アセットパイプラインを学んだ。
bootstrapをrails6に導入しようとする場合**Sprocket**というアセットパイプラインを使う必要があるが、
rails6のデフォルトのアセットパイプラインは**Webpacker**であり[公式文章](https://github.com/twbs/bootstrap-rubygem)通りに手順を進めても上手く動くはずがなかった。
bootstrapのCSSの要素のみを使う場合は動いたが、jqueryだったりpopper.jsに依存する要素は正常に作動しなかった。（プルダウン等）

## 問題
結論でもう書きましたが、アセットパイプラインという存在を知らずにエラーが発生しました。
### アセットパイプラインとは
>アセットパイプラインとは、JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワークです。（参照：[railsガイド](https://railsguides.jp/asset_pipeline.html#:~:text=%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%A8%E3%81%AF,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82)）

つまり、アプリケーションのフロントを装飾するファイル(image, CSS, JS, etc)を全て集めてきて合体させて圧縮してくれる機能を持ったものです。
集めて合体して圧縮してくれるのは、**ファイルへのリクエストの回数を減らして処理をなるべく少なくするため**です。

### Sprocketsとは
>Rails 3.1 から導入された gem で、アセットファイル（JS, CSS, 画像など）を効率的に管理するための Asset Pipeline という仕組みの基盤です。
主な機能は以下のような物があります。

>- アセットファイルのパス管理
- アセットファイルの結合・圧縮
- アセットファイルの依存関係の解決
- アセットファイルのコンパイル
- 最終的に出力するファイルに hash を付けてキャッシュを無効化

>などなど。(参照[Rails Sprocketsとのお別れの仕方 - 最初の一歩 -](https://tech.smarthr.jp/entry/2017/02/21/193000))

印象としては古くて一部のユーザーにとっては、ファイルの管理方法に問題があるような印象で動作が遅いという事でした。

### Webpackerとは
>まず前提として、webpackとwebpackerは別物です。
webpackはJSのnpmのパッケージです。JSのコミュニティの中で育ちました。npmというのは、Node.jsで使えるパッケージ管理ツールのことで、つまりはRubyでいうbundlerです。JSの開発者たちは、このnpmか、その代替のyarnをみんな使っています。
webpackerはRubyのgemです。Railsでもwebpackが楽に使えるように作られました。

>webpackはモジュールハンドラーです。
モジュールバンドラーとはモジュールをひとまとめに、つまりバンドルしてくれるためのものです。
(参照：[全Rubyistに今すぐ伝えたいwebpackとwebpacker](https://qiita.com/jesus_isao/items/1f519b2c6d53f336cadd))






### 参考記事
- https://techracho.bpsinc.jp/hachi8833/2020_01_16/85940
- https://railsguides.jp/asset_pipeline.html
【Google Apps Script】初回実行時の承認画面 (2021年1月版)

# 背景

Google spreadsheet等で利用できるスクリプト、**Google Apps Script**を初めて実行する際に、承認作業が必要となる。

少し分かりにくいので、手順で整理しておく。

<font color="red">※</font> スクリプト作成者が不明・信頼できない場合は承認しないことをお奨めします。。。


# 手順

1. 「権限を確認」をクリック。


    <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704144/97027e1f-3443-ced5-d3f7-dbc14c775e97.png">

1. 実行するアカウントを選択。
    <img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704144/251fc820-e0e7-1b9b-b054-5bab89f8b5fc.png">

1. 「詳細」をクリック。

    <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704144/c7935095-c4d8-9707-9ea4-e4075e5c498e.png">

1. 「〇〇〇〇（安全ではないページ）へ移動」をクリック。

    <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704144/ddec208d-0f8f-bccc-c72d-7985240f7a0a.png">


1. 求められている権限を確認し、「許可」をクリック。
    <img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704144/59982f15-735b-7c54-13ae-f6b16b760477.png">





1. スクリプトが使用可能になる。

<font color="red">※</font> 許可した直後の実行はうまく行かないことが多いので、再度実行すると良いです。
プロご用達 Pythonコードの質を保つために入れておきたいパッケージ４選

# プロご用達 Pythonコードの質を保つために入れておきたいパッケージ４選

[flake8](https://gitlab.com/pycqa/flake8) ... コードチェック
[black](https://github.com/psf/black) ... コード自動整形
[isort](https://pycqa.github.io/isort/) ... インポートをソート
[mypy](http://www.mypy-lang.org/) ... 静的型チェック

全部 pip で入る。
コミットタイミングでJenkinsなどでチェックするのが良い。
レビューのコストが下がり、コードの品質が保たれるのでやったほうがいい

### flake
以下のような気持ち悪いコード、見ると吐き気がしますね。。。

```Python
from flask import Blueprint

sample = Blueprint("sample1", __name__)

@sample.route("/")
def index():
    print(
        
        "sample.index"
    )
    return "sample.index"
```

flakeコマンドを実行すると修正すべき箇所が表示される。

```
$ flake8 ./app/views/sample.py
./app/views/sample.py:5:1: E302 expected 2 blank lines, found 1
./app/views/sample.py:8:1: W293 blank line contains whitespace
```

### black

flakeはコードチェックだけで修正まではしてくれません
blackはコード自動整形を行いflakeの修正箇所を修正

```
$ black ./app/views/sample.py
reformatted app/views/sample.py
All done! ✨ 🍰 ✨
1 file reformatted.
```

修正後のコードいい感じに

```Python
from flask import Blueprint

sample = Blueprint("sample1", __name__)


@sample.route("/")
def index():
    print("sample.index")
    return "sample.index"
```

### isort

公式サイトより、このようなコード殺意覚えますね。。。

```Python
from my_lib import Object

print("Hey")

import os

from my_lib import Object3

from my_lib import Object2

import sys

from third_party import lib15, lib1, lib2, lib3, lib4, lib5, lib6, lib7, lib8, lib9, lib10, lib11, lib12, lib13, lib14

import sys

from __future__ import absolute_import

from third_party import lib3

print("yo")
```

isort コマンド実行

```
$ isort ./app/views/sample2.py
Fixing /Users/takashimorita/Sites/weekend-hackathon/app/views/sample2.py
```

このように綺麗にまとめてくれる。

```Python
from my_lib import Object

print("Hey")

from __future__ import absolute_import

import os
import sys

from my_lib import Object2, Object3
from third_party import (lib1, lib2, lib3, lib4, lib5, lib6, lib7, lib8, lib9,
                         lib10, lib11, lib12, lib13, lib14, lib15)

print("yo")
```

### mypy

mypyはそのままだと警告が出るので、許容すべきオプションを付けて実行すると良い。
下のオプションは一例

--ignore-missing-imports ... import先のチェックはしない
--no-warn-no-return ... returnが無くても警告しない
--disallow-untyped-calls ... アノテーションされていない関数呼出しを禁止する。
--disallow-untyped-defs ... アノテーションされていない関数を禁止する。
--strict-optional ... None に関する型チェック


```Python
def main(num):
    return num + 1


if __name__ == "__main__":
    main(123)
```

このサンプルに対してmypyを実行すると
main関数の返り値とmain関数の引数にアノテーションがないので警告される

```
$ mypy -i --ignore-missing-imports --no-warn-no-return --disallow-untyped-calls --disallow-untyped-defs --strict-optional ./app/views/sample3.py
app/views/sample3.py:1: error: Function is missing a type annotation
app/views/sample3.py:6: error: Call to untyped function "main" in typed context
Found 2 errors in 1 file (checked 1 source file)
```

アノテーションを設定する

```Python
def main(num: int) -> int:
    return num + 1


if __name__ == "__main__":
    main(123)
```

再度、mypyを実行すると成功する

```
$ mypy -i --ignore-missing-imports --no-warn-no-return --disallow-untyped-calls --disallow-untyped-defs --strict-optional ./app/views/sample3.py
Success: no issues found in 1 source file
```
Pythonで学ぶアルゴリズム　第19弾：並べ替え（ヒープソート）

# #Pythonで学ぶアルゴリズム< ヒープソート >

##はじめに
基本的なアルゴリズムをPythonで実装し，アルゴリズムの理解を深める．
その第19弾としてヒープソートを扱う．

##ヒープソート
前回扱ったスタックとキューに対して，ヒープソートはヒープと呼ばれる木構造によりデータを扱う．
ヒープは子ノード間での制約はないが親ノードと子ノードでの大小関係の制約がある．場合により，
（親$\le$子），(親$\ge$子)のようになる．今回は小さいものからデータを扱うために制約は（親$\le$子）とする．そのイメージ図を次に示す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/2cb8a109-8d3d-32d9-8a81-5bf2ddcdf390.png)

1親ノードに対して2子ノードの構造をもつヒープを特に**二分ヒープ**という．
これを今まで扱ってきたようにリストのデータをこのヒープ構造に落としこむ．このときヒープ構造に落としこむということは木の上から順に小さな値となっていることが分かる．すなわち，**一番上の親ノードを取り出すと，そのときの最小値が得られる**．その様子を次に示す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/1414390f-17ca-51c9-fa76-d72726ab25ad.png)
図にあるように，二分木が崩れてしまう．そのときには一時的に末尾が一番上に移動し，二分木構造を補う．しかしながら，必然的に親ノードと子ノードの制約条件を満たさないことが多くなる．ヒープソートでは常にヒープ構造を保とうと，再び制約条件に従いヒープ構造を整える．その様子を次に示す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/b60cf38d-5a0f-3f8c-5c22-fd1648e3a05f.png)
このヒープ構造修正後も次に示す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/3e5fd7b1-cc51-67ff-a203-8eea1f1b61d5.png)
上図より，再びヒープが構成され，そのときの最小値が一番上の親ノードにあることが分かる．
この操作を繰り返すことで，昇順に並べ替える．

ここで，リストとヒープの対応付けを次に示す．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/951300/fb4b6086-f7bd-a6e2-209c-d6be1f8f4d9b.png)

##実装
Pythonの標準ライブラリを用いたコードとそのときの出力を以下に示す．

#####コード
```python:heap_sort.py
"""
2021/01/16
@Yuya Shimizu

ヒープソート
"""
import heapq    #ヒープを扱うPython標準ライブラリ

def heap_sort(data):
    DATA_FOR_HEAP = data.copy()     #ヒープを作るためのデータを格納
    heapq.heapify(DATA_FOR_HEAP)    #ヒープ生成（最小順に並んだ木構造）
    return [heapq.heappop(DATA_FOR_HEAP) for _ in range(len(data))] #heappop関数で順に取り出す

if __name__ == '__main__':
    DATA = [6, 15, 4, 2, 8, 5, 11, 9, 7, 13]

    sorted_data = heap_sort(DATA)

    print(f"{DATA} → {sorted_data}")
```

#####出力
```
[6, 15, 4, 2, 8, 5, 11, 9, 7, 13] → [2, 4, 5, 6, 7, 8, 9, 11, 13, 15]
```

##計算量
スタックとキューではオーダー記法で表すと計算量は$O(n^2)$であったが，ヒープソートではその計算量が**$O(log(n))$**となる．$n$の数（データ数）が大きくなった時でもそこまで計算量が大きくならないことが分かる．


##感想
標準ライブラリを用いず，再帰などを駆使してアルゴリズムを記述方法も紹介されていたが，ここでは省く．アルゴリズムについては理解できたし，Pythonに標準ライブラリがあるならそれを使えばよいのではないかと思う．アルゴリズム自体は理解しているため，必要となれば，そのときに改めてアルゴリズムに立ち返ればよいと考える．残りはマージソートとクイックソートの2つで並べ替えアルゴリズムの終わりが見えてきた．次回も楽しみである．

##参考文献
Pythonで始めるアルゴリズム入門　伝統的なアルゴリズムで学ぶ定石と計算量
　　　　　　　　　　　　　　　　　　　　　　　　 増井 敏克　著　　翔泳社
[React + Typescript] Property 'type' is missing in type  but required in type 'AnyAction'

#課題
今日もTypeScriptから怒られた。

```tsx:something.tsx
export default lifecycle({
  async componentDidMount() {
    store.dispatch(getPackages)
  }
})
```

```error:エラー
> Property 'type' is missing in type '(dispatch: Dispatch) => Promise<void>' but required in type 'AnyAction'.
```

#結論
今日も型だった

```tsx:something.tsx
export default lifecycle({
  async componentDidMount() {
    store.dispatch<any>(getPackages)
  }
})
```

TypeScript素人故怒られまくる。
エラー解決するたびに只管メモします。

#参考情報
Typescript error when dispatching a thunk: Argument of type 'ThunkAction<void, CombinedState<...>>' is not assignable to parameter of type 'AnyAction'.
https://github.com/reduxjs/redux-toolkit/issues/587
This app is using the Heroku-16 stack, which is deprecated　Herokuをアップグレードする方法

#久しぶりにHerokuデプロイすると、古すぎてできなかった。。。
![スクリーンショット 2021-01-16 14.00.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/85561e64-ce60-4ce1-8596-2977b3aa76b3.jpeg)
久しぶりに個人開発したWebサービスを更新しようと思い、Herokuにデプロイ！

しかし、Herokuが古すぎたのかデプロイ失敗しました・・:sweat_smile:

https://devcenter.heroku.com/changelog-items/1958
どうやらHeroku-16がもうdeprecatedになったようです。。。

#heroku-20にアップグレード！
https://devcenter.heroku.com/articles/upgrading-to-the-latest-stack
:point_up:こちらを参考にやりました。

この手順であってるのかはわかりませんが、何はともあれこれでうまくデプロイできました！

##apps-table？をinstall

```console
$ heroku plugins:install apps-table
 ›   Warning: heroku update available from 7.41.1 to 7.47.7.
Installing plugin apps-table... installed v0.1.0

$ heroku apps:table --filter="STACK=heroku-16"
 ›   Warning: heroku update available from 7.41.1 to 7.47.7.
App Name              Stack     Team 
murmuring-peak-19873  heroku-16 null 
nameless-stream-69702 heroku-16 null 
```

※これが必要なのかはわかりません・・・

##app nameの確認

```console
$ heroku apps
 ›   Warning: heroku update available from 7.41.1 to 7.47.7.
=== a551.return@gmail.com Apps
murmuring-peak-19873
nameless-stream-69702
```

##stackをset

```console
$ heroku stack:set heroku-20 -a nameless-stream-69702

 ›   Warning: heroku update available from 7.41.1 to 7.47.7.
Setting stack to heroku-20... done
You will need to redeploy ⬢ nameless-stream-69702 for the change to take effect.
Run git push heroku master to create a new release on ⬢ nameless-stream-69702.
```

##git commitする

```console
$ git commit --allow-empty -m "Upgrading to heroku-20"
[master b0ead3e] Upgrading to heroku-20
```

##masterにpush

```console
 git push heroku master
```

これでうまくデプロイできました:clap: