OmniAICreator/Qiita-1.07M huggingface dataset:
応用カリキュラム Sass と Haml

Sassとは、CSSの機能を拡張した言語。
CSSを効率的に書けるようになり、変数を使ったり計算を行ったりすることまでできる。
複数のCSSファイルをまとめることもできる。

ファイル拡張子には、.sassと.scssの2種類があり書き方が異なる。
.sassの方が先発だけども、CSSの書き方との差が大きすぎて普及しなかったらしく、
現在は.scssの方が主流。

```scss
/* ネスト構造 親子関係のタグはネストさせて書くことができる。 */
/* 変数 $変数名: 値; */
$aaa: rgb(30,30,30);
.bbb {
 color: $aaa;
}
/* パーシャル 分割したSassファイルのこと 分割したSassファイルは、「_」から始まるファイル名をつける。 */
@import "reset"; /* _reset.scssを読み込む */
/* 定義済みの変数を呼び出し先で使うこともできる。 */
```

```scss
/* mixin まとまったスタイルを定義することができる機能 */
/* @mixin mixin名() {} で定義 */
/* 引数を渡して呼び出すこともできる。 */
@mixin aaa() {
  color: black;
}
.bbb {
  @include aaa();
}
```

- 親参照セレクタ &
- 疑似要素 ::after等(色々定義されてる) &:afterと書くのが一般的みたい

## Sassのフォルダ構成

- projects
   - index.html
   - style.css
   - ./stylesheets/
      - style.scss
      - _reset.scss
      - ./config/
      - ./mixin/
      - ./modules/
      - ./vendor/
      - ./override/

このような構成が一般的みたい。

##BEM

CSSを記述する時の命名ルール
ページを構成する要素を、Block, Element, Modifierに分けて命名する。

###Block

要素の大元になるブロック要素。命名は名詞を使用。

###Element

Blockの子要素。命名は名詞を使用。

###Modifier

Block,Elementに特別な修飾をする要素。命名には形容詞を使用。

###命名規則

BlockとElementを繋ぐ場合は、アンダースコア2つで繋ぐ。
Modifierに繋ぐ場合は、ハイフン2つで繋ぐ。
続けて書くと、Block__Element--Modifier

##HAML

HTMLよりも簡単にHTMLを書く(？)ビューテンプレートエンジン
#15 TabBarItemをカスタマイズする1例

#はじめに
個人のメモ程度の出来なのであまり参考にしないで下さい．


#環境
Xcode：11.2.1
Swift：5.1.2
2019/11



##part1
`Tab Bar Item`を選択する．

<img width="445" alt="スクリーンショット 2019-11-24 午前0.07.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/112d0d5a-7d57-27e3-f926-28c1b810d255.png">



##part2
`Attributes inspector`の`Title`を任意の文字列にし，`Image`を任意のものを選ぶ．

<img width="259" alt="スクリーンショット 2019-11-24 午前0.13.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534708/fbbf27f7-9792-392b-133b-221af37d5947.png">
VBAと共に去りぬ : コード集「基本編+基本編」をかけ合わせただけのレシピ

特定フォルダのファイルを開く  

    
    Sub openFile()
        Dim buf As String, wb As Workbook
        Dim cnt As Long
        Const targetPath As String = "特定のフォルダ"
        Dim excelFileName As String
        excelFileName = InputBox("Please enter a part of filename. Folder is" & targetPath)
        対象のフォルダ内のファイル全てを検索　一番最初のファイルがbufへ入る
        buf = Dir(targetPath & "*")
        
        Do While buf <> ""
            If InStr(1, buf, excelFileName, vbTextCompare) > 0 Then
                Exit Do
            End If
            buf = Dir() 'Dir()は自動的に次の値を吐き出す
        Loop

        'ファイルの存在チェック
        If buf = "" Then
            MsgBox buf & vbCrLf & "は存在しません", vbExclamation
            Exit Sub
        End If
        '同名ブックのチェック
        For Each wb In Workbooks
            If wb.Name = buf Then
                MsgBox buf & vbCrLf & "はすでに開いています", vbExclamation
                Exit Sub
            End If    
        Next wb
    
        'Excelを開く場合、ユーザーフォームを閉じておかないと開けない
        Unload UserForm1
        'ファイルを開く
        CreateObject("Shell.Application").ShellExecute targetPath & buf

    End Sub

Kさんへ　VBAのススメ　SES業界で働いてる人は特におすすめ
https://www.youtube.com/watch?v=_3Yh85wlvQs
年末まで毎日webサイトを作り続ける大学生 〜36日目 keyDownで文字入力ゲーム(1)〜

##はじめに
こんにちは！@70days_jsです。

タイピングゲームを作ろうと思い、今日はその触りということでkeydownを使って文字入力できるようにしました。
今日は36日目。(2019/11/23)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day36.html

##やったこと
ここ数日かけてちゃんとしたタイピングゲームを作ろうと思い、今日はその触りとしてeventオブジェクトのkeydownを使って文字入力で遊びました。↓
![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/abed8157-c643-f509-f279-3b727e350121.gif)


```html
<body>
    <p>あの時、どう思ったのか。</p>
    <div id="keyDownWrapper">
        <div id="keyDown"></div>
    </div>
</body>
```

id="keyDown"のdivに文字が入力されていきます。

javascript↓

```javascript
document.addEventListener('keydown', logKey);
let keyDown = document.getElementById('keyDown');
let count = 0;

function logKey(e) {
    let myKeyCode = e.keyCode;
    console.log(myKeyCode);
    if (myKeyCode == 190) {
        keyDown.innerHTML += '.<br>';
        count++;
    } else if (myKeyCode == 32) {
        keyDown.innerHTML += ' ';
        count++;
    } else if (myKeyCode == 13) {
        keyDown.innerHTML += '<br>';
        count++;
    } else if (myKeyCode < 65 || myKeyCode > 91) {
        return false;
    } else {
        let myCharCode = String.fromCharCode(myKeyCode);
        let myCharCodeLower = myCharCode.toLowerCase();
        keyDown.innerHTML += myCharCodeLower;
        count++;
    }

    if (count > 25) {
        keyDown.innerHTML += '<br>';
        count = 0;
    }
}
```

イベントリスナーで、keydownされたらlogkey関数を呼び出す設定にしています。
documentで呼び出しているので、キーを押したらすぐに呼び出されます。

> let myKeyCode = e.keyCode;

keyCodeプロパティを参照して、キーコード番号を取り出します。

190は.です。.が押されたら.と改行をする設定にしています。
32はスペースです。
13は改行です。
65~91でa~zをカバーしています。それ以外の数字はfalseを返します。（0~9はカバーしていません）
count変数は、25文字を超えたら自動的に改行されるように設定しています。

##感想
色々調べていると、タイピングゲームにはどうやらブラウザの互換性とか厄介な問題が絡んでくるようです。さて、どう乗り切ろう・・・。

最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。

##参考
1. キーコード一覧 (http://faq.creasus.net/04/0131/CharCode.html)
2. String.fromCharCode() - JavaScript | MDN (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode)

参考にさせていただきました。ありがとうございます！
AtCoder DISCO presents ディスカバリーチャンネル コードコンテスト2020 予選 参戦記

# AtCoder DISCO presents ディスカバリーチャンネル コードコンテスト2020 予選 参戦記

## [A - DDCC Finals](https://atcoder.jp/contests/ddcc2020-qual/tasks/ddcc2020_qual_a)

4分で突破. 書くだけ. ARC の A 問題ってこんなに簡単だっけ?

```python
X, Y = map(int, input().split())


def f(n):
    if n == 3:
        return 100000
    elif n == 2:
        return 200000
    elif n == 1:
        return 300000
    else:
        return 0


result = f(X) + f(Y)
if X == 1 and Y == 1:
    result += 400000
print(result)
```

## [B - Iron Bar Cutting](https://atcoder.jp/contests/ddcc2020-qual/tasks/ddcc2020_qual_b)

26分で突破. WA 1個.

切れ目の位置を p、棒の長さを l とすると、p が真ん中より左にある場合は、左にその長さの差である (l - p) - p = l - 2p 足すか、右を l - 2p 減らす必要がある. 同様に p が真ん中より右にある場合は、右に 2p - l 足すか、左を 2p - l 減らす必要がある. つまるところ |2p - l| のコストとなり、すべての切れ目で必要なコストを求めて最小値を取ればいい.

```python
N = int(input())
A = list(map(int, input().split()))

a = A[:-1]
for i in range(1, N - 1):
    a[i] += a[i - 1]

l = sum(A)
print(min(abs(p + p - l) for p in a))
```

最初全部計算せず、真ん中の2つを計算するように書いたせいで WA を食らった……. 計算量的に問題ないんだから素直に全部計算すればよかった.

## [C - Strawberry Cakes](https://atcoder.jp/contests/ddcc2020-qual/tasks/ddcc2020_qual_c)

突破できず. 終了12分半後にAC.

いちごをスタート地点として、ぶつからない限り左、上、右に領域を広げ、最後に下に残ったところは上をコピーという方針.

```python
H, W, K = map(int, input().split())
s = [input() for _ in range(H)]

a = [[-1] * W for _ in range(H)]

sbs = []
n = 1
for i in range(H):
    si = s[i]
    for j in range(W):
        if si[j] == '#':
            a[i][j] = n
            n += 1
            sbs.append((i, j))

for sb in sbs:
    i, j = sb
    n = a[i][j]
    t, l = i - 1, j - 1
    r = j + 1
    while t > -1:
        if a[t][j] != -1:
            break
        t -= 1
    t += 1
    while l > -1:
        if a[i][l] != -1:
            break
        l -= 1
    l += 1
    while r < W:
        if a[i][r] != -1:
            break
        r += 1
    r -= 1
    for y in range(t, i + 1):
        ay = a[y]
        for x in range(l, r + 1):
            ay[x] = n

for h in range(H - 1, -1, -1):
    if a[h][0] != -1:
        break
h += 1

for i in range(h, H):
    ai1 = a[i - 1]
    ai = a[i]
    for j in range(W):
        ai[j] = ai1[j]

for i in range(H):
    print(*a[i])
```
VBAと共に去りぬ : コード集「基本編」

###workbook、worksheetの指定

	Sub randomSubName()
	
	Dim WB As Workbook
	Set WB = ThisWorkbook
	Dim WS As Worksheet
	Set WS = WB.Worksheets("SubjectList")
	
	WS.Cells(1, 1).Value = "cells provide (rows, column), that's what you always forgot hah"
	WS.Cells(1, 2).Value = "paypal mafia"
	WS.Cells(1, 3).Value = "tiktok pajama"

	End Sub


###fileを開く
【DB設計】正規化とパフォーマンス


#論理設計とパフォーマンス　〜正規化の欠点と非正規化
[達人に学ぶDB設計　徹底指南書](https://www.shoeisha.co.jp/book/detail/9784798124704)を読み返して。

まず、
データの整合性を保つ為、正規化を行う事は大原則。しかし、正規化によってパフォーマンスに少なからず影響があるということも理解しておく必要がある。

###正規化とパフォーマンスはトレードオフの関係

正規化を進めていくと、複数のテーブルに分けて管理し、それぞれのデータを参照しながらデータを抽出するが、その分コストが高くなってしまうという。特にテーブル同士の結合はSQLの処理の中でもコストが高い。


#正規形のデメリット
主なデメリットは、正規化されたテーブルにおいて、単独のテーブルだけからでは必ずしも欲しいデータの全てをカバーできないということ。


以下、テーブル、SQLは書籍から引用
例：

####第３正規形のテーブル

会社

|会社コード|会社名|
|---|---|
|C0001|A商事|
|C0002|B化学| 
|C0003|C建設| 

社員

| 会社コード | 社員ID | 社員名 | 年齢 |　部署　|
|---|---|---|---|---|
| C0001 |000A  |加藤  |40  | D01 |
| C0001| 000B |藤本  |32  |D02  |
| C0001 |001F  |三島  |47  |D03  |
|C0002 | 000A | 斎藤 |47   |D03   |
|C0002   |009F   |田島   |25   |D01   |
|C0002    | 010A  |渋谷   |33   |D04   |

部署

|部署コード|部署名|
|---|---|
|D01|開発|
|D02|人事| 
|D03|営業| 
|D04|総務|

####1、ある社員の勤めている会社を知りたい

```
SELECT
    会社.会社名
,   社員.社員名
FROM 社員 INNER JOIN 会社 
  ON 社員.社員コード = 会社.会社コード
WHERE 社員.社員コード = '田島';
```
```
会社名  社員名
-----  -----
B化学   田島
```

####２、会社に加えて部署名も知りたい

```
SELECT
    会社.会社名
,   社員.社員名
,   部署.部署名
FROM 社員 INNER JOIN 会社 
  ON 社員.社員コード = 会社.会社コード
         INNER JOIN 部署 
  ON 社員.部署コード = 部署.部署コード
WHERE 社員.社員コード = '田島';
```
```
会社名  社員名  部署名
-----  -----　-----
B化学   田島   開発
```

####３、会社ごとに社員数をまとめたい
※社員が登録されていない会社があるので外部結合(OUTER JOIN)を使っている。

```
SELECT
    会社.会社コード
,   COUNT(社員.社員名) AS 社員数
FROM 会社 LEFT OUTER JOIN 社員
   ON 社員.会社コード = 会社.会社コード
GROUP BY 会社.会社コード
```

```
会社コード  社員数　
-----    -----
C0001    3
C0002    3
C0003    0
```

いずれもテーブル同士を結合し、外部キーを参照して欲しいテータを抽出している。

##非正規形でパフォーマンスを追求するデメリット
一方、非正規化することにより、正規化のデメリットであったパフォーマンスは解決できる。

####「ある社員の勤めている会社を知りたい」を非正規化
例えば、テーブルを分けず、１つのテーブルで全ての情報を管理していた場合、以下のSELECT文でデータは抽出できる。ここでは、結合をしていない為、シンプルなSQLになっておりパフォーマンスも改善できる。

| 会社コード | 会社名 | 社員ID | 社員名 |年齢　|　部署コード　|  部署名 |
|---|---|---|---|---|---|---|
| C0001 |A商事 |000A  |加藤  |40  | D01 | 開発 |  
| C0001| A商事| 000B |藤本  |32  |D02  | 人事 |  
| C0001 | A商事| 001F  |三島  |47  |D03  | 営業 |  
|C0002 |  B化学|000A | 斎藤 |47   |D03   | 営業 |  
|C0002   | B化学|009F   |田島   |25   |D01   | 開発 |  
|C0002    |  B化学|010A  |渋谷   |33   |D04   | 総務 |  

```
SELECT
    会社名
,   社員名
,   部署名
FROM 社員
WHERE 社員名 = '田島'
```

```
会社名  社員名
-----  -----
B化学   田島
```
###問題点
大きな問題点として、データの更新が非常に非効率になるなど保守性が良くない。
例えば、ある会社が買収され、会社の名前が変更になった場合、社員テーブルの会社名のレコードを一つ一つ更新する必要がある。

非正規化の場合：

```
UPDATE　社員
  SET 会社名 = 'E物産'
WHERE 会社コード = 'C0001'
```

対し、正規形の場合、会社テーブルの１レコードのみ更新すればいい。

```
UPDATE　会社
  SET 会社名 = 'E物産'
WHERE 会社コード = 'C0001'
```
##ではどちらがいいか
原則的には非正規化は認められない。
引用の引用：
クリス・デイト
>十分に正規化された設計を諦めてもよいのは、パフォーマンスを向上させるためのその他全ての戦略が要件を満たさないだけである。

#まとめ
・正規化は、パフォーマンスが悪くなることも
・非正規化は、パフォーマンスは改善されるが、保守性に難あり
・原則的には正規化を行うこと。
・非正規化は最後の手段。

参考文献：
[達人に学ぶDB設計　徹底指南書](https://www.shoeisha.co.jp/book/detail/9784798124704)
データ構造とアルゴリズムとは

#アルゴリズムとデータ構造
例えばカレーを作ることをイメージしてみよう。
カレーには様々な材料を用い、これらを切ったり、加熱して完成させる。
この時の材料が「データ」、調理の手順が「アルゴリズム」にあたる。
またデータをカテゴリーごとに管理することをデータ構造という。
#アルゴリズム
アルゴリズムとは簡単にいうと、何かを行う際のやり方や考え方のこと。
アルゴリズムは問題解決の手段ともいえる。
#データ構造
データ構造とはデータのつながりのことである。
rails javascript/jqueryの実装　メソッドその2


# jbuilder:array! メソッド

JSON形式で配列の形式で返したい場合はarray!を使用します。

jbuilderという拡張子を持つテンプレートでは
JSONという名前のJbuilderオブジェクトが自動的に利用できるようになります。

Jbuilderオブジェクトは、JSON形式に返すための便利なメソッドがたくさん用意されており
jbuilder:array!もその一つです。

```javascript:app/views/comments/sample.json.jbuilder
json.array! @comments do |comment|
  json.id comment.id
  json.text comment.text
  json.image comment.image
  json.user_id comment.user_id
  json.nickname comment.user.nickname
  json.user_sign_in current_user
end
```

# empty メソッド
指定したDOM要素の子要素のみを削除するメソッドです。
指定したDOM要素自体を削除するremoveメソッドとは異なるので注意してください。

```js
$(".contents.row").empty();
```

# forEach メソッド

forEachは、与えられた関数を配列に含まれる各要素に対して一度ずつ呼び出します。

# animateメソッド

animateメソッドは、メソッドを利用したオブジェクト(レシーバ)が持つプロパティなどを
指定した値まで徐々に変化させることができるメソッドです。

横100pxのdiv要素を用意し、200pxまで有効にすると下記のようになります。

```js
$('.yoko').animate({'height' : '200px'});
```

# カスタムデータ属性
カスタムデータ属性とは、HTMLタグの属性の１種です。

カスタムデータ属性を使うときは、属性名を「data-」で始まる名称にします。

jQueryでは、取得したDOMに対しdataというメソッドを利用することで、カスタムデータ属性の値を取得可能です。

```html:htmlの例
<p class="sample">  <!--classが属性にあたります-->

<p class="sample" data-comment=100> <!--data-commentがカスタムデータ属性になります-->

     <script>
       var blog = $("#blog");
 //jQueryでカスタムデータ属性の値を取得
       alert("author : " + blog.data('comment'));
     </script>
```

# WebAPIとは
前提として
APIは、Application Programming Interfaceの略称で
アプリケーション開発者が外部に向けてアプリケーションの機能の一部を公開する仕組みです。

WebAPIは、HTTPやHTTPS通信を通じて利用するAPIのことです。

# 名前空間(namespace)

名前空間をつけることにより、同様のクラス名で名付けたクラスを作ってもそれらを区別することができます。
controllers/messages_controller.rbと
controllers/api/messages_controller.rbのようにディレクトリで分けるなど

下記だとAip::でapiディレクトリないを指定しています。

```ruby:controller
class Api::MessagesController < ApplicationController # ::でディレクトリを指定します。
  def index
  end
end
```

## 名前空間(namespace) のルーティング

```ruby
namespace :ディレクトリ名 do ~ end
```

```ruby
Rails.application.routes.draw do
  devise_for :users
  root 'groups#index'
  resources :users, only: [:index]

#下記のように指定する
    namespace :api do
      resources :messages, only: :index, defaults: { format: 'json' }
    end
  end
end
```

# setInterval()関数
jQueryに置いて一定時間が経過するごとに処理を実行することができる関数です。

第一引数に動かしたい関数名を、第二引数に動かす間隔をミリ秒単位で渡すことができます。
※引数で渡している7000という数字は、7秒という意味になります。500にすると、0.5秒です。
こちらを小さくしすぎると、更新の際に二重でメッセージが表示されてしまう場合があるため
7000に設定してください。

```js
$(function() {
//途中省略
//$(function(){});の閉じタグの直上(処理の最後)に以下のように追記
  setInterval(reload, 7000);
});
```
JavaScript でおみくじを作ってみた


#目的
ボタンを押す度に「大吉」「吉」「中吉」「小吉」「凶」のいずれかが表示されるおみくじアプリを作成する。
（HTML CSS JavaScriptのみ使用）
おみくじアプリを作り、JavaScriptの基礎を理解する。


#コード
```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>おみくじ</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>  
   <div id="btn">?</div>
   <script src="js/main2.js"></script>
</body>
</html>
```

```styles.css
body {
  background: #e9e4e2;
}

#btn {
  margin: 30px auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-size: 42px;
  line-height: 200px;
  background: #121977;
  text-align: center;
  cursor: pointer;
  color: #fff;
  opacity: 0.9;
  box-shadow: 0 10px 0 rgb(62, 65, 209);
  border: 3px solid rgb(106, 62, 209);
  user-select: none;
}

#btn:hover{
  opacity: 0.9;
}

#btn:active {
  box-shadow: 0 5px 0 #ffeeee;
  margin-top: 35px; 
}


```

```js
'use strict';
{
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(){
    const n = Math.random()
    if (n < 0.3){
      this.textContent = "大吉"; //30%
    } else if(n < 0.45) {
      this.textContent = "吉"; //15%
    } else if (n < 0.60) {
      this.textContent = "中吉"; //15%
    } else if  (n < 0.85){
      this.textContent = "小吉"; //15%
    } else {
      this.textContent = "凶"; //15%
    }

  });
}
```
応用カリキュラム 08 データベース設計 02

## 中間テーブル

データベース設計においては、
エンティティ同士のリレーションをER図に表すが
中には、```多対多```のリレーションになるエンティティが出てくる。

そういったリレーションをデータベースで表現する場合は、```中間テーブル```というものを用いる。
エンティティ同士の組み合わせを記録するテーブルを作り
一対多の関係を経由することで、多対多のエンティティを繋げることができる。

---

railsにおいてA-B(多対多)のテーブルの間に中間テーブルを設ける場合は、

As_Bsテーブルとして、
その中間テーブルのアソシエーションは、
belongs_to :A
belongs_to :B
となって、

A,Bテーブルのアソシエーションは、
has_many :As_Bs
has_many :B, through: :As_Bs
となるみたい。

テーブル名は必須ではなく、適切な名前がなかった場合の慣例？っぽい。

---

テーブル定義を行う際は、```制約```と```インデックス```を想定しておくのを忘れずに！
Vuetify.jsをインストールしたらvue-cliのサーバが起動しなくなった話

## 症状

[Vuetify.jsのクイックスタート](https://vuetifyjs.com/ja/getting-started/quick-start)にしたがってvue-cliでVuetify.jsをインストールしてから開発サーバを起動したらエラーが発生して起動できませんでした。Vuetify.jsを導入してない段階では起動します。Windows, Mac両方で試しても同じようなエラーが出力されたため、Vuetify.jsの特定のバージョンのバグであると思われます。
実際に実行したコマンドとエラーログは以下の通りです。

```bash
$ vue create vuetify-test
$ cd vuetify-test
$ vue add vuetify
$ npm run serve

> vuetify-test@0.1.0 serve /Users/netorokot/temp/vuetify-test
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  TypeError: Cannot read property 'match' of undefined
TypeError: Cannot read property 'match' of undefined
    at VuetifyLoaderPlugin.apply (/Users/netorokot/temp/vuetify-test/node_modules/vuetify-loader/lib/plugin.js:28:29)
    at webpack (/Users/netorokot/temp/vuetify-test/node_modules/webpack/lib/webpack.js:51:13)
    at serve (/Users/netorokot/temp/vuetify-test/node_modules/@vue/cli-service/lib/commands/serve.js:161:22)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuetify-test@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuetify-test@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/netorokot/.npm/_logs/2019-11-23T13_34_16_291Z-debug.log
```

## 解決方法

stackoverflowに同じような問題を抱えている方がいました。

https://stackoverflow.com/questions/59006130/error-typeerror-cannot-read-property-match-of-undefined

これによれば、プロジェクトディレクトリ内の`node_modules/vuetify-loader/lib/plugin.js`の6行目を以下のように変更すれば良いとのことです。

```:node_modules/vuetify-loader/lib/plugin.js
- this.options = options
+ this.options = options || {}
```

なお、このバグは9時間ほど前に[issue #101](https://github.com/vuetifyjs/vuetify-loader/issues/101)にて取り上げられ、最新のリポジトリでは既に修正済みです。

修正コミット
https://github.com/vuetifyjs/vuetify-loader/commit/a8d064925b097924e2a75183f60f548a445cbae8

## 最後に

この1行に2時間近く吸われました。人生って辛いですね。
文系エンジニアがG検定に合格するには

プログラミングはおろか、AIの知識も皆無な状態から、
G検定に合格した方法についてまとめています。

#◆試験概要
JDLAが主催するディープラーニングの試験には2種類あります。
各試験のイメージは以下の通りです。

- [G検定] (https://www.jdla.org/business/certificate/?id=certificate_No01)  
ビジネス職向け／ディープラーニングを事業に活かす知識を問われる
- [E検定](https://www.jdla.org/business/certificate/?id=certificate_No01)  
ITエンジニア向け／ディープラーニングを実装する知識を問われる


今回私が受験したのは2019年11月9日に実施されたG検定です。
全226問の選択式問題を2時間で解いていきます。
問題の構成としては、前半に時事問題・後半に語句問題（テキストの内容）の2部構成という感じでした。

#◆勉強方法

## 1. 準備
###参考書を購入する
受験申込完了後、とりあえず以下2冊の本を購入しました。
他にもJDLA推薦図書としていくつかの書籍が紹介されていますが、私は一切読んでいません。

* テキスト
[「深層学習教科書ディープラーニング G検定(ジェネラリスト) 公式テキスト」](https://www.amazon.co.jp/dp/4798157554/)   

* 問題集
[「徹底攻略 ディープラーニングG検定 ジェネラリスト問題集」](https://www.amazon.co.jp/%E5%BE%B9%E5%BA%95%E6%94%BB%E7%95%A5-%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0G%E6%A4%9C%E5%AE%9A-%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%A9%E3%83%AA%E3%82%B9%E3%83%88%E5%95%8F%E9%A1%8C%E9%9B%86-%E3%82%B9%E3%82%AD%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97AI%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE-%E6%98%8E%E6%9D%BE/dp/4295005665)

###StudyAIに登録する
以下のサイトでG検定の模擬試験が無料で受験できます。
有料版もあるみたいですが、無料版でも十分な内容です。

* [G検定（ディープラーニングと機械学習の検定）](http://study-ai.com/generalist/)

## 2. 具体的やり方
やったことは２つだけ。  
> テキストを読む！
模試を解く！

これの繰り返しです。
それぞれ2周しました。
## 3. スケジュール
試験の約２か月前から勉強を開始しました。
ここでは、私の実施した勉強スケジュールを紹介します。

### １ヶ月目
#### -テキストを読む (1周目)　　　　
　1周目では、すべて完璧に理解しようとしなくて大丈夫です。歴史の流れや手法の枠組みといった大枠をつかむことが目的になります。私は通勤中、電車の中で読んでいました。

### ２ヶ月目

#### -模試を実施する（1周目）
　問題中のわからない単語を検索し、テキストの関連ページと合わせて内容を理解していきます。
ここでの目的は、正答率をあげることではないため、考え込まずサクサク進めていきましょう。私は1日20問を目安問題を消化していき、テキストに記載のない内容は直接書き込みをしていました。

###残りの数週間

####-テキストを読む（2周目）
　模試の実施（1周目）で内容を理解できているはずなので、ここでは流し読み程度しかしていません。


####-模試を実施する（2周目）
　1周目と同じ問題を、一通り解いていきます。ここでは数回に分けず、制限時間内に全問回答します。この時点で、問題を見て答えをすぐに連想できる・スラスラ解ける状態になっていれば大丈夫です。　　

####-問題集をとく（＋α）
　模試だけでは問題数が足りないと思った人はやるとよいと思いますが、やらなくても問題はありません。
購入したものの、私は実施していません。ですが、解説がテキストよりもわかりやすいので、時間がある方は解説だけ一通り読むことをおすすめします。

#◆受験当日の注意点
##1.時間配分
　問題数がかなり多いため、時間配分はきちんとしておきましょう。1時間で全問解き切り、残り1時間で見直しをするくらいがよいと思います。初めからカンニング頼みで受験すると、検索に時間を取られ、全問解き切ることは難しいでしょう。

##2.問題の取捨選択

　わからない問題はあきらめることも重要です。とりあえずどれか1つを選択して問題にチェックをつけておき、わかる問題から解いていきます。チェックを付けた問題は、全問解き切った後で見直し、少しでも正答率を上げましょう。特に、前半の時事問題で時間を取られるのはもったいないので、確実に回答できる後半問題から解いていくとよいと思います。


#◆最後に
読んでいただきありがとうございます。
これから受験しようとする方への参考となればうれしいです。
【SQL】JSON型カラムの中身の指定方法

where句の絞り込みでJSON型のカラムを用いる際、`JSON_CONTAINS()`という便利なメソッドがあったため、紹介します。

Userテーブル

| id   | name  |         favorite               |
|:-----|------:|:------------------------------:|
| 1    |   a   |{'apple': true, 'lemon': true}  |
| 2    |   b   |{'apple': true, 'lemon': false} |
| 3    |   c   |{'apple': false, 'lemon': true} |
| 4    |   d   |{'apple': false, 'lemon': fasle}|


appleが好きなユーザーだけを表示させたい場合

```sql

SELECT * FROM Users
WHERE JSON_CONTAINS(favorite, 'true', '$.apple') ;
```

以下のサイトがとても参考になりました
[MySQL JSON カラム内の配列に含まれる要素を検索する方法](https://qiita.com/ukyooo/items/19da224866affa97a211)
iOSのダークモードでアイコンの色が反転しない！

Assets内のアイコンのプロパティで「Render As」を「Template Image」に設定すると、モードに合わせてアイコンの色を変えて描画してくれるようになります。

![Screen Shot 2019-11-23 at 22.17.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50780/fcf59b9f-dada-07fc-cd59-4daa5d8a1240.png)

通常モード

![Simulator Screen Shot - iPhone 11 Pro Max - 2019-11-23 at 22.29.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50780/8a90b625-173e-fe0b-72a3-73d38ef7bbd5.png)

ダークモード

![Simulator Screen Shot - iPhone 11 Pro Max - 2019-11-23 at 22.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50780/d96a745d-12f0-bbdf-3038-73a06808f5ac.png)
応用カリキュラム 07 データベース正規化

データベースをより単純な形に分解していくこと。

主に、第一正規形〜第三正規形までがある。
第四正規形以降も存在するが、パフォーマンスの低下を招く恐れがあるので、多くの場合第三正規形に止める。

正規化は手順を進める毎にテーブルが増えていくことになる為、参照時のSQLコマンドを実行する回数が増えていくことで速度が低下する。
正規化を行っていないデータベースは、非正規形という。

##なぜ必要なのか

単純な形に分解しておかなければ、参照時に分析が必要になってしまう。
RDBにおいては、データの重複がある部分について変更があった場合
全ての重複部分について正確に更新を行わなければ、矛盾が発生してしまいデータの整合性が取れなくなってしまう。など

## 第一正規形

データが、一つのカラムに一つの値のみが設定されている状態。
繰り返し入力されている値は、カラムを一つにまとめて、各々一つずつの別レコードにする。

## 第二正規形

各テーブルにおいて、主キー基準で主キー以外のカラムが一意に決まる状態。
逆に言えば、他のカラムを一意に決めるカラム(主キー)が一つのテーブルに複数存在しない状態。

## 第三正規形

各テーブルの主キー以外のカラムについて、
カラム同士で依存関係があるカラムを分解する。

----------------

うん、カリキュラムで一緒くたにしてただけあって、第二正規形と第三正規形の違いが
ちょこっとググっただけではよく分からん。
第三正規化が必要になってる時点で、第二正規化が不十分だったんだろ？って認識になっちゃう。

でもそれで正しいのかもしれない。
第二正規化の時点では主キーがそれ以外のカラムを一意に決めているが、
第三正規化においては、「あれっ？主キー以外にもまだ主キーにできそうな項目あるじゃん！」
っていう、```第二正規化での見逃しを見つけるとか、複数の主キーで一意に決まるように見えるカラムを見つける作業```
なのかな？という認識。
【備忘録】スレッド?並列処理?なんぞそれ?【勉強用】

もう二度と重たいプログラマにならないためのメモです。

[第1回　マルチスレッドはこんなときに使う ](https://www.atmarkit.co.jp/ait/articles/0503/12/news025.html)

を見て勉強しました。

#プロセスとスレッド#
まずここからちんぷんかんぷんだったので勉強していきます。

##まずは用語説明##

###プロセス###
プログラムの実行単位
実行中のexeファイルとか

###スレッド###
一連のプログラムの流れのこと

##プロセスとスレッドの関係##
プロセスの中にあるプログラムの流れがスレッドです。
なので、プロセスの中にスレッドが複数あっても大丈夫です。

ちなみに、プロセスの中に...
スレッドが*1つ*　 →　**シングルスレッド**
スレッドが*複数*　→  **マルチスレッド**
っていいます。

#どんなときにマルチスレッドを使うのか#
パフォーマンスを向上させたい時に使います。
遅いなぁとか重いなぁとかで困ったらマルチスレッドの出番かもしれません。

##パフォーマンスの向上##
パフォーマンスの向上には次の2つを向上させると良きらしい。

1. レスポンスタイムの向上
2. スループットの向上

じゃあこの2つを向上するためには何が必要なのって話になるので見ていきましょう。

##レスポンスタイムの向上##
まず*レスポンスタイム*とは**処理のリクエストを出してから、最初の反応が返ってくるまでの時間**です。
サーバに処理を要求して何か返答が返ってくるまでの時間ってことですねぇ？
レストランでシェフが料理してウェイターがお客に料理を運ぶまでの時間ってことかな？

参考→[レスポンスタイムとターンアラウンドタイムの違いを調べよう！ ](https://itmanabi.com/responsetime-turnaroundtime/)

やることは次の2つらしいです。

1. 重たい処理の別スレッド化
2. 複数クライアントへの順次応答

###重たい処理の別スレッド化###
重たい処理は次のようなものらしいです。

・時間のかかる計算
・ネットワークによる通信
・ディスクへのアクセス　などなど

これらをマルチスレッドにしないで野放しにするとどうなるのか。
例えば処理*A*と処理*B*があって*A→B*の順に処理するとします。
シングルスレッドの場合は*A*が終わってからじゃないと*B*をしません。
*A*がめっちゃ時間かかる場合*B*はずっと待たなきゃいけません。
前のやつがめっちゃ買い物多くて列ができるスーパーのレジみたいなかんじですかね。
レジの台数増やしたら混み具合も解消しますね。つまりそうゆうことですかね。

###複数クライアントへの順次応答###
これもまあさっきのことと同じようなもんですねぇ。
暗殺教室で殺せんせーがめっちゃ早く動きながら生徒ひとりひとりに勉強を教えてたみたいなことですよね。

##スループットの向上##

スループットっていうのは単位時間に処理できる量でこれが強いと良いなぁって。
要領いい人っていいですよねって話？

やることは次の2つらしいです。

1. 遅いデバイスによるCPU待機時間に利用
2. マルチプロセッサの活用

書くの疲れたのでこちらをご覧ください
[第1回　マルチスレッドはこんなときに使う (2/2)](https://www.atmarkit.co.jp/ait/articles/0503/12/news025_2.html)

#同期処理と非同期処理#

[サブウェイとドトールの例](https://h5y1m141.github.io/step-up-javascript/doc/understanding_javascript/async_02.html)で勉強してきました。

簡単に書くと

###同期処理###
書かれた順番に処理をする。
*A,B,C*の順に書かれてたら、
*A*が終わってから*B*をはじめて、
*B*が終わってから*C*をはじめるってことですね。
前の人のめちゃウマフラペチーノができるまで僕のホットコーヒーはこないってことですね。

###非同期処理###
処理を別々にやる。
*A*が終わるのをまったりしない。
前の人が頼んだウマウマフラペチーノよりも僕のホットコーヒーの方が作るの簡単なので、ウマペチーのよりもはやく提供されるってことですね。

#Pythonで書くなら?#
[Pythonの並列・並行処理サンプルコードまとめ](https://qiita.com/castaneai/items/9cc33817419896667f34#%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89-threading)
[Pythonにおける非同期処理: asyncio逆引きリファレンス](https://qiita.com/icoxfog417/items/07cbf5110ca82629aca0)

あざした！
Rails6でBootstrapVueの導入

rails6でyarnを使用してプロジェクトを作ります。

### この記事の特徴

- rails6
- vue.js
- slim
- BootstrapVue

まずはプロジェクトを作成します。

```
mkdir [プロジェクト名] && cd $_
```

railsとvue.jsとBootstrapVueとslimをインストールします。

```
rails new . -d postgresql --skip-turbolinks
rails db:create
echo 'gem "slim-rails"' >> Gemfile
echo 'gem "html2slim"' >> Gemfile
bundle
bundle exec erb2slim app/views/layouts/ --delete
rails webpacker:install:vue
yarn add jquery popper.js vue bootstrap-vue bootstrap
mkdir app/javascript/src
touch app/javascript/src/application.scss
```



```app/javascript/src/application.scss
@import '~bootstrap';
@import '~bootstrap-vue';
```



```app/javascript/packs/application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

import "../src/application.scss"
```

[コンソール]

```
rails g controller home index
```

```app/javascript/packs/home.js
import Vue from 'vue/dist/vue.esm';
import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);

const app = new Vue({
    el: '#hello',
});
```


```app/views/home/index.html.slim
#hello
  .text-center
    b-button variant="primary" 
      | Notifications
      b-badge variant="light"  4

.text-center
  b-button variant="primary"
    | Notifications                                                                                                                    
    b-badge variant="light"  4
        
= javascript_pack_tag "home"
```


上のNotificationsには反映されて、下のNotificationsには反映されません。


### 普通のBootstrapも動かす場合

```app/javascript/packs/application.js
import "bootstrap"
```

を追記する。
以上です！快適なBootstrapライフを!



## おまけ（全部ターミナルで終わらせたい方向け)

```
rails new . -d postgresql --skip-turbolinks
rails db:create
echo 'gem "slim-rails"' >> Gemfile
echo 'gem "html2slim"' >> Gemfile
bundle
bundle exec erb2slim app/views/layouts/ --delete
rails webpacker:install:vue
yarn add vue bootstrap-vue bootstrap jquery popper.js
mkdir app/javascript/src
touch app/javascript/src/application.scss
echo '@import "~bootstrap";' >> app/javascript/src/application.scss
echo '@import "~bootstrap-vue";' >> app/javascript/src/application.scss
echo 'import "bootstrap"' >> app/javascript/packs/application.js
echo 'import "../src/application.scss"' >> app/javascript/packs/application.js
```
Visual Studio Codeおすすめ拡張機能

# Visual Studio Codeおすすめ拡張機能

- PluntUML
- GitHistory
- Japanese Language Pack for Visual Studio Code


## Plunt UML
VScode上でPluntUMLが使用できる拡張機能。

## Japanese Language Pack for Visual Studio Code
日本語化するための拡張機能。
VSCodeの初期設定言語は英語のため、日本語化するために必要。

## GitHistory
Gitワークツリーの履歴をグラフィカルに表示する拡張機能。
SourceTreeやGitExtionsなどのGitクライアントを使用せずに、VSCode上でブランチを確認できるため、すごく便利。
OSの統計情報やコールスタックの取得・プロセスファイルシステムについて

# 概要
サービスの運用にあたってサーバーやOSなどアプリケーションを動かす上での基本となる知識を深めていくシリーズとして、
今回はOSのプロセスファイルシステム、OS内部のI/Oの計測の注意とOS内部の統計情報の取得方法についてまとめました。

![システムコールとI_O.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274080/2e4c6656-53e9-1d23-95cf-781dddd9748c.png)
【今回扱う対象の図】

### システムコールを確認する方法

strace:現在どのシステムコールを実行しているのかを確認できる

![スクリーンショット 2019-11-23 20.47.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274080/e43da5a7-8b3a-9401-7e52-794372605a9b.png)

さらに、オプションとして`strace - p PID`で実行中のプロセスが呼び出しているシステムコールを確認できる。

## OSのI/O処理の計測についての注意

各レイヤーのI/O
- DBMS
- ライブラリ（及びシステムコール）の呼び出し（pread()やpwrite()など）
- ファイルシステム（UFSやNTFSなど）
- ファイルキャッシュ
- デバイスドライバー（SCSIやファイバーチャネルなど）
- ストレージ

OSのI/O性能情報を見る際に**どこで計測された情報なのか**ということに注意する必要があります。
デバイスドライバーレベルでの性能情報を表示するOSmoあり、ファイルキャッシュで終了するI/Oの性能情報が含まれないものもあります。この場合はDBMSの性能情報とは異なった値になります。その場合はファイルキャッシュによる性能の違いが考えられます。

`pstack`
コールスタックを確認できる。

コールスタックを見ると現在処理中の箇所がわかるので処理の分析に役立ちます。例えば、アプリケーションやDBMSのあるプロセスが止まっているように見えた時はpstackを実行します。

`gdb -p PID`
デバッガでコールスタックを表示 

# プロセスファイルシステム
UNIX系OSのルートディレクトリの `/proc`に位置し、現在のプロセスの状態を表すファイルが配置されています。現時点のプロセスに対応するディレクトリ構造になっています。物理ディスク上には存在せず、メモリ上のみの仮想的なファイルシステムです。

![スクリーンショット 2019-11-23 21.30.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274080/f8ce1d1e-23ee-fb62-a322-6e0676c7c464.png)

`/proc/PID/status`: そのプロセスの各種状態（実行・スリープなどや仮想メモリの各種サイズなど）がわかる
![スクリーンショット 2019-11-23 21.38.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274080/3cc51971-90a2-a88d-9bda-864a7edcddb7.png)


`/proc/PID/task`: スレッドに関する情報を確認できます

![スクリーンショット 2019-11-23 21.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274080/d43e4c2f-be6a-56d0-c594-0b9e3aa000d7.png)

`/proc/meminfo`: システムのメモリのサマリーが表示される
![スクリーンショット 2019-11-23 21.38.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274080/f07845f9-9de6-8347-8632-e25b785f7b75.png)

このように統計情報をカーネルの外で見ることができます。
アプリケーションやDBMSなどはプロセスファイルシステムを使ってOSに関する情報やCPU使用量などを表示する仕組みもあります。
プロセスファイルシステムに関するコマンドをうまく使うことでトラブル時の分析に役立てることができます。

## DBサーバーの定常監視で取得すべきOS情報

vmstat(sar)を使用し、以下の情報を取得します
CPU使用率、CPU待ちの「r」やI/Oniよるブロック「b」。
また、ページングの状況にも注意し、ディスク使用率・レスポンスがわかるコマンドを使って取得します。

#### 取得間隔
コマンドの負荷に応じて取得間隔を変えます。

| コマンド |間隔 |　負荷の程度　|
|---|---|---|
|vmstat  |数秒  |軽い |
|top  |1分  | 高い |

### OSの性能情報を確認するときによく使うコマンド

| コマンド |内容 |
|---|---|
|vmstat  |OS全体の統計情報を表示する。CPU,メモリ、ディスクの使用率やI/O状況など。  |
|sar  |vmstatと同様にOS全体の統計情報を表示する。過去の情報も確認できるがvmstatより表示される情報が少ないです。 |
|iostat  |I/Oデバイスの統計情報を表示する。デバイス毎にレスポンスタイムや使用率などを確認したいときに使います。 |
|netstat  |ネットワークの統計情報を表示するコマンド。ネットワークインターフェースやプロトコル毎に送信・受信したデータ量やルーティングテーブルを確認したいときなどに使います。 |
|top  |実行中のプロセス情報を一覧表示します。実行中の状態であるプロセスのみ確認できます。プロセス毎に消費しているCPU使用率や時間などを確認したい時に使います。 |
|ps | その瞬間に存在しているプロセス情報を一覧表示します。 |

# まとめ
サーバーを運用するにあたってレスポンスを改善したいとなったケースで
どこがボトルネックになっているかを確認したいケースがあると思います。
その時に適切なコマンドを使えるように今回学んだ内容を活かしていきたいと思います。

# 参考
- [絵で見てわかるOS/ストレージ/ネットワーク 新装版](https://00m.in/vJrYg)
- [【 vmstat 】コマンド](https://www.atmarkit.co.jp/ait/articles/1707/13/news015.html)
python デコレータについて

# デコレートとは
入力として関数を一つ取り、別の関数を返す関数。
関数の前後で何かしたいときに使用する。

# 使用例

```python:例
# デコレータ
def test(func):
    def new_func(*args, **kwargs):
        print("start")
        result = func(*args, **kwargs)
        print("end")
        return result
    return new_func

# デコレータ対象
# アノテーションをつけることにより、デコレートされる
@test
def greeting():
    print("Hello")


greeting()
```

```python:結果
start
Hello
end
```

```python:例
#  デコレータについて
# dumpが呼び出されてfunc=doubleとして実行
def dump(func):
    "入力引数と出力値を表示する"
    def wrapped(*args, **kwards):
        print("Fuction name: %s" % func.__name__)
        print("Input arguments: %s " % ' '.join(map(str, args)))
        print("Input keyaeorods: %s " % kwards.items())
        output = func(*args, **kwards)
        print("Output:", output)
    return wrapped

@dump
def double(*args, **kwards):
    "Double every arguments"
    output_list = [2 * args for arg in args]
    output_dict = {k: 2 * v for k, v in kwards.items()}
    return output_list, output_dict
```

```python:結果
Fuction name: double
Input arguments: 3 5
Input keyaeorods: dict_items([('first', 100), ('next', 98.6), ('last', 40)])
Output: ([(3, 5, 3, 5), (3, 5, 3, 5)], {'first': 200, 'next': 197.2, 'last': 80})

```

# 参考文献
「入門 Python3」(著:Bill Lubanovic)
puppeteerを用いた要素の取得（page.$()）

nokogiriの場合はとりあえず取ってくるため、取ること自体に難しさは無いが、puppeteerの場合はメインはサイト上の処理を自動化するのが目的であるため、データを取り出す場合は取り出す処理を書く必要がある。


とりあえずこんな感じでやればできる

```js

const selector = 'ul > li > a';
const elementHandle = await page.$(selector);
const value = await (await elementHandle.getProperty('textContent')).jsonValue();
```
#  `page.$(selector)` とは
puppeteerのgithub（pageselectorの説明部分）
https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#pageselector

elementHandle.$(selector)
- `selector` \<string> A selector to query element for
- returns: \<Promise<?ElementHandle>>

こんな感じで、returnはPromiseのElementHandleとなっている。


## 補足説明
### ElementHandle
> ElementHandle represents an in-page DOM element. ElementHandles can be created with the page.$ method.

ページ内の要素をDOMで形成する。page.$を使って作ることができる。


### DOM
[JavaScript初心者でもすぐわかる！DOMとは何か？](https://eng-entrance.com/what-is-dom)

> DOMとは「Document Object Model」の略だ。直訳すると、「ドキュメントを物として扱うモデル」になる。プログラムからHTMLやXMLを自由に操作するための仕組みだ。

階層構造になっているモデルのこと。

つまりElementHandleとは、ページ内の要素をDOMとして形成するもの。

###  getProperty('textContent')
puppeteerのgithub（getPropertyの説明部分）
https://github.com/GoogleChrome/puppeteer/blob/v2.0.0/docs/api.md#elementhandlegetpropertypropertyname

これは、形成したElementHandleの中から、必要なものを取り出すための処理のこと。
色々オブジェクトはあるけれど、サイト内の文字列を取り出したい場合は、`textContent` を指定すれば良い。


# 結論
`page.$`でサイト内の要素をDOMとして取得して、getPropertyでDOMの中のプロパティ名（サイトの文字列の場合はtextContent）を指定してあげれば、サイト内の任意の文字を取り出すことができる。

## 参考
puppeteerのgithub
https://github.com/puppeteer/puppeteer/blob/v2.0.0/docs/api.md

[JavaScript初心者でもすぐわかる！DOMとは何か？](https://eng-entrance.com/what-is-dom)
【Git, GitHub】最速でブランチを作成し、プルリクを投げてマージする方法

# ①新規ブランチ作成

### 対象ディレクトリに移動

ターミナルにて下記コマンドを実行

```Bash:
$ cd programming/code_training/
```

### 新規ブランチ作成

ターミナルにて下記コマンドを実行

```Bash:
$ git checkout -b hotfix-asobi
```

### ブランチ切替 (既にブランチ作成済みの場合)

ターミナルにて下記コマンドを実行

```Bash:
$ git checkout hotfix-asobi
```

# ②コーディング

作成したブランチにてソースコードを編集

# ③ステージング、コミット、プッシュ

ターミナルにて下記コマンドを実行

```Bash:
# ステージング
$ git add *
# コミット
$ git commit -m "asobi"
# プッシュ
$ git push origin  hotfix-asobi
```

# ④プルリクエスト

- リポジトリへアクセスし、「New pull request」ボタンを押下
- マージしたいブランチを選択
- 「Create pull request」ボタンを押下
- 内容を入力
- 「Create pull request」ボタンを押下

# ⑤マージ

- マージしたいプルリクエストを選択し、「Merge pull request」ボタンを押下
- 「Confirm merge」ボタンを押下
VSCodeを起動しても真っ黒画面から進まない

これまでSublimeTextを用いてきましたが、評判の良いVSCode使い始めました。かなり便利そうですね。
そんな使い始めに、このような問題に直面したので、参考まで。


## 解決方法
1. ひとまずVSCodeを `--disable-gpu` の引数を加えて起動する
    - ex) スタート+R → `"C:\Program Files\Microsoft VS Code\Code.exe" --disable-gpu`
2. `Ctrl` + `Shift` + `P` でコマンドパレットを起動する
3. コマンドパレットに `Preferences: Configure Runtime Arguments` と入力する
4. 開かれた `argv.json` 内に `"disable-hardware-acceleration": true` を追記する
5. VSCodeを再起動

この設定で、テキストファイルからでもVSCodeが起動する。


## 余談
### 起動ショートカットに引数を加えれば表示されるが
VSCodeのショートカットを作成し、プロパティ->リンク先の欄に

```
"C:\Program Files\Microsoft VS Code\Code.exe" --disable-gpu
```

と `--disable-gpu` を追記することでVSCodeのショートカットから起動ができた。

### 標準のエディタとして起動すると結局真っ黒画面に
↑の方法だと、VSCodeを起動してからファイルを読み込む流れであれば問題ない。
しかし、ソースコード経由でVSCode起動となると、結局はハードウェアアクセラレーションが働くため、真っ黒画面となる。

## 参考
- [Microsoft Visual Studio Codeが真っ黒け → 解決](https://shigeo-t.hatenablog.com/entry/2017/11/11/050000)
- [Launch VS Code with `--disable-gpu` flag by default](https://stackoverflow.com/questions/37334148/launch-vs-code-with-disable-gpu-flag-by-default)
【DXライブラリ】mp3（元m4a）音源の読み込みに失敗してしまった時の対処法

DXライブラリのLoadSoundMem関数を使用して音源の読み込みを行ったが失敗した時のはなし

## 経緯
元々m4a形式だった音源をmp3に変換して再生しようとしていたが、なぜか再生できなかった。
Log.txtには「グラフの構築に失敗しました音声ファイルのＰＣＭへの変換に失敗しました」と書かれていた。
変換の仕方が悪いのかと思い、3～4つのソフトやサイトを使用したり、ビットレートなどを変えてみたりもしたが無意味だった。

## 対処法
m4a形式をwav形式に変換してさらにmp3形式に変換したら読み込み＆再生ができた。

今回はaviutlでm4a→wav、XMedia Recodeでwav→mp3に変換したがソフトは関係ないような気がする。（ちゃんと調べてないけど）

#### 2019/11/24　追記
**yumetodoさんからopus形式なるものを教えていただいたので試した結果…**

 - m4a→opus：
    - 「グラフの構築に失敗しました音声ファイルのＰＣＭへの変換に失敗しました」

 - m4a→ogg：
    - 正常に読み込み＆再生ができた。（mp3の時とは違い、直変換で動作した）

…ますますわからん(´･ω･`)
【RSpec】モックとスタブの違い

モック(mock)とスタブ(stub)の違いが分からないままなんとなく使っていたので、調べてみた。

## 先にざっくり結論
対象の処理をテストしたい場合はモック。テストしたいのは別の部分で、とりあえず値を返してくれればOKであればスタブを利用する。

## そもそもなぜ使うのか
Rspecなどを用いてテストを書く場合、APIなどを用いたHTTP通信をそのまま利用してしまうと、APIのタイムアウトなどが原因でテストが失敗になってしまう恐れがある。これを防ぐために、APIなどの代わりに決まった結果を返すのがスタブやモックの役割。

## 共通している部分
代わりに処理を返すことに関しては同じ。
- messageを受け取ったら、valueを返す処理

```ruby
# create a double
obj = double()
# specify a return value
obj.should_receive(:message).and_return(:value)
```
## モックとスタブの違い
違いは対象の処理をテストできるかどうか。
モックの場合は対象の処理に対して、様々な条件でテストを実装することができます。
### 引数の中身でテスト
```ruby
# 引数に'an argument'が存在する
obj.should_receive(:message).with('an argument')
```
### 呼び出し回数でテスト
```ruby
# messageを少なくとも一回は呼び出している
obj.should_receive(:message).at_least(:once)
```

このように、モックにした部分をテストすることができる。

## 結論
テストを行いながら決まった値を返して欲しい時はモック。単純に決まった値を返して欲しい場合はスタブ。このような理解で良いのかなと思います。

## 参考
モックのドキュメント
https://relishapp.com/rspec/rspec-mocks/v/2-14/docs/message-expectations
スタブのドキュメント
https://relishapp.com/rspec/rspec-mocks/v/2-14/docs/method-stubs
[[図解]スタブとモックの違い](https://qiita.com/hirohero/items/3ab63a1cdbe32bbeadf1)
[Railsでrspecを使うように設定する](https://qiita.com/akiko-pusu/items/0f15130509a88cf59a7d)
読みたい本をSlackで管理したら読書が捗った 

これまで、読みたい本はEvernoteにひたすらタイトルをベタ書きしていました。
しかし数が増えていくにつれ、同じジャンルの本を探したりするのに苦労してきた為、Slackへ移行しました。

# 使い方

私は個人用のワークスペースを作成して使っています。

## チャンネルを作成

こんな感じ
チャンネル名は「読みたい本_読書メモ」としています。

<img width="1117" alt="スクリーンショット 2019-11-23 20.59.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369702/b3fc70b4-32bb-81f0-9bf3-575ffa81dde2.png">

## 読みたい本をひたすら投稿していく

私はAmazonのリンクを投稿しています。
プレビューと本のタイトル、ちょっとした概要が表示されるので、後から検索する時にも引っ掛けられます。
たまにプレビューが出ない時は、タイトルをコピペしてます。

## スレッドに読書メモを投稿する

印象に残った一文や、考察、ページ番号などを書いておけます。

<img width="894" alt="スクリーンショット 2019-11-23 21.29.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369702/a28067e4-4a8c-42cd-ebd2-3513e33a6420.png">


読書開始時に何かしら投稿しておけば、いつ読んだかの記録にもなります。

## 読み終わったらリアクションをつける

『済』のようなリアクションをつけておくと、読んだことが一目で分かります。
こちらのジェネレータで『済』の絵文字を作成して登録しました。
https://emoji-gen.ninja/

<img width="886" alt="スクリーンショット 2019-11-23 21.03.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369702/134bd7ac-57a0-a936-3c94-35b9709a77d4.png">


---

基本的な使い方は以上です。



# おまけ

## 読みたい本をグループ化する

やり方は色々ありますが、私のやっている方法を紹介します。

### グループ化用のチャンネルを作成

こんな感じ
チャンネル名は「読みたい本_グループ」としています。

<img width="1108" alt="スクリーンショット 2019-11-23 21.16.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369702/626e8873-053f-b2e4-b84b-7312d80a8182.png">
（タピオカみたい）

### グループ名を投稿

グループ名と、あれば説明も書いて投稿します。

### 分類したい本をレスしていく

「読みたい本_読書メモ」チャンネルの投稿のリンクをレスに貼っていきます。
プレビューも表示されますし、二重管理にならなくて良いと思います。

<img width="891" alt="スクリーンショット 2019-11-23 21.18.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369702/5b30575b-448c-0570-b308-5d4a81a813ef.png">

---

グループ化のあたりは、移動やグループの削除が少々面倒なので、もっと良い方法がないか引き続き試してみます。
Pandasのread_csvにまつわるエトセトラ

PythonのプログラムでCSVファイルを読み込む時に良く使うのが、Pandasモジュールのread_csv関数です。よくサンプルプログラムなどで見かける書き方はこんな感じですね。

```
import pandas as pd
df = pd.read_csv('./iris.csv')
```

そんなread_csvさんにまつわるエトセトラです。

# インターネット上のファイルを直接読み込む

PCのファイルだけでなく、URLを指定して直接インターネットにあるファイルも読み込めてしまいます。例はGithubのPandasのirisデータセットです。

```
url = 'https://github.com/pandas-dev/pandas/raw/master/pandas/tests/data/iris.csv'
df = pd.read_csv(url)
```

# 指定した行数だけ読み込む

長めのファイルをちょっと読み込みたい時に便利です。

```
df = pd.read_csv(url, nrows=10)
```

# 読み込む列や型を指定する

特定の列だけの読み込みが可能です。

```
df = pd.read_csv(url, usecols=['SepalLength', 'SepalWidth'])
```

型を指定しての読み込みも可能です。

```
df = pd.read_csv(url, usecols=['SepalLength', 'SepalWidth'], dtype={'SepalLength': float, 'SepalWidth': float})
# 型の確認
df.dtypes
```

# Excelファイルを読み込む

Excelからも読み込めちゃいます。read_csvさんの友人のread_excelさんの登場です。xlrdモジュールが必要なのでインストールしておきましょう。

```
pip install xlrd
```

使い方はread_csvさんと同じです。さすが友人。

```
dfx = pd.read_excel('iris.xlsx')
```

# CSVファイルに書き込んだり

読み込んだら書き込みたくなるのが人情ですもんね。

## クリップボードにコピー

こんな命令もあるんですねー。わざわざ選択してコピーする手間が省けます。

```
dfx.to_clipboard()
```

## CSVファイルへの書き込み

to_csvさんを使います。指定したファイルパスに保存されます。

```
dfx.to_csv('iris_out.csv')
```

printで囲うとcsvにした結果が画面に表示されます。

```
print(dfx.to_csv())
```

## Excelファイルへの書き込み

Excelから読み込んだら、そりゃ書き込みたくなりますもんね。to_excelさんを使います。openpyxlモジュールが必要なのでインストールします。

```
!pip install openpyxl
```

使い方はto_csvと同様です。

```
dfx.to_excel('iris_out.xlsx')
```

ふつーに最新のOffice365のExcelファイル読み込めてびっくりした。さすがです。
VRMで表情変化させるとメッシュが消える

#概要
VRM対応アプリを作ったのですが、exeで配布して利用して頂いた方からVRMモデルの表情を変化させると、メッシュ（顔などが顕著）が消える。という現象を教えて頂きましたので、その際得られた情報を転記しておきます。<font color="Red">なお、VRMの名誉のために先だって断っておきますと、恐らくVRMの問題ではありません。</font>

#現象
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">恐らくですが、BlendShapeが付いてるメッシュが、BlendShapeの変更(0以外?)で消える。という不具合があるようです。ノートPCのCPU内臓GPUタイプ2012年最終更新ということで、ハードウェア要件を満たせていない可能性がありますが、確かな情報を知りませんので、記録として残させて頂きます。<a href="https://twitter.com/hashtag/VRM?src=hash&amp;ref_src=twsrc%5Etfw">#VRM</a> <a href="https://t.co/3kDTIgAvHu">https://t.co/3kDTIgAvHu</a></p>&mdash; 120 (@120byte) <a href="https://twitter.com/120byte/status/1197909681940783106?ref_src=twsrc%5Etfw">November 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#原因？
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">手元で確認できないのでテキトウな事言っちゃいますが、BlendShape自体が動かない環境、というのがあるとすれば、VRMどうこうという話ではないですね。</p>&mdash; 120 (@120byte) <a href="https://twitter.com/120byte/status/1197918398698573825?ref_src=twsrc%5Etfw">November 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#対策
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">GPU Skinning無効で対応できるようです。<a href="https://t.co/bEntOx268c">https://t.co/bEntOx268c</a></p>&mdash; 120 (@120byte) <a href="https://twitter.com/120byte/status/1198148478418841601?ref_src=twsrc%5Etfw">November 23, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#参考
https://ch.nicovideo.jp/tenoji/blomaga/ar1745105
public staticとは？

# Laravelのバリデーションのルール

Laravelでバリデーションのルールは様々な書き方があると思うが、もしModelに書くとこのようになるだろう。

```php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Test extends Model
{
  public static $rules = array(
    'title' => 'required',
    'body' => 'required',
  );
}
```

そして、Modelに書いたルールをControllerではこのように利用できる。

```php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Test;

class TestController extends Controller
{
  public function create(Request $request)
  {
    $this->validate($request, Test::$rules);

    $test = new Test;
    $input = $request->all();

    $test->fill($input);
    $test->save();
  }

```

ほとんどの場合、バリデーションのルールは `public static 変数名...` と書き出すことが多い。 

# `public static` とはなにか？

PHPの公式サイトにはこのように記されている。https://www.php.net/manual/ja/language.oop5.static.php

>クラスプロパティもしくはメソッドを static として宣言することで、 クラスのインスタンス化の必要なしにアクセスすることができます。 static なプロパティは、インスタンス化されたクラスオブジェクトから アクセスすることはできません (static なメソッドにはアクセスできます)。

「クラスのインスタンス化」というのは、上のコードのControllerでは `$news = new Test;` にあたる。
これがクラスのインスタンス化である。

クラスはインスタンス化、これはざっくり言うと変数を初期化することに近い。
変数の初期化との違いは、クラスに定義されたメソッドなどをそのまま流用できる点である。

しかし `public static` という宣言をしたものについて、クラスのインスタンス化は意味がない。
`クラス::プロパティ` と書くことでクラスの中のプロパティを参照することができる。

`$this->validate($request, Test::$rules);` と書くことで、`Test` というクラスの中の `$rules` を参照していることになる。

# `public static` の使いどころ

`public static` について説明をしたがこれは何のためにあるのか？という疑問が出てくる人がいると思う。
ほとんどのプログラムはクラスをインスタンス化して、そのクラスのプロパティが変化していくことが多い。
例として上のコードでは、リクエストを受け取ってデータベースに保存するが、リクエストは毎回内容が違う。

しかし、バリデーションのルールはリクエストに応じて変わらない。
リクエストに応じて変わらないとは、インスタンス化の有無に関わらずプロパティが変化しないことになる。
このときに `public static` を利用すると良い。

# まとめ

* `public static` では `new` が必要ない。
* `public static` でが `new` よって生まれたインスタンスの状態が変化しないときに利用すると良い。
picoCTF 2019 asm2 - Points: 250

#問題

https://2019game.picoctf.com/problems

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/601a5229-f383-f942-2921-f29e13390a83.png)

#解いてみた

asm2(0xc,0x15)を実行したときにどうなりますか？
という問題です。
アセンブラを見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17681/b19c2b2c-58e0-bb9d-8805-74f57e8ec8d5.png)

```
<+0>:	push   ebp
<+1>:	mov    ebp,esp
<+3>:	sub    esp,0x10
<+6>:	mov    eax,DWORD PTR [ebp+0xc]
<+9>:	mov    DWORD PTR [ebp-0x4],eax
<+12>:	mov    eax,DWORD PTR [ebp+0x8]
<+15>:	mov    DWORD PTR [ebp-0x8],eax
<+18>:	jmp    0x50c <asm2+31>
```

<+3>:これの意味ってなんなんですか？ちょっとわかりません、この先でesp使われてないので支障はなさそう。
<+6>:第2引数の0x15をeaxに代入する。
<+9>:ebp-0x4に0x15を代入する。
<+12>:eaxに第1引数の0xcを代入する。
<+15>:ebp-0x8に0xcを代入する。
<+18>:asm2+31にジャンプする。

```
<+31>:	cmp    DWORD PTR [ebp-0x8],0xa3d3
<+38>:	jle    0x501 <asm2+20>
```

<+31>:ebp-0x8と0xa3d3を比較する。ebp-0x8は0xc。
<+38>:0xc＜0xa3d3なのでジャンプする。

```
<+20>:	add    DWORD PTR [ebp-0x4],0x1
<+24>:	add    DWORD PTR [ebp-0x8],0xaf
<+31>:	cmp    DWORD PTR [ebp-0x8],0xa3d3
<+38>:	jle    0x501 <asm2+20>
```

<+20>:ebp-0x4に0x1を足す。ebp-0x4は0x15なので0x16になる。
<+24>:ebp-0x8に0xafを足す。ebp-0x8は0xcなので0xBBになる。
<+31>:と<+38>:0xBB＜0xa3d3なのでジャンプする。

というのが繰り返される。

ということで

```
0xa3d3 - 0xc = ‭0xA3C7
```

で差分を出して

```
0xA3C7 / 0xaf = 0xef
0xef + 0x1 = 0xf0
```

ループする回数を計算して、オーバーしないといけないので、1を足して

```
0x15 + 0xf0 = ？
```

ループする前のeaxに足すというのが答えです。
答えをマスクするのが難しい問題でした。
iPadでmicro:bitに接続できない

# iOS13からBluetoothアクセスに許可が必要
アプリを初めて起動時した時にBluetoothアクセスの許可を求めてくるので、OKすれば良い。
しかし、何らか(子供が勝手にアプリを立ち上げた等)の理由で許可を拒否すると、当然繋がらなくなるのだけれど、そのエラーメッセージがわかりにくい。
`Please turn on Bluetooth in Settings` と表示される。
`設定` > `micro:bit` > `Bluetoothのアクセス許可` で解決。
※ググっても上記エラーメッセージに関する記事が見つからなかったのでメモ。
GitHub Actions で Android NDK で C++ ビルドを行うための Android SDK, NDK のありか情報(2019 年 11 月 23 日時点)

GitHub Actions では Linux イメージで Android SDK/NDK がインストールされていますが, どこにインストールされているかのドキュメントはありません.

https://help.github.com/en/actions/automating-your-workflow-with-github-actions/software-installed-on-github-hosted-runners

2019 年 11 日 23 日時点の情報です.
Ubuntu 18.04 を使うとします.

ANDROID_SDK_ROOT 環境変数: `/usr/local/lib/android/sdk`

NDK のありか : `$ANDROID_SDK_ROOT/ndk-bundle`

NDK は r20 がインストールされています.

ちなみに ubuntu-18.04 では ninja はデフォルトではインストールされていません.

ninja を使う場合は,

```
sudo apt-get install -y ninja-build
```

を workflow ファイルに記述しておきましょう.

## 例

Embree-aarch64 を参考ください.

https://github.com/lighttransport/embree-aarch64/blob/master/.github/workflows/ccpp.yml
protocol bufferの定義とコンパイル

さてではgRPCの実装を始めていきます。
今日はインターフェイスの定義とprotocol bufferのコンパイルまで行いたいと思います。

## protocol buffer

まずはじめにすることはprotocol bufferでAPIのインターフェイスを定義することです。
今回はありきたりではありますがTodoサービスインターフェイスを定義したいと思います。

`proto/service.proto`というファイルを作成し、以下のように記述します。

```protobuf
syntax = "proto3";

package service;

service TodoAPI {
    rpc GetTodo(GetTodoRequest) returns (GetTodoResponse) {}
    rpc CreateTodo(CreateTodoRequest) returns (CreateTodoResponse) {}
    rpc ListTodos(ListTodosRequest) returns (ListTodosResponse) {}
}

message GetTodoRequest {
    string id = 1;
}

message GetTodoResponse {
    Todo todo = 1;
}

message CreateTodoRequest {
    Todo todo = 1;
}

message CreateTodoResponse {
    bool success = 1;
    string id = 2;
}

message ListTodosRequest {}

message ListTodosResponse {
    repeated Todo todos = 1;
}

message Todo {
    string title = 1;
    string description = 2;
}
```

protoファイルの管理に関してですが、会社として明確に決められたものはありません。が、習慣として他のチームが使いうるものはproto専用のレポジトリに切り出して管理、チーム内部でのみ使われるインターフェイスの場合はそのサービスのレポジトリに置いてしまう場合が多いです。
また、配布の仕方としては生成されたファイルではなくprotoファイルのまま各自コンパイルしてもらう方法が推奨されています。理由としては利用側がどの言語を使用するかわからないこと、コンパイルのツールチェインがチームによって異なりうることがあります。

## コンパイル

ではコンパイルしてみましょう。
コンパイラとして [gogo/protobuf](https://github.com/gogo/protobuf) を使います。インストール等はレポジトリを参考にしてください。

生成するGoファイルは`internal/pb/service`パッケージ内に置くことにします。

```sh
$ protoc \
    -I ./proto \
    -I $GOPATH/src:$GOPATH/src/github.com/gogo/protobuf/protobuf \
    --gogoslick_out=plugins=grpc:./internal/pb/service/ \
    service.proto
```

無事`service.pb.go`ファイルが生成されたでしょうか。

## makeタスク

最後にこのコンパイルタスクをMakefileに残しておきましょう。

```makefile
PROTO_DIR := ./proto
GENERATED_DIR := ./internal/pb
GENERATED_SERVICE_DIR := $(GENERATED_DIR)/service

.PHONY: protos
protos:
	mkdir -pv $(GENERATED_DIR) $(GENERATED_SERVICE_DIR)
	protoc \
		-I $(PROTO_DIR) \
		-I $(GOPATH)/src:$(GOPATH)/src/github.com/gogo/protobuf/protobuf \
		--gogoslick_out=plugins=grpc:$(GENERATED_SERVICE_DIR) \
		service.proto
```

これでAPIを変更しても`make protos`で簡単にコンパイルし直すことができます。

---

社内にはAPIドキュメントというものはほとんど存在しません。
詳細にコメントされたprotoファイルさえあればAPIの役割はほぼ理解することができます。
gRPCの強力さはこういうところに現れるな、と感じるところです。

明日は生成されたファイルを元にgRPCサーバープロセスを立ち上げたいと思います。
Frontend と Backend

# Frontend と Backendを繋ぐもの

# それはURLだよ!!!

## サーバーをフロントエンドとバックエンドでたてる
## フロントエンドからバックエンドのサーバーに
## get や post , put リクエストを送っている
## 例
## Front：http://localhost:3000/
## Backend：http://localhost:8081/
## Front でapp.post('http://localhost:8081/')


##感想
###今回は全て見出しでページを書いてみたお🐈🐈
###🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈🐈
PSK（位相偏移変調）のお勉強 with MATLAB

# 背景
プロフィール欄にOSI L1-L4と書くからには、物理層（L1）の勉強もせねばならぬと思い， 足がかりに変調方式の一つであるPSK（特にQPSK）をMATLABを使って勉強することにした． 到達目標は， よく見るBER（Bit Error Rate）のあの図を描くところまで． 理論的理解が目標ではなく， 感覚的に変調の「気持ち」を理解することを目的とした．　筆者は信号処理に関する理論的/体系的な教育を受けていないため（大学時代に独学しようとしたが途中で挫折した）， Webに転がっている講義pdf（千葉工業大学　佐波研究室講義資料 http://www.saba.cs.it-chiba.ac.jp/_userdata/AdvCom03.pdf） を見てざっと勉強した．

# 変調， PSKとは
通信における物理レイヤや変調に関して詳しい説明は省く．
Qiitaだと， 下記記事が参考になる．
https://qiita.com/aizko/items/1e6bd3b69c9dfad26b4c

PSKはPhase-Shift Keyingの略称． 搬送波（キャリア， 通常はsin波を使うらしい）の位相を変化させることで信号を送る． シングルキャリアデジタル変調方式としては他に， ASK（振幅偏移変調）， FSK（周波数偏移変調）， QAM（直角位相振幅変調）． なお， マルチキャリアデジタル変調方式だとOFDMが有名．

下記のページで得た情報をまとめると，
http://www.interq.or.jp/blue/rhf333/modulation.htm
・ ASK ... 送受信機の回路構成がシンプルで済む． だけどノイズに弱く， 一般的に無線通信で使われることは少ない（優先だと不明）．
・ FSK ...　送受信機の回路構成がシンプルで済む． ただ信号を送る際に周波数を変化させるため， 伝送速度が上がるにつれて占有帯域（スペクトラム幅）が広がってしまうため， 高速通信には向かない．
・ PSK ... WikiによるとQAMより単純で， 既存の技術で比較的広く利用されてるらしい（無線LANとか）． 2位相を使うBPSK（Binary PSK）や4位相を使うQPSK（Quaternary PSK）などがある． 今回は， QPSKの勉強にフォーカスした．

#  MATLABについて
とりあえずMATLABのページから評価版をDL， インストし， 使ってみることにした. MATLABの文法については「急にMATLAB/Simulinkを使うことになった時に読む本」をざっと読んだところ， C言語とほぼ似てる感じだったので, 「習うより慣れろ」の精神で特に文法を学ぶことなくコーディングに突入した． 
MATLABのドキュメントや講義資料を参照しながらコーディングしよう…と思っていたところ， 自分のまさにしたいことをすでにされている方がQiita内にいた[3]ため， そちらを使って勉強した, まる． 
１. 東北大学　川又研究室　http://www.mk.ecei.tohoku.ac.jp/dsptext/lecture.pdf
２. 同研究室　MATLABで学ぶディジタル信号処理の基礎 http://www.mk.ecei.tohoku.ac.jp/jspmatlab/
3. 【MATLAB】通信の勉強をする前の練習問題　https://qiita.com/Seiji_Tanaka