OmniAICreator/Qiita-1.07M huggingface dataset:
React HooksのTips（と便利な汎用カスタムフック）

# はじめに

React Hooksを使っていてハマったところをカスタムフックで解決したときの記録です。
TypeScriptで書いてます。

## useEffectの中で非同期処理をawaitで実行する

`useEffect`をラップしたカスタムフックを作ればいい。
`useEffect`で初期データを`await`を使って取得したい場合などに使える。

```typescript
import { useEffect, DependencyList } from "react";

export default function useEffectAsync(
  effect: () => any,
  deps?: DependencyList
) {
  useEffect(() => {
    effect();
  }, deps);
}
```

使い方：

```typescript
useEffectAsync(async () => {
  // 初期マウント時に一度だけデータを同期で取得する
    const items = await fetchSomeItems();
    console.log(items);
}, []);
```

## 現在の state を非同期処理の中でアクセスする

`useEffect`でコンポーネントマウント時に`addEventListener`し、そのイベント処理内で`useState`で定義したstateにアクセスしたい場合などに。

`useRef`で`useState`のstateの参照を保持するようにして、イベント処理内ではその参照を利用すると現在のstateの値を使える。

以下のようにカスタムフック化すると便利。

```typescript
import {MutableRefObject, Dispatch, SetStateAction, useState, useRef } from 'react'
const useRefState = <T>(
  initialValue: T
): [T, MutableRefObject<T>, Dispatch<SetStateAction<T>>] => {
  const [state, setState] = useState<T>(initialValue);
  const stateRef = useRef(state);
  useEffect(() => {
    stateRef.current = state;
  }, [state]);
  return [state, stateRef, setState];
};
```

1秒ごとにカウントアップしながらアラートを表示する場合の例：

```tsx
import { useEffect } from 'react'

const component = () => {
  const [count, countRef, setCount] = useRefState(0)
  useEffect(() => {
    setInterval(() => {
      alert('Value: ' + countRef.current)
      setCount(countRef.current + 1)
      // 以下のようにしてしまうと初期描画時のcount(=0)がずっと利用されてしまう
      // alert('Value: ' + count)
      // setCount(count + 1)
    }, 1000)
  }, [])
  return <div>{count}</div>
}
```
このとき、`useEffect`は第二引数に`[]`を指定しており最初の一度しか呼ばれないため、`setInterval`に指定するコールバック関数で`count`を直接指定すると初期描画時の`count`の値を利用しつづけることになってしまう。かといって`useEffect`で再描画のたびにリスナ登録・リスナ解除のようなことをするのはイケてない。
そういうときに`useRef`が使える。

参考:
https://blog.castiel.me/posts/2019-02-19-react-hooks-get-current-state-back-to-the-future/
[matlab] 関数コメントの書き方

## モチベーション
matlabを使って10年ぐらいたつが，関数コメントをどう書くべきか，未だに悩むので改めて整理する。

## 関数コメントの書き方
基本は，mathworksの[プログラムへのヘルプの追加](https://jp.mathworks.com/help/matlab/matlab_prog/add-help-for-your-program.html)に従う。

- 1行目に関数名（なぜか大文字）と概要を書く
- 2行目以降に使い方を書く。引数省略ができる場合は省略した形も書く。
- 中段に引数と戻り値の情報を書く（これは私ルール。詳細後述）
- 最終行に関連するプログラムの情報を書く（doc, help でコメント出力すると，リンクが張られる）

## 関数コメントの例
簡単な線形探索プログラムに対して，コメントを与えた。

```matlab:linear_search.m
function is_match = linear_search(key, input_nums)
%LINEAR_SEARCH 線形探索
%
% is_match = linear_search(key, input_nums)
%  
% Parameters
% ----------
% key : numeric
%   検索する数
% input_nums : vector(numeric)
%   検索対象である数値配列
% 
% Returns
% -------
% is_match : vector(bool)
%   一致していればtrue,それ以外ならfalseを格納
%
% see also: find

% 引数チェック
validateattributes(key,{'numeric'},{'scalar'})
validateattributes(input_nums,{'numeric'},{'vector'})

% 格納先準備
N = length(input_nums);
is_match = false(N, 1);

% 線形探索
for index = 1:length(input_nums)
    if(key == input_nums(index))
        is_match(index) = true;
    end
end

end
```

コマンドウィンドウで`doc linear_search `とすると，以下のような画面が出る。
<img width="794" alt="無題.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260124/0598765e-86ef-3006-07a6-7c1c15efaf63.jpeg">


`help linear_search`とすると，コマンドウィンドウ上にヘルプが出力される（出力結果は省略）。

## matlab関数の引数と戻り値について
matlabは型を定義しないなので，できれば関数コメント内に引数と戻り値の情報を書いておくべきだと思います。とくに,matlabはアカデミックなユーザーが多いので，平気で`N`や`alpha`といったシンプルすぎる変数名が出てきます。

では関数コメント内でどう書くべきかというと，特にこれといったスタイルはMatlab業界にないようです（あれば教えてください）。そこで，上記サンプルではpythonのnumpyスタイルを参考に記述しました。numpyスタイル以外にも，googleスタイルなどがあるので，[これらを参考](http://www.sphinx-doc.org/ja/stable/ext/napoleon.html)に書き方を決めていきましょう。

また，型をどう書けばいいか，という問題もありますが，私は[validateattributes](https://jp.mathworks.com/help/matlab/ref/validateattributes.html)と合わせた書き方がよいと思います。上記サンプルでは，関数の冒頭で，引数の`key`が，`numeric`かつ`scalar`であることをチェックしています。`validateattributes`はとても柔軟で，正数や整数といった，アルゴリズム操作で頻繁に登場する条件もチェックできるので，積極的に使っていきましょう。
Alexaスキル開発 ジャーナリング〜自分と向き合う5分間〜 デザインプロセス　その1

自作のAlexaスキルを始めました。
まだ開発途中ですが、今回は設計工程（デザインプロセス）を公開します。

* タイトル : ジャーナリング〜自分と向き合う5分間〜
* 概要 : 「5分ジャーナリングテンプレート」からランダムにAlexaが質問する

※[【初心者向け】ジャーナリングを簡単に習慣付けられる7つのシンプルなテンプレート](https://www.lifehacker.jp/2016/06/160622journaling_templates.html)

## 背景
[先日の投稿](https://qiita.com/toctoc0352/items/6770039a813b686a59c7)で公開されていたサンプルを日本語にリメイクしました。
ゲームの内容が脱出ゲームだったため、Alexaの無機質な音声と組み合わせるとシリアスなドキドキするゲームになるかと期待しました。ところが実際試して見ると、Alexaの声だと、冷静になるというか安心してゴールまで案内してくれるような感覚になりました。
そこでふと思ったことが、私は普段ノートにジャーナリングという日記のようなものを書いているのですが、この普段の日記がAlexaから質問されながら、書いていると、自分の心と冷静に安心して向き合える体験ができるのではないか思い、開発に至りました。

## 設計指針
[Alexaスキルのデザインプロセス](https://developer.amazon.com/ja/designing-for-voice/design-process/)

## スキルの目的
![写真 2019-05-19 10 47 28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406177/4b28380a-81f3-8377-2a04-0eed15608b26.jpeg)

## ユーザーストーリを明確にする
![写真 2019-05-19 10 47 47.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406177/6a876443-628f-f1ad-c6b7-10ad9ab1a052.jpeg)

## 台本の作成
![写真 2019-05-19 10 49 36 (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406177/7ec668eb-c6b1-6590-d0c3-a2453afdcad3.jpeg)

## 対話フロー
![写真 2019-05-19 10 49 36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/406177/c79cf01d-8c43-044a-4174-204daf9819cd.jpeg)

## 開発中のソースコード
https://github.com/toctoc0352/Journaling
Udacity: ES6 JavaScript Improved メモ①

Udacityの[ES6 - JavaScript Improved](https://www.udacity.com/course/es6-javascript-improved--ud356)コースを、受講しながらメモしていきます。
<font color="PaleVioletRed">*Lesson1: Syntax*</font>

##let , const
ES6では、変数宣言のキーワードに`let`、`const`が追加され、それぞれ異なる目的で使われる。
`let`は、宣言後に再代入されることを前提に使う。
`const`は、宣言後に再代入されないことを前提に使う。
両者に共通するのは、それまで変数宣言に使われていた`var`とは違って、**ブロックスコープを作る**ということ。
つまり、`{}`の内部でのみ有効になるということ。「局所変数」ともいう。

```example.js
let a = 1;
if(true) {
  var b = 2;
  let c = 3;
  const d = 4;
  d = 5; // Uncaught TypeError: 再代入しているため
}

console.log(a); // 1
console.log(b); // 2
console.log(c); // Uncaught ReferenceError: {}の内部で宣言しているため
```

`var`の出番が完全になくなったわけではないが、スコープの制限と再代入の有無が一目でわかるのは、読み手に優しい。積極的に`let`と`const`を使っていきましょう。

##テンプレートリテラル
ここは知っていたので軽く。
``` `こんにちは、${name} さん` ```のように、バッククォートの中で`${}`の記法で変数を埋め込める。
文字列結合の`+`演算子や、改行文字`/n`を使わずに、簡潔に書けるようになった。

##Destructuring(分割代入)
配列から値を、オブジェクトからプロパティを取り出して、別の変数に代入する式。

```example.js
const colors = ['red', 'blue', 'yellow', 'green', 'orange'];
const [first, second, third] = colors;
console.log(first); // red
console.log(third); // yellow
```

受け取る側の変数の数が足りなかった場合、余った要素は無視される。
オブジェクトのプロパティを受け取るときは、変数名とプロパティ名を合わせる。

##Object literal shorthand
オブジェクトの初期化を簡潔に書けるようになった。

```example.js
// 従来の記法
let type = 'crispy';
let size = 'L';

const pizza = {
  type: type,
  size: size
};
```

```example.js
// 省略記法
let type = 'crispy';
let size = 'L';

const pizza = {type, size};
```

両方とも結果は同じ。プロパティ名を変える必要がないなら省略記法を使いましょう。

##iteration
イテレーションにも新しい記法が追加された。
`for...of`ループを配列に対して使えば、インデックスによる指定がなくても、要素にアクセスできる。

```example.js
const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for(const digit of digits) {
  console.log(digit);
}
// 0 1 2 ... 8 9
```

##スプレッド演算子
`...`<= こいつがスプレッド演算子。
`const a = [...array1, ...array2]`のように書くと、array1とarray2の要素を展開し、新たな配列として変数aに代入できる。
5時間でWebサービスをローンチするためにした７つのこと

# 作ったもの
作ったものがこちらです。タイトルはChange The World。適当です。
URL → [Change The World](https://changeworld.appspot.com/#/)

<img width="689" alt=" 2019-05-19 12.31.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/8037326d-377b-f750-559b-d7bd92eeb38e.png">


# 個人開発ってすごく時間がかかる

以前こんな記事を書かせていただきました。
[初心者3人でwebサービス(webアプリ)を作ったので、立ち上げからリリースまでを時系列に書いていく](https://qiita.com/yuno_miyako/items/d6595719ae7065927499)

この時は一つのwebサービスを作るのに**3人**で**5ヶ月**もかかってしまいました。
とても時間をかけて作ったサービスが使われないと悲しい気持ちになってしまいます。
今回は**時間のかかる工程を全て省き**、**1人**で**５時間以内**にwebサービスをリリースしてみました。

# 作ったもの
## きっかけ(ポエム)
受託開発でとある企業のクーポンのアプリを作っていた時に、僕はふと「こんなことがしたかったんだっけ」と思ってしまいました。
確かにプログラミングが好きで始めた仕事で気楽にやらせてもらっています。しかし、心のどこか虚しさが常につきまとうのです。言われた通りにこれを作ったところで**世界が変わるイメージ**がつかないからだと気づきました。
僕はプログラミングが好きなのだけど、それだけじゃなくて**プログラミングが持つ世界を変えうるポテンシャル**に惹かれていたのだと思い出しました。作りたい、**世界を驚かせるような何かを作りたい**！！
同時に、同じことを思っている人たちってたくさんいるんじゃないかと思いました。熱い想いを持っている人たち、具体的なアイディアを持っている人たちと仲間になりたい。そういう人たちが集まるwebサービスを**爆速**で作ることにしました。

## Change The World
作ったものがこちらです。タイトルはChange The World。適当です。

URL → [Change The World](https://changeworld.appspot.com/#/)

こんな感じに募集をかけることができます。見た人が即座に参加できるようにSlack招待URLやGitHubへ飛ぶためのリンクが用意できます。

<img width="400" alt=" 2019-05-19 12.06.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/234396/25517747-faef-8917-9f66-31b332ca3114.png">

# ５時間で作るための秘訣
Webサービスを作るのに5ヶ月かけてしまった経験があるからこそ、**何が時間食い虫なのかがわかりました**。何をすれば、あるいは何をしなければ爆速でサービスが作れるのかポイントをいくつか紹介したいと思います。

## １、ログイン機能を作らない
ログイン機能は時間食い虫です。ユーザが識別になるので可能性が広がる反面、実装する範囲が広いです。SNSログインも、自前で認証機能を書かなくていい反面、OAuthの実装やアクセストークンの取得など面倒なことが多いです。
コストを鑑みると、ログイン機能は最初はなくても良いのではないでしょうか？一度問いかけてみてください。

## ２、ユースケースを極限まで少なくする
Change The Worldでできることは2つだけです。

* 投稿する
* 投稿されたもののリストを取得する

たったふたつのユースケースに絞ることで、実装コストを大幅に下げることができました。
自分でサービスを作っていると色々な便利な機能を考えついてしまい、どんどんとユースケースが増えていってしまいます。ですが大事なものだけを**2つか3つ**に絞りましょう。**ログイン機能もユースケース増大の主要因**になります。

## ３、CSSはなるべく書かない
**CSSフレームワーク**を使ってなるべく自分ではCSSを書かないようにしましょう。
デザインも凝ろうと思うといくらでも時間を注ぐことができますが、メインのコアは何かを考え、それに注力しましょう。Googleのサービスをみてください。デザインはさほど凝ってないように見えますが(失礼)、世界最強のサービスです。

## ４、ボイラープレートを使う
今回はvueを使ってSPAを構築しました、環境構築はボイラープレートを使いました。
[webpack vuejs-template](https://github.com/vuejs-templates/webpack)

ボイラープレートとは**環境構築がすでにできているテンプレート**のようなもので、開発に必要なライブラリなどが全て入っています。環境構築はボイラープレートを使って3分で終わらせることができました。TypeScriptなど追加したかったですが今回は諦めました。TypeScript入りのボイラープレートもあるようです。

## ５、サーバレス
Googleを始め、多くのクラウドサービスが「いかに手軽にwebサービスを作れるか？」を競い合っています。それらのサービスを使い倒すのがサーバレスです。
今回はGCPを使いました。バックエンド(CloudFunctions)もフロントのデプロイも全てターミナル上で完結します。
FirebaseやNetlifyの驚異的な利便性も今では浸透しました。これらの便利を享受していきましょう。

## ６、細かいところを無視する
細かいところに目をつぶりましょう。あとで時間ができたら直せばいいのです。
機能面の改良、コードの共通化、リファクタリング、デザインの微調整、色々やりたくなりますが全部一旦無視しましょう。どこかにメモしておいても良いかもしれませんが、完成までは手を触れずやっていきます。

## ７、新しい技術を取り入れない
勉強目的の場合、新しい技術を取り入れた方が実りが大きいと思います。
しかし爆速で開発しようと思った時には**自分の知らない技術は一切入れない**方がいいです。
新しい技術は学習コストもかかりますし、必ずどこかでハマります。ハマるとそれだけで数時間持っていかれてしまいます。その結果、挫折してしまっては何も意味がありません。
とりあえずリリースする、それだけを考えましょう。

# 最後に

[Change The World](https://changeworld.appspot.com/#/)
ぜひ、一度冷やかしでもいいので使ってみてください。
こんなことがしてみたいという思いの丈をぶつけて欲しいです。
抽象的な内容でも、具体的な内容でもなんでも構いません。
面白そうなプロジェクトがあれば、ぜひ仲間になりたいです。
VueのカレンダーコンポーネントのV-Calendarを触ってみた

VueのカレンダーコンポーネントのV-Calendarを触ってみました。
ドキュメントも分かりやすくて、使いやすそうな印象です。

公式ドキュメント:https://vcalendar.netlify.com/
公式GitHub:https://github.com/nathanreyes/v-calendar


# install
下記に記載されている手順でinstallします。
自分はRecommendedの`2A. Plugin Method`で使用しています。
https://vcalendar.netlify.com/guide/#installation

# 使い方
### オプションを設定していないカレンダー
```vuejs
<template>
  <div>
    <div>シンプルなカレンダ</div>
    <vc-calendar />
  </div>
</template>
```

<img width="266" alt="スクリーンショット 2019-05-19 11.49.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226008/5c6aa942-80c6-5796-4f1d-34ca4d70503c.png">

### カレンダーをカスタマイズ
slotが使えるのでカスタマイズもできます。
今回は下記を変更してみました。

- headerのタイトルを変更
- 土日の場合は文字色変更
- 日にちの箇所にSVGを反映

```vuejs
<template>
  <div>day-content5</div>
  <vc-calendar :attributes='attributes5' style="width:500px;">
    <template slot='header-title' slot-scope='page'>
      {{page.yearLabel}}年{{page.monthLabel}}
    </template>
    <template slot='day-content' slot-scope='props'>
      <div class="vc-day-content">
      <div v-bind:style="addStyleTextColor(props.day.weekday)">
        {{ props.day.day }}</div>
      </div>
      <div v-if="props.day.day % 2 ==0" style="text-align:center;">
        <img src="../assets/gatsby.svg">
      </div>
      <div v-else style="text-align:center">
        <img src="../assets/slack.svg">
      </div>
    </template>
  </vc-calendar>
</template>

<script>
export default {
  methods: {
    addStyleTextColor: function(weekday) {
      if (weekday === 1) {
        return {
          color: "red"
        };
      } else if (weekday === 7) {
        return {
          color: "#00c0ff"
        };
      }
    }
  }
};
</script>
```

<img width="512" alt="スクリーンショット 2019-05-19 10.54.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226008/72648429-294c-4f58-2ff8-76e1f37f2401.png">
html + css + docker + alpine  nginx + Let's encrypt でポートフォリオを作った

# 追記
[https-portal でポートフォリオつくってみた](https://qiita.com/cheese_ck/items/4e3eac15fb975e06e1f0)
下の作業は全て不要になりました。

# 作った背景
私もそろそろ就活生ですので、インターンに必要なポートフォリオを作成せねば。
ということでせっかくなら1からやってみたい(と言いつつHTMLとCSSはテンプレを使用しましたが)
ので表題の言語やツールを使い実装してみました。

# 環境
- CentOS (ここはなんのOSでもよいと)
- Docker (version 18.X)
- docker-compose (version 1.18.0)

# HTML + CSS について
[エンジニアでポートフォリオ作りました](https://qiita.com/turmericN/items/76559f0b70983469e7c7)
こちらの記事を参考にポートフォリオを作りました。
基本的なHTMLとCSSなので内容の説明は省きます。

# ディレクトリ構造について
```text:tree
.
├── docker-compose.yaml
├── portfolio
│   ├── css
│   ├── img
│   ├── index.html
│   └── js
└── web
    └── default.conf
```
portfolio内に作成したHTML,CSS諸々を入れておきます。

#nginx
最低限の記述のみ行っています。
これがあればSSL通信まで行えます。
example.comは自分のドメインに書き換えてください。

```nginx:default.conf
server {
  listen 80;
  server_name example.com;
  return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;

  ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
  server_name example.com;

  root  /var/www/html;
  index index.html;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;
}
```

# docker
```yaml:docker-compose.yaml
version: '3'
services:
  web:
    image: nginx:1.13.5-alpine
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./web/default.conf:/etc/nginx/conf.d/default.conf
      - ./portfolio:/var/www/html
```
docker-composeの記述内容がわからない方はたくさんわかりやすい記事があるのでググってください。

dockerコンテナにexecコマンドで入ります。
(shellがashなのに最初困惑しました...)
(本当はDockerfileに全部記述してやりたいので今後直します。)

```shell
$ apk update && apk add certbot
$ certbot certonly --webroot -w /var/www/html/ -d example.com -m example@example.com
$ echo '0 0 * * 3 certbot renew' > /var/spool/cron/crontabs/root && crond -l 2 -f
```
あとはexample.comにアクセスしてSSL通信できているか確認してください。
![https.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351683/13a68a96-a107-345c-4103-3cd4335340f3.png)

お疲れ様でした。
(ぜひここらへん強い方はご教授おねがいします)
【失敗という経験を得ることは辛いが、面白い】エンジニアの成長を支える 1on1 ワークショップ に参加して得たもの #engineer_lt

 昨日参加した[『エンジニアの成長を支える 1on1 ワークショップ』](https://engineers.connpass.com/event/126523/?utm_campaign=event_message_to_selected_participant&utm_source=notifications&utm_medium=email&utm_content=title_link)にて、1on1を初めて体験してきました。
結果としてはまったくうまくいかず、かなり凹みましたが、とても面白かった！
貴重な体験ができたと思います。

次に活かすため、イベントの振り返りをしてゆきます。

# まとめ
- かなり綿密にフィードバックを得られるやり方だったため、持ち帰れるものが多かった点が良かった。
- 仕事だけでないテーマについて1on1ができたことは貴重な体験だった。仕事の場では得難い体験だった。
- 1on1をやることで、チームメンバーとして承認されることのメリットについて、自分なりに掴むことができた。

# 本文
最初に講義を受けた後、ワークショップとなります。
イベント全体の流れを確認したい方は、[『こちら』の記事で確認できます](https://www.kotanin0.work/entry/2019/05/18/230000)。

ワークショップは、次の形でやりました。

- 4人1組のチームで行う。
- メンター、メンティー、シャドーコーチ、オブザーバーを、それぞれが担当する。
    - メンターは、話を聞き、相手の内省を促す
    - メンティーは、話を聞いてもらう
    - シャドーコーチは、メンターの振る舞いを観察し、メンターへフィードバックを与える
    - オブザーバーは、1on1全体を俯瞰し、チーム全体へフィードバックを与える
- 話す内容はメンティーが事前に考える。テーマは仕事に限定しなくてよい。
- 25分を1セット（1on1を20分、フィードバックを5分）とし、役割をローテーションしながら合計4セット実施する。
- 参加者とは別に主催側のメンバーが監督役としてチームにつき、タイムキープとアドバイスを与える

1on1は通常2人で行うケースが大半とのことで、5人体制で実施するのはほとんど無いのだそうです。
**こんなに豪華な経験ができるのは貴重です。やったね！**

自分はオブザーバーから始まって、シャドーコーチ、メンティー、メンター、の順に担当しました。
オブザーバーとシャドーコーチを終えて、すでにかなり疲労しました。観察だけなのに。
フィードバックを与える目的で観察するって思った以上に疲れるんだなと。まあ、みんな初対面ですもんね。
観察をするときは以下の点に気を付けました。

- しぐさ、言葉遣い、視線、など、1on1実施者自身が意識できない部分をフィードバックできるように心がけた
- 時間の流れを意識した。意思疎通にいつまでかかり、問題理解に到達するまでにいつまで掛かるか、をフィードバックできるようにした。
- 改善点を先に言い、良かった点は最後に言うことで、チャレンジ自体を否定しないようにした。

自分がメンティーのときには、あえて仕事の話ではなくプライベートな話をさせてもらいました。
理由は、業務で1on1を実施するときには稀なケースを体験してみたかったというのと、
本来であればカウンセラーに相談するような繊細な内容を初対面の人に開示することで、自身の心境の変化を観察するためです。
仕事に必要なマインドセットを、自分の内側にある生理的、根源的な観点から見つめ直そうと思いました。
そうでなければ仕事のレベルアップは望めなさそうだなと、薄々思っていたのかもしれません。

メンティーを経験して、自分を内省し、次の具体的なアクションに結びつけることができました。
とても満足できる結果となりました。
理由を振り返ってみると、こんな感じかと思います。

- メンターが自分の目を見て話をしてくれたので、こちらも喋りやすかった。
- 始まってすぐの1分くらいで、メンターが自分の性格を察してくれ、物事を細かく言語化する時間をくれた。
    - メンターの話を聞くと、「センシティブな内容なので難しかったが、とにかく自分から話すことを我慢した。我慢して黙った」と仰っていたので、「我慢して黙る」ということは大事だと思う。
- 1on1の最初に、メンターが「今日はどこをゴールにしますか？」と言ってくれたので、時間制限を意識できた。

メンターを経験したときは、まったくうまく喋れなかったです。
緊張してしまい、自分から話すことを意識しすぎ、相手に緊張が伝わり、互いに警戒してしまうような、そういった感じだったように思います。
メンティーからは、「話をもうすこし掘り下げておけば具体的なアクションにつながったのでは？」と言われ、なるほどそうだなと思いました。

しかし、なぜいきなり緊張したのか？
いくつか思いつくものを挙げてみました。

- 「オブザーバー、シャドーコーチ、メンティー」というように、主体的に動く立場でなかったところから、主体的に動くメンターという立ち位置になったことで、気持ちの切り替えが出来なかった。
- 「完璧にやれる」という気持ちが自分のどこかにあった。事前に聞いた講義の内容も、「当たり前じゃん、できてるよ」と思ったし、先日ほかのイベントで得た成功体験から、「自分はうまくやれる」という自信があった。そのため、目の前の状況に対応することを意識できなかった。
- 自分がうまく話すことを心掛けてしまった。相手に話してもらうことが大事なのに、自分の話を多くしてしまった。
    - 共感を得るために自分の話をしすぎるのは本末転倒だった。相手の話に終始することを心掛けたい。
    - メンターという立ち位置で考えるよりも、「インタビュアー」という立ち位置でいたほうが緊張しなかったのではないか？

オブザーバー、シャドーコーチ、監督役からは、「話を聞く（傾聴）する」ことの重要性と、「なぜ緊張してしまったのか？を内省してゆくことで、次に同じようになってしまうことを防げるのでは？」というフィードバックをいただきました。
また、自分がメンターを担当したときは1on1が10分しか取れなかったのと、相談内容が仕事以外の話だったので、もう少し認識合わせに時間を割けたらよかったのでは？という意見も出ました。
「最初は、次のアクションを明確にするというよりも、単純に雑談をするだけでも良いのかもしれない」と。
この点は、懇親会でお話しをさせてもらった人たちとも意見は一致しました。相性の問題は一朝一夕には何ともならないということを感じました。
1on1の適切な時間は30分くらいだと聞きました。それ以上は互いに疲れてしまうらしいです。

緊張してしまう自分のクセについては、継続して振り返りを実施してゆきたいです。
何か言語化できたら随時アップしてゆこうと思います。

# 余談
イベント後に、参加者同士で近くの居酒屋で2次会をしました。
業界のウラ話、闇の話、ディープな技術の話、など、多種多彩にしゃべりました。
終始圧倒されっぱなしで、「はぁ、強いエンジニアってこんな感じなんだな」と感心しきりでした。
最後のほうは、第2の勉強会と化してました（笑）
とても面白かったです。またやりたいと思いました。
Wordpressのドメインを変更した時にすること

wordpressのドメインを変更したときに、mysqlに保存されている画像URL情報も修正する必要があったのでメモがてら。


```
UPDATE wp_posts SET guid=REPLACE(guid, 'hoghoge.com', 'taiyop.me');
```


### ユースケース

- httpからhttpsに変更した時
- ドメインを変更した時
【MYSQL】データベースの確認＆テーブルの確認

#目的

よく使うMYSQLのコマンドをまとめました。

自分自身で振り返るためのメモなので、
わからなかったら他を参考にしてください。

#最初に

まずはMYSQLにログイン

```
userMBP:~ user$ mysql -u root -p
Enter password: 
```

1行目
**"-u"**の後に入っているのはユーザー名。
そのあとの**"-p"**はそのユーザーのパスワードを打ち込むよ。
という意味っぽい

2行目
パスワードを入力してログイン

#データベースの確認
```
mysql> show databases;
```

を打つと以下のようにデータベース一覧を確認出来ます。

```
mysql> show databases;

+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| webPage            |
| world              |
+--------------------+
6 rows in set (0.01 sec)
```

#対象のデーターベースを指定

```
mysql> use world;
```

useコマンドで対象（使いたいDB）のデータベースを指定します。
"Database changed"が出ればOK。

```
mysql> use world;
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
```

#テーブルを確認

useコマンドで対象のDBを選択したら、
そのDBのテーブル名を確認できる

```
mysql> show tables;
```

```
mysql> show tables;
+-----------------+
| Tables_in_world |
+-----------------+
| city            |
| country         |
| countrylanguage |
+-----------------+
3 rows in set (0.01 sec)
```
Azureのカスタムロールで使える権限一覧を取得してみた

#RBACで使える権限一覧の取得スクリプト
##はじめに
Azureのリソースやサブスクリプションに関する権限はRBAC(Role Base Access Control)にて管理されます。

Azureポータルには[プリセットのロール](https://docs.microsoft.com/ja-jp/azure/role-based-access-control/built-in-roles)が結構な数用意されているのですが、要望にマッチしないとき、カスタムロールとしてオリジナルのロールを作成することができます。

カスタムで使える権限てどんなものがあるのかな、ということで以前に一覧を取得していたので記事にしました。
※カスタムロールの作成はまたの機会。。

#取得方法
Get-AzProviderOperationというコマンドでリソースプロバイダ毎の操作権限が取得できるので、Excelで綺麗に見られるよう整えました。

```powershell:Get_RBAC_List.ps1

Connect-AzAccount

$Title = "Operation, OperationName, ProviderNameSpace, ResourceName, Description, IsDataAction"

$Date = Get-Date -Format "yyyyMMdd"
$ResultFileName= "RBAC_OperationList"+$Date+".csv"

$DesktopPath = [Environment]::GetFolderPath('Desktop')
$File = "$DesktopPath\$ResultFileName"

New-Item $File -ItemType File
Add-Content $File $Title

Get-AzProviderOperation -OperationSearchString *| ForEach-Object{
    $Operation = $_.Operation
    $OperationName = $_.OperationName
    $ProviderNameSpace = $_.ProviderNamespace
    $ResourceName = $_.ResourceName
    $Description = $_.Description
    $IsDataAction = $_.IsDataAction

    $Line = $Operation+", "+$OperationName+", "+$ProviderNameSpace+", "+$ResourceName+", "+$Description+" ,"+$IsDataAction

    Add-Content $File $Line
}
```

各プロパティの概要は以下の通りです。

| プロパティ         |      概要          |  
|:-----------------:|:------------------:|
| Operation         | 操作権限を表す文字列で、ロール作成に使用             | 
| OperationNmae     | Operationが表す操作内容  | 
| ProviderNameSpace | VMならMicrosoft.Computeなど、リソースの分類 | 
| ResourceName      | 権限の対象となるリソース |
| Description       | 説明 |  
| IsDataAction      | オブジェクト内のデータに対する操作かどうか(ロール定義の書き方に影響) | 

#取得結果
そして取得したものがこちら。。。

![2019-05-19_11h18_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187836/4f5c4f05-b36b-ab02-155e-54823b66a2d1.png)

ちょっと横にずれてるものもありますが数が多い。スクロールバーがすごく小さいです。
前に取得したときは2000行くらいだったのが3倍ほどに増えているので、Azureの進化の著しさを表しているように思います。
カスタムロールを作る場合はここからほしい権限に該当するものを探します。。。

#おわりに
カスタムロール作成のための権限リストを取得したらおびただしい量に増えていました。
今後もリソースや機能が増えていくほど権限も増えるので、ほしいものを探すのが大変になりますね。
もうちょっと見つけやすくなると嬉しいのですが。

ただ、記事を作成しながら下のサイトを見つけてしまいました。
[Azure Resource Manager のリソース プロバイダー操作](https://docs.microsoft.com/ja-jp/azure/role-based-access-control/resource-provider-operations#microsoftsupport)
昔はなかったように思うのですが見落としていたのか、これがあるなら自分で取得しなくてもよかったのでは。。。
カスタムロール作るのに権限一覧がほしいなーという方はこちらを使いましょう。。。
Androidにプロキシサーバーを立てて開発機のサーバーにlocalhostとしてアクセスする

`localhost`のコンテキストで開発中のWebアプリにAndroidからアクセスしたかったので。

## 結論

`Servers Ultimate` というアプリを使う


### 設定方法

- アプリを起動したら一覧から `Servers`を選択
- `+`ボタンから設定を追加
- `GENERAL` タブでAndroid端末からアクセスしたいポートを設定
    - ブラウザで `localhost:4000`にアクセスしたいなら `PORT` に 4000を指定
    - 他はデフォルトで良い
- RULESタブでプロキシ先の設定を追加
    - `HOST CONTAINS`に `localhost` を設定
    - `Reply with this IP` にLAN内の開発機のIPアドレスを指定
    - `And this PORT` に開発機で立てているサーバーのポート番号を指定

### 使い方

上記設定をした上で `Servers`を選択すると、設定した項目があるので、再生ボタンを押せばOK
NiftyCloudMobileBackendの導入とSwiftの連携

##NCMB(NiftyCloudMobileBackend)の導入
ます[NCMBの無料登録ページ](https://console.mbaas.nifcloud.com)から無料登録をしましょう。
そしたら、新しいアプリをクリックして、
<img width="265" alt="スクリーンショット 2019-05-19 11.06.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325764/47ce657b-6579-b10f-beda-71f1d2c325d3.png">
以上のようにアプリ名をSampleなどとつけてください。

以下の処理はNCMBの[ホームページのドキュメントのクイックスタートの記事](https://mbaas.nifcloud.com/doc/current/introduction/quickstart_ios.html)を参考に作ってみてください.
Android の MobileVision API を使って 顔検出する

### Mobile Vision API

Android の画像認識の API です。
Google Play Service で提供される。

[Mobile Vision](https://developers.google.com/vision/)

[Google Play Services](https://developers.google.com/android/guides/overview)

下記の公式サンプルコードや解説記事が公開されている

[Android Vision API Samples](https://github.com/googlesamples/android-vision)

[Detect Facial Features in Photos](https://developers.google.com/vision/android/detect-faces-tutorial)

[Face APIで顔検出を試してみる](https://qiita.com/droibit/items/ec0ce34a0ad5e34593e5)


### Mobile Vision API の設定

``` app/build.gradle
dependencies {

    // 追加する
    compile 'com.google.android.gms:play-services-vision:10.2.0'

}
```

``` AndroidManifest.xml
<manifest 

    <!-- 追加する -->
    android:installLocation="auto" 

    package="xxx">

    <application
        android:theme="@style/AppTheme">

    <!-- 追加する -->
        <meta-data android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version"/>

    <!-- 追加する -->
        <meta-data
            android:name="com.google.android.gms.vision.DEPENDENCIES"
            android:value="face" />

        <activity android:name=".MainActivity">
```


### 画像ファイルから顔検出する

初期の API にバグがあったようです。

公式サンプルコードでは、FaceDetector　の代わりに、
SafeFaceDetector.java が提供されている。

[reference: FaceDetector](https://developer.android.com/reference/android/media/FaceDetector)

```
// FaceDetector　を生成する
    FaceDetector detector = new FaceDetector.Builder(context)
        .setTrackingEnabled(false)
         .setLandmarkType(FaceDetector.ALL_LANDMARKS)
         .build();

// 画像ファイルを bitmap 形式で読み込む
    InputStream stream = getResources().openRawResource(R.raw.face);
    Bitmap bitmap = BitmapFactory.decodeStream(stream);

// Frame を生成する
    Frame frame = new Frame.Builder().setBitmap(bitmap).build();

// 顔検出する
    SparseArray<Face> faces = safeDetector.detect(frame);

// ランドマークを取得する
    Face face = faces[0];
    List<Landmark>	landmarks = face.getLandmarks();
```


### 検出した顔の上にランドマークを表示する

公式サンプルコードでは、FaceView.java が提供されている。

下記のような処理を行う。

View#onDraw にて、顔のbitmapを描画する。
その上に、緑の円 (Circle) を描画する。

その際に、canvas の大きさに合うように、canvas と Bitmap の大きさの比率を求め、円の位置を調整する。

### スクリーンショット
![vision1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64075/d5579c8b-87e6-4467-8522-9a6c157188c9.png)

サンプルコードをgithub に公開した。
https://github.com/ohwada/Android_Samples/tree/master/Vision1

### 関連記事

- [Camera2 API と Mobile Vision API を使って 顔検出する](https://qiita.com/ohwada/items/f66dcf14295d9e7c0bf5)
- [Camera2 API と Mobile Vision API を使って バーコードを検出する]
(https://qiita.com/ohwada/items/7caf29e1acc28b96042b)
- [Camera2 API と　Mobile Vision API を使って 文字列を検出する]
(https://qiita.com/ohwada/items/7a09420b4838b4df7a12)
- [Camera2 API と　Mobile Vision API を使って 顔とバーコードを一緒に検出する](https://qiita.com/ohwada/items/4040095de92c399cf001)
ARDUINOで３．５ｍｍステレオミニジャックから音を出す

#目的
表題の通り。
将来的には、Arduinoでシンセやエフェクターを作りたい。
そのためのハンズオン。

#補足
+ ググったところ、モノラルスピーカーから出力するやり方はよく見かけるが、ステレオジャックへの出力方法が意外と見つからなかった。簡単すぎて、あえて書く人がいないのかもしれない。
+ Arduinoの知識：Lチカ、温湿度測定くらいはやったことがある。
+ 電子工作の知識：ほぼ０
+ C,C++の知識：チョットデキル
+ Mozziライブラリというものを使ってみる。将来を見据えて。なんとなくいろいろできそうなので。

#用意するもの
+ Arduino Uno
+ 開発マシン（Arduino IDEが動くもの）
+ Arduino IDE（１.８.９を使った）
+ [Mozziライブラリ](https://sensorium.github.io/Mozzi/)
+ [３．５ｍｍステレオミニジャックＤＩＰ化キット（秋月で購入）](http://akizukidenshi.com/catalog/g/gK-05363/)

#Arduino IDE のセットアップ
+ 「ツール」→「ボード」で、「Arduino/Genuino Uno」を選択
+ Mozziライブラリのインストール
 + Mozziのサイトより、Mozzi.zipをダウンロードする
 + 「スケッチ」→「ライブラリをインクルード」→「.ZIP形式のライブラリをインストール」
 + 「スケッチ」→「ライブラリをインクルード」で「Mozzi」があればOK

#スケッチ
サイン波を発振させるサンプルを用いる。
これを動かして、ポーという音が聞こえればOKとなる。
「ファイル」→「スケッチ例」→「Mozzi」→「01.Basics」→「sinewave」

#回路
さて、どうすればいいのか。

<img width="400" alt="11224-04.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419727/b71df855-a026-0c30-e875-907ccf4478ba.jpeg">
<img width="100" alt="K-05363.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419727/3de52d68-8e31-e006-5cd5-f437819aa829.jpeg">

これらをつなぎたいわけだ。
抵抗とか、コンデンサとか、そういうものはいるのか？
全くわからない。

スピーカーから出力している例を参考にする。
https://deviceplus.jp/hobby/entry020/

なるほど、D9とGNDをつなぐらしい。
しかし、ステレオジャックの端子はL、G、G、R、と４つある。GはGNDだろう。L、Rは左右だろう。
どこにどうつなぐのか。

一旦こうしてみる。
![回路１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419727/39ce8a3f-c26f-023d-253e-367ffe1dbd82.png)

で、でた。音出た。
なるほど。
しかし、左からしか出ない。
それはそうだ、Lにしかつないでいない。

音はひとまずモノラルでもいいが、LR両方から出したい。
Rはどこにつなげれば良いのだろうか。

同じくD9につなげばいいのだろうか。

結論、以下でできた。
![回路２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419727/67a85864-2709-67a1-e3d0-4a3ca459d8dc.png)

#所感
音を出すだけで1日を費やした。
先が思いやられるが、偉大なる一歩と前向きに捉えたい。
ほぼ勘でやっているので、間違いや不備があるかもしれない。自己責任の事。
ユースケース駆動開発 - 振る舞い要求（ユースケース作成）編

この記事は[ユースケース駆動開発実践ガイドメモ](https://qiita.com/terumichi1209/items/dce83261288b716b549b)の振る舞い要求（ユースケース作成）について記載します。
[ドメインモデリング](https://qiita.com/terumichi1209/items/ed5c37657a75f8d9aa28)で定義した言葉を使ってユースケースを作成していきます。

##ユースケースを作成する理由
本書では、以下のように記載されてます。
>ユースケースは「ユーザーがこのシステムで何をしたいか？」「ユーザは何を得たいのか？」の手助けになる。

ユースケースはエンジニア以外でも理解できるし作成できるので、ユースケースが多かったり複雑な場合は工数が大きくなる理由を伝えやすいし、伝わりやすいです。

予定よりも工数がかかりそうなら特定の機能は初回リリースからは外すなどのアクションも取れるので、規模が大きい案件ほど大事な工程だと感じてます。

ユースケースを作成する時間は実案件ではなかなか取れないかと思いますが、仕様を明確にする武器として使っていけるかと思います。
また、DDDを取り組む際にもユースケースは有用ですので、本記事で少しでもその足掛かりになればと思います。

##ユースケースの抽出
ユーザのアクションとそれに対応するシステムの振る舞いを**基本コース**と**代替コース**のそれぞれ記載します。

ここでの題材は[前回](https://qiita.com/terumichi1209/items/ed5c37657a75f8d9aa28)のハンバーガーショップを例にします。

商品一覧から商品をショッピングカートに入れるまでを考えてみます。
前回のドメインモデル同様、正解はないのでチーム内での意見がまとまれば良いと思います。

###基本コース
基本コースは正常範囲内のケースを記載します。

**システム**は**商品一覧**ページを表示する。
**ユーザ**は**商品一覧**から**商品**をクリックする。
**システム**は**商品詳細**ページを表示する。
**ユーザ**は数量を選択して**ショッピングカートに追加ボタン**をクリックする。
**システム**は選択した数量の**商品**を**ショッピングカート**に追加する。

###代替コース
代替コースは正常範囲外のケースを記載します。

**想定外の数量が選択されて、ショッピングカートに追加しようとした場合**
システムはエラーメッセージを表示し数量を0にする。

**販売終了した商品が選択されていて、ショッピングカートに追加しようとした場合**
システムはエラーメッセージを表示し商品一覧ページを表示する。

-----------------
アクター、バウンダリ(画面名)、振る舞いが記述されていることがわかります。

振る舞いはコードを実装する際のコントローラ部分となることが多いです。
>商品一覧ページを表示
商品詳細ページを表示
ショッピングカートに追加

もし、この基本コースがログインしている前提なら事前条件を記載したくなりますが、それはまたログインに焦点を合わせた別の基本コースとして書くべきです。
シンプルかつ言葉を明確に書くことで抜け漏れを減らすことができます。

もし、入力フォームなどの基本コースを記載する場合、システムによっては入力項目が多くなることが予想されますが、その場合は以下のようにシンプルで大丈夫です。
<br>

**システム**はアカウント作成ページを表示する。
**ユーザ**はユーザ情報（名前、メールアドレス、パスワードなど）を入力して登録ボタンをクリックする。
**システム**は顧客アカウントを作成してをメッセージを表示する。
<br>

フィールド名が多い場合はまとめてクラス名で記載して良いです。

厳密にするともっとユースケースがありますが、大まかな内容は以上になります。

##まとめ
ユースケースは「ユーザーがこのシステムで何をしたいか？」「ユーザは何を得たいのか？」の手助けになりますし、全体の規模感も見え始めて早いタイミングでやるやらないの材料ともなります。
docker-composeで、rails dbconsoleが使えなくてハマった話。

# Dockerパネェ
みなさん、こんにちは。欅坂46のてちとりさが推しメンの内田です。
２期生の藤吉ちゃんも最近推してます。

DockerとRailsを使って、webサービスを現在作っているんですが、localにrubyやらmysqlやらを入れなくても開発ができちゃうって、なんて素晴らしいんだろっていつも思ってます。ありがとうありがとうm(_ _)m

# でもね？
だけどもだっけっd、、
Dockerを使っているととてつもない壁にぶち当たるときが来るんですよ。
それも何度も。

そんなときはやっぱり気が滅入っちゃって、やっぱりローカル環境にruby入れて開発しようかなぁとか思っちゃうんですよ。
いやぁ、まいったなぁって。

# そしてハマった
おハマりしました。

```shell_session
$ docker-compose run web rails dbconsole
Couldn't find database client: mysql, mysql5. Check your $PATH and try again. docker
```

それまで順調に開発していたので、いざ手が止まってしまったら、疲れがブワッと出てきます。
そんなときはYouTubuで欅坂の動画でも見ましょう。

# 解決策見つかる
ググりにググってやっと見つけたのが、このサイトでした。
[docker-composeでRailsの開発環境を作る](https://qiita.com/skyriser/items/2cf98b747ed6577cc5ee)
この記事を読んで、ふと気づいたことが、

**あれ、apt-getのところちょっと違うぞ？？**ってこと

この方はpostgresql-clientを入れています。
どうやら、mysqlのimageを用意して満足していちゃだめらしいですね。
ごめんなさい:open_hands:

webサーバー側のDockerfileにmysql-clientを入れていないからエラーになっていたんです。
修正したDockerfileはこんな感じ。

```dockerfile
FROM ruby:2.6.3
# mysql-clientを入れないと、pathが通らないよって怒られる。
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs mysql-client
RUN mkdir /web
WORKDIR /web
ADD web/Gemfile /web/Gemfile
ADD web/Gemfile.lock /web/Gemfile.lock
RUN bundle install
ADD web /web
```
そして、もう一度dockerをビルド。

```sh
$ docker-compose build
```
勇気を振り絞って、再挑戦してみましょう。

```sh
$ docker-compose run web rails dbconsole

Enter password: 
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.16 MySQL Community Server - GPL

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MySQL [web_development]> 
```

動いた:innocent:

これで開発進められるぅぅ！
やったぁぁ！

この記事を読んで、あなたもやっぱDocker最高かよ！っていうことを再確認していただけたら嬉しいです！ :whale:

おわり。
ニューラルネットワーク活性化関数SigmoidとReLUの関係

#目的
ニューラルネットワークの活性化関数にSigmoid関数とReLU関数がある。
個人的には、**その２つの関係を長らく勘違い**していたので手短にその内容を示す。


#Sigmoid関数とReLU関数

Sigmoid関数

```math
h(x) = \frac{1}{1+exp(-x)}
```
　　
ReLU関数

```math
h(x) = \left\{
\begin{array}{ll}
x & (x \gt 0) \\
0 & (x \leq 0)
\end{array}
\right.
```

#勘違い
上記の関数の内容をみると、Sigmoid関数のほうが高度な、一般的な意味で、レベルの高い関数にみえる。
個人的には、Sigmoid関数のexp()含む計算の**処理時間を短縮するため**に、ReLU関数というのが、新たに、導入されたと考えていた。

#Sigmoid関数とReLU関数の位置づけ
ただしくは、以下に引用するとおりの状況だと思う。

##「ゼロから作るDeep Learning -- Pythonで学ぶディープラーニングの理論と実装」（発行所　株式会社オライリー・ジャパン）
p53引用
>シグモイド関数は、ニューラルネットワークの歴史において、古くから利用されてきましたが、最近ではReLU(Rectified Linear Unit)という関数が主に用いられます。

##wiki
ReLUについて
(出典：https://ja.wikipedia.org/wiki/活性化関数）
>Yann LeCunやジェフリー・ヒントンらが雑誌ネイチャーに書いた論文では、2015年5月現在これが最善であるとしている。

(出典:https://en.wikipedia.org/wiki/Rectifier_(neural_networks))
>It has been demonstrated for the first time in 2011 to enable better training of deeper networks, compared to the widely-used activation functions prior to 2011, e.g., the logistic sigmoid (which is inspired by probability theory; see logistic regression) and its more practical counterpart, the hyperbolic tangent. The rectifier is, as of 2017, the most popular activation function for deep neural networks.

#まとめ
**ReLUを使うのが一般的、かつ、良い。**
実際に、SigmoidとReLUの両方を使って性能比較されている報告も沢山ありますが、どう使うという条件を合わせるのが難しいと思うので、それらの情報、参考程度かとも思います。実際に、よい性能を出しているモデルがどちらを使っているのかで、判断するのが妥当だと思います。それは、今は、**Sigmoidではない**という結論だと思います。

コメントなどあれば、お願いします。:candy:

#関連（本人）
[良書「ゼロから作るDeep Learning -- Pythonで学ぶディープラーニングの理論と実装」を読む](https://qiita.com/enoughspacefor/items/d545b23bd64d285647de)
Ack.vim で最初の検索結果を自動でウインドウに開かないようにする

## はじめに

Vim 上で grep 検索をかけるとき、[ack.vim](https://github.com/mileszs/ack.vim) を使っているのですが、自動で最初の検索結果がウインドウで開いてしまうのに違和感を感じていました。

その挙動を OFF にする方法を調べたので、この記事に簡単にまとめます。

## tl;dr

`:Ack` の代わりに `:Ack!` を使うだけで OK でした。


`:help Ack` の結果を引用します。`!` をつけることで、最初の検索結果にジャンプする挙動を OFF に出来るようです。

```
:Ack[!] [options] {pattern} [{directory}]                               *:Ack*

    Search recursively in {directory} (which defaults to the current
    directory) for the {pattern}.  Behaves just like the |:grep| command, but
    will open the |Quickfix| window for you. If [!] is not given the first
    occurrence is jumped to.
```

## より便利にするために

自動で最初の検索結果をウインドウに開く挙動を OFF にする方法はわかったのですが、定常的にこの挙動を OFF にしたいと思っていました。

どうすればいいかを調べたところ、 [Ack.vim の README](https://github.com/mileszs/ack.vim#i-dont-want-to-jump-to-the-first-result-automatically) に Tips が載っていたので、引用します。

以下を自分の `.vimrc` に書くと良いとのことでした。

```vim
cnoreabbrev Ack Ack!
nnoremap <Leader>a :Ack!<Space>
```

以下、それぞれのコマンドの意味を調べました。

### `cnoreabbrev Ack Ack!` について

`cnoreabbrev` は、分解すると以下のような意味になります。

* `c`：コマンドラインモード
* `nore`： 非再帰的
* `abbrev`：短縮入力

つまり、コマンドラインモードで `Ack` と入力したら、自動で `Ack!` と補完されるようになります。

### `nnoremap <Leader>a :Ack!<Space>` について

`nnoremap` は、分解すると以下のような意味になります。

* `n`：ノーマルモード
* `noremap`：非再帰的

`<Leader>a :Ack!<Space>` は、`<Leader>a` と入力すると、`:Ack!<Space>` という入力に変換します。

## 終わりに

インストールしているだけのプラグインでも、少し調べることで便利な使いかたを知れたり、vim のコマンドについて知ることができたりして良いなと思ってます。

簡単にではありますが、コツコツ調べていきたいなと思います。

## 参考 URL

* [map - Vim日本語ドキュメント](https://vim-jp.org/vimdoc-ja/map.html#:cnoreabbrev)
Firebase Firestoreのcollection groupを使ってみる

security rulesとindexesも含めたら思ったより時間がかかってしまったのでメモ

# やりたいこと

メッセージの公開/非公開を設定できるメッセージ投稿アプリを考える
公開されたメッセージの一覧を表示したい

Firestoreの構造は以下のようにする

```
user/{uid}/posts/{docId}

{
  body: string,
  timestamp: timestamp,
  isPublic: boolean
}
```

posts以下の、`isPublic: true`なdoc一覧を取得したい

# やったこと
## security rules

security rulesは以下のようにした

```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {

    function published() {
      return resource.data.isPublic == true
    }

    match /user/{uid} {
      match /posts/{docId} {
        allow read, write: if request.auth.uid == uid;
      }
    }

    match /{path=**}/posts/{docId} {
      allow list: if published();
      allow get: if published();
    }
  }
}
```

[Firebaseのdocument](https://firebase.google.com/docs/firestore/security/rules-query#secure_collection_group_queries_based_on_a_field)を参考にした

一行目の `rules_version = '2';`と、
最後の`match /{path=**}/posts/{docId}` が必要っぽい

## indexes

公開メッセージを時間順に並べたいので、インデックスを設定する

Firebaseの[console](console.firebase.google.com)でインデックスを設定する

Database > インデックス > 複合
このモーダルのコンテンツがスクロールできることに気づかなくて数分使った :cry: 
<img width="300" alt="Screen Shot 2019-05-19 at 10.30.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191702/91c5ca11-09e8-478a-8c26-d12e69c1ad5e.png">

isPublic, timestampでインデックスを作成した
<img width="500" alt="Screen Shot 2019-05-19 at 10.33.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191702/0228fe60-db7d-e231-1e2a-87a63417bbcd.png">

## 取得
以下のように取得した

```javascript
const firestore = firebase.firestore()

const snapshot = await firestore
  .collectionGroup("posts")
  .where('isPublic', '==', true)
  .orderBy('timestamp', 'desc')
  .get()

snapshot.forEach(function(doc) {
  console.log(doc.id, doc.data())
}
```

無事取得できた


# わかったこと
- collection idが同じならどの階層にあってもそれ以下のdocsを取得する
- 一つでもlist, get権限がないcollectionが含まれてるとエラーになる :thinking: 
    - `FirebaseError: Missing or insufficient permissions.`
- ~~日本語だと[collection groupのドキュメント](https://firebase.google.com/docs/firestore/query-data/queries#collection-group-query)のページが（現状）無い~~
    - 日本語が追加されてた
- isPublicでフィルタしたいだけなら、単一フィールドで除外を追加すると良さそう
AVRマイコンでいろいろやる②-2　シリアル通信2

ようやく解決できました。

# 1.信号確認
鈍って受信できていないのではないかという疑惑を明らかにするために
とりあえずTXDから出ている信号を見てみました。
直列に挿入されている抵抗値を変えてみます。

![20190518_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/1930b409-62fc-e2c0-190b-28d56e883897.jpeg)
1kΩ

![20190518_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/e4e13482-7524-297b-31e1-96d930c09c85.jpeg)
330Ω

![20190518_3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/fefe8833-17b3-486a-2885-14d1d39da9ef.jpeg)
0Ω

1kΩと330Ωだとほぼ変化なし。
0Ωだときれいになっています。
抵抗いれてそこまでなまっているかと言われればそういうわけでもないので、
別のことが原因だと推測できます。
明らかに送信間隔詰め詰めなのが見て取れるので、
おそらくこっちが原因かなと思います。

# 2.送信間隔変更
そこでもっと送信の時間間隔を空けます。
ADCデータの送信も考慮して計算します。
最大サンプルレートは15kSample/sなのでスタートビット、ストップビットを含めると
実は300kbit/s必要でした。
なのでボーレートを500kに設定します。（これだったらパリティも入れられそう）

続いて8Bitタイマで割込みを入れて送信間隔を管理します。

設定値は2Byte同時送信を考えて15kHzです。
逆数を取って66.67μsでタイマ割込みが発生するように設定します。
20MHz/前置分周=0.4μs/1カウント
一番いいところは8分周、166カウントで検知をかけることにします。

とりあえずデバッグしてみます。
![20190519_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/f960fe85-0725-9b95-6c4e-4ac84940c763.png)
一発目割込み 73.35μs 

![20190519_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/781fabbb-05c1-d655-037e-901dc0fa4a87.png)
二発目割込み 140.2μs 

140.2μs - 73.35μs = 66.85μs(14.959kHz)

まあ今のところはこれで十分です。
あとあと計測時刻のずれが問題になってくるかもしれません。
そしたら水晶を16MHzにするとかは必要になってきそうです。

ということで以下のコードを流して試してみます。

```C:main.c
#include <avr/io.h>
#include <avr/interrupt.h>


int main(void)
{
	
    /* Replace with your application code */
	
	//int mode =0;
	InitC();
	PORTC = 1;	//PORTCはデバッグ用
	UCSR0A = UCSR0A |0b00000010; //倍速設定
	UCSR0B = 0b00001000;
	UCSR0C = 0b00000110;
	UBRR0 = 4;
	PORTC = 2;
	
	TCCR0A=0b00000010;//比較一致動作に設定
	TCCR0B=0b00000010;//8分周設定
	OCR0A=166;//一致発生カウント
	TIMSK0=0b00000010;//タイマ一致割込み有効
	
	sei();//割込み有効
	
	while(1)
	{
		
	}
}
//タイマ一致割込み
ISR(TIMER0_COMPA_vect){
	while ( !(UCSR0A & (1<<5)) );
	UDR0 = 0x77;
	while ( !(UCSR0A & (1<<5)) );
	UDR0 = 0x33;
	PORTC++;
}
void InitC(){
	DDRC = 0b00111111;
}

```

![20190519_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/283a439e-d4c6-64f9-bb63-0cbd732298f1.jpeg)
信号波形は想定通りです。
パリティ2bit分入れる余裕もありそうです。

そして最後にPCで受信できるかを試します。
![20190519_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416780/34ff589c-9437-5ab6-34fa-0a8b1cfa750c.png)

問題なさそうです。
後から抵抗1kΩを入れましたが、今のところは文字化けはしなかったです。

ということで次はPCからデータを送信してそのアンサバックを返すようなことをやります。
AWS CodeCommitとGitlabのミラーリング

# 背景
GitlabとAWS CodeBuildを組み合わせてCIをしようとしましたが、入力SourceにGitlabを選択することができませんでした。
（Amazon S3 バケット、CodeCommit、GitHub、GitHub Enterprise、Bitbucketが対応している。)

しかし、とある理由で`Gitlab CE`か`AWSCodeCommit`しか選べない状況でした。
当初CodeCommitを使って対応しましたが、使いづらかったのでGitlabからミラーリングするようにしたお話です。

# Gitlabのバージョン
GitLab CE **v10.8**以降

v10.8以降からCE版でもリポジトリのミラーリングが可能になりました。
v10.8以前は`Gitlab→AWS API Gateway→lamda→S3`、`Gitlab→Jenkins→CodeBuild`など対応コストが少し高かったです。
ググると、この辺りの方法を用いた記事が上位にヒットするので、今はもっと簡単にできるよ！という意味で発信してます。

# ミラーリング方法
- 書くつもりでしたが、調べたところ、以下の記事が大変丁寧にまとまっていたため参照下さい。
    - [GitLabの外部リポジトリへの同期機能を使ってクラウドのGitリポジトリと同期する](https://qiita.com/translucens/items/efc09eb45d7328c26874)
- 流石に味気ないので、追加情報を示します。
    - `Git credentials`のユーザ名で、CommitのAuthorが上書きされることは**ありません**。
    - `Git credentials`を発行したIAMユーザにSourceIP制限が有る場合、Gitlab CEが動作しているサーバのIPが設定されていなければミラーリングできません。   
        - 私は詰まりました。。

# 問題点
CodeCommitへの反映まで、最大5分程度の遅延が有ります。
CICDパイプラインをリアルタイムに動かしたい場合は、`Only protected branches `設定を有効にするか、CodeCommit等のAWS正式対応なリポジトリを選ぶか、GitlabCIなどを使って独自にミラーリングする仕組みを構築する等の対応が必要です。。

# 参考文献
- [AWS　複数の入力ソースと出力アーティファクトサンプル
](https://docs.aws.amazon.com/ja_jp/codebuild/latest/userguide/sample-multi-in-out.html)
- [Gitlab Repository mirroring](https://docs.gitlab.com/ee/workflow/repository_mirroring.html)
- [GitLabの外部リポジトリへの同期機能を使ってクラウドのGitリポジトリと同期する](https://qiita.com/translucens/items/efc09eb45d7328c26874)
Desktop : OpenCV Sharpness

<h5>Goal</h5>
Test OpenCV Sharpness.

```OpenCV_Sharpness.java
import org.opencv.core.Core;
import org.opencv.core.Mat;
import org.opencv.imgcodecs.Imgcodecs;
import org.opencv.imgproc.Imgproc;

public class OpenCV_Sharpness {

    static {System.loadLibrary(Core.NATIVE_LIBRARY_NAME);}

    public static void main(String[] args){
        try{
            Mat src = Imgcodecs.imread(
                    "D:\\projects\\Java\\OpenCV_Samples\\resource\\imgs\\clean.jpg",
                    Imgcodecs.CV_LOAD_IMAGE_COLOR);

            Mat dst = new Mat(src.rows(),src.cols(),src.type());
            Imgproc.medianBlur(src,dst,9);
            Core.addWeighted(src,2.1,dst,-1.1,0,dst);
            Imgcodecs.imwrite("D:\\projects\\Java\\OpenCV_Samples\\resource\\imgs\\clean_sharped.jpg",dst);

        }catch(Exception e){
            e.printStackTrace();
        }
    }
}
```
<h5>Result</h5>
![opencv_sharp.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276243/8512a4d9-665c-3a04-d2ba-123f0e53374c.jpeg)
ActiveRecord::PendingMigrationErrorへの対処

# ActiveRecord::PendingMigrationErrorへの対処
- ActiveRecord::PendingMigrationErrorが表示され、ホーム画面が表示されない状態となりました
![a000a9ddecfc16173a9915b0a01304d1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/353542/93ce6a67-6940-8d83-af4e-8fa0a245d919.png)
- マイグレーションが保留になっている？ 
[「ActiveRecord::PendingMigrationError」と出た時のエラー解決方法【rails】 - Qiita](https://qiita.com/ryota_ueda/items/fcf111ed0b56822408ed)
- 確かに`rails db:migrate`を実行できていませんでした

```
[vagrant@localhost sample_app2]$ rails db:migrate
Rails Error: Unable to access log file. Please ensure that /home/vagrant/environment/sample_app2/log/development.log exists and is writable (ie, make it writable for user and group: chmod 0664 /home/vagrant/environment/sample_app2/log/development.log). The log level has been raised to WARN and the output directed to STDERR until the problem is fixed.
```
- パーミッションのエラーっぽいので、対象のファイルのパーミッションを変更しましたが、解決しません

```
[vagrant@localhost sample_app2]$ rails db:migrate
rails aborted!
NameError: undefined local variable or method `ip' for main:Object
/home/vagrant/environment/sample_app2/db/migrate/20190507092859_create_microposts.rb:12:in `<top (required)>'
/home/vagrant/environment/sample_app2/bin/rails:9:in `require'
/home/vagrant/environment/sample_app2/bin/rails:9:in `<top (required)>'
/home/vagrant/environment/sample_app2/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'

Caused by:
NameError: undefined local variable or method `ip' for main:Object
/home/vagrant/environment/sample_app2/db/migrate/20190507092859_create_microposts.rb:12:in `<top (required)>'
/home/vagrant/environment/sample_app2/bin/rails:9:in `require'
/home/vagrant/environment/sample_app2/bin/rails:9:in `<top (required)>'
/home/vagrant/environment/sample_app2/bin/spring:15:in `<top (required)>'
bin/rails:3:in `load'
bin/rails:3:in `<main>'
Tasks: TOP => db:migrate
(See full trace by running task with --trace)
```

- migrationファイルの末尾に「ip」という文字を誤って入力してたのが原因でした、、、
- migrationファイルを修正し解決しました！！
Linuxで全ユーザのPATHに/snap/binなどを追加する

`/etc/environment`を書き換えればよい。

```bash:/etc/environment
PATH="/snap/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games"
```

自分だけでは、.bashrcなどにスクリプトを書けばよいが、実行してるjenkinsユーザなどで逐一チェックするのは大変である。
Ubuntuであっても、`/snap/bin`へのパスが通っていないので、ここの書き換えを行っている。

ちなみにMacOSでは`/etc/paths`に設定する。
VSCodeでPythonの自作モジュールにも補完を効かせる方法

## 方法

（Macの場合、）「⌘+,」で設定を開き、下図のように「autocomplete ex」などと検索して、「**Python > AutoComplete: Extra Paths**」で`settings.json`を開きます。

<img width="716" alt="スクリーンショット 2019-05-19 9.46.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154068/cd522477-8a95-c3c6-0c1f-d4bdd241cb26.png">

そして、下記のように追加したいモジュールのパスを書いておくことで、自作モジュールにもAutoCompleteの補完を効かせることができます。

```settings.json
{
    "python.autoComplete.extraPaths": [
        "~/path/to/your/module1",
        "~/path/to/your/module2"
    ]
}
```


## 参考

- [Editing Python Code in Visual Studio Code](https://code.visualstudio.com/docs/python/editing#_autocomplete-and-intellisense)
docker(12)dockerでX11を動かすいくつかの方法

dockerでX11を動かすのに、いくつかの方法を記載する。

docker(3)dockerで画面表示
https://qiita.com/kaizen_nagoya/items/a353862ec69fccce8bc2

で記録を始めたら、いくつかの流儀があることがわかった。

ややこしいのはX11のhostという概念。
ネットワークのhost、仮装環境のhostという概念に起因している。

#1 docker起動OS側でX11を動かす方法

## 1.1 LinuxでX11を動かしdockerでX11アプリを動かす

##1.2 macOSでX11を動かしdockerでX11アプリを動かす
Docker for Mac で X11 アプリケーションを動かす
https://qiita.com/hoto17296/items/bdb2ab24bc32b6b7f360


Docker コンテナ上で動く X11 アプリケーションのウィンドウをディスプレイに表示させる
https://qiita.com/hoto17296/items/7c1ba10c1575c6c38105

##1.3 WindowsでX11を動かしdockerでX11アプリを動かす

# 2 dockerですべて起動する方法

# 3 他の機材のX11を利用する方法

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
GitBucketをバックアップする - Windows環境

## 作業内容
* 環境変数の設定
* データベースファイル保存フォルダの修正

### 準備（要：インストール）
* [Git for Windows](https://gitforwindows.org/)
* [Cygwin](https://www.cygwin.com/) (bash, find ...etc)

### 参考
https://github.com/visyeii/GitBucket_BackupScript

## 環境変数の設定
バックアップ用バッチファイルの更新が必要

[公式バックアップスクリプト](https://github.com/gitbucket/gitbucket/wiki/Backup#using-from-windows)先頭付近に```SET PATH=C:\cygwin64\bin;%PATH%```を追加します。
※Git for Windows, cygwinは各自インストール下さい。



```:backup.bat
@echo off

REM Go to script directory
CD /D %~dp0

REM 下記を追加
SET PATH=C:\cygwin64\bin;%PATH%

bash backup.sh d:\gitbucket\home e:\backup\gitbucket http://localhost:8080/database/backup

```

### なぜ更新が必要なのか？
WindowsのfindコマンドとLinuxのfindコマンドが別モノであり、デフォルトではWindowsのfindコマンドが使用されてしまいます。
backup.shはLinuxのfindコマンドを想定しているため、うまく動作しません。

```shell:backup.sh（抜粋）
repositories=$(find $gitbucketRepositoriesFolder -name *.git -print)
```

## データベースバックアップファイル保存フォルダの修正
保存フォルダが ```[GitBucket実行フォルダ]/home/backup``` に変更となり、
さらに、バックアップファイル名が```gitbucket-database-backup.zip``` から```gitbucket-db-YYYY-MM-DD_HH-mm.zip```という形に変化しています。
例：2019/01/14 12:59に保存するとgitbucket-db-2019-01-14_12-59.zipになります。

上記に対応させます。（backup.shから当該箇所を抜粋しています）

```shell:backup.sh（抜粋）
#
# Export the database
# 
if [ "$GITBUCKET_DB_BACKUP_URL" != "" ]
then
    echo "Database backup"
    curl $GITBUCKET_DB_BACKUP_URL > /dev/null
    cp -f $GITBUCKET_DATA/backup/gitbucket-db-*.zip $BACKUP_FOLDER > /dev/null
else
    echo "No database URL provided, skipping database backup"
fi
```

## 参照
* バックアップ方法
  * https://qiita.com/tenten0213/items/27ef294193dc85661215
* バックアップスクリプト
  * https://github.com/gitbucket/gitbucket/wiki/Backup#backup-script

## 復元方法
### (1) DB(アカウント情報など）の復元
@IZAKAYA様の記事をご参照ください。
https://qiita.com/IZAKAYA/items/534534b732c1b8e190db
※4.30.1から4.31.2へSQLをインポートしてみると、PUBLIC.ACCOUNTのPASSWORD VARCHAR(40)が(200)になっていてデフォルト管理者でもログイン不可になりました。
※※SQL定義のPASSWORD VARCHAR(200)に変更すると、ログイン可能でした。
他にも結構SQLに差分が見受けられたので、復元ではなくGitBucket自体をバージョンアップする場合は事前に動作確認を行う等、慎重な検証が必要だと思います。

### (2) リポジトリの中身の復元
repositoriesフォルダをバックアップからオリジナルへコピーする。

 * オリジナル：```d:\gitbucket\home``` 
 * バックアップ：```e:\backup\gitbucket```
Ruby初心者が勉強会に参加してみた（全７回）第2回

前回に引き続き、

第２回へ参加してきました。



今回、重点的に勉強した内容は大まかに分けて以下の３点です。

・Sinatraの基本

・Git/GitHub

・データベースとは

どれもとても内容の濃い充実した内容でした！



##WEBサービスとは何か。

Rubyというプログラミング言語によって
DBアプリケーション内の情報のコミュニケーションを取っている。
あくまでRubyとDBは別物であり、
RubyをいれたらDBが繋がっている訳ではない。

補足として、
PostgresqlとMysqlは似ているので
Postgresqlがある程度分かるようになれば
Mysqlも使用できるようになる。



##DBアクセスするときの流れ

DBアプリケーションはなんのためにあるか。
→重要な情報が保管される、誰にでも見られたらまずい。
なので、
DBアプリケーションに入るときは基本的にユーザー情報が必要になる（ユーザーIDとパスワード）
それがつまり、DBアクセスする時の認証となる。
ただし、認証は簡単にできる訳ではなく、
認証となるコードを書かなければならないが、(それは大変なので）
それを比較的簡単にするためにライブラリが用意されている。

つまり！DB認証するためにライブラリを用意して接続する。

例えば、
require "pg"　←ライブラリ
PostgreSqlに接続するためにライブラリ



##FWってなんですか？

WEBアプリを作るための便利ツール
→なんでも１から作成するのは大変なので、
アプリ作成をする上である程度共通化されていることを
まとめてくれている。



##そして今回、なぜSinatraを使うのか

sinatraを使う理由としては、Rubyを使っているから。
またRailsに比べてシンプルで描きやすい。
Railsはお作法のようなものをたくさん覚えないといけない。
これがRailsを挫折する人の原因にも繋がっている。

ポイントとしてSinatraはシンプルだけど、
Railsに繋がっていく部分もある。
完全に別物という訳ではなく、限りなく近いもの。

Sinatraは勉強用とか練習用ではなくしっかりしたもの。
実際に使用しているところもある。



##エラーメッセージ

Sinatraはエラーメッセージで解決方法を描いてくれる。
とても親切。Railsだとエラーメッセージで迷う部分があるけれど、
答えを書いてくれるなんて・・・！



##式と文の違い。

これはRubyの伝統のようなもので、

大まかな違いとしては
・式→戻り値を使うもの
　　　式の時はメソッドを呼び出す時に（）を省略しない。
・文→文は戻り値使わないから（）を使わない。

Rubyはほぼ全ての文が式で出来ている。
これは言語によって違う。
作者の考え方によって違うとのこと。



##Git/GitHub

Git/GitHubについては、

ポートフォリオ作成している時に使用してましたが

今回で改めて使用方法が腑に落ちました。

その際にはソースツリーを使用していたのですが

ターミナルでコマンドでやる方が自分の中ではやりやすく、

今後はコマンドでやっていきたいと思います！

勉強会で教えていただいたコマンドのとても参考になる例↓

基本的なGitコマンドまとめ - Qiita
基本的なgitコマンドまとめ。 そもそも自分用に作ったものなので見づらいです。 #init `$ git init`
qiita.com
##なぜデータ型があるのか。

→メモリ節約
　データに意味を持たせる
　制限をかけたい
　管理しやすくする

## データベースの基本

エクセルに例えると

ブック: データベース

シート:テーブル

列:カラム

行:レコード

##マスターデータ、トランザクション(取引)データ

マスタ：顧客や社員、商品の詳細データ、固定的なデータ

トランザクション：取引データ、随時追加される流動的なデータ

========

====

など、記載が出来ていないこともありますが

今回もとても情報量が多く脳にバンバン情報が入ってきた気がします。

今回学んだことを再度復習して、

今後に活かしていきたいと思います。