OmniAICreator/Qiita-1.07M huggingface dataset:
chartjs オプション変更後グラフ更新する

##動機
chartjsグラフのオプションを変更してから、グラフ更新するコードをメモします。
ネットで探しましたが、なかなか見つけられなくて、メモします。
複雑ではなく、簡単なコードで記録します。

##グラフの縦スケールの最大値を変更してから、グラフを変更する例


```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>縦スケールオプション変更</title>
    <!-- ライブラリの指定 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    <script>
        window.onload = function(){
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
                // 作成したいチャートのタイプ
                type: 'line',

                // データセットのデータ
                data: {
                    labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
                    datasets: [{
                        label: "初めてのデータセット",
                        backgroundColor: 'rgb(255, 99, 132)',
                        borderColor: 'rgb(255, 99, 132)',
                        data: [0, 10, 5, 2, 20, 30, 45],
                    }]
                },

                // ここに設定オプションを書きます
                options: {
                    scales: {
                        yAxes: [           // Ｙ軸 
                            {
                                ticks: {     // 目盛り        
                                    min: 0,      // 最小値
                                    max: 45,     // 最大値
                                    stepSize: 5  // 間隔
                                }
                            }
                        ]
                    }
                }
            });
            document.getElementById("square-button").onclick = function () {
                // 縦スケール最大値を変更する
                chart.options.scales.yAxes[0].ticks.max = 100
                // グラフを更新メソッド
                chart.update();
            }
        }

    </script>
</head>
<body>
    <p>縦スケール範囲を変更</p>
    <canvas id="myChart"></canvas>
    <button id="square-button">縦スケール最高値を100にする</button>
</body>
</html>
```
##結果
####変更前 最大値：45
![スクリーンショット 2021-02-14 12.42.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684879/f80f2634-d053-224b-e0e6-bcf25aa5e81d.png)

####変化後 最大値:100
![スクリーンショット 2021-02-14 12.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684879/b1eee5ea-2b1f-8ec4-3b3d-a52ec3885b31.png)
案件獲得で大切なこと

#デイトラWeb制作コース初級編DAY20~30の学び

# 【この記事に書いてあること】
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミング学習26日目⏩<br><br>Web制作コース初級編DAY20〜30💻<br><br>学習時間:2時間⏳<br><br>学習内容:・営業方法・案件獲得について✏<br><br>学び📚<br>・コーティング・デザインをする上でコンセプト・サービスの特徴や強み・ターゲット客層は重要！<br><br>・納品後にフィードバックアンケートを実施する<a href="https://twitter.com/hashtag/%E3%83%87%E3%82%A4%E3%83%88%E3%83%A9?src=hash&amp;ref_src=twsrc%5Etfw">#デイトラ</a> <a href="https://t.co/spGjB94iH7">pic.twitter.com/spGjB94iH7</a></p>&mdash; ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) <a href="https://twitter.com/FuRiC_twi/status/1360797901107134465?ref_src=twsrc%5Etfw">February 14, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
#　【学び】

1　＜いいデザインのサイトを見ておく＞
　コーディングやデザインを鍛える一番の方法は、『良いものを見てマネする』こと
　いいサイトを多く見て、自分の目を肥やすことから始める

２　＜ヒアリングシートを作る＞
ヒアリング項目：
　①　コンセプト
　②　サービスの強み、特徴
　③　メインの客層（年齢、男女比）
　④　HPに訪れたときに見せたいイメージ（かっこいい、温かい、センスがある、技術力がある）
　⑤　HPに載せたい内容
　⑥　追加したい機能
　⑦　現行サイトがある場合は、環境についての情報

＊「コンセプト」・「サービスの特徴や強み」・「ターゲット客層」は特に大切！

３　＜テンプレートを使用する場合に伝えるポイント＞
　・デザインは、ヒアリングした項目を元にこちらでお任せ作成させてもらう旨を伝える
　　どこまで要望できてどこからできないのか明確にしておく！！

４　＜納品後の行動＞
　・実績掲載の許可
　→制作物をポートフォリオに掲載したいため

　・今回のフィードバックをもらう
　→Googleフォームでアンケートをもらう
　　お礼に、次回利用時の割引などの特典を付ける
리액트 네이티브



오늘 react를 공부하던중에
내가 리액트를 공부하고 있는데 프런트단만 만들면 무었을 하나 하는 생각이 들었다.
그래서 전에 잠깐 공부했으나 제대로 하지 못했던 react native 를 조금 알아보기 위해 react native 를 셋팅했는데
시뮬레이터까지 설치했는데도 불구하고
앱이 실행되지 않았다.

코코아스크립트 관련 에러인것 같은데 아직 문제점을 해결하지 못했다.
2시간동안 헤맸다.
무었이 문제인지 답답하다.
機械学習のための数学

機械学習のモデルに使われる数式の導出を理解する時に時に思い出せなくて調べた知識をまとめておく。[機械学習 はじめよう](https://gihyo.jp/dev/serial/01/machine-learning) およびそれと同等の英文が読めるようになる程度のことだけまとめてある。

## 数学記号
* Σ: 右にある式全ての和
* Π: 右にある式全ての積
* dx/dy: xのyについての微分
* ∂x/∂y: xのyについての偏微分
* { }: ( ) が内側に使われている時の括弧
* [ ]: ( ) が内側に使われている時の括弧
* p(y=1 | x): xにおいてy=1となる確率
* f(x)|x=t: xをtとしたときのf(x)

## 微分
### 微分とは
関数を微分すると、その関数のある地点での傾きを表す関数が得られる。積分は面積が求められる。

### 偏微分とは
変数が複数ある式に大して、一つの変数についてのみ微分すること。他の変数は定数として扱われる。

### 基本
* 定数を微分すると0
* xを微分すると1
* x^2を微分すると2x
* つまり一般に、X^nを微分するとn・X^(n-1)

### logの微分
log(x) を微分すると 1/x になる。[参考](https://mathwords.net/logxnobibun)

log(1-x) = d(1-x)/dx・d(log(1-x))/d(1-x) = -1・1/(1-x) = -1/(1-x)

### eのx乗の微分
e^xを微分するとe^xになる。

そのため、 d/dx・e^(-x) = d(-x)/dx・d/d(-x)・e^(-x) = -1・e^(-x) = -e^(-x)

### 合成関数の微分
f(x)g(x) = f'(x)g(x) + f(x)g'(x) になる。

### 分数関数の微分
f(x)/g(x) を微分すると (f'(x)g(x) - f(x)g'(x))/g(x)^2 になる。[参考](https://mathwords.net/bunsunobibun)

### Πの扱い
Σ log(x) = log(Π x) を利用してΣにすることで微分しやすくなる。

### 微分演算子の変形
何という法則かはわからないが dx/dy = dx/dz・dz/dy と変形していいらしい。

### 偏微分が全微分に変わる時
δf(x)/δx において、f(x)にx以外の変数がなければ、df(x)/dxとして良い。

## 英語名

* Gradient: 勾配。微分で得られる、傾きのこと。
* Stochastic: 確率的。Stochastic Gradient Descentでは、入力をランダムに選ぶことを表している。
* Gradient Descent: 勾配降下法。あるグラフを微分して得た勾配に比例して地点をずらし、それが差すグラフの値を最小化する手法。複雑なグラフでは局所解に落ちやすい欠点がある。
* Stochastic Gradient Descent: 確率的勾配降下法。次元がNあるとき、勾配を全てのNに対して求めると計算量が多くなるため、入力ごとにNのうちどれか1つに対してのみ勾配降下法を適用する手法を差す。計算量が下がり実装しやすくなる他、ランダム化によって局所解に落ちるリスクが軽減される。
* Likelihood: 尤度
* Negative log-likelihood: 負の対数尤度関数。関数最適化ではふつう値を最小化する形で計算するが、指定した地点での関数の値を最大化したい時には目的関数を負にすることでふつうの関数最適化問題に変換できる。尤度を直接扱うのではなく尤度の対数を扱うのは、対数化することでΠがΣにできて微分しやすくなるため。
* Sigmoid function: シグモイド関数。一般にはarctanなどSっぽい関数の総称だが、Logistic Regressionの文脈では 1/(1-e^(-t)) を差す。実数全域を取る関数を0~1の空間に変換するのに使われ、累計密度関数を使って変換するのに比べ計算が容易であるというメリットがある。
* Perceptron: パーセプトロン。
* Logistic Regression: ロジスティック回帰。活性化関数にシグモイド関数が使われ、分類の確率値を算出できるところがパーセプトロンとは異なる。

## 数式の手書き
* σ (シグマ): 反時計周りに回して折り返す
* ∂ (ラウンドディー): 真ん中から反時計周り
* log: lをくるんとさせる
* w: わからんが、左を曲げたωみたいに書いてる
Amazon EC2 上で AWS CLI がクレデンシャルの問題で失敗した時の対処

２回ほど引っ掛かり、かつネット上でパッと情報が見つからなかったので整理します。

## EC2 インスタンス上で AWS CLI を実行する
`Amazon Linux 2 AMI`の EC2インスタンスをデフォルトの設定で作成すると、初めから AWS CLI が使える状態になっています。

```
$ aws --version
aws-cli/1.18.147 Python/2.7.18 Linux/4.14.214-160.339.amzn2.x86_64 botocore/1.18.6
```

この状態でコマンドを実行すると、以下のようなエラーが出ます。

```
$ aws s3 ls
Unable to locate credentials. You can configure credentials by running "aws configure".
```

現在の設定を確認すると、確かにクレデンシャルが設定されていません。

```
$ aws configure list
      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile                <not set>             None    None
access_key                <not set>             None    None
secret_key                <not set>             None    None
    region                <not set>             None    None
```

この原因は、EC2 インスタンスに IAM ロールが割り当てられていないためでした。EC2 インスタンスの`セキュリティ`タブから `IAM ロール`を確認すると、確かに設定されていないことが確認できます（デフォルトの設定で起動したので）。

![スクリーンショット 2021-02-14 12.00.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377165/da01178d-ccbc-93fd-de98-9b6a845c87d5.png)

## EC2 にアタッチする IAM ロールを作成する

では、IAM ロールを設定しましょう。IAM サービスへ移動し、ロールを作成します。

![create_role.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377165/b79f4ddd-5827-8cdc-4be2-3025ee1e0619.png)

EC2 にロールをアタッチするので、EC2 を選択して次のステップへ進みます。

![role_ec2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377165/d9a0253b-ff77-23be-0025-655f332d0796.png)

アクセス権限の設定では、実行したい AWS CLI のコマンドに必要な権限を持つポリシーを選択します。例えば s3 の情報を参照したい場合は、`AmazonS3ReadOnlyAccess` を選択します。

![policy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377165/8ade2880-dae6-cdfb-e4e8-aab7559fb7a7.png)

あとはそのまま進んでいき、分かりやすいロール名をつけて IAM ロールを作成します。

## EC2 にロールをアタッチする
早速先ほど作成した IAM ロールを EC2 にアタッチしましょう。EC2 インスタンスを選択し、図のように`IAM ロールを変更`をクリックします。

![iam_change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377165/dda8179e-a612-3d2f-bc70-d1c75b87ae9a.png)

`IAM ロールを変更`の画面が表示されるので、先ほど作成した IAM ロールを指定して `保存` をクリックします。これで EC2 インスタンスに IAM ロールがアタッチできました。
![attach.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377165/9322cd46-4b5e-07e8-e360-4ae6d0835625.png)

## 再度 AWS CLI を実行する
それでは、もう一度 AWS CLI を実行してみましょう。

```
$ aws s3 ls
2021-01-03 13:43:01 2021-test-bucket
2021-01-04 14:16:24 2021-test-bucket2
```

s3 のバケット一覧が表示されたら成功です。現在の設定を確認すると、`Type` が `iam-role` で `access_key` と `secret_key` が設定されていることが確認できます。

```
$ aws configure list
      Name                    Value             Type    Location
      ----                    -----             ----    --------
   profile                <not set>             None    None
access_key     ****************SF6K         iam-role    
secret_key     ****************DRGN         iam-role    
    region                <not set>             None    None
```
Swiftを触った備忘録

これまで`HTML/CSS`、`javascript`、`Ruby`しか触ったことがなかったのですが、諸事情により急遽`Swift`でポートフォリオを作成しなければなくなったため、その学習の内容を軽くまとめてます。

学習にあたって閲覧している動画がこちら↓
[【iOS14対応】未経験者がiPhoneアプリ開発者になるための全て iOS Boot Camp](https://www.udemy.com/share/103I3AAEcTdVhUTHQH/)

始めてまだ3日しか経ってないですが、とても丁寧に解説してくださるのでサクサク進んでます。

# 3日間触ってみた感想
サーバー寄りの言語は`Ruby`しか触ったことがなかったので不安しかなかったですが、思ったより似通っているところが多くて簡単に感じています。
`Swift`を扱うには`xcode`が必要なので、今まで`VScode`を使ってきた身としては少々わかりにくい部分が多いですが、直感的に操作できるので楽しさがあります。

# クラスとかデリゲートとかプロトコルとか
`Ruby`を学んだときにクラスの概念とか継承とか学びましたが、これは`Swift`も一緒なんですね(初学者なのでアホっぽい発言は多めに見て下さい)。
`Swift`ではApple側が、アプリを操作するのに便利なメソッドを予め用意してくれているので、クラスを継承させると様々なメソッドがあらゆるところで使えるみたいです(大雑把)。

例えば

```swift
class ViewController: UIViewController {
  //(省略)
}
```
これは特に何も継承させないで、アプリの画面に表示させる処理を記述した部分ですが、ここに

```swift
class ViewController: UIViewController, UITextFieldDelegate
 {
  //(省略)
}
```
と記述すると`UITextFieldDelegate`クラスに用意されている、`TextField`に使える様々なメソッドが使えるようになります。
現時点で私が学んだのは`キーボードの外をタップしたらキーボードが隠れる`と`Enterキーを押したらキーボードが隠れる`というメソッド。
使い方は以下。

```swift
// まず継承したクラスのメソッドが使えるようにする
メソッドを使えるようにしたい構造体の名前.delegate = self

//タッチボードの外部をタッチしてタッチボードを隠す
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        view.endEditing(true)
    }
    
    //Enterキーを押すとタッチボードが隠れる
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        
        return true
    }
```
以上。
Googleにインデックス登録されない 2

<h3>前回のおさらい</h3>
ホームページを作ったのですが、Google検索に表示されない上に、インデックスにも登録できませんでした。そこで、少しずつ対応を入れて何が問題なのかを調べて行くことにしました。

**対象のURLはこちら**
https://www.ailabse73.com/

**記事**
Googleにインデックス登録されない 1
https://qiita.com/JunichiFujimoto/items/55a086c2b332e71f33dd
Googleにインデックス登録されない 2
https://qiita.com/JunichiFujimoto/items/a6b77bd38b820b2cfc3c
Googleにインデックス登録されない 3
https://qiita.com/JunichiFujimoto/items/e797dedd56963548ebb8
<hr>

Qiitaに記事を貼ったあたりから、インデックスのカバレッジというところに変化がありました。
参照リンクが有効だったのかもしれません。
ただ、URL検査をしても「URLがGoogleに登録されていません」という状態のままでした。

![スクリーンショット 2021-02-14 12.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/537802/0147405e-197b-3030-166c-f35dec8ef54d.png)

<hr>
新たに、htmlのheadにmeta情報を追加してみました。 
ですが、1週間程経過しても何も変化はありませんでした。

```
    <meta name="description" content="株式会社 AI Labs E73 問い合わせページ">
    <meta name="author" content>
    <meta name="robots" content="index,follow">
```

<hr>
次に、Bingで検索してみたら、トップに表示されていることがわかりました。
ただ、URLがhttpのものだったので、**「このサイトは安全ではありません」**と表示されていました。
GAEで作っているので、自動でhttpsになるものだと思っていましたが、設定しないといけないみたいでした。
この2行を入れたら常時HTTPS接続になるらしいので、入れてみました。


  `redirect_http_response_code: 301`
  `script: auto`

```
handlers:
- url: /static
  static_dir: src/static
  secure: always  << ここの追記

- url: /.*
  secure: always
  redirect_http_response_code: 301  << ここの追記
  script: auto  << ここの追記
```

これで、少し様子を見て次のアクションをとってみようと思います。
selenium/standalone-chromeでheadlessでリモートから接続で、且つダウンロードもしたい

# 関連図

## [selenium/standalone-chrome][5]

![diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16757/aa5f558f-b0df-291d-7949-24c1dbf7b018.png)


こういう感じで繋がっている場合、chromeにダウンロードさせても操作しているruby側にはファイルがダウンロードされるわけではない（ダウンロードされるにしてもselenium/standalone-chromeのコンテナ側に入る）。

# 解決方法

ボリュームを使う

![diagram.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16757/41bcae59-8737-9b3c-9ae1-57d530dc1cee.png)

## 例

envにパスを書いておくことで、docker-compose.yml、ruby側（`ENV["CHROME_DOWNLOAD_DIR"]`）で同じ値が参照できる。

```:.env
CHROME_DOWNLOAD_DIR=/chrome/downloads
```

```yml:docker-compose.yml
# .envがあればdocker-composeはとりあえずそれを読んでymlに反映してくれる
services:

  # /chrome/downloads
  # を共通のボリュームにしておく
  # ただそれだけだと権限の問題で書き込めないので、適当に777とかにしておく
  # $ sudo chmod 777 chrome/downloads
  chrome:
    image: selenium/standalone-chrome
    shm_size: 256m
    volumes:
      - .${CHROME_DOWNLOAD_DIR}:${CHROME_DOWNLOAD_DIR}

  backend:
    env_file:
      - .env # ファイルを指定
    build:
      context: ./backend
    working_dir: /app
    volumes:
      - ./backend:/app
      - .${CHROME_DOWNLOAD_DIR}:/app${CHROME_DOWNLOAD_DIR}

```

## [headless chromeでファイルをダウンロードする方法][1]

[一般的なseleniumの使い方なら][2]たしかに`download_path=`が[入っている][3]が、[リモート][4]だとそもそも[このモジュール][3]が入っていないので、下のように手を加える必要がある。

|Selenium::WebDriver::Chrome::Driver  |Selenium::WebDriver::Remote::Driver  |
|---|---|
| include DriverExtensions::DownloadsFiles あり |  なし  |

```rb
...
...

driver = Capybara::Selenium::Driver.new(
  app,
  browser: :remote,
  desired_capabilities: caps,
  url: "http://#{DOCKER_CHROME_SELENIUM_HOST_NAME}:4444/wd/hub"
)
bridge = driver.browser.send(:bridge)
bridge.http.call(
:post,
"session/#{bridge.session_id}/chromium/send_command",
cmd: "Page.setDownloadBehavior",
params: { behavior: "allow", downloadPath: ENV["CHROME_DOWNLOAD_DIR"] }
)
```

後は`/app/chrome/downloads`にファイルが入ってくるのがruby側でも見れる。
 
[1]: https://tech.medpeer.co.jp/entry/2019/09/25/090000
[2]: https://www.selenium.dev/selenium/docs/api/rb/Selenium/WebDriver/Chrome/Driver.html
[3]: https://www.selenium.dev/selenium/docs/api/rb/Selenium/WebDriver/DriverExtensions/DownloadsFiles.html#download_path=-instance_method
[4]: https://www.selenium.dev/selenium/docs/api/rb/Selenium/WebDriver/Remote/Driver.html
[5]: https://hub.docker.com/r/selenium/standalone-chrome
拡張eコマースでカスタム指標を使用する場合のデータレイヤー例（CVページ）



Google アナリティクス、ユニバーサルアナリティクスの場合です。
<a href="https://www.digitalanalyst.asia/blog/custom-metrics-in-use.html">こちらのブログ</a>で出てくるタグで、別途Google アナリティクスやGoogle タグマネージャでの設定が必要となります。

```ruby:conversion_page.js
<script>
    dataLayer.push({
        "ecommerce":{
        "purchase":{
        "actionField":{
        "id":"xxxx-xxxx-xxxx",//購入ID
        "revenue":,//収益
        "tax":
    },
    "products":[{//購入商品の種類に応じてノード数は変動させる
        "id":"",
        "name":"",//商品名
        "price":,//個別の商品の料金(price*quantityで合計値と等しくなるように。そうしないとレポート上での「商品の収益」の値がおかしくなる)
        "quantity":,//商品の個数
        "metric1":,//カスタム指標1(priceやquantity異なり、商品全体の総数を書き出すようにする)
        "metric2":,//カスタム指標2
        "metric3":,//カスタム指標3
        "metric4": //カスタム指標4
    },{
        "id":"",
        "name":"",
        "price":,
        "quantity":,
        "metric1":,
        "metric2":,
        "metric3":,
        "metric4":
    }]
}
}
});
</script>
```
Flutterでリッチなアニメーションを表示させよう！【Rive】

# Riveとは
[Rive](https://rive.app/)

Riveとは、リッチでおしゃれなアニメーションや動きを色んなプラットフォームに使えるようにしたWebサービスです。
Rive上のエディタでアニメーションを作成し、そのアニメーションを実際のアプリに簡単に組み込むことができます。

今回は、主にFlutterでのアニメーションの実装の部分にフォーカスして話を進めますが、アニメーション自体の作り方などは公式のサイトがすごく参考になると思います

[Riveリソース](https://rive.app/resources/)
[Tutorial](https://docs.rive.app/tutorials)

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363545/251d1fac-7850-823d-f12b-7966c9a6bc15.gif)

# 実装
# パッケージのインストール
[rive](https://pub.dev/packages/rive)をインストール

```yaml:pubspec.yaml
dependencies:
  rive: ^0.6.7
```

## Assetsに追加
https://rive.app/community/
コミュニティに色んなアニメーションが既にあるので、ここからダウンロードすることによってすぐに使うことができます。

![スクリーンショット 2021-02-14 11.13.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363545/0c6992e2-1fa3-8363-2a39-9b9d94d78c53.png)
右の「Download」をクリックすると`.riv`ファイルがダウンロードされるます。

ダウンロードしたら、プロジェクトに戻ってプロジェクト直下に`assets`ディレクトリを作成。
そして、さっきの`〇〇.riv`を`assets`フォルダの直下配置します。

`pubspec.yaml`に追加したアセットのパスを追加。

```yaml:pubspec.yaml
assets:
  - assets/love_note_4.riv
```



## アニメーションを開始
実際にアニメーションを表示させる部分を実装していきます。
まずは、変数を定義

```dart:main.dart
Artboard _artboard;
RiveAnimationController _controller;
```

その後、`initState`に以下のコードを追記


```dart:main.dart
rootBundle.load('assets/love_note_4.riv').then(
  (data) async {
    final file = RiveFile();

    if (file.import(data)) {
      final artboard = file.mainArtboard;
      artboard.addController(_controller = SimpleAnimation('note'));
      setState(() => _artboard = artboard);
    }
  },
);
```
行っている処理としては、アセットの`.riv`ファイルを読み込み、それを`RiveFile`オブジェクトとして作成。
また、同時に`RiveAnimationController`を継承した`SimpleAnimation('note')`を`artboard`に追加。
`SimpleAnimation`の引数は`.riv`ファイルをRiveのエディタで開いた際のアニメーション名を渡す。
(下のスクショの赤い枠の部分がアニメーション名)

![スクリーンショット 2021-02-14 11.31.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363545/545d7c81-249b-d454-bd6b-5ea48a6fc709.png)

そして、好きな箇所に`Rive(artboard)`を追加

```dart:main.dart
Rive(artboard: _artboard)
```

## おまけ。
このアニメーションを途中で停止さたい場合は、`_controller`の`isActive`を命令的に`false`にしてやれば良い。
例えば、、、

```dart:main.dart
void _togglePlay() {
  setState(() {
    _controller.isActive = !_controller.isActive;
  });
}
```
これをどっかの`onTap`や`onPressed`に渡してやる。

# 終わりに
Flutterでいい感じのローディング用のアニメーションないかな〜と探していたところ、これを発見しまして色々触ってみたところかなりいい感じだったので紹介させてもらいました。

全体のコードや最初のGIFで載せてるコードはGitHub上にあげていますので、お好きにご覧ください！
https://github.com/shotaro427/rive-sample
フレームワークとライブラリ　違い

<h1>Webアプリケーションフレームワーク</h1>は、Webアプリケーションの土台となるプログラムのことです。Web開発を何度か経験しているとわかりますが、似た処理というのがいくつも出てきます。Web開発における共通処理をまとめあげたものがWebアプリケーションフレームワークとなります。共通処理を書かなくて良いので、労力が削減され効率的に開発できるのです。

また、ライブラリとフレームワークの違いを知っておくことも重要です。ライブラリが「ユーザの書いたプログラムによって 呼び出される 」側なのに対して、フレームワークは「ユーザの書いたプログラムを 呼び出す 側ということです。つまり、ライブラリはユーザの意思によって取り出す便利な道具（ライブラリをどう使うかはユーザ次第）です。しかし、フレームワークは取り出し可能な便利道具という範疇ではなく、フレームワークという巨大な土台（ルール）の上でユーザプログラムが動くため、ユーザはフレームワークのルールに沿って開発をしていかねばなりません。

ライブラリと比較すると、制御の逆転（主従の逆転）が起こっています。なんだか「フレームワークにプログラムを書かされている」かのような表現をしていますが、まさにそうなのです。そのおかげで、複数人の開発者がいてもだいたい同じような書き方でWebアプリケーションが開発できます。つまり、フレームワークを使えば、大規模開発も効率的というわけです。
Reactで「さらに表示」ボタンを実装する方法について

今回は`react`+`TypeScript`で`「さらに表示」`ボタンを実装する方法について解説します。
ただし、ボタンを押すたびにdbとやり取りするものではなく、予め全部のデータを取得しておいて、隠れているものをさらに表示ボタンを押すことで表示するというものになります。

![ezgif.com-gif-maker (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509690/2ec96ee1-5d10-d2d7-eb7a-87aa4fee8408.gif)


## 完成形のコード
まずは完成形のコードをお見せします。
ボタンに関わる部分だけ記載します。
※全体のコードは[こちら](https://github.com/RYOTA-KOBA/MatchingApp/blob/master/src/components/Home.tsx)

```Home.jsx
const Home = () => {
  const [loadIndex, setLoadIndex] = useState(4);
  const [isEmpty, setIsEmpty] = useState(false);
  const [currentPost, setCurrentPost] = useState([]);

  const displayMore = () => {
    if (loadIndex > currentPost.length) {
      setIsEmpty(true);
    } else {
      setLoadIndex(loadIndex + 4);
    }
  };

  return (
    <>
          {currentPost.slice(0, loadIndex).map((post: any) => (
            {/* Postは投稿一つ一つを表示するためのコンポーネントです。 */}
            <Post
              key={post.id}
              authorName={post.authorName}
              content={post.content}
              createdAt={post.createdAt}
              title={post.title}
              id={post.id}
              uid={post.uid}
              category={post.category}
            />
          ))}
            <Button
              disabled={isEmpty ? true : false}
              onClick={displayMore}
              variant="contained"
            >
              さらに表示
            </Button>
    </>
  );
};
```

## 解説
さらに表示ボタンを押すと`displayMore`という関数が動くようになっています。`displayMore`では、現在表示されている投稿の数によってこれ以上表示する投稿があるのかどうかを判断しています。

表示する投稿数の制御は、`currentPost.slice(0, loadIndex).map((post: any)`で行っています。
`currentPost`は全部の投稿が入っている配列で、その中身をを0番目からloadIndexの数だけ取り出してmapでイテレートしています。
`loadIndex`はhooksで、初期値は4としています。つまり初期表示時は投稿が4件表示されます。そこでさらに表示ボタンを押すことで、`displayMore`が動き、`loadIndex`と`currentPost`のlengthを比較して`loadIndex`の方が大きい場合は`setLoadIndex(loadIndex + 4)`とすることで、sliceする投稿の数を4つ増やす(つまり+4件投稿を表示する)ということになります。
これを繰り返す(さらに表示ボタンを何回も押す)ことでいつか`loadIndex > currentPost.length`となる時が来ます。
その時に`setIsEmpty(true)`とすることで、これ以上表示する投稿があるかどうか判定する関数`isEmpty`が`true`となり、Buttonのdisabledがtrueとなるため、ボタンが押せなくなります。
【MySQL】データのINSERT

　Laravelでのアプリ制作中に、投稿機能が動作しなくなってしまいました。
　他の機能は正しく動作するか調べる為に、以下の条件でMySQLにデータをINSERTする方法を調べましたので、アウトプットしていきます。

　※　今回は、以下の記事を参考にさせて頂きました:relaxed::tulip:
http://www.hiihah.info/index.php?E71%EF%BC%9AMySQL%E3%81%A7%E3%81%AE%E6%97%A5%E4%BB%98%E3%80%81%E6%99%82%E5%88%BB%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B5%E3%83%BC%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6

　__テーブル構成__

```
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateArticlesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('articles', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('title');
            $table->text('body');
            $table->bigInteger('user_id')->unsigned();
            $table->foreign('user_id')->references('id')->on('users');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('articles');
    }
}
```

　articlesテーブルは、上記の通り
```
・id
・title
・body
・user_id
・created_at
・updated_at
```
　の６つのカラムで構成されています。

　これにデータをINSERTするには、以下のコマンドを実行します。

```
INSERT INTO articles VALUES(null, 'タイトル名', '記事の内容', 'ユーザーID', cast('年-月-日' as date), null);
```
　上記だと作成時刻が0:00になりますので、時刻の指定をする場合は、以下のコマンドを実行します。

```
INSERT INTO articles VALUES(null, 'タイトル名', '記事の内容', 'ユーザーID', cast('年-月-日 ○:○○' as datetime), null);
```
　これで以下のようにINSERTすることができました。

```
+----+-----------------+-----------------+---------+---------------------+---------------------+
| id | title           | body            | user_id | created_at          | updated_at          |
+----+-----------------+-----------------+---------+---------------------+---------------------+
|  4 | タイトル名     　  | 記事の内容        |       1 | 2021-02-14 11:56:00 | NULL                |
+----+-----------------+-----------------+---------+---------------------+---------------------+
RubyのProcについて（備忘録）

### 備忘録のようなものなので間違っていたらコメントください
また参考にしたQiita の記事を自分で実行しながら、自分の理解のために記事を書きました。
参考の記事を見たほうがわかりやすいと思います。
https://qiita.com/k-penguin-sato/items/7f98335ef631ea5ce7ad
https://qiita.com/genya0407/items/1a34244cba6c3089a317

# Procとは何か
ブロックをまとめてオブジェクトにしたもの
理解をするのにブロックとメソッドのyieldについての理解が必要になる

#ブロックとは何か
do end
もしくは{}で囲まれたもの
ex)引数を受け取りその数字の回数分数字を表示する。

```
//これのdo から endまで
10.times do |i|
  puts i
end

//{}で囲まれている部分
10.times { |i| puts i }

do |parameter| 
 parameter.times do |i|
   puts i
 end
end

```

# メソッドとyieldについて
まずメソッドは以下のような形式をとる
そしてyieldは、10を引数としてhogeに対してブロックを用いて実行する。

```
//メソッド
//引数10のブロックの実行をする。
def hoge
    yield(10) 
end

//メソッドの実行例
//メソッドを呼び出してyieldで受け取った引数10を使って0~9の数字の表示をしている。
hoge do |parameter| 
 parameter.times do |i|
   puts i
 end
end
```

```
//実行結果
0
1
2
3
4
5
6
7
8
9
```

# Procについて
Procはブロックをオブジェクトにまとめたもの
Procはdo end, {}のブロックをまとめている。

```
//ここでは、0から引数まで表示するブロックをproc1にまとめている。
proc1 = Proc.new do |parameter| 
 parameter.times do |i|
   puts i
 end
end

//Procの実行方法
//引数として10を渡してプロックの実行をしてる。
proc1.call(10)
```

```
//実行結果
0
1
2
3
4
5
6
7
8
9
```
# メソッドの引数をProcオブジェクトにしてそれをメソッドとして実行する方法
Procオブジェクトを引数にして、関数内ではそのprocの呼び出しのproc.callを行う。
メソッドではyieldを用いてブロックを受け取って実行をしていたが、ここではProcを受け取ってProcの実行のためにメソッド内においてproc.call(引数)を行う。


```
//&procとして、渡されたブロックをProcオブジェクトに変換してメソッドの引数としている。*1
//proc.callによってprocにまとめられたブロックを実行できる。
//proc.call(20)はprocの引数を20としている。
def method2(&proc) 
  proc.call(10) 
end

//メソッドの実行
//ここで、メソッドの引数であるprocの記載をしている。
method2 do |parameter| 
 parameter.times do |i|
   puts i
 end
end
```

```
//実行結果
0
1
2
3
4
5
6
7
8
9

```
# *1
なぜこのようなことをしているのか
<b>ここでは、引数がブロック引数であるということを明示的に示している。</b>
(推測：プログラムの設計とか分かりやすさからやってるかも？）
そしてここで、ブロックをProcオブジェクトに変換している。
なぜProcオブジェクトに変換する必要があるのかというと、ブロックは変数に代入することが出来ない。
よってProcオブジェクトとしてまとめている。参考資料２からブロックの記載をお借りしました。
 

```
//これら二つについてはエラーが出る。
a = { |e| e + 1 }

a = do |e|
  e + 1
end
```
 
# 参考資料
https://qiita.com/k-penguin-sato/items/7f98335ef631ea5ce7ad
https://qiita.com/genya0407/items/1a34244cba6c3089a317
猫の写真と日記投稿サイト　ページネーション

###diaries.controller index部分

public function index()
    {
        
        $data = [];
        if (\Auth::check()) {
            $user = \Auth::user();
            $diaries = $user->diaries()->orderBy('created_at', 'desc')->paginate(25);
            return view('diaries.index', [
            'diaries' => $diaries,
        ]);
    

            $data = [
                'user' => $user,
                'diaries' => $diaries,
            ];
        }
        
        return view('welcome', $data);
    }




### index.blade.php部分

@endif
    
    {{ $messages->links('pagination::bootstrap-4') }}
    
    {!! link_to_route('messages.create', '新規投稿', [], ['class' => 'btn btn-primary']) !!}

@endsection
古いバージョンのXcodeと最新バージョンのiOSの組合せでデバッグ実行する方法（シミュレータ＆実機）

# 解決したい課題

古いバージョンのXcodeでは、最新バージョンのiOS環境でのデバッグは基本的にできません。

例えば、本記事の執筆時点では Xcode 12.4 / iOS 14.4 が最新ですが、アプリを Xcode 12.1 で開発しているとします。
この場合、以下の制約があり、基本的には Xcode 12.1 で iOS 14.4 での動作確認は不可です。

- Xcode 12.1 では基本的に iOS 14.1 までのシミュレータしか入れることができません。
- Xcode 12.1 では基本的に iOS 14.1 までの実機としか繋げることができません。

これを可能にする方法が本記事の内容です。
ただし、公式に認められている方法ではないので（たぶん）、使用する際は自己責任でお願いします。

# シミュレータの場合

## 事前準備

**１．Xcode最新バージョンを普通にApp Storeからインストール。**

**２．Xcode旧バージョンは以下のリンクからダウンロードしてインストール。**
https://developer.apple.com/downloads/
※Apple Developer Programへの登録が必要です。

※複数バージョンがインストールされている場合、その切り替えの都度コマンドをたたく必要があります。
（参考記事）
https://qiita.com/y-some/items/849f15aa09c3b89ea324

Xcodeバージョン管理ソフトを使う手もあるようですが、私は実際に使ったことがないので本記事では割愛します。

## 動作確認手順

**１．Xcode最新バージョンを起動します。**
ただし、プロジェクトを開く必要はなく、「Welcome to Xcode」の画面で止めて良いです。

**２．DockのXcodeを右クリックし、Open Developer Tools > Simulatorを選択し、シミュレータを起動します。**
<img alt="qiita20210214.png" width=50% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/fe986685-1902-56c4-38e6-194cb1d7df93.png">


**３．Dockのシミュレータを右クリックし、動作させたいバージョン/デバイスのシミュレータを起動します。**
<img alt="スクリーンショット 2021-02-14 11.13.36.png" width=60% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122917/dc3a46a6-5a3b-e2ca-a44a-104731f53e12.png">

**４．Xcode旧バージョン起動し、プロジェクトを開きます。**

これで、シミュレータのリストに最新iOSのシミュレータが表示されいてるはず！

# 実機の場合

## 事前準備

**１．実機のiOSを最新バージョンにアップデートしておきます。**

**２．以下のリポジトリから1のバージョンのzipファイルをダウンロードします。**
https://github.com/iGhibli/iOS-DeviceSupport/tree/master/DeviceSupport

**３．zipを解凍し、中身を以下のフォルダにコピー。**

アプリケーション > Xcodeを右クリック > パッケージの内容を表示 > /Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport 配下

これで、最新iOSの実機とつなげてデバッグできるはず！

＜補足＞

- 証明書／プロビジョニング・プロファイルが正しく設定されている必要があります。
- 過去に、Xcode 11 / iOS 14の組み合わせでは上手くいきませんでした。今後もそういうケースはあるかも…
    - （参考記事） https://qiita.com/toto_kit/items/5a6ed7a5ee77bc68a74a
コマンドラインでWireのProtocol Buffersをコンパイルする


# はじめに
コマンドラインでWireのProtocol Buffersをコンパイルする手順をまとめました。

# 環境
* MacBook Pro (13-inch, 2020)
* macOS Catalina 10.15.7

# 手順
### 1. protoファイルを用意

```protobuf
syntax = "proto3";
package com.test;

message Person {
  string name = 1;
  int32 id = 2;
  string email = 3;
}
```

### 2. Javaが使えることを確認する

```shell
$ java -version
openjdk version "1.8.0_242-release"
OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
OpenJDK 64-Bit Server VM (build 25.242-b3-6915495, mixed mode)
```

### 3. Wireコンパイラを用意
`jar-with-dependencies.jar` を選択してダウンロードします。
https://search.maven.org/search?q=g:com.squareup.wire%20AND%20a:wire-compiler
![スクリーンショット 2021-01-19 16.44.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102273/237d5d4c-4203-5913-79c5-cc5a389d8b2f.png)

### 4. protoファイルをコンパイルする
```shell
$ java -jar wire-compiler-3.5.0-jar-with-dependencies.jar \
     --proto_path=src/main/proto \
     --java_out=src/main/java
Writing com.test.Person to src/main/java
``` 

AndroidでIntentのパラメータにProtocol Buffersを使う場合は、`--android` をつけて上げると `Parcelable` を自動でつけてくれます。

### 5. できあがり
java_outに指定したディレクトリにコードが生成されます。


```java
// Code generated by Wire protocol buffer compiler, do not edit.
// Source file: test.proto at 4:1
package com.test;

import com.squareup.wire.FieldEncoding;
import com.squareup.wire.Message;
import com.squareup.wire.ProtoAdapter;
import com.squareup.wire.ProtoReader;
import com.squareup.wire.ProtoWriter;
import com.squareup.wire.WireField;
import com.squareup.wire.internal.Internal;
import java.io.IOException;
import java.lang.Integer;
import java.lang.Object;
import java.lang.Override;
import java.lang.String;
import java.lang.StringBuilder;
import okio.ByteString;

public final class Person extends Message<Person, Person.Builder> {
  public static final ProtoAdapter<Person> ADAPTER = new ProtoAdapter_Person();
  // 以下省略
}
```


# 参考
* [square/wire](https://github.com/square/wire)
nanopbでProtocol Buffersを出力する




# はじめに
nanopbのProtocol Buffersをコンパイルする手順をまとめました。

# 環境
* MacBook Pro (13-inch, 2020)
* macOS Catalina 10.15.7

# 手順
### 1. protoファイルを用意
まずはprotoファイルを準備します。内容はテキトーです。

```protobuf
syntax = "proto3";
package com.test;

message Person {
  string name = 1;
  int32 id = 2;
  string email = 3;
}
```
### 2. nanopb generatorを用意
こちらからダウンロードします
https://jpa.kapsi.fi/nanopb/download/
![スクリーンショット 2021-01-19 18.36.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102273/13df82c2-496d-e177-4f7e-077503bf2ad7.png)

ダウンロードした圧縮ファイルを展開すると `generator-bin` というディレクトリがあります。
![スクリーンショット 2021-01-19 18.23.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102273/c237a13d-bbea-ddee-fae9-d87b22e93246.png)

ここに1.で用意したprotoファイルを配置します。

 


### 3. ファイルを生成する
nanopb_generatorコマンドでprotobufのファイルを生成します。

```shell
$ generator-bin/nanopb_generator test.proto 
Writing to test.pb.h and test.pb.c
```

### 4. できあがり

* test.pb.h

```c
/* Automatically generated nanopb header */
/* Generated by nanopb-0.4.4 */

#ifndef PB_COM_TEST_TEST_PB_H_INCLUDED
#define PB_COM_TEST_TEST_PB_H_INCLUDED
#include <pb.h>

#if PB_PROTO_HEADER_VERSION != 40
#error Regenerate this file with the current version of nanopb generator.
#endif

/* Struct definitions */
typedef struct _com_test_Person {
    pb_callback_t name;
    int32_t id;
    pb_callback_t email;
} com_test_Person;
```

* test.pb.c

```c
/* Automatically generated nanopb constant definitions */
/* Generated by nanopb-0.4.4 */

#include "test.pb.h"
#if PB_PROTO_HEADER_VERSION != 40
#error Regenerate this file with the current version of nanopb generator.
#endif

PB_BIND(com_test_Person, com_test_Person, AUTO)
```

# 参考
* [nanopb](https://github.com/nanopb/nanopb)
RustのGUI周りのクレート

Rustでデスクトップアプリやゲームを作成したいとなった時に参考になれば幸いです。

#Windowを表示するクレート
デスクトップアプリやゲームにwindowは付き物です。
有名なものはwinitとglTFです。
winit
https://github.com/rust-windowing/winit
glTFのRustクレート
https://github.com/gltf-rs/gltf

#グラフィック周りのクレート
2Dか3Dかは好みが別れると思いますが、大雑把に言えばgfxを使ってGPUのAPIを利用する方法とOpenGLを利用する方法が挙げられます。
gfx
https://github.com/gfx-rs/gfx
glium
https://github.com/glium/glium

vulkanを利用したい場合はPCに同梱されていないのでSDKをインストールしてあげる必要があります。
vulkano
https://github.com/vulkano-rs/vulkano

#汎用的なクレート
ゲーム開発クレートやデスクトップアプリクレートを使うと上で紹介したクレートがついてきて、利用しやすくなっていいる。
piston
https://github.com/PistonDevelopers/piston
nannou
https://github.com/nannou-org/nannou
bevy
https://github.com/bevyengine/bevy

#例外
icedについてはElmにインスパイアされたクレートで、JavaScriptライクにデスクトップアプリを作成できるクレートです。OS同梱のAPI（DirectX12やMetal、OpenGL）を直接扱うようなクレートとは異なるため、例外としています。
iced
https://github.com/hecrj/iced

そのほかにも多くのクレートが続々出来上がっていて、今後のRustに期待が持てます。
以上
Qiita Servay memo 2021.02.14

# Qiita Servay memo 2021.02.14
Qiita の記事を読んで、ざっくり感想をmemoしよう…と思った。
自分用のメモです。コミュニティガイドライン…、たぶん反してないと思いますが、ダメそうなら消そうと思います。

## [サボるのは開発者にとって最も重要なスキルの1つ、知っていても最高に役に立たないイースターエッグ17選](https://qiita.com/e99h2121/items/cece7102a37c189778e8)
e99h2121 さんの記事。昨日も1位だった気がする。
google検索のイースターエッグ（裏技・小ネタ）の話。画面が回ったり、傾いたり、崩れたり…というやつ。
イースターエッグというと、復活祭のことだと思っていましたが別の意味もあるそうです。知りませんでした…。  
> コンピュータ業界ではまったく別の意味があり、ソフトウェアなどに仕込まれた裏技、小ネタなどのことをさし、制作者が遊びでいれたおまけみたいな機能のことイースターエッグと呼びます。
[ホームページ応援隊](https://hp-shizuoka.jp/column/2017/02/7787/)

一番最初にリンクが張られている（貼られている？）[ググるのはデベロッパーにとって最も重要なスキルの1つ、知っておくと便利なGoogle検索のテクニック](https://coliss.com/articles/build-websites/operation/work/use-google-like-a-pro.html)の方は、知っておくと良いかもと思いました。
全文一致や、AND、OR検索などの話です。

また、googleで検索する話でいうと、プロゲームチームのDetonatioNに所属されていた方が書かれた[元プロゲーマーが知識0からプログラマーになって2年でアプリ8本リリースするまでの話](https://qiita.com/yumeoti/items/fa064adb8a7f0bf444f9)が、強く記憶に残っています。どの分野であれ1つのものを極めた人は、他の分野に行っても強いなと思いました。
>勿論、はじめから理解している量が多ければ多いほど良いけれど、プログラムの世界において全部記憶しておくのはほとんどの人間にとって無理だし、この「わからないことを明確にして」、「googleに答えを見つけてもらう手法」さえ構築すれば生きていけるとわかりました。

## [僕「SaaS色々あって迷うな〜」お母さん「Notionにしときなさい。大きくなっても使えるから」](https://qiita.com/shushutochako/items/7b91f446f224aae23986)
shushutochako さんの記事。  
SaaSサービスどれ使うの話。好き。
タイトルの通り、Notion というサービス使ってみたけどよさそうだよ！という記事でした。
よくある ToDoList -> ガントチャート や、看板化がひと手間でできちゃうよというのが目を引きました。
また、情報共有の面でもUIが見やすく使いやすい、とのことです。

## [【精神崩壊】だからこのコードはクソなのだ！【主に俺の】](https://qiita.com/neonemo/items/62ef33c7bb61d0e6c9e7)
neonemo さんの記事。
コードレビューの辛い話。「分かるー」と思いながら読んでいました。
IT分野の人間として働き始めて6年目で、私は他の方のコードを見る機会があまり多くありません。それでも、1.～6.まで、すべて遭遇したことがあります。
[リーダブルコード](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655)を読むことも、もちろんそうですが…それ以前の気持ちとかポリシーとか…そういった話のような気がします。

関数の戻り値が20個近くあり、その戻り値をa0,a1,b0,b1,...という変数名に格納しているコードで、コメントなし、仕様書なしのコードを引き継いで、引き継ぎ時の口頭の仕様通り作ると目的が達成されない…といったスクリプトを引き継いだこともあります…。
当時は荒れ狂っていましたが、「あれに比べればまだ…」と、他のコードを見ても落ち着いていられる穏やかな心が手に入ったことはよかったと思っています。
こういった鬼ごっこ形式（「はい、タッチ！俺しーらない！」）の引き継ぎしか経験したことがありません。
どうか平和な世の中になりますように…。

## [Python を活用しながら Web サイトのデータ収集を効率化（２）【実装編】](https://qiita.com/kurano_kkgk/items/b6b0d552c2f0cbd11a8b)
kurano_kkgk　さんの記事。
タイトルの通り、python を使ったスクレイピングの話。
すごい読みやすいな、と思いました。記事の書き方参考にしたい。細かいstepに分けて解説されていて、貼られているキャプチャもgifで追いかけやすい。
本記事ではseleniumを使ってスクレイピングをされているようです。私はBeautifulSoup4を使ってスクレイピングをしているので、こんな方法もあるのかーと勉強になりました。

## 自分用 nice to have
- notion触ってみる。  
[notion](https://www.notion.so/)
- qiita の 日付毎の daily ランキングスクレイピング  
2021年1月1日のtop10記事どんな感じ…？と思ったらどうやって調べればいいんだろうか？
AWSで提供されているサービス(代表的な)

## Amazon EC2
Amazon Elastic Compute Cloud。
仮想サーバー。
コンピューティングキャパシティを提供するサービス。サーバー、OS、ソフトウェアなどを一式レンタルできる。
さまざまなスペックのものが用意されており、自分で自由にソフトウェアを入れてシステム構築できるし、すでに
設定済みのサーバーをかりることもできる。
## Amazon S3
Amazon Simple Storage Service。
オブジェクトストレージサービス。Webサーバーやファイルサーバー用のファイルの保管場所として利用できる。(ストレージサービス)。S3は障害やエラーに強くて、強力な管理機能や他サービスとの連携機能を備えている。
## Amazon VPC
AWSアカウント専用の仮想ネットワーク。ネットワークやサブネットの範囲、ルートテーブルやネットワークゲートウェイの設定などをして、仮想ネットワーキング環境を構成する。
## Amazon RDS
リレーショナルデータベースで定番ともいうべき６種類の製品を、クラウド上で利用できるサービス。
(AmazonAurora、 PostgreSQL、 MariaDB、 OracleDatabase、 SQL Server)
## Amazon Route 53
DNS(ドメインネームサービス)。Webサーバーに必須であるDNS機能を提供。
## Elastic IPアドレス
サーバーに必須の静的なグローバルIPアドレスを提供。EC2やELBと組み合わせて使用。
## Amazon Managed Blockchain
ブロックチェーンネットワークを作成・管理できるサービス。データの偽装や改ざんをチェックする基盤として利用。
## Amazon SageMaker
機械学習モデルの構築、トレーニング、デプロイを行える。機械学習でよく使われるJupyterNotebookをクラウドとして提供。
## AWS Cloud9
Webブラウザで操作できる統合開発ツール。各種言語に対応しており、パソコンに開発ツールをインストールせずにシステム開発できる。
## Amazon Gamelift
ゲームホスティングサービス。マルチプレーヤー対戦などのリアルタイムデータ通信を、低レイテンシで実現。
データテーブルの連結ー縦方向3（積集合と差集合）

テーブルとテーブルの連結には、縦方向（行が増える）と横方向（列が増える）の場合があります。
縦方向の場合は__集合__、横方向の場合は__結合__と言います。

集合には以下の３つのパターンがあります。
　和集合：複数のテーブルのレコードをすべて足す。
　積集合：複数のテーブルの共通するレコードを取り出す。
　差集合：他のテーブルと共通しないレコードを取り出す。

今回は、積集合と差集合について SQL を用いた例を紹介します。

###【積集合】
行いたい処理を下記とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287001/24b35208-a6d6-fc70-64e5-f91172fd446a.png)
table_1 と table_2 で共通するレコードだけ table_3 として取り出します。

~~~sas 
create table table_3 as
select A, B from table_1
intersect
select A, C from table_2;
~~~

__<font color="Blue"> intersect </font>__ は、SELECT文で取り出したデータを比較して、一致したレコードのみを取り出す演算子です。
各SELECT文での変数の順番が新しいテーブルの列名に対応し、2つ目のSELECT文の列名が最初のSELECT文の列名へ変更されます。
（この場合、table_2 の C が table_1 の B へ変更される ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287001/456438b8-2041-d539-7f36-922ee7d4bc7a.png)



###【差集合】
行いたい処理を下記とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287001/7f60e624-551d-172f-e5cb-cbcd67711ab7.png)

~~~sas 
create table table_4 as
select A, B from table_1
except
select A, C from table_2;
~~~

__<font color="Blue"> except </font>__ の演算子は、最初の SELECT文 (table_1) のデータの中から、2番目の SELECT文 (table_2) に一致しないレコードのみを取り出します。
変数名の対応関係は積集合の場合と同様です。

####関連記事
[データテーブルの連結－縦方向 1（異なる列名をそのまま残す場合）](https://qiita.com/MomonekoView/items/78f51b7385bec42d08ed)
[データテーブルの連結－縦方向 2（異なる列名を統合する場合）](https://qiita.com/MomonekoView/items/e63b54b0ae1849c3ddd1)
[データテーブルの連結－横方向 1（完全外部結合）](https://qiita.com/MomonekoView/items/86f124e53d372290e2a4)
[データテーブルの連結－横方向 2（内部結合）](https://qiita.com/MomonekoView/items/5d067363c506a0ab2013)
[データテーブルの連結－横方向 3（左右の外部結合）](https://qiita.com/MomonekoView/items/434d8bceab29606568e9)
[データテーブルの連結ー交差結合](https://qiita.com/MomonekoView/items/d57a2adf97b10e4549d1)
パララックスでスクロール量を測って、ファミコンにカセットをさしてみた

# どうも7noteです。最新ゲーム機種がいろいろ出ている中であえてファミコンで勝負します。

パララックス効果を使って、ファミコンにカセットを差し込んでみました。
javascriptでスクロール量を測りつつ、その値に合わせてCSSを調整するような動きにしています。

学生の頃に書いたちょっと古いソースなので、お見苦しいところもあるかと思いますがご容赦ください。楽しんでもらえればと。

パララックスについての解説等はまた改めて記事書こうと思います。

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/cccbec0b-af97-6616-882d-268139459d79.gif)

## ソース

```index.html
  <h1>スクロールしてね</h1>
  <p class="num">スクロールの値 | <span id="scrollValuetop">0</span></p>
 		
  <div id="top"></div>
  <img id="famicon" src="img/famicon.png">
  <img id="famicon-under" src="img/famicon-under.png">
  <img id="kasetto" src="img/kasetto.png">
  <img id="kasya" src="img/kasya.png" >
```

```style.css
body {
  height: 3000px;
}
.num {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
}

#famicon {
  position: fixed;
  width: 300px;
  left: 230px;
  top: 300px;
}

#famicon-under {
  position: fixed;
  width: 300px;
  left: 230px;
  top: 300px;
  z-index: 2;
}


#kasetto {
  position: fixed;
  width: 170px;
  left: -300px;
  top: 100px;
}

#kasya {
  position: fixed;
  width: 130px;
  left: 170px;
  top: 320px;
  display: none;
}
```

```script.js
$(function() {
  $(window).scroll(function() {
    var value = $(this).scrollTop(); //スクロールの値を取得
    $('#scrollValuetop').text(value);

  //kasetto
  kasetto = $('#kasetto');
  if(value > 1510){
    kasetto.css('top', -400 + 1510 / 2);
  }else if(value > 1000){
    kasetto.css('left', 295);
    kasetto.css('top', -400 + value / 2);
  }else{
    kasetto.css('top', 100);
    kasetto.css('left', - 200 + value / 2);
  }
	
  //kasya
  kasya = $("#kasya");
  if(value > 1700){
    kasya.css('display','none');
  }else if(value > 1500){
    kasya.css('display','block');
  }else{
    kasya.css('display','none');
  }

  });
});
```

※jQueryを使用しています。jQueryってなんだという方は[こちら](https://qiita.com/7note/items/45bd8efbedd557667218)

## まとめ

スーファミや64版も作れますね。

この書き方ではレスポンシブ対応ではないので、もし作り直すならレスポンシブ対応させたりしてみたいところです。
もしくはCSSだけで再現したり。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Udemy for Businessで自主学習して感じたこと

# はじめに

弊社の人材育成の一環として2020年度よりUdemy for Businessの利用が開始されました。
ありがたいことに無期限でアカウントを付与していただいたため、（人材育成の使命を背負いつつ）自主学習として活用しています。

# Udemyとは？

Udemy（ユーデミー）は、オンライン教育プラットフォームです。
主にITスキル、ビジネススキルのコンテンツが充実しており、講師による学習動画、確認テストなどで構成されています。
Udemy for Businessは企業向けサービスで、Udemyの中から評価の高いコンテンツを定額制で受講することが可能です。

# 実際に使ってみて

## 良かったところ

- 良質なコンテンツが見放題
    - 何度でも巻き戻し、見返しが可能
- Public Cloud、コンテナ技術関連のコンテンツが豊富
- 動画視聴のインタフェースが使いやすい
    - 倍速再生、自動再生
    - ショットカットキーによる操作
    - モバイル対応、ダウンロード可
    - 異なるデバイスでの再開がスムーズ
    - ピクチャ・イン・ピクチャ対応
- 一つの動画が長過ぎず、区切りのいいところでの中断が容易（反面、細切れすぎる場合もあり）

## イマイチなところ

- メジャーでない技術の日本語コンテンツがない
    - Ansible, CI/CD, PlantUML, ...
    - 一般向けUdemyにあるコンテンツなら、申請すればfor Bisinessに追加される可能性あり
- 動画の質がまちまち
    - 講師によってスタイルがバラバラ
    - 古い情報が訂正されずに残っている
- 動画再生でバグる（端末依存の可能性あり）
    - 自動再生がされない（iOS）
    - 音声だけ流れて映像が止まっている（iOS）
    - 次の動画に移るたびに倍速設定がリセットされる（Mac + Chrome)

## 感想

書籍を読むより動画を見る方が自分の学習方法として向いていたため、非常に有用だと感じました。
ただし、動画を流すだけで満足してしまい結局頭に入っていない・・とならないよう、能動的に学ぶ姿勢が必要です。

# おすすめ動画

for Businessにある時点で厳選されているため、ターゲットさえ間違えなければどの動画もハズレだと感じることはありません。

学びたいことが決まっているならキーワード検索して上位から気になるものを選択。
特に決まっていないならトップページに出るおすすめから惹かれるものを選択。
または組織内でアクティブユーザーが多いものをとりあえず視聴してみるでも良いと思います。
（2021/02/14時点で弊社一番人気は「3分で一発OK！社内プレゼンの資料作成術」）


<!--
for Businessは会社専用URLになっているためか一般向けのシェア機能がなく、リンクの共有が面倒。。
-->
ChatterBotを使ってみる。

#概要
Chatbotをさわってみたかったので、以下のgithubの「**ChatterBot**」というのをさわってみた。
まだ、入り口の入り口だが。。。エラー等に出会ったので、その対処含め、記事にする。

https://github.com/gunthercox/ChatterBot

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635156/60acb29a-39be-a75d-7dde-86870bb490ea.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635156/321d5d50-e7c0-1b5c-e894-1fc7b7ef9681.png)

#環境
Windows10
python3.7


#エラーとその対処方法

## エラーの内容
以下のようなエラーが出ることがあると思う。

```
    raise IOError(Errors.E941.format(name=name, full=OLD_MODEL_SHORTCUTS[name]))
OSError: [E941] Can't find model 'en'. It looks like you're trying to load a model from a shortcut, which is deprecated as of spaCy v3.0. To load the model, use its full name instead:

nlp = spacy.load("en_core_web_sm")

For more details on the available models, see the models directory: https://spacy.io/models. If you want to create a blank model, use spacy.blank: nlp = spacy.blank("en")

```

##対処方法

https://stackoverflow.com/questions/66087475/chatterbot-error-oserror-e941-cant-find-model-en

に書かれているとおり、


以下の1行をReplace（置換える） 

```
self.nlp = spacy.load(self.language.ISO_639_1.lower())
```

with（↓の4行へ）

```
if self.language.ISO_639_1.lower() == 'en':
    self.nlp = spacy.load('en_core_web_sm')
else:
    self.nlp = spacy.load(self.language.ISO_639_1.lower())
```

#動作例
まだ、何もできませんが。。。「terminal_example.py」を動かした。

```
Type something to begin...

4 + 9 #入力してみた
4 + 9 = 13 #応答。天才！!!

hello! #更に、入力してみた
The current time is 10:43 AM　#会話成立

sin(10)　#更に、入力してみた。
( 10 ) = 10　# ??

tomorrow #時間に詳しそうなので、明日と入力してみた
The current time is 10:44 AM　#無視!!!!
```

#今後
使ってみる予定。
nodejsでemailをparseするライブラリの比較

### 概要
- nodejsで受信したemailをparseしたいため現時点でのライブラリを調査した
- どのライブラリもMIME形式のemailのパースにしっかり対応
- 添付ファイル、テキストの文字コード変換(UTF-8）など基本的に必要なものは、ほぼどれも対応
- パフォーマンスまでは調査していない
- mailparserのみstreamベースのハンドラ登録をサポートしている
- DL数やメンテの頻度、ドキュメントの充実度などの観点から、2021/2時点ではmailparser一択っぽい

### 調査ログ
#### mailparser
- URL
    - https://www.npmjs.com/package/mailparser
    - https://nodemailer.com/extras/mailparser/
- 特徴
    - 2010年頃から開発されているnodejs用の老舗メール送信ライブラリに追加された機能
    - ドキュメントがしっかりしている
- メモ
    - MITライセンス
    - 2021/2/14時点で調査した上では最もよく使われているぽい
    - テキストは全てUTF-8に変換
    - 添付ファイル○
    - セキュリティクリーニング☓
    - sourceはstringでもBufferでも良い（便利！）
    - 2つのインターフェース
        - message内容を一気に返す
        - streamベースでヘッダー、テキストなど1個1個のparseに対してハンドラが定義できる
    - [mailparser2](https://www.npmjs.com/package/mailparser2)なるものもあるが、こっちはメンテされてない模様
    - 
#### mailparser-mit
- URL
    - https://www.npmjs.com/package/mailparser-mit
    - https://github.com/mazira/mailparser-mit#readme
- 特徴
    - MITライセンス
    - [mailparser](https://nodemailer.com/extras/mailparser/)がライセンスをEUPLにしたのがきっかけでmailparserからforkしたらしい
        - mailparserは2020/12にMITライセンスに戻している
    - 機能はほぼmailparserと同じ
    - 2018年から現在メンテされていない

#### parse-email
- URL
    - https://www.npmjs.com/package/parse-email
- 特徴
    - MITライセンス
    - parse時のinputは文字列が必須
    - Promiseベース（イベントは非サポート）
    - 2017年からメンテされていない

#### envelope
- URL
    - https://www.npmjs.com/package/envelope
    - https://github.com/jhermsmeier/node-envelope
- 特徴
    - MITライセンス
    - newでparseを行うちょっと特殊な形式
    - メールbody部分のオブジェクト構造がちょっと特殊で直感的でない印象
    - 最後の更新は2020/2
ネットワーク上の消せないファイルを削除した

#問題
Wi-FiルーターにつなげたHDD上のファイルがエクスプローラー上から消えない
名前の変更やHDD内での移動は可能

#環境
ASUS-AC65U
HDDは上記にUSB接続したSeagate製HDD

#解決
エクスプローラー上からは何をやっても対象のファイルが消せなかった。
RLoginを使用してSSHでWi-FiルーターのIPに接続。
/mnt/HDD名/配下の削除できないファイルを指定してrmしたら消せた。
その際、日本語ファイル名が表示されなかったため、該当ファイルをエクスプローラー上でabc.urlとリネームしてから削除した。
[JavaScript]文字列の中に変数を含めるには

#初めに
簡単にアウトプットさせてもらいます

#文字列の中に変数を含める方法
JavaScriptでは2つの方法があります

1.  +を用いてそれぞれの値を連結させる
2.  テンプレートリテラルを使用する

#テンプレートリテラル
テンプレートリテラルは、JavaScriptの構文です。

バッククォートで囲むことで、文字列内に挿入することができます。

#テンプレートリテラル使用、使用しない比較
テンプレートリテラルを使用しない場合

```javascript:コンソール
const muscle1 = "背中"
const muscle2 = "二頭筋"

const workout = "今日のトレーニングは" + muscle1　+ "と" + muscle2 + "です！"
console.log(workout)

#実行結果
#今日のトレーニングは背中と二頭筋です！
```

テンプレートリテラルを使用した時

```javascript:コンソール
const muscle1 = "背中"
const muscle2 = "二頭筋"

const workout = `今日のトレーニングは${muscle1}と${muscle2}です！`
console.log(workout)

#実行結果
#今日のトレーニングは背中と二頭筋です！
```

どちらも同じ結果になることが確認できました

#まとめ
テンプレートリテラルを用いることで、記述量が少なくなったので、テンプレートリテラルを積極的に使用するようにしましょう。
ROSの勉強　第9弾：システムの概要

# #プログラミング ROS< システムの概要 >

##はじめに
1つの参考書に沿って，ROS(Robot Operating System)を難なく扱えるようになることが目的である．その第9弾として，システムの概要などを中心にまとめる．

##サブシステム
#####ポイント
複雑な機械もロボット1つ1つのサブシステムに分けて考えることで，非常に簡単に設計・解析することができる

#####大まかなカテゴリ
①アクチュエーション
②センシング
③コンピューティング

ROSでは，それぞれ次のようなものをいう．
####①アクチュエーション
　ロボットの車輪や腕をどのように動かすかに直接かかわるサブシステム

####②センシング
　センサのハードウェアと直接やり取りをするサブシステム
　（例）カメラ，レーザセンサなど

####③コンピューティング
　アクチュエーションサブシステムとセンシングサブシステムとを結ぶもの

##車輪の制御
####スキッドステアリング
・3つ以上の車輪（一般的に4, 6）
・トレードオフがある

#####<利点>
　機構をシンプルに保ったまま（コストを制御したまま）で，最大の駆動力を提供する．
#####<欠点>
　まっすぐに前進あるいは後退していないときは，車輪の一部が常に横滑り（スキッド）する．

#####<まとめ>
　スキッドステアリングは，駆動力と障害物乗り越え能力は高いが，横滑りするのは非効率で，スリップやタイヤの摩耗を引き起こし得る．このように，すべての方向に対応できるわけではないものを**非ホロノミック(non-holonomic)**という．対して，ホロノミック(holonomic)はすべての方向に対応できるわけだが，これは方向を制御できる車輪メカナムホイールなどを使って実現できる．

##ROSの設計目標の１つ
-----**さまざまなロボットでソフトウェアを再利用できるようにすること**-----
これに従い，移動プラットフォームとのやり取りには**事実上常に``Twist``メッセージを使う**．
``twist``では，3次元で線形と回転の速度を表現する．
これは移動ロボットをROSで扱っていく際に，非常に重要である！！


##センサ
利便性と見た目の良さ，視線を作業空間の中心に保持するなどの理由より，ロボットがセンサヘッドをプラットフォームの一番上に持つことが多くある．**センサヘッド**とは，**同じ筐体にいくつかのセンサを集約したもの**である．

以下では，センサとして視覚カメラと深度カメラについて簡単にまとめる．

####視覚カメラ
・3次元情報を扱うほうが2次元のカメラ画像を扱うよりもロバストな場合が多い．
・多くのアルゴリズムでは，3次元データに興味があり，視覚データはほとんど無視されている．
・ステレオカメラ（2台のカメラで互いの視差を利用する）は有能とされているが，のっぺりとした壁のように変化（特徴）のないものでは測定が難しい．

⇒自然なアウトドアシーン（人工的でないもの）は，十分なテクスチャを持ち，測定はそこまで難しいとはされないが，整頓された屋内のシーンでの距離の予測は難しいとされている．

####深度カメラ
・近赤外線などいろいろな方法でシーンを照らし，これにより，システムの性能を著しく向上させている
⇒これだとのっぺりとした壁でも測定可能となる．

・多くのデータを生成する
このデータは通常**3次元点群(point cloud)**の形式で``sensor_msgs/PointCloud2``でアクセスできる．3次元点群(point cloud)とは，カメラの向かいにある面を3次元の点で構成したものである．


##シミュレータ
####①Stage
・2次元のシミュレータの1例
・ROSの統合パッケージでラップされ，これによりROSからの速度コマンドを受け付け，移動量を出力する．また，シミュレータのロボットのレーザレンジファインダの値を得ることもできる．
・2次元であるため，計算の効率はよい．

####②Gazebo
平面だけでは，あまり多くのことはできない　⇒　3次元シミュレータが必要
ロボットの動作には主に**移動**と**操作**がある．前者は2Dでも3Dでも扱うことは可能だが，後者は3次元の世界で用いる以上，3Dでないと困難である．

・操作のシミュレーションは，かなり複雑なシミュレータを必要とし，ロボットだけでなく，シーンにおける動くモデルの動力学を扱う．（剛体力学をよく利用する）

####その他
ROSで利用できるシミュレータはさまざまなあり，ほかにはMORSEやV-REPなどがあるようだ．


##感想
今回は次回以降から学ぶ実践的な内容の準備として，ROSのシステムなどをまとめておいた．これらについて理解しているのとしていないのとでは，これからの学習に大きな違いが生まれてくると学習しながら感じた．これでROSについてすべてをつかめるわけではないが，そのほか必要なことは，その都度学習できたらと思う．

##参考文献
プログラミングROS Pythonによるロボットアプリケーション開発
　　　　　　　　Morgan Quigley, Brian Gerkey, William D.Smart 著
　　　　　　　　　　　　　　　　　　　　　　　河田　卓志　監訳
　　　　　　　　　　  　松田　晃一，福地　正樹，由谷　哲夫　訳
　　　　　　　　　　　　　　　　　　オイラリー・ジャパン　発行
Gyazoでのスクショの仕方（初心者向け)

#概要
Gyazoをインストールし、Gyazoを使って画面をスクショをするまでの手順について説明しています。
Macを使い始めて間もなく、これからGyazoを使いたい人向けの記事です。

#実装の手順
①Gyazoをインストールする
https://gyazo.com/captures
にアクセスしてください。
↓
「今すぐダウンロード」をクリックしてください。
↓
左下にダウンロードしたファイルが見えたらクリックしてください。
↓
動画のようにドラッグ&ドロップする。

![gyazo](https://user-images.githubusercontent.com/76093901/107865548-f773f700-6eaa-11eb-9b43-a4821b97850b.gif)

インストール完了です。

②Gyazoを探す
Launchpad（ロケットマーク）をクリックして、アプリの中からGyazoを選択します。

③動画のように、Gyazoで画面をスクショすると、専用ページが表れ、リンクをコピーします。
![gyazo2](https://user-images.githubusercontent.com/76093901/107865811-d1038b00-6ead-11eb-9c54-9b2a55847a17.gif)

④リンクを貼り付けることで、Gyazoでスクショした画面を共有できます。

以上です。
[JavaScript]JavaScriptのvar、const、letについて

#初めに
簡単にアウトプットさせてもらいます

#varとは
varの特徴として、再代入、再定義ともに可能です。

```javascript:コンソール
var sample = "おはよう"

sample = "こんにちは"
//再代入OK

var sample = "こんにちは"
//再定義OK
```

#constとは
constの特徴として、再代入、再定義ともに不可という制約があります。

```javascript:コンソール
const sample = "おはよう"

sample = "こんにちは"
//再代入NG エラーが起きる

const sample = "こんにちは"
//再定義NG エラーが起きる
```

#letとは
letの特徴として、再代入は可能ですが、再定義は不可という制約があります。

```javascript:コンソール
let sample = "おはよう"

let = "こんにちは"
//再代入OK

let sample = "こんにちは"
//再定義NG エラーが起きる
```

#まとめ
varは再代入、再定義ともに可能
constは再定義する予定のない変数を定義する際に使用する
letは再代入する予定のある変数を定義する際に使用する