OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】for-ofとfor-inの違い

for-ofとfor-in

どっちがどっちかわからなくなるときがあるのでメモ

# for-of



**配列の要素の繰り返しに特化している**

`names`の`値`を一つずつ`name`に代入する。

```JavaScript:main.js
const names = ['田中', '山田', '佐藤', '井上'];

for (const name of names) {
  console.log(name);
}

// 田中
// 山田
// 佐藤
// 井上
```
***
また、for-ofでは分割代入と同じ記述が使用でき、複雑な構造を持つ配列から
必要な要素だけを取り出すことができる。

```JavaScript:main.js
const personInfo = [
  { name: '田中', age: 22 },
  { name: '山田', age: 21 },
  { name: '佐藤', age: 24 },
  { name: '井上', age: 20 },
];

for (const { age } of personInfo) {
  console.log(age);
}

// 22
// 21
// 24
// 20
```


# for-if
**オブジェクトの各プロパティの値に対する繰り返しに特化している。**

`personInfo`の`プロパティ名`を一つずつ`info`に代入している

```JavaScript:main.js
const personInfo = {
  name: '田中',
  age: 22,
  height: 170,
}

for (const info in personInfo) {
  console.log(`${info} : ${personInfo[info]}`);
}

// name : 田中
// age : 22
// height : 170
```
***
 配列に対しては`index`を代入する。
`names`の`index`を一つずつ`name`に代入している

```JavaScript:main.js
const names = ['田中', '山田', '佐藤', '井上'];

for (const name in names) {
  console.log(name);
}


// 0
// 1
// 2
// 3
```
[WIP]最も簡単なWordpressのHTTPS化(Wordpress+https-portal+Docker+Docker-compose)

# 目標

* ローカル環境のWordpressにHTTPSでアクセスできること

# 前提

* Dockerインストール済
* Wordpressに触れたことがある

# 実行環境

* CPU
    * Intel(R) Core(TM) i5-6400 CPU
* OS
    * Windows 10 pro 
        * バージョン 1909
* アプリケーション
    * Docker
        * バージョン 19.03.13
* 使用するDocker Image
    * mysql: 5.7
    * wordpress: latest
    * https-portal: 1

# 手順

1. [こちら](https://docs.docker.com/compose/wordpress/)よりdocker-composeの内容を転記

    ```
    version: '3.3'

    services:
       db:
         image: mysql:5.7
         volumes:
           - db_data:/var/lib/mysql
         restart: always
         environment:
           MYSQL_ROOT_PASSWORD: somewordpress
           MYSQL_DATABASE: wordpress
           MYSQL_USER: wordpress
           MYSQL_PASSWORD: wordpress

       wordpress:
         depends_on:
           - db
         image: wordpress:latest
         ports:
           - "8000:80"
         restart: always
         environment:
           WORDPRESS_DB_HOST: db:3306
           WORDPRESS_DB_USER: wordpress
           WORDPRESS_DB_PASSWORD: wordpress
           WORDPRESS_DB_NAME: wordpress
    volumes:
        db_data: {}
    ```

1. `docker-compose up`で起動することを確認
2. http://localhost:8000 へアクセス
3. 言語設定やユーザー設定などの初期登録を済ませる
3. `https-portal`を追記

    ```
    version: '3.3'

    services:

      https-portal:
        image: steveltn/https-portal:1
        ports:
          - '443:443'
        environment:
          STAGE: local
          DOMAINS: 'localhost -> http://host.docker.internal:443'

       db:
         image: mysql:5.7
        ...
    ````

1. `docker-compose up`で起動することを確認
2. https://localhost へアクセス

# 総評

WIP
Notionでページにメンションをする

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2020](https://qiita.com/advent-calendar/2020/notion) 7日目のエントリです。
6日目は[Notionでサブページの権限設定を変更する](https://qiita.com/pictiny/items/cba8889685b44462b2ee)でした。

# ページリンク
Notionではページ内に他のページへの[リンクブロック](https://qiita.com/pictiny/items/32a868130432d7b405e1#%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)を作ることができます。
リンクブロックは[ブロック](https://qiita.com/pictiny/items/11b5ce7fdf203beacfdc#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)単位になっているため、文章中に埋め込むことができません。

## メンション
文章中にリンクを埋め込みたい場合には、メンションを使います。
リンクブロックと同様に、ページ内にNotionのページへのリンクテキストを貼り付けるとメニューが表示され、 `Mention page` を選択するとメンションが作られます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/bfaa3cfe-9033-3495-2ebb-7d97e19e900b.png)

メンションで作られたリンクはリンクブロックと同様にアイコンとタイトルが使われますが、アイコンや文字サイズは少し小さく表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/df30c902-7ec7-2716-72f9-67afdb0ccd62.png)
上がメンション、下がリンクブロックです。

# まとめ
リストでの箇条書きなど、メンションが便利なことが多いのではないでしょうか！

公式ドキュメントは[Create links & backlinks](https://www.notion.so/Create-links-backlinks-cb3c406403c940b68af52de121e05474)にありますので、そちらもご覧ください。
sub命令

# はじめに
 - この記事は[ひとりNEONアドベントカレンダー2020](https://qiita.com/advent-calendar/2020/neon-only) 8日目の記事です
 - [昨日](https://qiita.com/tomoaki_teshima/items/55460f79a55699961cab)は`div`命令を紹介した。
 - 順序が逆転している気がするが、今日は`sub`命令を紹介する
 - [`add`命令が多すぎる](https://qiita.com/tomoaki_teshima/items/79faa3581c18abce0a3c)ということは当然`sub`命令も多いということである


![sub.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12162/ac1f36c5-0b4f-946f-f509-67ada2a0835a.png)

```
$ grep ^v.*sub /usr/lib/gcc/aarch64-linux-gnu/7.5.0/include/arm_neon.h | cut -f 1 -d ' ' | sed -e 's/[usf][0-9]\+//g' | sort | uniq -c
      6 vhsub_
      6 vhsubq_
      8 vqsub_
      2 vqsubb_
      2 vqsubd_
      2 vqsubh_
      8 vqsubq_
      2 vqsubs_
      6 vrsubhn_
      6 vrsubhn_high_
     11 vsub_
      2 vsubd_
      6 vsubhn_
      6 vsubhn_high_
      6 vsubl_
      6 vsubl_high_
     11 vsubq_
      6 vsubw_
      6 vsubw_high_
```

# `sub`命令
 - 従来と同じく、64bit幅の引数を2つ取る`sub`命令と128bit幅の引数を2つ取る`subq`命令がある
 - `sub`命令は`add`命令と同じく、計算結果がオーバーフローする場合はオーバーフローした分だけが保持される
 - 浮動小数点型(`float16x8_t`、`float32x4_t`、`float64x2_t`)で使える引き算命令はこいつしかない。
 - 演算内容は`第1引数-第2引数`

```sub.cpp
        int16_t src0[] = {-3633, 30162, 14067, 10566, -3604, 15767, -15238, 12605,};
        int16_t src1[] = {30549, -14165, 26950, 12751, 12780, 32151, 1146, 28989,};
        int16_t dst[8] = {0};
        int16x8_t vsrc0 = vld1q_s16(src0);
        int16x8_t vsrc1 = vld1q_s16(src1);
        int16x8_t vdst  = vsubq_s16(vsrc0, vsrc1);
}
```

```
0:31354   // -3633 - 30549    = -34182 だけど演算結果が 31354 (=-34182+65536)
1:-21209  // 30162 - (-14165) =  44327 だけど演算結果が-21209 (= 44327-65536)
2:-12883
3:-2185
4:-16384
5:-16384
6:-16384
7:-16384
```

# `qsub`命令
 - 末尾に`q`が付くのが64bit/128bitの違いだが、頭に`q`がつく場合は、飽和演算を意味する
 - 符号なし整数型の場合は最小値`0`、最大値`255`、符号あり整数型の場合は最小値`-128`、最大値`127`でクランプするので、演算結果がこの範囲を超えても、結果はこの範囲にクランプされる
    - いずれも8bit整数型の場合。レーンのbit幅に応じて最大値/最小値は変わる

```sub.cpp
        int16_t src0[] = {-3633, 30162, 14067, 10566, -3604, 15767, -15238, 12605,};
        int16_t src1[] = {30549, -14165, 26950, 12751, 12780, 32151, 1146, 28989,};
        int16_t dst[8] = {0};
        int16x8_t vsrc0 = vld1q_s16(src0);
        int16x8_t vsrc1 = vld1q_s16(src1);
        int16x8_t vdst  = vqsubq_s16(vsrc0, vsrc1);
}
```

```
0:-32768   // int16_tの最小の値=-32768
1:32767    // int16_tの最大の値= 32767
2:-12883
3:-2185
4:-16384
5:-16384
6:-16384
7:-16384
```


# `subl`命令
 - 演算結果をbit拡張しながら結果レジスタに書き込む
 - 引数が`int8x8_t`型ならば、結果は`int16x8_t`型。引数が`int16x4_t`型ならば、結果は`int32x4_t`型。
    - bit拡張されるので、引数として64bit幅のレジスタしか取れないことに注意
- `subl_high`命令では、128bit幅レジスタを引数に取るが、使われるのは上位64bit分だけ。 


# `subw`命令
 - 演算結果がオーバーフローしないようにbit拡張されたレジスタから引く
 - 第1引数が128bit幅、第2引数が64bit幅、要素数は同じだけど各要素のbit幅が違う型のみ引数に取る
    - ex: `int16x8_t`と`int8x8_t`で戻り値は`int16x8_t`、`uint32x4_t`と`uint16x4_t`で戻り値は`uint32x4_t`など
 - `subw_high`命令では、第2引数に128bit幅レジスタを取るが、使われるのは上位64bit分だけ。
 - このあたりの構成は`add`命令と全く同じである

# その他
 - `hsub`命令と`subhn`、`rsubhn`命令は後日また解説する
 -  明日も手島が執筆の予定で、今の所`load`命令解説の予定です
VTCompressionSessionEncodeFrame deadlock現象

# 現象

動画のsample bufferを独自作成されたqueueでエンコードしてますが、たまにencoderリセットしたあとエンコード走るとVTCompressionSessionEncodeFrame
でdeadlockになって、statusも返ってこないまあまあ死んでしまう


## code 
```obj-c

-(void)append:(CMSampleBufferRef)sb
{
    CFRetain(sb);
    dispatch_async(queue, ^{
         .....

         // ここでdead lock,statusも返ってこない
         auto s = VTCompressionSessionEncodeFrame(mImpl.mSession, cr, CMSampleBufferGetPresentationTimeStamp(sb), CMSampleBufferGetDuration(sb),    nullptr, nullptr, &flags);
      if (s) {
         NSLog(@"encode status %d", (int)s);
      }
        // samplebuffer解放
        CFRelease(sb);
    });
}

```



# 原因

encoder session解放処理をエンコード処理と同じqueueで処理してなかったから。


# 修正

```obj-c

-(void)invalidateSession
{
    dispatch_async(queue, ^{
     if (mSession) {
            VTCompressionSessionInvalidate(mSession);
        }
   });
}


```
hintを追加したらtype errorで動かなくなった話

# 概要
laravelでmockeryを用いてunit testを作成中、以下のエラーが出た。

```
TypeError: Argument 1 passed to App\Http\Services\hoge::__construct() must be an instance of App\Http\Services\hoge or null, instance of Mockery_0__Tests_Feature_hoge given, called in /var/www/hoge/tests/Feature/hogeTest.php on line 277
```

`hoge`型か`null`のみ受け付けるコードに、`Mockery_0__Tests_Feature_hoge`を与えたというエラーである。


# エラーについて
## エラーを起こしたコード

```:php-テストコード.php
# testServiceで利用するモック
$hogeServiceMock = \Mockery::mock(hogeService::class);
$hogeServiceMock->shouldReceive('gethoge')
                ->andReturn($gethoge);

// テスト対象のサービス、コンストラクタでモックと連携
$testService = new testService($hogeServiceMock);

// テスト対象の関数実行
$response = $testService->issue($testInput);

// テスト結果の確認
$this->assertSame($expected, $response);
```

```:php-テスト対象.php
class TestService
{
    /** @var hogeService */
    private $hogeService;
    
    /**
     * AuthController constructor.
     *
     * @param hogeService $hogeService
     */
    public function __construct(hogeService $hogeService)
　　{
        $this->hogeService = $hogeService;
    }

    /**
     * テスト対象関数
     *
     * @param string $testInput
     * @return 実行結果の文字列
     */
    public function issue(string $testInput)    
    {
       # いろいろする
    }

```

## エラーの経緯
当初、`testService`側のhintを記載漏れしており、コードレビューを経てhintを全て追加することに。
すると今まで正常稼働していてたテストコードが上記のtype errorを出力するようになった。

## エラーが起きた原因
実はテストコードphp側に記載した`hogeService`への名前空間(`use`)にタイポがあり、hogeserviceをうまく呼び出せていなかった。
そのためmockeyが独自型の`Mockery_0__Tests_Feature_hoge`型として動作しており、hintを追加したことでそのエラーに気が付いた。

## エラー解消
ちゃんと`hogeService`を呼び出せるように名前空間のtypoを直す。
するとテストコード自体には一切手を入れずとも、hintのエラーが解消する。
ユーザー名の表示

sessionを使ってユーザー名の表示をさせる方法
前提条件
１．userテーブルがあること。DBのこと

session[:user_id]の値をもとにしてログイン中のユーザー情報をDB（データベース）から取得する。
その際には、find＿byメソッドを使い、userテーブルからidカラムの値がsession[:user_id]と同じユーザーを取得して、変数に代入する。

つまり？
＊DBに登録されているユーザーのidを探してsession[:user_id]と同じであれば代入される形

【使い方】
layouts/application.html.erb

<% cureent_user = User.find_by(id:session[:user_id]) %>
<li>
<% = link_to(cureent_user.name, "/users/#{current_user.id}") %>
</li>

＊cureent_userは変数だからここは自由


今回はこれでおしまい
さあ寝よう
【JavaScript】ネスト構造のオブジェクトの複製方法

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。


##オブジェクトの複製方法

下記のようなobj1というオブジェクトがあるとする。
このオブジェクトをコピーしてobj2を作る。

```javascript
const obj = { 
    prop1: "a",
    prop2: "b"
    };
```
最も簡単な方法は、オブジェクトリテラルを丸ごとコピーして、定義する方法。

```javascript
const obj2 = { 
    prop1: "a",
    prop2: "b"
    };
```
こうすることで、objと同じ構造のobj2が生成される。
今回の場合、シンプルな構造なのでコピペで簡単にできるが、複雑なオブジェクトになった時に冗長的になる。
また、objがリテラル構造で表記されていない場合、コピペでは対応できない。

例えば、

```javascript
obj2 = Object.copyObject(obj);
```
みたいな一発でコピーできる関数が用意されていたらいいのだが、残念ながらjavascriptには用意されていない。

javascriptは **「オブジェクトを複製する」**　というという関数を持ち合わせていない。

ちなみに、

```javascript
obj2 = obj;
```
としても、参照情報が複製されるだけで、オブジェクトが複製されることはない。

詳しくは、↓  
[JavaScriptにおける変数の参照について](https://qiita.com/sho_U/items/3d64d23fe31ed09e9dcb)



ではどうするか。

###**Object.asign**メソッドを利用する。

Object.assignとはObjectオブジェクトが持つassignメソッドのことであり、
第一引数のオブジェクトに対し、第二引数以降のオブジェクトを結合（マージ）するメソッドである。

例えば

```javascript
const data = { 
    prop1: "a",
    };
```
と

```javascript
const data2 = { 
    prop2: "b"
    };
```
のオブジェクトをマージするには

```javascript
mergeObj = Object.assign(data1, data2);

console.log(mergeObj);

//{prop1:"a", prop2:"b"}
```
とする。

これを応用して、複製する。

第一引数に空のオブジェクトを用意して、そこに複製したいオブジェクトをマージすれば結果複製される。

```javascript
obj2 = Object.assign( { }, obj1);
```

##ネスト構造のオブジェクトの場合

先ほどと同じように実装してみる。

```javascript
const obj = { 
    level: 1,
    nest: {
        level: 2
    },
};
const cloneObj = Object.assign({}, obj);
```
cloneObjを見てみる。

```javascript
console.log(cloneObj);

//{ level: 1, nest: { level: 2 } }
```
行けてるぽい。

では複製後にobjのnest.levelプロパティの値を変えてみる。

```javascript
obj.nest.level = 3;
```
そして、再度cloneObjを確認すると

```javascript
console.log(cloneObj);

//{ level: 1, nest: { level: 3 } }
```
nest.levelの値が連動して変化してしまっている。
つまり、純粋に複製されているわけでなないということです。

これはなぜかと言うと　javascriptはプリミティブ型の場合はコピーし、オブジェクトの場合は、参照情報をコピーするという挙動からきます。

詳しくはまたまたこちら。
[JavaScriptにおける変数の参照について](https://qiita.com/sho_U/items/3d64d23fe31ed09e9dcb)

Object.assginメソッドも同様に、複製するプロパティーの中身がプリミティブ型（今回の場合levelの値の1)は、そのまま1が複製されて、複製するプロパティーの値が、オブジェクト型(今回の場合nestの値{level:2})については、その参照情報が複製されるということです。
よって、objのnestの値と、cloneObjのnestの値は同じオブジェクトを参照しており、obj.nestの変化が、coneObj.nestに影響を受けることになります。

では、どうすれば良いのか。
再起的にObject.assginをかけます。
どういうことかといいますと、Object.assginメソッドでプロパティを先頭から複製していく時、そのプロパティーの値がオブジェクト型だった場合は、再度その値に対して、Object.assignメソッドをかけてやるのです。こうすることにより、プリミティブ型が出現するまで、潜っていき再起的に複製するという訳です。

こんな感じですね。

```javascript
//Object.assignメソッドを定義。
const Clone = (obj) => {
    return Object.assign({}, obj);
};

function deepClone(obj) {
    // 一層を複製する。
    const newObj = Clone(obj);
    Object.keys(newObj)//keysメソッドでプロパティーだけの配列を作る。
        .filter(k => typeof newObj[k] === "object")//プロパティの値がオブジェクトだけのものを抜き出す。
        .forEach(k => newObj[k] = deepClone(newObj[k]));//プロパティ：オブジェクトが出現する限り再帰的にdeepCloneメソッドを呼び出す。
    return newObj;
}
const obj = { 
    level: 1,
    nest: {
        level: 2
    }
};
const cloneObj = deepClone(obj);
```

以上となります。お読みいただきありがとうございました。
間違ってたらすみません。。。
linux関係自習メモ

・dockerのcentosコンテナで作業した
・入力中のディレクトリやコマンドはtabで補完できる
・深いディレクトリを一気に使う場合はmkdir に-p　オプションを付ける
・ディレクトリをコピーしたい場合にはcopyに-rオプションを付ける
・lessコマンドは無かったので、yum install less した
・作る
フォルダ：mkdir
ファイル：touch
Github Actions でテスト用のS3を使う


```.github/workflows/s3-local.yml
name: s3-local

on:
  pull_request:

jobs:
  s3:
    runs-on: ubuntu-18.04
    steps:
      - name: run minio
        run: |
          docker run -d -p 9000:9000 --name minio \
                     -e "MINIO_ACCESS_KEY=ABCDEFGHIJKLMN" \
                     -e "MINIO_SECRET_KEY=0123456789" \
                     -v /tmp/data:/data \
                     -v /tmp/config:/root/.minio \
                     minio/minio server /data
      - name: check s3 command
        env:
          AWS_ACCESS_KEY_ID: "ABCDEFGHIJKLMN"
          AWS_SECRET_ACCESS_KEY: "0123456789"
        run: |
          echo "hello" > ~/test.txt
          cat ~/test.txt
          aws --endpoint-url http://127.0.0.1:9000/ s3 mb s3://test-bucket # make bucket
          aws --endpoint-url http://127.0.0.1:9000/ s3 ls
          aws --endpoint-url http://127.0.0.1:9000/ s3 cp ~/test.txt s3://test-bucket # cp
          aws --endpoint-url http://127.0.0.1:9000/ s3 ls s3://test-bucket # ls
          aws --endpoint-url http://127.0.0.1:9000/ s3 cp s3://test-bucket/test.txt - # check content
          aws --endpoint-url http://127.0.0.1:9000/ s3 rm s3://test-bucket/test.txt # rm object
          aws --endpoint-url http://127.0.0.1:9000/ s3 rb s3://test-bucket # remove bucket
```
flashメソッドの角括弧の中身はなんでもいい件

#はじめに
　先日、`flashメソッド`を使って、メッセージ送信成功時に画面に「成功しました」的なメッセージを表示させる方法を投稿したが、その後に調べていると驚くべき発見があったので、紹介。

##前回の投稿では

コントローラーとビューに以下のように記述するように紹介した。

```ruby

flash[:success] = '送信されました'
```

```erb
<%= flash[:success] %>
```

そのときは、`:success`に意味があると思っていた。しかし、`:success`には特別な意味がなかった。その時には、他にも`:notice`を角括弧で入れている場合もあり、
成功時には、`:success`、
失敗時には、`:notice`と思い込んでいた。

##実は
　角括弧の中身は、コントローラーとビューが一致さえしていれば、どんな文字でもOK！もちろん、`:a`でもいい。（まぁ、わかりやすい命名の方が読みやすいが…）
　あくまで、ハッシュのような形で、それをビューで表示させているようだった。
Progate Python学習

<h1>Pythonとは</h1>
Pythonとは、Webアプリ開発や機械学習、統計処理などを行うことの出来るプログラミング言語です。ProgateのPython学習は約5時間ほどかかりましたが、Pythonについて深く学ぶことが出来ます。

<h1>Pythonの基本的な使い方</h1>
<h3>文字列</h3>
`print`を書くことで文字を出力することが出来ます。「Hello World」のような文字は**文字列**と言い、シングルクォーテーション`'`またはダブルクォーテーション`"`で囲みます。
行頭に`#`を書くことでコメントを書くことが出来ます。

```python
print("Hello World")

#この行はコメントです
```

<h3>数値</h3>
数値は文字列と違い、クォーテーションで囲む必要はありません。`+`,`-`,`*`,`/`を用いて足し算、引き算、掛け算、割り算を行うことが出来ます。

```python
print(3)

print(3 + 7)

print(7 - 3)
```

<h3>変数</h3>
「変数名　= 値」と書くことで変数を定義することが出来ます。`print(変数名)`と入力することで変数の値を出力することが出来ます。この時クォーテーションは書きません。

```python
name = "John"

number = 5

print(name)
```

<h3>データ型</h3>
「文字列」や「数値」というのは**データ型**と呼ばれ、それぞれ「文字列型」と「数値型」と言います。データ型の異なる文字列型と数値型を連結すると、エラーが起きてしまいます。そのため、**型変換**をする必要があります。数値型を文字列型に変換するには「str」を用います。文字列型を数値型に変換したい場合には「int」を用います。

```Python
price = 100
print("りんごの価格は" + str(price) + "円です")

count = "3"
price = 100
total_price = price * int(count)
print(total_price)
```

<h3>リスト</h3>
複数のデータをまとめて管理するにはリストというものを用います。リストの要素には、前から順に「0, 1, 2,・・・」と数字が割り振られており、これを**インデックス番号**といいます。リストの各要素は、`リスト[インデックス番号]`とすることで取得することができます。

```Python
foods = ["pasta","curry","sushi"]
print("好きな食べ物は" + foods[2] + "です")
```

<h3>条件分岐</h3>
<h5>if文</h5>
if文を用いると「もし○○ならば☓☓を行う」という条件分岐が可能になります。
ifの条件式が成立した後の処理を書く時、インテンドしないと処理が実行されないのでインテンドするようにします。
条件式の中では、２つの値を比較するための記号**比較演算子**がよく使われます。
`==`は二つの値が等しいとき、`!=`は二つの値が等しくないときに実行されます。
if文に「else」を組み合わせることで「もし○○ならば☓☓を行う、そうでなければ△△を行う」という条件分岐ができるようになります。if文の条件がFalseのとき、elseの処理が実行されます。
if文で、条件が成り立たなかった場合を複数定義したい場合は、「elif」を用います。

```Python
score = 50
if score == 100:
  print("よくできました")
elif score >= 60:
  print("もう少し頑張りましょう")
else:
  print("もっと頑張りましょう")
```
「条件1も条件2も成り立つ」というような場合の条件式は`and`を用いて、`条件1 and 条件2`のように書きます。
「条件1か条件2が成り立つ」というような場合の条件式は`or`を用いて、`条件1 or 条件2`のように書きます。
`not`を用いると、条件の否定をすることができます。

```Python
time = 14
if time > 10 and time < 18 :
  print("就業時間です")

time = 15
if time == 10 or time == 18 :
  print("おやつの時間です")

time = 9
if not time == 18 :
  print("退社時刻ではありません")
```
<h5>while文</h5>
for文を使うと、リストの要素を順に取り出して処理を行うことができます。`for 変数名 in リスト:`と書くことで、リストの要素の数だけ、処理を繰り返すことができます。

```Python
foods = ["pasta","curry","sushi"]
for food in foods:
  print("好きな食べ物は" + food + "です")
```

while文もif文と同様に繰り返し処理を行うことが出来ます。下のようにコードを書くと、初めxの値が10で、xの値は1ずつ減り続け、xが1になるまで処理し続けます。

```Python
x = 10
while x > 1:
   
    print(x)
   
    x -= 1
```

<h1>最後に</h1>
洗練さんでインターンの課題(Progate 学習コース　PythonⅠ～Ⅳ)です。
[Progate　Python](https://prog-8.com/languages/python)

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります！やる気は人一倍です！
[洗練](https://senren.work/)
技術的負債を残さないためにMVPとインクリメント、複雑系と煩雑系を区別する

フリーランスの@linyclarです。
今更ながらリーン・スタートアップを読んで気づいたことがあったので共有します。

# MVPとインクリメントを区別する

スタートアップで仮説検証のためにMVP（実用最小限の製品）を構築しているフェーズで
「とにかくコードを書け！　どうせ一月立たずに捨てられるから設計なんて無駄だ！」
のような発言は出てきがちで、なまじ正しいのでタチが悪いといえます。
実際、向かうべき方向を定めることが重要であり、そのためにコードは振り回され設計作業は無駄になります。
正しいのでこの方針で突き進んでしまい、事業が成功した段階で技術的負債に頭を抱えることになります。
Cynefinフレームワークの複雑系プロジェクトの典型的なシナリオでしょう。

この典型的なシナリオに陥る原因は、機能追加の理由が「仮説検証や学習のため」から「ビジネス価値のインクリメントのため」にシフトしているのにやり方を変えないことにあります。
ビジネス価値のインクリメントのために機能追加することが多くなってきたなら、コードが捨てられることがなくなったということであり、設計をするべき時がきたことを意味します。

なので、ビジネスサイドやプロダクトオーナーと一緒に「このストーリーはMVPなのかインクリメントなのか」確認して、MVPなら捨てるかいずれ再実装することになると伝えておいた方がいいでしょう。

# 複雑系なら顧客に、煩雑系ならプロダクトオーナーにMVPを提供する

複雑系プロジェクトの場合、ビジネスサイドやプロダクトオーナーにも正解はわからないため、MVPを実装して実験と検証を繰り返すしかありません。
煩雑系プロジェクトの場合、ビジネスサイドやプロダクトオーナーあるいは専門家が分析すれば正解はわかります。
言い方を変えると、答え合わせが複雑系プロジェクトではプロジェクトの外で行われるが、煩雑系プロジェクトならプロジェクトの中で完結するともいえます。

もし、煩雑系プロジェクトで頻繁にコードを捨てるようなことをしているなら、実装しないMVPをプロダクトオーナーに提供することでコストを減らせるかもしれません。
例えば、Dropboxはプログラムを作る前にデモ動画を作って見込み顧客が存在するのか確認したそうです。
同じように、画面イメージとか動作イメージ図をプロダクトオーナーに提供し正しい方向か確認するわけです。
作り込む前に方向修正するわけなので、実装コストは最小限になり技術的負債も発生しません。
優秀なプロダクトオーナーがいて適切にバックログリファインメントを行っていれば必要のないことですが、分析が苦手なプロダクトオーナーの場合には有効でしょう。
ただ、「仕様書を書いている！（アジャイルじゃない！）」と追及されるかもしれないので、方向性確認のためだと共有しておいた方が良いかもしれません。

# 参考文献

[リーン・スタートアップ](https://www.nikkeibp.co.jp/atclpubmkt/book/12/P48970/)
[More Effective Agile](https://www.nikkeibp.co.jp/atclpubmkt/book/20/P86580/)
CSSだけでクリックできるレビューの星（★★★★☆）を作る方法

# どうも7noteです。レビューや口コミがとても重要な時代になってきましたね。

ホームページでもレビューを見て商品を購入するかどうか決める人がとても増えてきたと思います。
となると実装できないと困りますよね。

そこでCSSだけでできるレビューの星を作って評価できるものを作っていきます。

データを記録させるためにはサーバーと連携させたり、javascriptの組み込みが必要になります。
ここでは見た目の動きについての作り方を解説します。

**見本**

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/0d030ad2-2bdf-9d83-7e80-0a72f3ca924e.gif)


## ソース

```index.html
<div class="review">
  <p>レビュー</p>
  <div class="stars">
    <span>
      <input id="review01" type="radio" name="review"><label for="review01">★</label>
      <input id="review02" type="radio" name="review"><label for="review02">★</label>
      <input id="review03" type="radio" name="review"><label for="review03">★</label>
      <input id="review04" type="radio" name="review"><label for="review04">★</label>
      <input id="review05" type="radio" name="review"><label for="review05">★</label>
    </span>
  </div>
</div>

```

```style.css
.stars span{
  display: flex;               /* 要素をフレックスボックスにする */
  flex-direction: row-reverse; /* 星を逆順に並べる */
  justify-content: flex-end;   /* 逆順なので、左寄せにする */
}

.stars input[type='radio']{
  display: none;               /* デフォルトのラジオボタンを非表示にする */
}

.stars label{
  color: #D2D2D2;              /* 未選択の星をグレー色に指定 */
  font-size: 30px;             /* 星の大きさを30pxに指定 */
  padding: 0 5px;              /* 左右の余白を5pxに指定 */
  cursor: pointer;             /* カーソルが上に乗ったときに指の形にする */
}

.stars label:hover,
.stars label:hover ~ label,
.stars input[type='radio']:checked ~ label{
  color: #F8C601;              /* 選択された星以降をすべて黄色にする */
}
```

## 解説

ラジオボタンで星を用意して、選択された星以降の星に色がつくようなCSSをかいていきます。

まず、**予め星を逆順に並べます**（`flex-direction: row-reverse;`）。そのうえで、`input[type='radio']:checked ~ label`の指定をすることで**ラジオのチェックがついた星以降の星に色が付きます。**
逆順に並んでいるので、**見た目的には左から順番に色がついているような状態**になります。

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】HTML・CSSのちょいテク詰め合わせ](https://qiita.com/7note)
wasm(Rust) でJavaScriptファイルの呼び出し

今回は Rust（wasm）からJavaScriptのコード（関数）を呼び出す方法について書きます。
コードは以前書いたものを流用します。
下記のgithabのページを参照してください。
https://github.com/NagaJun1/wasm_sample

以前、Rustでwasmをビルドする方法について書いた記事があります。
下記にURLを貼り付けておきますので、ご参考にどうぞ。
https://qiita.com/NagaJun/items/f43a645ff630aeb858fd

下記にwasm-bindgenの公式ページのURLを貼り付けておきます。
今回説明する内容は、基本的には下記リンクのページで説明されていると同じ内容です。
https://rustwasm.github.io/docs/wasm-bindgen/reference/js-snippets.html

##コーディング
今回作成したコードについて説明していきます。
まず、Rustで呼び出すためのjavaScriptのコードは下記の通りです。
処理は単純で、html内の```id="id_1"```のテキストを関数の引数の値で書き換えるというものです。
注意点としては、exportを関数の頭に付けることぐらいですかね。

```javascript:/js-file/js-code-file.js
export function write_p_text(a)
{
    document.getElementById("id_1").textContent = a;
}
```
次に、Rustのコードです。
JavaScriptで設定した```write_p_text()```関数は、Rustでは```#[wasm_bindgen(module="ファイルパス")]```を頭に付け、extern "C"で囲うことで呼び出すことができます。
```module="ファイルパス"```の"ファイルパス"は、「Cargo.toml」からしたパスを設定する必要があります。
今回はついでに、RustからJavaScriptの```alert()```も呼び出します。
JavaScriptのライブラリは頭に```#[wasm_bindgen]```をつけるだけで呼び出せます。

```rust:lib.rs
#[wasm_bindgen]
pub fn read_js_fnction(){
    //jsのアラート
    alert("call JavaScript function".to_string());
    //js関数での処理
    write_p_text("Rust call function".to_string());
}

#[wasm_bindgen(module="/js-file/js-code-file.js")]
extern "C"{
    fn write_p_text(a:String);
}

#[wasm_bindgen]
extern "C"{
    fn alert(text:String);
}
```
最後に、wasmを呼び出す.htmlは下記の通りです。
wasmを呼び出すための方法は前回同様ですが、今回はJavaScript内のコードで DOM操作を加えたので、```<p>```タグを追加しておきます。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
  </head>
  <body>
    <h1>wasm_sample</h1>
    <!--下記<p>のテキストを書き換えます-->
    <p id ="id_1">htmlで設定したテキスト</p>
    <script type="module">
      import init, * as wasm from './pkg/sample_wasm_rust.js';
      async function run() {
        await init();
        wasm.read_js_fnction();
      }
      run();
    </script>
  </body>
</html>
```
ソースコードの配置に関しては、この記事の頭にgitのURLを貼り付けてあるので、そちらからご確認ください。

##実行
各条件を揃えたら実行します。（実行方法は前回の記事を見てください）
実行結果としては、まずRustで設定したアラートが出て（このタイミングではまだ`<p id ="id_1">`はデフォルトのままです）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/3c73bfce-5797-8ba6-834d-e7b09c3331ac.png)
アラートを消すと DOMが書き換わって、ページ内のテキストが書き換わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/762492/eb4aa5f9-954b-0b02-b219-64a51502cd55.png)
以上で、RustからJavaScriptのコードが呼び出せたことが確認できました。

##まとめ
今回はRustからJavaScriptを呼び出す方法について書いていきました。
RustからJavaScriptを呼び出せることで、Rustでは書くことができない処理をJavaScriptで実装するという、柔軟性を持たせたプログラムが作成できる様になるかと思います。
ただ、今回 RustからDOMを操作したのですが、DOM操作自体はJavaScriptのコードを呼び出さずともRustで web-sysをクレートで追加すれば処理できるので、処理速度を速くしたいという場合はこちらを使用するべきかと思います。
https://rustwasm.github.io/docs/wasm-bindgen/examples/dom.html#web-sys-dom-hello-world
また、JavaScriptのオブジェクトはRust内で`JsValue`を使用すれば処理できるため、多くの場合は.jsファイルを読み込まない形で実装できるかと思います。
どういう形で実装するかは人によるかとは思いますが。
今回は以上になります。
最後まで読んでいただき、ありがとうございました。
p5.jsで音楽を可視化する

##  はじめに

今回は、音楽に合わせて変化するアニメーションの作り方について解説していく。今回は『デザインとプログラミング』の講義で使用しているp5.jsを使う。
ちなみに、実装物は[このリンク](http://www.openprocessing.org/sketch/1021717)からご覧頂けます。

## プログラムの概要
今回実装したプログラムは以下のようなものである。

 **1. 音の周波数に対応した棒グラフが変化する**
 
 **2.1番低い周波数の棒グラフが赤、高くなるほど黄色くなる**

**3. 音量と再生速度を変化させられる**

## 実装



本プログラムでp5.jsで高速フーリエ変換を行うコードは以下のものである。
高速フーリエ変換の具体的な解説は[こちらの解説](https://qiita.com/ageprocpp/items/0d63d4ed80de4a35fe79)を参考にして欲しい。

``` javascript

let spectrum = fft.analyze();// FFTの結果を取得
  noStroke();
	
for (let i = 0; i< spectrum.length; i++){
 
   fill(255, 255*i/spectrum.length, 0); // 色を指定する

   let x = map(i, 0, spectrum.length, 0, width); // 周波数を計算する

   let h = -height + map(spectrum[i], 0, 255, height, 0); // 振幅を計算する

   rect(x+50, height, width / spectrum.length, h ) // 棒グラフ1つ分を作成する

  }	
```

ちなみに、コード全体はこのようになる。

``` javascript
let playButton; // 再生ボタン
let volumeSlider; // 音量のスライド
let speedSlider; // 再生速度のスライド

function setup(){ // 全体の設定
	
  createCanvas(windowWidth,windowHeight);
	
	playButton = createButton("Play"); //　再生ボタンの定義
	playButton.size(100, 50);         // 再生ボタンの大きさを設定
	playButton.position(100, 20);    // 再生ボタンの位置を設定
	playButton.style('background-color', color(30));// 再生ボタンの位置を設定
	playButton.style('color', color(200));   // 再生ボタンの背景の色を設定
	playButton.mousePressed(play_stop);// 再生ボタンを押した時の関数を設定
	
	volumeSlider = createSlider(0, width, width/2);// 音量のバーを設定
	volumeSlider.position(250, 50);// 音量のバーの位置を設定
	
	speedSlider = createSlider(0, width, width/2);// 再生速度のバーを設定
	speedSlider.position(400, 50);// 再生速度のバーの位置を設定
	
  fft = new p5.FFT();// FFTを設定
	
}

function draw(){ \\ 描画する関数
	
  background(50);
	
  let spectrum = fft.analyze();
  noStroke();
	
  for (let i = 0; i< spectrum.length; i++){
		fill(255, 255*i/spectrum.length, 0);
    let x = map(i, 0, spectrum.length, 0, width);
    let h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x+50, height, width / spectrum.length, h )
  }
	
	let volume = map(volumeSlider.value(), 0, width, 0, 0.5); // 音量の変数を定義
	volume = constrain(volume, 0.001, 0.1);　// 音量を0.001~0.1に圧縮
  sound.amp(volume); // 音量を決定

	let speed = map(speedSlider.value(), 0.1, width, 0, 2); // 再生速度の変数を定義
	speed = constrain(speed, 0.5, 2); // 再生速度を0.5~2に圧縮
	sound.rate(speed); // 再生速度を決定
	
}


function preload(){  //  音源を定義する

  sound = loadSound('13647.mp3'); // 音声データを読み込む
  //  予めOpen Processingにアップロードする
}

function play_stop() { // 音源を再生・停止する
	
  if (sound.isPlaying()) { // 音源が再生している時
    sound.pause(); //  音源を停止する
		playButton.html("Pause"); // ボタンを停止に変える
  } 
	
	else { // 音源が停止している時
    sound.loop(); // 音源を再生する
		playButton.html("Play"); //  ボタンを再生に変える
  }
	
}	

```
[メモ][JavaScript] Promise と async await

# Promiseとは
ES6から使える、非同期処理の最終的な完了もしくは失敗を表すオブジェクト。
従来の非同期処理より可読性が高くなった

(IEはゴミなので使えないのでトランスパイルが必要。)

## 構文

```js
new Promise(function(resolve, reject){

}).then(

).catch(

).finaliy(

);
```

`resolve`が呼ばれると、thenメソッドに行き、`reject`が呼ばれるとcatchにいく
`finaliy`は最後に呼ばれる。

下記の例だと、OKを押すと`resolve`を実行するので、thenに処理が移る。
１つ目のthenが終わると、２つ目に行く。
そして、最後に`finally`が呼ばれて終わる。

```js
new Promise((resolve, reject) => {
  const yn = confirm("Yes Or No");
  yn ? resolve() : reject();
})
  .then(() => alert("then なう"))
  .then(() => alert("then2 なう"))
  .catch(() => alert("catch なう"))
  .finally(() => alert("おしまい"));
```

# プロミスチェーン
非同期処理を順に実行していくこと


例えば、 下記はチェーンになっているわけではなく、順々に実行していっているだけ

```js
new Promise(function(resolve, reject) {
    resolve(1);
}).then(val => {
  return val * 2;
}).then(val =>{
  return val + 3;
})
```

プロミスチェーンとは簡単に言うと、`then`の中で`Promise`を返すこと
そうすると、非同期処理が順に呼ばれていく

```js
function hoge(val = 0) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      alert(val++);
      resolve(val);
    }, 1000);
  });
}

hoge()
  .then((val) => {
    return hoge(val);
  })
  .then((val) => {
    return hoge(val);
  });
```

# 並列処理
`Promise.all`を使う

> すべてのプロミスが解決されるか、拒否されるかするまで待ちます。

```
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // 全部のプロミスが終わったあと実行される
});
```

# async await
ES8から導入された、Promiseを書きやすくしたもの


書く必要ないくらい良い記事があった...
https://ja.javascript.info/async-await
10の位・1の位を計算するプログラム

本日はこの問題についてです。

二桁の整数を入力すると、十の位と一の位の数字の足し算、十の位と一の位の数字の掛け算をそれぞれ行い、
最後に2つの結果を足し合わせて出力するプログラムをRubyで作成してください。
なお、2桁の数字以外が入力として与えられた場合を考慮する必要はありません。

例）

```
> 二桁の整数を入力してください
> 15

# 1 + 5 と 1 × 5 をそれぞれ計算

> 足し算結果と掛け算結果の合計値は11です
```

以下模範回答





```ruby:ruby
def addition(a, b)
  a + b
end

def multiplication(a,b)
  a * b
end

def slice_num(num)
  # 10の位
  tens_place = (num / 10) % 10
  # 1の位
  ones_place = num % 10
  return tens_place, ones_place
end

puts "二桁の整数を入力してください"
input = gets.to_i
X, Y = slice_num(input)
add_result = addition(X, Y)
multiple_result = multiplication(X, Y)
puts "足し算結果と掛け算結果の合計値は#{add_result + multiple_result}です"

```

解説
ある整数について、
整数を10で割った計算結果の余りが1の位、
整数を10で割ったものを更に10で割った計算結果の余りが10の位であるという法則を利用して、
slice_numメソッドでは10の位と1の位を取得しています。

例えば「15」の場合
15/10＝1.5の小数点以下の「5」が一の位、
15/10＝1.5/10＝0.15の小数点以下の「1」が十の位として扱うことができます。

また、変数を定義する際に、カンマで区切ることによって、同時に複数の変数を定義することができます。
今回は、X, Y に10の位、1の位を同時に代入しています。

また、全ての処理を1つのメソッド内で行っても構いません。
スタンディングデスクの良いところ、良くないところ

# 良いところ①強敵（睡魔）に勝てる
強敵（特に昼休み明け～90分間）に勝てます。スタンディングデスクにしたことで強敵倒せます。
# 良いところ②目立つ
社内にいる方で初めて話すとき、だいたい「あ～あのいつも立ってる人ですね！」と言われます。気づかぬうちにかなり目立っているみたいです。
# 良いところ③実際よりも身長高く見られがち
背高く見られたい願望があるひとはおすすめです。
# 良くないところ①ふくらはぎ、太ももがパンパンになる
普段運動してないので、けっこう疲れます。いい運動かわりになるかもしれません。
# 良くないところ②ディスプレイ丸見えになりがち
見られたくないことを中心に扱う方は向いていないです。
# 良くないところ③マット引かないとかかとが壊れる
スタンディングデスクを始めて2日でマット（6000円）買いました。冗談抜きでマット無いと、かかと壊れます。ふわふわのマットをお勧めします。
https://www.amazon.jp/dp/B077ZCCBQ4?ref=ppx_pop_mob_ap_share
# 良くないところ④スタンディングデスク自体結構高い
1万5000円くらいしました。
https://www.amazon.jp/dp/B0852ZFQ3M?ref=ppx_pop_mob_ap_share

良くないところの方が多くなってしまいました（想定外）が、自分はおススメしています。
スタンディングデスクやられてる方でこういった良いところ、良くないところあるよ、という方はぜひコメント頂けると嬉しいです。
※随時更新していくかもしれないです。
アドベントカレンダー5日目：SREを読んでみた「リスクの受容」編①

昨日までの回でSREのイントロダクション（1章）を終えました。
今日から3章の内容が始まります。2章はどうした？と突っ込みが入るかもしれないですが、2章の内容は膨大なデータやリクエストを処理するためのGoogleのプロダクション環境に関する説明がされています。3章以降の内容の理解に必要な場合があるかもしれないですが、SREの説明からずれてしまうので、飛ばすことにしました。もし、説明が必要になった際は、その都度、説明する形にしようと思います。

## 導入
今回はタイトル通りリスクの受容について、見ていきます。
SREにおいてのリスクとは、信頼性が下がることです。しかし、その信頼性を下げてでも、リスクを受け入れることには意味があります。
まず、サービスとユーザーの間には様々なシステムが混在しており、信頼性を100%にしようとする試みは、莫大な労力がかかります。また、仮に99.99%のシステムの信頼性を0.01%上げたとしても、それはユーザーに気づかれないため、UXの向上になりません。
ゆえに、可用性におけるリスク、システム開発の速度、サービス運用の間でバランスをとることがゴールになります。
設定したゴールを達成したら、必要以上に信頼性を高めることはしません。それをすることは、システムへの機能追加、技術的負債の払拭、運用コストの低減などを行う機会を失うからです。
では、リスク管理の為にどのようなアプローチをすべきなのでしょうか？

## サービスリスクの計測
サービスリスクの計測ができれば、現状のパフォーマンスの評価やシステムの改善、劣化の追跡ができるようになります。
しかし、**サービスの障害は、ユーザーの不満、損害、信頼の喪失、直接的または間接的な売り上げの損失、ブランドや評価へのインパクト、望ましくない報道を含む、さまざまな影響を及ぼす可能性があります。**<sup>1</sup>
これらを一つの指標で表すのは、難しいので、システムの計画外の停止時間に注目します。

> **可用性　=　稼働時間 / (稼働時間 + 停止時間) ①**

例えば、可用性99.99%のシステムならば、年間の停止時間が52.56分なら、可用性を満たすことになります。
ですが、Googleの場合、サービスが世界中に分散しているので、世界のどこかでは動作している可能性が高いです。
そのため、リクエスト成功率で可用性を算出しています。

> **可用性　=　成功したリクエスト数 / 総リクエスト数 ②**

この場合、可用性99.99%のシステムならは、1日250万リクエスト処理した時、エラーを返すリクエストが250回以下になればいいということになります。
また、②の測定方法は、エンドユーザーへ直接応答しないシステムに関しても、少ない変更で適用できます。

## サービスリスクの許容度
サービスリスクの許容度は、そのサービスに応じて、異なります。信頼性を上げることよりも開発へリソースを割きたいサービスもあれば、医療システムのような信頼性が非常に重視されるものもあります。
以下では、信頼性の目標値となるサービスが許容できるリスクの量を適切に設定為の指針を見ていきます。
また、先に述べたようにサービスに応じてリスクの考え方は異なります。今回は、例としてコンシューマサービスの場合を見ていきます。

### リスク許容度の明確化
サービスにおけるリスク許容度の評価には、以下のような項目があります。

> * **必要な可用性のレベル。**
* **障害の種類の違いによってサービスへの影響に差はないか。**
* **リスク曲線状にサービスを位置づけるうえで、サービスコストはどのように利用できるか。**
* **考慮すべき重要なサービスメトリクスとして、他にはどのようなものがあるか。**<sup>1</sup>

### 可用性のターゲットレベル
サービスの可用性のターゲットレベルは、そのサービスが提供する機能と、市場におけてサービスのどのような位置づけになるかが問われます。。以下は、考慮すべき事項です。

> * **ユーザーが期待するサービスのレベル**
* **サービスが直接的に収入（Googleの収入もしくはGoogleの顧客の収入）につながっているか**
* **サービスは、有料化、あるいは無料か。**
* **市場に競合がある場合、その競合が提供しているサービスのレベル**
* **サービスはコンシューマ向けか、それとも企業向けか。**<sup>1</sup>


### 障害の種類
サービスで起こりうる障害の種類がどのようなものであるかについて、理解しておくことも重要です。時々、完全にダウンしてしまうシステムと低い確率で障害が続くこと時、エラーの絶対数が同じであっても、ビジネス的なインパクトは大きく異なるかもしれません。

### コスト
サービスの可用性のターゲットを決定するにあたって、以下の指標があります。
>* **可用性を１桁改善するようにスステムの構築と運用を行った場合、収入はどのように増加するか**
* **この追加の収入は、信頼性をそのレベルにまで高めるためのコストに見合うか。**<sup>1</sup>

メリットとコストの関係をシンプルに表すことは、難しいかもしれませんが、優先度的にも考えるべきことです。

### サービスの他のメトリクス
リスク許容度には、可用性以外のメトリクスもあります。
例えば、サービスのレイテンシです。このレイテンシの要求が緩い場合は、プロビジョニングの際のキャパシティプランニングにおいて、トレードオフを行うことができます。

## まとめ
今回はリスクを受容することの意味と、リスクを明確にする上で考えるべきことについて、学びました。
次回はリスクを受け入れたことによって、得た機会（＝エラーバジェット）をどのように利用すべきかを見ていきます。

* 信頼性管理の大部分はリスク管理
* リスクを明確化する

## 雑感
記事の改善

* そのアプローチを行う意味は残す。
* 内容はシャープにまとめる。

#### 引用
1. Betsy Seyerほか　SRE サイトリライアビリティエンジニアリング　オライリー　27-33
MacにAWS CLIのインストール方法

#1. 下記コマンドを実行

```
curl "https://awscli.amazonaws.com/AWSCLIV2-2.0.30.pkg" -o "AWSCLIV2.pkg"
sudo installer -pkg AWSCLIV2.pkg -target /
```

#2. バージョンを確認出来たら、インストール成功
```
aws --v
aws-cli/2.0.30 Python/3.7.4 Darwin/19.6.0 botocore/2.0.0dev34
```
安く簡単にGo製webサーバーをデプロイする! Render.comの紹介

Go言語で個人開発したサーバーをGCPやAWSにデプロイするときの悩みは、各プラットフォームの必要知識が意外にも多いことと、地味に出費がかさむことです。
今回は、余計なプラットフォームの設定で悩むことなくアプリケーションに集中できるうえ、低価格で実現できるサービスを紹介します。

私は2020年10月からクラスター社でエンジニアインターンをしている @anoriqq です。
日々、サーバーエンジニア修行を積んでいます。

さて、この記事は [クラスター Advent Calendar 2020](https://qiita.com/advent-calendar/2020/cluster) 9日目の記事です。
昨日は[nomunomu_ra](https://qiita.com/nomunomu_ra)さんの『[クラスター社員が語る、バーチャルカメラの魅力。](https://note.com/nomunomu_ra/n/ne4052d3b0e71)』でした。
clusterでイベントを開催する方は必見です!

# はじめに
クラスター社の提供するサービス[cluster](https://cluster.mu)のサーバーにGoを利用しています。
しかし、私自身のGo言語でのサービス開発は初めてでしたので、実際にサービスに使われているライブラリやフレームワークを使ったオモチャが欲しくなります。
そこで、Go製のwebサーバーがデプロイできる[Render](https://render.com)を使ってみたところ、GCPやAWS、Herokuよりも使い勝手が良いと感じたのでご紹介します。

# Renderってどんなサービス?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244235/d307d9a9-efde-f17c-af29-46365673fdfa.png)
Webアプリや静的サイトのホスティングから、Cron Jobs、自動バックアップ機能付きDBなど、個人のWeb開発で必要なものは一通り揃っています。
SSDディスクも提供されていますので、PostgreSQL意外ももちろん使えます。
無料で`onrender.com`のサブドメインも割り当ててくれますし、カスタムドメインも追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244235/b68cd6aa-b5b6-b815-171f-61f11903c7b9.png)
ドキュメントもそれなりに詳しく、サンプルプロジェクト付きで解説があります。
個別に対応していない言語もありますが、Dockerが動くのでなんでもできますね。

# RenderでGo製サーバーを動かそう

さて、本題のGo言語プロジェクトですが、デプロイに必要な作業はたったの3ステップです。

1. サービスタイプを選択

Webサーバーの場合はWeb serversを選ぶと良いです。
Background WorkerはURLを持ちません。
![Screen Shot 2020-12-07 at 22.01.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244235/af4a36d2-b282-a77d-ef96-dbb9b3cf9b77.png)

2. Gitリポジトリを選択する

GitHubかGitLabからプロジェクトのリポジトリを選択できます。
![Screen Shot 2020-12-07 at 22.03.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244235/cd6f674f-87b6-3dad-7d32-d4525e23f32f.png)

3. サービスの設定

EnvironmentにGoを選択し、Build CommandとStart Commandを指定します。
Regionは現在 Oregon, USA と Frankfurt, Germany が選択できるようですが、日本からだとUSAのほうが速いです。
デフォルトでAuto Deployが有効になっているため、Branchに指定したBranchにpushされると自動的にデプロイされます。
もちろん手動デプロイも可能です。
その他、環境変数やシークレットファイル、追加の永続ディスクなどもこの画面で設定できます。
![Screen Shot 2020-12-07 at 22.06.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244235/dd9fe714-a3e2-9324-39e5-93e39ec8bf5d.png)

## 良いところ1: デプロイが速い

```txt
Dec 7 10:12:20 PM  ==> Cloning
Dec 7 10:12:26 PM  ==> Running build command
Dec 7 10:12:53 PM  ==> Build successful 🎉
Dec 7 10:13:10 PM  ==> Starting service with './app'
Dec 7 10:13:35 PM  [GIN] 2020/12/07 - 13:13:35 | 200 |    2.617112ms |   111.111.111.111 | GET      "/"
```
あるプロジェクトのlogの抜粋です。
buildはプロジェクトの規模で変わると思いますが、build完了後30秒程度でアクセス可能になります。すごい!!
chackoutにはキャッシュも効かせてくれます。

## 良いところ2: 安心できる価格設定

![Screen Shot 2020-12-07 at 22.23.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244235/86894b18-2ebb-e152-1ec4-3ba358088e83.png)

今回利用したサービスタイプWeb serversでは最も安いStarterプランで最高 $7/月 です。
しかも利用した分だけ課金されるので無駄に出費する心配もありません。
私の個人開発は趣味や勉強目的なので、サービスを作ったり消したりしていますが毎月300円程度しか請求されていません。

# おわりに
様々なクラウドコンピューティングサービスを利用した中で、最も入門しやすく、個人開発に十分な機能を備えているので、知らない人には広めていきたいですね。
来年もRenderで個人開発とスキルアップを加速していくぞ!

明日は[faidra](https://qiita.com/faidra)さんの『なにか』です。
楽しみです!!
第11回(class化)

# お題:class化

# 解法:最初のclass

```ruby
def puts_hello name
  puts "Hello #{name}."
end

def gets_name
  name = ARGV[0] || 'world'
  return name
end

name = gets_name
puts_hello name
```

これをクラスで書くと

```ruby
class Greeter
  def initialize
    @name = gets_name
    puts_hello
  end

  def puts_hello #salute
    puts "Hello #{@name}."
  end

  def gets_name
    name = ARGV[0] || 'world'
    return name.capitalize
  end
end

Greeter.new
```

    > ruby hello_class.rb
    Hello world

-   Greeter.new
-   class Greeter
-   initialize method
-   @name

@nameはインスタンス変数というらしい.

classはmain loopを無くして代わりにclassにし,イニシャライズを定義したもの.

# 解説(指向):method的かobject思考的か

methodとclassを比べるとオブジェクト指向の書き方の流儀の違いが実感できるらしい.

method名をverbとすると，
-   methodでは，verb(subject, object)
-   object指向では， subject.verb(object)

とりあえずサンプルコードを見る.

上から，method, 継承を使ったclass, classへの上乗せ(override)

```ruby
require 'colorize'

# method
def hello(name)
  "Hello #{name}."
end

# inherited class
class Greeter < String
  def hello
    "Hello #{self}."
  end
end

# extend class
class String
  def hello
    "Hello #{self}."
  end
end

# method call
name = ARGV[0]
puts hello(name).green

# inherited class call
greeter = Greeter.new(ARGV[0])
puts greeter.hello.green

# extend class call, override
puts ARGV[0].hello.green
```

StringをGreeterに継承しているため,GreeterはStringのメソッドを扱える.

overrideに関しては,親クラスで定義しているメソッドと同名のメソッドを子クラスで再定義するものと思っていたためここでの使い方はいまいち理解できていない.要勉強.

------
 - **source** ~/grad_members_20f/members/yoshida/c6_class_hello.org
Azure AD Connect を使用し、Active Directory - Azure Active Directory のディレクトリを同期する。

この記事は「[いのべこ（富士通システムズウェブテクノロジー）Advent Calendar 2020](https://qiita.com/advent-calendar/2020/fsweb)」の9日目の記事です。
記事の掲載内容は私自身の見解であり、所属する組織を代表するものではありません（お約束）。


<目的>
オンプレミスのActive Directory Domain Service(以下、オンプレADと呼ぶ)のユーザーをAzure Active Directory(以下、Azure ADと呼ぶ)に同期し、Azure ADの認証を使用した操作（Offce 365へのログイン）を行えるようにする。

・Active Directory Domain Services
 <https://docs.microsoft.com/ja-jp/windows-server/identity/ad-ds/active-directory-domain-services>

・Azure Active Directory とは
<https://docs.microsoft.com/ja-jp/azure/active-directory/fundamentals/active-directory-whatis>

・Azure AD Connect とは
<https://docs.microsoft.com/ja-jp/azure/active-directory/hybrid/whatis-azure-ad-connect>

<目次>
1.オンプレADの用意
2.Azure AD Connect サーバーの構築
3.同期の実行
4.ログオン確認

<実装>
1.オンプレADの用意

オンプレDCを構築し、あらかじめユーザー(sanu)を作成する。※オンプレADの構築工程は省略
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/cf342c37-002c-3d4d-4374-b3171e1011a6.png)

2.Azure AD Connect サーバーの構築

AADC用に構築したサーバーにて、サインオン方式「パスワードハッシュ同期」を選択して、構築する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/6dc3f3d9-5407-7b7a-a331-cc5c1ad0ea60.png)

Azure ADのグローバル管理者の資格情報を入力し、[次へ]をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/212d840d-d6f3-fac2-8f61-c7bad61ffbb9.png)

ディレクトリの接続にて、オンプレADのEnterprise Admin権限を持つユーザーアカウントの資格情報を入力し、オンプレADのディレクトリを追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/ca05c06b-ef63-2763-296c-21b97fc6df4a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/1e564462-7d1c-1ab4-0f0c-7b0aa0f421fa.png)


Azure AD のユーザー名に使用する属性を「UserPrincipalName」に指定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/ba351afb-31d8-da51-eb51-ce0a69c4a164.png)

設定値を確認し、[インストール]をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/2fdf399d-37d8-d400-3d9b-fa98686499dc.png)

構成が完了する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/4c6724ba-7e7a-ef10-5da7-c51d557a1d25.png)

3.同期の実行

Synchronization Service Manager にて、フル同期が正常に完了することを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/4aee3bf0-8d02-59e1-bc52-3dfbc04c77ec.png)

Azure ADにオンプレのユーザー（sanu）が同期される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/01806c86-23e8-8b8e-094f-5e6add0a0944.png)

4.ログオン確認

同期したアカウントを使用し、Office365にログインできる。（ユーザーにライセンスを振り分けていないため、アプリは表示されない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/c7f477c2-ebe8-0c85-ca26-352272e43147.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/674747/963b0f76-4909-c8ad-8606-aa6e593b938f.png)


今回は、Azure AD Connect を使用してオンプレAD とAzure AD のディレクトリ同期を実施した。
将来的には、シングルサインオンの実装やADFSによるサードパーティのクラウドへのログオン認証を行うようにしたい。
Qiita初投稿

はじめまして。エンジニア歴8年。__さんねんやたろう__です。
エンジニアとしてスキルアップの為、分野を問わず学習したことをアウトプットしていきたいと思います。

私が記事を投稿する目的は以下です。
・マークダウン記法の習得のため。
・学習した内容をアウトプットすることで知識を定着させるため。
・見て、嚙み砕いて、考えて、理解した内容をアウトプットすることで文章力を向上させるため。
（プレゼンを意識すること）
・書くことを習慣化させること。
（エンジニアたる者書くことが仕事。PGはソースコード。SEは設計書や提案書。etc.）

記事のストックは頭の中にあるので
次回からどんどん投稿していこうと思います。
【備忘録】Swift 実践入門について　第7章

Swift 実践入門のまとめ。
分からない部分の抜粋も記載し、解決できたら随時更新していきます。
なお、ここに記載している以外でも「わけわからん…」となっている部分も多々ありますが、
今は必要ない、と言い聞かせて飛ばしています。


第7章
型の構成要素　設計図の共通点。struct / class / enum
理解度：50％くらいか

7-3 型を本とすれば、タイトルや筆者名がプロパティ。
本のタイトルを決めることを代入するという風に考えると、変数や定数もプロパティと言える。

流れ
型 → インスタンス化 → printなどを実行

プロパティにはスタティックプロパティやレイジーストアドプロパティなど、色々なタイプがあるが、ここら辺は本当に分かりません…


7-4 イニシャライザ
これまで、var a = 1 などと値を代入していたが、事前に値を代入したくない場合もある。
縦・横・斜めの長さをユーザーが入力した値を代入し、体積を求める場合、
ユーザーの入力後に値が決まるため、事前には決められない。
ただしインスタンス化する場合、変数・定数には値が事前に必要になる。
そのために必要となるのがイニシャライザとなる。

struct Box {
var length : Float
var width : Float
var height : Float      //この段階ではそれぞれの変数に値は代入されていない
var volume : Float
Init( l : Float, w : Float, h : Float )
self.length = l
self.width = w
self.height = h
self.volume = l * w * h
}
var b Box(l : 1, w : 2, h : 3)
print(b.volume)   //6


7-5 メソッド…型の中にある関数。structの中にあるfunc

7-6 サブスクリプト…コレクション要素へのアクセス方法

7-7 エクステンション…型にプロパティやメソッドなどを追加すること

7-8 型のネスト…型の中に型を入れ込む


はー、厳しい章でした。次の8章はstruct / class / enumの個別の特性。ここも長い…
pytorchで物体検出

#概要
pytorchでゲーム画面の物体検出をします。
pytorchのfastrcnnを用いてスクリーンショットから物体検出し、物体に合わせてマウスを移動させます。

#学習データの準備
ゲームプレイ中に1秒毎にスクリーンショットを撮り、学習に使用する画像を150枚ほど用意します。
各画像に対してアノテーションデータを作成します。

#学習
学習済みモデルを用いたので30分程度で終わらせました。

#推論
なかなかいい感じです。
![image.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579920/628da624-40c5-5b39-335e-2fe3d50ab086.gif)



#動作確認
ゲーム画面からスクリーンショットを撮り続け、学習させたモデルに入力し物体の座標を獲得します。あとは座標に合わせてマウスの操作をさせます。

![aim.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579920/c14dd401-1271-c748-4fb6-f1d89af3a9eb.gif)
視点を故意にずらしても検出した物体に合わせてマウスが自動で移動しています。
動作が遅く実用的ではないですが、きちんと動作しました。
[AWS] AWSにRDSを設置

#AWSにRDSを設置

今回も、本日（2020/12/07）、AWSにRDSを設置しましたよ、というだけの投稿です。

設置したデータベースエンジンはMySQL（バージョン8.0）です。

RDSはAWSが提供するリレーショナルデータベースのサービスですが、Amazon社がベストと考える状態に既にチューンナップされているわけですね。

逆に言うと、ユーザーが自由に設定を変えることはできないとも言えるようです。AWSユーザーが設定できる部分は以下の3つのようです。

RDSにおいて設定ができる箇所
・DBパラメータグループ
・DBオプショングループ
・DBサブネットグループ

本日も超個人的なメモでしかない投稿ですね。すみません。
コールバックベースの処理をcoroutineに置き換える

コールバック形式の関数を`suspend fun`に変換するやつ、なんかあるやろ〜と思って調べてみたら、[suspendCoroutine](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.coroutines/suspend-coroutine.html)というのにたどり着いた。やっぱりあった！

たとえばこういう関数があったとして

```kotlin
fun myFunc(callback: (Int) -> Unit) {
  // 何かしらの処理...
  callback(42) // 結果通知
}
```

これをsuspend funに変換（ラップ）した関数は、こう書ける:

```kotlin
suspend fun myFunc(): Int = suspendCoroutine { continuation ->
    myFunc(callback = { result ->
        continuation.resume(result)
    })
}
```

そうすれば`myFunc()`の結果を使ってなんかする処理を簡単に書けます。

```kotlin
lifecycleScope.launch {
    val result = myFunc()
    // resultを使ったなんらかの処理
}
```
【Kotlin】CoroutineScope に特定の CoroutineDispatcher が含まれているかどうかを調べる

`CoroutineScope` に特定の `CoroutineDispatcher` が含まれているかどうかを調べる。
より正確に言えば、`CoroutineContext` に特定の `CoroutineContext.Element` が含まれているかどうかを調べる。

まず次の演算子を実装する。

```Kotlin
/** レシーバーである [CoroutineContext] に [element] が含まれているかどうかを返す。 */
operator fun CoroutineContext.contains(element: CoroutineContext.Element): Boolean =
    this[element.key] == element
```

そして次のようにする。

```Kotlin
val containsMain: Boolean = Dispatchers.Main in coroutineScope.coroutineContext
```

／以上
RubyのHashに対するメソッドまとめ

# はじめに

rubyのhashに対するメソッドで、普段あまり使わないメソッドをまとめてみました。

# compact
valueがnilのものを取り除きます。

```ruby
user = { id: 1, name: nil }
user.compact
# => {:id=>1}
```

# dig
valueにhashがある場合に、その値を取得する

```ruby 
user = { user: { id: 1 } }
# => {:user=>{:id=>1}}
user.dig(:user, :id)
# => 1
```

# equal
同じオブジェクトの場合にtrueを返す

```ruby
h1 = {}
h2 = {}
h1.equal?(h2)
# => false
h1.equal?(h1)
# => true
```

# invert
keyとvalueを入れ替える

```ruby
h = { id: 1 }
# => {:id=>1}
h.invert
# => {1=>:id}
```

# assoc
keyの検索を行い、無い場合はnil、あった場合はkeyとvalueの配列を返す

```ruby
h = { id: 1, name: 'bob', age: 12 }
h.assoc(:id)
# => [:id, 1]
```

# rassoc
valueの検索を行い、無い場合はnil、あった場合はkeyとvalueの配列を返す

```ruby
h = { name: 'bob', age: 12 }
# => {:name=>"bob", :age=>12}
h.rassoc('bob')
# => [:name, "bob"]
```

# replace
対象のhashを別のhashの内容に置き換える

```ruby
h1 = { id: 1 }
h2 = { id: 2 }
h1.replace(h2)
# => {:id=>2}
h1
# => {:id=>2}
```

# slice
対象のkeyのみを取り出す

```ruby
h1 = { id: 1, name: 'bob', age: 12 }
h1.slice(:id)
# => {:id=>1}
```

# store
hashにkeyとvalueを設定する

```ruby
h = {}
h.store(:id, 1)
h
# => {:id=>1}
```

# transform_keys
それぞれのkeyの値を書き換える

```ruby
h = { id: 1, name: 'bob', age: 12 }
h.transform_keys(&:to_s)
# => {"id"=>1, "name"=>"bob", "age"=>12}
```

# transform_values
それぞれのvalueの値を書き換える

```ruby
h = { id: 1, name: 'bob', age: 12 }
h.transform_values(&:to_s)
# => {:id=>"1", :name=>"bob", :age=>"12"}
```
Docker を利用した Goをインストールしない Go開発環境構築

Go言語(go, golang)をインストールすることなく、Go言語の開発環境を構築する方法です。
簡単に言うと、使い捨ての Docker コンテナ上で go コマンドを実行します。
golang インストールは不要ですが、基本的に `GOPATH=~/go` 以下にプロジェクトのソースディレクトリがある事を前提とします。
<font color=red>※ Docker を利用するので Docker のインストールは必要です。</font>

動作確認環境: macOS Catalina 10.15.8

Atom + go-plus で開発していますが、保存時のテスト実行等も問題なく動作しているようです。

サンプルは `go mod init ${PWD:$(echo “$GPATH/src”|wc -c)}` を実行する例です。

## プライベートリポジトリなしの場合

```
docker run --rm -v "$PWD":"${PWD:$#HOME}" -w "${PWD:$#HOME}" golang:1.14.12 go mod init ${PWD:$(echo “$GPATH/src”|wc -c)}
```

## プライベートリポジトリを含む場合

プライベートリポジトリが `https://private-repo` の場合に対応しています。

```
docker run —rm -v "$HOME/.ssh":"/root/.ssh":ro -v “$PWD”:”${PWD:$#HOME}” -w “${PWD:$#HOME}” --env GOPRIVATE="private-repo" golang:1.14.12 /bin/sh -c "git config --global url.ssh://git@private-repo.insteadOf https://private-repo && go mod init ${PWD:$(echo “$GPATH/src”|wc -c)}"
```
`git config` で特定のリポジトリに対して `go get` を ssh 接続に切り替えるため、コンテナで `go` コマンドを含む複数コマンド実行が必要なので、`/bin/sh` の `-c` オプションを利用しています。


## エイリアスを登録して利用

１行で書けますが非常に長いので、実際に利用する時は関数を用意してエイリアスを登録して利用しています。

```zsh:~/.zshrc
alias go='golang'
alias goinit='golang mod init ${PWD:$(echo “$GPATH/src”|wc -c)}"'

golang() {
  USE_PRIVATE_REPO="git config --global url.ssh://git@private-repo.insteadOf https://private-repo"
  WORKDIR=$(echo "${PWD}" | awk '{print substr($0, index($0, "/go/"))}')
  docker run --rm                   \
  -v "${HOME}/.ssh":"/root/.ssh":ro \
  -v "${PWD}":"${WORKDIR}"          \
  -w "${WORKDIR}"                   \
  --env GOPRIVATE="private-repo"    \
  golang:1.14.12 /bin/sh -c "${USE_PRIVATE_REPO} && go $*"
}
```


```
source ~/.zshrc
```
個人的なMacセットアップ

個人用のメモ

# homebrewのインストール
https://brew.sh/index_ja
ターミナル起動して↓をコピペするだけ

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

# brew caskでインストールするもの
```
$ brew install google-chrome --cask
$ brew install iterm2 --cask
$ brew install docker --cask
$ brew install visual-studio-code --cask
$ brew install tableplus --cask
$ brew install macvim --cask
$ brew install kindle --cask
$ brew install spotify --cask
$ brew install drawio --cask
```

# brewでインストールするもの
```
$ brew install yarn
```

# 入力ソース設定
キーボードの環境設定 >
[ユーザ辞書]
- 英字入力中にスペルを自動変換：オフ
- 文頭を自動的に大文字にする：オフ

[入力ソース]
- ライブ変換：オフ
- タイプミスを修正：オフ

# Terminalの設定
zshにpreztoをインストール
https://github.com/sorin-ionescu/prezto

Iterm2にステータスバーを表示
Preferences > Profiles
[Session]
- Status bar enabled：オン
![スクリーンショット 2020-12-06 22.56.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/935546/c91fd9f3-898b-4816-cc36-c8846e7a718a.png)

Preferences > Appearance
[General]
- Status bar location：Bottom

カラースキーマはここからcloneして設定
https://github.com/aereal/dotfiles

dotfiles/colors/Japanesque/Japanesque.itermcolors

# git
GitGub CLIの設定
https://cli.github.com/

# vscode
インストールするライブラリ
- vim
- Ayu

```:settings.json
{
  "editor.tabSize": 2,
  "vim.insertModeKeyBindings": [
      {
        "before": ["j", "j"],
        "after": ["<Esc>"]
      }
  ],
"workbench.colorTheme": "Ayu Mirage",
"window.zoomLevel": 0
}
```