OmniAICreator/Qiita-1.07M huggingface dataset:
単体テストに関するメモ

# メモ
### まえがき
単体テストに関する本や記事を読んでも、なんで単体テストが推奨されているのか分からないことが多くてモヤモヤするので、モヤモヤを記事にすることで気を紛らわそうと思う。
ついでに、自分の中で単体テストはこういう感じでやっていこうと思う内容をメモしておく。

### 前提
この記事では単体テストというのはテストコードを書いてそれを動かすテストのことを指すことにする。
Webアプリの単体テストであることが前提。

### 単体テストに関する疑問
・単体テストの殆どが実は無意味なのでは？とこっそり思ってる人は多いのでは。
・なんでも単体テストするのは微妙だけど、これだけは単体テストしておくと良いよっていうノウハウが欲しい。
・単体テストコードを見ても何を網羅してるかサッパリ分からないんだけど、何かいい方法はないのだろうか。
・なぜ単体テストを推奨する記事が多いのか？単体テストを疑問視する人が多いけど、記事を書くのが単体テストを効果的に行うコツを知っている技術力の高い人ばかりだから？それとも、自分が知らないだけで単体テストってのはみんな効果を感じながら当たり前のように書いてるのだろうか。
・よく、リファクタリングしたときに単体テスト書いてると嬉しいって書いてあるの見るけど、リファクタリングしたらテストコードあったとしても怖いから結局、結合以降のテストもやるから意味は薄いような気がするし、そもそもリファクタリング殆どしないんだけど。
・効果低い（バグが見つからないのにコスト高い）単体テストよりも結合テストの自動化を頑張った方がいいんじゃないだろうか。

### 単体テストはこういう感じでやっていこうと思う（暫定）
バリデーションと境界値と計算のテストと実際にDBアクセスするテストは単体テストして、その他は効果ないような気がするので基本的には単体テストしない。
テストコード見ても何を網羅してるのか分からん問題はチームの方針でこれを単体テストするって決めてレビューでそれを網羅できてるか確認すればいいのかも。単体テストのレビューとかしたこともされたこともないけど。。

# 調査
### 単体テストのレビューに関して

Javaであれば、JavaDocを見やすくすればある程度はレビューできそう。
レビューというか、自分でテストしてて、境界値テストをどこまで網羅してるのか分からなくなるのを防ぎたい。

http://park.ruru.ne.jp/ando/work/autoUt5/ja/index.html

### フロントエンドのテストに関する記事

複雑なロジックや重要な機能のテストを優先的に書くのはなるほどと思った。

https://zenn.dev/koki_tech/articles/a96e58695540a7

### テストのメリット（Railsチュートリアルより引用）

>・テストが揃っていれば、機能停止に陥るような回帰バグ（Regression Bug: 以前のバグが再発したり機能の追加/変更に副作用が生じたりすること）を防止できる。
>
>・テストが揃っていれば、コードを安全にリファクタリング（機能を変更せずにコードを改善）できる。
>
>・テストコードは、アプリケーションコードから見ればクライアントとして動作するので、アプリケーションの設計やシステムの他の部分とのインターフェイスを決めるときにも役に立つ。

### テストを書くタイミング（Railsチュートリアルより引用）

>・アプリケーションのコードよりも明らかにテストコードの方が短くシンプルになる（=簡単に書ける）のであれば、「先に」書く
>
>・動作の仕様がまだ固まりきっていない場合、アプリケーションのコードを先に書き、期待する動作を「後で」書く
>
>・セキュリティが重要な課題またはセキュリティ周りのエラーが発生した場合、テストを「先に」書く
>
>・バグを見つけたら、そのバグを再現するテストを「先に」書き、回帰バグを防ぐ体制を整えてから修正に取りかかる
>
>・すぐにまた変更しそうなコード（HTML構造の細部など）に対するテストは「後で」書く
>
>・リファクタリングするときは「先に」テストを書く。特に、エラーを起こしそうなコードや止まってしまいそうなコードを集中的にテストする７

### 自動テストの対象

・特定のURLにアクセスしたら200が返却されること
・特定のリンクをクリックしたら特定の画面が表示されること
・アプリケーションのHTML構造を調べて、レイアウトの各リンクが正しく動くかどうかチェック
　（railsの場合、「rails generate integration_test」）
scalaで競技プログラミングを入門する方法　～標準入力～

# scalaで競技プログラミングを入門する方法　～標準入力～


この記事では競技プログラミングでscala使いたいけど、標準入力の仕方がわからない方向けの記事となります。
> すでにこの手の記事はありますが、いろいろな問題に適応できなかったため、執筆する運びになりました。


## scalaの標準入力とJavaの標準入力
scalaでは通常、標準入力を

```scala
io.StdIn.readLine
```
などで行うことが出来ます。
しかし、~~これはあまり使いやすくなく~~ Javaの標準入力のほうが競技プログラミングでは書きやすいです。
なのでJavaの標準入力を使うために

```scala

val sc = new java.util.Scanner(System.in)
```
でインスタンス化しておきます。



それでは、問題別に標準入力の方法を紹介していきます。

## Int型

https://atcoder.jp/contests/abc163/tasks/abc163_a

このような問題では、Int型の整数を一つ入力します。
やり方は

```scala
var r = sc.nextInt()
```

このようになります。


https://atcoder.jp/contests/abc164/tasks/abc164_a
こちらの問題では、Int型の整数を複数個入力します。
やり方は

```scala
var s , w = sc.nextInt()
```

とcomma(,)を挟むことによってスペースで区切られた整数を一つずつ宣言して入力できます。

## String型

https://atcoder.jp/contests/abc166/tasks/abc166_a
この問題では、String型の文字列を一つ入力します。
やり方は

```scala
var s = sc.next()
```

このようになります。

問題は見つけられませんでしたが文字列複数個のときもIntのときと同様に

```scala
var s , w = sc.next()
```

とするとスペースで自動で区切られ２つの文字列を入力できます。

## Array型

https://atcoder.jp/contests/abc169/tasks/abc169_b

この問題では配列を使って複数個、整数を入力します
やり方は

```scala
var a = Array.fill(n)(sc.nextInt)
```

このように、fillを使って埋めます１つ目のカッコに要素数、２つ目に先程の標準入力を書きます


https://atcoder.jp/contests/abc157/tasks/abc157_b

こちらは二次元配列を使う問題です
残念ながら二次元配列ではあまりスマートに書くことが出来ません

```scala

var a = Array.ofDim[Int](3, 3)
for (i <- 0 until 3){
  a(i) = Array.fill(3)(sc.nextInt())
}
```

このようにfor文を使います。
はじめに```Array.ofDim[Int](3, 3)```を使って要素数3,3の二次元配列を作ります。
その後、forを回し、先程の一次元配列の要領で入力させます。

### scalaでのList

Listはあまり計算速度が早くありません。
例えばfillを使って埋めるときなど、配列の２倍ほどの速度がかかってしまいます。
なのでなるべくListではなくArrayを使っていきましょう。


## 終わりに
現在atcoderではscalaで書いている人があまり多くはありませんしかし、scalaはpythonなどと比べ早い言語であり、C++などに比べ標準関数が豊富です。
scalaの関数とJavaの関数が使えることで、できることの幅が広がり、よりスピーディーによりスタイリッシュにコーディングすることが出来ます。

#### みんなもscalaやろうぜ！！！
【Vue.js】コンポーネントで props を用いてデータを渡す方法

# はじめに
Vue.js を学習していてコンポーネントの props でのデータのやりとりに少しつまづいたので書きます。

# この記事で書くこと

Vue.js のコンポーネント props を使って  親 → 子
親Vueインスタンスから子コンポーネントにデータを渡す2つの方法

1. 静的なデータの渡し方
2. 動的なデータの渡し方

# 1.コンポーネントに静的なデータを渡す

コンポーネントにデータを渡すには、props というオプションを使う。関数を定義するときの引数（仮引数）に似ている。
実際のデータはコンポーネントに属性として渡す。これは関数で言う所の引数（実引数）を渡して関数を呼び出すことに相当する。

```main.js
// 子コンポーネントを定義
const nameComponent = {
  props: ['name'],
  // テンプレート内で props name に渡されたデータを利用
  template: `
    <div>{{ name }}</div>
  `,
};

// 親コンポーネントを定義
new Vue({
  el: '#app',
  // コンポーネントの登録
  components: {
    // '登録名(HTMLで呼び出す名前)': 登録するコンポーネント名
    'name-component': nameComponent,
  },
});
```
ここでは props を ['値'] という配列の形で定義したが、オブジェクトの形で定義して、値を検証するためのルール（バリデーション）を定義することもできる。
詳しくはリファレンスを参照。
[プロパティ - Vue.js](https://jp.vuejs.org/v2/guide/components-props.html)

テンプレート内での記述

```index.html
<div id="app">
  <!-- Vueインスタンスに登録したコンポーネントの呼び出し -->
  <name-component name="マツダ"></-component>
</div>
```
このHTMLタグ要素内の name="マツダ" の部分で  という値をコンポーネントの props にセットしている。

ブラウザでは

マツダ

と渡したデータが表示される


# 2.コンポーネントに動的なデータを渡す

```main.js
const likeComponent = {
  props: ['firstNumber'],
  // propsの値を直接変更するのではなく、propsにはあくまで初期値を設定し、
  // 値を変更する際はdataを経由して変更する
  data() {
    return { count: this.firstNumber };
  },
  // methods で data の値 count の値に 数値を1ずつ足していく関数を定義
  methods: {
    countUp() {
      this.count += 1;
    },
  },
  // テンプレート内は必ずルートを一つに限定する
  // 「@」は「v-on」の省略形 ボタンをクリックで methods で定義した関数を呼ぶ
  template: `
    <div>
      <button @click="countUp"> 
        いいね!!
      </button>
      <div>{{ count }}</div>
    </div>
  `,
};

new Vue({
  el: '#app',
  components: {
    // コンポーネントの登録
    // '登録名(HTMLで呼び出す名前)': 登録するコンポーネント名
    'like-component': likeComponent,
  },
});

```
propsの値を直接変更するのではなく、props firstNumberには初期値としてセットする。
その上で、ボタンをクリックするとpropsではなくdataの値を変更するようにする。

以下の記述は悪い例↓↓

```main.js

// 悪い例 main.js コンポーネントのみ抜粋
// このように直接 props のデータを変更しようとするとエラーがでる。

const likeComponent = {
  props: ['firstNumber'],
  methods: {
    countUp() {
      this.firstNumber += 1;
    },
  },
  template: `
    <div>
      <button @click="countUp"> 
        いいね!!
      </button>
      <div>{{ firstNumber }}</div>
    </div>
  `,
};
```

記述方法の注意点ですが、

コンポーネントの props：likeComponent とキャメルケースで記述
テンプレートの属性名（コンポーネントを登録するとき）：like-Component とケバブケースで記述

```index.html
<div id="app">
  <!-- v-bindディレクティブで関連付け（「:」は「v-bind」の省略形） -->
  <like-component :first-number="10"></like-component>
</div>
```
:first-number="10"でpropsに数値として値を渡すことができる。

表示はこのようになり、「いいね!!」ボタンを押すと10に数字が１ずつ加算されていく。

<img width="553" alt="スクリーンショット 2020-07-10 19.13.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621162/761c8e2d-099f-d9b3-68e3-100f6166195a.png">



# 最後に

記事をお読みいただきありがとうございます！！
Vue.js も JavaScript も楽しいですが難しい部分も多々！

誤り等々ありましたら、ご指摘等いただければ幸いです!
SonarqubeのGolang対応

https://qiita.com/fake-deli-ca/items/dd21a5b86b5dfdd7cb0a

元々上記でなんでSonarqubeのVerUp対応をしたかというと、golang対応が6.4では対応していないからである。
https://docs.sonarqube.org/latest/analysis/languages/go/

というわけで対応。sonar-scannerは元々対応済み前提。

```sonar.properties
##################################################################
# Properties file for sonar-scanner
# See https://docs.sonarqube.org/display/SONAR/Analysis+Parameters
##################################################################

# Server
sonar.host.url=https://sonarqube.foo.jp/

# Required metadata
#FIXME ここから
sonar.projectKey=golang
sonar.projectName=golang Project
sonar.projectVersion=0.0.1

sonar.sources=.
sonar.exclusions=**/*_test.go,**/vendor/**

sonar.tests=.
sonar.test.inclusions=**/*_test.go
sonar.test.exclusions=**/vendor/**
#FIXME ここまで
sonar.sourceEncoding=UTF-8
# sonar.language=py
sonar.go.coverage.reportPaths=reports/coverage.out
sonar.go.tests.reportPaths=reports/test.json
```

こんな感じのpropertiesファイルを作成して

```Makefile
.PHONY: test
test:
	go test ./... -coverprofile=reports/coverage.out -json > reports/test.json
```

test時にこんな感じで出力すればOK

仮にJenkinsだとすると、こんな感じのStageを追加すればよい。(尚、`startsWith`に意味はない)

```Jenkinsfile
       stage('Sonarqube Analysis') {
            steps {
                script {
                    // 現状はmasterへのmarge時のみ
                    if (env.BRANCH_NAME.startsWith('master')) {
                        scannerHome = tool 'scanner'
                        withSonarQubeEnv('sonar') {
                            sh "${scannerHome}/bin/sonar-scanner"
                        }
                    } else {
                        echo "Skip Sonarqube analysis."
                    }
                }
	    }
        }
```
【HTML】Google Mapの埋め込み

# はじめに
Google MapからHTMLをコピーして貼り付けることでサイトにGoogle Mapを埋め込むことができる。

## 実装方法

**1. Google Mapで目的地を検索 → 共有をクリック**

![スクリーンショット 2020-07-09 18.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596879/f898f772-4597-fc19-ddf2-da6963a9f2c4.png)


**2.地図を埋め込むをクリック → HTMLをコピー**
地図のプレビュー画面が表示される

![スクリーンショット 2020-07-09 18.09.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596879/95fbdb30-0abb-8c68-70a8-f9cba03708a8.png)

Mapのサイズを選ぶこともできる
![スクリーンショット 2020-07-09 18.14.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596879/22d0874c-b5d1-6758-b1d8-cb83466b350f.png)

|      　　　　　　  | 表示サイズ |
|:----------------:|:------------------|
| 小             |横 400px × 縦 300px|
| 中             |横 600px × 縦 450px|
| 大             |横 800px × 縦 600px|
| カスタムサイズ    |自由にカスタマイズ（px単位）|

↓ タグ内の width height でもサイズを調整することが可能

```sample.html
<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d3240.827853398542!2d139.76493611522864!3d35
.68124053757879!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2
!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2
!1sja!2sjp!4v1594286431753!5m2!1sja!2sjp"
 width="600" height="450" frameborder="0"
 style="border:0;" allowfullscreen="" aria-hidden="false"
 tabindex="0"></iframe>
```

**3.コピーしたHTML(iframeタグ)を埋め込みたいHTMLにペーストして完成**
![スクリーンショット 2020-07-09 18.23.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596879/b58a9241-30f0-72bc-3af7-48d5e701a79c.png)


## 赤いピンの位置を調整

↓ iframeタグを下記のように書き換える

```sample.html
<iframe
src="https://www.google.com/maps?
output=embed&z=15&ll=35.6812405,139.7649308&q=東京駅"
width="600"
height="450"
frameborder="0"
style="border: 0;"
allowfullscreen=""
aria-hidden="false"
tabindex="0"
/>
```
これらの値を変えることで地図をカスタマイズすることができる

| iframeタグ内の記述 　　　　　　　　　　| 調整部分   　　　　　　　  |  　　　　     |
|:-----------------|:------------------|:------------------|
| &z=15           　　　 | 縮尺 |  0〜23で調整可        |
| &q=住所・建物名    |住所・建物名 |                |
| &ll=緯度,経度     　　　| 地図の中心点 |Google Mapで検索した地点のURLに緯度・経度が記載されている      |

↓ 赤線：緯度 / 青線：経度
![スクリーンショット 2020-07-10 12.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596879/917da980-21b9-31fe-6685-856e3ec4df88.png)


ピンの位置を右下に移動することができた！
![スクリーンショット 2020-07-10 12.27.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596879/c331664b-1453-b780-e8cb-db989bad6fc9.png)
Scrapyの環境導入手順

#1.Scrapyを導入

画面の**new**ボタンを押下（uploadボタンの横）
![scrapy1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/d63ceb3f-f2f9-26c8-2cd2-41877881e1be.png)

以下のように表示されますのでPython３をクリック
![scrapy2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/032bcaa1-fb09-b188-c4ad-5127149445ff.png)

こんな画面が表示される
![scrapy3.1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669260/6cb2bff3-28e9-3956-0a08-f3ccea97ad35.png)

表示されたら以下文章を入力
```!pip install scrapy```

以下のように pip でインストールするのみです。
インストールが完了すると scrapy コマンドが使えるようになります

上記入力後、▶︎I　Runボタンを押下
```scrapy version
Scrapy 1.5.1```

#終わりに

これでクローリングをするための導入手順は終わりです。
クローリングはクラウドワークスなどの副業サイトなどでもたくさんの募集があったりなど
これからの日本の働き方に適したスキルだと思うので是非、学習してみてはいかがでしょうか。
Kinx アルゴリズム - 騎士巡回問題

# Kinx アルゴリズム - 騎士巡回問題

## はじめに

**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)。「プログラム＝アルゴリズム＋データ構造」。アルゴリズムの実装例をご紹介。

元ネタは「C言語による（30年経っても）最新アルゴリズム事典」。今回は騎士巡回問題です。

* 参考
    * 最初の動機 ... [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
        * 個別記事へのリンクは全てここに集約してあります。
    * リポジトリ ... [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
        * Pull Request 等お待ちしております。  

最新アルゴリズム事典にはこういうのも結構載ってる。パズル的な。

このアルゴリズムも Kinx 初期の頃に書いてテストに使った。やはり二重配列の制御と再帰処理あたりで。お世話になりました。

## 騎士巡回問題

* https://ja.wikipedia.org/wiki/%E3%83%8A%E3%82%A4%E3%83%88%E3%83%BB%E3%83%84%E3%82%A2%E3%83%BC

Wikipedia より
> ナイト・ツアー（Knight's Tour）は、チェスを使った数学的パズルの一種。「騎士の巡歴（じゅんれき）」「桂馬拾い」[1]とも呼ばれ、チェスをモチーフにしたパズルの中でも昔からよく知られている。チェスボード上のナイトを移動させ、64マス全てを一回ずつ通過させる。

## ソースコード

```javascript
const N = 5;    // N x N

var board = [],
    dx = [ 2, 1,-1,-2,-2,-1, 1, 2 ],
    dy = [ 1, 2, 2, 1,-1,-2,-2,-1 ];
var count = 0;
var solution = 0;

function printboard() {
    System.print("\nSolution %d\n" % ++solution);
    for (var i = 2; i <= N + 1; i++) {
        for (var j = 2; j <= N + 1; j++) System.print("%4d" % board[i][j]);
        System.print("\n");
    }
}

function test(x, y) {
    if (board[x][y] != 0) return;
    board[x][y] = ++count;
    if (count == N * N) printboard();
    else for (var i = 0; i < 8; i++) test(x + dx[i], y + dy[i]);
    board[x][y] = 0;  count--;
}

function knight() {
    for (var i = 0; i <= N + 3; i++)
        for (var j = 0; j <= N + 3; j++) board[i][j] = 1;
    for (var i = 2; i <= N + 1; i++)
        for (var j = 2; j <= N + 1; j++) board[i][j] = 0;
    test(2, 2);
}

knight();
```

## 結果

```
Solution 1
   1   6  15  10  21
  14   9  20   5  16
  19   2   7  22  11
   8  13  24  17   4
  25  18   3  12  23

Solution 2
   1   6  11  18  21
  12  17  20   5  10
   7   2  15  22  19
  16  13  24   9   4
  25   8   3  14  23

Solution 3
   1   6  11  16  21
  12  15  20   5  10
   7   2  13  22  17
  14  19  24   9   4
  25   8   3  18  23

...(省略)

Solution 304
   1  10   5  16  25
   4  17   2  11   6
   9  20  13  24  15
  18   3  22   7  12
  21   8  19  14  23
```

## おわりに

これはほとんど C 言語版と一緒の形で書けている。

こうしてみると、最初の頃（半年ほど前）は、この手のソースコードを使ってテストしてたんだなー。こういうのがちゃんと動くのを見られると嬉しいよね。

ではまた、次回。
Red Hat OpenShift on IBM Cloud(VPC): Worker Nodeの更新によってIPアドレスは変わるかどうか検証してみた

#1. はじめに

https://cloud.ibm.com/docs/openshift?topic=openshift-vpc-subnets#vpc_basics
>When you create a cluster, you can specify only one existing VPC subnet for each zone. Each worker node that you add in a cluster is deployed with a private IP address from the VPC subnet in that zone. **After the worker node is provisioned, the worker node IP address persists after a reboot operation, but the worker node IP address changes after replace and update operations.**

な、なにー！？更新をすると、Worker nodeのIPアドレスが変わるかもしれないだと！？
ということで、本当に変わるかどうか、それによってService(type:LoadBalancer)の実体　であるVPC Load Balancerがどのように影響を受けるのかを確認してみた。

#2. 更新前情報

Worker NodeのIPアドレスは以下の通り。

- 10.240.0.4 <-これを更新
- 10.240.0.5 
- 10.240.64.4 <-これを更新
- 10.240.64.5
- 10.240.128.4 <-これを更新
- 10.240.128.5


<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/cddc8cbb-80f6-c66e-5958-f783cb13c3de.png">
<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/8ee0c6dd-bbcb-9cc4-f7d4-42963b72fdcd.png">


#3. 途中経過
<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/67c18f88-b120-e68b-7e4b-0d6bdb20c99f.png">

<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/3a15ab63-d47c-928b-3132-26c657838ae1.png">


#4. 最終状態

IPアドレスは変わった!

- **10.240.0.4 -> 10.240.0.10**
- 10.240.0.5 
- **10.240.64.4 -> 10.240.64.11**
- 10.240.64.5
- **10.240.128.4 -> 10.240.128.10**
- 10.240.128.5

<img width="1278" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/b718665d-c1a5-15ba-ce5a-d438590a043c.png">

VPC LoadBalancerに登録されているノードも自動的に更新された！（VPC load balancerはあくまでReconciliation Loopの中で管理されており、利用者が手動で変更するものではない）

<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/88faa3f6-e6a4-a666-3515-9499f3cff70f.png">

#5. 残りのWorker Nodeも更新した結果

残りのノードのIPアドレスも変更されて、VPC Load Balancerの割り振り先も変更された。

- 10.240.0.4 -> 10.240.0.10
- **10.240.0.5 -> 10.240.0.11**
- 10.240.64.4 -> 10.240.64.11
- **10.240.64.5 -> 10.240.64.12**
- 10.240.128.4 -> 10.240.128.10
- **10.240.128.5 -> 10.240.128.11**

<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/4eb3150c-8a38-64b7-8911-9bf6d409169e.png">

<img width="1279" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62127/3c5e5f72-70d7-4881-3512-8c06f5fd67fb.png">
[CentOS][Gem]Error: Your version of SQLite (3.7.17) is too old. Active Record supports SQLite >= 3.8. 解決法





# 起こったこと
Rails 6 project で `gem 'sqlite3'` を使用して `bundle install` すると
SQLite が古い とエラー

``` './rails-proj/'
$ bundle install
...
Your version of SQLite (3.7.17) is too old. Active Record supports SQLite >= 3.8.
...
Failed
```


OSの sqlite3 が古いのかと思い、
こちらを参考に 自分で最新sqlite3 (3.8.11) をインストール し
https://qiita.com/8zca/items/175efb0612070530d186

option 指定で `gem install`
も
エラーは変わらない。


```
# 自分でインストール
$ /opt/sqlite/sqlite3/bin/sqlite3 --version
3.32.3 
$ bundle config build.sqlite3 --with-sqlite3-include=/opt/sqlite/sqlite3/include \
   --with-sqlite3-lib=/opt/sqlite/sqlite3/lib
$ bundle exec gem install sqlite3
...
Failed
```

# 原因
どうやら sqlite3 をコンパイルする際にOSの `sqlite.x86_64` nativeライブラリが必要のようで
そのversion が古いよう

```
$ yum list | grep sqlite
...
sqlite.x86_64                            3.7.17-1.fc21                @/sqlite-3.7.17-1.fc21.x86_64
...
```

Yum の標準repo で登録されてるsqlite version は古いので `yum install sqlite-*` で入らない。


```
$ yum --showduplicates list sqlite
..
Available Packages
sqlite.i686                                                 3.7.17-8.el7_7.1                                                base
sqlite.x86_64                                               3.7.17-8.el7_7.1                                                base

```

# 解決策


自分でrpmからインストールする
(最新version は glibc が必要で CentOS7は未対応そうなので
とりあえず sqlite v3.8.11)

```
$ wget https://kojipkgs.fedoraproject.org//packages/sqlite/3.8.11/1.fc21/x86_64/sqlite-devel-3.8.11-1.fc21.x86_64.rpm

$ wget https://kojipkgs.fedoraproject.org//packages/sqlite/3.8.11/1.fc21/x86_64/sqlite-3.8.11-1.fc21.x86_64.rpm

$ sudo yum install sqlite-3.8.11-1.fc21.x86_64.rpm sqlite-devel-3.8.11-1.fc21.x86_64.rpm

$ yum list | grep sqlite
Installed Packages
sqlite.x86_64                                               3.8.11-1.fc21                                                   @/sqlite-3.8.11-1.fc21.x86_64

```

そして `bundle install` も通った

``` './rails-proj/'
$ bundle install
...
Installed!
```

# 参考
https://qiita.com/8zca/items/175efb0612070530d186

https://www.reddit.com/r/linuxadmin/comments/c9hy5w/trying_to_upgrade_sqlite_3717_to_version_38_on/
venv（Python）

# venv とは何か

プロジェクト毎に Python の実行環境を変えたい、あるいはローカル環境を汚したくないなど Python の実行環境を分離する時に使われるのが `venv`。Python のバイナリやライブラリの依存関係を任意のディレクトリ配下にまとめ、`PATH` を上書きするなどして、プロジェクト個別の仮想環境を容易に作成できる。

```sh
## インストール (Ubuntu20.04)
$ sudo apt install python3-venv
$ python3.7 -m venv PJ001
$ ls PJ001/
bin  include  lib  lib64  pyvenv.cfg  share

## 仮想環境作成
$ source PJ001/bin/activate
(PJ001) $ 

## 抜けるとき
(PJ001) $ deactivate
```

`bin` には仮想環境の Python 実行ファイルや他パッケージの実行ファイルが配置される。`lib` と `include` には仮想環境で使うライブラリファイルが配置される（`activate` 後に追加した新しいパッケージは `lib/pythonX.Y/site-packages/` 配下にインストールされる）仮想環境を抜けるときは `deactivate` を実行。

# virtualenv と venv の違い

昔からある同様のツールに `virtualenv` がある。Python 3.4 以降であれば `venv` を使うことを推奨とのこと。
【flex-box】  html css フレキシブル対応　レイアウト　基本

##【ゴール】
flex-box忘れていたので、振り返り

##【コード】

####何はともあれ、「display: flex;」を親要素に指定

####flex-wrap: wrap;
＊折り返し
＊HTMLにboxとcontentクラスを用意


![スクリーンショット 2020-07-10 18.15.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/455982f4-f650-ec6b-0cdf-aa8f71eb9e69.png)

```css.hoge.css

.box{
  background-color: lightgreen;
  min-height: 200px;
  widows: 100%;
  display: flex;
  flex-wrap: wrap;
}

.content{
  margin: 10px;
  height: 100px;
  width: 30%;
  background-color: green;


```

####justify-content: space-between;

![スクリーンショット 2020-07-10 18.22.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/a0dfde23-13a4-b36d-f002-8ac9e96ce632.png)

```css:hoge.css
.box{
  background-color: lightgreen;
  height: 200px;
  widows: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content{
  background-color: green;
  height: 100px;
  width: 100px;
}

```



####justify-content: center;
＊横軸の位置

![スクリーンショット 2020-07-10 18.09.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/b864faa8-b5b5-dd5b-27ef-4ddcd821fe00.png)


```css.hoge.css

.box{
  background-color: lightgreen;
  height: 200px;
  widows: 100%;
  display: flex;
  justify-content: center;
}

```

####align-items: center;
＊縦軸の位置

![スクリーンショット 2020-07-10 18.09.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/620689/44678bc2-3008-b662-6959-a502e6073efc.png)


```css.hoge.css

.box{
  background-color: lightgreen;
  height: 200px;
  widows: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

```

抜けていたので、復習含めて書きました。
bootstrapを使えばあまり使わずすみますが、覚えていて損はないかと

##【合わせて読みたい】
■ 【Rails new】Ruby on rails アプリケーション作成
https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583

■ 【devise】 rails g devise:install ができない、、時こそ！！
https://qiita.com/tanaka-yu3/items/8a2002921cda080907f8

■ 【メソッド集】　rails メソッド　まとめ　基礎　随時追加
https://qiita.com/tanaka-yu3/items/89abad875187494bec53
C# DataGridView　スクロールすると残像で文字がつぶれる

#C# DataGridView　スクロールすると残像で文字がつぶれる

うーん。。。原因は結局分からなかった。
でもとりあえず解決はした。デザイナー.csに書かれていた以下の行を削除したところスクロールしても残像はなくなった。

            this.Column1.DefaultCellStyle = dataGridViewCellStyle1;

なぜに・・・？！

少し思い当たるのはコラムごとに色々設定値をいじっていた＋データグリッドビュー全体の設定値も色々試しにいじっていたので、何か矛盾する設定値を設定していたことが原因のような気もする・・・
あんまり腑に落ちないけど。まぁ今詳しく調べる時間もないので（言い訳）とりあえず。
困ったらここ消そ。

またちゃんと調べて追記しろよ自分～
Azure の試験 AZ-XXX をオンラインで受ける際の準備

たまたま機会があって、Azure の試験 AZ-900、AZ-204 を受けてきました。
試験は会場で受験するか、自宅でオンラインで受験するかを選ぶことができます。コロナウイルスの問題もあり、私は自宅で受験しました。

[AZ-900](https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-900)
[AZ-204](https://docs.microsoft.com/ja-jp/learn/certifications/exams/az-204)

私はAzure を普段から活用しているので試験の内容自体は特に問題なかったのですが、下調べせずにオンラインで試験を受験しようとして当日かなり慌てることになってしまいましたので、個人的にハマったことを共有します。

## 試験前日までにやること

## システムテストを受けて環境周りのチェックをする

試験環境や PC 環境が問題いないかを確認するためのテストがあります。
試験の 24 時間前までにうけて、問題ないかを確認しましょう。
24時間以内ならば試験をキャンセルやリスケも可能です。

当然といえば当然ですが、ヘッドセットなどは禁止です。システムテスト的には通ってしまうようですが当
日は禁止なので注意です。

- [オンライン試験について - システム テストを受験する](https://docs.microsoft.com/ja-jp/learn/certifications/online-exams#take-a-system-test)

## 試験当日にやること

### ある程度身だしなみを整えておくこと

試験中は試験官の方に Web カメラ越しに監視されますので、
気にされる方は。ある程度は身だしなみに気を付けておいたほうが良いです。

### 机の周りをきれいにしてサブディスプレイも片付ける

カンニング防止のために、机回りや部屋の中の撮影が求められます。サブディスプレイも禁止です。
電子機器やコード類、筆記用具などの余計なものは手の届かない場所に片付けましょう。


### 持ち物を準備する

- 身分証明書
  運転免許証があればそれで大丈夫です。

- スマートフォン
  試験の開始前に、机回りや身分証明書を撮影するのに使います。

- 飲み物
  試験管の方に伝えておけば飲み物を飲むこともできますので、必要ならば準備しましょう。
  私はマグカップのコーヒーを持ち込みました。
Jekyll を Windows でインストールしてテーマを読み込むときの注意点！！  tzinfo が必要!!

##Jekyll を Windows でインストールしてテーマを読み込むときの注意点
```powershell:cmd
PS C:\Users\----\Documents\blog\beautiful-jekyll-master> bundle exec jekyll serve
  fatal: not a git repository (or any of the parent directories): .git
  Configuration file: C:/Users/hideki/Documents/blog/beautiful-jekyll-master/_config.yml
  Dependency Error: Yikes! It looks like you don't have tzinfo or one of its dependencies installed. In order to use 
  Jekyll as currently configured, you'll need to install this gem. The full error message from Ruby is: 'cannot load such 
  file -- tzinfo' If you run into trouble, you can find helpful resources at https://jekyllrb.com/help/!
  jekyll 3.8.7 | Error:  tzinfo
```
こんなエラーが出たとしたら以下のようにbeautiful-jekyll-master/Gemfileを書き直してください。


```:beautiful-jekyll-master/Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

gem 'tzinfo', '~> 2.0'
gem 'tzinfo-data', '~> 1.2020', '>= 1.2020.1'

gemspec
```
これでまた

```powershell:cmd
PS> bundle install 
```
すればうまくいくはず。
##体験したエラー
上のエラーが出たので、tzinfoを追加でgem install したけどうまくいかず、
tzinfo-data がwindowsだと必要らしいのでgem install したけどうまくいかず、
最後に上の方法で一括でインストールするとうまくいきました。
laravel(npm)で追加したjsモジュールを外部のjsで使う

laravelはnpmによるjavascriptのモジュールのパッケージングを利用できるが
ソース修正の度に`npm run dev(prod)`でコンパイルしなければならないし
画面毎のjsファイルなどを配置したい場合などファイルが複数になる場合、
パッケージングを分けることはできるが、管理がめんどいので外部jsを呼べるようにする。

`layouts/app.blade.php`に`@yield('inc-javascript')`を追加
あと、jsの読み込みはすべてdeferをつける。

```html:layouts/app.blade.php
<html>
...
<head>
...
  <!-- Scripts -->
  <script src="{{ asset('js/app.js') }}" defer></script>
  @yield('inc-javascript')

...
</head>

```

各ページのbladeファイルで`@section('inc-javascript')`でjsファイルを指定する

```html:index.blade.php
@extends('layouts.app')
@section('inc-javascript')
<script src="{{ asset('/js/hogehoge.js') }}" defer></script>
...
@endsection
```


### app.js内のモジュールをを使う
`resources/js/bootstrap.js`でrequireする。
必要ならグローバル変数に格納する。

```javascript:bootstrap.js
require('moment');
globals.moment = require('moment');
window.moment = require('moment');
var moment = require('moment');
```
`npm run dev(prod)`で`public/js/app.js`にパッケージされる。
【超ド級初心者用】MacでphpMyAdminを使えるように

### 実現したかったこと
当方、超ド級のMac初心者かつphp初心者。非エンジニアです。勉強中です。ApacheやHomebrewなどの仕組みがいまいちわかっていないせいか、サイトに書いてあることを参考にやっても全然表示されずに途方にくれました。丸2日もかかったしまったことを書いておきます。

MacBookでphpMyAdminをブラウザで表示できるようにしたいのですが、いろんなサイトを真似してやってもうまくいきません。

### 発生している問題・エラーメッセージ
アドレスバーにlocalhostを入力するとIt works!は表示されます。

phpMyAdminをHomebrewでインストールしました。

chromeのアドレスバーにphpMyAdmin.local:8080やlocalhost/phpMyAdminを入力してもログイン画面が出てこず、下記のように表示されます。

> Not Found
The requested URL was not found on this server.

Apacheのエラーログを見ると
/private/var/log/apache2/error_log


``` 
[Fri Jul 10 14:49:48.931992 2020] [core:notice] [pid 39120] AH00094: Command line: '/usr/sbin/httpd -D FOREGROUND'
```

### MySQLの設定
以下を参考に設定しました。
https://tofusystem.work/programming-lesson/howto-mysql-phpmyadmin-setting-for-mac/

```
$ mysql --version
mysql  Ver 8.0.19 for osx10.15 on x86_64 (Homebrew)
```
インストールはできているかと。

```
$ mysql.server start
Starting MySQL
 SUCCESS! 

2020-07-10T07:02:12.6NZ mysqld_safe A mysqld process already exists
```
MySQLを起動するとSUCCESS！が表示されますが、続いて最後の一行も出てきます。この時点であかん気はしていますが、とりあえず起動できているものとして次のMySQLの設定に進みました。

> 
MySQLはrootパスワード無しでインストールされます。
下記コマンドでrootパスワードなどの初期設定をしましょう。
途中でyesまたはnoで答える部分があるので、それについても記載しています。
基本的にはyesまたはYで答えればOKです。

これに従い設定しました。

MySQLにログインも成功しているようです。

```
$ mysql -uroot -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.19 Homebrew

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

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

mysql> 
```

続いてhomebrewでphpmyadminをインストール。インストール時に次のようなメーセージが出てくるのでそれに従い瀬一定するとのことだったので、やってみました。httpd.confが見当たらなかったので、https://qiita.com/yukibe/items/8896a91007cc5a1dfc45を参考にしました。
> 引用テキストadd this at the end of
your /etc/apache2/httpd.conf for instance) :

ということで、上のディレクトリにhttpd.confが見つかったので、最後の行に以下のAlias〜</Directory>をコピーして貼り付けしました。


```
==> Caveats
To enable phpMyAdmin in Apache, add the following to httpd.conf and
restart Apache:
    Alias /phpmyadmin /usr/local/share/phpmyadmin
    <Directory /usr/local/share/phpmyadmin/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        <IfModule mod_authz_core.c>
            Require all granted
        </IfModule>
        <IfModule !mod_authz_core.c>
            Order allow,deny
            Allow from all
        </IfModule>
    </Directory>
Then open http://localhost/phpmyadmin
The configuration file is /usr/local/etc/phpmyadmin.config.inc.php
```

上記の表示によルトこれでApacheを再起動すればphpMyAdminがブラウザから表示されるはず？！

```
$ sudo apachectl restart
```

なのに表示されない・・・



と思ったら表示されました。
書きながら手順通りにもう一度やっていたらできてしまいました。

何が原因だったのかもわからないけど、とりあえずできたのでOKですかね。

初心者にはよくある現象ですかね。同じようにやっているつもりでもどこかでミスをしていたのでしょう。こういうことが私自身はよくあるのでとりあえず記録として残して置くことが重要ですね。

他にも同じように困っている人の参考になればと思います。
変数と関数のネーミング

# 変数・関数のネーミング

今更ですが変数・関数のネーミングについてリーダブルコードを元にまとめました。
上から順番に重要だと感じている順です。

## リーダブルコード 4 章

### 一貫性

「同じデータ」は同じ変数名にしましょう。
(プロジェクト単位で良いです)

```php
// a.php
$studentname = 'yamada';
// b.php
$username = 'tanaka';
```

↓↓↓

```php
// a.php
$studentname = 'yamada';
// b.php
$studentname = 'tanaka';
```

## リーダブルコード 8 章

### 説明変数

「処理」(の結果)を説明する変数

```php
if (substr($str, 0, strcspn($str,'(')) === 'root') {... }

// ↓↓↓

$username = substr($str, 0, strcspn($str,'('))
if ($username === 'root') {... }
```

### 要約変数

状態とか、式を端的に説明する変数

```php

if ($user->plan === 'gold') {... }

// ↓↓↓

$isGoldPlan = $user->plan === 'gold';
if ($isGoldPlan) {... }
```

## リーダブルコード 3 章

### 誤解されない変数名

ニアイコール、とにかく詳しく書いてね

## リーダブルコード 9 章

変数のスコープを考慮した名前にしましょう!

こんなクラスがあったとして、

```php
class User
{
	private $id;
	
	function getUserId()
	{
		return $this->id;
	}
}
```

getUserId は、使われるときに冗長に見える

```php
// user と UserId で user がかぶっている
$user->getUserId();
```

↓↓↓

```php
// 関数に user がなくても、user id ってだいたい分かる
$user->getId();
```

**ただし!!!**

変数に入れるときはきちんと説明を入れて上げる必要がある。

```php
// (id はきっと order.id とか、 admin.id とかいろいろあるから)
$userid  = $user->getId();
$orderid = $order->getId();
```

### 定数名

定数名が適当だと..

```php
define('STATUS', 20);
```

ユーザーのステータス? 注文のステータス? 管理者のステータス?
↓↓↓

```php
define('USER_STATUS', 20);
```

定数はより詳細な名前にしましょう!

## その他

変数で説明するより、関数で説明したほうがわかりやすい(完結)です

```php
$isGoldPlan = $user->plan === GOLD_PLAN;
if ($isGoldPlan) {... }

if ($user->isGoldPlan()) {... }

if ($user->isPlan(GOLD_PLAN)) {... }
```
カエサル(シーザ)暗号を Python で解読

# はじめに
CTF で手っ取り早くカエサル暗号を復号する Python プログラム作った話
Python には Rot13 (13文字ずらし) は実装されているが、それ以外では自作プログラムを走らせる必要がある

<img width="814" alt="result" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669543/337902ed-3c0b-a380-5401-f133503800e9.png">

こんな感じのプログラムを作る

**参考**
Rot13 がよく使われるのは、アルファベットが26文字であることに由来する
復号も暗号化も、同じ変換でできるからだ

```Python:
import codecs
s = codecs.decode("ここに文字", "rot13")
```

#1 基本

文字⇄ASCIIの変換には `ord()` と `chr()`関数を使う

###1-1 文字→ASCII
```Python:
n = ord("ここに文字")
```

###1-2 ASCII→文字
```Python:
s = chr(ここにASCIIコード)
```

---
**参考**
CTF で使いそうな文字

| 文字 | 文字コード |
|:----:|:--------:|
| A | 65 |
| B | 66 |
| ︙ | ︙ |
| Z | 90 |
| a | 97 |
| ︙ | ︙ |
| z | 122 |
| { | 123 |
| } | 125 |

---


#2 Python ソースコード

さっそく作っていく
今回のプログラムの仕様は以下

- コンソールで暗号を受け取る
- 一旦、ASCIIコードに変換し、1字ずらし〜25字ずらしを全て求める
- 特定のキーワードに一致するものを有力候補として表示

```Python:CaeserCipher.py

def caesar(data, num):

    Ans = []

    #ASCIIコードに変換
    for i in range(len(data)):

        Temp_ASCII = ord(data[i]) 
        New_ASCII = Temp_ASCII - num #numだけずらす

        if 97 <= Temp_ASCII <= 122:  #a~z のASCIIコード

            if New_ASCII < 97:
                Ans.append(chr(123 - (97 - New_ASCII)))

            else:
                Ans.append(chr(New_ASCII))

        elif 65 <= Temp_ASCII <= 90:  #A~ZのASCIIコード

            if New_ASCII < 65:

                Ans.append(chr(91 - (65 - New_ASCII)))

            else:

                Ans.append(chr(New_ASCII))

        else:
            Ans.append(chr(Temp_ASCII))

    Temp_Ans = "".join(Ans)


    if "CTF" in Temp_Ans or "is" in Temp_Ans or "are" in Temp_Ans:
        judge = True  # {CTF, is, are}のいずれかを含む
    else:
        judge = False

    return Temp_Ans, judge


if __name__ == "__main__":

    data = input("Enter Your Cipher>> ")
    Chosen_Ans = []
    Defeated_Ans = []
    Chosen_Shift_Count = []
    Defeated_Shift_Count = []

    for i in range(1, 26):
        Temp_Ans, judge=caesar(data, i)

        if judge:
            Chosen_Ans.append(Temp_Ans)
            Chosen_Shift_Count.append(i)
        else:
            Defeated_Ans.append(Temp_Ans)
            Defeated_Shift_Count.append(i)

    if len(Chosen_Ans) != 0:

        print("\n有力")
        for i in range(len(Chosen_Ans)):
            print("{}文字ずらした:\t{}".format(Chosen_Shift_Count[i], Chosen_Ans[i]))

        print("\nその他")
        for i in range(len(Defeated_Ans)):
            print("{}文字ずらした:\t{}".format(Defeated_Shift_Count[i], Defeated_Ans[i]))

    else:

        print("有力候補なし")
        for i in range(len(Defeated_Ans)):
            print("{}文字ずらした:\t{}".format(Defeated_Shift_Count[i], Defeated_Ans[i]))
```
DI コンテナは自分で new しないでフレームワークを探そう

思ったより↓の記事がバズった。
[DI (依存性注入) って何のためにするのかわからない人向けに頑張って説明してみる](https://qiita.com/okazuki/items/a0f2fb0a63ca88340ff6)

## 自分で DI コンテナを new しないで

自分で DI コンテナのインスタンスを new して管理して、自分でコンテナからインスタンスを取得するようなコードは出来れば書かない方がいいです。
世の中に対応しているフレームワークがきっとあるので、それを使いましょう。車輪の再発明は勉強にはなるけど実際の製品コードでは書かない方がいいので気を付けましょう。

因みに勉強のために DI コンテナを土台にしたオレオレフレームワークを組んでみるのは楽しいです。

### C# の場合

C# だと ASP.NET Core を使っていれば、フレームワーク自体がどっぷりと DI コンテナを前提とした作りになっています。

[ASP.NET Core での依存関係の挿入](https://docs.microsoft.com/ja-jp/aspnet/core/fundamentals/dependency-injection?view=aspnetcore-3.1)

C# で Web アプリ (Web API, gRPC, SPA(Blazor)) を作るときは、ASP.NET Core の流儀に従いましょう。
流儀に従っていれば DI コンテナを使うように自然になりますし、その方が便利です。

ASP.NET Core は `Startup.cs` クラスの ConfigureServices メソッドの引数に渡されてくる IServiceCollection に色々なクラスを登録していきます。
ここで登録したクラスは Web API や Web ページを表すクラスに DI したりもできるし、コンテナ内にはフレームワークが提供する便利機能を持ったクラスも登録されているので、それを使う場合もコンストラクターの引数で受け取って使うことが出来て便利です。

WPF/UWP/Xamarin.Forms は Prism というフレームワークを使うと DI コンテナまわりの機能もついてくるのでそれを使うのがいいと思います。

### Java 系の場合

Java 系言語の場合は Spring Boot がいいんですかね？最近 Java 系言語を追いかけてないのですが…。
15 年前に Spring Framework や Seasar2 あたりで DI コンテナに初めて触れたので、懐かしいです。

## 前の記事にはてなブックマークいっぱい

[はてなブックマークのコメント](https://b.hatena.ne.jp/entry/s/qiita.com/okazuki/items/a0f2fb0a63ca88340ff6)をいくつかピックアップしてみたいと思います。

----

> ちょっとしか読んでないけど、技術の歴史を踏まえないと正しい理解を持てないという典型に見える。
> new Object()→Factoryパターン→DIという発展の中の最初の矢印しか説明してないのでDIを理解してない人に見えてしまう

説明のときにはしょったのは事実。説明時には別にいらないと思ったので。

----

> うしてテスト用途が主という誤った考えが生まれるんだよなぁ。
> コンポーネントとコンポーネントの結合を疎にし、短くて簡素で柔軟なプログラムを生むのに使うのが正しいのだけど/それにつけてもDJイベントの楽しさよ

静かな方が好きなので DJ のいるイベントは煩い印象なのでそんなに好きじゃない…。

コンポーネントとコンポーネントの結合を疎にするのは、実装クラスへの直接的な依存ではなくインターフェースを間に挟むことでお互いが実装に依存しないようになることで実現できる類のものに感じます。
短くて簡素なプログラムはメソッド分割やクラス分割。

柔軟なプログラムも上の手段を使って、うまく設計した結果得られるもの。

そういう風に設計されたクラスのインスタンス組み立てるためには DI コンテナ使うと楽出来るし、単体テストもしやすくなるので好き。
個人的には単体テスト可能なコードを書く方が、設計が素晴らしいコードを書くのよりは優先度が高め。優先度が高いだけで設計が素晴らしいコードは大好きです。

----

> いや、違くない？この説明だとFactoryでいいという話になるよね(筆者もテストのMockingが容易ならDIいらないと言ってしまってるのでその認識っぽい)。
> 重要なのは依存を隠蔽することだよね。どっかで記事書こう

記事楽しみにしてます。
単体テストがしやすいコードを書いていく（もしくは保守性の高い設計を突き詰める）と DI コンテナを使わないと凄くメンドクサイので使ってる認識。
世の中のフレームワークは、割と DI コンテナを前提に作られていて、それは単体テストがしやすい保守性の高いコードを作るための現時点での最適解だという共通の認識があるからだと思ってます。

（別の具象クラスへの）依存を隠匿するためには C#/Java などではインターフェースを挟んだり外部から実装を注入してもらうようにしないといけないから、それを省力化するための DI コンテナがあるように感じてる。

省力化が必要なほど大変じゃないなら DI コンテナいらないと思ってるけど現状は DI コンテナを使うのがベストだと思っています。

#### 追記

コメントの人が記事を書いてくれました！多謝！

[DIコンテナのテスト以外での利点について](https://qiita.com/crexista/items/606976d941728a90b42b)

----

> 著者のプロフィールにちょっと引いてしまった。愛が重すぎる。

これ重いかなぁ？プログラミング楽しいよ。C# はいい言語だよ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70288/a4532aae-2e7a-fa93-e732-d93dc546aaef.png)
【2020年版】 Monaca/iOSでアプリが正常に動作しない/Appleから却下される人【現在進行形】

# 最新のiOSで正常に動作しない場合は次を確認しよう！

## きちんとWkWebViewでファイルを読み込めるようにしてますか？
そのままWKWebViewに切り替えても、pushPageは動作しませんよ。動くようにpluginの導入が必要です。
[参考元ページ](https://qiita.com/kishisuke/items/df8b20a78e9d6843ab01)
※なんでもっと大々的に周知してくれないんだろう（涙

## WkWebViewに切り替えただけでは、ダメですよ。
iOSのビルド環境の設定は iOS 5.1.1 / Xcode 11.3にしてますか？してないと弾かれますよ。

## APPのスクリーンショットをAppLaunchpadで生成しても、登録できない！
png画像が登録できない場合は、gimpとかで一回読み込みをして保存してみよう。

## アプリの上に隙間(スペース）が表示される
[こちらを参考にしてください！](https://ja.stackoverflow.com/questions/4997/monaca-angularjs-%E3%81%AEios%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7-%E3%83%84%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%81%AE%E4%B8%8A%E3%81%AB%E7%A9%BA%E7%99%BD%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86)

## タブバーの下にスペースが表示される
[こちらを参考にしてください！](https://teratail.com/questions/257540)
PHP 関数の戻り値とは？

#はじめに
これは初心者エンジニアがフルスタックエンジニアを目指す備忘録である:point_up:

#目次
⑴ 戻り値とは
⑵ 戻り値がない場合
⑶ 戻り値がある場合と戻り値がない場合の違い
#⑴戻り値とは

前回投稿した sum関数を使って説明していきたいと思う。
コードは以下になる。

```
<?php
// 1〜$max までを足して結果を返す関数
function sum($max) {
    $result = 0;

    // $i は1から始まり、$max より大きくなるまでループする
    for($i = 1; $i <= $max; $i++ ){
        $result += $i;
    }

    return $result;
}

// 関数を実行
echo sum();
?>
```
今回で言うと戻り値と言うのは

```
return $result;
```
の部分になる。

これは return のあとに書かれた$resultが、関数が実行された結果として出力している意味となる。

つまりこの return のあとに書かれた値を 戻り値 と呼び
sum関数の結果が returnされて $resultに入っていくというイメージになる。

#⑵ 戻り値がない場合

ちなみに今回実装したsum関数は戻り値があるが、
例えば、

```
<?php
// 1から100までを順番に表示する関数
function print_number(){

    for($i = 0; $i < 100; $i++){
        echo $i;
    }
}
?>
```
のように、返り値のない関数もある。
これには意味があるので次で紹介していく

#⑶戻り値ある場合と戻り値がない場合の違い

戻り値がある場合と戻り値がない場合の違いについて説明していきたいと思う。

どちらとも関数の結果を処理する点は同じである。

⇩　唯一の違いは

リターンで戻り値を受け取って表示させるかどうかである

⇩　では、リターンの意味はどの様な所に意味があるのか

▶︎ 戻り値がある場合
戻り値がある関数は、関数内で処理した結果を返すことができる。その為受け取った結果をさらに計算したり、文字列とくっつけたり、することができる。

▶︎ 戻り値がない場合
戻り値がない関数は関数内で処理した結果を返すことができない。

正直これだけの事だということですね。
うん。簡単です。

以上で終了です。
kintoneユーザーと開発ベンダーを繋ぐ「リクシェア」　利用方法

ノベルワークスではkintoneユーザーと開発ベンダーを繋ぐ「リクシェア」という
シェアリングサイトを運営しています。

![8f1ad314996a60f37628ee87672fffaf1ce56434ab230698919a5c3c1d1d33f231fc3328e20b3147856b3349add4d989268ca56303c1207f3661d0879d9457c0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/49ce18a6-85ff-b761-9a78-357a21dbe439.png)
【リクシェア】https://reqshare.com/

リクシェアを作った背景は<a href="https://qiita.com/novelworks/items/19bbe3c364bb93b5ba88">こちら
</a>
#リクシェア利用方法

###１．会員登録
会員登録に必要なものはメールアドレス、ユーザー名、パスワードのみ！
1分で登録が完了します！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/3dfdfc44-3939-b31a-3a93-4984bd0cfe26.png" width="70%">

###２．いいね！する

リクシェアにはkintoneを使っていくなかで**「ここもっとこうなって欲しい」**
**「こんな機能が欲しい」**というような投稿が沢山あります。
その中で共感した投稿にいいね！を押すことができます。

たくさんいいねが集まると、**無償でkintoneプラグインとして開発**が
開始されますので、共感できる投稿がないか、チェックをしてみてください！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/6d237c3f-5301-723e-ab2a-9f995f9771d2.png" width="70%">

###３．投稿する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/dc8b9d0a-7522-a0ad-1418-2604613eb2a9.png" width="70%">
欲しい機能に関しての投稿がないときには新しく投稿ができます！
その課題、実はみんなが思っていることかもしれません。
投稿することで課題をシェアしていきましょう！

####投稿方法

まずは投稿するをクリック
ステータスは下書き、公開申請どちらかを選択。
思いついたときに下書きで保存しておくのもいいですね！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/31ff8aa4-73c8-fa66-019c-4416eaf8a7d1.png" width="60%">
書き方（決まりはないので自由に書いていただいてOKです！）

◎参考◎
タイトル：「サブテーブルの内容を一括自動生成」といった欲しい機能の内容
サブタイトル：「毎回手入力するのが面倒」といったその機能が欲しいと思った理由
解決したい課題：「今まではサブテーブルフィールドへ手入力でタスクや作業内容を入力してます。定型的な内容なので、予め登録した内容で、サブテーブルへ一括で登録したいです。」
今の課題、具体的な利用イメージなどを教えてください！

これを受けてベンダー（ノベルワークス）がどう解決するか、実現できる機能を追記して
リクシェアに公開します。
いいねが沢山集まれば、開発決定です！

####いいねが集まらないと、開発がはじまらない・・
→facebook、twitterでシェアできる機能がありますので、ぜひ拡散してください！！
同じ課題を持った仲間をどんどん増やしましょう！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/dda29e98-95cc-f38c-37b7-5ca55ee72f20.png" width="60%">

###４．プラグインを利用する
リクシェアから誕生したプラグインを現在８つ公開しています。
すべて**1か月無料で利用可能**なので是非利用してみてください！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605275/a697d608-adec-ad4b-5bd3-514fd7863f41.png" width="60%">

プラグインの詳細画面から詳しいマニュアルの確認、ダウンロードが可能です！

##無料会員募集中です！

会員登録後、紹介した機能をご利用いただけます。
ぜひご登録をお願いします！
無料会員登録は<a href="https://reqshare.com/">こちら</a>から

##アンケートを実施しております！
リクシェアをよりよいサービスにしていく為、アンケートを実施しています。


アンケート回答は<a href ="https://novelworks.chobiit.me/public/p_add_record.html?appId=609">こちら</a>から
頂いたご意見はどんどん反映させていきますのでどうぞご協力下さいm(__)m
Firestoreのバックアップをローカルのemulatorにインポートする

## 手順
1. firestoreのデータをエクスポート
2. エクスポートされたデータをCloudStorageからダウンロード
3. firestoreエミュレーターにダウンロードしたデータをインポートして起動する

## 1. firestoreのデータをエクスポート
くわしくは[こちら参照](https://firebase.google.com/docs/firestore/manage-data/export-import?hl=ja)

```shell
gcloud firestore export gs://{{project_name}}.appspot.com/ --async
```

## 2. エクスポートされたデータをCloudStorageからダウンロード
詳しくは[こちら参照](https://cloud.google.com/storage/docs/downloading-objects?hl=ja#gsutil)

```shell
$ gsutil -m cp -R gs://{{project_name}}.appspot.com/ ./store_export
```


# 3. firestoreエミュレーターにダウンロードしたデータをインポートして起動する
問題はここ。
ローカルでエミュレーターのデータをエクスポート/インポートに関しては[こちらに](https://firebase.google.com/docs/emulator-suite/install_and_configure?hl=ja#export_and_import_emulator_data)あるがデータ形式をみたところCloudStorage上も同じようなので、同じようにファイルを指定すればインポートできましたが、ダウンロードしたそのままではできなかったため備忘録を残そうと思います。

## firebase-export-metadata.jsonを作成
importオプションで指定するディレクトリ直下に作成します。
エミュレーターのエクスポートで生成されるファイルをベースにしています。
エミュレーターエクスポートした場合のファイル内容

```firebase-export-metadata.json
{
  "version": "8.4.3",
  "firestore": {
    "version": "1.11.4",
    "path": "firestore_export",
    "metadata_file": "firestore_export/firestore_export.overall_export_metadata"
  }
}
```

## jsonのpathとmetadata_fileを編集
pathは`all_namespaces`が直下にあるディレクトリパス。
metadata_fileは`.overall_export_metadata` のファイル名を指定する。

**補足**
overall_export_metadataのファイル名がそのままだと`:`が使われておりmacのfinderだと`/`になるので注意

## インポートオプションを指定して起動

```shell
$ firebase emulators:start --only firestore --import {{firebase-export-metadata.jsonがあるディレクトリ}}
```
【Nuxt.js】Nuxt文法編：@submit

🎈 この記事はWP専用です
https://wp.me/pc9NHC-p9

# 前置き
今回はイベントハンドラ の一種、
@submitについて🌟

基本的な記法や
イベントの種類、
イベント修飾子などは
こちらで既に解説済みです🎀👩‍🏫
https://wp.me/pc9NHC-ht

@submitの使用例を
主に解説していきます💡
# @submit
## イベントの種類

MDN
submitイベントは<form>が
送信された時に発生します📤
formタグ自身につくもので、
form内のinputやbuttonでは発生しません💡
consoleでエベントの種類を
確認してみましょう✅ 👀

JavaScriptイベントハンドラ
--| submitイベント/
----| @submit

![submitEvent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/cd6c127c-a2eb-0609-2017-b73715ed08cb.png)

SubmitEventの中の
typeがsumit(@submit)とありますね🌟

### コード

.preventについては後述します。

```index.vue
<template>
 <div class="page">
   <form @submit.prevent="submit">
     <input
       type="text"
       placeholder="テキストを入力"
     >
     <button type="submit">送信</button>
   </form>
 </div>
</template>

<script>
export default {
 methods: {
   submit () {
     console.log(event)
   },
 },
}
</script>
```

## 使用例

こちらの記事が分かりやすいかと思います🌟
Step3: ログイン機能の実装
https://wp.me/pc9NHC-ik

firebaseAuthを使用して、
emailとpasswordを
submitしています🎈🧸

### コード

```index.vue
<template>
<div class="page">
  <form
    class="form"
    @submit.prevent="login"
  >
    <label class="label">
      <span class="label">
        email
      </span>
      <input
        class="input"
        type="text"
        v-model="email"
      >
    </label>
    <label class="label">
      <span class="label">
        password
      </span>
      <input
        class="input"
        type="password"
        v-model="password"
      >
    </label>
    <button
      class="button"
      type="submit"
    >
      Login
    </button>
  </form>
</div>
</template>

<script>
import firebase from '~/plugins/firebase'

export default {
data() {
  return {
    email: '',
    password: ''
  }
},
methods : {
  login() {
    firebase.auth().signInWithEmailAndPassword(this.email, this.password)
    .then(user => {
      console.log('成功！')// eslint-disable-line
    }).catch((error) => {
      alert(error)
    });
  },
}
}
</script>
```

# .prevent修飾子
🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-p9
Flutter × Firestore まとめ

## FlutterのFirebaseへの接続
[FlutterアプリにFirebaseを追加する](https://firebase.google.com/docs/flutter/setup)

## 注意
cloud_firestoreのインポートの記述や、StreamBuilderのロード中,データがない時の記述は無視していますので、その点ご了承ください。

## Firestoreデータ取得
userというコレクションからデータを取得する想定。

```dart:main.dart
List<String> _emails;
@override
void initState(){
  fetchUserData();
}
void fetchUserData() async{
  QuerySnapshot snapshot = await Firestore.instance.collection('user').getDocuments();
  for(var i = 0; i < snapshot.documents.length; i++){
    _emails.add(snapshot.documents[i].data['email']);
  }
}
```

## Firestoreデータ取得(ドキュメントID指定)
userというコレクションからデータを取得する想定。
documentIdに取得したいドキュメントIDを指定します。

```dart:main.dart
String _email;
@override
void initState(){
  fetchUserData();
}
void fetchUserData() async{
  DocumentSnapshot snapshot = await Firestore.instance.collection('user').document(documentId).get();
  _email = snapshot.data['email'];
}
```

## Firestoreデータ取得して表示
userというコレクションからデータを取得し表示する想定。
StreamBuilderで更新を監視。

```dart:main.dart
@override
Widget build(BuildContext context) {
  return StreamBuilder(
    stream: Firestore.instance.collection('user').snapshots(),
    builder: (context, snapshot) {
      return ListView.builder(
        itemCount: snapshot.data.documents.length,
        itemBuilder: (context, index) {
          return Text(snapshot.data.documents[index].data['email']);
        },
      );
    },
  );
}
```

## Firestoreデータ取得して表示(ドキュメントID指定)
userというコレクションからデータを取得し表示する想定。
documentIdに取得したいドキュメントIDを指定します。
StreamBuilderで更新を監視。

```dart:main.dart
@override
Widget build(BuildContext context) {
  return StreamBuilder(
    stream: Firestore.instance.collection('user').document(documentId).snapshots(),
    builder: (context, snapshot) {
      return Text(snapshot.data["email"]);
    },
  );
}
```

## Firestoreデータ追加
userというコレクションにデータを追加する想定。
setData()メソッドでデータを追加します。

```dart:main.dart
onPressed: () {
  Map<String, dynamic> insertData = {
    'username': 'engineerhikaru',
    'email': 'example@gmail.com',
  }
  Firestore.instance.collection('user').document().setData(insertData);
}
```

## Firestoreデータ更新
userというコレクションのデータを更新する想定。
updateData()メソッドで指定したドキュメントIDのデータを更新します。
documentIdに更新したいドキュメントIDを指定します。

```dart:main.dart
onPressed: () {
  Map<String, dynamic> updateData = {
    'username': 'engineerhikaru',
    'email': 'example@gmail.com',
  }
  Firestore.instance.collection('user').document(documentId).updateData(updateData);
}
```

## Firestoreデータ削除
userというコレクションのデータを削除する想定。
delete()メソッドで指定したドキュメントIDのデータを削除します。
documentIdに削除したいドキュメントIDを指定します。

```dart:main.dart
onPressed: () {
  Firestore.instance.collection('user').document(documentId).delete();
}
```

## まとめ
この記事が良いと思った方は、LGTMをしていただければ嬉しいです！
フォローも是非お願い致します(^^)
ZshでAWS Profileの可視化と切り替えの容易化

# 本投稿では

Zshを用いてAWS Profileの可視化と切り替えを容易にする方法を説明します。
設定すると以下のようにAWS Profileを可視化・切り替えできるようになります。

複数のAWSルートアカウント/リージョン上にリソースを作成する必要がある方の参考になれば幸いです。
また、もっと良い方法をご存知の方、ぜひ教えてください。よろしくお願いします。

![awsp-example.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510218/64c882b0-f0d0-4c76-a1b5-cd1d6d05d424.gif)

# 前提
Zshが設定済であることを前提に説明します。

# 設定方法

## 1. AWS Profileの可視化

[spaceship-prompt](https://github.com/denysdovhan/spaceship-prompt)を利用することで容易にAWS Profileを可視化できます。

以下のコマンドでインストール、
※npm以外にもインストール方法があります。詳細は[公式ページ](https://github.com/denysdovhan/spaceship-prompt)をご確認ください。

```
$ npm install -g spaceship-prompt
```

`~/.zshrc`に以下の設定を追記した後、

```
autoload -U promptinit; promptinit
prompt spaceship
```

`~/.zshrc`を読み込めば、設定完了です。

```
$ source ~/.zshrc
```

後は以下の通り、環境変数を設定すると

```
$ export AWS_PROFILE=hoge
```
以下のようにAWS Profileがpromptに表示されます。
<img width="1391" alt="スクリーンショット 2020-07-10 16.20.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510218/e2ccc8e1-39dc-0f75-4096-bfa2a1e6eeed.png">


## 2. AWS Profileの切り替え容易化

[peco](https://github.com/peco/peco)をインストールします。
※homebrew以外にもインストール方法があります。詳細は[公式ページ](https://github.com/peco/peco)をご確認ください。

```
$ brew install peco
```


`~/.zshrc`に以下の設定を追記した後、

```

alias awsp=aws_profile_update

function aws_profile_update() {

   PROFILES=$(aws configure list-profiles)
   PROFILES_ARRAY=($(echo $PROFILES))
   SELECTED_PROFILE=$(echo $PROFILES | peco)

   [[ -n ${PROFILES_ARRAY[(re)${SELECTED_PROFILE}]} ]] && export AWS_PROFILE=${SELECTED_PROFILE}; echo 'Updated profile' || echo ''

}
```


`~/.zshrc`を読み込めば、設定完了です。

```
$ source ~/.zshrc
```

以下の通り、コマンドを実行すると

```
$ awsp
```

動画のように`~/.aws/config`の中からAWS Profileを選択、切り替えできます。


## 3. 余談

動画とpromptの表示が違うと思った方がいらっしゃるかもしれません。
私はspaceshipを以下の通り、カスタマイズしています。

```
SPACESHIP_TIME_SHOW=true
SPACESHIP_KUBECONTEXT_SHOW=false
SPACESHIP_DIR_PREFIX=' '
SPACESHIP_AWS_PREFIX=' '
SPACESHIP_EXEC_TIME_PREFIX=''
```


spaceshipは`~/.zshrc`に環境変数を追加するだけで容易に項目の追加/削除やprefixの変更等ができます。
詳細はspaceshipの[Options](https://github.com/denysdovhan/spaceship-prompt/blob/master/docs/Options.md)をご確認ください。