OmniAICreator/Qiita-1.07M huggingface dataset:
Reactの文法を整理してみた ~JSXとはなんぞや~


## はじめに

Reactで開発してきましたが、基礎の部分を一度見直そうと思いまとめました。

そもそもJSXとは、なんぞやというところにフォーカスしましたので皆さんの参考になれば幸いです:bow:


## JSXとは
JSXとは、簡単にまとめるJavaScript内でHTML要素をHTMLっぽく書くための公文です。

JSXを使用するメリットは、ずばり__可読性があるからです__。


以下に、JSXを使用した場合と使用しなかった場合などの書き方をまとめてみました。



## JSX使用しなかった場合
通常のJavaScriptでHTMLを書いてみる以下の様になります。


```javascript
const fuga = "<h1>Holle</h1>"
const fuga2 = "<h2>World</h2>"
const fuga3 = "holle world"


document.getElementByID('hoge1').innerHTML = fuga
document.getElementByID('hoge2').innerHTML = fuga2
document.getElementByID('hoge3').innerText = fuga3

```
この程度の量でしたら、問題ないかもしれませんが、もっと記述量が増えるとちょっと読みずらそうですね。


## JSXで記述するとどうなるか

先ほど記述をJSXを用いて書いてみると、以下の様になります。

```React

return(
 <React.fragmnet>
  <div id="hoge">
    <h1>Holle</h1>
  </div> 

  <div id="hoge2">
    <h2>World</h2>
  </div> 

  <p id="hoge3"> holle world </p> 
 </React.fragmnet>
);

```
恐らく、JSXを使用した場合の方がHTMLっぽくて何を書いているのがパッとわかりやすいかと思います。


## JSXはJavaScriptの拡張言語だが、JavaScriptではない

ここから、JSXを深堀って行きます。


まず、JSXの公文をブラウザは読み込めない。
なぜなら、 JSX　＝　JavaScriptではないからです。

本来であれば、JavaScriptをブラウザがファイルを読み込んで実行するが、JSXのファイルをそのまま読み込ませようとするとエラーが出ます。


ブラウザがJSXを読み込める様にするためには[トランスパイラ](https://qiita.com/micropig3402/items/064394428791144f5488)します。

EX)イメージは
JSX➡︎JavaScript

有名な、トランスパイラがBabel、CoffeeScript,など、、、


## もう少し深掘り
もし、ReactでJSXを使わずにHTMLを書こうとすると、React.createElementメソッドを使う必要がある。

```React
 
React.createElement(
  "h1",
  null
  "Hello,Wolrd"
);

//そもそもはこの書き方が、公文通り
```

この様に書いていれば、ブラウザはJavaScriptとして読み込んでくれます。

しかし、HTMLっぽくを書いていないので直感的にわかりにくいですね。

本来はこの様な書き方になっているのでトランスパイルで出力したJavaScriptのデータの中身をみてみると、上記の様に出力されている。

[参考](https://ja.reactjs.org/docs/react-api.html#createelement)

つまり、JSXを文法通りに書くと公文を上記の様に変換してくれて正しく読み込んでくれるわけです。


## JSXの文法

まず、JSXを使用するには[Reactのパッケージのインストールが必須](https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5)です。


### 文法①

```React
//.jsxファイル内に先頭で宣言
import React from "react"
```

### 文法②

```React
//コンポーネント内にHTMLを書く
const App = () => {
 return(
  <div id="hoge" className="fuga">
   <h1>Hello,Wolrd</h1>
  </div>
 );
};
```


### 文法③

```react

//変数、関数を埋め込みたい場合
//{}に埋め込む事で表示できる

const fun = "<h1>Hello World</h1>"
const App = () => {
 return(
  <div id="hoge" className="fuga">
   {fun}
  </div>
 );
};
```
{}内のものがJavaScriptになるイメージ。


### 文法④
ここら辺は、ちゃんと認識していなかった点。
変数名などは、基本[キャメルケース](https://designsupply-web.com/media/developmentlab/4052/)で書く。

### 文法　⑤
要素は、必ず閉じる。
普通のHTMLでは、あまり使わないから忘れがちになるやつですね。

```React
<input type="text" id="huga" />

// />の様に書く事
```


#終わりに

Reactを書いてく中で、なんとなく理解している部分が多かったので調べてまとめてみました。

調べてみると、Reactって使いやすくて便利なんだな思いました！！


他にも記事を書いていこうと思いますので、参考になれば幸いです。

間違っている点がありましたら遠慮なくコメントください:bow:
質問力チートシート


## 質問テンプレート

### 質問テンプレートその1
1. 聞きたいことの一行まとめ
2. 起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット）
3. ソースコード（関連するソースコード/全ソースコード）
4. 問題解決するために試したこと（コードもあれば追記）
5. 問題について自分なりに考えたこと（検索結果/自分なりの原因予想/切り分けた内容）

### 質問テンプレートの例
1. 聞きたいことの一行まとめ
・〜〜機能を実装しているのですが、〜〜の箇所で問題があるので、教えて頂けないでしょうか？

2. 起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット）(うまくいかない具体的根拠)
・XXX を想定したテストが通らない
・出力結果が想定していた内容ではない
・エラー XXX が発生して実行できない
・エラーを解決して〜〜できるようにしたいです。

3. ソースコード（関連するソースコード/全ソースコード）
・下記のエラーメッセージから〜〜ファイルの〜〜行目の〜〜箇所が原因ではないかと思っています。
・ソースコードを貼り付けたり、GitHubのURLの共有をする

4. 問題解決するために試したこと（コードもあれば追記）
・デバッグをした時に変数がnullだったので、〜〜なのではないかと考えた。故に〜〜したのですが、〜〜でした。

5. 問題について自分なりに考えたこと（検索結果/自分なりの原因予想/切り分けた内容）
・他の箇所では〜〜なのに、〜〜がうまくいかないのはおかしいのではないかと考えています。
・〜〜にはこう書いてあるのに〜〜だとうまくいかないのでなぜ〜〜では動かないのか理解できませんでした。
・「○○について調べた結果、△△ということが分かりました。しかし××が分かりません」という形で「わかったこと」と「わからないこと」の両方を説明する質問をする。それにより、質問された人は質問者の理解度を把握できるため、どのあたりから説明を始めればいいかを決められます。

### 質問テンプレートその2
①背景（どういった話か）
②現状（どういう状態）
③やりたいこと（やってほしいこと）
④調べたこと（どこまで試したか）

### 質問テンプレートの例

①トップページ改修の案件をやっているのですが、
②バナー画像のスライドが動かず、コンソールに○○エラーが出ている状態です。
③エラーを解決してスライドを動くようにしたいです。
④ちなみに、○○エラーについて調べ○○を試してみたのですがエラーは出たままです。他に方法をご存知ないでしょうか？

### 質問テンプレートその3
issueのタイトルとURL
質問なのか相談なのか確認なのか提案なのかを最初に言う(フレーミング)
質問したい箇所の概要
問題点(理想と現実)
質問、相談、確認、提案の本題を言う。
スクショやコードのURLを貼付するとよい。

### 質問テンプレートの例
>LUO: テンプレートの改善
https://github.com/zizynonno/luo/issues/220
相談です！
現在トップページのテンプレートの改善を行なっています。
バナーのスライドが動くのがゴールなのですが、現在バナー画像のスライドが動かず、コンソールに○○エラーが出ている状態です。
そこで、
> - 1.AAAAAの方法
> - 2.BBBBBの方法
> - 3.CCCCCの方法
>
> のいずれかで対応したいと思っているのですが、どれで進めた方がいいかを相談したいです！
>
> ソースコード
> https://github.com/zizynonno/luo/blob/master/app/controllers/homes_controller.rb#L327-L331
> 
> 添付されたスクショ



## 原因の切り分け出来ず、お先真っ暗な時
「うまくいきません。どうすればよいですか？」といった情報量のない相談をしたい衝動に駆られた場合、次のアクションを自身で決められないのが本来の主旨である。故に「XXXが発生していますが、次に取るべきアクションが決められません。切り分けるためのヒントを教えてもらえますか？」とか言うと、手伝ってもらえる可能性が高い。

## 相手への気遣いで業務を円滑に進める
上司やチームメンバーは質問に答える以前にあなたと同じように自身の業務がある。仕事は迷惑の掛け合いで成り立っていることや、質問をしないことで業務が遅れることは更に迷惑がかかることから、質問はするべきだと考えているが、テンプレートで読みやすくしたり感謝の気持ちを伝えたりと相手への気遣いを忘れず謙虚に質問すれば、少なくとも嫌がられることはない。また、最後まで納得するまで、聞き続けるのはあまりいいことではない。
### 質問前
まずは、質問する際に「５分だけ、お時間よろしいでしょうか？」と許可を取る

### 質問後
#### 時間を大幅に過ぎた時は一旦持ち帰る
「お時間を取りすぎてしまったようなので、伺った話をもとに、もう少し調べてみようと思います。」
「なんとなく、判ってきました。あとは自分でやってみようと思います。」
「混乱してきたので、整理してきてもよろしいでしょうか」

#### 質問の終わりにお礼を言う
「お時間頂きありがとうございます！」

#### 質問でHowtoを提案されたが、別の方法でやる
「うまくいかなかったのでこの方法で行きます。」など報告する



## エンジニアが嫌う質問

### ①抽象的で情報量のない言葉
主に「わかりません。うまくいきません」だけの質問を指す。

質問する側は問題解決をしたい。聞く側はなるべく問題解決の協力をしてあげたい。しかし「わかりません。うまくいきません」だけだと具体的でないので解決ができない。

→テンプレートに沿う

→「原因の切り分け出来ず、お先真っ暗な時」を参照

### ②長く結論が見えてこないもの
聞く側は先ず何が問題・課題なのかが一番の感心ごとだ。チームメンバーは基より特に上司は仕事に追われ時間がないことが多いので、だらだらと長く結論が見えてこない文章や提案を一番嫌う。長ったらしく語って、結局何が言いたいか伝わらないパターンが最悪。

→テンプレートに沿う

### ③1ミリも自分で考えてきました感が見えないもの
主に「丸投げにしか聞こえないもの、調べずに聞きに来てると勘違いされているもの」を指す。

質問をすると「ググれ」と言われた経験があると思うが、これは、相手が調べずに聞きに来てると考えているため。対策としては「調べたけどわからないので教えてほしい」と相手に伝わればいい。
具体的には「こういうことをする上で自分はこういうやり方を考えているのですが、よりより方法はありますか？」や「自分はこう考えている、でもより良い方法もあるのでは？」など、自分でも様々なケースを検討していることや、また解決方法をより洗練させるための質問と相手に伝わると印象が変わり、無碍に扱われるケースは減ってくる。

→テンプレートに沿う

### ④以前に聞いた質問と同じようなものと思ってしまう内容のもの

→人間は忘れる生き物なので多少大目に見てほしい気持ちはありつつも、一度した失敗はなるべく繰り返さないように逆引きチートシートを作成し、そこに記載をして対策を取る

## 参考文献

https://tokyofreelance.jp/question/
EXPLAINを使ってクエリをチューニングする

パフォーマンス改善のために、EXPLAINを使って、インデックスの貼り方を調査する時のメモ。
Railsを使っているので、その前提で書いている。

## EXPLAINの手順

まずは Rails のログを見て、発行されているクエリを確認する。

```sql
Hoge Exists (0.7ms)  SELECT  1 AS one FROM `hoges` WHERE `hoge`...
```

続いて、MySQLに接続する。データベースを選択したら、上記のクエリに EXPLAIN をつけて実行。

```
mysql> EXPLAIN SELECT  1 AS one FROM `hoges` WHERE `hoge`...;
+----+-------------+-------------+------+-----------------------------------------------------------------------------------------------+---------------------------+---------+-------+------+------------------------------------+
| id | select_type | table       | type | possible_key         | key                 | key_len | ref   | rows | Extra                              |
+----+-------------+-------------+------+-----------------------------------------------------------------------------------------------+---------------------------+---------+-------+------+------------------------------------+
|  1 | SIMPLE      | hoges       | ref  | index_hoges_on_fuga  | index_hoges_on_fuga | 1023    | const |    1 | Using index condition; Using where |
+----+-------------+-------------+------+-----------------------------------------------------------------------------------------------+---------------------------+---------+-------+------+------------------------------------+
1 row in set (0.00 sec)
```

このようにして、クエリの実行計画を確認していき、より良い結果になる貼り方を選ぶ。
複数の候補があれば、インデックスを貼らなかった場合、貼った場合（案1）、貼った場合（案2）と検証していけば良い。

## EXPLAINの見方

特に確認しておきたいのは、key、key_len、rows、Extraあたり。

### key

possible_key（候補として挙げられたkey）の中から選ばれたkey。

### key_len

キーの長さ。短い方が高速になる。

### rows

おおよその行数の見積もり。

### Extra

Using index となっていれば、クエリがインデックスを用いて解決できたことを示しており、インデックスによる高速化を図りたい場合は目安になる。
ちなみに、上記の表では Using index condition となっているが、この場合はクエリがインデックスの値を一部利用できることを示している。
FPGAを使ってMacPlusを動かすぞ

#目的
　ちょっと前に、CYC1000というボードでDOSを動作させた。
　DOSは8086というインテルの16ビットCPUで動いている。(実際は80186だけど)
　当然、インテルの16ビットをやったら、モトローラの68000を忘れちゃいかんでしょう。
　と言う事で、出来るかどうかを先例調査した結果、
　◆◆◆　よし、ＦＰＧＡでＭａｃＰｌｕｓを動かそう　◆◆◆
　今は無きモトローラ派なんですよ。実は。

#経緯
　MacPlusのFPGA化の先例は、下記が有る。
　　１．[Plus Too Mac Replica](https://www.bigmessowires.com/plus-too/)
　　２．[MacPlus_MiSTer](https://github.com/MiSTer-devel/MacPlus_MiSTer)
　但し、MiSTer版は[Plus Too Mac Replica]をMiSTerへのポーティング。
　改善されているようなので、MiSTer版を参考にする。

　MiSTer版を使うに当たっての技術的課題として、当たり前だが入出力は全てMiSTerが仕切っている。
　これを自前で何とかする必要が有る。
　そこで、MiSTerで動作するMacPlusにSignaTapを接続、入出力信号を調査した。
　とりあえずＦＤ／ＨＤの入出力は大体判ったので、MiSTerの他サブシステムのポートも可能かな。

　もう一つの問題は、MacPlusのビデオ信号出力が、今様で無いこと。
　之については、信号タイミングを調整し強引に取り合えず表示可能なレベルに落とし込んだつもり。
　但し、ＶＧＡ規格には合致していないので表示できないディスプレィも有るかも知れないが、ご了承のほど。

　キーボードとマウスもMiSTerから提供されているが、変換が判り難かったので、直接接続。
　キーボードは特殊文字には対応してないし、変なリピートが入る場合も有り、今一かな。

#ハード
　CYC1000ボードに、ＳＤ，ＶＧＡ，ＰＳ２キーボード，ＰＳ２マウスポートが繋がっているだけ。
　ブレッドボードで配線する場合は、[プリント基板の回路図](https://github.com/hi631/FPGA-MacPlus/tree/master/eagle-MacPlus(cyc1000))か、MacPlus.qsfを見てくださいね。
　なお、ＰＳ２ポートは、キーボードとマウスの接続先は決まっているからね。
　CYC1000をプリント基板に乗せた状態の上面と背面。(VGAとUSBのシェルが一部接触している)
![Image1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/c9db5e6d-d211-2d63-6a30-a20c14197fae.jpeg)

#ソフト
　というよりは、verilogで書かれた回路の事ですが。
　　[ＭａｃＰｌｕｓ](https://github.com/hi631/FPGA-MacPlus/tree/master/MacPlus(cyc1000))

#イメージ
　SDに格納する、MacPlusのOS等のプログラムの事です。
　[mac_HD.zip](https://github.com/hi631/FPGA-MacPlus/blob/master/MacPlus_image/mac_HD.zip)を解凍するとmac_HD.imgが出来るので、ＳＤに書き込む。
　mac_HD.imgは下記の構成にしている。
　　000000 FD1(Util   800KB)
　　100000 FD0(System 800KB)
　　1E0000 BOOT(128KB)
　　200000 HD (20MB Non Format)
　再作成する場合は、empty_hdd.zipを解凍してから、marge_mac.batを実行する。
　FD0とFD1が逆転しているが、フロッピー(800KB)をSDに上書きするだけで更新できる構成です。
　FDはMiSTerの仕様を引き継いでいるので、書込みはできない。
　HDDは更新可能だが、データの取り出しは出来ない。
　同じOSで動かしても、なぜかEMUシステムとはフォーマットが異なり、データ交換できない。(なぜだ)

#動作
　イメージを書込んだＳＤを差し込み、電源を入れると起動する。
　最初の起動には多少時間がかかる。(RAMチェックでもしているのかな)
　格子模様(縦横1010のパターン)が出れば、取り合えずSDからのBOOTは成功している。
　　※白一色の場合は、SDの読み込みを失敗している可能性が高い。
　　　これも出ない場合は、VGAの信号出力を要チェック。
　次にFDマークが出て、Macの顔が出て、Welcomeの順序で表示される。
![Image3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/3b20a939-7211-3095-e66e-f772ff556341.jpeg)
　mac_HD.imgはディスクの初期化をしていないので、初期化の画面が出る。
　そこで、キーボードとマウスを繋いでディスクの初期化をすれば使えるようになる。
　SDのFD1の位置にユーティリティ等を上書きすれば、画面に現れ使用可になる。
![Image6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159764/4829151f-abfb-25b8-fe97-441fd29ce695.jpeg)

---
　使用したCPUデータは、68020迄カバーしているようだ。
　であれば、HITACH2050もやってみたい所では有る。資料有ればだけど、無いな。
　イメージに使用したOS等は、MiSTer添付の物をそのまま流用している。
　なお、もし追試する奇特な方がおられた場合、上記記載内容は無保証であり、各自の責任においてご利用願います。
typescript コンストラクタ

typescriptでは、コンストラクタの宣言の仕方をシンプルに書くことができる仕組みが備わっています。
constructor()の引数にpublic 変数名:型を宣言することで、クラスのメンバとして使うことができます。

```typescript:冗長なコンストラクタの宣言方法
class Vihicle {
  color: string
  constructor(color: string) {
    this.color = color
  }
}

const vihicle = new Vihicle('red')
console.log(vihicle.color) // => red
```

```typescript:シンプルなコンストラクタの宣言方法
class Vihicle {
  constructor(public color: string) {}
}

const vihicle = new Vihicle('red')
console.log(vihicle.color) // => red
```

# クラスを継承する場合
```typescript
class Vihicle {
  constructor(public color: string) {}
}

class Car extends Vihicle {
  constructor(public year: number, color:string) {
    super(color)
  }
}

const car = new Car(1995, 'red')
console.log(car.year) // => 1995
console.log(car.color) // => red
```
コンストラクタが実装されたクラスを継承する場合は、サブクラスのコンストラクタでsuper()を実行する必要があります。
superメソッドに引数を指定することでスーパークラスのコンストラクタに値を渡すことができます。
【3D OD LiDAR編】BirdNet : BirdEyeViewで2D Object Detection

<h1>BirdNet: a 3D Object Detection Framework from LiDAR information</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/ebea1d6e-94bc-fb01-ddc1-af066056eecf.png)

Point CloudをBEV(Bird Eye Biew)の2Dとして見立てて、2D Object Detectecitonを行うモデル
1. BEV generation     =>3DのPoint Cloudを2Dとして見立てる為の処理
2. Feature Extraction =>VGG-16を使用して特徴量マップを抽出
3. 2D Object Detector =>Faster-RCNNを使用して2D(BEV)の位置とyawを推定する
4. Post Processing    =>2D Detectionの結果と地面からの一番高いpointから3DのBounding Boxを作る



<h1>新規性</h1>
<h2>Bird eye’s view generation</h2>


1. PointをVoxelに区切る
2. Voxelの特徴量を以下の3つの特徴とする

height   => cell内の一番高いポイント(地面から3mが以上は無視する)
intensity => intensityの平均値
density => cell内のpointの数 / cell内に取り得る最大のpoint数


<h1>結果</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/466ffe58-e857-121d-a97f-6bf680b6a6fe.png)
実際に使う情報ってBEVのx,yだから精度も速度もいいかも

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482094/e4ec3880-1eb5-d2b8-4412-e446b8a137ee.png)
FOV(Field Of View)110°で前方35mまでしか取ってないことに注意！

<h1>結論</h1>
・x,y,zの情報を失ったのにかなり精度良いな〜。Gridが0.05mで小さいからかな

<h1>参考文献</h1>
BirdNet: a 3D Object Detection Framework from LiDAR information
https://arxiv.org/pdf/1805.01195.pdf
HTTP/HTTPメソッド

【概要】
----------------------------------------
<b>1.HTTPとは</b>

<b>2.HTTPメソッドとは</b>





1.HTTPとは
----------------------------------------
<b>Webページを表示するのに、クライアント(ex:ユーザーがあるWebサイトでページを開く際)とサーバー間で行われるデータの送受信のプロトコル</b>です。<b>H</b>yper<b>T</b>ext<b>T</b>ransfer<b>P</b>rotocolの略です。

プロトコルとは、<b>あらかじめ決められた共通のルールや手順に沿って通信を行う共有ルールや手順</b>のことです。

<br>
2.HTTPメソッドとは
----------------------------------------
HTTPでやりとりする際に、クライアントとサーバーで具体的な要求内容を伝えるメソッドです。HTTPにおいて使うメソッドであり、HTTPリクエスト（クライアント➡︎サーバーに対してどのような処理をしてほしいかが記載されてい情報 )内に含まれています。一般的に使用するメソッドは4つあります。

<b>GET</b>:HTMLファイルや画像のデータを取得する際に使用し、Webサイトを開く時に使用することがおおいです。

<b>POST</b>:form等の入力したデータを送信する際に使用します。

<b>PUT</b>:データをアップロードする際に使用し、Webサーバーの情報を書き換えるので制限されていることもあります。

<b>DELETE</b>:データを削除します。情報を削除するので、PUTと同じく制限されていることが多いです。
コードの読み方

## 背景

大規模なプログラムや長年開発され複雑になったプログラムは、何の方針もなしに漫然と読んでいるとなかなか理解ができない。そのため、以下のようなやり方で読む。

## 読む前にすること

### 背景事情の理解

コードを読む前に、コードにまつわる事情をあらかじめ可能な限り把握しておく。

・そのプログラムによって実現していた・これから実現するビジネス上の背景事情など -> 他の人に聞く、インターネットで調べる（公開情報なら）
・機能要件、非機能要件 -> 要件定義書・画面仕様書・処理フロー図・DB定義書・API仕様書など
・コードを作ってきたチームのルール -> コーディング規約、コードのあるリポジトリのREADMEや、その他ルールを定めた文書
・開発ツール、デバッグツールのバージョン、実行環境など -> 同上
・設計パターン、アルゴリズム、データ構造、その他開発時の典型パターンなど　-> 同上
・ライブラリ、フレームワーク -> 同上、インターネット
・使っている言語の文法 -> 普段から勉強、インターネットなど

文書が残されていなければ、公開情報ならインターネットで調べれば良い。非公開情報なら、他の人に聞く。

大まかな流れや背景・必ずしも文書に残すような物ではない人的な事情などは元から聞いた方が早い場合も多い。

細かい部分は、逆に文書の方が把握しやすいだろう。

### コードを読む目的の明確化

ただ漫然と読んでいても端から忘れてしまうので、何のためにコードを読むのか決める。言い換えれば、読む必要のある部分とない部分を分ける。

具体例

- アプリの初回起動処理に改修を入れる予定なので、その部分を把握したい。
   - アプリの初回起動時に使われる部分のクラスを読む。そこから外れる部分は読まない。

- 改修を入れる部分のある変数に変更を加える予定である。しかし、その変数が他でどういう風に使われているのか分からないため、影響範囲を調査したい。
   - その変数がどう宣言され、どういったデータが入力され、どこで利用されているかを読む。 そこから外れる部分は読まない。


## 読む時にすること

### 読む -> 実際にプログラムを動かし確かめる -> アウトプット

まず単純にコードを読んでいき、コードの動きについて一定の仮説を立てる
例) 
- この機能は大体このクラスとあのクラスが関わっているはず
- このデータはここからあそこで受け渡されるはず
- このデータの中身はこういう感じのはず

その後、実際にプログラムを動かしてみて、デバッグツールなどを使用し、その仮説が実際にあっているか確かめる必要がある。違っていれば、原因を調査し、正しい知見が得られるまでやる。

その後、得られた知見を文章で要約してメモしたり、イラストに書いたり、フロー図にまとめたりなど何らかのアウトプットをする。アウトプットをすることで知識がまとまって深い意味で理解できるようなるのと、単純に頭の中にあるだけだとそのうち忘れるので後から参照できるようにする点で意義がある。

### 開発ツールの機能を利用

- 複数の部分のコードを、複数のタブを使い開いたままにする
- 特定の文字で検索する
- ある変数や関数、クラスなどの宣言部分にジャンプする
- ある変数や関数、クラスなどが呼ばれている箇所を検索する
- あるファイルについて、特定のコミットと別のコミットでの変化を左右に同時表示し違いをチェックする

上記のような機能を利用すると、読むのが効率的になる。というか上記の機能くらいは使わないとしんどいだろう。

### デバッガの機能を利用

- コードが特定の場所に差し掛かったら止める（ブレークポイント）
- エラー時のエラー理由や、ログを出力する
- 画面に置かれている部品の階層構造を表・3D図などで表示する（画面のあるソフトウェアの場合）
- メモリの消費状況を表示する
- コード中で使用されている変数などの値を動的に書き換える

実際にプログラムを動かす段になると、以上のような機能が役立つ。また、デバッグをするために必要なもの（環境設定やアカウントなど）があれば、知っておかないとデバッグができないのでこれも聞いておくことになる。

### アウトプットのツール

いわゆるマインドマップなどのツールを利用して書いてもいいし、単純にノートなどの紙に書いてもいい。
紙には、一覧性がある上どこでも自由に書き込みができるというメリットがあるので侮れない。ただ、嵩張り整理しづらかったりもするから、長期に残すのであれば何かデジタルに変換した方がいいかもしれない。

## 読む力を向上させるには

実際に読んでいき、立てた推測があっていたか間違っていたかを何度も繰り返す。業務でそのような作業をやっているならそれで良いし、機会がないならOSSなどを読んでみても良い。読んで数をこなすうちに、意識的にやらなければできなかった事が当たり前にできるようになっていく。

## 参考資料

[Traveloco! - プログラマーが教える、ソースコードを読むための４つの方法！](https://medium.com/traveloco-tech/おっさんプログラマーが教える-ソースコードを読むための４つの方法-2c6a2dd28bda)
[ドナちきブログ - 【すぐに使える】ソースコードの読み方【効率読む６つのコツ】](https://donachikiblog.com/how-to-read-source-code/)
[よの冒険記 - ソースコードの追い方、読み方の方法やコツをまとめておく](https://boukenki.info/sorce-code-oikata-yomikata-houhou-kotu-matome/)
[self-taught corders - How to quickly and effectively read other people’s code](https://selftaughtcoders.com/how-to-quickly-and-effectively-read-other-peoples-code/)
[Launch School - How to read code without ripping your hair out](https://medium.com/launch-school/how-to-read-source-code-without-ripping-your-hair-out-e066472bbe8d)
[IT Next - How To Read Code?](https://itnext.io/how-to-read-code-bf478c262932)
wordpressインストール～初期設定

#とりあえずインストールしなきゃ始まらない

①wordpress.orzをダウンロードする
（wordpress.comじゃない！！！）

②サーバーを契約する

* ＦＴＰＳサーバー、ＦＴＰ・WebDAVアカウント、ＦＴＰ・WebDAVパスワードをメモする。
* データベースを作成する
https://lolipop.jp/manual/blog/wordpress/

③FTPソフトをダウンロードする。

* サイトマネージャーで、上記3つを登録する。
* リモートサイトにローカルサイトのワードプレスソフトウェアのディレクトリを転送する。
* ファイルのパーミッションの数値を「705」に変更する。
参考：[これでパーミッションの事が理解できる！パーミッションについて分かりやすくまとめてみました。](https://wp-master.club/about_permission)
* ブラウザからアクセスする
* DB情報を入力する
* ユーザー情報を登録する
* ログインする
* ダッシュボード到着！！

#####ここまでの参考文献：
[初心者でも簡単にできる！WordPressをインストールする方法](https://techacademy.jp/magazine/1354)


# テーマを入れていい感じにしようぜ

* コクーンをダウンロードする（https://wp-cocoon.com/downloads/）
* ダッシュボードから外観→新規追加→テーマのアップロードから親テーマと子テーマのインストールを行う
*　 「Cocoon Child」を有効化する

#####ここまでの参考文献：
[Cocoonテーマをインストールする方法](https://wp-cocoon.com/theme-install/)

#そろそろちゃんと初期設定①
* サイトアドレスの確認　ダッシュボードから設定→サイトアドレス

### サイトアドレスに"/wp"はいらないのでサイトアドレスを変更したい？！

* ダッシュボードから設定→サイトアドレスから変更
* index.phpを編集したい

###んんｎ！！！！エディタが開かん、、悲しみ
[FileZillaでデフォルトのエディタを設定する方法](https://qiita.com/naoto_koyama/items/1e5f5ef2fce641105eea)

* index.phpを編集

変更前

```
require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
```
変更後

```
require( dirname( __FILE__ ) . ‘/★★/wp-blog-header.php’ );
```

#####ここまでの参考文献：
[【WordPress】サイトアドレスを変更する方法【URL最適化】](https://www.afi-b.com/beginner/archives/course/course_site/6756#:~:text=html%E3%81%AE%E5%89%8A%E9%99%A4-,%EF%BC%91%EF%BC%8E%E4%B8%80%E8%88%AC%E8%A8%AD%E5%AE%9A%E3%81%A7%E3%82%B5%E3%82%A4%E3%83%88%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B,%E5%88%97%E3%82%92%E9%99%A4%E5%8E%BB%E3%81%97%E3%81%BE%E3%81%97%E3%82%87%E3%81%86%E3%80%82)

#そろそろちゃんと初期設定②③

* パーマリンク設定

ダッシュボードから設定→パークリンク設定で「投稿名」に変更する

* SSLの設定(サーバーにロリポップを使っている場合)

①独自ドメインの設定（https://lolipop.jp/manual/user/chg-plan/）

[スタードメイン](https://www.star-domain.jp/)で登録して、取得した

②SSLの設定
[独自SSL（無料）のお申込み・設定方法](https://lolipop.jp/manual/user/ssl-free-order/)

③サイトアドレスの変更　ダッシュボードから設定→サイトアドレス「

「https://独自ドメイン」でサイトが表示されるか確認

*　プラグイン「really simple SSL」

#そろそろちゃんと初期設定④
* 不要なプラグインを削除する
* 日本語に関する問題を解消してくれる「WP Multibyte Patch」をインストール
* スパムコメントをはじく「Advanced noCaptcha & invisible captcha Settings
設定を保存しました。」をインストール＆設定する

参考：https://takuweb1.com/2019/12/19/security-robot/
追記：設定失敗してログインできなくなった、、
[WordPerssにログインできない！ ～ reCAPTCHAのトラブル](https://affilife.sainoa.com/archives/2469.html)


#そろそろちゃんと初期設定⑤

* メタ情報を削除する
* 本体・テーマ・プラグインの更新

####そろそろちゃんと初期設定参考サイト：
[【初心者向け】WordPressブログを書き始める前に済ませたい初期設定13個](https://www.xserver.ne.jp/blog/wordpress-initial-setting/)
コンビニエンスストア(経営戦略)ー午後

応用情報技術者平成28年秋期 午後2

ファイル：2016h28a_ap_pm_qs.pdf

参照：
https://www.ap-siken.com/kakomon/28_aki/pm02.html

メモを簡単に記載します。
詳細の分析は、上記リンクをご参照くだいますようよろしくお願いします。

１、本文中のaに入れる適切な字句を，15字以内で答えよ。
購買量を上げる（私の答え）
→
顧客単価を上げる（参考答え）

※顧客単価：
客単価とは、1回の購買によって消費者1人当たりが支払う総額のこと。 ECサイトにおいては、客単価を一定期間や一定の母数で計測、平均化した平均客単価が重要な指標として扱われます


＜＜マーケティング戦略策定プロセス＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/7bf45d18-a0a8-d9f8-2057-ac81e9f5bc9d.png)

２、〔現行のマーケティング戦略〕について，(1)～(3)に答えよ。
（１）、本文中の下線①の価格設定方式を，解答群の中から選び，記号で答えよ。

ア、コストプラスプライシング
イ、スキミングプライシング
ウ、ペネトレーションプライシング
エ、マークアッププライシング

・コストプラスプライシングは、
　商品の製造コストに一定の利幅を加えて製品価格とする手法です。

・スキミングプライシングは、　scheming price 　上澄み価格戦略
　早期の資金回収を目的として、価格を高く設定する手法です。

・ペネトレーションプライシングは、　penetration pricing
　市場シェアを獲得するために、利益度外視で価格設定をすることです。

　※ペネトレーション・プライシングとは、
　　市場シェアを獲得するために、価格設定をコスト以下、あるいはコストとほぼ同等に抑えることで、競合他社の追随を断念させるもの。

・マークアッププライシングは、markup pricing
　仕入れ原価に一定率の利益を上乗せして価格を決定する方法です。

　※マークアップ・プライシングとは、仕入原価に、一定のマークアップ（上乗せ）を行って価格を算出する方法。原価志向の価格設定手法の1つ。

＜＜①、②、③＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/ea235ca0-8af5-8298-fa02-4433717942fa.png)

（２）、本文中の下線②の問題を解決するために，商品の発注に関して店舗で行うべきことを，35字以内で述べよ。
地域行事の変更は即時に本部に報告するべき（私の答え）
→
地域行事の情報を入手し，商品ごとの発注量を修正する（参考答え）


（３）、本文中の下線③のX社にとってのメリットを，35字以内で述べよ。
X社のコンビニは顧客が愛用になる（私の答え）
→
目に留まる商品をついでに買っていくことによる売上の向上（参考答え）


３、〔最近の検討〕について，(1)，(2)に答えよ。
（１）、本文中の下線④の施策に最も関連が深いものを解答群の中から選び，記号で答えよ。
　ア、セグメンテーション
　イ、ターゲティング
　ウ、ポジショニング
　エ、マスカスタマイゼーション

・セグメンテーションは、
　市場をニーズや性質に応じて細分化する活動です。

・ターゲティングは、
　複数の候補の中から競争優位を得やすい自社が参入すべき市場セグメントを選定する活動です。

・ポジショニングは、
　市場に対して、競合と差別化した自社製品のイメージを植え付ける活動です。

・マスカスタマイゼーションは、
　ICT等を活用し、少量多品種でも効率よく製造することです。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/b5cae5aa-9ce9-3243-1ee6-fbe9614ece56.png)



（２）、本文中の下線⑤の必要な内部環境の分析内容を，本文中の状況から20字以内で答えよ。
解答群
一日の中で繁閑の波もある（私の答え）
→
店舗の既存の人員で宅配が可能か（参考の答え）


質問のは、内部環境の分析内容ですね、
もちろん、既存の人員で宅配が可能かですね。

＜＜④、⑤＞＞
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591618/f0f8f9c7-56e5-d088-5727-9160919e693e.png)
sqlcmd(Windows認証)で、SQLServerに接続する方法

# 前提
・Windows10 Pro
・SQL Server 2019



# 1. SQLCMD.exeが存在するパスを、システム環境変数に設定
私の環境だと、「C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\」。

# 2. コマンドプロンプトで、コマンド入力
```
sqlcmd -S <Servername> -E -d <dbname>

例）
sqlcmd -S MYPC\SQLEXPRESS -E -d TEST_DB
```

「-S」オプションは、接続するサーバ名。
Servernameは、SSMSログイン時のサーバー名を入力。囲い文字は不要。
SSMSのオブジェクトエクスプローラーのルートにも表示されている。

「-E」オプションは、Windows認証。

「-d」オプションは、接続するデータベース名。
省略可能。囲い文字は不要。

# 3. 接続完了
【Rails6】AWS+Unicorn+Nginxでエラー画面が表示される話

# 事象
AWS+Unicorn+Nginxで作成した環境にRailsアプリをデプロイ。
アクセスすると以下のエラーが表示される。
[![Image from Gyazo](https://i.gyazo.com/a447f5a99b490ecbaa6077b9c0f2b052.png)](https://gyazo.com/a447f5a99b490ecbaa6077b9c0f2b052)

# 原因
結論から言うと、デプロイしたRailsアプリにルーティングもコントローラーもビューも何もない状態だったのが原因でした。
※Rails newしただけのまっさらなアプリ

エラー文の「The page you were looking for doesn't exist.」のとおり、「探していたページが存在しません。」というそのまんまの理由でした。笑


# 解決策
ページがないと言われたので作成しました。
具体的には以下の２つ。
①コントローラーの作成
②ルーティングの追加

```ruby
#コントローラーの作成
$ rails g controller 〇〇
```
```ruby:config/routes.rb
Rails.application.routes.draw do
# 以下のルーティングを追加
  root to: '〇〇#index'
end
```

Unicornを再起動して再度アクセス

[![Image from Gyazo](https://i.gyazo.com/378bac4b5277aec1aa5a05866caf5961.png)](https://gyazo.com/378bac4b5277aec1aa5a05866caf5961)

無事に表示されました🎉
未経験からのAWS SAA合格記

#はじめに
AWS認定ソリューションアーキテクトアソシエイト（AWS SAA）に合格したので、記録として残します。
先に書いておきますが、5回目の受験でやっと合格しました。
「何回も落ちて、もうどうしたらいいか分からない。」といった方のお役に立てれば幸いです。

#動機
業界未経験でインフラ系のSES企業に転職後、最初の案件でたまたまAWSを触らせていただき、興味を持ったことがきっかけです。

チーム内にAWSの有識者がいなかったので、知識を身につけることでチームに貢献したいと考え、資格取得を目指しました。

#学習前のスキル
CCNAを保有していますが、業務経験は0でした。
AWSを触った経験もなかったです。

#結果
概要にも書きましたが、5回受験しています。
1000点満点で720点以上で合格です。

######1回目　2020年3月（SAA-C01）
700/1000

######2回目　2020年5月（SAA-C02）
642/1000

######3回目　2020年6月（SAA-C02）
660/1000

######4回目　2020年9月上旬（SAA-C02）
700/1000

######5回目　2020年9月下旬（SAA-C02）
798/1000

（3回目と4回目で受験に間が空いているのは、pythonやDB等に興味が移ってしまったためです。）

#“役に立った”学習方法。
最終的に下記3つで合格しました。

1. [これだけでOK！ AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座（SAA-C02試験対応版）](https://www.udemy.com/course/aws-associate/)
試験範囲はおおかたカバーできます。
書籍（[AWS認定資格試験テキスト　AWS認定 ソリューションアーキテクト-アソシエイト](https://www.amazon.co.jp/AWS%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88-AWS%E8%AA%8D%E5%AE%9A-%E3%82%BD%E3%83%AA%E3%83%A5%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%88-%E3%82%A2%E3%82%BD%E3%82%B7%E3%82%A8%E3%82%A4%E3%83%88-%E4%BD%90%E3%80%85%E6%9C%A8-%E6%8B%93%E9%83%8E-ebook/dp/B07R1H87Y1/ref=sr_1_6?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=AWS%E8%AA%8D%E5%AE%9A&qid=1601697834&sr=8-6) ）を購入し、
5回ほど読みましたが記憶に残らなかったので、ハンズオン形式で学べるこちらを購入しました。
頻繁に実施されるセールで安く購入できます。

2. [【SAA-C02版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/)
1の教材の追加問題集です。
こちらもセール時に買うと安いです。
とにかく数をこなしたかったので購入しました。

3. [サービス別資料 | AWS クラウドサービス活用資料集](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)
1と2だけでは合格できなかったので、数は膨大ですが、試験範囲に該当するスライドを片っ端から読み込みました。
試験合格だけを目指すなら読み込まないほうが良いとの意見も見かけましたが、私としては最初から読み込むべきだったと思います。

上記の他にも1回目の受験時には[AWS WEB問題集で学習しよう](https://aws.koiwaclub.com/aws-exam2/)のゴールドプランを購読していました。
私は1回目の受験以降は購読を止めてしまいましたが、こちらだけで合格している方もいるので参考まで。

#感想
ネット上の合格記等色々拝見し、そこまで難しい試験でもないのかなと、未経験のくせに高をくくってしまったのですが、合格までに非常に苦戦しました。
興味があちらこちらに移り、SAA取得だけに集中していなかったことも原因ではあると思います。
ここまで受からない人はなかなかいないかと思いますが、もし、どうすれば受かるのか分からないという方は、
[サービス別資料 | AWS クラウドサービス活用資料集](https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/)の試験範囲をひたすら読み込んでみてください。

#今後
資格は必要ないとの意見も多くありますが、勉強する動機になり、勉強した証としても形が残るので、しばらくは資格勉強を続けます。

今年中にOSS-DB silverとAWS認定システムオペレーションアドミニストレーターアソシエイト（AWS SOA）を取得し、AWS認定ソリューションアーキテクトプロフェッショナル（AWS SAP）取得に向けて学習を始める予定です。
【Ruby on Rails】refileで複数画像のアップロード

# 目標
![refile.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700999/f7fde0f0-da41-432c-eeba-9fd6b3004610.gif)

# 開発環境
ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

# 前提
※　▶◯◯　を選択すると、説明等が出てきますので、
　　よくわからない場合の参考にしていただければと思います。

投稿機能が実装できていることが前提です。
※参考　[ログインユーザーのみができる投稿機能](https://qiita.com/japwork/items/8dfb52121036791ac4fb)

# 流れ
1 gemの導入
2 テーブルの作成
3 modelを編集
4 controllerを編集
5 viewを編集

※補足　[【Ruby on Rails】refileでの投稿画像プレビュー機能](https://qiita.com/japwork/items/920df937084c145b47b9)

# gemの導入
```rb:Gemfile
gem 'refile', require: 'refile/rails', github: 'refile/refile'
gem 'refile-mini_magick'
```
```:ターミナル
$ bundle install
```

# テーブルの作成
今回はpostモデルとpost_imageモデルを作成していきます。
それぞれのカラムは下記の通りです。

```rb:db/schema.rb
 create_table "post_images", force: :cascade do |t|
    t.integer "post_id", null: false
    t.string "image_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["post_id"], name: "index_post_images_on_post_id"
  end

  create_table "posts", force: :cascade do |t|
    t.string "title", null: false
    t.string "content", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
```

# modelを編集
```rb:app/models.post.rb
class Post < ApplicationRecord
  has_many :post_images, dependent: :destroy
  accepts_attachments_for :post_images, attachment: :image
end
```

```rb:app/models.post_image.rb
class PostImage < ApplicationRecord
  belongs_to :post
  attachment :image
end
```
# controllerを編集
```rb:app/controllers/posts_controller.rb
class Admins::PostsController < ApplicationController

...

  private
  def post_params
    params.require(:post).permit(:title, :content, post_images_images: [])
  end
end
```
<details><summary>補足【post_images_images: []】</summary>
複数の画像idになるため、配列[]で渡します。</details>

# viewを編集（新規投稿）
<%= f.attachment_field :post_images_images, multiple: true %>
こちらのmultiple: trueは忘れず記述してください。
これが複数画像投稿には必要です。

```erb:app/views/posts/new.html.erb
<%= form_for(@post, url: posts_path) do |f| %>
  <table>
    <tbody>
      <tr>
        <td>画像</td>
        <td><%= f.attachment_field :post_images_images, multiple: true %></td>
      </tr>
      <tr>
        <td>タイトル</td>
        <td><%= f.text_field :title, autofocus: true %></td>
      </tr>
      <tr>
        <td>内容</td>
        <td><%= f.text_area :content %></td>
      </tr>
      <tr>
        <td></td>
        <td><%= f.submit "追加", class: "btn btn-primary" %></td>
      </tr>
    </tbody>
  </table>
<% end %>
```

# viewを編集（投稿詳細）
複数の画像のため、each文が必要になります。
もし1枚目だけを表示したい場合は
<% @post.post_images.first(1).each do |image| %>
とすればOKです。

```erb:app/views/posts/show.html.erb
<% if @post.post_images.present? %>
  <% @post.post_images.each do |image| %>
    <%= attachment_image_tag image, :image, class: "default_image" %>
  <% end %>
<% else %>
  画像はありません。
<% end %>
```
# 投稿方法

複数画像をアップロードする場合は、「ファイル選択」を選択後、
shift + クリック　または　ctrl + クリックで画像を選択し、
アップロードしてください。

# 参考
https://qiita.com/nekosuke_/items/501e7ba1b286c51c1be9
Rubyの基本

#【Rubyの基本】

Rubyの基本文法をまとめました。

##Rubyでのコメントの仕方

<strong>・1行コメント（ Javaは、// ）</strong>

　行に # （ハッシュマーク、または、シャープ）をつける。 
　# コメントしたい文字列


<strong>・複数行コメント（ Javaは、コメントの開始が、/* コメントの終了が、*/ ）</strong>

　=begin
　　コメントしたい文字列
　　コメントしたい文字列
　　コメントしたい文字
　=end

##if 条件分岐

```ruby
if # 条件1
 # 条件1が真の場合に実行する処理
elsif # 条件2
 # 条件2が真の場合に実行する処理
elsif # 条件3
 # 条件3が真の場合に実行する処理
else
 # それ以外の場合に実行する処理
end
```
※ elsifというつづりに注意（業務で使用している Javaは、else if ）

##unless　条件構文

```ruby
unless # 条件式
 # 条件式が偽の時に実行する処理
else
 # 条件式が偽でない場合、つまり真の時実行する処理
end
```
※elseが不要な場合は、省略可能

##case　条件構文

```ruby
case # 対象のオブジェクト、対象の式
when # 値1
 # 値1に一致する場合の処理
when # 値2
 # 値2に一致する場合の処理
when # 値3
 # 値3に一致する場合の処理
else
 # どの値とも一致しない場合の処理
end
```
※whenは任意の個数記述可能

複数の条件を指定する場合は、elsifより、caseで書いたほうがシンプル

##配列 （複数のデータをまとめて格納出来るオブジェクト）

```ruby
# ①空の配列を作る
 # []

# ②3つの要素が格納された配列を作成
 # [要素1,要素2,要素3]
```
配列内のデータは、順番に並んでいる。添字を指定して、データを取り出す

##ハッシュ （キーと値の組み合わせでデータを管理するオブジェクト）

```ruby
# ①空のハッシュを作成
 # {}

# ②キーと値の組み合わせを格納するハッシュ作成
 # {キー => 値}
```

##each　繰り返し処理

```ruby
[array or hash].each do |variable| # arrayは、配列のこと。hashは、ハッシュのこと。
 # 繰り返し実行する処理
end
```
※配列の要素を最初から最後まで順番に取り出しながら処理を実行


##for　繰り返し処理

```ruby
for variable in [array or hash] do # arrayは、配列のこと。hashは、ハッシュのこと。
 # 繰り返し実行する処理
end
```
※Rubyでは、eachで書ける時は forを使わずに eachを使用

##times　繰り返し処理

```ruby
n.times do # nは、繰り返し回数のこと。
 # 繰り返し実行する処理
end
```
※配列を使わずに、n回処理を繰り返したい場合に使用

##while　繰り返し処理

```ruby
while # 条件式
 # 繰り返し実行する処理
end
```
※条件式が真の間、処理を繰り返す

##upto, downto　繰り返し処理

```ruby
upto
 # nからmまで数値を1づつ増やしながら、何かしら処理を実行する場合に使う
downto
 # nからmまで数値を1づつ減らしながら、何かしらの処理を実行する場合に使う
```

##step　繰り返し処理

```ruby
kaishishiki.step(#上限値, 一度に増減する大きさ) # kaishishikiは、開始式のこと。
```
※nからmまで数値をxづつ増やしながら、何かしらの処理を実行する時に使う
例) 1,3,5,7,9

##loop　繰り返し処理

```ruby
loop do
 # 繰り返し実行する処理
end
```
※無限ループを作りたい時に利用

##
ffmpeg のバックグラウンド実行時のエラーを解決する

## 環境
os:ubuntu18.0.4(ec2:g4.xlarge)
Python:3.7.7
ffmpeg:4.3.1

## 結論
ffmpeg をバックグラウンドのプロセスで実行する時は ```-nostdin```オプションを追加する。

```Python
cmd = f'ffmpeg -nostdin -y -i "{mv_input_path}" -vcodec h264_nvenc "{mv_ffmpeg_path}"'
subprocess.call(cmd, shell=True)
```

## 背景
アップロードされた動画をcv2で処理したあと、```ffmpeg``` を用いて変換・圧縮し s3 に保存するというプログラムを作成しました。
プログラムをデーモン化したところ、```ffmpeg``` で ```Invalid data found when processing input``` エラーが発生しました。

```

Error while decoding stream #0:0: Invalid data found when processing input
[mpeg4 @ 0x55cec17c8780] header damaged
Error while decoding stream #0:0: Invalid data found when processing input
[mpeg4 @ 0x55cec17c5480] header damaged
...
...
...
[mpeg4 @ 0x55cec1855f80] header damaged
Error while decoding stream #0:0: Invalid data found when processing input
[mpeg4 @ 0x55cec1866e00] header damaged
Error while decoding stream #0:0: Invalid data found when processing input
    Last message repeated 3 times
frame=   83 fps=0.0 q=14.0 Lsize=    1800kB time=00:00:06.30 bitrate=2337.4kbits/s dup=76 drop=0 speed=18.7x
video:1799kB audio:0kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 0.064613%
Conversion failed!
```

変換は実行されているようですが、```dup=76```にあるように 76/83 frame が複製されています。動画を再生すると 1fps の動画になっているようです。検証した結果、デーモン化した場合にのみこのエラーが生じるようです。あれやこれや手を尽くした結果、ffmpeg を使うだけのDockerを作成して変換を行うことでいったんはなんとか解決できました。しかし、先に述べたように```-nostdin```オプションをつけるだけで解決できました。。。
同様の記事が全くなく、このオプションを見つけるためだけに物凄い時間を費やしたので共有いたします。

## _参考_
https://unix.stackexchange.com/questions/222847/how-to-stream-with-ffmpeg-in-a-separate-process
IBMCloud LogDNA ログ送信先のFW許可

##小ネタ
IBMCloud LogAnalysis with LogDNAでプラットフォームログの送信時に
IBMCloud Load Balancer(ICLB)のログを受け取る時の注意点を記載する。

* ICLBのパブリック通信がFWを経由する場合、<font color="red">443/tcpの許可が下記のドメインに対して必要</font>
* 東京リージョンでICLBを稼働およびLogDNAを東京リージョンでデプロイした場合の通信先
    * **logs.jp-tok.logging.cloud.ibm.com**
        * logs.jp-tok.logging.cloud.ibm.com -> 128.168.70.51
        * logs.jp-tok.logging.cloud.ibm.com -> 165.192.69.12
        * logs.jp-tok.logging.cloud.ibm.com -> 161.202.93.253

* ただし、ICLBをPublic側で利用していない場合は、下記になる。
    * **logs.private.jp-tok.logging.cloud.ibm.com**
        * (CNAME)logdna-tokyo-logs.jp-tok.serviceendpoint.cloud.ibm.com -> 166.9.40.3
        * (CNAME)logdna-tokyo-logs.jp-tok.serviceendpoint.cloud.ibm.com -> 166.9.42.4

参考:[IBMCloud資料：エンドポイント](https://cloud.ibm.com/docs/Log-Analysis-with-LogDNA?topic=Log-Analysis-with-LogDNA-endpoints&locale=ja#endpoints_ingestion)

* LogDNAで<font color=red>プラットフォーム・ログの構成を有効</font>にする

**プラットフォーム・ログの構成**を選択する。
![Observability_-_Logging.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703043/ad8d3ebe-3d58-2ebc-9a12-6bb9073252cd.png)


**作成したLogDNAを選択する**
![Observability_-_Logging.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703043/4467a800-ddae-578a-0180-b19412b4be95.png)

作成したLogDNAがプラットフォーム・ログの送信先になっている事を確認
![Observability_-_Logging.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703043/97a17ec8-91dc-e9f0-d0ef-b06480c7dcaf.png)
2020/10/3 昼アウトプット

#応用復習　ツイートを表示させる
- 投稿モデル作成
- rails g model tweet
- マイグレーションを編集→rails db:migrate実行→rails s
- コンソール起動→データ追加→シークエルで確認
- ルーティング
- resourcesメソッドとは７つのアクションへのルーティングを自動生成するメゾット
- onlyオプションとは指定したアクションのみのルーティングを作成
- ルート編集
- tweetsコントローラー作成→rails controller tweets
- indexアクションをコントローラーに定義
- @tweets = Tweet.allですべてのレコードをインスタンス変数に代入、ビューへ
- すぐ忘れるeachメソッドでビューを作成
ChromeOSの/etcを弄る

# 概要

- chromeosではデフォルトでは、/etc以下のファイルを編集することはできません
- linuxとしての設定を変えるには/etcのファイルを編集する必要があります
- 環境は cloudready 83.4.27(Home Build)です

# シェルの確保

- chromeos本体のLinuxのシェルが必要です
    - chromeos上のコンテナで動くLinuxのシェルとは別物です
- chromeブラウザ上で、`ctrl+alt+t`を入力します
- ブラウザ上で新たなタブが開いてcroshといるメンテナンス用のシェルの一種が立ち上がります
- croshはメンテナンス用のコマンドに限定されていますが `shell` コマンド入力すると通常のLinuxのシェルが立ち上がります
- さらに `sudo bash` とするとrootのシェルが立ち上がります
    - そのままsudoを使い続けてもよいです

# rootパーティション（/）の再マウント

- 以後、rootでの作業です
- デフォルトではrootパーティションのRWでの再マウントは禁止されています。
 
```
# mount -o remount,rw /
mount: cannot remount /dev/dm-0 read-write, is write-protected
```
- セキュリティ機構を無効化して再起動します。再度、有効化はできないので覚悟が必要です

```
# disable_verity
# shutdown -r now
```
- chromeosが再起動したらrootのシェルを用意してrootパーティションを再マウントします

```
# mount -o remount,rw /
```

# 編集例

```text
# vi /etc/avahi/avahi-daemon.conf
```

- before

```text
[server]
host-name-from-machine-id=yes
```

- after

```text
[server]
host-name=rivoli
host-name-from-machine-id=no
```

- これで他のPCからホスト名 rivoli.local でアクセスできるようになります

```text
$ ping rivoli.local
```

- 本当はこのやり方よりもちゃんとhostnameを設定した方がいいと思います（やり方が未調査）

# 参考URL

- [Disabling RootFS Verification](https://cloudreadykb.neverware.com/s/article/Disabling-RootFS-Verification)
- [Remounting as RW does not work](https://neverware.zendesk.com/hc/en-us/community/posts/360003146427-Remounting-as-RW-does-not-work)
- [Why doesn't CrOS have a hostname?](https://groups.google.com/a/chromium.org/g/chromium-os-dev/c/6mymAnhFssg?pli=1)
'init()' is deprecated: Use init(configuration:) instead and handle errors appropriately. 警告の治し方の話 ?

# Appleのサンプルコードの「Classifying Images with Vision and Core ML」で警告修正に手こずった話 ?

- Appleサイトの「[Classifying Images with Vision and Core ML](https://developer.apple.com/documentation/vision/classifying_images_with_vision_and_core_ml)」で「Download」をタップすると「ClassifyingImagesWithVisionAndCoreML」がダウンロードされます

目的 ?

> 気になる警告の修正

条件 ?

> Xcode 12.0.1

ダウンロードファイルを起動したら ? 以下の3つの警告が出ました ?

- Update to recommended Settings
- Conversion to Swift 5 is available
- 'init()' is deprecated: Use init(configuration:) instead and handle errors appropriately.

今回は以下の警告の話です ?

> 'init()' is deprecated: Use init(configuration:) instead and handle errors appropriately.

注意 ?

> それ以外の警告を修正すると? 数個のエラーが出ますよ? 警告が出ても'init()' is deprecated: Use init(configuration:) instead and handle errors appropriately. は修正できますけどね?

コードを表示します

```ImageClassificationViewController.swift

//修正前
            let model = try VNCoreMLModel(for: MobileNet().model)

// 修正後
            let config = MLModelConfiguration()
            let model = try VNCoreMLModel(for: MobileNet(configuration: config).model)

```

# 私の感想です

このサンプルは 私は2019年頃に取り組みました
先日XcodeのUpdate後に警告が気になって研究していました
また、このサンプルは残りの2つの警告を処理するとエラーが出ますが ? それは解決しています
現在では ? どの様にエラーを修正したか記憶にありません

- 警告に関してはAppleの「[Xcode 12 Release NotesのCore MLのDeprecations](https://developer.apple.com/documentation/xcode-release-notes/xcode-12-release-notes)」を参考にしましたが? 意味不明でしたので悪戦苦闘で解決しました
- あとは「'init()' is deprecated: Use init(configuration:) instead and handle errors appropriately.」を検索して参考にして悪戦苦闘で解決しました

ここまで
ISUCON10予選に参加して学んだこと

## ISUCON10参加しました
Isucon10に同僚の[ToshihitoKon](https://github.com/ToshihitoKon)と一緒に開運パワーインチームとして参加しました。
名前の由来は社内で一時期流行した内輪ネタですｗ

去年の新卒1年目では仕事が忙しすぎて参加出来なかったので、2年目で少し余裕出来たし今年は参加するぞ！ということで参戦してみました。
初のISUCON！

弊社は何度かISUCONで優勝したり出題しているレジェンドがいるんですが、できれば同じくらいのレベルのメンバーと組んで自分の立ち位置を知りたいなということで、チームメンバーとして同期のToshihitoKonを誘いました。
一緒に仕事する機会も結構あったのでそういう意味でもコミュニケーション取りやすくて楽しかったですね。

ToshihitoKonはインフラが強かったのでインフラ方面をお願いし、僕はアプリケーションに専念する役割分担で進めました。
使用言語はGoです。

## 当日まで
ISUCON9の予選をMacのローカルのdockerで動かしてチューニングしてました。
http://isucon.net/archives/53805209.html

また過去高スコア出したブログとか見てみて、戦略を参考にさせていただきました。
https://to-hutohu.com/2019/09/09/isucon9-qual/#%E5%BD%93%E6%97%A5

その結果、`alp` `pt-query-digest` の使い方あまり慣れてないなというのと `Nginx` わかんないなと思ったので、ISUCON9予選を題材にアクセスログとったりスロークエリログの解析をしてみたりしていました。

後は定番の[カンペ作ったり](https://hackmd.io/RhfVwEVMRcSF0ewlCOzAwg)、gitリポジトリ事前に用意したりとかですね。

個人的にNginxの理解が足りなかったので、以下の書籍を一通り読ませていただきました。大変参考になった。
[nginx実践入門 WEB+DB PRESS plus](https://www.amazon.co.jp/dp/B07JHJF3NQ)
![nginx](https://m.media-amazon.com/images/I/41EiT3WL0PL.jpg)

Isucon9予選過去問では手元で10000点近く出せたので、これでいいかなということで当日へ。
前日ToshihitoKonの家に泊まってピザパーティで決起会をして、お祭りっぽい感じでワイワイできました笑

## 当日
ToshihitoKon がインフラの設定などスムーズに終わらせてくれたのでアプリのチューニングに専念できました。
DBの設定やら複数台構成はToshihitoKonに任せて、アプリのチューニングをすることに

- レギュレーションの熟読
- とりあえずbotをはじくためにNginx側で正規表現書くことに
  - Nginxの勉強した成果が早速出て個人的にはとてもうれしかった。
- その後DB構造やアプリケーションを読んで全体を把握
  - アプリケーションやDBがとてもシンプルでびっくりした。問題に集中できる仕組みになっていて競技が捗りました！
- ひたすらログとにらめっこしてindex貼ったり、遅いエンドポイントを特定。
    - どう考えてもイスと不動産の検索が遅い。
- とりあえずindex貼ってみた
- indexそのまま貼れないことが多かったので、アプリケーションの変更を試みるなど
- DB側でorder byしているのを自前でソートするように変更してみた

ここら辺で650くらいはスコア出たんですが、そこから伸び悩み・・・。
他チーム見てみても、クリティカルなボトルネックを解消しないとダメそうでした。

なぞって検索を高速化する or オンメモリキャッシュするの2択かなと思い、事前に勉強してたオンメモリキャッシュに挑戦してみましたが、バグをつぶし切れず、導入には至れませんでした・・・悔しい！

結果的に650点程度でフィニッシュでした。

## 参加してみて
### 講評を読んで
http://isucon.net/archives/55025156.html
講評見てみても、なぞって検索の高速化にチャレンジするのは大事だったなと思いました。

また、検索が複雑なところをオンメモリキャッシュにしてアプリ側で検索実装する戦略しか思いついてませんでしたが、普通に検索条件全てに対してindex貼ってしまうという手もあったんだなぁと。

index闇雲に張るのは良くないと思い込んでいましたが、一回試してみてから判断すべきでした。まさに推測するな計測せよ、ですね。

また降順と昇順でソートしていることによるindexが効かない問題は把握してたんですが、これを新しくカラム追加して対処するようにすればよいというのはとてもなるほど！となりました。

バルクインサートの高速化も気づいてたんですが、ログを見る感じそこまでアクセス来てなかったので放置してました。おそらくボトルネック解消すると次にそこが問題になっていくんだろうなと思います。

### 学び
普段仕事しているとアプリケーション寄りの仕事が多く、なかなか一からNginxの設定書いたりすることも無かったので、ISUCONに参加することでインフラの知識が数多く身に着いたのがとてもよかったように感じます！

また、今の仕事ではコードリーディングして既存の仕様を基に設計を考える時間の方が圧倒的に多く、**手を動かしてコードを書く能力が不足している**なと反省しました。

講評を読んでも、ボトルネックの特定はかなりうまくいってそうだったので、あとはそれを「どう解消するか」という実装力の不足を如実に感じるISUCONになりました。
普段の仕事だけでなくプライベートでもコードを書く機会を増やすぞ！というモチベーションにつながりました。

## 最後に
運営の皆さん楽しい問題をありがとうございました！！このレベルの作問や大会運営を行うみなさんのスキルセットと姿勢にとても感動しました。自分もいつかそうなれるように精進していきたいですね。
また一緒に参加してくれたToshihitoKonありがとう！来年リベンジしような！
Pyhtonのフルヘッヘンド勉強法・・機械学習初心者がPythonの勉強を始めた時の混乱要因

##蘭学事始めに出てくる逸話（フルヘッヘンド）

この逸話は実際には存在しないものと言われるけど・・・・。
プログラマーではない初心者が機械学習を行うためにPythonの勉強をいきなり始める時の状況が、杉田玄白らがオランダ語のターヘルアナトミアを和訳して解体新書を作った時と同じ状況になっていると思ってます。

その理由とpythonを勉強する時のフルヘッヘンド勉強法を書いてみます。

###フルヘッヘンドの逸話とは
wikipediaの蘭学事始めのところに出ています。そこを引用

「鼻とは顔の中でフルヘッヘンドするものなり」という文の「フルヘッヘンド」という単語の意味が分からず、用例を集め「庭を掃けば、塵芥集まりてフルヘッヘンドする」などから考えた結果、「うずたかい」という意味だと推測するにいたる経緯は、語学教育における「安易に辞書をひかず意味を推測する」という教育とあいまって教育に用いられた。[[1]](https://ja.wikipedia.org/wiki/%E8%98%AD%E5%AD%A6%E4%BA%8B%E5%A7%8B)

##初心者にとって、機械学習をやるためのPythonの勉強は何が問題になるのか？
問題はたくさんありますが、会社で初心者用のpythonの機械学習教育テキストを作りました。その時にいろいろなテキストやＨＰやオンライン講座を見て感じたことを書きます。

###1）意外とプログラムの流れをちゃんと説明しているものが少ない。
プログラムの流れは、本とか全部読めばわかるが、最初にこんな感じでなぜ示してくれない？？
ⅰ）必要なライブラリーを読み込む（`import`）
ⅱ）`pandas`にてデータ読み込む
ⅲ）`pandas`にて、特徴量と目的変数をわける
ⅳ）`train_test_spilit`で、学習用データとテストデータにわける。
ⅴ）`scikit-learn`の中のアルゴリズムを選んで、学習（`fit`）と予測（`predict`）する
ⅵ）精度を確認する
こういう流れの説明が一つあるだけで、ずいぶんわかりやすくなるのに、意外とこういうのがない。つまり、どこで何を使うかが、最初はよくわからない。
こうやってまとめると、必要最小限で覚えないといけないコマンドもわかる。

###２）本を買ってくると、既に`Python`のバージョンが変わっていて、うまく動かない。
だいたい今入れると、最新の`Python`を入れてしまう。これが、自分が参考にする本とバージョンが違って混乱する。`Pyhton2`と`Python3`の違いは論外としても、`Scikit-Learn`は、微妙に少しずつ改良されて変わっている。初心者は一つでも動かないと混乱してしまう。特に図書館で本を借りるのが要注意。図書館の本って意外と古い本がずっと残っています。それでpythonの本は高いけど無理して買った本を見てうまく動かないと、たいていの初心者はへこんでします。

###３）知っている人に聞くと、ネットに見れば良いよと言われ、それを見て真似するけど動かない
知っている人に聞くと、インターネットにいろいろ情報はあるので、それを見たらプログラムを作れるよ！と言われるけど、初心者はネットの情報を見てもプログラムができない。
実は、ここが一番の問題で、杉田玄白らと同じ状況に陥るのだと思う。
杉田玄白らが、ターヘルアナトミアを訳したときは、オランダ語の国語辞典（蘭蘭辞典）しかなかったということです。つまりわからないオランダ語の本を、オランダ語の辞典を使って訳そうとして苦労しました。ここの逸話がフルヘッヘンドです。

これを初心者のPythonの勉強に置き換えると、こういうことになります。

ネットの情報（Qiitaやブログ）は百科事典みたいなものなのです。
初心者のpythonの勉強は、実は英語の百科事典を参考に英文を読んでくださいと言われているようなものなのです。初心者に、この時必要なのは、まず最初に必要なのは、英和辞典なのです。

簡単にまとまっているpython辞書みたいなものが存在しないから、膨大な情報を前に戸惑ってしまい、なかなか進みません。またうまく動かない場合も、ネットの情報（百科事典）を読んでも、なかなか自分が知りたいところまでたどり着きません。

###４）オンライン講座などで勉強すると、ほぼ必要のない情報まで教えてくれるので、終わるまでに疲れてしまう。
たぶんプログラミングでは必要なのでしょうが、初心者はタプルって使わない。辞書すら、たまに見るくらい。`scikit-learn`以外は、リストとリストのスライスと、pandasの一部とmatplotlibの一部だけで良いのに、オンライン講座は延々いろいろなことを教えてくれるので、疲れてしまう。

###５）ネットの情報にはいろいろ書いてあって、どれが正しいかわからない。
百科事典や国語辞典は、どれを見ても基本は同じ内容ですが、ネットの情報はいろいろな情報があって、初心者はどれを参考すれば良いかわかりません。
anacondaを入れると良いよと言われて、anaconda入れた人が、他のページでインストールは`pip`で、と書いてあるだけで、わからない人はわかりません。

###６）pythonがわかれば機械学習がわかるという大いなる勘違いをしている。
ここの勘違いも大きい。つまりpythonと同時に機械学習の理屈も理解しないといけないということがわかっていない人が多い。
なぜ学習データとテストデータにわけるのか？がわからなければ、`train_test_split`でデータをわけることが理解できない。まぁ、これくらいは初歩の初歩なので、こんなことはないと思うが・・・。
でも標準化はちゃんとやろうとか、少し突っ込んでやり始めようと思うと、そもそも機械学習の理屈も勉強しないと、正しい計算はできない。

###７）初心者は、みんなはwindwosを使っていると思っている
初心者のPCはwindowsです。スマホは、iPhoneです。
世の中には、windowsしかないと思っているのに、ネットの記事や本では、linuxやmac前提で書いてる場合があります。これ、初心者にはわかりません。


##ワークフローソフト
いろいろ書いたけど、大きな会社では人工知能（機械学習）を検討しろと言われて、なんかpythonを勉強させられるけど、本当にpython使って機械学習やる必要あるのか？別に普通のワークフローソフトでいいじゃん！って、会社の中で冷静に指摘する人はいないのか？ワークフローソフトも無料なんだし。これが一番費用と人的コストかからずに始められるのに、、ね。。


[KNIME](https://knime-infocom.jp/)
[Orange](https://orange.biolab.si/)
[NNC](https://dl.sony.com/ja/app/)
これ以外にも多々あり！！

##さいごに
（１）では、まずは初心者がPythonで勉強するときにつまづくところを書いてみました。
次の勉強法（２）で、それでもpythonをやり始める人に向けて、私のフルヘッヘンド勉強法を書こうと思います。
Mysql2::Error: Table 'relationships' already exists

![スクリーンショット 2020-10-03 12.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729084/571a9c50-55b1-451f-180e-ca2e1382a245.png)

マイグレーションファイルを新規で作成し、rails db:migrateを行うと上記のエラーが出る。新規で作成したばかりのrelationshipsは既に存在しているためと怒られます。

以下の対応で解決しました。

![スクリーンショット 2020-10-03 13.03.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729084/3acb6391-8b77-3784-18e7-fe052ab63c0c.png)
①DBを削除



![スクリーンショット 2020-10-03 13.02.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/729084/ef780240-5e59-d004-2b26-28be1e4527fa.png)

②DBを再作成

③rails db:migrateをしたところ解決

※デプロイなどしている場合には既に登録した内容も全て消えてしまうため、注意してください。
ApolloのFetchPoliciesを理解する

## はじめに

以前、Apolloを使用して開発をしていた時に、クエリを投げた後もデータが更新されないことがありました。調べてみると、Apolloのキャッシュ機構の仕組みが原因であることがわかったので今回まとめてみたいと思います。

## キャッシュ機構

Apollo Clientは不必要な通信処理を無くすために、便利なキャッシュ機構を備えています。クエリ結果をブラウザのメモリ上に保存することで同じ通信処理をする際に再びサーバーからデータを取らずにメモリ上に保存されているデータをそのまま使用することができます。

## FetchPolicies

サーバーからデータを取ってくるかキャッシュのデータを使うかはFetchPoliciesの設定によって決めることができます。FetchPoliciesはクエリを投げる時に設定できます。

```
const { data } = useQuery({
  fetchPolicy: "network-only"
});
```

Fetch Policiesは以下の5つがあります。

- cache-first
- cache-and-network
- network-only
- no-cache
- cache-only

### cache-first

> デフォルトで設定されているもので、メモリ上のデータを優先的に使用するポリシー。
レスポンスが早く、ネットワーク通信を減らせるのが特徴。

1. クエリを投げた時に、キャッシュ上にデータがあるかを確認する。データがある場合は2と3をスキップ。
2. キャッシュ上にデータがない場合はサーバーからデータを取ってくる。
3. サーバーから取ってきたデータをメモリ上に保存する。
4. クエリの結果を返す。

### cache-and-network

> メモリ上のデータとサーバーのデータ両方を使用するポリシー。
レスポンスが早いのと、データの更新を頻繁に行うのが特徴。

1. クエリを投げた時に、キャッシュ上にデータがあるかを確認する。
2. キャッシュ上にデータがある場合は、キャッシュのデータを返す。
3. サーバーからデータを取ってくる。
4. サーバーから取ってきたデータをメモリ上に保存する。
5. クエリの結果を返す。

### network-only

> サーバーのデータのみ使用するポリシー。
常に最新のデータを扱うのが特徴。

1. クエリを投げた時に、キャッシュのデータを確認せずに、サーバーからデータを取ってくる。
2. サーバーから取ってきたデータをメモリ上に保存する。
3. クエリの結果を返す。

### no-cache

> キャッシュを使用しないポリシー。
取得したデータをキャッシュ上に保存しないのが特徴。

1. クエリを投げた時に、キャッシュのデータを確認せずに、サーバーからデータを取ってくる。
2. クエリの結果を返す。


### cache-only

> キャッシュのみ使用するポリシー。
オフラインでも問題なく動作するのが特徴。

1. クエリを投げた時に、キャッシュ上のデータを確認する。
2. データがあれば返し、なければエラーを発生させる。

## まとめ

クエリを投げた後もデータが変更されない場合は、FetchPoliciesを確認してみて下さい。
FetchPoliciesをしっかり理解して使いこなせれば、不必要なネットワーク通信を減らしたり、Apolloのデータフローが分かるようになります。


## 参考文献
- [Apollo Docs](https://www.apollographql.com/docs/react/data/queries/)
- [Understanding Apollo Fetch Policies](https://medium.com/@galen.corey/understanding-apollo-fetch-policies-705b5ad71980)
- [Apollo Client fetchPolicies, React, and Pre-Rendering](https://dev.to/hotgazpacho/apollo-client-fetchpolicies-react-and-pre-rendering-1i77)
Ubuntu 20.04 での Visual Studio Code のインストール (自動更新対応)

# Ubuntu 20.04 での Visual Studio Code のインストール (自動更新対応)

https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions の手順を shell script にしたものが以下です。
これにより、Visual studio code をインストールします。(確認済み)
もしVisual studio code に更新があれば apt update & apt upgrade で更新できる(はず)。(未確認)

```
#!/bin/sh

# https://code.visualstudio.com/docs/setup/linux
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64 signed-by=/etc/apt/trusted.gpg.d/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

sudo apt-get install apt-transport-https
sudo apt-get update
sudo apt-get install code # or code-insiders
```

https://gist.github.com/m-tmatma/e74b854d62512e8744f7b14ae907b127

参考
https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions
【gas】Google Apps Script入門


##【gas】Google Apps Script入門
Googleが提供しているプログラミング言語です
スプレッドシートやドライブのgoogleサービスを連携出来ます

##文字列出力
```javascript:hello.js
function my_msg() {  
  let msg;
  msg = 'Hello World';
  console.log(msg);
}
```
```:出力
Hello World
```
function myFunction() {}はgasの基本構文。
メッセージの略語であるmsgという名前を付け、
letで変数を宣言して意味を持たせた。

変数の箱の中にHello Worldという文字列を格納し、 
console.logで指定した値をログ出力させた。


##スプレッドシートを指定したフォルダに作成
```javascript:Spreadsheet.js
const FOLDER = '自分で指定したurlの後に続く文字列を指定してください';
//https://drive.google.com/drive/u/0/folders/の後に続く文字列のこと

function creatSS() {
//Spreadsheet.createメソッドで新規スプレッドシートをルートフォルダに作成する
 
  const id = SpreadsheetApp.create("新規").getId();
//新規スプレッドシートをFileオブジェクトとして取得
  const file = DriveApp.getFileById(id);
//移動先のフォルダをFolderオブジェクトとして取得
  const folder = DriveApp.getFolderById(FOLDER);
//ルートフォルダから新規スプレッドシートのFileオブジェクトを削除
 
  folder.addFile(file);
//移動先となるFolderオブジェクトにFileオブジェクトを追加
  DriveApp.getRootFolder().removeFile(file);
//ルートフォルダからFileオブジェクトを削除
 
}
```
```:出力
指定したドライブに、「 新規 」の名前のスプレッドシートが出来る
```




##環境構築
開発環境を整える必要はありません。[ Googleアカウント ](https://www.google.com/accounts/NewAccount?hl=ja)のみが必要になります。

##参考文献
[【Google Apps Script入門】GASでできることや活用方法まで紹介！]という記事

## 追記
URL先が正常に閲覧できなくなっていたのでリンク先消しました
PostgreSQLでスクリプト形式のテーブル毎ダンプ

PostgreSQLのpg_dumpはデフォルトでSQL形式のダンプを吐く。
オプションで`-t table_name` とすればテーブル毎に吐いてくれるが、これをテーブル名を付けたファイル、例えば`table_name.sql`のような感じのファイルに落とすスクリプト。

```shell
#! /bin/bash
for t in `echo "SELECT relname FROM pg_class WHERE relname LIKE 'myapp_%' AND \
     relname NOT LIKE '%_id_%' AND relname NOT LIKE '%_pk%' AND \
     relname NOT LIKE '%_uniq' AND relname NOT LIKE '%_like';" \
     | /usr/bin/psql mydb -t`
do
    echo ${t}
    pg_dump -a --inserts -t ${t} mydb > ${t}.sql
done
```

要点は、`pg_class`から`relname`を`SELECT`すればテーブル名が取れるということと、そのままだとpk等の内部管理テーブルも出てきてしまうので、`%_id_%`など、それら関係のテーブルを除いている、ということの2点。
通常のバックアップ用途だとシーケンス番号なども復旧させたいのが普通なので、その場合はNOT LIKEの条件を除いてしまえばOK。

お察しの方もいるかと思いますが、PostgreSQLから別のデータベースにデータだけ移行させたい、というときに、後処理ができるだけ煩雑にならない形式でのダンプが欲しくてひねり出してみたやり方です…