OmniAICreator/Qiita-1.07M huggingface dataset:
React公式チュートリアルでホットリロードの結果がブラウザに反映されない時

## 状況
https://ja.reactjs.org/tutorial/tutorial.html#lifting-state-up
Reactの勉強を始めて上記の公式チュートリアルに従い進めていたらホットリロードの結果がブラウザに反映されない問題にあたりました。CLI上ではホットリロードが動いてる感じ。WSl2でやっていたのでそれが原因かと思いましたがMACでも同じような状況になりました。検索しても見当たらなかったのでここに解決法を書きます。

## 解決法
公式チュートリアルではindex.jsにコンポーネントを記述しそれを読み込むやり方をしていますがこれをやめます。/srcにGame.jsファイルを作成します。index.jsのコンポーネントのところをコピペしてコンポーネントをエクスポートします。

``` Game.js
import React from "react";
import "./index.css";

class Square extends React.Component {
  render() {
    return <button className="square">{/* TODO */}</button>;
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = "Next player: X111";

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

export default Game;
```

index.jsではGameコンポーネントをインポートして呼び出します。呼び出す際にReact.StrictModeの中で読み込まないといけないことに注意。具体的に下記にコードを載せます。

``` index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import Game from "./Game";

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById("root")
);
```

## 終わりに
原因はわかりませんが私はこの方法で解決できました。もし同じような状況で困っている方の力になれたら幸いです。もし原因がわかる方がいたらコメントをお願いします。
C++11以降で暗黙的に生成される特殊メンバ関数のまとめ

# 特殊メンバ関数とは

コンパイラが暗黙的に生成することがある関数。以下の6つが存在する。

- デフォルト・コンストラクタ(引数を一つも取らないコンストラクタ)
- デストラクタ
- コピーコンストラクタ
- コピー代入演算子
- ムーブコンストラクタ
- ムーブ代入演算子

# 特殊メンバ関数が暗黙的に生成される条件

## デフォルト・コンストラクタ

ユーザ宣言されたコンストラクタが一つもないときに暗黙的に生成される。

## デストラクタ

ユーザ宣言されたデストラクタが無い時に暗黙的に生成される。
**基底クラスが仮想デストラクタを持っている場合、暗黙的に生成されるデストラクタも仮想デストラクタになる。**

## コピーコンストラクタ/コピー代入演算子

ユーザ宣言されたコピーコンストラクタ/コピー代入演算子が無い時暗黙的に生成される。
**ただし、ムーブコンストラクタ/ムーブ代入演算子がユーザ宣言されている場合は「=delete」として宣言される。**これは、ユーザ宣言されたムーブコンストラクタ/ムーブ代入演算子があるということは何らかのリソース管理が必要なはずなので、コピーコンストラクタ/コピー代入演算子もユーザ宣言する必要があるはずという考えに基づいている。

## ムーブコンストラクタ/ムーブ代入演算子

ユーザ宣言されたムーブコンストラクタ/ムーブ代入演算子が無い時暗黙的に生成される。
**ただし、ユーザ宣言されたデストラクタ・コピーコンストラクタ・コピー代入演算子・ムーブコンストラクタ・ムーブ代入演算子のいずかが存在する場合は生成されない。**
これは、これらの特殊メンバ関数が宣言されている場合はなんらかのリソース管理が必要という事であり、ムーブコンストラクタ/ムーブ代入演算子もユーザ宣言する必要があるはずという考えに基づいている。

# ユーザ宣言された特殊メンバ関数がある時に暗黙的に生成される特殊メンバ関数の対応表

|ユーザ宣言された<br>特殊メンバ関数|デフォルトコンストラクタ|デストラクタ|コピーコンストラクタ|コピー代入演算子|ムーブコンストラクタ|ムーブ代入演算子|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|コンストラクタ|✕|○|○|○|○|○|
|デストラクタ|○|－|○[^1]|○[^1]|✕|✕|
|コピーコンストラクタ|○|○[^2]|－|○[^1]|✕|✕|
|コピー代入演算子|○|○[^2]|○[^1]|－|✕|✕|
|ムーブコンストラクタ|○|○[^2]|delete|delete|－|✕|
|ムーブ代入演算子|○|○[^2]|delete|delete|✕|－|

○…暗黙に「=default」と宣言される
✕…暗黙に宣言されない
delete…暗黙に「=delete」と宣言される

[^1]: ユーザ宣言のデストラクタ・コピーコンストラクタ・コピー代入演算子があるという事はなんらかのリソース管理をしているはずであり、おそらくユーザ宣言のコピーコンストラクタ・コピー代入演算子が必要なのでムーブコンストラクタ・ムーブ代入演算子と同様に delete としたいがC++03以前との互換性のため暗黙に宣言されるようになっている。C++11の言語規格では非推奨(deprecated)とされている。

[^2]: ユーザ宣言のコピーコンストラクタ・コピー代入演算子・ムーブコンストラクタ・ムーブ代入演算子があるという事はなんらかのリソース管理をしているはずであり、おそらくユーザ宣言のデストラクタが必要と思われる。
【Rails】エラーメッセージ日本語化(メモ）

#　目標
###エラーメッセージ日本語化

この英語のメッセージを日本語に変える。
![スクリーンショット 2021-09-03 4.42.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927584/5570947e-a0f5-2536-4f55-d7176c65849a.png)


#実装
まず`gemfile`に`rails-i18n`を記述してインストールする。

```ruby:Gemfile
gem 'rails-i18n'
```

`bundle install`します。

```ruby:ターミナル
$ bundle install
```

`config/application.rb`ファイルに`config.i18n.default_locale = :jack_o_lantern:`を記述します。

```ruby:config/application.rb
config.i18n.default_locale = :jack_o_lantern: 
```

ローカルブラウザで確認するとcan't be blankで表示されていた部分が日本語仕様にに変わりました。
後は`content`と`status`の名前部分を日本語に変えていきます。
![スクリーンショット 2021-09-03 5.16.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927584/065405de-36df-a2bb-659b-462a5bc7c1f6.png)

#### 次に日本語変換用のファイルを作成していきます。
`config/locales/`配下に`ja.yml`ファイルを作成します。
作成したファイルに　`content`と`status`部分を日本語仕様にするように記述していきます。
モデル名指定、今回は`taks`になっています。
あと日本語に変えるカラムも指定し記述していきます。

```ruby:config/locales/ja.yml
ja:
    activerecord:
        attributes:
            task:
                content: 内容
                status: ステータス
```

これで`config/locales/ja.yml`で指定した`content`と`status`部分が日本語に変わりました。
![スクリーンショット 202to1-09-03 5.43.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1927584/87578152-54b9-4ed6-92a3-acea93f32a49.png)

以上になります。
Revolvapp 変数プラグインで埋め込む変数の表記を変える

# 概要

デフォルトの `[%variable%]` 形式から `~variable~` 形式に変える。

# 環境
- Revolvapp 2.3.4

# 実装

`variable.template.start` と `variable.template.end` を設定する。

```js
Revolvapp("#revolvapp-editor", {
    plugins: ["variable"],
    // ...
    variable: {
        items: variables,
        template: {
            start: "~",
            end: "~",
        },
    },
});
```

# 関連

https://imperavi.com/revolvapp/plugins/variable/
はじめてのJulia②：JuliaをIDEで使用する

Juliaのインストールは前の記事を参照。
[はじめてのJulia①：導入～インストール編](https://qiita.com/Ttmysd70c6f5/items/2606dbbdba95947506ef)

Julia.appをインストールすると、ターミナル上でJuliaを実行できるようになる。
良く使われるIDE（統合開発環境）であるJupyter NotebookやJupyter LabでJuliaコードの開発を行いたい場合は、IJuliaパッケージをインストールする必要がある。

# IJuliaをインストールする
Juliaを起動すると、コマンドラインは以下のようになっている。

```Julia
julia> 
```
`]`と入力すると、パッケージモードに入る。

```Julia
(@v1.6) pkg>
```

以下のように入力し、IJuliaをインストールする。

```Julia
(@v1.6) pkg> add IJulia
```


# IJuliaをアップデートする
## Juliaのバージョンは変えずに、パッケージのみアップデートする場合
パッケージモードで、以下のように入力する。

```Julia
(@v1.6) pkg> update
```

## Juliaのバージョンを変えた場合
Juliaのバージョンを変えた場合や、Juliaのファイルの場所を変更した際には、パッケージ情報を更新する必要がある。
パッケージモードで以下を入力する。

```Julia
(@v1.6) pkg> build IJulia
```

# IDEを起動する
## Jupyter Notebook
通常と同様にJupyter Notebookを起動する。
もしくは、Juliaのコマンドラインで以下のように入力する。

```Julia
using IJulia
notebook()
```
上のコマンドを初めて実行する場合、jupyter Notebookのインストールを聞かれるので`y`を入力する。
jupyter Notebookの右上で`new`→`Julia (バージョン)`と選べば、Juliaで開発ができる。
![jupyter_julia.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629977/10582307-e3dc-25f8-aac6-5990c6a27183.png)

## Jupyter Lab
Jupyter Notebookと同様に、通常通りにJupyter Labを起動するか、Juliaのコマンドラインで以下を入力すれば良い。

```Julia
using IJulia
jupyterlab()
```


## nteract
Jupyterの他に、nteractもJuliaをサポートしている。
IJuliaのインストールに加え、nteractを以下のリンクからインストール・実行すれば、nteract上でJuliaの開発になる。
参考リンク：[nteract](https://nteract.io/)
Flutterで画像をImagePickerで取得、FirebaseStorageに保存して画像のURLを取得、Firestoreに保存して画像を表示する方法

Flutterで画像をImagePickerで取得、FirebaseStorageに保存して画像のURLを取得、Firestoreに保存して画像を表示する方法

参考リンク：
https://firebase.flutter.dev/docs/storage/usage

4つのステップに分けてまとめ：

1、準備：image_picker、firebase_storageをインストール、ios/Runner/Info.plistファイル内に下記を追記
https://pub.dev/packages/image_picker
https://pub.dev/packages/firebase_storage

```py
<key>NSPhotoLibraryUsageDescription</key>
<string>フォトライブラリへのアクセスを求めています。</string>
<key>NSCameraUsageDescription</key>
<string>カメラへのアクセスを求めています。</string>
```

2、File型の変数imageを宣言、ImagePickerでimageを取得、そのまま画像を表示する方法

```dart
ImagePicker imagePicker = ImagePicker();
final file = imagePicker.pickImage(source: ImageSource.gallery);
image = File(file!.path);

late File? image = null;
image == null ? Container() : Container(
  child: Image.file(image!, fit: BoxFit.cover),
  height: 100.0,
  ),
```

3、画像をFirebaseStorageに保存、imageのURLを取得、URLから画像を表示する方法

```dart
final ref = FirebaseStorage.instance.ref(imageId);
final storedImage = await ref.putFile(image!);

imageURL = await storedImage.ref.getDownloadURL();

String? imageURL = null;
imageURL == null ? Container() : Container(
  child: Image.network(imageURL!, fit: BoxFit.cover),
  height: 100.0,
  ),
```

4、imageのURLをFireStoreに保存、FirestoreからimageのURLを取得、URLから画像を表示（3と同じ）する方法

```dart
await FirebaseFirestore.instance.collection('users').doc(Id).set({
  'imageURL': imageURL,
  });

final documentSnapshot = await FirebaseFirestore.instance.collection('users').doc(Id).get();
imageURL = documentSnapshot.get('imageURL');

String? imageURL = null;
imageURL == null ? Container() : Container(
  child: Image.network(imageURL!, fit: BoxFit.cover),
  height: 100.0,
  ),
```
アウトカムが割り付けに影響する場合の因果推論

傾向スコアによるIPW推定量などの前提は

```math
p(z,y|x)=p(z|x) p(y|x)
```
と共変量を条件づけたときに割り付けとアウトカムが独立になる事だが、現実的に完璧に満たされる事も少ない気がするのでどうなるか実験。
ちなみに傾向スコアだとピンク本には加法処置モデルというので対処できるが、イマイチ理解できなく情報が殆ど無かったのでそれはパス。


```r

library(ggplot2)
library(tidyverse)
library(cobalt)

N=5000

x=rnorm(N,3,2)
rel_drop=rnorm(N,0,2) #dropにかかわる変数

y0=rnorm(N,0,1)

#割り付けの仮定
#q=2*x+1
#割り付けの仮定,開始前の状態y0がy1に影響
#傾向スコアを使う場合、割り付けが欠測値に依存するのでランダムでない欠測
#x,アウトカムの初期値y0が高いほど割り付ける確率も高くなるとする
q=2*y0+x-1

p=plogis(q)
z=rbernoulli(N,p=p)
hist(p)

#アウトカムの仮定,開始前の状態y0と共変量xが高いほどy1も高くする。
#介入の差は2とする
y1=2*z+1.2*x+y0+rnorm(N)

#単純平均
df %>% group_by(z) %>% summarise(mean=mean(dy))

#  z  mean
# <dbl> <dbl>
#   1     0  1.92
# 2     1  6.26

#差は 4.3
#2よりだいぶ過剰。これは割り付けられた人は元からやる気的な共変量が高いので、そのため。

df=tibble(x,z=as.numeric(z),y0,y1,rel_drop,dy=y1-y0,id=1:N,ps)

#ランダム割り付け
z=rbernoulli(N,p=0.8)
y1=2*z+1.2*x+y0+rnorm(N)
# z  mean
# <dbl> <dbl>
#   1     0  3.68
# 2     1  5.63
#効果は2.05と推定

#重回帰
res.lm=lm(dy~x+z+y0,df)
summary(res.lm)
#2.05と推定

library(DRDID)

out <- drdid(yname = "y", tname = "time", idname = "id", dname = "z",
             xformla= ~rel_drop+x,
             data = tdf, panel = TRUE)

summary(out)
#ATE is 2.01と推定


#IPW
library(ltmle)

#df2=tibble(x=df$x,y0=df$y0,drop=df$rel_drop,A=as.numeric(df$z),Y=df$dy)
df2=tibble(x=df$x,A=as.numeric(df$z),Y=df$dy)
#df2=data.frame(Y=y,A=as.numeric(z),W=df$x)

#df2=data
result1 <- ltmle(df2, Anodes="A", Ynodes="Y",abar=list(1,0))

summary(result1)
#ATEは2.01と推定、意外とできている

```

金メダル:DL,DID
銀メダル:重回帰,RCT
予選落ち:単純平均

という結果に。
IPWはランダムでない欠測があり条件を満たしきっておらず、DIDは並行トレンドの仮定が満たさているという優位があるにもかかわらず同程度。岩波DSでRCTが殴られていたが、この実験は不服従がないので、金メダルでないのは私のやり方が間違っている可能性も。
[Rails]０から新規アプリケーションの作成

##初めに

####記事の対象者
・Macユーザ
・Railsでアプリケーションを一度も作ったことない人

####環境
・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

####新規作成までの道のり
（1）Ruby用の環境構築
（2）Railsのインストール
（3）Railsを用意する
（4）Railsの環境構築
（5）Railsのアプリケーションの作成

##Ruby用の環境構築
####(1)下記のリンクからHomebrewの公式サイトへ移動し、Install Homebrewの下にあるコマンドをコピーする。（https://brew.sh/）
![homebrew公式ページ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102030/d0cc165b-75da-7df9-70f4-2e05a100e6db.png)

####（２）ターミナルを起動してさっきコピーしたコマンドをペーストをして実行させる。インストール後、下記のコマンドを使いバージョン確認を行う。

```
brew -v
```
![homebrew sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102030/0cb2d9f7-80d1-4eb6-7080-a74ba68a077e.png)
（「Homebrew◯.◯.◯」というふうに表示されていたら、インストールがされていることになる)

####(３)次にHomebrewを使って「rbenv」と「ruby-build」をインストールするため、ターミナルで下記のコマンドを入力する。

```
brew install rbenv ruby-build
```

####(４)以下のコマンドを順に打ち込み、rubyとPCに道（パスという）を作る。
＊zshrcというのは、設定ファイルの名称です。（CatalinaかMojave以前の方で、設定ファイル名が違うので注意。

``` 
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
```

↓
zshrcを再読み込み

```
source ~/.zshrc
```
 
↓
ターミナル上で日本語入力を可能にする設定

```
brew install readline
```

↓
readlineをどこからでも使用可能にする設定

```
brew link readline --force
```

＊これでRuby用の環境構築が完了！

##Railsのインストール

####(1)rbenvを使って、インストール可能なrubyのバージョンを確認する.

```
rbenv install -l
```
![ruby ver sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1102030/37d5ad39-1337-377b-0027-32ef9c950cf8.png)

####(2)今回は最新バージョンのRubyをインストールします。

```
rbenv install 2.7.2
```
####(3)システム全体でrubyが使えるように下記のコマンドを実行する。

```
rbenv global 2.7.2
```

そして、rbenvを読み込んで反映させる

```
rbenv rehash
```

####(4)最後に、Rubyのバージョンがインストールされている確認してみる

```
ruby -v
```

＊先程インストールしたバージョン2.7.2を確認できたらOK！

##Railsの用意
####(1)Rubyの拡張機能(gem)を管理するバンドラー（bundler）のインストール

```
gem install bundler --version='2.1.4'
```

####(2)Railsをインストール

```
gem install rails --version='6.0.0'
```

####(3)rbenvを再読み込みをしrailsが導入できたか確認をする

```
(rbenvの再読み込み)
rbenv rehash

(Railsのバージョンの確認)
rails -v
```

##Railsの環境構築
####(1)Homebrewを使い、Node.jsをインストール

```
brew install node@14
```
####(2)Node.jsへのパスを設定

```
 echo 'export PATH="/usr/local/opt/node@14/bin:$PATH"' >> ~/.zshrc
```
↓

```
source ~/.zshrc
```

####(3)Node.jsが導入できたか確認

```
node -v

(結果)
v14.15.3　※v14以降の数値は異なる場合もある
```

####(4)Node.jsを利用する際に、プログラム同士の関係性を管理するためにyarnをインストールする。

```
(インストール)
brew install yarn

(確認する)
yarn -v
```
＊これでRailsの環境構築は完了！

##Railsでアプリケーションを作成
今回はprojectファイルの中にmy_firstアプリケーションを置くことにします。

####(1)ターミナルを起動して、作成したいアプリケーションを置く場所に移動するため、以下のコマンドを入力。

```
（コマンド）
% cd ~/projects

（結果）
ooooo@oooooo-ooo projects %   ※oooo@ooooooo-oooの部分は使用しているmacによって表示が異なる.
```

####(2)作成したいアプリケーションを作るために以下のコマンドを入力

```
(コマンド)
% rails _6.0.0_ new アプリケーション名 -d　使用するデータベース
```

####(3)作成したアプリケーションを確認

```
(アプリケーションへ移動)
% cd アプリケーション名

（アプリケーションを確認）
% pwd
```
＊先程、作成したアプリケーション名が表示してあればOK!

========================================================================
☻ここまで読んでくださってありがとうございます！
未経験からWebエンジニアになる為の4つの課題

未経験から4つの課題を完成するのは少し大変かもしれませんが、エンジニアになれば好条件で働けるのでおすすめです。



## 課題1：Todolist
https://qiita.com/hamaguri/items/476e75e6a29276ad1ba7


**※こちらの記事はHTMLの基本知識があるのが前提です。
わからないところは無料サイトで調べながらアプリ作成して基本を学びましょう。**

個人的おすすめ
[クリエイタークエスト](https://creatorquest.jp/lessons/html/html-intro/)
[ドットインストール](https://dotinstall.com/)


## 課題2 ：クイズアプリ
https://qiita.com/hamaguri/items/7e382077da95e824ad3a

https://qiita.com/hamaguri/items/36d7c3b39850b2c961f6


:::note info
記事はコピペで実装できるので下記機能を自分で調べて追加してみましょう！
:::


- 結果の画⾯でやり直しのボタンを追加
- 答え終わった時にタイマーを⽌める
- 問題をランダムに出す





## 課題3：掲示板
https://qiita.com/tataboo/items/e07df8262bb08c089c1f

https://qiita.com/tataboo/items/48be5496891898a25c1a

https://qiita.com/tataboo/items/c01aa14baa31b3805cf8

https://qiita.com/tataboo/items/c9446fdd279597e58bfd

**※こちらの記事はDB(データベース)の基本知識があるのが前提です。
ここまで来たら自分で検索してDBを調べながら課題を進めましょう。**
サーチ能力もエンジニアのスキルです。
https://qiita.com/tataboo/items/a83519660281307ca242


:::note info
記事はコピペで実装できるので下記機能を自分で調べて追加してみましょう！
:::


- 削除機能を追加
- 編集機能を追加



# #課題4：多画面管理webアプリケーション

https://qiita.com/hamaguri/items/663bfc8c6aaab08dc745

**※こちらもReactの基本知識が必要かもしれません。
もしわからなければReactの公式チュートリアルをやってみたり、参考にながら実装してみましょう。**
Reactチュートリアル　➝　https://ja.reactjs.org/tutorial/tutorial.html

ここまでの内容を理解していればもうエンジニアです。
あとはバージョン管理も学んでおくと良いでしょう。

https://backlog.com/ja/git-tutorial/
【Flutter】全画面を削除し遷移する



## 何度か画面遷移をした後にトップレベルの画面に戻す

```dart
Navigator.of(context).pushNamedAndRemoveUntil('/page', (_) => false,);
```

### メソッド

条件を満たすまで画面を破棄し遷移するため, 条件部分でfalseを返している.

```dart
pushNamedAndRemoveUntil(
  '', //page
  (_) => false, //条件
)
```

参考 https://api.flutter.dev/flutter/widgets/Navigator/pushNamedAndRemoveUntil.html
【ラビットチャレンジ】応用数学


# 第１章：線形代数
●行列
　・スカラーを表にしたもの
　・ベクトルを並べたもの
　　→ベクトルの変換に使える！

●連立1次方程式
　・連立方程式を行列で表示できる！

●単位行列と逆行列
　・逆行列は行列の逆数のようなもの

●逆行列の求め方
　・掃き出し法で計算できる。

●逆行列が存在しない条件
　・a*d - b*c=0のとき逆行列を持たない。

●行列式の特徴
　・行列式は2つの横ベクトルで作られる平行四辺形の面積を表す。
　・行ベクトルを入れ替えた場合、符号が替わる。

●行列式の求め方
　・2行2列の正方行列の場合、a*d-b*c。
　・3行3列の正方行列の場合、サラスの公式を用いる。

●固有値と固有ベクトル
　・A*x=λ*xが成り立つような場合、
　　ベクトルxとその係数λを固有ベクトル、固有値という。

●固有値分解
　・固有値分解は、正方行列を3つの行列の積に変換すること。
　・行列の累乗の計算が容易になるなどの利点がある。

●特異値分解
　・正方行列以外に対して、固有値分解のようなことができる。

●特異値の求め方
　・M*M.t = U*S*S.t*U^(-1)
　・上記を固有値分解することで、左特異ベクトルと特異値の2乗が求められる。

●特異値分解の利用例
　・特異値分解した画像データの行列から、成分の小さい部分を取り除くことができる。

# 第２章：確率・統計
●確率
　・頻度確率(客観確率)は発生する頻度を表す。
　　例）10回に1回
　・ベイズ確率(主観確率)は信念の度合いを表す。
　　例）40%の確率でインフルエンザ

●条件付き確率
　・ある事象X=xが与えられた下で、Y=yとなる確率。
　　例）雨が降っている条件下で交通事故に遭う確率

●独立な事象の同時確率
　・お互いの発生には因果関係のない事象X=xと事象Y=yが
　　同時に発生する確率。

●確率変数と確率分布
　・確率変数は、事象と結び付けられた数値を表す。
　・確率分布は、事象の発生する確率の分布を表す。

●期待値
　・その分布における確率変数の平均値orありえそうな値を表す。
　　離散値の場合、総和。連続値の場合、積分で表現できる。

●分散と共分散
　・分散はデータの散らばり具合を表す。
　・共分散は2つのデータ系列の傾向の違いを表す。

●分散と標準偏差
　・分散は2乗しているため、元のデータと単位が異なる。
　　平方根を求めることで単位を元に戻す。

●様々な確率分布Ⅰ
　・ベルヌーイ分布はコイントスのイメージ。
　　裏と表で出る割合が等しくなくとも扱える。
　・マルチヌーイ分布はさいころを転がすイメージ。
　　各面の出る割合が等しくなくとも扱える。
　　プログラムでは場合分けで表現する。

●様々な確率分布II
　・二項分布はベルヌーイ分布の多試行版。
　　階乗で表現する。
　・ガウス分布は釣鐘型の連続分布。
　　真の分布が分からなくてもサンプルが多ければ正規分布に近づく。
　　２つの指数関数を並べたようなもの。

●推定
　・母集団を特徴づける母数を統計学的に推定すること。
　・推測統計は、集団から一部を取り出し、元の集団の性質を推測する。
　・点推定は、平均値などを１つの値に推定すること。
　・区間推定は、平均値などが存在する範囲を推定すること。
　　※機械学習ではあまり利用されない。

●推定量と推定値
　・推定量は、パラメータを推定するために利用する数値の計算方法や計算式のこと。
　・推定値は、実際に思考を行った結果から計算した値。

●標本平均
　・標本平均は、サンプル数が大きくなれば、母集団の値に近づく → 一致性
　　サンプル数がいくらあっても、その期待値は母集団の値と同様 → 不偏性

●標本分散
　・標本分散は、一致性を満たすが、不偏性は満たさない。

# 第３章：情報理論
●自己情報量
　・1/Wを積分したらlogWとなる。
　・Wはあまり馴染みがないため、確率Pで表す。
　・WとPは逆数の関係であり、-logPで表せる。

●シャノンエントロピー
　・自己情報量の期待値。

●カルバック・ライブラー　ダイバージェンス
　・同じ事象・確率変数における異なる確率分布P、Qの違いを表す。
　・距離見たいなものだが、距離ではない。
　・前の情報の珍しさと、後になって分かった珍しさの差し引きを表す。
　・どちらを先にするかで値が変わるため、距離の定義を満たさない。

●交差エントロピー
　・KLダイバージェンスの一部分を取り出したもの。
　・Qについての自己情報量をPの分布で平均している。
Nginx+unicornをherokuで使う方法

##Nginxサーバーとは##
Nginxとは処理速度が速く、高負荷に比較的強いWEBサーバーのことです。
ローカル環境ではデフォルトでpumaという名前のWebサーバーが使われており、railsサーバ起動時のログでpumaが使われています。
この記事ではアプリケーションサーバー（Nginx)を設定する方法をお伝えしたいと思います。

##Nginxサーバーをセッティングする##
unicornのインストール
unicornについては下記サイトを参考にして下さい
https://www.autovice.jp/articles/146

まずはGemをインストール
Gemfile

```
gem 'unicorn'
gem 'unicorn-rails'
```

gemfileの書き込みが終わったら

```
$ bundle install
```
あらゆる言語でのアプリケーション開発を可能にする Heroku buildpackを実行
Nginxをインストール

```
$ heroku buildpacks:add heroku-community/nginx
```
アプリケーション直下にProcfileを作成し、下記を記載
Procfile

```
web: bin/start-nginx bundle exec unicorn -c config/unicorn.rb
```
unicorn.rbを作成し、下記を記載
app/config/unicorn.rb

```
require 'fileutils'
listen '/tmp/nginx.socket'
before_fork do |server,worker|
    FileUtils.touch('/tmp/app-initialized')
end
```

herokuの設定

```
$ heroku login
$ heroku create
$ rails assets:precompile RAILS_ENV=production
$ heroku buildpacks:set heroku/ruby
$ heroku buildpacks:add --index 1 heroku/nodejs
```

herokuにデプロイ

```
$ git add .
$ git commit -m "hoge"
$ git push heroku master
$ heroku run rails db:migrate

PostgreSQLへの接続ができない場合(herokuのアドオンを追加）
$ heroku addons:create heroku-postgresql
```

これでセッティング完了！
あとはherokuのlogからNginxのサーバーが繋がっているかを確認する
以下のコマンドから確認できると思います！

```
$ heroku logs -t
```

最後までご覧頂きありがとうございました！
kaggle machine learning basic 2

前回簡単な予測をしたので今回は前処理の部分

まずはデータの読み込み
同じくhousingprice からダウンロード

X_full = pd.read_csv('train.csv', index_col='Id')

欠損値に関しての処理
・数値に対して
・カテゴリ変数に対して

欠損値のしらべかた
X_isnull().sum()
.sum をつけることでサマリーにしてくれる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935742/397016d3-c7b6-0dc3-5f8b-cdb93dbd61b7.png)
このデータではLotFrontageが259個の欠損値がある

特定の列の欠損値を削除
X_full.dropna(axis=0, subset=['SalePrice'], inplace=True)
これはSalesPriceの列の欠損値があるところを削除

X_full.drop(['SalePrice'], axis=1, inplace=True)
これはSalesPriceを丸ごと削除


数値データの対応

数値データのみ抜き出し
X = X_full.select_dtypes(exclude=['object'])

この中でNaが入っているデータを抜き出す
miss_col_data = [col for col in X_train.columns if X_train[col].isnull().any()]

これでどこにNaがあるか判明

やり方はいろいろあるがimpleInputerが簡単

from sklearn.impute import SimpleImputer

my_imputer = SimpleImputer()
imputed_X_train = pd.DataFrame(my_imputer.fit_transform(X))

SimpleImputerはデフォルトはMean
https://scikit-learn.org/stable/modules/generated/sklearn.impute.SimpleImputer.html

カテゴリ変数の対応
2パターン、Onehotとorginal encoding
ちがいは。。。まだわかんない。。。とりあえずワンホットにしておけばいい気もするが。

orginal encoding
from sklearn.preprocessing import OrdinalEncoder

ordinal_encoder=OrdinalEncoder() 
label_X_train[good_label_cols] = ordinal_encoder.fit_transform(X[label_cols])

これだけ、Xの中のラベル化したいものだけを抜き出す

one hot encoding
from sklearn.preprocessing import OneHotEncoder

OH_encoder = OneHotEncoder(handle_unknown='ignore', sparse=False)
OH_cols_train = pd.DataFrame(OH_encoder.fit_transform(X[cardinality_cols]))

これだけ、Xの中のラベル化したいものだけを抜き出す

どちらも簡単
なぜ「= NULL」ではなく「IS NULL」と書くのか？（3値理論とNULL）

## はじめに

- プログラミングでは真偽値は基本2値（`TRUE`,`FALSE`）
    - SQLは3値（上記２位加えて`unknown`）ある
    - なぜか？`NULL`がいるから

で、本題です。

## なぜ「= NULL」ではなく「IS NULL」と書くのか？

最初よくやりがちなSQL、これは失敗します。

```sql
SELECT * FROM tests WHERE col_1 = NULL
```

なぜか？

それは、**NULLに比較述語を適用した結果が、常にunknownになるから**です。

当然、クエリを実行した結果、出力されるデータはWHERE句の条件評価がtrueになった行のみです。

falseやunknownは選択されません。以下のように、全ての比較述語が同じように動作します。

col_1がどんな値であろうがなんだろうが、NULLと比較した段階でunknownになります。

```sql
-- 結果は全てunknown

1 = NULL
2 > NULL
3 < NULL
4 <> NULL
NULL = NULL
NULL > NULL
NULL < NULL
NULL <> NULL

```

絶対にtrueにはなりません。

## なぜ NULLに比較述語を用いた結果が絶対にtrueにならないのか？

それは、**NULLが値でも変数でもないから**です。

NULLは「そこに値がない」ことを示すマークとか目印です。

仮にNULLが値であるならば、型をもたないといけません。

なぜなら、データベースで扱われる値は全て型を持つからです。

> SQL文中の値は対応付けられたデータ型を持っています。

https://docs.oracle.com/cd/E15817_01/server.111/e05765/datatype.htm#15669

なので、値じゃないNULLは何と比較しても結果はtrueでもfalseでもない、結果が分からないのでunknownとなります。

今後、何度か「3値理論とNULL」について書く予定です。本記事の内容はそれの基本知識になるので覚えておきます。

## 参照

https://www.amazon.co.jp/dp/4798157821/

60 - 64p 

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103
MySQL WorkBentchから複数の踏み台サーバーを経由してRDSへ接続する方法

## やりたいこと

例えば、下記の図のようなインフラ構成でDBへアクセスしようと思うと
一旦踏み台サーバーを経由してから、本番のWEBサーバーへ接続し、そこからRDSへ接続する必要があります。

MySQL WorkBentch単体ではoverSSHを使っても一台しか経由ができません。

とはいえコマンドライン上でDBを操作し続けるのはつらいので、
このような場合にMySQL WorkBentchのようなクライアントツールを使う方法を解説します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/de50a378-57ec-ae71-6385-0cfb2c70c9d6.png)

## 解決方法

SSHポートフォワーディングを使った多段SSHを行います。


## ポートフォワーディングとは
ポートを転送する機能のこと指します。

例えば
「サーバーAの100番ポートに来た通信は、サーバーBに転送する」
といったような感じです。

上記の仕組みを使うことで、
MySQL WorkBentchで100番ポートを指定すると決まったサーバーまで転送してくれるので接続することができます。

## 環境
Windows
GitBash
MySQL WorkBentch

## 手順 - ポートフォワーディング

まずはGitBashなどターミナルを開き、下記のようなコマンドを入力して本番サーバーまでポートフォワーディングさせます。

```
$ ssh -t -L 任意のポート番号A:localhost:任意のポート番号B -i ~/.ssh/踏み台の鍵名.pem ユーザー名@11.111.111.111 ssh -L 任意のポート番号B:RDSのホスト名:3306 ユーザー名@22.222.222.222

＃コマンドの例
$ ssh -t -L 10022:localhost:44444 -i ~/.ssh/bastion.pem ec2-user@11.111.111.111 ssh -L 44444:RDSのホスト名:3306 ec2-user@22.222.222.222
```

コマンドを流すと本番サーバーまで接続されます。
このままGitBash（ターミナル）を閉じずに接続を維持します。
※閉じてしまうとこの後に行うMySQL WorkBentchを使っても接続することができません。


## 手順 - MySQL WorkBentchでの設定

以下の画像のように設定し、Test Connectionを押すと接続できるか確認ができます。
※ポイントはポートをポートフォワーディングで指定した時のものをしっかり合わせることです。

<img width="600" alt="mysql" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308656/b11b00d7-5d49-e7f3-3fcf-d988f27ee618.png">

以上となります。
もしもっと便利な方法がございましたら教えて頂ければ幸いです。

今後もう少し詳しく追記させて頂く予定です。
配列を操作するforEachとmapの違い

#はじめに
Javascriptの配列操作を学んだ際、forEachとmapの違いがいまいちピンとこなかったので当時の自分に書くつもりで完結にまとめてみました。

#forEachの使い方
forEachは配列の値を順番に一つずつ取り出して設定した処理を実行します。
下記だと配列に格納された数字を一つずつ取り出して2倍して出力します。

```jsx
const array = [1, 2, 3, 4, 5];

array.forEach(el => {
  console.log(el * 2);
});

//出力：2 4 6 8 10
```

#mapの使い方
それに対してmapは、配列の値を順番に一つずつ取り出して設定した処理を実行するというところまで同じです。しかし、それに加えて処理の結果を配列として生成しなおすという性質を持っています。

そのため、mapは下記のように配列に処理を加えて新たに生成した配列を出力します。

```jsx
const array = [1, 2, 3, 4, 5];

const newArray = array.map(el => {
   return el * 2;
});

console.log(newArray);

//出力　[2, 4, 6, 8, 10]
```

#ただ値を出力するだけならforEach
mapでもできてしまいますがmapは新たな配列を生成するという意味合いが強いのでわざわざ使う意味はないでしょう。この場合はforEachが適切です。

```jsx
const array = [1, 2, 3, 4, 5];

//適切
array.forEach(el => {
  console.log(el * 2);
});

//わざわざこう書く意味はない
array.map(el => {
  console.log(el * 2);
});

//どちらも出力は：2 4 6 8 10
```

#配列の生成はmapしかできない
逆に新たな配列を生成した時、forEachは使えません。この時はmapが適切です。

```jsx
const array = [1, 2, 3, 4, 5];

//適切
const newArray = array.map(el => {
   return el * 2;
});

console.log(newArray);
//出力　[2, 4, 6, 8, 10]

//-----------------------------------------

//値が返ってこず出力はundefinedになる。
const newArray = array.map(el => {
   return el * 2;
});

console.log(newArray);
//出力　undefined
```

#まとめ
最近は文字列や数字の配列を弄る機会が多いのでmapばかり使っていますが、取得した値を出力したりpushで空の配列に格納したりする場合はforEachが便利ですね。

配列の処理は他にもいろんな特性やメソッドがあるのでMDNなどで調べながら使っていきます。
基本的なブログサービスを構築してみました（シングル構成）

#<記事の目的>#
aws cloudtechにて、以下の基本的なサービスについて学びました。
※概要から実際の作成方法まで。

①VPC ②IAM ③EC2 ④RDS

今回は、その成果物としてパブリックサブネットに構築したEC2にwordpressをインストールしてみたいと思います。(シングル構成)

#<構成図>#
構成図は以下の通りと致します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865661/dc120c13-bdce-d779-9fcc-057e2ba669ae.png)

#<準備物>#
ノートパソコン(画面が壊れており、テレビに繋げて映しております。):laughing:

#<要件>#
要件は以下の通りと致します。
①ルートアカウントは使用しない。(IAMユーザ作成済み。) 
②自PCから、SSH/HTTPアクセスを許可。
③パブリックサブネットに配置するEC2には、wordpressをインストールする。
④保存用DBは、RDSでMYSQLを指定する。

#<完成までの工程>#
画像等貼りつけまくると見づらいので、ところどころはしょります。

①VPC(サブネット、インターネットゲートウェイ作成含む)
→特に問題なく完了。

②EC2
→特に問題なく完了。

③RDS
→特に問題なく完了。※若干長くて不安であったので一安心。

#<font color="Red"><構築時のエラーと対応策></font>#
①Privateに設定したRDSのSG編集にてエラー。
→「You may not specify a referenced group id for an existing IPv4 CIDR rule」と表示されて混乱する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865661/923c327f-a964-697e-933a-ba9f06b68dec.png)

対策：一回削除して、SGを再登録して解決。(ああ、、驚いた。)
[参考となったサイト様](https://dev.classmethod.jp/articles/aws-you-may-not-specify-a-referenced-group-id-for/)	

②wordpressのGUIログインパスワード忘れてログイン不可。
→「パスワードをお忘れですか？で、メールアドレスを指定してもパスワード再設定のメールが届かない。」。1から作りなおそうかと模索。

対策：mysqlコマンドからDBに接続して、パスワードを再設定して解決。(あああ、、、驚いた。)
[参考となったサイト様](https://egatech.net/wordpress-password-reset/ ※サイトに記載している、DBバックアップは今回未実施。)

無事にwordpressが構築できました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1865661/d4ce2baf-dcb2-3e51-f44c-e02429404f61.png)

#<その他(疑問？)>#
EC2は、EIPを設定していませんでした。その為、EC2を再起動するとIPが変更される認識でしたがされていませんでした。→原因は、インスタンスを【停止】-【起動】としないとIPは変更しないようでした。基本的なこと？でしたが知れて良かったです。:ok_hand_tone2:

次回に続きます。ありがとうございました。:wink:

#<最後に>#
___
この記事はAWS初学者を導く体系的な動画学習サービス
「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com
___
特定のコミットを取り込むcherry-pickの使い方

##cherry-pickとは？
通常別ブランチの内容を取り込む場合は merge　を利用するケースがほとんどだと思います。
ただ merge だと余計なコミットまで取り込まれてしまい困るケースもあるかと思います。
そういった場面で利用するのが **cherry-pick** です。

cherry-pick　は別ブランチの一部の変更のみを取り込みたいときに利用します。


#使用方法

##一つのコミットを取り込む場合
一つのコミットだけを取り込む場合は以下のようになります

```
$ git cherry-pick [取り込むコミットID]
```

## 複数コミットを取り込む場合
複数コミットの場合（コミットA〜コミットCまで）は以下のようになります。

```
$ git cherry-pick [取り込むコミットAのID]..[取り込むコミットCのID]
```


##取り込みは行うがコミットしたくない

「-n」オプションをつけることで対応できます。

```
$ git cherry-pick -n [取り込むコミットID]
```

##cherry-pick時にコンフリクトが起きた場合

コンフリクトを解消した後に以下のコマンドを叩くことで、コンフリクトで止まっていた cherry-pickの処理を再開させることができます。

##マージコミットをcherry-pickしたい場合
基本的にはマージコミットは cherry-pickを行うことはできませんが、「-m」オプションをつけることで実行できるようになります。
SQL SELECT 句 で真偽値(ブール値 Boolean)を返す（MySQL / Presto）

## 今日学んだ知らなかったこと

下記は仮のSQLですが、今日は以下のようなクエリを見て

```sql
SELECT
  id,
  created_at,
  city_id IS NOT NULL AS is_city
FROM test_requests
...
```

3カラム目がなぜ真偽値が1行に1行に割り振られているのかがわかりませんでした。

### 原因

今までなんとなく書いていたので以下の意識がありませんでした。

**WHERE 句 の直後には検索条件となる真偽値を与えなければいけない** ということ。

```sql
SELECT * FROM WHERE id IS NULL
```

当たり前ですが、上記のように書けば、WHERE句がTRUEになる行だけが抽出されて、出力されます。

ということは、**WHERE句内は**真偽値が返ってきていると言うことです。

今日見たクエリは、それをSELECT句に書いただけです。

## 例題

以前作成したテーブルで試してみましょう。

実行結果はこちらで確認できます。

https://www.db-fiddle.com/

```sql
CREATE TABLE companies (
	id INT NOT NULL PRIMARY KEY auto_increment,
	company_name TEXT,
	company_group_id INT,
	address TEXT
);

INSERT INTO companies VALUES
(1, 'ACE', 1, 'Japan Tokyo chiyoda 1-1'),
(2, 'ACE_1', 1, 'Japan Tokyo chiyoda 1-1'),
(3, 'ACE_2', 1, 'Japan Tokyo chiyoda 1-2'),
(4, 'RAINBOW_MEAL', 2, 'Japan Tokyo koukyogaien 1-1'),
(5, 'STEP_INDUSTRY', 3, 'Japan Osaka fuchu midorigaoka 1-1');
```

## Query

```sql
SELECT
	*,
	company_group_id IS NOT NULL
FROM companies
```

MySQLとPrestoの実行結果の違いを記載しておきます。

### MySQL v8.0

| id  | company_name  | company_group_id | address                           | company_group_id = NULL|
| --- | ------------- | ---------------- | --------------------------------- | ------------------------ |
| 1   | ACE           | 1                | Japan Tokyo chiyoda 1-1           |  1                       |
| 2   | ACE_1         | 1                | Japan Tokyo chiyoda 1-1           |  1                       |
| 3   | ACE_2         | 1                | Japan Tokyo chiyoda 1-2           |  1                       |
| 4   | RAINBOW_MEAL  | 2                | Japan Tokyo koukyogaien 1-1       |  1                       |
| 5   | STEP_INDUSTRY | 3                | Japan Osaka fuchu midorigaoka 1-1 |  1                       |

### Presto

| id  | company_name  | company_group_id | address                           | company_group_id = NULL|
| --- | ------------- | ---------------- | --------------------------------- | ------------------------ |
| 1   | ACE           | 1                | Japan Tokyo chiyoda 1-1           |  false                   |
| 2   | ACE_1         | 1                | Japan Tokyo chiyoda 1-1           |  false                   |
| 3   | ACE_2         | 1                | Japan Tokyo chiyoda 1-2           |  false                   |
| 4   | RAINBOW_MEAL  | 2                | Japan Tokyo koukyogaien 1-1       |  false                   |
| 5   | STEP_INDUSTRY | 3                | Japan Osaka fuchu midorigaoka 1-1 |  false                   |

以上です。

## アウトプット100本ノック実施中

https://qiita.com/ryosuketter/items/713474dbd009870e4103
Sなしアクセス対策時のLet's Encryptの自動更新

## 1. 経緯
Let's Encryptは3か月ごとの証明書の更新が必要なので、cronに仕込んで自動で更新したいものです。しかしhttpからhttpsへのリダイレクト設定をしている場合、証明書更新に必要なポート80がすでに使われているため、更新が失敗してしまいます。

## 2. 前提
あくまで自動化することを最優先に考えているため、更新中はWebサーバの再起動は必要ですし、ポート80は停止します。
想定しているWebサーバはNginxですが、Apacheでも同様の方法でできます。

## 3. 方法

### 1. ポート80と443の設定を別ファイルに書き出しておく

ここではhttpからhttpsへリダイレクト設定のファイルをserver80.conf、SSLを用いたWebサーバの設定をserver443.confとします。大本となる設定ファイル(/etc/nginx/nginx.conf)でconfという拡張子のファイルをincludeしているので、拡張子はconfとしなければなりません。

``` server80.conf
server {
  listen 80;
  server_name example.com;
  return 301 https://$host$request_uri;
}
```
``` server443.conf
server {
  listen 443 ssl http2;
  server_name example.com;
  # その他の設定
}
```

### 2. シェルを書く

一連の処理を行うシェルスクリプトを書く。ここではcertbot_renew.shという名前とする。
スクリプト内のパスやコマンドは環境によって異なる可能性があるので、適宜読み替えてください。
エラーはチェックしていません。

```certbot_renew.sh
#!/bin/sh
NGINXDIR=/etc/nginx/conf.d
mv ${NGINXDIR}/server80.conf ${NGINXDIR}/server80.conf.bak # 拡張子を変えて読み込まなくさせる
systemctl restart nginx
certbot renew
mv ${NGINXDIR}/server80.conf.bak ${NGINXDIR}/server80.conf # 拡張子を戻して読み込ませる
systemctl restart nginx
```

### 3. cronに設定

Webサーバの再起動や証明書の更新はrootでなければできないので、rootのcronに設定してください。
下の例では毎月1日の3:00に更新をしています。

```cron
0 3 1 * * /path/to/certbot_renew.sh
```
SPAについてまとめてみた！

#SPAとは
* Single Page Application（シングルページアプリケーション）
* SPAとは複数ページではなく、単一のページで構成されたwebアプリケーションまたはwebサイト

#SPA使用例

__Trello__

SPAで単一のページでできており、Webなのにまるでアプリのようにページ遷移無しで他の情報を見ることが可能。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/3e956a3a-3dc3-278e-fee0-9a1d63bb1bdd.gif)

# SPAを従来のwebアプリケーションと比較

![スクリーンショット 2021-09-02 22.42.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/28086715-cb05-661b-b792-14c8a7c8b77c.png)


従来のwebアプリケーションはブラウザがリクエストしたページに対して新しいHTMLファイルを送り、それをブラウザで表示する、といったものでした。

![スクリーンショット 2021-09-02 22.52.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/59ca0017-9f8a-7c2c-7efc-f50f7b3b56a1.png)

__SPAでは、ブラウザからのリクエストする内容が異なります。__

ブラウザには最初に基本となるHTMLファイルが送られており、新しいページをサーバーから取得する際、その差分のみをリクエストします。
そして、サーバーから差分のみを返し、それを同じHTMLファイルを使って表示します。
これによって、ページを更新することなく、サーバーと通信することができます。

なぜこのようなやり取りがどうしてできるかと言うと、Ajaxという通信処理を使っているからです。

# Ajaxとは

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/b20b67fa-2d52-c790-87e5-c727a72bf19c.gif)

__Ajaxとは「Asynchronous JavaScript + XML」の略__

JavaScriptを使って、非同期にサーバー間での通信を行います。

GoogleMapはページの遷移がなく新しい情報を取得可能。これはAjaxを用いて動いている。

***

通常、プログラム処理は1つずつ行われ、同時に複数の処理が走ることはありません。これを同期処理といいます。
一方、Ajaxでは、プログラムでメインの処理が走っている裏で、HTMLの指定した部分を書き換えるためにサーバーと通信を行うことができます。プログラムが並行して走っている形となるので、非同期処理と呼ばれます。
サーバーと通信して返ってくるのはJSONというデータ形式で、この形式をJavaScriptが読み取り、非同期で部品を更新することができます。

# SPAのメリット


* ユーザーにストレスのないページ遷移
→表示速度が速い。サクサク表示が切り替わるので、とても快適

* アプリのような体験を提供できるUX（体験）ができる
→いつも使っているスマートフォンのアプリ感覚で使えたり、使い勝手が良い

>UXとはユーザーエクスペリエンスのことで、人がモノの利用を通して得る体験のことです。


![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1572216/3e956a3a-3dc3-278e-fee0-9a1d63bb1bdd.gif)

# SPAのデメリット

* 古いブラウザでは処理が重くなる

ブラウザのバージョンなどが古い場合、とても動作が重くなってしまい、SPA導入の意味が全くなくなってしまいます。

* 実装コストが大幅に増える

SPAでは今までブラウザに処理を任せていた部分を実装する必要があるため、開発コストがかさみます。

# 最後に
Reactを勉強しててSPAという言葉よく聞くようになり、なんとなくの理解だった為、今回まとめてみました。
最後までご覧頂きありがとうございました:bow_tone1:


>[参考サイト](https://note.com/sakamichiyuki/n/n758d5d6d7396)
[参考サイト](https://www.geekly.co.jp/column/cat-technology/1908_009/)
DJI ドローンをMAVLinkを使用してQGroundControlで飛ばしてみる

# はじめに
DJIドローンをQGroundControlで飛ばして遊んでみる内容です。
通常、QGroundControlでDJIドローンを接続できないですが、DJIドローンをMAVLinkプロトコルにラップしてQGroundControlで飛ばすことができます。

# 構成
DJIドローン⇒Androidタブレット⇒DJI SDK⇒MAVLink SDK⇒QGroundControl

# 環境
DJI Mavic Pro 2
HUAWEI MediaPad M5 lite(Android 9)]
DJI SDK 4.14
Ubuntu 18.04.5
QGroundControl 4.0.11

# QGroundControlの設定
#### MAVLink受信の設定
QGroundControlでMAVLink受信するUDPポートを設定します。

```
Type: UDP
Automatically Connect on Start：ON
Listening Port: 14540
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/9e0e1992-c0e1-8594-e7e0-e7762e9c6592.png)

#### 映像受信の設定
QGroundControlでDJIドローンカメラからの映像を受信するUDPポートを設定します。

```
Video Source: UDP h.264 Video Stream
UDP Port: 5600
Aspect Ratio: 1.777777(Default)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/d805f755-5a42-3db9-56cb-2411081a9425.png)

# DJIドローンをMAVLinkプロトコルにラップ

DJIドローンをMAVLinkプロトコルにラップには、[rosettadrone](https://github.com/The1only/rosettadrone)を使用します。

# 接続手順
1. DJIドローンを電源ON
1. DJIドローンのプロポを電源ON
1. USBケーブルでプロポとAndroidタブレットを接続
1. Androidタブレットでrosettadroneを起動
1. MAVLink送信先のIPとPort(14540)を設定
1. 映像転送先のIPとPort(5600)を設定
1. QGroundControlを起動


(Androidタブレットでrosettadroneを起動)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/71035831-3ce6-d2a7-58bd-80f8afd7b389.png)

(MAVLink送信先のIPとPort(14540)を設定)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/3eb646b1-9889-ac0c-e14c-4bb38e75f3a8.png)

(映像転送先のIPとPort(5600)を設定)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/49e9f890-3c56-f204-dd3f-442f84cd694d.png)

- QGroundControlを起動

QGroundControlでDJIドローンからのMAVLinkテレメトリとカメラ映像を見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/fedc40dc-e77c-6fbc-c96e-9c9b5c60ba9b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/4add92db-2570-1d2c-6d4b-9eefabbc42e6.png)
ctrl alt spaceの謎の音声がでないようにする

ラズパイをテレビにつないで操作を試していたところ。
「スクリーンリーダー　プレス　コントロールとスペース」
的な何かがうるさい！日本語でテキトーな検索をしても出てこないので、仕方ないので英語で検索したところ、見つけました。

Windowsでいうとこのユーザー補助の、画面の読み上げ機能みたいなもので、なぜかそれをインストールしてない状態だと、ctrl alt spaceでorcaをインストールできる、という案内みたいですね。...ならこれを発しているのは何者なんだ、せめて解除方法くらい喋らないのかｗ

```機能が自動的に立ち上がらない方法は.
sudo rm /etc/xdg/autostart/piwiz.desktop
```
これで次回OS起動時から黙るみたいです。
なお、即時でやめてほしいときは、

```wizのpidを調べる.
ps -eaf | grep wiz
```

```piwizのpid、ユーザー名の次つまり左から2行目がpid.
sudo kill <pid番号>
```
で行っちゃいましょう。
「情報幾何学の基礎」を読んでみた

#「情報幾何学の基礎」を読んでみた

## 対象
情報幾何について知りたくて**情報幾何学の基礎**を購入したがよくわからなくて読み切れない人向けの記事です。

##はじめに
機械学習、深層学習の本を読んでいると時々 **情報幾何**を見かけることがある。**情報幾何の新展開**を購入したが"微分幾何"など全く触れたこともないので途中で挫折した。

https://www.saiensu.co.jp/search/?isbn=978-4-7819-1463-3&y=2019


基本からということで**情報幾何学の基礎**を購入して読む事にした。

https://www.kyoritsu-pub.co.jp/bookdetail/9784320114517



大学1～2年の数学の知識を前提にしてわかりやすく書かれているが、一人で読み進めるにはやはり知識不足で他の本の力を借りることがあった。
で、つまづいたとき時に読んだ本を紹介します。

##テンソル 
- テンソル―科学技術のために： 0章　**テンソル**を知らない人にはお勧め。**テンソル**の理解は大切です。

https://www.shokabo.co.jp/mybooks/ISBN978-4-7853-1068-4.htm


##多様体
- 多様体の基礎 (基礎数学)：忙しい社会人にこのボリュームは厳しいと感じるかもしれませんが詳しく書かれており非常に理解の助けになりました。本の情報だけでは2章がつらいと感じたら少し遠回りでもこの本を読むことをお勧めします。

http://www.utp.or.jp/book/b302120.html

- 曲がった空間の幾何学　現代の科学を支える非ユークリッド幾何とは (ブルーバックス)
：図書館で何となく手に取って読んだのですが、3章の曲率、捩率、測地線の意味とかはこの本をよんでおけば大丈夫です。

https://bookclub.kodansha.co.jp/product?item=0000226672


##統計
- 統計学入門: 定番です(この本が必要な人はそもそもこの記事に興味ないかも)。

http://www.utp.or.jp/book/b300857.html

- 統計モデルと推測
グラフィカルなのと具体例が多いので　**Fisher情報量**、**指数分布族** など理解しやすいです。

https://www.kspub.co.jp/book/detail/5178027.html

##おわりに
基本わからないことはWeb検索して上記本などの助けを借りて読みました。**情報幾何学の基礎**自体とても親切に書かれているため5章まで読み切れるはずです。5章のChentsovの定理の証明には感動するものがありました。
英語の学習のようにYouTubeで[数学系の番組](https://www.youtube.com/watch?v=mX_NpDD7wwg)を流しているだけでもある日突然理解が降ってくることもあります。

以上私の身の回りの本の紹介でしたが理解の助けになれば幸いです。

もし疲れたら以下を読んでみるのもありです。

https://www.fujisan.co.jp/product/1281679579/b/1946649/
makemigrationsコマンドを実行するとNo installed app with labelエラーが出る

# 現象
python manage.py makemigrations {任意のapp名}コマンドを実行すると
No installed app with labelエラーが出る。

# 解決法
settings.pyのINSTALLED_APPSに{任意のapp名}を追加します。

```settings.py
INSTALLED_APPS = [
    '{任意のapp名}',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
Algorithmためのデータ構造をPythonで実現しましょう。ーその２[Queueの実現]

今回はLinear Structure(今後LSと書きます)のQueueについてまとめていきます。

## Queueはなんでしょうか
最初はQueueのイメージを掴んでいきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1729963/2910c300-e074-5166-1e90-b581edefa5d3.png)
QueueはStackと違って、配列の一番左(rearの部分)を入り口とします。出口(データを取り出したい場合)はfrontのところ。一方、Stackはfrontのところを入り口、そして同時に出口としています。

では、今回もPythonのlistを使い、`[1,2,3,4,5]`、1は入り口5は出口のデータ構造をclassで実現しましょう！

## PythonによるQueueの実現

```python
class Queue(object):  
    def __init__(self):  
        self.item = []  
  
    def isEmpty(self):  
        return self.item == []  
  
    def enqueue(self, item):  
        self.item.insert(0, item)  
  
    def dequeue(self):  
        return self.item.pop()  
  
    def size(self):  
        return len(self.item)  
```
メソッドについて、enqueueはlist[0]に追加、dequeueはlist[-1]の値を取り出す。前回と同じく、応用問題のために、それぞれisEmpty, sizeメソッドを追加しました。
では、今回の応用問題はかなり難しいので、コードのみ載せます(:thinking:)

## queueの応用問題-Printer
皆さんは大学時代の時図書館や資料室でプリントした経験があると思います。試験直近日になりますと、プリンターの需要は増え、私の場合、5分や10分ほど自分の資料を待ち続けた記憶がありました。

じゃ、プリンターの基本的な働き型はなんでしょう？

その通りです！プリンターは一個一個のジョブ(job)あるいはミッションをqueueに入れて、先方にあるジョブを完成しないと次のジョブは取り出さないのです。

では、問題です、queueにあるジョブの平均時間帯を計算しなさい。→シミュレーションみたいなプログラムと考えてもいいです。

**シミュレーションコード：**
***Printer class:***

```python
class Printer(object):  
    def __init__(self, ppm):  
        self.ppm = ppm  
        self.currentTask = None  
    self.timeRemain = 0  
  
    def tick(self):  
        if self.currentTask:  
            self.timeRemain = self.timeRemain - 1  
        if self.timeRemain <= 0:  
            self.currentTask = None  
    print('over')  
  
  
    def busy(self):  
        return True if self.currentTask else False  
  
    def startNext(self, nextTask):  
        self.currentTask = nextTask  
        self.timeRemain = nextTask.getPages() * 60 / self.ppm  

```

***Task class　→　ジョブのクラス***

```python
import random  
class Task(object):  
    def __init__(self, time):  
        self.time = time  
        self.pages = random.randrange(1,20)  
  
    def getTime(self):  
        return self.time  
  
    def getPages(self):  
        return self.pages  
  
    def waitTime(self, currentTime):  
        return currentTime - self.time  
  
    def newPrintTask():  
        num = random.randrange(1, 181)  
        return True if num == 150 else False 
```


***Simulation:***

```python
 def simulation(numSecond, ppm):  
        print_obj = Printer(ppm)  
        queue_obj = Queue()  
        waitingTime_list = []  
        for i in range(numSecond):  
  
            if newPrintTask():  
                task_obj = Task(i)  
                queue_obj.enqueue(task_obj)  
    
            if not print_obj.currentTask and not queue_obj.isEmpty():  
                nextTask = queue_obj.dequeue()  
                waitingTime_list.append(nextTask.waitTime(i))  
                print_obj.startNext(nextTask)  
            print_obj.tick()  
        return waitingTime_list  
  
print(simulation(3000, 5))
```

時間があれば、説明も追加したいと考えていますが、今回はここまでです。

次回はUnorderedListについてシェアします。
【JavaScript】繰り返し処理for文

#はじめに
こんにちは。
JavaScriptのfor文についてアウトプットしていきます！

##繰り返し処理とは
> 繰り返し処理とは、ある条件下において何らかの行為を繰り返し実行するための処理です。「ループ（Loop）」とも言われています。

> 参照：https://tcd-theme.com/2021/05/javascript-for.html

<br>

###for文の記述
```javascript:JavaScript
const arry = [1,2,3,4];

for(let i = 0; i < arry.length; i++){
  console.log(i);  //0,1,2,3
}
//for(初期化処理; ループの条件式; ループ内で実行される式)
```
このfor文では、定数arryに格納された配列の要素の数だけループを実行させる。

###for in
```javascript:JavaScript
for(let i in arry){
  console.log(i);  //0,1,2,3
}
```
for inは要素の添字を参照し、先ほどより少ない記述で同じ実行結果を得られる。


###for of
```javascript:JavaScript
for(let v in arry){
  console.log(v);  //1,2,3,4
}
```
for ofは値を参照するので、実行結果は定数arryに格納された値となる。

<br>

#最後に
ここまで繰り返し処理のfor文についてまとめました。
改善点などがありましたらコメントなどいただけると嬉しいです！
【Hibernate】POST時に作成日時カラムにNULLが入る

Spring bootを使用して、簡易的な掲示板アプリを作成していた時に起きたエラーで、なんとなく気になり原因を聞いてみたりしたので、記録として残しておく。

#　起こった現象
掲示板に書き込みできる機能を実装後、動作確認してみたら、create_at(作成日時カラム)にNULLが入ろうとしてます。入れようとしてもNOT NULLなのでダメですよ。というエラーが発生しました。

【該当テーブルのカラム】
id(AUTO_INCREMENT)
content(投稿内容)
created_at(作成日時)

【エラー文】
 "create_at"カラムのnull値が非null制約に違反しています。

確かにテーブルでNOT NULL制約を設けているが、デフォルトでCURRENT_TIMESTAMPが入るようにしており、理由がわからないので調べてみました。


# 原因

結論、entityにフィールドを定義しているかしていないかが関係していた。

```java:entity
	@Column
	private Timestamp created_at;
```

上記のようにフィールドを定義している状態で投稿するととエラーが発生し、定義していない状態で投稿するとエラーは発生しなかった。

フレームワークの機能で、フィールドを定義していると何か値を入れないといけないとフレームワークが勘違いしているのだという。

created_atに値を入れる処理は当然のごとく書いていないので、とりあえずNULLを入れとけみたいな感じで、NULLを入れようとしてた→NOTNULL制約があるのではじかれてエラー発生の流れ。

逆にフィールドを定義していない状態で値を入れようとしないので、デフォルトの値が入るようになるとのこと。


# おまけ

フィールドを定義している状態で現在時間を入れたい場合は@CreationTimestampを付与すればよい。

```java:entity

@CreationTimestamp
@Column
private Timestamp created_at;
```

@CreationTimestampはドキュメントには以下のように書いてある(英語訳)

>プロパティを、それを含むエンティティの作成タイムスタンプとしてマークします。プロパティ値は、所有エンティティを初めて保存するときに、現在のVM日付に1回だけ設定されます。


簡単に言うと、レコード登録時、このアノテーションを付与したカラムには現在時刻が入りますよ。と書いてある気がする。

このアノテーションを付与すればエラーは発生せず、投稿ができました。


以上です。


間違ってたら、ご指摘いただければ幸いです。
GCC 11.2.0 - x86 SIMD cvtt 系の定数最適化のバグ

[GCC 11.2.0 - \_mm_cvttps_pi32 (__builtin_ia32_cvttps2pi) 最適化のバグ](https://qiita.com/ikiuo/items/812b5418f0718eeac713)

GCC のソースをちょっと見たら、cvtt 系は全部同じ事になっていそうな感じです。

そこで、AVX でも実験してみると

```C:test.c
#include <stdio.h>
#include <immintrin.h>

int
main ()
{
  __v8sf i = { 1e20, 2.0, 0, 0, 0, 0, 0, 0 };
  __v8si o = (__v8si)_mm256_cvttps_epi32((__m256)i);

  printf("%#010x\n", o[0]);
  return 0;
}
```

```console:実行結果
$ gcc -mavx -O1 test.c && ./a.out
0x7fffffff
```

予想通りの結果となりました。

このバグで困る人はいない気はしますが、他の cvtt も同様でしょうから気になる方は確認した方が良いでしょう。
Navigation2をrviz2からWaypointを指定して実行する

# はじめに

この記事は以下の記事の続きです。
[ROS2 Foxy環境にTurtleBot3のGazeboシミュレーションをインストールしてNavigation2を動かすまで](https://qiita.com/porizou1/items/d63a41fc1e478dfa5ab6)

Navigation2では新たにWaypoint Followerという機能が追加され、Waypointを指定してNavigationを実行できるようになりました。

https://navigation.ros.org/concepts/index.html

今回この機能をTurtleBot3のGazeboシミュレーション環境を使ってrviz2からWaypointを指定して動かします。

# 実行

TurtleBot3 シミュレーションを起動

```bash
$ ros2 launch turtlebot3_gazebo turtlebot3_world.launch.py
```

Navigation2の実行

```bash
$ ros2 launch turtlebot3_navigation2 navigation2.launch.py
```

rviz2が起動したら、上の`2D Pose Estimate`で初期位置を指定して以下の画面

![rviz_screenshot_2021_03_09-20_26_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399606/0e36ee88-c4c0-6aa1-e775-4f5e5e91988a.png)

1. 左下UI画面の`Waypoint mode`をクリック

2. 上の`Navigation2 Goal`で経由したいWaypointを順番に指定

3. 右下UI画面の`Start Navigation`をクリックして実行


次は中継地点で止まるようにパラメータを変更
turtlebot3/turtlebot3_navigation2/param以下にある設定ファイルを編集
burgerを使っている場合`burger.yaml`に以下を追記

```xml:burger.yaml
waypoint_follower:
  ros__parameters:
    loop_rate: 20
    stop_on_failure: false
    waypoint_task_executor_plugin: "wait_at_waypoint"
      wait_at_waypoint:
        plugin: "nav2_waypoint_follower::WaitAtWaypoint"
        enabled: True
        waypoint_pause_duration: 1000
```

`waypoint_pause_duration`でロボットが停止できる時間を指定（単位はミリ秒）




こちらの動画でもWayPoint modeで動かす手順が紹介されています。

[Navigation2 Waypoint Follower Tutorial (ROS World 2020)](https://www.youtube.com/watch?v=F2h7ZuJW8y0)


# 参考
https://navigation.ros.org/configuration/packages/configuring-waypoint-follower.html

https://navigation.ros.org/configuration/packages/nav2_waypoint_follower-plugins/wait_at_waypoint.html
Awk Online Editor もあるんですね

# 備忘録
awk なんて、何年振りだろうと思ったんですが、探せば普通に Web Editor があったのでいつかの為に備忘録

# Editor イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/26e46b9a-c1d9-c2ee-ee02-bd56b7b396ce.png)

いつか・・・使うこともあるかなぁ :thinking: 

https://awk.js.org/
OneNoteのフォントを一括で変更する

# OneNoteのフォントを一括で変更します。
いちいちページごとに変更するの面倒なんで一括で出来る方法を探した。この記事はその備忘録であります。

この方法で一括置換するのはセクションの中のページ全てです。ブック対象ではありません。

## OneNote 2016をインストールする
1. [OneNote のダウンロード](https://www.onenote.com/Download?omkt=ja-JP)からOneNote2016をダウンロードします。下記OneStaticマクロを使うためです。
2. インストールします。

## Onetasticをインストールします
1. [Onetastic for OneNote](https://getonetastic.com/)からダウンロードします。
1. インストールします。

## インポートするマクロの準備
下記コードをxmlファイルとして保存します。文字コードは **`UTF-16LE`** です。
フォント・フォントサイズは自由に変更してください。ここではOneNoteデフォルトのフォントを指定しています。

:::note info
下記XMLは既存のマクロをエクスポートし、修正しました。修正点はTitleの変更ループを最後に置いたことです。私の環境では、これをしないとTitleのフォントが変更されませんでした。
ちなみにOneStatic上のエディターでは有料バージョンでないと編集機能に制限があるため、エクスポートしてXMLを編集するのが最も効率が良いです。
:::

```xml
<?xml version="1.0" encoding="utf-16"?>
<Macro id="M45D16A39F85D4F94AC768DE301C7853C" name="All Section Font 游ゴシック - Titles 游ゴシック 20, Texts 游ゴシック 14" category="Font" description="All Section Font 游ゴシック - Titles 游ゴシック 20, Texts 游ゴシック 14&#xD;&#xA;修正" version="27">
  <Metadata lastModifiedDate="2021-09-02T12:47:44.000Z" />
  <Comment text="This macro is based on another macro named 'All Section Font HelveticaNeueLT Com 65 Md'" />
  <ForEach var="ParagraphObject_3">
    <Array>QueryObjects("Paragraph", GetCurrentSection())</Array>
    <Expression>$ParagraphObject_3.fontName = "游ゴシック"</Expression>
    <Expression>$ParagraphObject_3.fontSize = 14</Expression>
  </ForEach>
  <ForEach var="ParagraphObject_4">
    <Array>QueryObjects("Paragraph", GetCurrentSection())</Array>
    <If>
      <Condition>!GetAncestorOfType($ParagraphObject_4, "Outline", $AncestorOfType_Outline_5)</Condition>
      <Continue>1</Continue>
    </If>
    <Expression>$ParagraphObject_4.fontName = "游ゴシック"</Expression>
    <Expression>$ParagraphObject_4.fontSize = 14</Expression>
  </ForEach>
  <ForEach var="ParagraphObject_6">
    <Array>QueryObjects("Paragraph", GetCurrentSection())</Array>
    <If>
      <Condition>!GetAncestorOfType($ParagraphObject_6, "Cell", $AncestorOfType_Cell_7)</Condition>
      <Continue>1</Continue>
    </If>
    <Expression>$ParagraphObject_6.fontName = "游ゴシック"</Expression>
    <Expression>$ParagraphObject_6.fontSize = 14</Expression>
  </ForEach>
  <ForEach var="ParagraphObject_1">
    <Array>QueryObjects("Paragraph", GetCurrentSection())</Array>
    <If>
      <Condition>!GetAncestorOfType($ParagraphObject_1, "Title", $AncestorOfType_Title_2)</Condition>
      <Continue>1</Continue>
    </If>
    <Expression>$ParagraphObject_1.fontName = "游ゴシック"</Expression>
    <Expression>$ParagraphObject_1.fontSize = 20</Expression>
  </ForEach>
</Macro> 
```

## 一括変換のマクロを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/56904/719395ef-206f-770c-ceef-305daa334503.png)
1. 「Macros」リボンから「New Macro」をクリックして新規マクロ作成画面を開きます。
2. 「File」メニューの「Import」から準備しておいたマクロをインポートします。
3.　「Macros」メニューから実行します。

適当なセクションを作り、実験してくださいね！　失敗すると大変なんで…。

## OneNoteの今後
[Windows向け「OneNote」アプリは、Win32版に一本化 ～今後12カ月かけて強化へ - 窓の杜](https://forest.watch.impress.co.jp/docs/news/1342874.html)
このニュースを見ると今後もOneNoteのアップデートはあるようだ。
OneNote派は期待して待とう。
Setオブジェクトについて（Javascript）

# 初めに
今回はPaizaのスキルチェックで問題を解いていく中で学んだオブジェクトを備忘録としてまとめた記事です。

# Setオブジェクトとは
Set オブジェクトは値のコレクションです。挿入順に要素を反復することができます。Set に重複する値は格納出来ません。Set 内の値はコレクション内で一意となります。

※MDN記事を引用
参考記事：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

# Paizaスキルチェックを解いていく中で学んだ使い方
・配列の要素が同じデータで重複していた際に、重複分を取り除いてくれる

```javascript
let array = [1,2,3,3,3,4,5,5,6]

let setArray = new Set(array)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6 }
```

・new Set()で求めた値の要素数の求め方（length❌ → size⭕️）

```javascript
console.log(setArray.size)
// 6
```

・setArrayに要素を追記したい場合

```javascript
setArray.add(7)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6, 7 }

/*以下は5を代入しているが既に同じデータが存在しているため、内容に変更なし*/
setArray.add(5)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6, 7 }
```

・setArrayの要素を削除したい場合

```javascript
setArray.delete(3)
console.log(setArray)

// { 1, 2, 4, 5, 6, 7 }
```

# Setオブヘクトの中身を配列に変換
上の記事では中身のデータをそのまま取り出して使用することができない（可能だったらごめんなさい🙇‍♂️）ので、配列型に直してあげる

```javascript
let array = [1,2,3,3,3,4,5,5,6]

let data = [...new Set(array)]
console.log(data)

// [ 1, 2, 3, 4, 5, 6 ]
```

・以下のような書き方でもOK

```javascript
let array = [1,2,3,3,3,4,5,5,6]
let setArray = new Set(array)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6 }

let newArray = Array.from(setArray)
console.log(newArray)

// [ 1, 2, 3, 4, 5, 6 ]

```

# 最後に
慣れてきたと思ってましたが、まだまだ知らないものがあるのだな〜と実感しました。
ただ、これらを知っておくことで、何かを制作する際に役立つかもしれないので、日々勉強しないとと思いました。