OmniAICreator/Qiita-1.07M huggingface dataset:
Re:VIEWで図表番号の参照がズレて困った（解決）

# どんな内容か？

[技術書典８](https://techbookfest.org/event/tbf08)に出展することが決まったので、それ向けてRe:VIEWを使い執筆作業をしております。書いている途中で、図表番号の参照がズレる現象に困っておりましたが、解決方法が見つかったので共有したいと思います。原因は私のミスなんですけどね。

# 前提条件
技術書典の執筆になりますので、[Re:VIEW Template](https://github.com/TechBooster/ReVIEW-Template)をRe:VIEW 4.0を使って作業してます。

# 参照のズレってどんな現象？
図表の番号は、Re:VIEWのテンプレートを利用すると、図表は、表3.1や、図2.3というように[章番号].[章内連番]の規則によって自動採番されるようになっておおり、図表には綺麗に番号が振られていました。しかし、その図表を参照した記載を行うと、なぜかその番号が、１章のまま番号がリンクしない現象に悩みました。
下記は、そのときの実際の表示です。表2.2を参照したいのに、表1.3となっています。
![hyo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143415/af53eb77-5f0f-4aea-5d5c-f800515c6cbf.png)

# じゃあ、どうするか？（解決法）

実は、私が章単位でarticle.reのファイルを作って編集作業してなかったことが問題でした。つまり、一つのファイル中に、１章、２章、３章・・・とどんどん追加していたのが原因でした。
article.reの中身を章毎に別ファイルとして、保存（この例では安易に1、2、3としています）し、catalog.ymlファイルにそれを順番に記述します。

オリジナルファイル

```catalog.yml
PREDEF:
  - preface.re

CHAPS:
  - article.re

APPENDIX:

POSTDEF:
  - contributors.re
```
修正後ファイル

```catalog.yml
PREDEF:
  - preface.re

CHAPS:
  - article1.re
  - article2.re
  - article3.re

APPENDIX:

POSTDEF:
  - contributors.re
```

#結果
もちろん無事に参照と番号が一致するようになりました。
![ok.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143415/a69dff3c-9c01-57fa-90e1-fba643f2df30.png)

#実は・・・
これ、自分で解決した訳ではなくて、技術書典の主催者側の方が初心者向けにイベントを定期的開催されていてその時に相談したらすぐに解決していただけました。もし、困っていることあれば、そんなイベントに行って相談してみると良いかもしれません。他にも解決方法として、Twitterで困っていることハッシュタグ付きで投稿すれば拾ってもらえるかもしれません。
※当方が参加したのは、[技術書典8 技術書の作り方勉強会 ～不安を解消しよう～ 01/30版](https://techbookfest.connpass.com/event/163179/)のイベントです。

#最後に

個人的には、初めての技術書典への出典ということで、落とさないように書いております。技術書典8の2020/3/1の**Day2**に**お47**でうずまき６「[Maker Faire 出展 非公式ガイド](https://techbookfest.org/event/tbf08/circle/5684083120144384)」（画像は準備中）を頒布予定です。ご興味あるかたのご来場をお待ちしております。
Ruby学習メモ

インスタンス変数
オブジェクトが持つ属性を定義する変数で定義すると全てのオブジェクトが同じ属性を持つ。
変数名のはじめに＠をひとつつけて定義する

class クラス名
　def メソッド名
　　@変数名 = 値　←インスタンス変数
　end
end

クラスメソッド
クラスが使用できるメソッド。定義したクラス自身が使用できる。
クラスで共通の情報を使った処理に使用
メソッドの前に.でつないで定義する

class クラス名
　def self.メソッド名
　　＃処理
　end
end

クラス変数
クラス全体で使用出来る変数。クラスを通して値が共通になる情報に使用。
クラス、インスタンス両方にて使用可能。
インスタンスをどれだけ生成しても初期化されない

class クラス名
　　@@変数名 = 値
end

復習した一部でした。
メモがわりに分からなくなったら戻ってこよう。
Macでアプリケーションのショートカットキー変更する

[keyboard - Disable Command-W in the terminal - Ask Different](https://apple.stackexchange.com/questions/44412/disable-command-w-in-the-terminal)

確認したのは、macOS Mojave(10.14.6)。

システム環境設定>キーボード>ショートカットの左側からアプリケーションを選び、[+]を押して追加する。

- [アプリケーション] 対象アプリケーションを指定
- [メニュータイトル]  変更したいメニューと同じ名前
- [キーボードショートカット]  適用したいショートカットキー

以下はMacのメモ帳で、本来は「閉じる」ショートカットである「⌘w」を「しまう」に割り当てた場合。

![shortcut.jpg (96.9 kB)](https://img.esa.io/uploads/production/attachments/8312/2020/01/31/32126/4e2d864d-4067-4a49-8a32-1cab98c6a725.jpg)
排他制御

## 排他制御とは
なんでそんな難しい言葉使うねんと。
ようは、同時に同じ処理呼びたくないよってことだと私はとらえています。
差異はあるかもしれないですが、とりあえず何がしたいかというと、
多重起動を防止するってことです。

なぜなら

テーブルの同じレコードを同時に編集しようとすると、おもくそ競合して、デッドロックになってしまうからです。

## 大まかな流れ
ファイルロックという手法を用います。

【手順】
1. ファイルをロックする
→ ファイルがロックされていた場合処理を終了
→ ロックされていなければ続行

2. ビジネスロジックを実行

3. ファイルロックを解除して終了

ね、簡単でしょう？
ファイルが既にロックされていた場合はOverlappingFileLockExceptionが発生するので、固有の処理でもなんでも好き放題ハンドリングできます

## ということでサンプル
```FileLock.java
package test;

import java.io.File;
import java.io.IOException;
import java.nio.channels.FileChannel;
import java.nio.channels.FileLock;
import java.nio.channels.OverlappingFileLockException;
import java.nio.file.StandardOpenOption;
import java.util.function.Consumer;

public class Test {
	
	/** バッチ処理名 */
	private static final String BATCH_NAME = "なんとかバッチ";

	public static void main(String[] args) {
		execute();
	}
	
	public static void execute() {
		// 排他制御をしてビジネスロジックを起動
		exclusiveController(job1, BATCH_NAME);
		exclusiveController(job2, BATCH_NAME);
	}
	
	public static void exclusiveController(Consumer<String> job, String processName) {
		
		File file = new File("ファイルパス");
		
		try (FileChannel channel = FileChannel.open(file.toPath(), StandardOpenOption.CREATE, StandardOpenOption.WRITE);) {
			// ファイルロックを試みる
			FileLock lockedObject = channel.tryLock();
			
			// 固有ビジネスロジックを実行する
			job.accept(processName);
			
			// ファイルロックの解除(channelがクローズされた場合、Java仮想マシン終了時もロック解除される)
			lockedObject.release();
			
		} catch (OverlappingFileLockException e) {
			// ファイルがすでにロックされていた場合
			
		} catch (IOException e) {
			// IOエラー
			
		}
	}
	
	/** 固有ビジネスロジック1 */
	private static final Consumer<String> job1 = System.out::println;
	/** 固有ビジネスロジック2 */
	private static final Consumer<String> job2 = System.out::println;
}
```
<ul>
ファイルロックが解除されるのは以下の3パターンです。
<li>FileLock#releaseを実行して手動でロック解除
<li>FileLockオブジェクトの獲得に仕様したFileChannelがクローズされるとき、
<li>Java仮想マシンが終了したとき
</ul>
[FileLock公式リファレンス参照](https://docs.oracle.com/javase/jp/8/docs/api/java/nio/channels/FileLock.html)

↑のコードではtry-with-resourceを採用しているため
releaseメソッドを使わずとも
FileChannelがAutoClosableの対象となり、勝手にロック解除されます

tryLockメソッドで失敗してOverlappingFileLockExceptionに行ったときは
ロックをしていないために、FileChannelを閉じてそのまま何もせず終了ですね

ファイルがロックされてるかどうかだけ見て、ジョブを起動するにしろファイルロックしたくないみたいな場合には
try-with-resourceの後にジョブを呼ぶか
try句の中でreleaseした後にジョブを呼ぶなど
様々工夫できますね
[Objective-C]BOOLの初期値がreleaseモードとdebugモードで反転する

#初期値判定の罠

```objc
BOOL isOK;
if (!isOK){
NSLog(@"NOT OK");
} else {
NSLog(@"OK");
}
```

上記のコード、releaseモードだと、isOKがYESで返ってきて、debugモードだとNOで返ってくる。

**ちゃんと初期値を宣言しましょう！**

```objc
BOOL isOK = YES;
```
基礎からやる数理統計　確率変数

#確率変数とサイコロ
まず最初はゆがみのない１～６サイコロ:game_die:の例で考えてみましょう。

１から６のサイコロの目はそれぞれ同様に確からしい（それぞれの出方に偏りがない）ことから、それぞれの目の出方は以下のような確率で与えることがでます。

$
P(1 の目が出る確率)　＝　\frac{1}{6}\qquad
P(2 の目が出る確率)　＝　\frac{1}{6}\qquad
P(3 の目が出る確率)　＝　\frac{1}{6}\\\
P(4 の目が出る確率)　＝　\frac{1}{6}\qquad
P(5 の目が出る確率)　＝　\frac{1}{6}\qquad
P(6 の目が出る確率)　＝　\frac{1}{6} 
$

ここでの確率変数$X$以下のように定義すると

$
X = \left\\{
\begin{array}{ll}
1 & (1の目が出たとき)\\\
2 & (2の目が出たとき)\\\
3 & (3の目が出たとき)\\\
4 & (4の目が出たとき)\\\
5 & (5の目が出たとき)\\\
6 & (6の目が出たとき)\\\
\end{array}\\right.
$

となります。ここでの $X$のように確率的に変動する変数を**確率変数**と呼びます。また、ここでの確率変数が実際に取る値を**実現値**といいます。

$
P(X = x) = \frac{1}{6}, \qquad x = 1,2,3,4,5,6
$


ではpythonで実際にサイコロを振ってみましょう。

```python 
import numpy as np
import matplotlib as mpl

np.random.seed()

prob_dice = np.array([])
dice = np.array([1,2,3,4,5,6])
dice_data = np.random.choice(dice, dice_times)
dice_times = 10000

for i in range(1,7):
    p = len(dice_data[dice_data == i]) / dice_times
    print(i, "の出る確率", p)
    prob_dice = np.append(prob_dice, len(dice_data[dice_data == i]) / dice_times)
    
plt.bar(dice, prob_dice)
plt.grid(True)
```

以下が結果になってます。今回は10000回サイコロを転がし，その確率を出しています。結果が示しているようにそれぞれの目は $\frac{1}{6} = 0.1666...$に近似しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576039/1c5523d1-3d4f-f83b-d082-44d6084b588d.png)


#確率関数と累積分布関数
確率変数には様々なものがあり、$X$が**離散確率変数**であるとは $X$の取りうる値が有限個または加算無限個の場合(１，２，３，４，５...のようにとびとびになっている値)をいい、$X$が**連続確率変数**であるとは密度関数を持つ場合のことをいいます。
離散確率の場合、先ほどのサイコロと同様に各 $x$で確率を考え、それを $x$の関数としたものを**確率関数**といい、以下のように表すことができます。

$
p(x) = P(X = x)\\\
$

また確率関数は以下ような性質をもちます。なお、ここでの $\sum$は確率の総和を表しています。

$
p(x) \ge 0, \qquad \forall x \\\
\sum_{x}^{} p(x) = 1
$

確率関数の累積和をとったものを**累積分布関数、もしくは分布関数**といいます。なお分布関数には以下のような性質があり、単調性や右連続性などの性質を持ちます。

$
F(x) = P(X \le x) = \sum_{y \le x} p(y)\\\
(1) \quad \lim_{n \to -\infty}F(x) = 0\\\
(2) \quad \forall x,y \in \mathbb{R}(実数)ならば\\\ 
\qquad F(x) \ge  F(y), \quad F(x) = \lim_{\varepsilon \to 0}F(x + \varepsilon)\\\
(3) \quad \lim_{n \to +\infty}F(x) = 1
$

ここで $ \forall x$において$F(X)$は右連続( $F(X+) = F(X)$と表す。)であり、$x_n$は単調に減少して収束する数列とすると $\lim_{x_n \to +\infty}F(x_n) = F(x)$ となります。ここでの $x+$は正の方向から単調に減少して $x$に収束することを示しています。すると以下のように $X$の累積分布関数の差をとれば確率関数を求めることができます。

$
p(x) = F(x) - \lim_{x_n \to x-} F(x_n) = F(x) - F(x-)
$


pythonで累積分布を実装すると以下のようになります。

```python
import numpy as np
import matplotlib as mpl
from scipy.stats import norm
import matplotlib.pyplot as plt

x = np.arange(0,3000)
y = norm.cdf(x, loc=1500, scale=500)

plt.plot(x,y)
plt.grid(True)
plt.xlabel("value")
plt.ylabel("possibility")
```

![コメント 2020-01-31 151132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576039/47f0f251-b9cd-ede2-c4d5-8b9c233d05ad.png)
サブシェル内における変数

こんにちは。
サブシェル内における変数の設定は元シェルへは反映されないです（ローカルスコープ扱い）。下記例は、括弧「( )」で囲われ（そしてその値を取り出し）ているので、サブシェルで実行されます。

```console
$ m=$(n=1); echo $n

$
```

これに対して、算術結果値を得る ```$((...)))``` の形式は、サブシェルではないので、変数設定は反映されます。

```console
$ m=$((n=1)); echo $n
1
$
```
1/31 授業ノート

#今日習ったことまとめ
画像編集
・Photoshopの設定
　・環境設定(Ctrl+K)を設定し直す
　　→インターフェース→一般→ドロップシャドウをすべて無しに
　　→単位、定規→定規と文字をpixcelに
　・カラー設定→作業用スペース→設定→「Web・インターネット用ー日本」
　・表示→校正設定→インターネット標準

・Webの場合はHSB(H→色相：hue、S→彩度：saturation、B→明度：brightness)で色を表示
・カラーコードの読み方→6桁の数値(0～9、A～F)で表示
・Hex値の読み方→0～9、A～Fで計上。
・6桁のうち左から2桁区切りでRGBの彩度と明度を示している。
　また、2桁のうち左側が彩度、右側を明度の数値を示している。
　ex:)5E3115→5E:R、31:G、15:Bという配分となっている
・カラーコードを読む練習ができるサイト→http://yizzle.com/whatthehex/

色について
・ベースカラー→基本となる色
・アクセントカラー→ベースカラーの補色となる色
・アソートカラー→アクセントカラーに似た色
・配色のバランスを見るのに便利なサイト→https://hue360.herokuapp.com/

#感想
色の話についてもうすっかり忘れてしまってるので、
週末家にある資料本を読み直そうかな。
色彩検定とか印刷関係のとか、色々買ってあったはず。
イラレの操作が全然分からないのでこれも毎日特訓すべきかも？
フリーランスについていろいろ調べてみた。


# フリーランスの年収
フリーランスの**平均年収**は正社員の大体**2倍**くらい。
**税金**や**保証**などを考えると正社員の大体1.3~1.5倍くらいが同じくらいの給与水準になるらしい。
人によっては2倍と言う人も。
そう考えるとちょっとお得か、どっこいどっこいかな、という感じ。

<!-- 
# 正社員のメリット

- **有給**がある
- **福利厚生**がある
- **給料は保証**される
- **確定申告**などの手続きは会社がやってくれる
- PCなどの**仕事道具や環境**は会社が用意してくれる
- 会社によっては**退職金**がある

# フリーランスのメリット

- **仕事内容**を選べる
- **仕事場所**を選べる
- **勤務時間**を選べる
- **年収**を上げやすい
- マネジメント系の業務が不要
-->

# 仕事探し
フリーランスの仕事の探し方は大きく分けると4つ。

- 自分で**営業**をかける
- 知人の紹介など**人脈**を活用
- **エージェント**を利用
- **クラウドソーシング**を利用

自分で営業できる能力があったり人脈がある人はそれを優先的に活用するのが良さそう。
仲介手数料が必要なエージェントを使う場合は、複数登録してみて自分の単価を見積もるといいかも。
クラウドソーシングは時短やリモート案件が豊富だけど、単価が安くなりがちでトラブルも多いと聞く。

# 派遣と業務委託の違い

|   |  派遣  |業務委託|
| ---- | ---- |---- |
|  雇用関係  |  あり  |なし|
|  指揮命令  |  あり  |なし|
|  就業規則  |  あり  |なし|
|  労働基準法 |  対象  | 対象外 |
|  作業場所  |  派遣先企業  |指定なし|
|保険|社会保険|国民健康保険|

# 請負、委任契約、準委任契約について

業務委託・・・業務を外部依頼する契約全般を指す。
┣ 請負・・・成果物を完成して納品する**瑕疵担保責任**がある。納品物に対しての報酬。
┗ 委任・・・納品物に対する責任はないが**善管注意義務**がある。時間に対しての報酬。
　　┣ 委任契約・・・弁護士など法律に関する業務の場合
　　┗ 準委任契約・・・法律行為以外の業務の場合（**SES**はココ）

※瑕疵担保責任・・・納品物にバグとかあったら埋め合わせしてくれよ的な義務
※善管注意義務・・・普通の範囲でちゃんとやれよ的な義務

# 感想
フリーターや派遣が始まった時も、自由な働き方だともてはやされていた時期があることを考えると
個人的には今フリーランスになるのは結構リスキーな気がする。
特殊な技能を持っている人や自分自身のブランディングが得意な人であればずっと年収は上がるだろうし、契約は自分で選ぶことができるから
安定より年収や自由を選びたいといったライフスタイルを望む人ならいいのかな。

まぁ今は会社が潰れたりリストラされてもおかしくない時代だから正社員が安定とも限らないし
正社員でもリモートワークや週休３日とかいろんな働き方を許容している会社も増えてきているので不自由とも言い切れないかな。

フリーランスと一口に言っても、準委任契約の働き方だとフリーランスと言うより派遣ぽいよなぁとも思ったりする。

とりあえず今後の動向を見守ろう。
勉強記録　20日目 〜コンパイラによるコピーコンストラクタの自動生成の禁止(2)〜 - Effective C++ 第3版 -

#　はじめに

Effective C++ 第3版の6項32ページから勉強していきます。
今回は、前回に引き続き「コンパイラによるコピーコンストラクタの自動生成の禁止」についです。

# Effective C++ 第3版 - 6項　コンパイラが自動生成することを望まない関数は使用を禁止しよう -

## コンパイラによるコピーコンストラクタの自動生成の禁止(2)

### 前回の復習と前置き

[前回の投稿](https://qiita.com/eierapfel/items/4b82997c3d24a55f6865)で、オブジェクト(クラス)をコピーするようなコードがあれば、コンパイルできないように、する書き方について勉強しました。
その結果、privateでコピーコンストラクタ・コピー代入演算子の宣言だけし、定義を書かないことで、メンバ関数からの呼び出しを防ぐという結論にいたりました。

今回は、コピーコンストラクタとコピー代入演算子をprivateに宣言したクラスを作り、それをHomeForSaleの基底クラスとすることで、オブジェクトをコピーするようなコードがあれば、コンパイルできないようにする書き方について勉強していきます。

### 今回の勉強内容

コピーを禁止するためだけに定義するこのクラスをUncopyableとして、クラスを作成していきます。
下にUncopyableというクラスを示します。

```cpp
class Uncopyable {
 protected:
  Uncopyable() {}   //宣言と定義
  ~Uncopyable() {}  //宣言と定義

 private:
  Uncopyable(const Uncopyable&);             // 宣言のみ
  Uncopyable& operator=(const Uncopyable&);  // 宣言のみ
};
```

上のように、コンストラクタ・デストラクタは、宣言と定義を行い。
コピーコンストラクタとコピー代入演算子は、宣言のみ行います。

そして、下のコードのように宣言すると、HomeForSaleクラスをコピーすることをできなくします。

```cpp
class HomeForSale : private Uncopyable {
 public:
  explicit HomeForSale(const std::string& city, const int& value) {
    city_  = city;
    value_ = value;
  }

 private:
  std::string city_;
  int         value_;
};
```

上のように定義したHomeForSaleでは、メンバ関数やフレンド関数であっても、コピーを行おうとすると、
コンパイラがコピーコンストラクタやコピー代入演算子を生成しようとして、そこでエラーとなります。

以下に、勉強で使用したコードを示します。

### サンプルコード

```cpp
#include <iostream>

class Uncopyable {
 protected:
  Uncopyable() {}   //宣言と定義
  ~Uncopyable() {}  //宣言と定義

 private:
  Uncopyable(const Uncopyable&);             // 宣言のみ
  Uncopyable& operator=(const Uncopyable&);  // 宣言のみ
};

class HomeForSale : private Uncopyable {
 public:
  explicit HomeForSale(const std::string& city, const int& value) {
    city_  = city;
    value_ = value;
  }

 private:
  std::string city_;
  int         value_;
};

int main(int argc, char* argv[]) {
  std::cout << "6_no_copy_constract2.cpp" << std::endl;
  HomeForSale h1("Tokyo", 2);
  HomeForSale h2("Osaka", 3);
  // HomeForSale h3(h1);  // コンパイルエラー
  // h1 = h2;             // コンパイルエラー
}
```

### 実行結果

### まとめ

今回は、コピーコンストラクタとコピー代入演算子をprivateに宣言したクラスを作り、それをHomeForSaleの基底クラスとすることで、オブジェクトをコピーするようなコードがあれば、コンパイルできないようにする書き方について勉強しました。
Uncopyableの継承がpublicでなかったり、デストラクタが仮想でなかったりとよく分からないこともありましたが、今後勉強していきたいと思います。
また、[前回の投稿](https://qiita.com/eierapfel/items/4b82997c3d24a55f6865)のコメントでC++11以降であれば、

>```cpp
HomeForSale(const HomeForSale&) = delete;
```

と書くことで、自動生成を抑止することができると教えていただいたので、こっちを使おうと思います。

## 参考文献

[1] https://www.amazon.co.jp/gp/product/4621066099/ref=dbs_a_def_rwt_hsch_vapi_taft_p1_i0
rbenvで最新のrubyを取得できるようにする

rubyの最新を取得しようとして 

```shell
$ rbenv install --list
```

をたたいたものの最新バージョンがでてこなかったのでrbenvをupgradeした。

## rbenvをupgradeする

まずはおなじみ

```shell
$ brew update
```

upgradeする

```shell
$ brew upgrade ruby-build
```

実行すると以下のエラーになる

```shell:実行結果
==> Summary
🍺  /usr/local/Cellar/readline/8.0.1: 48 files, 1.5MB
==> Installing ruby-build
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Error: An exception occurred within a child process:
  CompilerSelectionError: ruby-build cannot be built with any available compilers.
Install GNU's GCC:
  brew install gcc
```

エラーになる。以下を叩けと

```shell
$ brew install gcc
```

以下の結果になる、うーん同じコマンドたたけといわれる。

```shell:実行結果
==> Installing gcc
Warning: Building gcc from source:
  The bottle needs the Xcode CLT to be installed.
xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun
Error: An exception occurred within a child process:
  CompilerSelectionError: gcc cannot be built with any available compilers.
Install GNU's GCC:
  brew install gcc
```

ググルとどうやら、以下ををたたけと

```shell
$ xcode-select --install
xcode-select: note: install requested for command line developer tools
```

たたくと上記の表示とダイアログが出るのでダイアログをOKとする。
インストールが完了する。

再度 

```shell
$ brew install gcc
```
をたたくと無事成功する。

続いて 

```shell
$ brew upgrade ruby-build
```

をたたくと無事成功する。

そして

```shell
$ rbenv install --list
```

をたたくと無事にruby 2.7.0がいた。

## 参考
この辺調べながらやった、ありがとうございます:pray:

https://morizyun.github.io/ruby/rbenv-update-mac-homebrew.html
https://qiita.com/zousaaan3/items/d1d9af1bf55c32ca5fe8
https://qiita.com/wawawa/items/50c2c612b0937f28d92b
https://qiita.com/motofumi/items/0f2e7ae1b852f118fe95
Visual Studio Code 「ユーザ設定に書き込めません。」と出て設定が変更できなかった話

## 目的

- Visual Studio Code(以下VScode)の設定を変更した際に「ユーザ設定を変更できません。ユーザ設定を開いてファイル内のエラー/警告を修正してからもう一度お試しください。」と出てしまい設定が反映されない問題を解決した話をまとめる  
![スクリーンショット 2020-01-29 18.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/9bf219e4-8ec0-9f9f-7158-3bd1b547d114.png)


## 原因

- VScodeの設定ファイルの記載文法が間違っている可能性が高い

## 原因探しと修正

- 「設定を開く」をクリックしてVScodeの設定ファイルを開く。
- 下記の内容が記載されている。

    ```json
    {
        "workbench.editor.enablePreview": false,
        "terminal.integrated.scrollback": 10000,
        "workbench.iconTheme": "vscode-icons",
        "files.autoSave": "afterDelay",
        "terminal.integrated.rendererType": "dom",
        "emmet.triggerExpansionOnTab": true
        "emmet.includeLanguages": {
            "nunjucks": "html"
        },
        "editor.minimap.enabled": false
    }a
    ```

    ![スクリーンショット 2020-01-29 20.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/35a5c50e-17a1-03aa-3d6c-e9a29b207b31.png)

 - よく見ると`"emmet.triggerExpansionOnTab": true`の後ろに`,`の記載がない。この部分の文法が間違っているため全ての設定が正しく反映されていなかった。
 - 下記のようにVScodeの設定ファイルを修正したところ問題が解決した。

    ```json
    {
       "workbench.editor.enablePreview": false,
       "terminal.integrated.scrollback": 10000,
        "workbench.iconTheme": "vscode-icons",
        "files.autoSave": "afterDelay",
        "terminal.integrated.rendererType": "dom",
        "emmet.triggerExpansionOnTab": true,
        "emmet.includeLanguages": {
            "nunjucks": "html"
        },
        "editor.minimap.enabled": false
    }
    ```
【Rails】マイグレーション(migration)まとめ

## 基本
・`rails g model`や`rails g migration`でマイグレーションファイルを作って、
・必要に応じて修正して、
・`rails db:migrate`でマイグレーションを実行。

## テーブルを作成
```terminal
$ rails g model User name email level:integer
```
```rb
def change
  create_table :users do |t|
    t.string :name
    t.string :email, unique: true, null: false, limit: 100, index: true
    t.integer :level, default: 1, comment: 'ユーザーのレベル'
    t.references :user_group
    t.timestamps
  end
end
```
オプションもりもり。検索条件に使いそうなカラムにインデックスを貼ると、検索クエリを高速化できます。

## テーブルを削除
```terminal
$ rails g migration DropUsers
```
```rb
def change
  drop_table :users
end
```
その後マイグレーション後`model/user.rb`を手動で削除する。

`rails d model user`を実行する方法もありますが、`rails:migration:reset`の時にエラーが発生するし、emailsテーブルが存在したという履歴が残らないので微妙です。

## カラムを追加
```terminal
$ rails g migration AddPhoneToUsers
```
```rb
def change
  add_column :users, :phone, :string, after: :email
end
```

または以下のように書くこともできる。数が多い時はこちらを利用

```rb
def change
  change_table :users, bulk: true do |t|
    t.string :phone
    t.remove :hoge
  end
end
```

## 外部キーを追加
tasksテーブルにusersテーブルのidを追加する場合

```terminal
$ rails g migration AddUserToTasks user:references
```
```rb
def change
  add_reference :tasks, :user, foreign_key: true, after: :id
end
```
外部キー制約を外したい場合、`foreign_key: true`を削除した上でモデルに`optional: true`をつける

```rb
class Task < ApplicationRecord
  belongs_to :user, optional: true
```


## 外部キーのデータ型を変更
```rb
def up
  change_column :tasks, :user_id, type: :string
end
def down
  change_column :tasks, :user_id, type: :bigint
end
```
[[Rails]referencesを使用した外部キー設定で沼った](https://qiita.com/Jwataru/items/7b840be38d4279224245)

## ユニークキーを追加
```rb
def change
  add_index :students, :email, unique: true
  add_index :students, %i[student_id email], unique: true
end
```

## カラムを削除
```terminal
$ rails g migration RemoveNameFromUsers
```
```rb
def change
  remove_column :users, :name, :string
end
```

## カラム名を変更
```terminal
$ rails g migration ChangeColumnNameOfUsers
```
```rb
def change
  rename_column :users, :iyem, :item
end
```

## 既存カラムの内容を変更
既存カラムを変更する場合、`up`と`down`を書かないとロールバックできないので注意。
現在の内容は`db/schema.rb`を参照すると楽です。

```
$ rails g migration ChangeLevelOfUser
```
```rb
# 変更内容
def up
  change_column :users, :level, :integer, null: false, default: 10
end
# 変更前の状態
def down
  change_column :users, :level, :integer, null: true, default: 0
end
```

## ロールバック
```terminal:1つ前まで戻す
$ rails db:rollback
```
```terminal:3つ前まで戻す
$ rails db:rollback STEP=3
```
```terminal:ロールバック前の状態に戻す
$ rails db:migrate
```

## 参考
- [Rails カラム名変更方法](https://qiita.com/libertyu/items/93acd8733e34b1d0a63c)
LEDに抵抗を直列接続する理由

ArduinoやRaspberry Piのハンズオンの最初にLED(発光ダイオード)をチカチカ光らせることをやることが多い(というかほとんどLED)と思います。通称「Lチカ」と呼ばれています。

<img width="400" alt="Screen Shot 2020-01-31 at 20.36.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/c3f9f34d-e58a-b14f-1e92-e195e8ef89fb.png">


このときに，抵抗を直列に接続するのはなぜでしょう？

- LEDをショートさせないため
- 電流を制限するため

と説明がされていることが多いのですが，ここできちんとした説明をしたいと思います。

## LEDの特性

まずはLEDの説明から。LEDはLight-Emitted Diodeの略で日本語では発光ダイオードです。

![PnJunction-LED-J.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/3353caf6-594b-1e5f-016b-d4770f111050.png)

ここで発光ダイオードの特性を抵抗と比べてみましょう。抵抗は電圧と電流が比例します。そうです。皆さんご存知のオームの法則です。一方で，発光ダイオードは徐々に電圧を加えていくと，ある程度まではほとんど電流が流れず，あるところ(このLEDの場合3V弱)から急激に流れ始めます。

<img width="946" alt="Screen Shot 2020-01-31 at 19.53.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/d1c102d3-1f00-d2af-0a5c-162fbfdcc289.png">

[http://akizukidenshi.com/download/ds/lg/LEBWL34A06AA00.pdf]
から秋月電子で販売されているLEDのページからデータシートがダウンロードできます。

## LEDの光の明るさ

ところで，LEDの明るさは何によって変化するでしょうか？電圧でしょうか？電流でしょうか？
実はLEDの明るさはLEDの**電流**に(ほぼ)比例します。

<img width="987" alt="Screen Shot 2020-01-31 at 19.59.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/a3a5e50f-c673-6f4b-4f76-a312e300852f.png">

しかし実際に電子回路では電圧一定の電源(=電圧源)しか用意されていないことがほとんどです。Arduinoにも5Vとか3.3Vの端子があったと思います。たとえばこのLEDでは20mAの電流を流すとほどよい明るさで光るのですが，20mAの電流を流すためには3.2Vの電圧が必要になります。

たとえば下の図の右上のようにもし何かの拍子に電圧が3.6Vになってしまったらどうでしょう？たった0.3Vの電圧上昇でLEDの電流値は40mAと2倍程度になってしまいます。LEDそのものの特性も変化することだってあります。温度が変化した場合LEDの特性は右下のように青色の曲線のようになります。その場合には電圧が変化しなくても電流が変化します。

<img width="917" alt="Screen Shot 2020-01-31 at 20.03.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/9183e84e-8c80-a52a-3ac3-d7508c6ce877.png">

## 抵抗があると・・・？

ここで抵抗の登場です。抵抗をLEDに直列に接続して，全体に電圧を印加してみます。するとダイオードに流れる電流は図の中の式のようになります。この式は**LEDの特性を知らなかったことにしてこの回路の電源と抵抗の特性からダイオードの電流と電圧の関係を示したもの**となります。この関係をLEDの実際の特性と重ねた時の交点が，**この回路における**ダイオードの電流と電圧(=動作点)となります。

<img width="1016" alt="Screen Shot 2020-01-31 at 20.08.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/99701d1a-75ee-75eb-15fe-dbcc0f37f9a5.png">

ここで先ほどと同様に，回路の電圧やLEDの特性そのものが変化した場合を考えてみましょう。
まずは回路の電圧が+0.3V変化した場合は，直線の$x$切片が5.0Vから5.3Vに変化します。動作点はどうでしょうか？先程は電流が40mAになってしまいましたが，今回の場合はほとんど変化しません。LEDの特性が変化したとしても問題無さそうです。

<img width="537" alt="Screen Shot 2020-01-31 at 20.13.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573580/789e808e-86ed-39d2-cd57-9e1f38c4a6d9.png">

すなわち，LEDに抵抗を直列接続することで「電流の大きさで明るさが変化するLEDを電圧源で駆動することができ，LEDの明るさを安定化できる」ということだったのです。

電流を安定化するというのが本来の目的で，
- LEDをショートさせないため
- 電流を制限するため
も間違っていはいないのですが，実はより実用的な理由があったのです。
初心者によるプログラミング学習ログ 224,225日目

#100日チャレンジの223日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

224,225日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>224日目<br>・vue.jsでアプリ作成講座<br>・bootstrapでLP作成<br>・javascriptのtodolistのコード意味調べ<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1222615736473964544?ref_src=twsrc%5Etfw">January 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>225日目<br>・youtubeみながらjavascriptで電卓作成<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1222978975749640192?ref_src=twsrc%5Etfw">January 30, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Cosmo Commnicatorで開発したい

## やりたかったこと
電車で運良く座れたときに
Cosmo Communicatorでコーディング

## 試したこと
- termux
    - CLIでは開発しづらい！とにかく辛い！
- cloud9
    - VPS借りて、Cloud9を起動
 エディタ上で文字を打つ文には快適だが、ファイルツリーをタップすると辛い現実が．．．

## 現実
![Screenshot_20200131-202048.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99240/92b87e5f-a137-dea8-bd21-1adece49ff5c.png)
**なんでこんなドアップになるの。。。**

## 思いついた対処方
- webviewアプリを自作してみる
  - 時間がかかるしなんか沼にハマりそう

## 現在
WebViewアプリを自作して、いい感じになった！
![Screenshot_20200418-183126.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99240/8a953d6d-991e-4900-b953-dd9ce2b554e5.png)
OBS配信でウィンドウキャプチャするための設定

#はじめに
OBSでWindowsでソースコードを書いてるところを配信したいと思っているのですが、なかなかうまく画面キャプチャーできなかったので、苦戦した結果のメモを残します。2020/01/31時点の内容です。

# 設定
## Visual Studio Code

起動時に`--disable-gpu`をつけて実行

- [How can I disable GPU rendering in Visual Studio Code - Stack Overflow ](https://stackoverflow.com/questions/29966747/how-can-i-disable-gpu-rendering-in-visual-studio-code)
- [Add a setting to disable gpu acceleration Issue #15211 microsoft/vscode](https://github.com/microsoft/vscode/issues/15211)


## Windows Terminal

Windows Terminalに使用できるdisable gpu acceleration なオプションはない模様。OBSのソースでゲームキャプチャーでウィンドウ内をキャプチャ。Windows Terminalのタブを切り替えて表示できない。WSLタブはキャプチャーできたけど、PowerShellタブはキャプチャーできなかったです。

![コメント 2020-01-31 201016.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268291/02466f92-58b1-75bf-283e-dff843ff436d.png)

現状Windows TerminalはPreview版で公開中です。今後、便利なオプションや設定が追加されることを期待したいです。


- [OBS Studio cannot Window capture Windows Terminal · Issue #3961 · microsoft/terminal](https://github.com/microsoft/terminal/issues/3961)
ssh接続する際にTerminalの色を変える（macOS版）

## はじめに

人間は必ずミスを犯すものです。
少しでもミスを減らす為、出来ることはしましょう。
他にいい案があれば教えていただけると嬉しいです。
（Ubuntu版は[こちら](https://qiita.com/kanchi/items/068ccda422264bf6c97f)）

## 環境

macOSにデフォルトで入っているTerminal

## スクリプト

少しでもミスを減らしたいのでaliasでコマンドを置き換えるなどせず、環境毎にスクリプトを作成するのがいいと思っているのでそれ用のスクリプトです。
適時自分の環境に書き換えてください。

```ssh_color_change_macos.sh
#!/bin/bash

# ssh connection script

################################################
# style guide
# http://google.github.io/styleguide/shell.xml
################################################

# default profile list
## Basic
## Man Page
## Ocean
## Red Sands
## Silver Aerogel
## Solid Colors

################################################
# profile change function
# Globals:
#   None
# Arguments:
#   profile name
# Returns:
#   None
################################################
function profile_change() {
  profile_name=$1
  /usr/bin/osascript -e "tell application \"Terminal\" to set current settings of first window to settings set \"${profile_name}\""
}

# Ctr-c processing
# default terminal profile
trap "profile_change \"Basic\"" 2

profile_change "Red Sands"

# command
ssh username@hostname

# end
profile_change "Basic"
exit 0
```
jqでselectした結果をJSONの配列として出力する

普通に `jq select` すると結果が列挙されるだけなのをなんとかする。


## example
例えばこんなJSONがあったときに

```json:cinema.json
[
  {
    "key": "David",
    "value": "seven"
  },
  {
    "key": "Robert",
    "value": "dusk"
  },
  {
    "key": "David",
    "value": "game"
  }
]
```

`jq select` でデータを抜き出すと、こんな感じになる。

```shell
> cat cinema.json | jq '.[] | select(.key=="David")'
{
  "key": "David",
  "value": "seven"
}
{
  "key": "David",
  "value": "game"
}
```

これをちゃんとJSONの配列形式にしてやりたい。

## 配列出力する

そんなときは `jq -s '.'`を追加すればよい。

```shell
> cat cinema.json | jq '.[] | select(.key=="David")' | jq -s '.'
[
  {
    "key": "David",
    "value": "seven"
  },
  {
    "key": "David",
    "value": "game"
  }
]
```

`-s`オプションの意味は以下の通り。

```
-s		read (slurp) all inputs into an array; apply filter to it;
```

## 参考
- https://stackoverflow.com/questions/38061346/jq-output-array-of-json-objects
Raspberry Pi から不要なパッケージを削除してディスク容量を増やす

ラズパイの環境に8GBのSDカードを使用していましたが、必要なものをいくつかインストールした時点で空き容量が全くなくなってしまいました。
これでは何の作業もできないので、不要なパッケージを削除しようと思います。

# 環境
- Raspberry Pi 3 Model B+
- Raspbian 9.11(stretch)
- Kernel 4.19.66-v7+

```Bash
$ uname -a
# Linux raspberrypi 4.19.66-v7+ #1253 SMP Thu Aug 15 11:49:46 BST 2019 armv7l GNU/Linux
$ lsb_release -a                 
# No LSB modules are available.
# Distributor ID: Raspbian
# Description:    Raspbian GNU/Linux 9.11 (stretch)
# Release:        9.11
# Codename:       stretch
```

# 不要なパッケージをアンインストール
デフォルトでは、使用しないパッケージやよくわからないパッケージがいくつも入っています。
これらがディスク容量をかなり圧迫させていたので、アンインストールしていきます。

もし間違えてアンインストールしてしまったら下記コマンドでインストールし直しましょう。

```Bash
$ sudo apt-get install {パッケージ名}
```

削除の前に、まずはリポジトリの更新を行います。

```Bash
$ sudo apt-get update
$ sudo apt-get upgrade
```

次に不要なパッケージの削除を行います。

```Bash
$ sudo apt-get purge wolfram-engine
# 約1.1GB 削減
$ sudo apt-get purge sonic-pi
# 約500KB 削減
$ sudo apt-get purge scratch*
# 約240MB 削減
$ sudo apt-get purge libreoffice*
# 約245MB 削減
```

キャッシュされているファイルも削除しましょう。

```Bash
$ sudo apt-get clean
$ sudo apt-get autoremove
# 約100MB 削減
```

最後に再度リポジトリの更新を行います。

```Bash
$ sudo apt-get update
$ sudo apt-get upgrade
```

これで2GB弱の空き容量ができました！
やっと開発作業に移れそうです。

今回はここまでです！

## 参考
[MacでRaspberryPi入門](https://qiita.com/shippokun/items/9070fc58f69d8c063e44)
RailsとVueにてwebpack-dev-serverによるフロントエンドサーバーが立ち上がらない

#【解決方法】
`yarn upgrade`を行う
#【過程】
gemの導入、yarnの導入、webpackerのインストール、Vueの初期ファイルの導入、viewファイル内でのvue指定をまずは行う。

- gemの導入 
 
```
gem "webpacker", "~> 4.x"
```
- yarnの導入


```
$ brew install yarn

$ yarn -v
yarn install 1.15.2
``` 

- webpackerのインストール

```
$ bundle exec rails webpacker:install 
``` 

 - vueの初期ファイル導入
 
```
bundle exec rails webpacker:install:vue
```

- viewファイルへvueの指定

```index.html.rb
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
<h1> Homes#index </h1>
```

#サーバーを立ち上げ表示画面を確認（vue側エラー）

```
# Rails server の立ち上げ　=>　成功
$ bundle exec rails s

# Frontend server の立ち上げ　=>　エラー
$ bin/webpack-dev-server

zsh: no such file or directory: bin/webpacker-dev-server
```

#yarn upgradeの実施

```
$ yarn upgrade

$ bin/webpack-dev-server

# localhost:3000にてvue表示に成功
```
クラスの継承

```py:
class Car(object):
    def run(self):
        print('run')

class ToyotaCar(Car):
    pass

class TeslaCar(Car):
    def autorun(self):
        print('autorun')

car = Car()
car.run()

print('#############')

toyota_car = ToyotaCar()
toyota_car.run()

print('#############')

tesla_car = TeslaCar()
tesla_car.run()
tesla_car.autorun()
```

```:実行結果
run
#############
run
#############
run
autorun
```

まず、Carというクラスを定義した。

そしてそのCarを継承したToyotoCarクラスを作成した。
ToyotoCarクラスのもつメソッドは、
Carクラスと全く同じrunメソッドのみ。

TeslaCarクラスもCarクラスを継承したクラスだが、
runメソッドだけでなくautorunメソッドもある。
長くて複雑なフォーム📝


## 長くて複雑なフォームとは？🤔
- ex
    - 住宅ローンなど長大なもの
    - 複数人で作業するコンテンツ
    - 承認フローがある

---

## 品質を上げるtips ✨
- 事前に案内、説明をしてあげる
- 事前にcheckをしてあげる
- タスクを分割してあげる、タスク別のステータスを表示してあげる
- 次にするべきことを明示してあげる

---
## 事前に案内、説明をしてあげる😇
- ex：住宅ローンの申請
    - 申請条件：20才以上
    - 必要書類：免許証

---
## 事前にcheckをしてあげる 🧐
- ex：お問い合わせフォームなど
    - 何でおこまりですか？
    - このパターンはどうですか？
    - こちらのFAQはどうでしょう

---
## タスクを分割&優先度付けしてあげる 🌱
- ex：ブログの配信
    - 必須❗
        - タイトルの入力/✅
        - 本文の入力/🆖
    - 任意
        - meta情報の設定
    - 承認
        - 承認者１
        - 承認者２
    - 送信ボタン

---
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63060/a195b586-6d9f-393c-1f30-5e44b5722551.png)

---
## 次にするべきことを明示してあげる
- ex：住宅ローンの申請
    - 身分証明証の登録をする✅
        - 身分証明証のアップロード
    - 提出書類の送付をする
        - 印鑑証明etc

---
## その他tips 🙌
- 作業にかかる時間の表示
- 作業中のデータを保存してあげる＆すぐに再開できる
- タスク名は動詞っぽく表現(登録をするなど)
- 誰が？何を？を明示
- etc
半角英数字が折り返されずオーバーする。word-break: break-all;　overflow-wrap: break-word;

##今回のメモは、チャット機能を備えたアプリを作った際の困りごとメモ。

チャットの文字数を例えば20文字として投稿したとします。
width幅は100pxと指定。

この際に、普通に
```アイウエオアイウエオ
アイウエオアイウエオ```

このようにwidthの設定をしてあれば決められた幅を過ぎた時点で折り返されます。

**しかし・・・・・・・**ここで困ったことになったのが。
半角英数字です。

例えば。

```
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaと入力したとします。
すると本来全角１０文字時点半角20文字時点で折り返されるはずが折り返されません。
```
チャット枠を飛び越えて・・・文字が表示されてしまいました。


##そこで色々と調べた結果

CSSのbody設定すれば解決！
```body {
  word-break: break-all;
  overflow-wrap: break-word;
}```

簡単に説明を読んでみる。

**禁則処理とは？**

まず、「禁則処理」という言葉を理解しましょう。この意味は、「。」「、」「…」「？」などの文字を行頭や行末に来ることを避ける処理のことです。これらの記号が文章の最初に来るのは不格好です。それを防ぐ措置が禁則処理です。そして、「word-break」と「overflow-wrap」の違いには、これが大きく関係しています。

つまり、禁則処理を設定するか、しないかを強く意識したプロパティが「word-break」であり、「単語の折り返し」を強く意識したのが「overflow-wrap」です。


##簡単に今回使った処理部分だけの説明を抜粋


■break-all　： 　これは非常に強力な値です。つまり、日本語であっても、英語であっても、幅に合わせて一切の単語が途中で折り返されます。特に英文は単語の途中でも折り返されるので読みづらくなるでしょう。 |
|:--|:--|

と書かれています。チャットなどの場合は問題なさそうなので、これを使いました。
英文などを載せたりする場合には微妙そうですね。



■break-word 　：　日本語の場合は幅に合わせて文字は折り返され、かつ、文字の途中で折り返されます。英語なら文章は、単語(各アルファベットではないことに注意)ごとに折り返されますし、長い単語はその途中で折り返されます。 |
|:--|:--|


日本語の場合は幅に合わせて折り返し。英語なら単語の場合切れないように考慮しつつ・・・折り返してくれるようですね。

ただ、意味もない、英数字の場合だと折り返されないので、```word-break: break-all;```なしだと
英数字がチャット枠を飛び越したままの状態のようです。

以上・・・メモでした。
java.utilにはArrayListクラスが二つある

#導入
こんにちは。けちょんです。
**皆さん、ArrayList使ってますか？**
もちろん私もよく使います。
1つ予想外なことがあったので紹介します。

#クイズ
以下ソースで実行時例外が発生します。
それはどこでしょう。

```java
String[] array = { "banana", "apple", "melon" }; // 配列を作成
List<String> list1 = Arrays.asList(array); // 配列からリストの作成

List<String> list2 = new ArrayList<>();
list1.stream().forEach(e -> list2.add(e)); // list1と同じ要素を持つリストを作成

list1.add("lemon"); // list1に追加
list2.add("lemon"); // list2に追加

System.out.print(list1); // list1の結果を出力
System.out.print(list2); // list2の結果を出力
```

※streamに不慣れな方に言っておくと、streamの行ではありません。

↓
↓
↓
↓
↓
↓
↓
↓
↓
正解は、```list1.add("lemon")```です！
以下例外が発生します。

```java
Exception in thread "main" java.lang.UnsupportedOperationException
	at java.base/java.util.AbstractList.add(AbstractList.java:153)
	at java.base/java.util.AbstractList.add(AbstractList.java:111)
	at Main2.main(Main2.java:44)
```
ちなみに```list2.add("lemon")```は正常に実行されます。

#なぜ例外が発生する？

##まず、それぞれクラスを見てみましょう

```java
System.out.println(list1.getClass()); // class java.util.Arrays$ArrayList
System.out.println(list2.getClass()); // class java.util.ArrayList
```

どちらもArrayListです。
**が、list1はArraysクラスの内部クラスのArrayListです**

つまり、ArrayListクラスは二つあるのです。（どや）



##java.util.Arrays$ArrayListの中身は？

Arraysの中を覗いてみましょう。
長いので書ききれませんが、クラス名の宣言はこのようになっています。

```java
・・・
private static class ArrayList<E> extends AbstractList<E>
        implements RandomAccess, java.io.Serializable
    {
・・・
```
内部クラスで定義されていますね。
そして、ArrayListの中ではaddメソッドは実装されていません。

そのため、親クラスのAbstractListを見に行きます。（エラーメッセージで出力されていたクラスですね）

```java
・・・
public boolean add(E e) {
    add(size(), e);
    return true;
}
・・・
public void add(int index, E element) {
    throw new UnsupportedOperationException();
}
・・・
```

犯人はこいつですね！！
呼び出すとUnsupportedOperationExceptionを投げるように実装されています。

##なぜこんな実装に、、、
AbstractListは文字通りabstractクラスであるため、実装前提のクラスです。
そのため、継承せずに呼び出すと例外を投げるよう実装しているようです。

いや、インターフェースにするなり、asListメソッドの実装を変えたり、やりようがある気はしますが、、、
詳しい人教えてください、、、

#まとめ
java.utilには、以下二つのArrayListが存在する
①```class java.util.Arrays$ArrayList```
②```class java.util.ArrayList```

①はaddメソッドを呼び出すと例外が発生するので要注意
PythonでAzure SQL Databaseに接続する備忘

##PythonでAzure SQL Databaseに接続する
※mymssqlはpip install済みとする。
多分、SQLServerでもいけるはず。

```
import pymssql

server = '<サーバー名>'
database = '<DB名>'
user = '<ユーザー名>@<サーバー名>'
password = '<パスワード>'

connection = pymssql.connect(server=server, user=user, password=password, database=database)
```

userにはユーザ名+サーバー名が必要なので要注意
最近初めて使ったgitコマンド

## gitのことについて書きたい
今まで使ったことのないgitコマンドを、今週はいくつか使ったので、その紹介をしようと思います。
どんな状態のときに私が使ったのかも、一緒に書いていきます！

## 紹介します


### 🔥 みんなの更新内容を、自分の開発環境に取り入れる
`git fetch`で、リモートリポジトリから最新情報をローカルリポジトリに持ってくることができます。

#### こんなときに使った
他の方が先に作っていたプルリクにあるコミットを取得して、それにコミットを積みたかったので使いました！

#### 使い方
- `fetch`でリモートリポジトリから最新情報をローカルリポジトリに持ってくる

```
$ git fetch
```

- ブランチを切る（同じブランチ名にする）

```
$ git checkout -b kyabetu origin/kyabetu
```

- 作業後いつもどおりプッシュする

```
$ git add -p
$ git commit -m "キャベツを追加"
$ git push origin head
```




### 🔥 コミットを移動させる
`git cherry-pick`で、別ブランチの特定コミットを違うブランチに移動することができます。

#### こんなときに使った
間違えて違うブランチで作業してしまい、そこのコミットを積んでしまった！

#### 使い方
- 間違って作業したブランチからコミットIDを取得する

```
$ git checkout fix/matigai
$ git log
commit ID 23examples234
```

- 作業するはずだったブランチに移動する

```
$ git checkout fix/osushi
```

- `cherry-pick`にコミットIDを渡して、コミットを持ってくる

```
$ git cherry-pick 23examples234
```

- ブランチにコミットされてるか確認してみる（Qキーで閉じる）

```
$ git log  
```

- リモートブランチに反映させる

```
$ git push origin head
```






### 🔥 コミットしたのを、取り消すコミットをする
`git revert`で、取り消すコミットを履歴に残したまま「取り消すコミット」を新たに生成することができます。

#### こんなときに使った
間違ったブランチにコミットしていたのを消したい！（私は`git cherry-pick`でコミットを移動した後に使いました）

#### 使い方
- 取り消したいコミットがあるブランチに移動する

```
$ git checkout fix/kome
```

- コミットIDを取得する（Qキーで閉じる）

```
$ git log
commit ID 433onigiri555
```

- `revert`にコミットIDを渡して、コミットを消す（エディタを開かない、コミットメッセージを編集しない）

```
$ git revert 433onigiri555git --no-edit
```

- プッシュする

```
$ git push origin head
```






### 🔥 直前のコミットメッセージの書き換え
`git commit --amend`で、直前のコミットメッセージを編集できます。
`git commit --amend`は他のコマンドを使うと直前じゃないのも編集できるみたいです！

#### こんなときに使った
コミットメッセージ入力の途中でENTERを押しまい、変なメッセージになっちゃった！

#### 使い方
- コミットメッセージを間違える

```
$ git add
$ git commit -m "見積もりバーを"
```
- 正しいメッセージに編集する

```
$ git commit --amend -m "見積もりバーをスクロール下にあるように固定"
```
- リモートブランチに反映させる

```
$ git push origin head
```

## おしまい
今回コマンドを知って、これからはこのコマンドを使うだけでなく、コマンドのオプションも知って活用できるようになりたいと思いました！！がんばるぞー🍣
Ruby　正規表現について　1

#はじめに
正義表現を学んでいく上で、1つずつ整理していきます。
私はVScodeで記載し、ターミナルで実行するやり方で実践しております。
もうすでにご存知の方、省略の仕方等ご存知でしたら、ご教授願います。

#気をつけること
正規表現のコードを書く際に気を付けることは【1つずつ順番に解決していく意識】と思います。
（今となっては、当たり前かと思いますが・・・）
私がしてしまったミスは、複数の正規表現を1度に解決してしまおうとし、パニックになりました。
ですので、これから正規表現を学習する方は落ち着いて1つずつ解決していきましょう。

#正規表現の種類
今回は以下３つのメソッドを学びました。

①　subメソッド
②　splitメソッド
③　matchメソッド

#subメソッド

置換したい文字列1つを別の文字列に置換したい時に使うメソッドです。


```qiita.rb
#使用するメソッド
.sub(/置換する前の文字列/,"置換したい文字列")

#実践してみます。

#現在のコード
action = "らいが君が寝る。"
puts action

#らいが君の部分だけ違う文字列に置き換える。
action = "らいが君が寝る。"
  action = action.sub(/らいが君/,"キータ君")
puts action
```

【結果】
らいが君が寝る。　→　キータ君が寝る。　に置き換えることができたと思います。

★【補足】
gsubメソッドというものがあります。
文字列内で置換したい文字が複数含まれている場合、その全てを置換するという意味です。




#splitメソッド

文字列を分割したい時に使うメソッドです。

```qiita.rb
#使用するメソッド
.split(/区切る要素/)

#実践してみます。

#現在のコード
hobby = "ゲーム,散歩,筋トレ"
puts hobby

#上記コードを分割する。(/,/)で区切ります。
hobby = "ゲーム,散歩,筋トレ"
  hobby = hobby.split(/,/)  
puts hobby
```
【結果】
ゲーム,散歩,筋トレ
↓
ゲーム
散歩
筋トレ
に分割できたと思います。

★【捕捉】
配列[ ]を使うことで、指定する要素を取り出すことができます。

```qiita.rb
#(/[,]/)で区切ります。
hobby = "ゲーム,散歩,筋トレ"
  hobby = hobby.split(/[,]/)[2]
puts hobby
```
【結果】
筋トレのみターミナル上に記載されたかと思います。


#matchメソッド
文字列の中に指定した文字列が含まれているのかを確認する時に使うメソッドです。

```qiita.rb

#使用するメソッド
.match(/含まれているか確認したい要素/)

#if文と併せて、実践してみます。
str = "Hello, raiga"
if str.match(/raiga/)
  puts "その言葉は含まれています。"
else 
  puts "その言葉は含まれていません。"
end
```
【結果】
その言葉は含まれています。とターミナル上に記載されていれば成功です。



#さいごに
私も日々勉強中です。新しく出会った正規表現等があれば随時更新します。
皆様の復習にご活用頂けますと幸いです。
ブロックチェーンデータの分析に役立つサイト

### Bitcoin
・WalletExplorer.com
https://www.walletexplorer.com

・Blockchain Explorer (Bitcoin)
https://www.blockchain.com/ja/explorer

・Bitcoin Block Explorer
https://btc.com

### Ethereum
・Etherscan
https://etherscan.io

・Blockchain Explorer (Ethereum)
https://www.blockchain.com/explorer?view=eth_blocks

・Etherchain
https://www.etherchain.org

### その他
・Bitcointalk.org
https://bitcointalk.org
Kaggle:Introduction to Manual Feature Engineering その1

https://www.kaggle.com/willkoehrsen/introduction-to-manual-feature-engineering

やっていることはメモしたほうがいいと思った。QiitaはメモもOKとのことなのでここにメモしておこう。

本Notebookではテーブルを色々組み合わせる、、と考えるとややこしいけど、

ただclient_idでgroup by して countするだけ、その行をappication_trainに追加することで特徴量を増やす、
と考えると簡単でよい。

しかしこのKDEプロットはいろいろなところで有用ではないのか、と感じる。
この手のグラフ、もちろん出したことはあるんだけど、名前がついているいうのはいいことだよね。共通理解のために。

マルチレベルインデックスを1レベルに平坦化するのも機械学習以外のどこかで役立ちそう・・な気がする。

続きは
Function for Numeric Aggregations
https://www.kaggle.com/willkoehrsen/introduction-to-manual-feature-engineering#Function-for-Numeric-Aggregations
から。

## そもそもpythonにこんなのあるんだ。
- sorted()

リスト渡すとソートしてくれる。
sorted([1,2,4,4,1,1,2,5,555,230])
```[1, 1, 1, 2, 2, 4, 4, 5, 230, 555]```

ソート方法に関数も使えるので、
new_corrs = sorted(new_corrs, key = lambda x: abs(x[1]), reverse = True)
x[1] (correlation)の絶対値でソート（逆順）、と。


## 覚えた英単語
- institution 機関
- deal with A Aに対処する
- by pure chance まさに偶然、単なる偶然で

覚えたというか忘れてるだけなんだけど。
RustのDebugとDisplay

# 概要
Rustでは簡単にprintするための`Debug`ときれいにprintするための`Display`という2つのtraitがあります。
初心者ながら、これらを調べるのに苦労したので、書き残しておきます。

簡単に、次のような単方向リストで例示します。メソッドの実装は割愛します。

```rust
#[derive(Debug)]
struct List<T> {
    head: Option<Box<Node<T>>>,
}
#[derive(Debug)]
struct Node<T> {
    value: T,
    next: Option<Box<Node<T>>>,
}
```

# Debugの場合
上のように`#[derive(Debug)]`とすることにより簡単に実装されます。使うときは`{:?}`とすることに注意！
また、`dbg!`マクロも便利です(`eprintln!`と同じくstderrに出力され、何行目の出力かも出る。詳しくは[Rustのdbg!マクロについて](https://zenn.dev/masinc/articles/rust-macro-dbg))。

```rust
let mut list = List::new();
for i in &[1, 2, 3] {
    list.push_back(i);
}
println!("{:?}", &list); // 表示結果 List { head: Some(Node { value: 1, next: Some(Node { value: 2, next: Some(Node { value: 3, next: None }) }) }) 
dbg!(&list); // これでもよい
```

#Displayの場合
次のように実装してみます。結構やってみると難しいです。`Node`に入っている値が`Display`を実装していないと難しいので`<T: fmt::Display>`としています。

```rust
use std::fmt;
impl<T: fmt::Display> fmt::Display for List<T> {
    fn fmt(&self, f: &mut fmt::Formatter) -> fmt::Result {
        let mut node = match self.head {
            None => return write!(f, "has no nodes"),
            Some(ref b) => {
                let _ = write!(f, "{} ", &b.value); // 結果を明示的に捨てないとwarnが出る
                b.as_ref()
            }
        };
        while let Some(ref b) = node.next {
            let _ = write!(f, "{} ", &b.value);
            node = b.as_ref();
        }
        write!(f, "") // 上で結果を捨てないでそれを返すほうが自然?　Stringを伸ばしていって最後にwrite!したほうがいい？
    }
}
```

とすると

```rust
let mut list = List::new();
println!("{}", &list); // 表示結果 has no nodes
for i in &[1, 2, 3] {
    list.push_back(i);
}
println!("{}", &list); // 表示結果 1 2 3 
```

となります。
2つの配列でvalueが一致したものを抽出

- 名前とチーム名を書いたプレイヤー一覧
- 好きなチームを書いたファン一覧
- ファンが好きなチームに所属しているプレイヤーを取得する

```javascript
const playerList = [
  {
    id: 1,
    name: 'イチロー',
    team: 'マリナーズ',
  },
  {
    id: 2,
    name: '松井',
    team: 'ヤンキース',
  },
  {
    id: 3,
    name: 'マー君',
    team: 'ヤンキース',
  }
];

const fanList = [
  {
    id: 1,
    team: 'レッドソックス',
  },
  {
    id: 2,
    team: 'ヤンキース'
  },
  {
    id: 3,
    team: 'ジャイアンツ'
  }
];

const pupolarTeamList = fanList.map(fan => fan.team)
const popularPlayerList = playerList.filter(player => pupolarTeamList.includes(player.team));

console.log(popularPlayerList)

/*
[
  {
    id: 2,
    name: '松井',
    team: 'ヤンキース',
  },
  {
    id: 3,
    name: 'マー君',
    team: 'ヤンキース',
  }
]
*/
```

## チームごとに分ける

- ファンが好きなチームに所属しているプレイヤーをチームごとに分ける

```javascript
const playerList = [
  {
    id: 1,
    name: 'イチロー',
    team: 'マリナーズ',
  },
  {
    id: 2,
    name: '松井',
    team: 'ヤンキース',
  },
  {
    id: 3,
    name: 'マー君',
    team: 'ヤンキース',
  }
];

const fanList = [
  {
    id: 1,
    team: 'レッドソックス',
  },
  {
    id: 2,
    team: 'ヤンキース'
  },
  {
    id: 3,
    team: 'ジャイアンツ'
  },
  {
    id: 4,
    team: 'マリナーズ'
  }
];

const pupolarTeamList = fanList.map(fan => fan.team)

let eachTeamPlayerList = [];
pupolarTeamList.forEach((pupolarTeam) => {
  const eachTeamPlayer = playerList.filter(player => playerTeam === pupolar.team);
  if (eachTeamPlayer.length) {
    eachTeamPlayerList.push(eachTeamPlayer);
  }
});

console.log(eachTeamPlayerList)

/*
[
  [
    {
      id: 2,
      name: '松井',
      team: 'ヤンキース',
    },
    {
      id: 3,
      name: 'マー君',
      team: 'ヤンキース',
    }
  ],
  [
    {
      id: 1,
      name: 'イチロー',
      team: 'マリナーズ',
    },
　]
]
*/
```
TypeScriptの配列のKeyを変数で指定したい時

# typescriptの配列をkey指定したい時

```typescript:test.ts

let example = 'like';
let exampleArray = { like: 'apple'}

console.log(exampleArray[example]);

```

上記コードだと

`Element implicitly has an 'any' type because type '{ like: string; }' has no index signature.
`

indexのsignatureは勝手にanyになるため型指定してあげないとだめ。
[参考](https://www.atmarkit.co.jp/ait/articles/1501/29/news117_4.html)

要するにkeyにどの型が入って、要素になんの型が入っているかを指定してあげる。

```typescript:test.ts

let example = 'like';
let exampleArray: { [keys: string]: string; } = { like: 'apple' }

console.log(exampleArray[example]); // 'apple'

```

Keyはnumberとstringしか指定出来ない。keyはanyとして指定は出来ないので

```typescript:test.ts

let exampleArray = { 1: 'apple', '2': 'orange' };

```

当たり前だが上記のような場合は変数が使えなくなる。

要素にはなんの値でも代入出来る。なので数値も文字列も入れるのであれば要素側はany型の指定も可能。

なので先程も記述したが
Keyはnumberとstringしか指定出来ない。keyはanyとして指定は出来ないので

```typescript:test.ts

let exampleArray {[keys: string | number ]: string;} = { 1: 'apple', '2': 'orange' };
//　↑のようにorも使えない。

//逆に要素側は
let exampleArray {[keys: string]: string | number;} = { '1': 'apple', '2': 130 };
//のように指定出来る。
```

※ただ要素側の返り値がstringを要求している場合or記述は当たり前のようにエラー吐くので注意

おまけ：色んな所で使用するのであればinterfaceとして作って置くことも出来る

```typescript:test.ts
interface ArrayType {
  [index: string]: string;
}

let example = 'like';
let exampleArray: ArrayType = { like: 'apple' }

console.log(exampleArray[example]); // 'apple'


```

# 最後に

ソース自体を調べたわけではなく自分の知りたい範囲で実際のコードでテストしたのみです。
間違い、ご指摘内容があれば気軽にお願いいたします
Pipenvのeditable/gitでsrc以外にチェックアウトする

Pipenvで、パッケージの最新masterを使いたい!などのときは以下のようにする。

`pipenv install -e git+https://github.com/graphql-python/graphene-mongo.git#egg=graphene-mongo`

これだと、 `[VENV]/src`か`[CWD]/src`にリポジトリがチェックアウトされる。
今回、srcにぶちまけられると困るシチュエーションがあったので方法を探した。

どうやら`PIP_SRC`にディレクトリを指定すれば良いらしい。
`PIP_SRC=libs pipenv install -e git+https://github.com/graphql-python/graphene-mongo.git#egg=graphene-mongo`
で今の所うまくいってる

このあたりかな?
https://github.com/pypa/pipenv/issues/756
https://github.com/pypa/pipenv/blob/21e9e242449b4a1dbf112dbec168744528a14ecc/pipenv/vendor/passa/internals/_pip.py#L25-L33
Google PageSpeed Insightsでサイトのページ表示速度の改善方法

#はじめに
独学で未経験からWebサイトをリーリースしました。
実際に自身のサイトはどうなのか？と疑問に思ったのでGoogle PageSpeed Insightsでチェック、改善してみようと思います。

##Google PageSpeed Insightsとは
Google PageSpeed Insightsを使うとモバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。

Webサイトの表示速度はSEOや検索順位にも影響があるとも言われています。

＊＊主な機能＊＊
・速度スコアのチェック
・最適化スコア
・最適化についての提案

##実際に使ってみる
###<details><summary>URLを上の欄に入力</summary></details>
![screencapture-developers-google-speed-pagespeed-insights-2020-01-31-01_06_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451241/ea35130a-cca0-097a-be98-07999347ce3c.png)

スコアと改善項目が表示されました!

##<details><summary>主な改善項目</summary></details>

####1.適切なサイズの画像
適切なサイズの画像を配信して、モバイルデータ量を節約し読み込み時間を短縮してください。

####2.次世代フォーマットのでの画像配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

####3.効率的な画像フォーマット
画像を最適化すると、読み込み時間を短縮しモバイルデータ量を抑えることができます。

####4.レンタリングで妨げるリソースの除外
ページの First Paint をリソースがブロックしています。重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。

####5.使用していないCSSを削除してください
スタイルシートから古いルールを削除し、スクロールせずに見える範囲のコンテンツに使用されていない CSS の読み込みを遅延させると、データ通信量を減らすことができます。



##<details><summary>改善策</summary></details>
####画像のサイズ変更
適切なサイズの画像を提供するための主な戦略は、「レスポンシブ画像」と呼ばれます。
今回はgulpで画像圧縮とImageMagickでサイズ変更をして画像のレスポンシブ対応をしてみたいと思います。

＊＊結果＊＊
![screencapture-developers-google-speed-pagespeed-insights-2020-01-31-17_50_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/451241/12abff0c-ee95-7ca0-ff0b-b4d5ca2c7f92.png)

画像だけで14％改善できました！

#おわりに
サイトの公開前に画像のサイズや圧縮をすることの大切さが分かりました！
不要なCSS、JSを削除する項目もありましたが、そのあたりも考慮しながらサイト構築をしていきたいと思います。
バックアップテーブルを作る

postgresでバックアップテーブルを作成するときのsqlコマンドを紹介します。

##バックアップテーブルの作り方

コマンドは下記になります。
実行するとテーブル構造、テーブル内のデータがすべて同じバックアップテーブルができます。

```
create table バックアップテーブル名 as select * from テーブル名;
(例) create table b_user as select * from user

※またwhere句をつけることで絞り込んだデータでバックアップテーブルを作成できます。
create table バックアップテーブル名 as select * from テーブル名 where 条件;
(例) create table b_user as select * from user where name = hogehoge
```

※カラム、データは全く同じにできますが、プライマルキー、シーケンスはコピーできないので注意ください。
Ruby　コーティング規約について　レイアウト編　1

# はじめに
Rubyの基礎を学習中の方に向けて記載致します。
私自身これからチーム開発を行う上で大事にしたい。知っておきたいことをOutputします。

#レイアウトについて
①インデント（空白）にはスペース２つを意識する。

```ruby:qiita.rb
#悪い例
def dog
    puts "かわいい" #スペース4つ
end
dog

#良い例
def dog
  puts "かわいい"　#スペース2つ
end
dog
```

②式の区切りに;を使わない。１行につき式１を意識する。

```ruby:qiita.rb
# 悪い例
puts "dog"; #余分なセミコロン
puts "dog" ; puts "cat" # ２つの式が１行にある

# 良い例
puts "dog"　#セミコロンを削除

puts "dog" #2つの式を２行に分けた　＋　セミコロン削除
puts "cat"
```

#さいごに
毎日更新します。
皆様の復習等にご活用頂けますと幸いです。
DjangoにてCSRF検証に失敗エラー：テンプレートにcsrf_tokenを追記

#CSRF検証とは

###Djangoを用いたページで以下のようなCSRF検証関連のエラーが起きたので、勉強。


アクセス禁止 (403)
CSRF検証に失敗したため、リクエストは中断されました。


##1. CSRFとは
こちらのサイトを参考
https://www.shadan-kun.com/blog/measure/2640/
https://www.trendmicro.com/ja_jp/security-intelligence/research-reports/threat-solution/csrf.html

>オンラインサービスを利用するユーザーがログイン状態を保持したまま悪意のある第三者の作成したURLなどをクリックした場合などに、本人が意図しない形で情報・リクエストを送信されてしまうことを意味

ユーザに不正なwebページを送り付け、そこでユーザがログイン情報などをうってPOST送信することでWebサーバーに不正なリクエストを送らせる手法です。

##2. どうする
これは、 POST リクエストの際に「csrfmiddlewaretoken」 というパラメータがリクエストに含まれていない場合に発⽣するエラー。

Django では POST リクエストにCSRF対策を施すことが推奨されている。 そして、POSTリクエストにCSRF対策のためのトークン⽂字列が含まれていない場合にこのような 403 エラーを返す仕組みがデフォルトで⼊っていて、 そのトークンが csrfmiddlewaretoken

**つまり、**テンプレートのformタグに
{% csrf_token%}
を挿入。
JavaScriptを学習するために買った書籍

JavaScriptを学習するために県庁所在地で一番の本屋さんのプログラミングコーナーで選んで買った本のリストです。

- いまどきのJSプログラマーのためのNode.jsとReactアプリケーション開発テクニック（クジラ飛行机／ソシム）
- JvaScript関数型プログラミング／複雑性を抑える発想と実践法を学ぶ（Luis Atencio／インプレス）
- JavaScript本格入門／モダンスタイルによる基礎から現場での応用まで（山田祥寛／技術評論社）

```
<!DOCTYPE html>
<html lang=“ja”>
<head>
     <meta charset=“utf-8”>
     <title></title>
</head>
<body>
     <script src=“myscript.js"></script>
     <script>       
          console.log(“hello world!”);
     </script>
</body>
</html>
```