OmniAICreator/Qiita-1.07M huggingface dataset:
【Laravel】Laravel routing設定&Controller・View作成

#①routing設定

エディタで下記のファイルを開く

```
routes/web.php
```

routing設定ファイルに下記のコードを追加

```php:routes/web.php
// 公式
Route::get(‘ルート’, 'コントローラ名@メソッド名');
// 例
Route::get('tests/test', 'TestController@index');
```

#②Controller作成

▪︎ディレクトリ移動

```
公式）
$ cd /Applications/MAMP/htdocs/プロジェクト名
例）
$ cd /Applications/MAMP/htdocs/laravel_test
```

▪︎Controller作成

```
（公式）
$ php artisan make:controller [コントローラ名]Controller
（例）
$ php artisan make:controller TestController
```

▪︎Controllerファイル確認
エディタで下記のファイルがあることを確認

```
app/Http/Controllers/TestController.php
```

▪︎Controllerにメソッド追加

```php:app/Http/Controllers/TestController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    //
    public function index() {
        return view('tests.test');
    }
}
```

#③View作成

▪︎Viewファイル作成
下記の通りViewファイルを作成

```
（公式）
resources/views/[view名].blade.php
（例）
resources/views/tests/test.blade.php
```

▪︎Viewファイル編集

```php:resources/views/tests/test.blade.php
test
```

#④サーバ起動

▪︎ディレクトリ移動

```
公式）
$ cd /Applications/MAMP/htdocs/プロジェクト名
例）
$ cd /Applications/MAMP/htdocs/laravel_test
```

▪︎サーバ起動

```
$ php artisan serve
```

▪︎アクセス
下記にアクセスする
http://127.0.0.1:8000/tests/test
【RSpec】authenticate_user!を使用したときのRSpecへの副作用をFactoryBotで解消する

#概要

Railsアプリのコントローラーで「authenticate_user!」を、
ログイン済みでないとアクセスしてほしくないアクションに設定しました。

そしてRSpecでコントローラーのテストを実施しようとした際に、
普通にアクションごとにテストコードを書くと「authenticate_user!」の影響でエラーになります。

それをFactoryBotを使って回避する方法を備忘録としてまとめます。


#Gemをインストール

group :development, :test do
  gem 'factory_bot_rails'
  gem 'rspec-rails'
end


#rails_helper.rbを編集

``` rails_helper.rb
RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods
  config.include Devise::TestHelpers, type: :controller
end
```

#spec/factories/user.rbを作成

``` user.rb
FactoryBot.define do
  factory :user do
    name                    { "testname" }
    email                   { "aaa@gmail.com" }
    password                { "00000000" }
    encrypted_password      { "00000000" }
  end
end
```

#spec/controllers/posts_controller_spec.rbを作成

今回は例でposts controllerのnewアクションに実装します。

``` posts_controller_spec.rb
require 'rails_helper'

describe PostsController do
  describe 'GET #new' do
    # ユーザを生成
    before do
      user = FactoryBot.create(:user)
      # 作ったユーザでログイン
      sign_in user
    end

    it "ビューに正しく遷移するか" do
      get :new
      expect(response).to render_template :new
    end
  end

end
```


これで「authenticate_user!」をコメントアウトしなくともエラーが出なくなります。

以上です。

間違い等ありましたらご指摘いただけますと幸いです。
【Babel】の使い方(Javascript・node.js)

#専用のディレクトリ作成

```bash
$ mkdir babeltest
```

#カレントディレクトリを移動

 ```bash
$ cd babeltest 
```

#package.jsonを作成

```bash
$ npm init -y 
```

上記のコードは、対話環境で対話する事なく、プロジェクト名など適当につけてファイル「package.json」を作成してくれます。

#必要なライブラリをインストール

```bash
$ npm install --save-dev babel-cli
$ npm install --save-dev babel-preset-es2015
```

Babel CLIとES 2015のプリセットの2つをプロジェクトにインストールします。
その際、package.jsonに設定を保存する様に、「--save-dev」オプションをつけておきます。

#.babelrcを作成
プロジェクトフォルダに「.babelrc」というファイルを作成し、そこに下記の内容を書き込みます。

```javascript
{ "presets": ["es2015"] }
```

#コマンドでJSファイルを変換

```
$ babel test.js -o test.out.js
```

上記の例では、test.jsファイルを変換したコードをtest.out.jsファイルに書き込んでいます。
複数前のrollbackはもうしない

```
 rails db:migrate:status
```
<img width="431" alt="スクリーンショット 2020-05-05 17.52.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265805/675bd15c-24d8-7c38-4d92-338781fe7ce1.png">



```
rails db:migrate:down VERSION=20200324161602
```
<img width="717" alt="スクリーンショット 2020-05-05 17.52.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265805/196c9f99-718b-226d-558e-34c9d07cd14c.png">




```
rails db:migrate:status            
```
downになってる!

<img width="430" alt="スクリーンショット 2020-05-05 17.53.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265805/47634ce4-f04d-767f-f8bb-298e3873ac22.png">



ファイル削除

```
 rails db:migrate:status
```
<img width="424" alt="スクリーンショット 2020-05-05 17.53.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/265805/437aeaf7-6380-51ab-019e-2b59eb490fb1.png">
express.js スタックフロー

# Express.js学習でハマった！！
ドットインストール様で学習を進めていてスタックしたので、内容と対策をサクッとまとめてみました。
これから、ドットインストール様でexpress.jsの学習を進めていく方のために投下します！どんどん、トレース泥棒してください♪

## 環境
- Windows10
- Vagrant 
- CentOS
- node.js
- express.js
　

## 参照
[express.js](https://expressjs.com/)
[ejs](https://ejs.co)


## スタック一覧
1. install 時
2. #13 override
3. #15 ejs部分の構文（include）

## 内容と対策
**1,　install**
expressの導入時に動画上で触れていない部分があります。
任意のフォルダを用意してexpressのモジュールをインストールする前に、** npm init ** をしないといけないです。package.jsonファイルを用意しないとモジュールをインストールできなかったです。下記の2、では学習のみの利用であればエンターのみでOK!
1.mkdir app
 cd app
2. npm init
3. npm install express 



**2,  #13 override**
動画＃13でスタックし気が付いたのですが、app.jsのミドルウェアの11行目はこのままですとハマります。
app.use(express.methodOverride());
は、express v-4xだと使えない模様。コンソールのエラー内容で、
method-overrideという呪文を唱えるように指示されていましたので、
**npm i method-override**
で、インストールして、app.jsに、下記を追加する。
**var methodOverride = require('method-override');**
これで、エラー解消しました！

**3, #15 ejs部分の構文**
動画＃15でドはまりしました！！
ここでは、共通部品であるヘッダーとフッターを別ファイルにして呼び込むことをしますが、動画通りだと構文エラーになります。
index.ejsとshow.ejsで、ejsのincludeを使いますが、
**<% include ../header %>**
ではなく、
**<%- include('../header); -%>**
と訂正しないとエラーになります。

原因は、動画更新当時のejsの構文ではOKだったからだと思います。これに気が付くまで時間がかかりました。。。express.jsでのエラーだと思い込んでいたので。

## 後記
プログラム学習はスタックが学びのいい機会だと割り切っていかないと嫌になりますね。教えてもらえる先輩エンジニアがいる方がうらやましい。
前述しましたが、ドットインストール様で学習をしていてハマった方の参考になれば嬉しいです。
Pythonでよく使う機能のモジュール（外部ファイル読み取りとか）

#初めに
自分用に作ったものなので、使い道は限られていると思います。
外部ファイルを設定用にプログラムから読んだりすることが多いので、簡単にできるようにまとめてあります。
ついでにDatetimeの扱いもややこしいのでまとめてあったり。
モジュール化、使い方に関しては、以下の記事が詳しく書かれていますのでご覧ください。
>[pythonで自作関数をモジュール化・パッケージ化 - Qiita](https://qiita.com/ren094275/items/5d42f7c6be8c5d3cd014)

#モジュール
```MyModule.py
# -*- coding: utf-8 -*-
import time, shutil, os, sys, datetime

class File:
    # ファイルを読み取ってリストとして返す（エラーの場合"error"を返す）
    def ReadListOut(path):
        try:
            with open(path,'r',encoding="utf-8") as f:
                Sentence = [s.strip() for s in f.readlines()]
                return Sentence
        except FileNotFoundError:
            return "error"

    # リスト型のデータを改行しながら書き込み
    def WriteListIn(path, Sentence):
        Sentence = "\n" + '\n'.join(list(map(str, Sentence)))
        with open(path, mode='a',encoding="utf-8") as f:
            f.writelines(Sentence)

    # 一行の文章を改行してから書き込み
    def WriteStrIn(path, Sentence):
        Sentence = "\n" + Sentence
        with open(path, mode='a',encoding="utf-8") as f:
            f.writelines(Sentence)

    # 任意のパスにディレクトリまたはファイルをコピー
    def Copy(pathBefore, pathAfter):
        if "." in pathBefore:
            shutil.copy(pathBefore, pathAfter)
        else:
            shutil.copytree(pathBefore, pathAfter)

    # 任意のパスにディレクトリまたはファイルを移動
    def Move(pathBefore,pathAfter):
        shutil.move(pathBefore, pathAfter)

    # 任意のパスにディレクトリを作成
    def MakeDir(path):
        os.makedirs(path)

    # ディレクトリまたはファイルを削除
    def Remove(path):
        if "." in path:
            os.remove(path)
        else:
            shutil.rmtree(path)

    # ファイルの更新日時を変更
    def ChangeUpdateTime(path, timelist): # 西暦/月/日/時/分/秒 で入力
        time = Define.Date(timelist).timestamp()
        os.utime(path, (time, time))

class Program:
    # プログラムを強制終了
    def Exit():
        sys.exit()

class Define:
    # 入力からDatetimeオブジェクトを作成
    def Date(timelist):
        return datetime.datetime.strptime("/".join(map(str, timelist)), "%Y/%m/%d")

    def Time(timelist):
        return datetime.datetime.strptime("/".join(map(str, timelist)), "%H/%M/%S")

    def DateTime(timelist):
        return datetime.datetime.strptime("/".join(map(str, timelist)), "%Y/%m/%d/%H/%M/%S")
```
Electron-builder実行時にpackage.jsonに記入したくない非公開設定を追加する


## やれること

Electron-builderのCLIでの実行時引数に`--config <追加の設定を書いたファイル.json>`を渡すとpackage.jsonに記入していない設定を追加(上書き)できます。ただし、package.json内の`"build"`セクション以下の項目だけが対象です。

## 例

### 問題のある状態(隠すべき項目がpackage.jsonに書かれている)

electron--builderでappxをビルドする時、Microsoft storeで発行される"publisher"項目等を追加する必要があります。`--config`を使わない場合には`package.json`に次のように書くでしょう。


```json
{
...(略)...
"scripts": {
    "build-appx": "electron-builder -w appx"
}
"build":{
  "artifactName": "APPNAME_${version}_${os}.${ext}",
  "appx": {
      "publisher":"CN=XXXXXXXXXXXXXXXXX",
      "identityName":"YYYYYPUBLISHERNAME.APPNAME",
      "applicationId":"PUBLISHERNAME.APPNAME",
      "publisherDisplayName":"PUBLISHERNAME",
      "languages":["JA-JP","EN-US"]
  },
  "win": {
     ...(略)...     
  }
  "mac": {
     ...(略)...     
  }
}
...(略)...
}
```

この状態で


```
npm run build-appx
```

コマンドを実行すればappxのbuildが可能です。

ただし、これには問題があります。"publisher"の項目の`CN=XXXXXXXXXXXXXXXXX`の部分などは非公開にしたい情報だと思います。ですので、package.jsonに記入しておくのはよろしくないです。誤ってgithubなどに公開したないようにしなければなりません。

### `--config`を使った対策

そこで、非公開にしたい`"appx"`に関する項目を外部ファイルに書いておいて、electron-builderの`--config`引数を利用して読み込むことにします。外部ファイルのフォーマットは`yml`と`json`が使えるらしいです。今回の例では外部ファイルを`appx_setting.json`という名前で作ります。

まず、package.jsonからは隠したい項目である`"appx"`に関する部分を取り除きます。さらに、`"scripts:{"build-appx"}`の中の引数として`--config dist/appx_setting.json`を追加します。こうしてpackage.jsonは以下の様になります。


```
json
{
...(略)...
"scripts": {
    "build-appx": "electron-builder -w appx --config dist/appx_setting.json"
}
"build":{
  "artifactName": "APPNAME_${version}_${os}.${ext}",
  "win": {
     ...(略)...     
  }
  "mac": {
     ...(略)...     
  }
}
...(略)...
}
```

隠し設定を書く`appx_setting.json`を`dist`ディレクトリに作成し、中身は次のように記述します。packge.jsonから取り除いた部分をそのままコピペするだけです。


```json
{
  "appx": {
      "publisher":"CN=XXXXXXXXXXXXXXXXX",
      "identityName":"YYYYYPUBLISHERNAME.APPNAME",
      "applicationId":"PUBLISHERNAME.APPNAME",
      "publisherDisplayName":"PUBLISHERNAME",
      "languages":["JA-JP","EN-US"]
  }
}
```

これで先と同じ


```
npm run build-appx
```

コマンドを実行してコンパイルすると、あたかも`appx_setting.json`に記述された設定が、packege.jsonの`"build"`セクションに追加されたように振る舞います。

### 注意点


- 忘れずに`appx_setting.json`は.gitignoreに記載して隠しておきましょう。
- 上記の例でbuildを実行すると、生成されるappxのファイル名がpackage.jsonの`"artifactName"`で設定したものとは異なりデフォルトの名前になります。どうやら`--config`の振る舞いとして、`"build"`をまるまる入れ替えるという振る舞いをするようです。必要な項目は`appx_setting.json`の方に書いておきましょう。

## さいごに

[ElectronアプリをMicrosoft Storeに提出する記事](https://qiita.com/pochman/items/756a5446bec2ea0f16d8)を先日投稿しましたが、`CN=XXXXXXXX`等の非公開設定をどうするか、かなり悩みました。今回の方法が見つかって、よかったよかった。他にも色々使いみちがありそうです。
peco を使って git のリモートブランチをチェックアウトする

# peco を使って リモートブランチをチェックアウトする

[peco](https://github.com/peco/peco) は標準入力をインクリメンタル検索ができるツールです。

これをつかって git のリモートブランチをチェックアウトする方法を記載します。

## 最終形

以下の内容で例えば `remote.sh` というファイル名で保存して `.bashrc` から `source` コマンドで読み込みます。 

```
#!/bin/sh
coremote () {
    remotename=`echo $1 | sed -r "s#([^/]+)/.*#\1#"`
    branchname=`echo $1 | sed -r "s#[^/]+/##"`

    echo git checkout -b $branchname $remotename/$branchname
         git checkout -b $branchname $remotename/$branchname
}
alias cor='export -f coremote; git branch -r | peco | xargs -I{} bash -c "coremote {}"'
```

alias の `cor` を呼び出せば、インクリメンタル検索を行ってリモートブランチをチェックアウトできます。

```
$ cor
```

## 解説

### `git branch -r` コマンド

git のリモートブランチを取得するには `git branch -r` コマンドを実行します。
`git branch -r` コマンドを実行すると、リモートブランチの情報を標準出力に出力します。

### `peco` コマンド

`peco` は標準入力から受けたデータをユーザーの入力に基づいてフィルタリングして、ユーザーの選択した一行を表示します。

こんな感じ

```
git branch -r | peco
``` 

### `git checkout` コマンド

`peco` コマンドの結果リモートブランチの情報を例えば以下のような形で出力します。

```
origin/feauture/hogehoge
```

git コマンドでは以下のようなコマンドでリモートブランチをチェックアウトします。

```
git checkout -b feauture/hogehoge origin/feauture/hogehoge
```

### `sed` コマンド

`origin/feauture/hogehoge` を `origin` の部分と `feauture/hogehoge` の部分に分離するために `sed` コマンドを使います。

### リモート名 (`origin` の部分)

```
echo origin/feauture/hogehoge |  sed -r "s#([^/]+)/.*#\1#""
```

### ブランチ名 (`feauture/hogehoge` の部分)

```
echo origin/feauture/hogehoge |  sed -r "s#([^/]+)/.*#\1#""
```

## 関数で `git checkout` コマンドを組み立てる。

```
coremote () {
    remotename=`echo $1 | sed -r "s#([^/]+)/.*#\1#"`
    branchname=`echo $1 | sed -r "s#[^/]+/##"`

    git checkout -b $branchname $remotename/$branchname
}
```

これで以下を実行すると

```
coremote origin/feauture/hogehoge
```

以下コマンドが実行されます。

```
git checkout -b feauture/hogehoge origin/feauture/hogehoge
```

## xargs で標準出力の結果を引数に関数 `coremote` を呼び出す

`coremote` に標準出力からのデータを引数として渡すために `xargs` を使います。

単純に以下のようにすると 

```
git branch -r | peco | xargs coremote
```

以下のようなエラーになります。

```
xargs: coremote: そのようなファイルやディレクトリはありません
```

coremote は bash の関数なので bash 経由で以下のように呼び出します。

```
git branch -r | peco | xargs -I{} bash -c "coremote {}"'
```

そうすると以下のエラーになります。

```
bash: coremote: コマンドが見つかりません
```

あらかじめ `export -f function` をしておくといいらしい。
https://qiita.com/D-3/items/8bdb834ff53256cef481

以下のようになる。

```
export -f coremote; git branch -r | peco | xargs -I{} bash -c "coremote {}"
```

## 参考

https://qiita.com/D-3/items/8bdb834ff53256cef481
https://qiita.com/sukebeeeeei/items/9b815e56a173a281f42f
https://qiita.com/m-tmatma/items/44bfce739023a5b00ac3
Laradock+MySQLでdefaultユーザーに権限を付与



## 環境
- Laravel 6.x
- laradock
- phpmyadmin
- MySQL 5.7

## defaultユーザーはcreate databaseできない

laradockでMySQLコンテナを立ち上げた際のデフォルトの設定は

```laradock/.env
MYSQL_VERSION=latest
MYSQL_DATABASE=default
MYSQL_USER=default
MYSQL_PASSWORD=secret
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

```

ユーザー名がdefault
パスワードがsecretである

なのでLaravelプロジェクトの.envファイルにも同じように
設定しないとphp artsan migrate時にエラーが起きる。
（ちなみにHOSTは特に変更がなければmysqlである）


####ただこのdefaultユーザー,MySQLにアクセスできることはできるが、自らデータベースを作成したり削除したりそういったクエリ操作が一切できないのである。

```
mysql> show grants for 'default'@'%';


+------------------------------------------------------+
| Grants for default@%                                 |
+------------------------------------------------------+
| GRANT USAGE ON *.* TO 'ユーザー名'                  |
| GRANT ALL PRIVILEGES ON `default`.* TO 'ユーザー名' |
+------------------------------------------------------+
```

調べたところどうやらなんの権限もないと書かれている。

なので対処方は２つ

### １ルートユーザーでデータベースを扱う
### ２ルートユーザーでログインした後、デフォルトユーザーに権限を与える。


今回は経験のために、権限を付与する方法で行うことにした。


まずMySQLコンテナに入ってMySQLにルートユーザーで入る

```
$ mysql -u root -p
```

ルートユーザーは全ての権限を持っている

```
mysql> show grants for root@localhost;

+---------------------------------------------------------------------+
| Grants for root@localhost                                           |
+---------------------------------------------------------------------+
| GRANT ALL PRIVILEGES ON *.* TO 'root'@'localhost' WITH GRANT OPTION |
| GRANT PROXY ON ''@'' TO 'root'@'localhost' WITH GRANT OPTION        |
+---------------------------------------------------------------------+
```

そのルートユーザーから権限のないユーザーに権限を与える

```
mysql> GRANT ALL ON *.* TO 'default'@'%' IDENTIFIED BY 'secret';

Query OK, 0 rows affected, 1 warning (0.02 sec)

```

もう一度デフォルトユーザーでログインして
show grants for `ユーザー名`で権限を確認して

```
 GRANT ALL PRIVILEGES ON *.* TO 'ユーザー名'         
 GRANT ALL PRIVILEGES ON `default`.* TO 'ユーザー名'
```
こういう表示がされたらOK

無事マイグレーションファイルを実行できます。






## 参考記事


https://qiita.com/shuntaro_tamura/items/2fb114b8c5d1384648aa
https://qiita.com/tatsuo-iriyama/items/33a954b71a4d7353d287
【Laravel】Laravel Controller作成

#Controller作成

▪︎ディレクトリ移動

```
公式）
$ cd /Applications/MAMP/htdocs/プロジェクト名
例）
$ cd /Applications/MAMP/htdocs/laravel_test
```

▪︎Controller作成

```
（公式）
$ php artisan make:controller [コントローラ名]Controller
（例）
$ php artisan make:controller TestController
```

▪︎Controllerファイル確認
エディタを開き、下記のディレクトリ配下を確認

```
app/Http/Controllers
```
kotod で koto のマイニングの税計算を行う

koto, マイニングしすぎて transaction 数が多く, block explorer サービス経由で取得するのも面倒なので,
kotod でブロックチェーンから直接トランザクションを取得してみます.

2020/05/05 時点での最新の koto 2.1.2 を使います.

https://github.com/KotoDevelopers/koto

kotod, koto-cli の中身はほぼ zcash(bitcoind + alpha) なので, zcashd/bitcoind のやりかたを周到します.

zcashd で ZCash マイニングの税計算を行う
https://qiita.com/syoyo/items/32e6ed62e49a92df56f7


総トランザクション数を `getwalletinfo` で取得します.
(chain が同期していないと, 総トランザクション数は変わりますので, chain が同期してから動かしましょう)
 
```
$ ./koto-cli getwalletinfo
```

`txcount` を使います.
その後 `txcount` の値を使って listtransactions します.

```
$ ./koto-cli listtransactions "*" 2126 > tx.json
```

jq あたりで, `txcount` の値と配列要素が一致するか確認しておきましょう.

```
$ jq '. | length' < tx.json
```

あとは JSON をよろしく python などで処理すれば完成です!
はじめての Elasticsearch on AWS 作成時のロール・ポリシー・権限設定

# はじめての Elasticsearch on AWS 作成時のロール・ポリシー・権限設定

前書き

- この記事は自分が Elasticsaerch 作成にあたって権限周りでわからなかったことをまとめた記事です。
- 詳細・最新・正確な情報などは公式ドキュメントに全部書いてあるので、基本的にそちらを参照ください。

やりたいこと

- Elasticsearch on AWS を Create Domain から新しく始めるとき、仕組みを理解した上でロールの設定をしたい。

## 先に結論

- もしService-linked Roleについて理解してないなら、これをきちんと理解するのが大事だった。（というか、この記事的にもあまりES関係ない）
- IAM にてロールを作成して、下記２つのアクションを許可したポリシーも持たせる。
  - `es:CreateElasticsearchServiceRole`
  - `iam:CreateServiceLinkedRole`
  - （REF: [Amazon ES のサービスにリンクされたロールの使用 - Amazon Elasticsearch Service](https://docs.aws.amazon.com/ja_jp/elasticsearch-service/latest/developerguide/slr-es.html)）
- 下記のロールはユーザーへの割り当ては不要。（ユーザーに付与する用途ではなくて、自動的に Elasticsearch に対して付与される用途のものだから。）
  - `AWSServiceRoleForAmazonElasticsearchService`

## Serivce-linked role について

この設定の前に、Serviced-linked roleについて理解しておく必要があった。

IAMロールとservice-lilnked Roleの比較・詳細な説明はこちらを参照

- [【アップデート】AWS サービスに権限付与する「Service-Linked Roles」が IAM の要素に追加されました！ | Developers.IO](https://dev.classmethod.jp/articles/aws-iam-service-linked-role/)

ただ、自分の場合はこれだけでは、イメージがつきにくかったので、具体例を考えながら理解する。


### 具体例：前提

- 具体例として扱うサービスは Elasticsearch（以後、ElasticsearchかES）
- 「Elasticsearch を作成する」を実現していく。

### 具体例：内容

- 「何かの操作」をしたときに、Service-linked Role は「自動的」に作成される。

  - 今回の例だと「ES の作成」の操作をすることで、Serviced-linked Roleも自動的に作成される。

- Serviced-Linked Role の具体的な内容（アクションなど）はサービス・操作によって違う。

  - 今回の例だと「ES の作成」の場合は、AmazonElasticsearchServiceRolePolicy のロールも自動的に作成される。（そのためService-linked roleの作成権限もユーザーに必要。後述する）

  - このロールと ES はリンクされる。その結果、ES はAmazonElasticsearchServiceRolePolicyにて許可されてる範囲の操作も行えるようになる。

### 具体例：事前

そのため今回のケースだと、ES を作成しようとしているユーザーに対して、下記のアクション許可が事前に必要になる。

- `es:CreateElasticsearchServiceRole`

  - Elasticsaerch自体を作成する権限
- `iam:CreateServiceLinkedRole`

  - Service-linked Role を作成する権限

### おわりに

Elasticsearchのインフラを作ることになったので０から調べていった。
最終的にはES周りの知識というよりも、前提として Serviced-linked Role についての理解が浅かったのが原因でした。インフラ構築とこの文章の作成で思考が整理できたので、ここに記事としてまとめておきます。

## REF

- [【アップデート】AWS サービスに権限付与する「Service-Linked Roles」が IAM の要素に追加されました！ | Developers.IO](https://dev.classmethod.jp/articles/aws-iam-service-linked-role/)

- [Amazon ES のサービスにリンクされたロールの使用 - Amazon Elasticsearch Service](https://docs.aws.amazon.com/ja_jp/elasticsearch-service/latest/developerguide/slr-es.html)
- [Amazon Elasticsearch Service ドメインの作成と設定 - Amazon Elasticsearch Service](https://docs.aws.amazon.com/ja_jp/elasticsearch-service/latest/developerguide/es-createupdatedomains.html)
マテリアルデザインとは？ーbootstrap関連

#マテリアルデザインとは

ユーザーが感覚的に操作しやすいデザインのこと。
どのボタンがどんな意味を持っているのか？
（エレベーターの閉めるボタン、開けるボタンみたいな）
タップしたら「そこをタップしましたよ」と、ユーザーがわかりやすいか？

など、直感的に理解しやすいよう、平面の画面でも立体的に見えるように
重なっている部分には影を入れたり、ボタンにカーソルを合わせるとふわっと浮いたりするようなデザイン。

つまり、
**「三次元的」、「直感的」、「重なりを意識」**したデザインが特徴的。

ちなみにGoogleが推奨しているのでAndroidでよく見かけるデザイン。

#Material Design Bootstrap 

Bootstrapを使用している感覚で、マテリアルデザインのサイトを簡単に作成できてしまうのが
「Material Design Bootstrap」

一から作成しようとするとCSSを考えるのが大変だったり、
統一感のあるカラーを考えるのに時間がかかったりするので
Bootstrapでマテリアルデザインのサイトを作成できるのはありがたい。



#すごくわかりやすいサイト

マテリアルデザインとフラットデザインを対比して説明をしているので、
よりマテリアルデザインについて理解しやすいと思う。
↓
https://hnavi.co.jp/knowledge/blog/material-design/
[PHP]具象メソッドを持つインターフェースのようなものをtraitで実現する

## 概要
今日はめずらしく真面目なプログラミングの記事です。
interface についての説明はこちらをどうぞ。

[PHP: オブジェクト インターフェイス - Manual](https://www.php.net/manual/ja/language.oop5.interfaces.php)

interface とは本来抽象メソッドしか持つことができません。しかし、とある具象メソッド内で使用されるパラメータの実装を強制したい場合どうすればよいか、わたしなりに考えてみましたので今日はそんな話をしたいとおもいます。

## 状況
まずは下記のサンプルをご覧ください。

```php:共通メソッドを持つクラス
class Common
{
    public function hoge()
    {
        return 'called common method';
    }
}
```

```php:共通メソッドを使うクラス(1)
use Common;
class A
{
    public function foo()
    {
        $common = new Common();
        $common->hoge();
    }
}
```

```php:共通メソッドを使うクラス(2)
use Common;
class B
{
    public function bar()
    {
        $common = new Common();
        $common->hoge();
    }
}
```

まあ特に変わったところのないクラスです。
このとき、**Common クラスの hoge() メソッド の内部で使用するパラメータを動的に変更したい** という場合はどうするのが良いでしょうか。

手取り早いのは引数を追加して外から渡す方法でしょう。
メソッドの引数でもいいですし、コンストラクタの引数でもいいとおもいます。

```php:引数を持たせたよ
class Common
{
    public function hoge(string $str)
    {
        return "{$str}: called common method";
    }
}
```

これでも解決するのですが、

- 引数を準備する際に単純な値のリテラルではすまない
- パラメータの引数が多くなる

といった場合にちょっと困ってきます。
このとき、interface で必要なパラメータの準備を強制させることができれば、新しいクラスへの導入をよりスムーズに行えるメリットもあるのでできればそのようにしたいのですが、interface だと抽象メソッドしか書けないのでどうしたものかというところです。

## というわけで本題

[***trait***](https://www.php.net/manual/ja/language.oop5.traits.php) を組み合わせることで、限りなく近いものを実現できると考えました。
具体的にはこのようなイメージです。

- ***trait*** → 具象メソッド 
- ***interface*** → 抽象メソッド

## サンプル
先ほどの例を書き換えてみます。

### まず共通処理を trait にします

このとき、**抽象メソッドを trait 内に組み込んでしまう** のがポイントです。

```php:Commonをtraitにします
trait Common
{
    public function hoge()
    {
        $param = $this->getParam();
        return "{$param}:called common method";
    }
}
```

### 実装を強制したい部分をinterfaceにします
```php
interface Params
{
    /**
     * @return string
     */
    public function getParam(): string;
}
```

### 使用クラスに導入します
作った trait と interface を、導入したいクラスに適用させます

```php
class A implements Params
{
    use Common;
    public function foo()
    {
        $this->hoge();
    }

    public function getParam(): string
    {
        return 'class A param';
    }
}
```

## まとめ
このように、trait と interface をセットで使えば、「この trait と interface を読み込んで、あとは抽象メソッドを実装すれば、メソッド****がお好きなクラスで使えますよ」みたいなことが可能です。

もっとスマートな方法があるのかもしれませんが、事例のひとつとしてよかったら参考にしてみてください。

---

※追記
スマートな方法をコメントで教えていただけました。
@nishimura さんありがとうございました！
AWS初心者が在宅勤務中にAWSの資格を取る記録 part2

#5/2(Sat)
・参考書（3h）
　勉強方法思い出しました。
　参考書斜め読みしてましたが、参考書に直接書き込んで覚えることにしました。
　気合い入れて全部読み切りました。

　★使ってる参考書
　「AWS認定資格試験テキスト AWS認定 クラウドプラクティショナー」
　　https://www.amazon.co.jp/dp/B07QX45RXM/ref=cm_sw_r_tw_dp_U_x_mLtREbDXXHSED

##感想
長らく試験の勉強ってしてこなかったので、いろいろ触って事項錯誤した結果、ようやくスムーズにインプットできる方法を思い出しました。
SAAを取得するにあたって、プラクティショナーの知識ベースをガッツリ固めちゃうのが資格の取得はもちろん、現場に出ても活きてくると考えているので、焦らずやりたい。

#5/3(Sun)
・Udemy（3h）
　前回は目も当てられない結果だったので再チャレンジ。
　結果は以下の通り。

　基本①
　60/65 92%
　基本②
　56/65 86%
　応用①
　40/65 61%
　応用②
　43/65 66%

　★受講しているコース
　「この問題だけで合格可能！AWS認定 クラウドプラクティショナー 模擬試験問題集（7回分455問）」
　　https://www.udemy.com/course/aws-4260/learn/quiz/4766842

##感想
やっとある程度満足する結果が出ました。。

明日からはSAAの学習に取り組みます。
試験を受験してもいいレベルまで達したと思うので、来週中に受験する。

#追記
5/7に受験することにしました。
diffコマンドで片方のファイルにしかないものを抽出

# はじめに

新旧の２つのファイルが、新しい方だけにあるものを抽出したいケースがあります。
（例えば、insertとupdateを別々に処理するなど）

diffコマンドで、差分の内容を制御するオプションがあるので、それを使ってやります。

# 使用例

```
$ cat old.txt
1
2
3
4
8
9
```

```
$ cat new.txt
1
2
3
4
5
6
7
8
9
```

```
$ diff --old-line-format='' --unchanged-line-format='' --new-line-format='%L' old.txt new.txt
5
6
7
```

# 参考リンク

* https://stackoverflow.com/questions/15384818/how-to-get-the-difference-only-additions-between-two-files-in-linux
* https://eisaiah.blog/tools/linux-commands/new-lines-only-with-diff/
マイグレーションファイルの命名について

マイグレーションファイルの命名については、以下のように分かりやすく命名するのが一般的です。

目的例	命名
例 tasksテーブルを作成する場合	CreateTasks
例 tasksテーブルを削除する場合	DropTasks
例 tasksテーブルにnameカラムを追加する場合	AddNameToTasks
例 tasksテーブルに複数のカラムを追加する場合	AddColumnsToTasks
例 tasksテーブルからnameカラムを削除する場合	RemoveNameFromTasks
例 tasksテーブルから複数のカラムを削除する場合	RemoveColumnsFromTasks
例 tasksテーブルのnameカラムの名前をcontentに変更する場合	RenameFromNameToContentOnTasks
例 tasksテーブルにnameカラムのindexを追加する場合	AddIndexNameToTasks
例 tasksテーブルに複数のカラムのindexを追加する場合	AddIndexesToTasks

*既に存在しているモデル同士を関連付けする場合
例えば、usersテーブルとtaskテーブルがあったとします。
関連付けするためには、テーブルに関連付け用のカラムを追加することが必要です。「一人のuserに対して、taskは複数」と考えて、taskテーブルに、user_idカラムを追加します。
そのために、マイグレーションファイルを以下のように作成します。

```console
$ rails g migration AddUserRefToTasks user:references
```
すると、shema.rbファイルは以下のようになります。

```ruby:xxxx_add_user_ref_to_tasks.rb
class AddUserRefToTasks < ActiveRecord::Migration[5.2]
  def change
    add_reference :tasks, :user, foreign_key: true
  end
end
```
マイグレーションを実行すると、以下のようなテーブル構成になります。

```ruby:schema.rb
#省略
  create_table "tasks", force: :cascade do |t|
    t.string "name"
    t.text "detail"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.bigint "user_id"
    t.index ["user_id"], name: "index_tasks_on_user_id"
  end

  create_table "users", force: :cascade do |t|
    t.string "name"
    t.string "email"
    t.string "password_digest"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end
```

外部キーであるuser_idが追加されています。
Content Security Policy の 'strict-dynamic' で nonce をちゃんと設定しているのにエラーになるときは prefetch/preload が原因かも

# 結論
```
<link rel="preload" href="/_nuxt/dddd88be1484ef5d94bc.js" as="script" nonce="2UhC1DHXJTpbvWCe">
```

上記のように `preload(prefetchなども？)` している script にも nonce をつけたらエラーが消えました。

# 経緯
ヘッダーは

```
Content Security Policy: script-src 'nonce-2UhC1DHXJTpbvWCe' 'unsafe-inline' 'strict-dynamic' https: http:;
```

となっていて、読み込むソースも

```
<script nonce="2UhC1DHXJTpbvWCe" src="***"></script>
```

となっているのに、なぜかChromeで

```
Refused to load the script "/_nuxt/dddd88be1484ef5d94bc.js" because it violates the following Content Security Policy directive: "script-src 'nonce-2UhC1DHXJTpbvWCe' 'unsafe-inline' 'strict-dynamic' https: http:". 'strict-dynamic' is present, so host-based whitelisting is disabled. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
```

というエラーが出てしまっていた。

Nuxtを使っていたので、ずっとServiceWorker（`worker-src`）や
manifest.jsonの `content_security_policy` など色々と疑っていたのですが、
まさかの盲点でした。
#Vue ( nuxt ) – parent and child component props binding example / increment counter  / one way data flow


# Code

pages/counter-three.vue

```vue
<template>
  <div>
    <Counter :count="parentCount"/>
    <Counter :count="parentCount"/>
    <Counter :count="parentCount"/>
    <input type="button" @click="incrementParentCounter" value="Increment Parent!">
  </div>
</template>

<script>
import Counter from '~/components/Counter.vue'

export default {
  data () {
    return {
      parentCount: 1
    }
  },
  components: {
    Counter
  },
  methods: {
    incrementParentCounter (e) {
      this.parentCount = this.parentCount + 1
    }
  }

}
</script>

```

components/Counter.vue

```vue
<template>
  <div>
    <h2>
      Count: {{ count }}
    </h2>
    <input type="button" @click="incrementCounter" value="Increment!">
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 1
    },
  },
  methods: {
    incrementCounter (e) {
      this.count = this.count + 1
    }
  }
}
</script>

```

# Example

default

![image](https://user-images.githubusercontent.com/13635059/80945975-ff850d80-8e27-11ea-89d6-8a0b4e6f22cb.png)

increment child counter

![image](https://user-images.githubusercontent.com/13635059/80945976-001da400-8e28-11ea-84ef-2ee23854e63e.png)

increment parent counter
child count reseted
because child component props does not bind to parent component

![image](https://user-images.githubusercontent.com/13635059/80945977-00b63a80-8e28-11ea-9673-896ef84a0336.png)


# Original by Github issue

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











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Dartでimmutableなオブジェクト

# はじめに
ふとFlutter始めたんですが、React書いたことあると、Viewの監視対象のオブジェクトがimmutableじゃないと気になったりしませんか？

Dartでもオブジェクトの値を変化させる場合は、参照の値を変更するのでは無く、オブジェクト自体を値を変更した新たなオブジェクトで置き換えたいんです。

#immutable化
探してみると[meta](https://pub.dev/packages/meta)パッケージの@immutableアノテーションを付け、`final`なメンバと`const`付きコンストラクタを持ちいることでimmutable化することが出来そうです。

```dart
import 'package:meta/meta.dart';

@immutable
class User {
  const User(this.id, this.name); // <- immutable用コンストラクタ

  final int id;
  final String name;
}

// User user = User() // コンパイル不可
User user = User(1, 'A');

// user.name = 'B' // コンパイル不可
user = User(user.id, 'B');
```

出来たことは出来たのですが、`user = User(user.id, 'B');`では文脈が不明瞭なので`copy`メソッドを用意します。

```dart
import 'package:meta/meta.dart';

@immutable
class User {
  const User(this.id, this.name); // <- immutable用コンストラクタ

  final int id;
  final String name;

  User copy({int id, String name}) {
    id ??= this.id;
    name ??= this.name;

    return User(id, name);
  }
}

User user = User(1, 'A');

user = user.copy(name: 'B'); // = User(1, 'B')
```

`id ??= this.id`と`name ??= this.name`がミソだけど、キモい。要は未定義なら自身のプロパティを当てるという意味です。

# おまけ
[Built Collection for Dart](https://pub.dev/packages/built_collection)というパッケージを使えばListやMapもimmutable化が可能です・・・が、若干癖があるので、ほどほどに使った方が良いかも？
jsの[immutable.js](https://immutable-js.github.io/immutable-js/)感覚では使えません。
[自分用メモ] リージョンの異なるVNETをピアリング

VNETを大阪と米国西部に配置。(vn-osaka,vn-uswest)
それぞれにServerを設置。(vm-osaka,vm-uswest)

- ピアリングせずに疎通確認
vm-osakaからvm-uswestまでPublic IPでPING。
100ms程度。

```
ubuntu@vm-osaka:~$ ping 40.xx.xx.xxx
PING 40.78.81.223 (40.xx.xx.xxx) 56(84) bytes of data.
64 bytes from 40.xx.xx.xxx: icmp_seq=1 ttl=52 time=105 ms
64 bytes from 40.xx.xx.xxx: icmp_seq=2 ttl=52 time=105 ms
64 bytes from 40.xx.xx.xxx: icmp_seq=3 ttl=52 time=106 ms
64 bytes from 40.xx.xx.xxx: icmp_seq=4 ttl=52 time=106 ms
64 bytes from 40.xx.xx.xxx: icmp_seq=5 ttl=52 time=105 ms
^C
--- 40.xx.xx.xxx ping statistics ---
5 packets transmitted, 5 received, 0% packet loss, time 4004ms
rtt min/avg/max/mdev = 105.872/106.099/106.458/0.296 ms
```

- vm-osakaからvm-uswestまでPrivate IPでPING.（ピアリング前なのでつながらないことの確認）

```
ubuntu@vm-osaka:~$ ping 10.0.0.5
PING 10.0.0.5 (10.0.0.5) 56(84) bytes of data.
^C
--- 10.0.0.5 ping statistics ---
6 packets transmitted, 0 received, 100% packet loss, time 5098ms
```

- ピアリングを作成( vm-osaka, vm-uswest ) 
10.1.0.5(vm-osaka)から10.0.0.5(vm-uswest)へのPING。
100ms程度。Public Address 、Private address もほぼ同じくらいの応答時間だった。

```
ubuntu@vm-osaka:~$ ping 10.0.0.5
PING 10.0.0.5 (10.0.0.5) 56(84) bytes of data.
64 bytes from 10.0.0.5: icmp_seq=1 ttl=64 time=126 ms
64 bytes from 10.0.0.5: icmp_seq=2 ttl=64 time=108 ms
64 bytes from 10.0.0.5: icmp_seq=3 ttl=64 time=108 ms
64 bytes from 10.0.0.5: icmp_seq=4 ttl=64 time=109 ms
64 bytes from 10.0.0.5: icmp_seq=5 ttl=64 time=108 ms
^C
--- 10.0.0.5 ping statistics ---
5 packets transmitted, 5 received, 0% packet loss, time 4005ms
rtt min/avg/max/mdev = 108.758/112.461/126.279/6.925 ms
```


- 同一VNET（Region内）での速さ
vn-uswest内。10.0.0.5 から10.0.1.4へのPING。同じVNET内というかRegion内なら、1ms 程度。Azure内のネットワークを通っても、まあ同じということか。大阪と米国はやはり遠いということと解釈。

```
ubuntu@vm-default:~$ ping 10.0.1.4
PING 10.0.1.4 (10.0.1.4) 56(84) bytes of data.
64 bytes from 10.0.1.4: icmp_seq=1 ttl=64 time=0.810 ms
64 bytes from 10.0.1.4: icmp_seq=2 ttl=64 time=0.886 ms
64 bytes from 10.0.1.4: icmp_seq=3 ttl=64 time=0.882 ms
64 bytes from 10.0.1.4: icmp_seq=4 ttl=64 time=1.24 ms
64 bytes from 10.0.1.4: icmp_seq=5 ttl=64 time=0.919 ms
64 bytes from 10.0.1.4: icmp_seq=6 ttl=64 time=0.907 ms
^C
--- 10.0.1.4 ping statistics ---
6 packets transmitted, 6 received, 0% packet loss, time 5100ms
rtt min/avg/max/mdev = 0.810/0.941/1.243/0.140 ms
```
tracerouteをするとこんな感じだった。private IPだとPeeringだからかわかりやすく1ホップ。Publicだと、なんかいろいろ探してから、という雰囲気。。。

```
traceroute to 10.0.0.5 (10.0.0.5), 30 hops max, 60 byte packets
 1  10.0.0.5 (10.0.0.5)  109.781 ms  109.793 ms  109.792 ms
ubuntu@vm-osaka:~$ sudo traceroute -I  40.xx.xx.xxx
traceroute to 40.xx.xx.xxx (40.xx.xx.xxx), 30 hops max, 60 byte packets
 1  * * *
 2  * * *
 3  * * *
 4  * * *
 5  * * *
 6  * * *
 7  * * *
 8  * * *
 9  * * *
10  * * *
11  * * *
12  * * *
13  * * *
14  * * *
15  * * *
16  * * *
17  * * *
18  * * *
19  * * *
20  40.xx.xx.xxx (40.xx.xx.xxx)  106.532 ms  106.557 ms  106.555 ms
ubuntu@vm-osaka:~$
```
【Mac】ターミナル出力の色分け設定


##### １. bashrc作成

```shell:ターミナル
vi ~/.bashrc 
```

```shell:~/.bashrc
# default:cyan / root:red
if [ $UID -eq 0 ]; then
    PS1="\[\033[31m\]\u@\h\[\033[00m\]:\[\033[01m\]\w\[\033[00m\]\\$ "
else
    PS1="\[\033[36m\]\u@\h\[\033[00m\]:\[\033[01m\]\w\[\033[00m\]\\$ "
fi

# "-F":ディレクトリに"/"を表示 / "-G"でディレクトリを色表示
alias ls='ls -FG'
alias ll='ls -alFG'
```


##### ２. 設定反映の自動化

```shell:ターミナル
vi ~/.bash_profile
```

```shell:~/.bash_profile
if [ -f ~/.bashrc ]; then
  . ~/.bashrc
fi
```

```shell:ターミナル
source ~/.bashrc
```
DockerでサクッとGolangの環境作ってみた

golangの勉強のためにDockerでサクッと開発環境作ってみた。

フォルダ構成
golang_docker_api
-Dockerfile
-main.go

それぞれのファイルの内容は以下参照
<h2>Golang+Dockerで環境構築</h2>

【Dockerfile】
ローカルのmain.goをコンテナイメージにコピーしてビルド→実行をするDockerfile

```ruby:Dockerfile
FROM golang:alpine
# フォルダ作成
RUN mkdir /app/
# 作成したフォルダ内にmain.goを配置
COPY . /app/
# 作業場所を/appに設定（main.goがある場所）
WORKDIR /app/
# main.goをbuild
RUN go build -o main . 
CMD ["/app/main"]
```
【main.go】
localhostにアクセスしたときに「golang api access」を出力するmain.go

```ruby:main.go
package main

import (
	"fmt"
	"net/http"
)
func index(w http.ResponseWriter, r *http.Request) {
	fmt.Fprintf(w, "golang api access")
}

func main() {
	http.HandleFunc("/", index)
	http.ListenAndServe(":80", nil)
}
```

ファイルの作成が終わったら、まずはDockerfileをビルドしてイメージを作成。
cdでDockerfileのあるフォルダまで移動してから以下のコマンドを実行する。

```ruby:zsh
$docker build ./ -t go_docker_api
Sending build context to Docker daemon  3.072kB
Step 1/6 : FROM golang:alpine
.....
Successfully built 8fc142c5cd0d
Successfully tagged go_docker_api:latest
```
最後に「Successfully」が出ていれば成功。

次に作成したイメージを実行する

```ruby:zsh
$docker run --name go_docker -d -p 80:80 go_docker_api 
269cf535b7d0030e6058056559b9eb8334e966131eac9b077d21072615c662fa
```
なんか文字列が出てくる。
以下のコマンドで起動を起動確認する。

```ruby:zsh
$docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                NAMES
269cf535b7d0        go_docker_api       "/app/main"         13 minutes ago      Up 13 minutes       0.0.0.0:80->80/tcp   go_docker
```
これが出れば実行成功。
Webブラウザを開いて[localhost](http://localhost)にアクセスする。
![BB4824D2-7F8E-4ED7-B36D-9EFF64CA1F3A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631619/25bfdce7-71c4-97fa-aabe-858a8a493d3d.jpeg)
golangが動いていることを確認できました！
#Vue で props が文字列として component で受け渡されてしまう ( props as string or integer / increment example)

# 解決

コロン : をつけて bind で 子component に props を渡す

```diff
<template>
  <div>
-    <Counter count="1"/>
-    <Counter count="2"/>
-    <Counter count="3"/>
+    <Counter :count="1"/>
+    <Counter :count="2"/>
+    <Counter :count="3"/>
  </div>
</template>

```

bind じゃなくてもとりあえず props を渡せているようだけど、これは何なのだろう

# Code

pages/counter-three.vue

```vue
<template>
  <div>
    <Counter count="1"/>
    <Counter count="2"/>
    <Counter count="3"/>
  </div>
</template>

<script>
import Counter from '~/components/Counter.vue'

export default {
  components: {
    Counter
  }
}
</script>

```

components/Counter.vue

```vue
<template>
  <div>
    <h2>
      Count: {{ count }}
    </h2>
    <input type="button" @click="incrementCounter" value="Increment!">
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 1
    },
  },
  methods: {
    incrementCounter (e) {
      this.count = this.count + 1
    }
  }
}
</script>

```

インクリメントすると文字が増えてしまう

![image](https://user-images.githubusercontent.com/13635059/80945356-98b32480-8e26-11ea-8523-4b35e322bd6e.png)




# Original by Github issue

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











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
LGTMやIMO等コメント略語まとめ

コードレビューでよく見るけど、**これってどういう意味だっけ..IMO..芋..？**
そんな略語たちをまとめました。

他にもこんなのあるよ！と言うのがあれば教えてください〜

# LGTM
「Looks Good To Me」 = 良いと思います

# WIP
「Work In Progress」 = 対応中

# FYI
「For Your Information」 = 参考までに

# must
「must」 = 必須

# want
「want」 = できれば

# imo
「in my opinion」 = 私の意見では

# imho
「in my humble opinion」 = 私のつたない意見では（控えめな意見・謙虚な意見）

# imnsho
「in my no so humble opinion」 = ハッキリ言わせていただくと

# imao
「in my arrogant opinion」 = 私の大胆な意見（ぶっちゃけ）

# nits
「nitpick」 = 些細な指摘（重箱の隅をつつくの意味）

# GOTCHA
「I've got you」 = やったぜ！

# NP
「No Problem」 = 問題ない
bashの変数パラメータ展開

#はじめに
bashの変数パラメータ展開をすぐ忘れてしまうので整理する。

##bashのパラメータ展開の一部
|記法  |意味  |
|---|---|
|${変数名#パターン}  |最短マッチで、パターンに前方一致した部分を取り除く  |
|${変数名##パターン}  |最長マッチで、パターンに前方一致した部分を取り除く  |
|${変数名%パターン}  |最短マッチで、パターンに後方一致した部分を取り除く  |
|${変数名%%パターン}  |最長マッチで、パターンに後方一致した部分を取り除く  |

上記以外にも沢山の記法があるがとりあえず４つ。

##使用例

###${変数名#パターン}
`${変数名#パターン}`は、`最短マッチで、パターンに前方一致した部分を取り除く`パラメータ展開である。

```.sh
#!/bin/bash

filepath=/home/name/abc.txt
echo "${filepath#*/}"

home/name/abc.txt
```
最短マッチとは、指定するパターンにマッチする文字列のうち**最も短い**ものを指す。

|パターン|*/|
|---|---|
|文字列|/home/name/abc.txt|
|最短マッチ|homeの手前の`/`|
|結果|home/name/abc.txt|

###${変数名##パターン}

`${変数名#パターン}`は、`最長マッチで、パターンに前方一致した部分を取り除く`パラメータ展開である。

```.sh
#!/bin/bash

filepath=/home/name/abc.txt
echo "${filepath##*/}"

abc.txt
```

最長マッチは指定するパターンにマッチする文字列のうち**最も長い**ものを指す。

|パターン|*/|
|---|---|
|文字列|/home/name/abc.txt|
|最長マッチ|/home/name/|
|結果|abc.txt|

ファイルパスから`ファイル名を取得`するのに利用できる。

###${変数名%パターン} 

`${変数名%パターン} `は、`最短マッチで、パターンに後方一致した部分を取り除く`パラメータ展開である。

```.sh
#!/bin/bash

filepath=/home/name/abc.txt
echo "${filepath%/*}"

/home/name
```


|パターン|/*|
|---|---|
|文字列|/home/name/abc.txt|
|最短マッチ|abc.txt|
|結果|/home/name|

ファイルパスから`ファイル名を除いたディレクトリを取得`するのに利用できる。

###${変数名%%パターン} 

`${変数名%%パターン} `は、`最長マッチで、パターンに後方一致した部分を取り除く`パラメータ展開である。

```.sh
#!/bin/bash

filepath=/home/name/abc.txt
echo "${filepath%%/*}"

（なし）
```


|パターン|/*|
|---|---|
|文字列|/home/name/abc.txt|
|最長マッチ|/home/name/abc.txt|
|結果|（なし）|

##参考
新しいLinuxの教科書
『アドレナリンジャンキー~プロジェクトの現在と未来を映す86パターン~』から考える開発プロジェクトの成功パターン

# はじめに
皆様、こんにちは！
佐久間まゆちゃんのプロデューサーの@hiroki_tanakaです。

以前書いた[『アドレナリンジャンキー~プロジェクトの現在と未来を映す86パターン~』から考える開発プロジェクトのアンチパターン](https://qiita.com/hiroki_tanaka/items/340afe34ba6b39677d83)という記事の成功パターン編です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105636/2f601a2e-eaf1-6306-84c2-6206077bf66f.png)

# (再掲)『アドレナリンジャンキー~プロジェクトの現在と未来を映す86パターン~』とは
[『アドレナリンジャンキー~プロジェクトの現在と未来を映す86パターン~』](https://www.amazon.co.jp/dp/B00FS2X0P2/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)は2009年に出版されたソフトウェア開発のプロジェクトによく見られる86のパターンを抽出し、失敗に向かう兆候や逆にうまく回っている特徴を紹介した本です。
著者は5人のエンジニアで中には『ピープルウェア』や『熊とワルツを』で有名なトム・デマルコとティム・リスターもいます。
この本はプロジェクトマネジメントの本のため、読んでもコーディングスキルをはじめとする技術的な知識は殆ど身に付きません。
また、86のパターン1つ1つはどれも2〜3ページで紹介されているため、非常に読みやすいです。

# 開発プロジェクトの成功パターン
## わかりません
>健全なプロジェクトには本当のことを安心して言える文化がある。それがすぐには答えられない内容だったとしても。
「わかりません」という言葉は、信頼の宣言だと考えて良い。プロジェクト全体で人々が安心して「わかりません」と言えることは、人々が安心して助けを求められるということだ。このような組織は、あらゆる階層で真に協力を推し進め、その成果を得ることができる。

炎上しているプロジェクトだと上司や同僚からの質問に対して「わかりません」と答えると、やる気のない証拠と見られるプロジェクトがあります。
そのようなプロジェクトでは全員が全てのことを知っていることを期待されていますが、全員が全てのことを知るのは不可能です。
そして、その現実を無視したプロジェクトの姿勢によって、メンバは助け合いや協力・気軽な質問をしないようになります。
結果的に、プロジェクトは炎上しているのに更に時間が掛かり、遅れは広がっていきます。

成功するプロジェクトは「わかりません」を協力のキッカケとするように思えます。
目の前の問題で困っている人に対して、何か知っている人が皆役に立つ情報を提供してくれます。
「わからない」「知らない」というその人の状態を問題としているのではなく、そんなメンバの知識の隙間をチームで埋められるプロジェクトが成功するプロジェクトだと思います。

有名な[『Team Geek』](https://www.amazon.co.jp/exec/obidos/ASIN/4873116309/hatena-blog-22/)にも以下のようにあります。

>わからないな。君はどう思う？
間違いや能力不足を見せることは弱さではない。
他人の意見を信頼すること。その正直さと強さによって、
みんなが尊敬してくれる。

## ポーカーの夕べ
>職務に関係のない活動のために、組織のあちこちからメンバが集まる。
人々が序列も職務も忘れて集まれば、組織は少しだけ健全になる。
手段はどんなグループ活動でも構わない。ポーカーでもチェスでもソフトボールでも、要するに、社内の個人の役割と無関係の活動をグループで行うものであればいい。

どんなに大変なプロジェクトでもリーダもメンバも入り混じって、立場や責務を忘れて遊ぶ機会があるチームでは仕事がうまく回っていたように感じます。
理由としては、メンバ同士で一緒に遊んだことによって、信頼の機会と我慢の機会が生まれるからです。

仕事中に他のメンバにイライラすることは多いですが、一緒に遊んだことがあるメンバにイライラすることはとても少ないように思えます。
そして、信頼の機会によって、仕事中のコミュニケーションのハードルが低くなるので、イライラする前に気軽にコミュニケーションを取りに行くようになります。

日本だとこのような機会の代表例が飲み会になりますが、個人的には飲み会は序列や立場がはっきり出てしまうのであまり良いとは思えません。
ボードゲームやポーカー・テレビゲームなど忖度や立場がはっきり出ない遊びのほうが良いと思います。

また、このような遊びの機会は強制して作らない方が良いです。
誰かに強制して作られた場には立場や序列が入り込んでしまい、心から楽しむことができないためです。
自発的に人々が集まり、楽しみ、ともに成功する環境や雰囲気を作るだけで良いかと思います。

## 隠れた美
>細部をよく見て設計デザインの質を評価してくれるマネージャーの存在は、設計者に大きな影響を与える。
マネージャーが設計者の仕事を丹念に見れば、美しい仕事を評価できる人間を増やす事ができるだろう。
そして、設計者にとって「まあまあのマネージャー」が「どこまでもついていきたいボス」に変わるかもしれない。

全ての設計には美的要素があります。問題はこの美的要素は友か敵かということです。<br>

マネージャーの中には設計の仕事において美的要素は無駄であり、排除するべきと考えている人もいます。
しかし、マネージャーが美的要素に無関心な態度でいると、設計者は素晴らしい仕事を評価される機会を失います。
(設計者のモチベーションもどんどん落ちていきます。)

反対に、設計者のデザインを詳細に見る能力と意思があり、美的要素は無駄ではなく、
優れている場合は優れていると認めることができるマネージャーの元では設計者は活き活きと働き、
そのようなマネージャーのいるプロジェクトから素晴らしいプロダクトやシステムは生まれると思います。
(代表例がスティーブ・ジョブズが内部基盤にまで美しさを求めたiMacだと思います。)

# おわりに
アドレナリンジャンキーはプロジェクトマネジメントの入門書として非常に参考になる一冊なので、よければ読んでみて下さい。
私は[『アトラス』](https://qiita.com/hiroki_tanaka/items/340afe34ba6b39677d83#%E3%82%A2%E3%83%88%E3%83%A9%E3%82%B9)が気に入っているアンチパターンです。(良かれと思って自分がそうなりがちというがあります。)
基本情報処理技術者試験の「データ構造とアルゴリズム」について

基本情報処理技術者試験の「データ構造とアルゴリズム」を解いてみた。
(2017年の秋試験の午後問題の問８)

正解率は５問／６問 (83%) だった。

かかった時間は３８分。前回とは違う問題ではあるが、前回の４８分から１０分、短縮することが出来た。

問題を読みながらメモを取ったのが良かったのかもしれない。

あと、疑似コードに関しての解答方針を立てた。

もう少し、短い時間で、かつ確実に問題を解けるようになりたい。
kdeplotで火を作る

```Python:plot.py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import seaborn as sns
fig=plt.figure()
ax=fig.add_subplot()
a=np.random.normal(0,0.1,100000)
b=np.random.chisquare(2,100000)
s=0
def plot(data):
    global ax,s
    ax.clear()
    ax.set_xlim(-1, 1)
    ax.set_ylim(0, 8)
    ax=sns.kdeplot(a[s:s+1000],b[s:s+1000],bw=0.1,shade=True,n_levels=30,shade_lowest=False,cmap='hot',vmin=-0.5)
    s+=100
    print("\b"*10,(s*100)/10000-1,"%",end="")

ani = animation.FuncAnimation(fig, plot, interval=100, frames=100)
ani.save("plot.gif", writer="imagemagick")
```
![plot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594241/7e5e6425-c7fe-96d1-5ad3-bbb6ce0cc082.gif)
【Laravel】Laravel tinker

#①tinker

ディレクトリ移動

```
公文）
$ cd /Applications/MAMP/htdocs/プロジェクト名
例）
$ cd /Applications/MAMP/htdocs/laravel_test
```

tinkerでテーブルにレコード追加

```
$ php artisan tinker

>>> $test = new App\Models\Test;
>>> $test->text = "aaa";
=> "aaa"
>>> $test->save();
=> true
>>> App\Models\Test::all();
=> Illuminate\Database\Eloquent\Collection {#3054
     all: [
       App\Models\Test {#3055
         id: 1,
         text: "aaa",
         created_at: "2020-05-05 17:27:03",
         updated_at: "2020-05-05 17:27:03",
       },
     ],
   }
>>>
>>> $test2 = new App\Models\Test;
>>> $test2->text = “bbb”;
=> "bbb"
>>> $test2->save();
=> true
>>> App\Models\Test::all();
=> Illuminate\Database\Eloquent\Collection {#3058
     all: [
       App\Models\Test {#3059
         id: 1,
         text: "aaa",
         created_at: "2020-05-05 17:27:03",
         updated_at: "2020-05-05 17:27:03",
       },
       App\Models\Test {#3060
         id: 2,
         text: "bbb",
         created_at: "2020-05-05 17:33:26",
         updated_at: "2020-05-05 17:33:26",
       },
     ],
   }
>>> 
```

#②テーブル更新確認

MAMPを開く
http://localhost:8888/phpMyAdmin/server_databases.php

テーブル(Test)の中身が更新されていることを確認
Docker-ComposeでSALOMEの開発環境を構築（Mac）

#はじめに
DockerでSALOMEの開発および計算環境を構築する方法をメモしておく．

これらの内容はgithub上で公開しているので，参考にしてもらいたい．
https://github.com/matsubaraDaisuke/salome-docker-start

dockerのイメージはこちらのintelhdを利用
https://hub.docker.com/r/trophime/salome-8.2.0/tags


# 環境
dockerとdocker-composeはインストール済みとする．

docker version  19.03.4
docker-compose version 1.24.1
MacOS Catalina 10.15.4
XQuartz 2.7.11

# 構成
ディレクトリ構成は以下のものとします．

``` 
project
├ docker-compose.yml
├ docker
|　 └ salome
| 　　　└ Dockerfile
└ develop(このディレクトリ内で開発する)
```


# Mac上の環境構築

XQuartzを事前にインストールして起動してください。

XQuartzのネットワーククライアントからの接続を許可を有効化
**XQuartz >> 環境設定 >> セキュリティ**

![image](https://user-images.githubusercontent.com/25544286/81047453-5efd1f00-8ef5-11ea-84c7-e6614b91dc79.png)


リポジトリのクローン

``` terminal
$ git clone https://github.com/matsubaraDaisuke/salome-docker-start.git
$ cd salome-docker-start
```

ローカルのIPアドレスの取得

``` terminal
$ make IP
>> IP address: 192.168.x.xx　// e.g. 192.168.12.1
```

iglxの有効化

``` terminal
$ defaults write org.macosforge.xquartz.X11 enable_iglx -bool true
```

X サーバへの接続が許可されるホスト名とユーザ名をリストに追加

``` terminal
$ xhost +192.168.x.xx // e.g. $xhost +192.168.12.1
```

docker-compose.ymlの環境変数(environment)を修正します

``` docker-compose.yml
services:
    salome:
      container_name: salome
      build: ./docker/salome
      #tty: true
      environment:
        - DISPLAY=192.168.x.xx:0.0 <- HERE Edit! e.g. - DISPLAY=192.168.12.1:0.0
      volumes:
        - ./develop:/home/salome
        - /tmp/.X11-unix:/tmp/.X11-unix 
```

ビルドと起動

``` terminal
$ docker-compose up --build
```

``` terminal
$ docker-compose run salome /bin/bash
```

SALOMEの起動

``` terminal
# salome
```

![image](https://user-images.githubusercontent.com/25544286/81047507-818f3800-8ef5-11ea-83e0-f13eac4aa2f2.png)

計算用のデータは、ホスト：**develop**ディレクトリ、コンテナ：**/home/salome**でマウントされているので編集、保存が可能になっています。
#Vue – ひとつの component の中でだけ利用する ローカルな props は data として定義する ( props と data の違い )

- props はあくまで親componentから子componentへ値を渡すためのものなので、ひとつのcomponentでだけ使う値の定義にはふさわしくないはず (使えるけども)
- ひとつの component の中でだけ利用する ローカルな propsという表現自体が本末転倒的な

# 例

こんな props は

```
export default {
  props: {
    count: {
      type: Number,
      default: 1
    },
  },
```

こんな風にdataに置き換える

```
export default {
  data () {
    return {
      count: 1
    }
  },
```

# Guide

https://jp.vuejs.org/v2/guide/components-props.html#%E5%8D%98%E6%96%B9%E5%90%91%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%83%AD%E3%83%BC

![image](https://user-images.githubusercontent.com/13635059/80944128-c2b71780-8e23-11ea-8fed-3dc400e0d43f.png)


# Ref

>②コンポーネントの props プロパティにデータを直接入れると警告が出る
>上記①が判明する前は props にデータを格納するのかと考えていました。

[Vue.js初心者向け：Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ - Qiita](https://qiita.com/sygnas/items/7eac9491b37a1bcba0cb)

# Original by Github issue

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











<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
javaとpythonの違い(メモ)

#はじめに
小生はこれまで書いてきたステップ数、時間ではJavaが圧倒的に多いです。
昨今、Pythonがかっこいいので勉強しています。
Javaとの違いをわかりしだいメモしていきたいです。


#インクリメント
pythonにはインクリメント演算子(++)が無い。



#オーバーロード
pythonはオーバーロードしたメソッド（同名だが引数の構成が異なる
メソッド）が作れない。


#for文

```java:Java
for(int i=0;i<10;i++){
  //処理
}
```

```Python:Python
for i in range(10):
    #処理
```

#クラスメソッドの引数
pythonはクラスメソッドの第１引数は自分自身のオブジェクトであり、
慣習的にselfが使用される。


#インスタンス変数
pythonはインスタンス変数を使う時は、クラス内であっても明示的に
クラスオブジェクトを示す変数名で修飾しないといけない。(インスタンスメソッドも同様)

```java:Java
class Hoge{
  int arg1;
     private void func(){
         arg1=0;
     }
}
```

```Python:Python
class Hoge:
    def func(self):
        self.arg1=0
```

#クラス変数(クラス変数)
pythonはクラス変数を使う時はクラス内であっても明示的にクラス名で修飾しなくてはいけない。
※typeでクラスを取り出すやり方でも可。

```Python:Python
class Test:
    a="クラス変数"
    def test(self):
        self.a="インスタンス変数"
        #クラス変数が表示される（どちらの書き方も可）
        print(Test.a)
        print(type(self).a)
        #インスタンス変数が表示される
        print(self.a)


test=Test()
test.test()
```
修飾するオブジェクトがインスタンスであればインスタンス変数
クラスであればクラス変数として扱われる。
[Application Error] React Appデプロイ時のerror code=H10の対処法

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

#デプロイ後にApplication Errorが発生
エラーが起きているのでログを確認

```
heroku logs --tail
```

これで吐き出されたログを確認した所、この様なエラーを確認

```
2020-05-05T07:07:32.860460+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=whispering-sea-42324.herokuapp.com request_id=2edb01db-d450-42c4-a2d5-054d2ddf7c0a fwd="92.202.236.201" dyno= connect= service= status=503 bytes= protocol=https
2020-05-05T07:07:34.265598+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=whispering-sea-42324.herokuapp.com request_id=d0d71346-05ff-4c2f-89dc-8872ab99ac61 fwd="92.202.236.201" dyno= connect= service= status=503 bytes= protocol=https
```

アプリがクラッシュしている模様
<strong>[H10 - App crashed](https://devcenter.heroku.com/articles/error-codes#h10-app-crashed)</strong>

どうやらcreate-react-appのstart scriptに問題があるみたいです。

```
npm install --save serve
```

package.jsonの内容を以下の様にいたしましたら無事解決しました！

``` package.json
"scripts": {
    "dev": "react-scripts start",
    "heroku-postbuild": "npm run build",
    "start": "serve -s build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

#参考記事
・[How to Fix Heroku Application Error For a Successfully Deployed React App](https://stackoverflow.com/questions/61029907/how-to-fix-heroku-application-error-for-a-successfully-deployed-react-app/)
・[React App runs locally but crashes with error code=H10 on Heroku](https://stackoverflow.com/questions/60846916/react-app-runs-locally-but-crashes-with-error-code-h10-on-heroku/)
・[React app runs locally, crashes when on Heroku error code=H10
](https://stackoverflow.com/questions/44319832/react-app-runs-locally-crashes-when-on-heroku-error-code-h10/)
Twitter DM 送信数の制限

ツイッターAPIは徐々に閉鎖、もしくは有料にする方向らしく、年々レートリミット制限が厳しくなっている。DMの送信数も制限があるのだが、少しややこしいのでここのメモとして書いておく。

[POST direct_messages/events/new (message_create) — Twitter Developers](https://developer.twitter.com/en/docs/direct-messages/sending-and-receiving/api-reference/new-event)

- ユーザーからメッセージを受信した場合、24時間以内に最大5つのメッセージを送信することができます
- メッセージを受信するたびに、24時間枠と割り当てられた5つのメッセージがリセットされます
- 24時間以内に6つ目のメッセージを送信したり、24時間外にメッセージを送信したりすると、レート制限の対象となります
- この動作は POST direct_messages/events/new エンドポイントを使用している場合にのみ適用されます
- レート制限の数は、ユーザーあたり1000/24時間、アプリケーションあたり15000/24時間です