OmniAICreator/Qiita-1.07M huggingface dataset:
初学者が簡単にコーディング練習する方法



普通はローカル（自分のパソコン）に開発環境を用意してコーディングしますが、面倒だったりできない場合に便利なのがクラウドIDE。ブラウザ上で簡単にコーディング＆表示確認ができます。

今回は数あるクラウドIDEのなかでも一番ライトに使える**CODEPEN**をご紹介します。

**メリット**
・開発環境の構築が不要
・色々なエンジニアの作品を参考にできる


<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="koutaka" data-slug-hash="ZEzgjyG" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="三次元回転体">
  <span>See the Pen <a href="https://codepen.io/koutaka/pen/ZEzgjyG">
  三次元回転体</a> by たかたか (<a href="https://codepen.io/koutaka">@koutaka</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


これは私のpenですが、このように**コーディング＆表示確認**が一画面でできて便利ですよね！
右上のCODEPENアイコンから本サイトに移動し、メニューの「**Fork**」をクリックすると、私の作品をあなたのワークスペースにコピーしてコーディングすることもできます。模写がボタン一発で！


Vue.jsはこちらのサンプルなんていかがでしょう？

<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="css,result" data-user="JavaScriptJunkie" data-slug-hash="YzzNGeR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Credit Card Form - VueJs">
  <span>See the Pen <a href="https://codepen.io/JavaScriptJunkie/pen/YzzNGeR">
  Credit Card Form - VueJs</a> by Muhammed Erdem (<a href="https://codepen.io/JavaScriptJunkie">@JavaScriptJunkie</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

コーディングの上達方法は、見本のコードを模写してイジり倒すこと！

では、より良いエンジニアライフを！

おしまい
テスタビリティの観点でコードを書くこと

本記事は、[サムザップ #2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/sumzap2) の12/9の記事です。

# はじめに
テスタビリティ（Testability, テスト容易性）とはテストがどれだけ実行しやすいか、どれだけ効果的かを表す度合いです。
テスタビリティが高いとより不具合を見つけやすく、コードの品質を高めることができます。
テスタビリティの特徴としてはJames Bachがあげたものがあります。
テスタビリティが高いコードを書くことは、それ自体がコードの品質を高めることになる場合があります。

参照透過性を例に説明していきたいと思います。

参照透過性をもつ関数はテスタビリティが高いと言われています。
参照透過性を壊すものの一部を挙げると以下があります。

* 環境変数
* グローバル変数
* 現在時刻を返す関数
* 乱数生成機

これらを含む関数は実行する環境やタイミングなどによって返す値が異なり、テスタビリティの低い関数になることがあります。

# 例
例として、様々な敵をランダムに生成し返す関数`createRandomEnemy()`を考えます。
この関数は呼ばれる度に95%の確率でノーマル敵、5%の確率でレア敵を返すという仕様だとして、
以下のように書いたとします。

```js
const createRandomEnemy = () {
    const probability = Math.random();

    if (probability > 0.05) {
        return new nomalEnemy(); // ノーマル敵を表すオブジェクト
    }

    return new rareEnemy();// レア敵を表すオブジェクト
}
```

仕様通りの動作をするか確認するには、以下のように対象の関数を何万回も呼び出した上で5%程度の範囲内かどうかを調べるテストが考えられます。
しかし、これでは確率的に成功/失敗するテストになってしまいます。

```js

test('レアな敵の出現チェック.', () => {
    enemies = createEnemies(50000); // たくさん敵を生成する. 内部でランダムに敵を生成する関数を呼び出している
    const resut = aggregateEnemies(enemies); // どの敵がどれだけ生成されたかを集計する関数(略)
    expect(resut.rareEnemyWeight).toBeWithinRange(0.0499, 0.0501); // レア敵が5±0.1%程度で生成されているかのアサーション
});


function createEnemies(count) {
    const enemies = [];
    _.times(count) {
        enemies.push(createRandomEnemy());
    }
    return enemies;
}
```

関数内で行っていた乱数生成`Math.random()`をやめ、
`createRandomEnemy()`に外から乱数を与えるようにし参照透過性をもたせることで、これを防ぐことができます。
つまり、`createRandomEnemy()`の関数呼び出しの結果が、引数`probability`にのみ依存するようにします。

```js
const createRandomEnemy = (probability) {
    if (0.05 < probability) {
        return new nomalEnemy();
    }

    return new rareEnemy();
}
```
こうすることで、createRandomEnemyについては何度実行しても同じ結果となります。

```js
test('レアな敵の出現チェック.', () => {
    const enemy = createRandomEnemy(0.01);
    expect(enemy.type).toEqual(RARE);
});
```

# まとめ
参照透過性を保つことはコードを理解しやすくし、テスタビリティを高め、不具合を減らす上で役立ちます。
簡単な工夫で対処できる場合は、テスタビリティの観点をもってコードを書くことをおすすめします。



明日は @tomokazu_kurosawa さんの記事です。
[BigQuery] 一部のカラムだけクエリしたくない場合はexcept関数があるよ

<font color="LightGrey">私が知らなかっただけで、BigQuery使っている人なら皆知ってるのかなぁと不安な思いもあるが、知らないままでいるには非常に勿体無い機能なので紹介したい。
あと書き方忘れた時にパッと検索できるように記事化しておきたい</font>

# 3行で
- SQLでモデルを作るための特徴量を詰め込んだテーブルを作成する時、カラムが多すぎると明示的に記載するの面倒じゃないですか
- でも、テーブルに目的変数や特徴量として使いたくないカラム(インデックス用のカラムとか作成時刻カラムとか)が含まれていると単純に*(アスタリスク）で書けないですよね
- でも、BigQueryでは<font color="OrangeRed">**クエリしたくない列をexcept()として指定する**</font>と*(アスタリスク)でいい感じに書けるんですわ

# どういうこと？
SQLでクエリする対象がテーブルのほとんど全てなのだけど、**一部だけクエリしたくない場合は普通は<font color="OrangeRed">排除したいカラム以外を明示的に記載**</font>してクエリすることになる

何をクエリするべきかSQL文に記載されるので、クエリの仕方としては正しいもののデータ分析を行う場合には時折<font color="OrangeRed">**クエリしたいカラム数が数百を越える**</font>ことがある

それを全て明示的にクエリするのはクエリ文があまりに長くなりすぎて**可読性が非常に低くなる**（そして１つ１つのカラムにはさほど興味もない）

# BigQueryならこう書ける
BigQueryであれば、テーブルの中で排除したいカラムを明示的に記載して残りは*(アスタリスク)で全て取り出すというクエリ方法が可能！！！

やることは`* except(排除したいカラム名)`をSELECT文に記載するだけ

こんな感じ(公開データなので皆クエリできるはず)

```sql:irisデータのうち種類(species)以外をクエリしたい
SELECT 
    * except(species)
FROM 
    `bigquery-public-data.ml_datasets.iris` 
;
```
## 結果画面(単一カラム指定)
![スクリーンショット 2019-12-08 20.15.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55225/806406f0-22c7-fc9c-aadb-f39fc83f77af.png)

ちゃんと除外したいspeciesが除かれている

こうやって書くだけで、自分がクエリしたくないカラム以外をクエリできるとは。。。


複数除外したいカラムを指定することもできる

```sql:irisデータのうち種類(species)以外をクエリしたい
SELECT 
    * except(sepal_length,species)
FROM 
    `bigquery-public-data.ml_datasets.iris` 
;
```
## 結果画面(複数カラム指定)
![スクリーンショット 2019-12-08 20.18.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55225/1131da7a-8493-2f03-84c3-027d1be08846.png)

特殊な使い方だけど、**かなり便利！！！**凄い！！！

# クエリの意味合い
*(アスタリスク)の部分を左集合と考えてexcept()がある部分を右集合と考えると全てのカラムが含まれる左集合から除外するカラムが含まれている右集合とを比較して左にしか含まれないカラムを出力するというexcept関数の本来の機能をレコードに対してではなくカラムに対して実現していると解釈できる

## ちなみにレコードを比較するExcept関数もあります
どちらかというとこっちがメジャーな機能だがレコードを比較してexceptに含まれないレコードを返す機能もある

```sql
-- 最初の10行と５行を取り出して後半の5行だけ出力する
WITH a as (
SELECT 
    *
FROM 
    `bigquery-public-data.ml_datasets.iris` 
LIMIT 10
),
b as (
SELECT
    *    
FROM 
    `bigquery-public-data.ml_datasets.iris` 
LIMIT 5
)
SELECT
    *
 FROM
 (SELECT * FROM a EXCEPT DISTINCT SELECT * FROM b)
;

```

## 結果画面
![スクリーンショット 2019-12-08 20.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55225/00392ad0-db6a-96bb-0394-4873cf785231.png)

# 最後に
公式リファレンスのサンプルコードの中で当然のように使われていたので、

「まさかそんな事出来るはずねえだろ！！」と思ってクエリしたら出来たのでビビりました

もっと早く知りたかった

アスタリスクを極力使わないというBigQueryのベストプラクティスにはやや反している感はあるけど、使いどころを間違わなければ非常に便利

おしまい

# -参考-
[BigQueryで2つのテーブルの差分を求める方法](https://qiita.com/shiozaki/items/bc8cc9343f13927a778e)

[【BigQuery】集合演算子(UNION…)まとめ](https://qiita.com/tatsuhiko_kawabe/items/2537c562c6d99f83e37b)

[標準 SQL クエリ構文:except](https://cloud.google.com/bigquery/docs/reference/standard-sql/query-syntax?hl=ja#except)


[BigQueryのStandard SQLの便利な機能とLegacy SQLからの変更点をいくつか紹介](http://sucrose.hatenablog.com/entry/2017/06/26/000316#SELECT--EXCEPT-%E3%82%AB%E3%83%A9%E3%83%A0%E5%90%8D)
Storage Transfer Serviceをモニタリング

# 言いたいこと

* Storage Transfer Serviceの呼び出しは[Service Runtime](https://cloud.google.com/monitoring/api/metrics_gcp#gcp-serviceruntime)のメトリクスでわかるよ
* GCPサービスのAPIの呼び出しは、だいたいService Runtimeで取れるよ


# Storage Transfer Serviceとは
https://cloud.google.com/storage-transfer/docs/overview?hl=ja

GCSのバケットやS3のバケットから、GCSバケットにファイルをコピー出来るGCSのサービスです。

コーディングなしでも実行出来る超絶便利なサービスなのですが、Storage Transfer Service用のStackdriver Metricsは[ないようです](https://cloud.google.com/monitoring/api/metrics_gcp)（2019/12/06時点）。


# APIの呼び出し回数で見る
## ダッシュボード
GCPのConsoleには[API Dashboard](https://console.cloud.google.com/apis/dashboard?hl=ja)があり、Storage Transfer Serviceを含むGCPのAPI呼び出し回数を見ることが出来ます。

<img width="1095" alt="スクリーンショット 2019-12-07 12.42.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/311203/da7def14-afb6-8575-4665-954648a5a78b.png">

## 対応するStackdriver Metrics
[Service Runtime](https://cloud.google.com/monitoring/api/metrics_gcp#gcp-serviceruntime)というカテゴリー中がAPI Dashboardに対応しており、

* APIの呼び出し回数（request_count）
* レイテンシ（request_latencies）
* レスポンスサイズ（response_sizes）

などのメトリクスを取ることが出来ます。

Storage Transfer Service以外のGCPのサービスも
[いろいろ対応している](https://cloud.google.com/apis/docs/monitoring?hl=ja#supported_apis)ので、メトリクスが用意されていないけど、気軽に監視したい時は便利です。

# 転送ファイル数とかを知りたい
Stackdriverのメトリクスでは取れなさそうです…


[transferOperationのAPI](https://cloud.google.com/storage-transfer/docs/reference/rest/v1/transferOperations/list?hl=ja)などで頑張りましょう。
A-FRAME: 物理演算でボーリングっぽい動きを実現してみる１０（ピンに複合シェイプの基本形状を複数適用する）

A-Frameをつかって物理演算ができるようにしてみます。
今回は複合シェイプを複数適用して、よりピンに近い物理的な形状を設定してみます。

3つのcylinderを組み合わせて、ピンの形状に近い物理的な形状を設定しました。
![pin1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/a6a0b2e1-24ad-127d-0872-84da981b307b.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_comp_multi_1.html)

ボールを転がしてみます。
![pin2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423506/ea1586f8-2a35-dd59-3ac7-48a20c9c6749.gif)
[demo](https://k38.github.io/aframe/physics-system/pin_shape_comp_multi_bowl_1.html)

複合シェイプではないcylinderと似たような感じです。
物理的な形状がレンダリングされる形状に近いことは、ピンの動きにはあまり影響がなさそうです。
Ubuntu 18.04にてexFATをマウント

# 環境
- Ubuntu 18.04

# はじめに
カメラのSDカードを入れて写真を取り込もうと思ったらexfatがマウントできなかったので、そのときにやったこと。

# やること
``` sh
$ apt-get install exfat-fuse exfat-utils
```

以上。
リフレクションなるものを知った

##なんか不思議でおもしろいぞこれ

```Reflection.java
package reflection;

import java.lang.reflect.Method;

public class Reflection {
	
	private static <T> void test(Class<T> t) {
		
		try {
			// インスタンスを取得
			Object instance = t.newInstance();
			
			// メソッドを取得
			Method method = t.getMethod("test", String.class);
			
			// メソッド実行
			method.invoke(instance, "わっほい");
			
		} catch (ReflectiveOperationException e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		test(ReflectionTest.class);
	}
}

class ReflectionTest {
	
	public void test(String str) {
		System.out.println(str);
	}
}
```

結果

```
わっほい
```

とまぁ、なんだろう
リモートでPCにアクセスする感じで

クラスにアクセスして、メソッドをアクセスして　みたいな

これを使えばprivateメソッドとかも実行できちゃうらしいです

やってみよう

```privateにしてみた.java
class ReflectionTest {
	
	private void test(String str) {
		System.out.println(str);
	}
}
```

結果

```
java.lang.NoSuchMethodException: reflection.ReflectionTest.test(java.lang.String)
	at java.lang.Class.getMethod(Unknown Source)
	at reflection.Reflection.test(Reflection.java:14)
	at reflection.Reflection.main(Reflection.java:25)
```

だめじゃん！！！うそつき！！！

```これが必要らしい.java
package reflection;

import java.lang.reflect.Method;

public class Reflection {
	
	private static <T> void test(Class<T> t) {
		
		try {
			// インスタンスを取得
			Object instance = t.newInstance();
			
			// メソッドを取得
			Method method = t.getDeclaredMethod("test", String.class);
			
			// privateの場合, アクセスしますよ宣言が必要
			method.setAccessible(true);
			
			// メソッド実行
			method.invoke(instance, "わっほい");
			
		} catch (ReflectiveOperationException e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		test(ReflectionTest.class);
	}
}

class ReflectionTest {
	
	@SuppressWarnings("unused")
	private void test(String str) {
		System.out.println(str);
	}
}
```

`Method`クラスの`setAccessible`メソッドで`true`を設定しなきゃだめらしいですね

まぁこいつはtestクラスとかでもprivateにアクセスしたりとか

なんかこう強引になんでもできるみたいな

ただよくわからん`ReflectiveOperationException`とかいうようわからん例外もある上に

少し間違えるとすぐいろんな例外とぶんで

んまぁもうほんと力業ですねぇ
コーディングの手助けとなる "コメントコーディング" を紹介

これは[ユアマイスター Advent Calendar 2019](https://qiita.com/advent-calendar/2019/yourmystar)の9日目の記事です。

# はじめに
みなさんは、**コメントコーディング**の存在を知ってますか？
コーディングをする上で色々な手助けをしてくれるこの手法を私は利用しています。
なので、今回の記事を通して

・まずはその存在を知って欲しい
・そして良し悪しを理解して欲しい

この２つの観点から、コメントコーディングに関する考えを独自の主観でいくつかお話ししたいと思います。

# コメントコーディングとは？
まずコメントコーディングは、コメントとコーディングを掛け合わせた造語であり、コーディングをする上での手助けとなる手法を指します。

ちなみにコメントに関しては、Wikipediaさんで掲載されてましたので、下記にその引用を記載します。

>コメント（英: comment）とは、コンピュータ言語（プログラミング言語やデータ記述言語）によって書かれたソースコードのうち、人間のために覚えとして挿入された注釈のことである。この部分はコンピュータが処理を行うときにはないものとして無視されるため、自由に文を挿入することができる。
引用元：[Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88_(%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF))

つまりコメントとは、注釈という事ですね。

実際のソースコード上におけるコメントはこちら↓
<img width="857" alt="スクリーンショット_2019-12-08_15_20_20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267738/a2f088b0-b816-201d-c211-b842836b2e67.png">
引用元：https://github.com/cakephp/cakephp/blob/master/src/Http/ServerRequest.php

これは、CakePHP3のServerRequestクラスのソースコードを一部抜粋したものです。
赤い枠で囲われている部分、全てがコメントです。
※コメント、というもののイメージを掴んで頂くための実例なのでコメントの量は気にしないでください。

このように、プログラミングをする時には、コメントを記載するケースがあります。

プログラミング言語を利用してプログラムを記述することを**コーディング**と呼ぶことがありますが、それと近しい意味合いで、コメントを利用して記述する事を**コメントコーディング**と呼びます。

以下に例を示します。

```php
class UsersController extends AppController
{
    public function input()
    {
        // POSTリクエストかどうかを判定
        // TRUEの場合、POSTデータに対してバリデーションをかける
        // バリデーションに引っかかった場合、前の画面にリダイレクトする
        // バリデーションを通った場合、確認画面を表示する
    }
}
```

多少粒度は粗めですが、こんな感じでコメントによるコーディングしていきます。
**やりたい事を言語化する**という言い方もできるかもしれません。

もう少し粒度を細かくする場合、例えば、

・POSTリクエスト以外のリクエストがきた場合どうするのか？
・どんなバリデーションをかけるのか？

などを記述すると良いと思います。

# コメントコーディングのメリット
## 1. コーディング効率が上がる
なんといってもこれが最大のメリットだと私は感じます。

コメントコーディングをする事で

・やりたい事が明確になる
・事前に課題の特定ができる（※潜在的な課題は除く）

そのため、純粋なコーディングの時に無駄な時間がなくなるため、コメントコーディングがコーディングの効率アップに寄与してると私は思います。

効率を考えたコーディングをする場合、まずやる事を明確にすることが重要だと考えます。

そのため、行き当たりばったりのコーディングではとても非効率なコーディングになってしまい、また、トータルで見た時のコーディング時間が多くかかってしまうため、効率的な手法ではないと私は思います。


## 2. 課題解決の相談がスムーズになる
上記で述べたように、コメントコーディングをする事で、やりたい事を明確にする事ができます。

そのため、課題や疑問を解決するための相談は、やりたい事が明確になっている事でスムーズになります。

コメントコーディングによるメリットなのか？と言われると、やや怪しさが残りますが、
コメントコーディングはやりたい事を明確にする事ができるという要素を持っているため、間接的ではありますが、メリットの１つと言えるでしょう。


# コメントコーディングのデメリット
## 1. コーディング時間が増加する
ここでいうコーディング時間とは、プログラミング言語を利用したコーディングとコメントコーディングを合わせたトータルの時間を指します。

これがデメリットか？というとやや自信はありませんが、時間に厳密な人や実体験としてコメントコーディングの良さを感じていない人は、ただの時間増加と捉えてしまう可能性があるため、デメリットだと感じるかもしれません。

上記で述べたように、純粋なコーディングをする際の無駄な時間は減ります。

しかし、コメントコーディングという1つのフローを追加する事とほぼ同じなので、必然的に時間は増えます。
特にコメントコーディング知りたての当時の私は、コメントコーディングのメリットを体験として感じられていなかったため、早く純粋なコーディングをしたい、という煩わしさに駆られてた事もありました。


# まとめ
今回はコメントコーディングについてお話ししてみましたがいかがだったでしょうか？

冒頭でもお話ししたように、この記事を通してコメントコーディングの存在を知り、そして少しでも理解していただけたら嬉しいです。

メリット・デメリットの話は、完全に私の主観でしかないので参考程度に読んでいただければ幸いです。時にメリットはデメリットとなり、デメリットがメリットとなることがあるので、感じ方は人それぞれでしょう。

コメントコーディングに限らず、開発の手助けとなる手法はどんどんチャレンジしてみて、都度紹介できればと思います。
Command + Shift + Control + 3 :  #Mac で全画面のスクリーンショットでキャプチャしてクリックボードにコピーするショートカット

手癖にせよ

![image](https://user-images.githubusercontent.com/13635059/70381886-80cd9680-1995-11ea-8593-7878a10bca39.png)

command + shift + 3 or 4
command + shift + Controle + 3 or 4

の組み合わせでいろいろできたはず

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2828








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
OpenShift Container Platform の ユーザーのパスワードを変更する

Terraform で OpenShift Container Platform 3.11 を導入してみました。

ユーザーのパスワードを変更するには全てのmasterノードに入って以下を実行します。

```
cd /etc/origin/master

htpasswd -b htpasswd <username> <new password>
```

いろいろやり方はあると思うのですが、上記の方法は htpasswdファイルににエンコードされたパスワードが書き込まれる方法なので、masterノード全てで実施します。
Trello（トレロ）のテンプレート機能について

みなさん　Trelloを使ってますか？
どんどん、新しい機能がアップデートされていますね。
気になっていたけど、使ってなかった機能などありますよね？
Trelloのいろいろなことを紹介します。

#このブログで紹介する機能
- テンプレート機能（まだベータ版ですが、、）


#テンプレート機能（ベータ版）
タスク管理ツールの利用のなかで、人によってカードに登録するタスクの粒度がバラバラで困惑するという課題があります。
そういった課題を解決する、ひとつの手段が「テンプレート機能」です。
そこで今回は、Trelloのテンプレート機能をご紹介します。
- リストの右下にアイコンがあり、その上にマウスをあわせると「テンプレートから作成...」という表示がされます。
![スクリーンショット 2019-12-08 10.13.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/46824453-0f97-c759-47bd-d4d1c3788d84.png)
ここをクリックするとすでに登録されているテンプレートが表示されます。
![スクリーンショット 2019-12-08 10.16.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/39f25ca4-1286-d27a-b2f5-d0a878d2a1c8.png)
このテンプレートをクリックすると、テンプレートからカードが自動生成されます。
![スクリーンショット 2019-12-08 10.19.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/fa2e9c77-dfc8-d118-a9f1-56a714bec0e7.png)

#テンプレートを作ってみる
テンプレートを作成してみたいと思います。
ボードに「テンプレート」というリストを作成します。（人によって好みもありますが、私は後でメンテナンスしやすいようにリストを作成して、そのなかにテンプレートを作成しています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/af6660e1-46ac-a175-8586-6881c866153a.png)
**手順1**
「テンプレートから作成..」を行い、「新しいテンプレートを作成」をクリックしてください。
![スクリーンショット 2019-12-08 10.39.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/d91e91ee-cae3-d3d0-fee9-010279e51fcb.png)
**手順2**
テンプレートのタイトルを入力する画面が表示されますので、適当なタイトルを入れます。
タイトルを入力するとカードが表示されます。
このカードが、そのままテンプレートとして利用できます。
![スクリーンショット 2019-12-08 10.41.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/e55be020-535b-179e-b99d-8a30f57cf4fb.png)

**手順3**
テンプレートカードを、こんな感じで作成してみました。
![スクリーンショット 2019-12-08 10.48.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/7f54df3a-e105-d0ea-6459-093ff6d1b7ee.png)
「カバー」も自らを奮い立たせるような、やる気のあるカバーを追加してみました。
「チェックリスト」に他システムのURLリンクも入れてみました。

このテンプレートによって、申請者と担当者との間で「空調は必要ですか？」「振替休日はいつにしますか？」というような事が少なくなればいいな・・とか思いつつテンプレートを作成してます。

作成したテンプレートは「リスト」から非表示（アーカイブ）しても有効ですので、普段は非表示にしても良いかと思います。

以上でテンプレートの作成は完了です。

**手順4**
テンプレートは、普段使っているカードからも作成できます。
リストに入っているカードを開いて、「テンプレートを作成」をクリックすれば、そのカードがテンプレートに変更されます。
![スクリーンショット 2019-12-08 10.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/2ab1fc97-6912-3405-7d1b-bef5fa21fe76.png)
**注意）**
通常カードをテンプレートカードに変更する場合、その通常カード自体がテンプレートとなってしまいます。
このブログで紹介したように「テンプレート」というリストを作成して、通常カードをコピーしてからテンプレート化を行うことをオススメします。
コピーする際に、リストを「テンプレート」に指定してコピーしてからテンプレート化をしてください。
![スクリーンショット 2019-12-08 11.06.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541033/16493747-253d-e0f8-5972-5da91f11ecd0.png)

#おわりに
Trelloの無料プランの範囲で、こんな機能まで使えるのは素晴らしいです!!
こんなに無料で使えてしまってよいのでしょうか？と申し訳ないくらいの便利なTrelloでした。

テンプレート機能は、まだベータ版のようですが、新しい機能がどんどん追加されて便利になっていくのは楽しみです。
vscodeでprettierが"Failed to load module"する

# エラーメッセージがうざってぇ！

どうやらprettierのパスがvscodeに渡っていないのが原因ぽい。

以下のコマンドを実行します。

```
npm i prettier -g
```

これのあと、vscodeのpreferences(設定画面)を開いて、その中でprettierを検索。
prettierのパスを設定できるところがあるので以下を入力。(もし別のところにprettierを入れた場合はそれを書いてください)

```
/usr/local/lib/node_modules/prettier
```

これで完了!!

# まとめ

変なメッセージ出されるとテンション下がるのでやめてほしい。
〇〇駆動開発について

こんにちは。
こちらは[LIGのアドベントカレンダー10日目](https://qiita.com/advent-calendar/2019/lig)の記事です。

[株式会社LIG](https://liginc.co.jp/)でWebディレクターをやっているともぞうといいます。
今回は存在自体が実しやかなものも含め、〇〇駆動をまとめました。

## テスト駆動開発
TDDと呼ばれていますね。
すでにQiita上で多くの記事がありますが、ざっくりの手順は以下です。

1. はじめにテストを書く
1. そのテストに通らないコードを書く
1. テストに通るコードを書く
1. リファクタリング

まず異常系からやっていくことで、考慮漏れを防げます。
私はエンジニアではないので、正直詳しくは知りません。
ごめんなさい。

## チケット駆動開発
こちらもTDDと呼ばれています。
チケット（タスク）に分割し、管理と見える化をします。
No Ticket, No Commitは名言ですね。

タスク管理でも同じことが言え、No Ticket, No Workです。
チケットを立てる前に作業をはじめるないほうがいいですね。

## 打ち合わせ駆動開発
スケジュールの期日を定例会の前日や、はじまる1時間前に合わせる開発手法です。
明確な締切があり、アウトプットを求められるからこそ進捗を出せます。

たいてい良くて前々日、たいてい前日になってから本気を出し始めます。
かの有名なパーキンソンの法則です。

個人的には悪くない進め方な気もしています。
期日（定例）ではそれなりのアウトプットを求められます。
ただの期日とは少し違うため、頑張らねばならない。（普段から頑張れは置いておき）
そうやっていい質のアウトプットを出し続けられるのなら、なかなかいい手法だと思います。

## 六曜駆動開発
六曜ってご存知ですか？
以下は[Wikipedia](https://ja.wikipedia.org/wiki/%E5%85%AD%E6%9B%9C)からの引用です。

> 六曜（ろくよう、りくよう）は、暦注の一つで、先勝（せんしょう/せんかち）・友引（ともびき）・先負（せんぷ/せんぶ/せんまけ）・仏滅（ぶつめつ）・大安（たいあん）・赤口（しゃっこう/しゃっく）の6種の曜がある。
> 日本では、暦の中でも有名な暦注の一つで、一般のカレンダーや手帳にも記載されていることが多い。今日の日本においても影響力があり、「結婚式は大安がよい」「葬式は友引を避ける」など、主に冠婚葬祭などの儀式と結びついて使用されている。
> 六輝（ろっき）や宿曜（すくよう）ともいうが、これは七曜との混同を避けるために、明治以後に作られた名称である。

カレンダーを見るとちっちゃく大安とか書かれていますね。
あれです。

大安に合わせてリリースや重要な機能を開発することによって、万事うまくいくことを
リリース日は絶対に仏滅を避けたりします。

ここで六曜それぞれの意味を見てみましょう。
こちらもWikipediaを引用です。

### 先勝
> 先勝（せんしょう/せんかち）は、早くことを済ませてしまうことが良いとされる日。「先んずれば即ち勝つ」の意味。午前は吉、午後は凶と言われる。急用の処理や訴訟には吉日とされている。かつては「速喜」「即吉」とも書かれた。

つまり重要な作業は午前中に。
大事なリリースも午前中に済ませましょう。
午後にやってはいけません。

### 友引
> 友引（ともびき）は、勝負の決着がつかない良くも悪くもないとされる日。留連（立連）を原義とし、もともとは「共引き」の意味である。陰陽道で、ある日ある方向に事を行うと災いが友に及ぶとする「友引日」というものがあり、これが六曜の友引と混同されたものと考えられている。
> 朝晩は吉、昼は凶と言われる。

日中には重要な作業は極力避けましょう。
朝イチリリースもしくは、深夜リリースが吉です。

### 先負
> 先負（せんぶ/せんまけ）は、急用は避けるべきとされる日。争い事や公事も良くないといわれ、万事に平静を守ることが良いとされる。「先んずれば即ち負ける」の意味で先勝に対応する。午前は凶、午後吉と言われる。
> かつては「小吉」「周吉」と書かれ吉日とされていたが、字面につられて現在のような解釈がされるようになった。

先勝の逆です。
午後にやっつけましょう。
スロースターターです。

### 仏滅
> 仏滅（ぶつめつ）は、六曜における大凶日。もとは「虚亡」といい勝負なしという意味で、さらに「空亡」とも称されていたが、これを全てが虚しいと解釈して「物滅」と呼ぶようになり、仏の功徳もないという意味に転じて「佛（仏）」の字が当てられたものである。
> 仏滅は万事に凶であるとされる。この日は六曜の中で最も凶の日とされ、婚礼などの祝儀を忌む習慣がある。この日に結婚式を挙げる人は少ない。そのため仏滅には料金の割引を行う結婚式場もある。他の六曜は読みが複数あるが、仏滅は「ぶつめつ」としか読まれない。

もうあらゆる作業をやめましょう。
リリースは必ず失敗します。

しかし夜になると大安イヴなので、力を取り戻します。

### 大安
> 大安（たいあん）は、万事進んで行うのに良いとされる日。「大いに安し」の意味。
> 六曜の中で最も吉の日とされる。何事においても吉、成功しないことはない日とされる。

何をしても万事うまくいきます。
リリースはなんやかんやで成功し、行き詰まっていた作業は滞りなく進みます。
前日の仏滅での遅れを取り戻しましょう。
つまり結果的にトントンです。

### 赤口
> 赤口（しゃっこう/しゃっく）は、正午の前後を除いて凶日とされる日。午の刻（午前11時ごろから午後1時ごろまで）のみ吉で、それ以外は凶とされる。

お昼だけが良いとされている仏滅のつぎに厳しい日です。
つまり美味しいお昼を食べられます。
それ以外はダメです。

## さいご
はい。これは六曜駆動開発をいいたかっただけの記事です。
六曜カレンダーというものが配布されており、Googleカレンダーにも六曜を表示させることが可能です。
[https://www.arachne.jp/google_calendar_rokuyou/](https://www.arachne.jp/google_calendar_rokuyou/)
これでいつでもどこでも、六曜を意識しながら過ごすことができますね。

以上です。

明日は誰かの何かみたいですね。
とても楽しみですね。
Digital signal process

```{r}

library(dplyr)

N=10;t=100;n=20

Y=c()

w=0.1

for(j in (-N):(n+t)){
  
Y=c(Y,sample(1:10,1)*exp(-(n+j)*w/N))  
  
}

Y_data=data.frame(num=c((-N):(n+t)),Y)
                  

X=function(s){
  
return(exp(-s*w/N))  
  
}
                  
                  
A=rep(1,N+1);B=rep(1,N+1)



values=Y_data %>% filter(num %in% c(n:(n+t)))

values=values[order(values$num),]

values=values$Y

S=function(a,b,x,y){
  
return(sum((values-(x%*%a-y%*%b))^2))
  
}


ite=2000;h=0.001;eta=0.0001

mat_X=array(0,dim=c(t+1,N+1))

mat_Y=array(0,dim=c(t+1,N+1))

for(i in 0:t){
  
mat_X[i+1,]=c(X(c((n+i):(n+i-N))))  
  
Y_val=Y_data %>% filter(num %in% c((n+i):(n+i-N)))

Y_val=Y_val[order(Y_val$num),];Y_val=Y_val$Y

mat_Y[i+1,]=c(Y_val)
  
}
 

for(l in 1:ite){

vec=B;

for(i in 1:length(B)){
  
vec_sub=vec;vec_sub[i]=vec_sub[i]+h  
 
B[i]=B[i]-eta*(S(A,vec_sub,mat_X,mat_Y)-S(A,vec,mat_X,mat_Y))/h
 
}

vec=A;

for(i in 1:length(A)){
  
vec_sub=vec;vec_sub[i]=vec_sub[i]+h  
  
A[i]=A[i]-eta*(S(vec_sub,B,mat_X,mat_Y)-S(vec,B,mat_X,mat_Y))/h  

}

cost=S(A,B,mat_X,mat_Y)

print(cost)
  
}


pre=c(mat_X%*%A-mat_Y%*%B)

plot(c(1:length(values)),pre,xlim=c(1,length(values)),ylim=c(min(c(values,pre)),max(c(values,pre))),xlab="index",ylab="values",col=2)

par(new=T)

plot(c(1:length(values)),values,xlim=c(1,length(values)),ylim=c(min(c(values,pre)),max(c(values,pre))),xlab="index",ylab="values",col=3)


```
#Ruby  nested class and module pattern : child class or module not overwrite parent class or module : but able to define it

```rb
```rb
# A is class

class A
end

A.class
# => Class



# A is class and B is class

class A::B
end

A.class
# => Class

A::B.class
# => Class


# A is class but C is module

module A::C
end

A.class
# => Class

A::B.class
# => Class

A::C.class
# => Module

A::C.ancestors
# => [A::C]


# Unable to replace class to module or module to class


module A
end
# TypeError: A is not a module

module A::B
end
# TypeError: B is not a module

class A::C
end
# TypeError: C is not a class



# when Module is parent pattern

module D
end

module D::E
end

class D::F
end

D.class
# => Module

D::E.class
# => Module

D::F.class
# => Class

```
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2827








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Ruby で class と module の定義をネストさせることは可能だが上書きはできない

```rb
# A is class

class A
end

A.class
# => Class



# A is class and B is class

class A::B
end

A.class
# => Class

A::B.class
# => Class


# A is class but C is module

module A::C
end

A.class
# => Class

A::B.class
# => Class

A::C.class
# => Module

A::C.ancestors
# => [A::C]


# Unable to replace class to module or module to class


module A
end
# TypeError: A is not a module

module A::B
end
# TypeError: B is not a module

class A::C
end
# TypeError: C is not a class



# when Module is parent pattern

module D
end

module D::E
end

class D::F
end

D.class
# => Module

D::E.class
# => Module

D::F.class
# => Class

```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2826








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
create-react-appを用いて，React/JSXのコンパイル環境を構築する

## はじめに
`create-react-app`を用いて，コンパイル環境を構築する例を備忘録としてまとめます．

## 環境
* Windows 10 Home
* npm 6.12.1
* Git bashでコマンド実行

## Reactのツールでビルド
React/JSXを使用するときは，ソースコードをあらかじめコンパイルしておくのが一般的です．
ここでは，React/JSXのコンパイル環境を整える方法を紹介します．


### React/JSXのコンパイル環境を作る

`create-react-app`というアプリを使ってコンパイル環境を構築します．
これはFacebookが用意しているアプリです．

以下のコマンドで`create-react-app`をグローバルインストールします．

```console
$npm install -g create-react-app
```

次に，このツールを利用したプロジェクト(sample1)を作成します．
作業ディレクトリの直下に`sample1`というフォルダが生成されます．

```console
$create-react-app sample1
Creating a new React app in C:\Users\Let-create-ReactApp\src\ch2\sample1.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

・・・略・・・
We suggest that you begin by typing:

  cd sample1
  npm start

Happy hacking!

```

次に，`sample1`のディレクトリに移動して，`npm start`と入力してアプリを起動します．

```console
//作業ディレクトリを表示
$pwd
C:\Users\Let-create-ReactApp\src\ch2\

//sample1というフォルダが直下にあることを確認
$ls
sample1/
$ch sample1
$npm start

> sample1@0.1.0 start C:\Users\Let-create-ReactApp\src\ch2\sample1
> react-scripts start
・・・略・・・
Compiling...
Compiled with warnings.

./src/App.js
  Line 2:8:  'logo' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Compiling...
Compiled successfully!
```

Windowsのネイティブ環境で実行している場合には，Webブラウザが起動し，Reactのひな型が以下のように表示されます．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186620/20a36caf-2c4f-5e03-ff1a-73963730220e.png)



`create-react-app sample1`を実行するとき，カレントディレクトリに以下のフォルダが生成されます．

* `node_modules`: インストールされたNode.jsのモジュールが存在
* `src`:コンパイル前のソースコードが存在
* `public`:index.htmlのひな型となるファイルが存在


`src`ディレクトリにあるファイルを編集して保存すると，ファイルの変更を自動的に検知して，Webブラウザに反映できます．
そのため，リアルタイムで実行結果を確認して，ファイルの編集を行うことができます．

`src`の中の`App.js`を下記のように編集して保存すると，自動的にWebブラウザが更新され，以下のような画面が表示されます．

```jsx:App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>こんにちは</h1>
    </div>
  );
}

export default App;
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186620/bc02bf92-c2e8-828e-3b42-14fc2e448536.png)



プログラムが完成し，開発したプログラムをWeb上に公開するためには，以下のコマンドを実行します．

```console
$npm run build
```

これにより，`sample1`フォルダ直下に`build`というフォルダが生成されます．
そのフォルダ以下に各種ファイルが圧縮した状態で生成されます．
ローカル環境でうまくビルドされたかを確認するには，Webサーバが必要になります．
以下のようにコマンドを実行して`serve`コマンドをインストールします．そして`serve -s build`を実行すると，Webサーバが起動するので，指示されたURLにWebブラウザでアクセスすると，実行状態を確認できます．


```console
$npm install -g serve
$serve -s build
INFO: Accepting connections at http://localhost:5000
```
Webブラウザで`http://localhost:5000`でアクセスします．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186620/e686490d-01e1-97e3-e2f1-a81ed778d617.png)


## まとめ

`create-react-app`で環境を整えると，リアルタイムで変更が反映され，エラー表示もわかりやく，リソース様にビルドするのも容易です．
JS標準スタイルで自動整形

## はじめに
JavaScriptでは数多くのコーディング規約がありますが，
ここでは，JavaScript Standard Styleの規則について簡単に紹介します．
また，自動整形する方法を備忘録として記述します．


## JS標準スタイルの代表的な規則

* インデントはスペース2つ．タブは使わない
* 文字列表現は基本的に，クォートで囲む
* 未使用の変数は記述しない
* セミコロンは記述しない
* 制御構文などキーワードを記述するとき，単語の後ろにはスペースを入れる
* 関数定義の時，関数名の後ろはスペースを入れる
* 値の比較は`==`ではなく`===`を利用する
* 代入や演算のための記号の前後にはスペースを入れる
* 配列などカンマで値を列挙するとき，カンマの後ろにスペースを入れる
* if文でelseを書くときは，elseの前に改行しない
* 複数行のif文を記述するときは，`..`を省略しない
* コールバック関数で，エラー処理が必要な時，省略しない
* ブラウザーのグローバルオブジェクトはwindowsを諸略しないで記述すること
* 2行以上の空行を書かない
* 変数宣言をすること，一度に複数の変数を宣言しない
* 変数はキャメルケース(hugeFuga形式)で命名する．
* クラス名の一文字目は大文字とする，同様にコンストラクタ関数も名前の一文字目を大文字とする
* eval()を使わない

### 規約の特徴

#### セミコロンは記述しない

JavaやC言語などでは，文末にセミコロンを書くことが多いですが，JavaScriptではセミコロンを記述しなくても問題ないです．
あるコーディング規約には，セミコロンを書くことが推奨されていますが，極力不要ものは書かないとい意味で，セミコロン省略は潔く，プログラムが明快になるというメリットがあります．

#### インデントはスペース2つ

インデントはタブを使用せず，スペース2つで表現します．インデントについての論争がなされていますが，完全な好みによる部分が多く，明確な答えは見つかっていません．Js標準スタイルでは，スペースが2つとされています．

#### 関数名の後ろにスペースを入れるか否か

JS標準スタイルでは関数名の後ろにスペースを入れるときと，入れないときがあります．
関数定義を行う際は，関数名を後ろにスペースを入れ，関数呼び出しを行うときは，関数名の後ろにスペースを入れません．

```javascript
//関数名にスペースを入れるとき
fuction func (a, b) {
  return a + b
}

//関数名にスペースを入れないとき
func(2, 3)
```

#### 比較演算子は`==`ではなく`===`を使用する
JavaScriptの比較演算子の`==`と`===`では，異なる意味があります．
`==`は等価演算子と呼ばれ，数値と文字列を比較するとき，文字列が数値に変換されます．そのため，例えば`"01"==1`はTrueとなります．
一方，`===`は厳密等価演算子と呼ばれ，型変換は行われず，オブジェクトの型と値を比較します，そのため，例えば`"01"===1`はFalseになります．




### 自動的にスタイルを確認・整形する
コードを記述した後に，自動的にスタイルを変換してくれるツール`standard`があります．

#### `standard`をインストール
`npm install standard --sava-dev`:プロジェクトにスタイルを適用する場合
`npm install standard --global`:グローバルにツールを導入する場合

#### `Js標準スタイルに合致していない部分を検索`

```
$standard
```

#### CLIで自動整形
次のようにコマンド入力すると，自動で問題を解決して，Js標準スタイルに修正してくれます．

```
$standard --fix
```


## 参考文献

* [JavaScript Standard Style公式ホームページ](https://standardjs.com/) 
* [いまどきのJSプログラマーのための Node.jsとReactアプリケーション開発テクニック](https://www.amazon.co.jp/dp/4802611145)
36歳エンジニアがこの先生き残るためには

気づけば平成も終わり、私の36才も終わろうとしています。
振り返ってみるとエンジニア35才定年説を鼻で笑っていましたしたが、エンジニアとしての限界が感じられる１年となりました。

コードをかける時間が減り、1つのプロジェクトに集中して向かうことはなかなかできず、若い子の才能に嫉妬してと、エンジニアとしてはもう引退したほうがいいんじゃないかという気持ちにもなってきました。

いい機会なのでこの先どんな道があるかを改めて考えて、令和の世の中を生き残って行きたいと思います。
ちなみに私は今経営者で、バックエンドの経験が１番あり、フロントエンドもちょびっとできるという中途半端なスキルセットです。

## 1 エンジニアとしての道を貫き通す
己のエンジニア力を信じ、この道を貫き通す。
集中力が昔ほどもたなくても、必要ならば役職を変えてでも貫き通す。 
もちろん不義理はできないので、今やっている業務を引き継ぐ人を育て、完全なるエンジニアに戻る道を選ぶ。
理想はこれかもしれない

## 2 経験を活かして繋ぐ仕事をする
スーツ VS ギークが昔ほどは騒がれなくなってきまいしたが、エンジニアとその他の職種、経営者はやはり文字通り言語が違う。
それを繋げる仕事というのは、やはり一定以上需要があります。
専門的な話をわかりやすく伝える、エンジニアに対して本当にお客さんが求めていることを伝える、それはなかな難しい仕事です。
人と話したくなくてエンジニアになった私も、この年齢になったらそれなりに人と話せるようになったので、できなくはない気がする。
ベターな選択肢かもしれない

## 3 中途半端さを長所にする
エンジニアとして最低限のことは一通りできるのを活かして、されに手を広げていく。
もってるスキルを掛け合わせて、ユニークなスキルとして昇華させていく道。
バックエンド、フロントエンド、ディレクションだったり、SEOに特化してみたし。
エンジニア ✖️ 何かのスキル
を磨いていき、ユーティリティープレイヤーを目指していく。
全てが中途半端になりすぎると価値が薄くなるので難しいところだが、一定の需要はあるだろう。

## 4 マネジメントの道をいく
エンジニアというのはすごく独特な世界観を持っている人が多い。
それをマネジメントするにはやはり、エンジニア経験があったほうがやりやすいとは思う。
なので今までの経験を活かして、苦手とかいっていないでマネジメントの道を邁進する。
向いてる気はしないが１つの選択肢にはなるだろう。

今考えられるのはこれくらいだろうか。
エンジニアをやめると言う選択肢をいれたらもっともっと道はたくさんあるだろう。

選べるというのは嬉しくもあり、決断をしなければいけない苦しさもある。
だが36才になってもこんなにいろんな可能性を追えるのだからエンジニアとは素晴らしい職種じゃないか。

つらいこともあるし後悔ばかりの人生ではあるが、エンジニアになったことに対する後悔だけはまるでない。

37才もどんな形であれ老害にならず現役でいられるようがんばろう。
どの道を選んだのかは、来年のアドベンドカレンダーでお伝えできる気がする。

それではまたどこかで
WindowsPCでSafariの動確をしたい時（ngrokの紹介）

## はじめに
アドベントカレンダー、昔話を書こうと思ったのですがうまいこと筆が進まず、
予定を変えて知っておくとちょっと便利なサービスの紹介といきます。
Webサービスを扱っていると、Safariでの動作も確認する必要がでてきます。
iPhoneユーザーが増えた昨今では尚更ですね。
しかし開発マシンがWindowsであった場合ちょっと面倒。
もはやWindows版Safariはクローズされて久しい存在ですし、
どこかに公開しちゃえばそこにMacからアクセスすれば済む話なのですが、まずはローカルで動確したいですし。。。

## 概要
* ローカル動作確認時に便利な「ngrok」というサービスの紹介。
* ローカルで起動しているwebサービスを一時的に公開、インターネット経由でアクセス可能にするもの。
* これによりWinPCのローカルで動作しているサービスに対して、別のMacのSafariからアクセスできる。  

## 利用手順
前提：windows10
1. [ngrok](https://ngrok.com/)にてユーザー登録を行う。FreeプランでOK。
2. ngrok-stable-windows-amd64.zip をダウンロード、適当なフォルダに展開。
3. 展開した（exeのある）フォルダでコマンドプロンプト起動。
4. 以下のコマンドでトークンを通す。トークンは通常 https://dashboard.ngrok.com/get-started で確認可能。

```Console
ngrok authtoken {token}
```
成功すると下図のようになる。
![token.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531310/b55a3816-8805-d3c1-beff-9ce6eb765baf.png)
5. この時点でngrokの実行は可能。基本的な起動コマンドは以下。  

```Console
ngrok http 80
```
成功すると下図のようになる。
![起動.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531310/4be7f05f-eedd-db6d-4509-1418cfb9a1ee.png)

* この例で言うと、「http(s)://9d1803db.ngrok.io」を「http\://localhost:80」にフォワードさせる。  
* この時点でlocalhost:80に何かしらのwebサービスが動いていれば、外部（インターネット）からアクセス可能。
* ドメイン部分は起動の度に振りなおされる。有料プランだとこれが固定できるっぽい。  
* サービス停止は"ctrl+c"  
* ngrok経由でアクセスすると、簡易アクセスログみたいなものがコマンドプロンプトに流れていく。

## httpsやポート指定の場合
localhostの44300で起動されているとして、以下のコマンドで公開実行可能。  

```Console
ngrok http https://localhost:44300 -host-header="localhost:44300"
```

## ngrokを知った発端
某案件で、リッチスニペット・google構造化データを触る機会があった。
その際、google公式ドキュメントの中で「ローカルの資材をクローリングしたり、テストしたいならngrokとか使おうね」 とあったのがきっかけ。
https://developers.google.com/search/docs/guides/debug?hl=ja
>ローカルページやファイアウォールで保護されているページをテストするには、ngrok などのトンネリング ソリューションを使用します。

googleお墨付きのようですし、信頼性は大丈夫かと。


## 参考
* ngrok でググれば記事はたくさん出てきます。
Flutterアプリのアーキテクチャについて2

# はじめに
[前回のアーキテクチャ１](https://qiita.com/drafts/eea3191d52b376efa6ee)に続く2になります。今回はDBから値を取得して一覧表示するユースケースをまとめます。

# DBに何を使うのか？
サーバサイドを開発するのであればHerokuを使う、AwsのLambdaでサーバレスで構築など色々選択肢がありますが、ライトにアプリを作るのであれば、FirebaseのFirestoreを使うと便利です。Firestoreを使うとFlutterのコードだけでデータの永続化、永続化したデータの画面へのリアルタイムな反映が行なえます。また料金も無料から始めることができます。

# Stream vs Future
Firestoreから値を取得するには、Firestore上のCollectionの変更を監視しリアルタイムに画面に値を反映できる、 StreamとFutureがありますが、Streamを使うことで、Firestoreの強みであるリアルタイム反映を実現できるので、Streamを使っていきます

# 全体アーキテクチャ
登場するクラスが複数あるので最初に、全体の構成図をまとめておきます。
<img width="775" alt="スクリーンショット 2019-12-09 8.57.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32586/633cd5af-ef06-916f-1172-2fef307890bf.png">

FirestoreからDataSourceクラスで値を取得し、StreamProviderを使ってBuildContextに値を注入し、Widgetでその値を使います。またFIrebaseのDocumentを表現するEntityクラスを作成します。

## Firestoreのコレクション構成
Firestoreのコレクション構成は下記のとおりです
<img width="1302" alt="スクリーンショット 2019-12-09 9.02.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32586/44f4f034-9ce2-ed98-9510-01a7ffe645f5.png">


## Entity
FirestoreのDocumentを表すモデルクラスです。コンストラクタ`fromDocumentSnapshot`を用意し、`DocumentSnapshot`からインスタンスを生成できるようにしておきます。


```dart:entity.dart
class Entity {
  final String name;
  
  Entity({@required this.name});

  factory Entity.fromDocumentSnapshot(DocumentSnapshot doc) => Entity(name: doc['name']);
}
```

## DataSource
FirestoreからStrem形式でデータを取得します。Collectionのsnapshotに対して、asyncMapすることで、Firestoreで変更があった内容をリアルタイムに反映できるようになります。snapshotはQuerySnapshotクラスのためdocumentsで実際のコレクションの内容であるドキュメントの配列を取得し、mapでEntityに変換します。

```dart:data_source.dart
class DataSource {

  final db = Firestore.instance;

  Stream<List<Entity>> streamList() =>
      db.collection('hoge').snapshots().asyncMap((snapshot) =>
          snapshot.documents.map((doc) => Entity.fromDocumentSnapshot(doc)).toList());
}
```

## Widget
実際に値を使用するWidgetクラスです。アーキテクチャ1と同様に、Staticメソッドでデータ注入部を作成します。
StreamProviderクラスを使用すると、StreamをBuildContextに埋め込むことができます。initialDataでからの配列をしておくと、データ取得前にProviderからnullが渡り後続の処理がnullになることを防ぐことができます。

実際使用する部分では` Provider.of<List<Entity>>(context)`で`List<Entuty>>`を簡単に取り出すことができます。

```dart:hoge_screen.dart
class HogeScreen extends StatelessWidget {
  static Widget withDependencies() => StreamProvider<List<Entity>>(
        create: (_) => DataSource().streamList(),
        initialData: [],
        child: HogeScreen(),
      );

  @override
  Widget build(BuildContext context) => ListView(
        children: _buildList(context),
      );

  List<Widget> _buildList(BuildContext context) =>
      Provider.of<List<Entity>>(context)
          .map((entity) => Text(entity.name))
          .toList();
}
```
# まとめ
FirestoreとFlutterを使うと簡単にリアルタイムに反映される一覧を作ることができます。アーキテクチャ迷ってる人は是非試してみてください
RetroPie、Raspberry Pi4で動作します

RetroPie、Raspberry Pi4で動作します。確認しました。

## Raspbianの導入
普通に行ってください。
https://www.raspberrypi.org/downloads/raspbian/
Buster Liteで問題ないと思います。
- pi以外のユーザーの作成, sudo権限付与
- ネットワーク周り
- sshなど
- Localeは、utf8, en_usにした。
- sambaはRetroPieでやってくれるので要らんです。
- raspi-configで、GPU割当を私は256にしました。
- GL Driverは、Fake KMSを入れました。
別段どうということはないです。後述のRetro Pie導入時に、input / videoグループへの追加を促されます。追加するほうで、普通に応答。
## Retro Pieの導入
以下の記事を参照してください。
https://www.seeedstudio.com/blog/2019/10/16/build-your-own-raspberry-pi-4-retro-game-console-retropie/
肝心の部分に絞って、平たく手順を書くと、

```
$ cd
$ git clone --branch fkms_rpi4 --depth 1 --single-branch https://github
.com/RetroPie/RetroPie-Setup.git
$ cd RetroPie-Setup
$ git fetch && git checkout fkms_rpi4
$ sudo ./retropie_setup.sh
```

です。セットアップを完了させて、再起動します。で、raspi-configで、GL DriverにFake KMSを選びます。
## Gamepadの設定など
私はLogitech F310を長く愛用しています。configファイルはGoogle検索するといくつか出てきますが、よろしければ以下を。

```
$ cat /opt/retropie/configs/all/retroarch/autoconfig/Logitech\ Gamepad\ F310.cfg
input_device = "Logitech Gamepad F310"
input_driver = "udev"
input_vendor_id = 1133
input_product_id = 49693
input_b_btn = "0"
input_y_btn = "2"
input_select_btn = "6"
input_start_btn = "7"
input_up_btn = "h0up"
input_down_btn = "h0down"
input_left_btn = "h0left"
input_right_btn = "h0right"
input_a_btn = "1"
input_x_btn = "3"
input_l_btn = "4"
input_r_btn = "5"
input_l2_axis = "+2"
input_r2_axis = "+5"
input_l3_btn = "9"
input_r3_btn = "10"
input_l_x_plus_axis = "+0"
input_l_x_minus_axis = "-0"
input_l_y_plus_axis = "+1"
input_l_y_minus_axis = "-1"
input_r_x_plus_axis = "+3"
input_r_x_minus_axis = "-3"
input_r_y_plus_axis = "+4"
input_r_y_minus_axis = "-4"
input_menu_toggle_btn = "8"
input_b_btn_label = "A"
input_y_btn_label = "X"
input_select_btn_label = "Back"
input_start_btn_label = "Start"
input_up_btn_label = "D-Pad Up"
input_down_btn_label = "D-Pad Down"
input_left_btn_label = "D-Pad Left"
input_right_btn_label = "D-Pad Right"
input_a_btn_label = "B"
input_x_btn_label = "Y"
input_l_btn_label = "LB"
input_r_btn_label = "RB"
input_l2_axis_label = "LT"
input_r2_axis_label = "RT"
input_l3_btn_label = "Left Thumb"
input_r3_btn_label = "Right Thumb"
input_l_x_plus_axis_label = "Left Analog X+"
input_l_x_minus_axis_label = "Left Analog X-"
input_l_y_plus_axis_label = "Left Analog Y+"
input_l_y_minus_axis_label = "Left Analog Y-"
input_r_x_plus_axis_label = "Right Analog X+"
input_r_x_minus_axis_label = "Right Analog X-"
input_r_y_plus_axis_label = "Right Analog Y+"
input_r_y_minus_axis_label = "Right Analog Y-"
input_menu_toggle_btn_label = "Guide"
```

## 追記
追記をもごもごと。
- サウンドの検証はこれからです。すなわち現時点で無音でSNESファミスタをプレイしているw
- 動作中のCPU温度は、50-56Cくらいで、そんなに高くない。平型のヒートシンクは付けています。
- /boot/config.txt は、触っていません。
- 心なしか、Pi3時よりも動作が軽く、シャープになった感じがします。GL Driverとサウンド周りの検証は続けていきたいと思います。それと、emulationstationの最新版ですね。

取り急ぎ、以上です。
RPA導入の現実を理想に近づけるために

[RPA (Robotic Process Automation) Advent Calendar 2019](https://qiita.com/advent-calendar/2019/rpa)の11日目です！


※これは、2019年12月9日の「RPA DIGITAL WORLD TOKYO 2019」でお話した内容と同じものです。

# RPAの理想と現実

## RPA導入の理想

RPAは今のところ定型業務の自動化が主流になっています。

RPAにとる業務自動化をすると、例えば以下のような効果が得られます。

* 現場の作業者の時間的負担が減る
* 現場の作業者の心理的負担が減る
* 現場でヒューマンエラーがなくなり、業務が円滑に回るようになる
* 作業者の浮いた時間を他のプロジェクトに回せる
* 社外に健康経営をアピールできる
* コスト削減や売り上げアップが見込める

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/00a3d789-116c-3b1d-02de-8450f71ce515.png)

特に大事なのが、現場担当者の時間的負担の軽減（残業や休日出勤がなくなる！）や、現場担当者の心理的負担の軽減（作業のストレスの緩和）だと思います。

各企業が働き方改革を求められている今、RPAはとても重要な概念になっていると感じます。

## RPA導入の現実

日本では2016年がRPA元年と呼ばれ、そこからRPAは流行しかなり普及してきました。
ほとんどの大企業はRPAを導入または導入検討しているという調査結果もあります。

しかし、実際はRPA導入にいろんな問題が潜んでいます。

例えば、ロボットを作ったはいいけどその後使われなくなってしまったロボや管理者不在の野良ロボが発生したり、書類が不足していてメンテナンスのハードルが上がったり、RPAは魔法の杖などという誤解を抱いていることはとても多いようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/03562ea8-1c02-ca1c-c409-1a97d1039da6.png)


# なぜRPA導入がうまくいかないのか

ほんとにいろいろ様々な理由があると思いますが、そのうちのひとつに**RPAを「0」か「100」かで捉えて、思考停止してしまっていること**があげられると思います。

「RPAを導入する = 業務改善ができる」「RPAを導入しない = 業務改善ができない」この2択で考えてしまうとうまくいきません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/77c5fda6-629c-d9d3-b3b1-1ddb590c79f2.png)


そうではなく、RPAは濃度のように、**濃さ・薄さ**という概念があると思っています。

RPAの効果を最大限享受できている状態を「100%」とすると、

「10%」の効果しか得られない場合もありますし、「50%」の効果が得られることもあれば、「100%」の効果が得られる場合もあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/09546815-65f3-8185-8817-f1abb8b5a9e6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/d7641e50-a7a8-cae6-43e1-25ea30d90c32.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/3983e5c3-93fb-8f77-2d4e-58d8d3a44f02.png)


# RPAは正しく導入すれば輝かしい光を放ってくれる


一時期、RPAブームが起こり様々な企業でRPA導入が一気に進みました。

今は幻滅期に入り、RPA導入が少し落ち着いたように思います。それと同時にうまく導入できた企業と導入できなかった企業の差が明らかに出てきています。

僕が強く思うのは**RPA導入の失敗をRPAのせいにしないでほしい**ということです。


RPAってなんでもできるらしいよ！
⇒ 導入！
⇒ え、全然RPAって使えへんやーん
⇒ RPAはくそだ...

RPAがかわいそうです。。。

僕が思うに、RPA自体が良いか悪いかとかそういう問題ではなく、

まず自社の業務を深く見つめて、向き合って、自社にRPAという手段が最適なのかどうかを考え、RPAをうまく導入できているかどうかを考え直してみてほしいです。

それはこれからRPA導入をしようと健闘している企業、既にRPA導入で成功している企業にも同じことが言えると思います。

RPAはあるべくところにあるべき姿で導入されていれば、必ず輝かしい光を放ってくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/238739/ca54bd48-1269-ff29-6e10-61dd3a1cf1c3.png)


# おわりに

今回はRPA導入の光と闇についてお話ししました。

現在はRPAブームが一旦落ち着いてきていますが、RPA導入に失敗した企業、まだ導入していない企業はたくさんあり、またすぐに業務改善を検討しないと経営が立ち回らなくなりそうと危機感を覚える企業が増えてくると思います。

3年後にはRPAが再ブームする（と勝手に僕が思っている）ので、そのときに、今回の教訓をみんなで活かしていければ、世の中はもっとよくなるのかなぁと思います！
イベントレポート（AWS / インフラエンジニアのスキルアップとキャリア戦略

AWS関連のイベント、セミナーに参加してきましたので、自分に対する備忘も兼ねて要点を纏めておきたいと思います。

・参加イベント
AWS / インフラエンジニアのスキルアップとキャリア戦略
https://engineer_career.splashthat.com/


3人の方の豊富な経験から若手に向けたキャリアについてのメッセージを桑原 宜昭 氏がディスカッション形式で進行するイベントでした。

パネルディスカッションは6つのテーマで構成されていました。（自分は遅刻で参加したので、最初の方は聞けませんでした）
技術についてというよりは考え方についての話がメインだったと思います。

# イベントの概要と主催三者の取り組みについて
遅刻で聞けず。。
塩谷 啓 氏          クラスメソッド株式会社
Gavin Zhou 氏   フリーランス
塚田 朗弘 氏       アマゾン ウェブ サービス ジャパン株式会社
桑原 宜昭 氏       モデレーター 

# パネルディスカッション

## 技術のこと
議題：AWS登場前と後のインフラの変化について、インフラ技術の今後について

Gavin Zhou 氏・・AWS無ければフリーランスできなかった。（個人ではデータセンター入るなどのセキュリティ条件がクリアできない）
塩谷 啓 氏・・IaC流行るのでアプリとインフラの棲み分けなくなる、DevOpsなどのような運用と開発の線引きはしてほしくない。
塚田 朗弘 氏・・今までは一つのことに集中していたが、AWSに入って仕事の幅が広がった。

## お金のこと
議題：インフラエンジニアの給与について、フリーランスの単価について

Gavin Zhou 氏・・正社員（大規模会社）年収：７００万⇒フリーランス：月次１００万

AWS フリーランス中央値単価は８０万


## 組織・チームのこと

塚田 朗弘 氏・・・AWSのベストプラクティスを満たすように動く。

## キャリアのこと
Gavin Zhou 氏 ・・・技術あまり関係ない。３～５年やれば大体一緒になる。メンタル重要。好奇心、過去の技術は捨てる。勉強力。

塩谷 啓 氏・・・	スキルのポータビリティ意識する。どこでも通用するスキルとその現場のルールを分けて意識して身につける。
	
塚田 朗弘 氏・・・　キャリアの今後は分からないので、目の前のことに集中する。常にチャレンジする。

## 若手エンジニアに伝えたいこと
Gavin Zhou 氏 ・・・英語重要。qiita（日本語）ではなくgithub（英語）を見る。ストレス発散重要。
塩谷 啓 氏・・・	変化を楽しもう。	健康は命より大事（笑）。
塚田 朗弘 氏・・・やはり英語。あと応用力。お金についての知識。スタートアップするとき。ストックオプション or 株

## 質問
・インフラ提案を通しやすくするアプローチについて
Gavin Zhou 氏・・とりあえずやってみること。アジャイル開発
塚田 朗弘 氏・・相手の目線に立つ
・GPU導入事例を聞きたい
塚田 朗弘 氏・・・Sagemaker事例は増えている。メルカリ：画像検索や自動運転。
Docker を使用するための最初の設定

手元で空いている端末が SD カードの容量が少ない Raspberry Pi 3 B+ （以下 Raspberry Pi）だけだったので、別途 Ubuntu サーバ上に Docker CE をインストールしておき、 Raspberry Pi には docker-ce-cli だけをインストールして、コンテナを作成できるようにします


## Ubuntu サーバ上での設定

Ubuntu サーバへは Raspberry Pi から SSH でログインできるように事前に準備しておきます

/etc/systemd/system/docker.service.d/override.conf を作成して、--data-root 等の環境にあった設定をしておきます

docker-ce-cli は Raspberry Pi 上で実行しますが、ここでは -H tcp://0.0.0.0:2375 のように直接外部からアクセスするための -H オプションの指定は不要です

```bash

$ cat /etc/systemd/system/docker.service.d/override.conf
[Service]
ExecStart=
ExecStart=/usr/bin/dockerd -H fd:// --data-root /var/lib/docker
```

後は、設定を反映させて docker.service を再起動しておきます

```bash

$ systemctl daemon-reload 
$ systemctl restart docker.service
```


## Raspberry Pi 上での設定

docker-ce-cli の deb を取得して、インストールします

```bash

$ curl -LO https://download.docker.com/linux/raspbian/dists/buster/pool/stable/armhf/docker-ce-cli_19.03.5~3-0~raspbian-buster_armhf.deb
$ sudo dpkg -i docker-ce-cli_19.03.5~3-0~raspbian-buster_armhf.deb
```

これで docker-ce-cli は使用できるようになりましたが、Raspberry Pi 上に Docker daemon はいないためこのままでは使用できません

```bash

$ docker info
Client:
 Debug Mode: false

Server:
ERROR: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?
errors pretty printing info
```

そのため、docker context でエンドポイントが Ubuntu サーバのコンテキストを作成して、そのコンテキストに切り替えます

```bash

$ docker context create --docker "host=ssh://hexa@192.168.1.2" main
main
Successfully created context "main"
$ docker context use main
main
Current context is now "main"
```

接続してコンテナを作成できるか確認してみます

```bash

$ docker container run --rm -it centos:7 bash -c 'cat /etc/redhat-release'
CentOS Linux release 7.7.1908 (Core)
```

接続できました


コンテキストは複数作成しておけますし、環境に合わせて簡単に切り替えが可能なため、覚えておくととても便利です

```bash

$ docker context use sub
sub
Current context is now "sub"
$ docker context ls
dNAME                DESCRIPTION                               DOCKER ENDPOINT               KUBERNETES ENDPOINT   ORCHESTRATOR
default             Current DOCKER_HOST based configuration   unix:///var/run/docker.sock                         swarm
main                                                          ssh://hexa@192.168.1.2
sub *                                                         ssh://ubuntu@192.168.2.2
```
EXCELファイルのすべてのシートをCSVファイルで出力するマクロを作成してみた



EXCELファイルの全シートをシート名のCSVファイル名で出力するVBAのサンプルを作成しました
また使いそうなので、忘れないうちにメモを残しておきます。

```:
Sub outputCSV()

     '出力末尾列
     END_COL = 100

     '出力開始行
     START_ROW = 1

     '出力最大行
     MAX_ROW = 10000
         
     Dim sh As Worksheet
     
     '基底ファイルパス取得
     thisPath = ThisWorkbook.Path
      
     'シート毎のループ
     For sheetIndex = 1 To Worksheets.Count
     
        'シートオブジェクト取得
        Set sh = Worksheets(sheetIndex)
     
        'シート名取得
        sheetName = sh.Name
        
        '出力CSVファイル名生成
        Filepath = thisPath & "\" & sheetName & ".csv"

        '該当シート情報出力
        sh.Activate
        
        '出力CSV作成
        Open Filepath For Output As #1
        
        '1行ごとに行情報を出力
        For tgtRow = START_ROW To MAX_ROW
        
            '１行ごと取得、CSV文字列を生成
            Dim arr: arr = Range(Cells(tgtRow, 1), Cells(tgtRow, END_COL))
            Dim arrRowLine: arrRowLine = WorksheetFunction.Transpose(arr)
            Dim arrColLine: arrColLine = WorksheetFunction.Transpose(arrRowLine)
            '配列を区切り文字カンマ「,」で連結
            lineCsvStr = Join(arrColLine, ",")

            'CSV文字列出力
            Print #1, CStr(lineCsvStr)

        Next tgtRow
        
        'ファイルをClose
        Close #1
     
     Next sheetIndex
     
     MsgBox "CSV出力が完了しました"
   
End Sub

```
EXCELから1行ごとの行情報をまとめて取得する方法は以下を参考にさせていただきました。
https://thom.hateblo.jp/entry/2018/08/02/073503
docker + #rails 環境の bundle install で `No such file or directory (needed by /bundle/gems/mysql2-x.x.x/lib/mysql2/mysql2.so`

bootsnapが悪さをしているだろうか？（bootsnapってなんだっけ？

```
/bundle/gems/bootsnap- y.y.y/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:21:in `require': Error loading shared library libmysqlclient.so.18: No such file or directory (needed by /bundle/gems/mysql2-x.x.x/lib/mysql2/mysql2.so) - /bundle/gems/mysql2-x.x.x/lib/mysql2/mysql2.so (LoadError)
```

対策

bundle ディレクトリを全て削除してからinstallし直し

```
rm -rf .bundle
bundle install
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2825








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Vue.jsで開発をはじめよう

#選んだ教材はこれ

`超Vue JS 2 入門 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)`
>https://www.udemy.com/course/vue-js-complete-guide/

選んだ理由としては、
・評価が高かったこと
・必要条件が自分に合っていたこと
・タイトル見て、この教材1つでいいんだ〜って思ったから
以上の3点です。

#なぜVue.jsを学習しようと思ったのか

Railsの学習が一段落したところで、フロントエンドのフレームワークにも挑戦したいと感じていました。
フロントの開発は目に見えて反映されるので、僕自身やっていて楽しかったです。

その中で最近流行り？で比較的入りやすそうなVue.jsに決めました。
正直フレームワークに関しては、ReactでもAngularでも良かったと思います。
サクッと決断して、サクッと取り組み始めることが大事だと思っています。

<br>
Vue.jsでアプリ作って公開するでぇ〜！！
お楽しみに！！

<br>
ではまた！
【解決済】node.js v12.13.1で "expo start"コマンドで起動するとエラーを吐いてしまうバグ



"Unterminated character class. Run CLI with --verbose flag for more details."

ゼロ環境でExpoを導入しようとしたのでnode入れろとかC++入れろとか挙句の果てにはexpoの最新版だとインストール出来ないって怒られやっとインストール出来て起動出来ると思ったらよくわからないエラーに遭遇したので書き留めて置きます。

追記:node.js v12.13.2にて修正確認とれました！よかった:)

##環境
expo 3.5.0
node.js LTS版(12.13.1)

## 原因と解決策

nodeの12.10前後のバージョンが悪さをしてるみたいなのでダウングレードもしくは修正済のバージョンにアップグレードするのが安定しそうでしたが自分は入れ直したりアップグレードする手間が惜しかったでエラー箇所を修正しました。エラーと修復手順を見る感じだと文法の記述ミスなのかな。

##エラー箇所の修復手順

###手順1 原因のファイルを開きます

"Expoのプロジェクトを作成したフォルダ"\node_modules\metro-config\src\defaults\blacklist.js

###手順2 エラー原因箇所を修正して保存します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535916/173bbc9d-ce4c-bc72-b11e-aa033fa7541a.png)

var sharedBlacklist = [
  /node_modules[\/\\]react[\/\\]dist[\/\\].*/,
  /website\/node_modules\/.*/,
  /heapCapture\/bundle\.js/,
  /.*\/__tests__\/.*/

###手順3 Power Shellでプロジェクト起動"expo start"

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/535916/48e18916-0b4e-fe9b-3c74-31ebfc12ffa0.png)

###参考資料
https://github.com/facebook/metro/issues/453#issue-comment-box