OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio Code [vsCode] 日本語化

# 環境
Mac 10.14

# ソフトをダウンロード

https://code.visualstudio.com
上記リンクからソフトをダウンロード（Stable Build版）

```
ダウンロードしてきたzipを解凍する。解凍できたらFinder（ダウンロードのディレクトリ）から

アプリケーションのディレクトリに「Visual Studio Code.app」をドラッグして移動しておくといい。

（アプリケーションディレクトリ内に移動させると、Launchpadから起動できるようになる。）

移動できたら「Visual Studio Code.app」を実行。
```
<img width="291" alt="スクリーンショット 2018-09-15 2.19.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/2372d78e-f840-6799-7e95-4f38b0c6d2c0.png">
<img width="46" alt="スクリーンショット 2018-09-15 2.04.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/b94ef420-b772-ee37-88cb-7b88d28a4996.png">



# 設定作業
<img width="60" alt="スクリーンショット 2018-09-15 1.45.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/23286c12-c17d-9a89-4cc8-05722a6b2bf1.png">


```
起動したウィンドウ画面左側の、アイコンメニュー内の一番下のアイコンをクリック

左側にMARKETPLACEのサーチメニューが表示されるので
グレーの欄に以下を入力してEnter
```
```
Japanese Language Pack for Visual Studio Code
```
<img width="319" alt="スクリーンショット 2018-09-15 1.41.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/5f97267e-d5eb-459c-ab12-ab53e72f5178.png">
<img width="996" alt="スクリーンショット 2018-09-15 1.36.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/17dc6a74-e949-9c5a-792d-990718a67ed4.png">

```

そしたら表示された 「Japanese Language Pack ~」 をインストールする。
（緑色のInstallボタン）
```
<img width="100" alt="スクリーンショット 2018-09-15 1.41.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/a35c735a-7e8b-0628-8ed3-d68e8e5889c6.png">


>インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。locale.json を編集するには ~~Ctrl~~+Shift+P を押してコマンド パレットを表示させ...

`Mac は Ctrl じゃなくて command なんだよな...`

```zsh:
command + shift + p

を押してコマンドパレット（入力欄）を開き、下記のように入力

>configure display language
```
`※ 上記入力値と画像の内容が若干異なるのはお気になさらず。。。`
<img width="233" alt="スクリーンショット 2018-09-15 1.51.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/4663eb0a-216d-2a41-7891-f1f28f0ee155.png">


```
表示された　「Configure Display Language」　をクリックすると

locale.jsonファイルが開くので

「en」 と表記されている部分を 「ja」 に変更
```
<img width="625" alt="スクリーンショット 2018-09-15 1.51.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/23248/383066a7-7751-885f-7ba2-ddb1c210444a.png">

```json:locale.jason
	"locale":"ja"
```
```
command + s

で上書き保存してから

一旦 Visual Studio Code を終了（ command + q ）する。
```
```zsh:注意
command + w じゃなくて

command + q　ね！

# 「command + w」 や、　「xボタン」 でウィンドウを閉じた場合は、
# DockメニューからVisual Studio Codeのアプリアイコンを右クリックし、「終了」をクリックして終了させる。
```
```
もう一度 Visual Studio Code を起動して、
UIの言語が日本語に切り替わっていれば設定完了。
```

# 参考
>
[VisualStudioCodeの日本語化](https://qiita.com/elphe27/items/3216b0007231d6acf2ac)
[フロントエンドでも快適に使える！ Visual Studio Code のあれこれ](https://qiita.com/usako/items/37112a571529253919ff)
APサーバー再起動

# 素人のメモ

## APサーバーが単一

* セッションは大丈夫か
* プログラムの処理が中断されないか

を気にして対応を行う(メンテナンスを入れてユーザーを追い出す必要があるか等)

```
systemctl reload php-fpm.service
(gracefulにならない　処理中のものが途中で終了)

systemctl restart php-fpm.service
(gracefulにならない　処理中のものが途中で終了)
```

まだphp-fpmはgracefulにならない
https://bugs.php.net/bug.php?id=60961

```
nginx -s reload
(graceful)
```

```
systemctl reload httpd.service
(graceful)

systemctl restart httpd.service
(gracefulにならない　処理中のものが途中で終了)
```

## APサーバーを複数

### ローリング

LBから半分外して作業後半分をもう半分と切り替えて残りの半分で作業して戻す。（切り離して作業して戻すを1台ずつ行うと確実に環境が混ざる。半分でも環境が混ざる瞬間があるのかは不明）

### ブルーグリーン

2倍用意しておき、裏で片方で作業を行い、表と切り替える。

### イミュータブル

新環境を作って切り替える、旧環境は削除（コンテナ入れ替えなど）
SystemdのServiceで複数のプロセスを起動する

#環境
Ubuntu Server 18.04

#はじめに
あるrubyプログラムを引数により別な挙動をさせたい場合があります。
これを１つのserviceに登録する、というものです。

#動かすrubyプログラム
whileで延々と時刻とhelloを書き込むだけのrubyプログラムですが、引数により出力するファイルが違います。
/home/hoge/ruby/hello.rbとし、実行権限を与えます。

```ruby:/home/hoge/ruby/hello.rb
#!/usr/bin/env ruby
while true
  f = File.open("./out#{ARGV[0]}.txt",'a')
  f.puts Time.now.to_s + " hello"
  f.close
  sleep 1
end
```

```sh
$ chmod 0755 /home/hoge/ruby/hello.rb
```

これに引数をつけて実行すると、out引数.txtに時刻とhelloが書き込まれます。

```sh:/home/hoge/ruby/
./hello.rb 1
```
```sh:out1.txt
2018-09-14 23:10:13 +0900 hello
2018-09-14 23:10:14 +0900 hello
2018-09-14 23:10:15 +0900 hello
2018-09-14 23:10:16 +0900 hello
2018-09-14 23:10:17 +0900 hello
```

#シェルプログラムで並行処理させるには
これに1〜４の引数を与えて、並列プロセスとしてシェルで実行させます。
/home/hoge/bin/hello.sh
以下はダメな例。ただ順番に書いただけでは順列に処理されるだけです。

```sh:hello.sh
#!/bin/bash
cd /home/hoge/ruby/
./hello.rb 1
./hello.rb 2
./hello.rb 3
./hello.rb 4
```
並列プロセスとして処理させたい場合は”＆”をつけます。
参考：[バックグラウンドプロセス](https://qiita.com/nyango/items/7b6b719f248b2ee8d379)

```sh:hello.sh
#!/bin/bash
cd /home/hoge/ruby/
./hello.rb 1 &
./hello.rb 2 &
./hello.rb 3 &
./hello.rb 4 &
```
これにも実行権限をつけます。

```sh
$ chmod 0755 /home/hoge/bin/hello.sh
```
#systemdに登録
「/etc/systemd/system」にUnit定義ファイルを作ります。
WorkingDirectoryを指定してやらないと、rubyの中で相対パスで出力しているため、out*.txtが「/」配下にできてしまいます。
Typeはsimpleではなくforkingで。
wiki=>[forkとは](https://ja.wikipedia.org/wiki/Fork)
forkingにすることで、個々のrubyプログラムにプロセスIDが割り振られます。
Installセクションが無いと、後述のenableで失敗します。

```
[Unit]
Description = hello daemon

[Service]
WorkingDirectory = /home/hoge/ruby
ExecStart = /home/hoge/bin/hello.sh
Restart = always
Type = forking

[Install]
WantedBy = multi-user.target
```
Unit定義ファイルができたら、下記コマンドでsystemctlに読み込みます。

```sh:
$ sudo systemctl daemon-reload
```
確認。この段階ではまだ「disabled」です。

```sh:
$ sudo systemctl list-unit-files --type=service | grep hello
hello.service                          disabled  
```

#起動
下記コマンドでhello をenableします。

```sh:
$ sudo systemctl enable hello
```
```sh:
sudo service hello start
```
#status
サービス起動しているかstatusでチェック

```sh:
$ sudo service hello status
● hello.service - hello daemon
   Loaded: loaded (/etc/systemd/system/hello.service; enabled; vendor preset: en
   Active: active (running) since Sat 2018-09-15 01:24:49 JST; 4min 26s ago
 Main PID: 5837 (code=exited, status=0/SUCCESS)
    Tasks: 8 (limit: 1104)
   CGroup: /system.slice/hello.service
           ├─6079 ruby ./hello.rb 1
           ├─6080 ruby ./hello.rb 2
           ├─6081 ruby ./hello.rb 3
           └─6082 ruby ./hello.rb 4

Sep 15 01:24:49 parallesubuntu1804sv systemd[1]: Starting hello daemon...
Sep 15 01:24:49 parallesubuntu1804sv systemd[1]: Started hello daemon.
```
ちゃんとserviceで複数プロセスが起動されています。

#参考
[Systemdを使ってさくっと自作コマンドをサービス化してみる](https://qiita.com/DQNEO/items/0b5d0bc5d3cf407cb7ff)
[シェルスクリプトで単純に並列実行・直列実行を行う](https://qiita.com/nyango/items/7b6b719f248b2ee8d379)
BPMSを共同で開発出来るためにしていくこと

#BPMS自体を共同で作業できる為にしていく事
ＢＰＭＳ自体業務向けのシステムでしか やる人がいないので　もっと簡易的に一緒にできないかなと
##処理フローを書き　フローの各所のプログラムを書き　それが条件によってかわる
 ここはどれも共通している部分だと想う
- 業務フロー＝プログラムフロー　
- タスク＝プログラム　
- 業務分岐＝処理＋ＩＦ文と考えるとわかりやすい
　　（ＩＦ文もＣＯＮＤＩＴＩＯＮといって　ＷＥＢで各処理ごとに設定の方が管理はしやすい） 

処理が可視化して作れるといったほうが　あーそうなんだとなるのかなと

![lineflow.JPG](https://qiita-image-store.s3.amazonaws.com/0/37985/5a490fdf-f3ad-a7f3-e488-a5a1ff8eb776.jpeg)

#分岐条件のプログラムをlaravel GAS node typescriptで作成できるようにする

PROCESSMAKER⇒ルーティング⇒ＧＡＳへの通信
各業務（処理の実行）をＧＡＳでＡＰＩ通信にする

#実行プログラムを全てＧＡＳ経由にする
できるだけ共同作業で使える物を母体
そこから各言語で記載にすれば　どの言語でもよい
#folder構成をlaravelと合わせる
FOLDER構成を同じにすればLaravelもＧＡＳの開発も概念は一緒なので話しやすい
概念が一緒であれば　言語の違いなどくらいでの話でいいし
できるだけ共通の構成
![laravel.JPG](https://qiita-image-store.s3.amazonaws.com/0/37985/242221eb-f822-f3a0-3580-b78f4b773c20.jpeg)

#phpと互換性のあるようにjavascriptを書く
処理的に cloud function的な部分を共同してできるだけでも
業務フロー作成の説明は出きるし
その仮定で　業務　システム　業務フロー改善（ＰＤＣＡ）を話せればなと

#CLASP
CLASPを使えば　ＧＡＳをローカル開発に出きるし　工夫すれば
ＰＨＰ javascript も両立して書けると想う
＊）そうしたいというのもあるのだが

これだったら　やりやすい方法になるとは想うのだが

#リンク　ＢＰＭＳ　PROCESSMAKER
https://www.processmaker.com/
Seleniumによるブラウザ自動化は、古くて頑固なクライアントの仕事にめっちゃ向いてる

外注として受けてる仕事（ソフト開発ではない）の1つに、

・すごい単純作業 or 人力検索が多い
・こういうやり方に変えた方がいいのでは、と提案しても無理
→アカウント同じの使えばいいのに分けてて情報共有に手間かかってるとか
・対象となるシステムがしょぼいけど手が出せない

という仕事があった。

まあまあ割のいい仕事で手放したくなかったけど、あまりに人力要素が多くて嫌いになりそうだったので、
上記の提案が通らないとわかってから、最初はChrome拡張のiMacros、
途中からruby＋Seleniumに切り替えて単純作業な部分をできるだけ切り替えるようにした。

そんな効率化を続けながらも、システム自体を改善したほうが効率的だよなと思っていたのだけれど、
今日、ふと、

「そうか。システムをいじれないから操作系をいじれるSeleniumとかが生きる道があるのだ」

と思い至った。

いまはどうか知らないけど、一昔前は「ある省庁がいまだに一太郎を使っている」なんて話もあった。
システムを切り替えようとした数多の先人が力尽きていて、最新の便利機能が使えない。
そんなときに内部に全く干渉せずに外から便利なことができるSeleniumなんかの意味があるのだなぁと。

SaaSが普及するにあたって、SaaSを開発できるプログラム能力があるのと同じくらいに、
新しいSaaSを使えない状況向けにSeleniumなど使えるとよさそうだね、と
せっかく覚えたSeleniumがムダにならないようにと祈りを込めたエントリを書いた。

＝＝＝＝＝
普段は「テックノマド in アジア」というブログで、アジアのテック事情やITトレンドなど書いてます。

本を読み、アプリを触り、上海に行って初めて分かった「中国ITの“本当に”スゴイところ」
https://tech-nomad.asia/archives/1167

【ITニュースで学ぶテック中国語】001：抖音（TikTok）を活用したECマーケティングサミット開催報告
https://tech-nomad.asia/archives/1347
php-master-changes 2018-09-14

リリースされてバグトラッカの方でも公開になったので、[飛ばしてたセキュリティ修正の分](https://github.com/php/php-src/commit/23b057742e3cf199612fa8050ae86cae675e214e)も適当なタイミングで更新したい（が、今日ではない）

# 2018-09-14
## weltling: Sync version for vc++ 15.9
- https://github.com/php/php-src/commit/d77ac7b3dc82676f5123a0cfadb86e5afcd1e8ff
- Windows 用ビルドツールのバージョン表記を VC++ 15.9 に対応


## dstogov: Fixed bug [#76800](https://bugs.php.net/bug.php?id=76800) (foreach inconsistent if array modified during loop)
- https://github.com/php/php-src/commit/3bc4a63fc27768c665fcbc101db4e579c761833b
- foreach の途中で対象の配列が変更された際にうまく回せない問題を修正
- 更新時の iter_pos の変更を考慮に入れてないコードだったためっぽいかな、少なくとも 7.2.7-7.2.9 では再現とのこと
alpineでPHP7をapk addしてもjsonライブラリが使えない

alpineを使って開発をしている時に、PHPのプログラムを書いて、なおかつJSONデータを扱う状況になった。
何食わぬ顔(\*´∀｀\*)で`json_decode()`を使おうとしたらこんなエラーが出た
`PHP Fatal error:  Uncaught Error: Call to undefined function json_decode() in /hoge.php:1`
・・・・・（＾ν＾）
いやいやいや・・標準ライブラリじゃないの・・・？

よく調べてみるとalpineのPHPでJSON扱うなら別途JSONライブラリを読まないと行けないらしい
`apk add php7-json`
これで解決
Pythonで競プロに挑む日誌 vol.10 ~文字列調査~

ABC の A, B 問題をコツコツ解く日々.
油断すると A 問題に足元をすくわれる.
# 現在の目標
* 今年の10月内に茶色を取得する
 * ~~[ABS](https://beta.atcoder.jp/contests/abs) の問題を全部解く~~ **(完了)**
 * [ABC](
https://kenkoooo.com/atcoder/?user=&rivals=&kind=category) の A, B 問題を全部解く**←イマココ**
* 年内に緑色を取得する
 * [ABC](
https://kenkoooo.com/atcoder/?user=&rivals=&kind=category) の C, D 問題を全部解く
* [APG4b](https://beta.atcoder.jp/contests/apg4b) で C++ にも手を出す

#今日の問題
ABC003B - AtCoderトランプ 
https://beta.atcoder.jp/contests/abc003/tasks/abc003_2


# 結果

```answer1.py
#coding: utf-8
import sys
 
S = input()
T = input()
lis_str = ["a", "t", "c", "o", "d", "e", "r"]
 
for i in range(len(S)):
    if S[i] == T[i]:
        continue
    elif (S[i]=="@") and (T[i] in lis_str):
        continue
    elif (T[i]=="@") and (S[i] in lis_str):
        continue
    else:
        print("You will lose")
        sys.exit()
print("You can win")

# 実行時間：17 ms
# メモリ　：3064 KB
# コード長：383 Byte
# 得点　　：100/100
```
解けるには解けました.  いつものようにほかの人の解答を参照したら, やはりもっとスマートな方法がありました.

```answer2.py
#coding: utf-8
S = input()
T = input()
ans = 'You can win'
for a,b in zip(S,T):
    if a!=b and a+b not in ('@a@t@c@o@d@e@r@'):
        ans = 'You will lose'
        break
print(ans)

# 実行時間：19 ms
# メモリ　：2940 KB
# コード長：192 Byte
# 得点　　：100/100
```
なるほど, と思ったポイントは下記3点.

* zip の使い方
* 特定の条件時に ans を上書きするという発想
* "if a!=b and a+b not in ('@a@t@c@o@d@e@r@'):"

1つ目の zip は今後も使えそうですね.

2つ目の書き方は好みの問題かもしれませんが, 条件式が減らせるかもしれないので覚えておきます.

そして最後の判定は, 思いついたら気持ちよさそうですね.  S と T から一文字ずつ抜き出して, 「@ + "atcoder" のいずれかの文字」になっている, もしくは, 「"atcoder" のいずれかの文字 + @」になってるかどうかは、たしかにこれで調べられますね.

うーむ, 道のりは長い.  けど, 前向きにがんばろう.

#明日やること
 * [ABC](
https://kenkoooo.com/atcoder/?user=&rivals=&kind=category) を解き続ける.
3－1、Pythonの基礎知識

##Pythonプログラムの構造
　プログラムは、おおざっぱに言えば、「何かに対して何かをする」ということの繰り返しです。「何かをする」というのは、例えば、「加算する」、「保存する」、「表示する」などの様々な処理を指します。そして、こうした処理の対象となる「何か」を、Pythonではオブジェクトと呼びます。沢山のオブジェクトでPythonプログラムを構成する。
　Pythonプログラムの全体構成は以下のようになっています。
>　・プログラムはモジュールから構成される。
　・モジュールはステートメントから構成される。
　・ステートメントは式から構成される。
　・式により、オブジェクトが作成・処理される。
  (初めてのpython_第三版)

##自然言語とプログラミング言語
　Pythonはプログラミング言語であり、自然言語と違います。自然言語は人と人の交流で使うため、厳密な制約がなく、表現の柔軟性が非常に高いです。プログラミング言語はパソコンに仕事をさせるため、正確な処理の記述が要求されます。そのため、すべてのプログラミング言語は独自の文法を持っています。インタプリタはその文法で書かれた処理を解釈しながら実行します。Pythonも同じです。

##Pythonの書き方
#### ・Pythonのインデント
```py
# print absolute value of an integer
a = 50
if a >= 0:
    print(a)
else:
    print(-a)
```

　Pythonは基本的に行単位で処理を記述します。
　上記1行目の「`#`」から始まるの行はコメント行です。インタプリタは`#`から行末までを無視します。何を書いてもよいです。
　3行目はif文で、その条件によって実行されるブロックが続きます。この場合、if文がヘッダー行になり、続くブロックがそのヘッダに付随する処理ブロックになります。ヘッダー行はコロン「`:`」で終わります。処理ブロックは、インデント量を揃えて記述します。インデント量に決まりはありませんが、推奨は**「スペース」4つ**です。スペースキーを4回押すのが面倒なら、エディタの設定でタブキー入力をスペース4つ入力に置き換えるといいです。

#### ・1行が長くなる場合は複数行に分けて書く

```py
total = item_one + \
        item_two + \
        item_three
```

　Pythonにおいて、バックスラッシュ（\\）はエスケープ文字であり、行末に置くとその後の改行が無視されて行が継続していると見なされます。
　行の途中に開き括弧（`(`, `{`, `[`）があれば、対応する閉じ括弧（`)`, `}`, `]`）までの間は継続行となり、バックスラッシュ(\\)は不要です。

```py
total = (item_one +
         item_two +
         item_three)
```


##まとめ
・Pythonプログラムの構造
・自然言語とプログラミング言語
・pythonのインデントはスペース4つ推奨、エディタの設定でタブキー入力をスペース4つにする
・長い行は複数行に分けて書く（1行79文字以下推奨）

前章　[2-3、InputとOutput](https://qiita.com/ousrok/items/41fc2f951cdd90a53c5a)
次章　3‐2、データ型
目次　[python 勉強完全まとめ(素人向き)](https://qiita.com/ousrok/items/135734b5f66afb497253)
AlexaのインテントやスロットをClovaにさくっと移行するツールを作ってみた

Alexaスキルアワードで作ったAlexaスキルをLINE BOOT AWARDSに向けClovaに移植したいのですが、インテント、スロット、サンプル発話のGUI操作での移行がつらすぎるので変換ツール作りました。
AlexaスキルのjsonをもとにClovaエクステンションでのアップロード用tsvを生成します。

GitHub
https://github.com/miso-develop/alexa2clova

※2018/9/14時点の仕様に対応。
※逆もまた然れるはずなのでいつか対応します。

# Install

```
git clone https://github.com/miso-develop/alexa2clova
cd alexa2clova
```

# alexa.jsonの作成
「index.js」と同じディレクトリに「alexa.json」を作成。
「alexa developer console」の「JSON Editor」のJSONをコピペ。

# tsvファイルのエクスポート

```
node index.js
```

`intents`ディレクトリと`slots`ディレクトリが作成され、その中にtsvがエクスポートされます。

# tsvファイルのアップロード
あとは「Clova Developer Center」の対話モデル画面からアップロードするだけです。
例としてインテントのアップロード方法を説明します。

`intents`ディレクトリに生成されたインテントと同名のインテントを作成し、下図の「アップロード」ボタンをおします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/207109/728dd9e4-add0-13f3-1f0b-2f24cc39b6f2.png)

下図のダイアログが表示されるのでtsvファイルを選択し「アップロード」ボタンをおします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/207109/779a28e9-0cf9-43b2-27eb-731401478c9b.png)

アップロード方法を以上です。
スロットのアップロードも同様となります。
git-hookを使いやすくするツール紹介

今までovercommitを使ってきましたが、lint-stagedも良いよと紹介されたので実際使ってみた感想とovercommitと違うと思った点、導入方法までメモとして残しておきます。

## 結論
* commitなどのレスポンス速度はovercommitよりlint-stagedの方が早い。
* overcommitはオプションのプリセットが豊富、対してlint-stagedは自分でオプションを作る必要がある。 
* overcommitは既存のgit-hookと共存できない、対してlint-stagedは既存のgit-hookと共存できる。

以上から、初めてgit-hookを使う人は`overcommit`がおすすめだと思います。対してgit-hookに慣れている人は`lint-staged`をおすすめします。

## overcommit
git-hookの機能の設定をするためのRuby製のツールです。
https://github.com/brigade/overcommit

### 導入方法
0. overcommitはRubyGemsを経由してinstallするので事前にrubyの環境を導入してください。  
1. `gem install overcommit`でovercommitをinstallします。
2. git-hookを拡張したいディレクトリ内で`overcommit --install`を実行する。
3. `overcommit --sign`で署名をします。(不正な変更を防ぐため)

```overcommit導入
cd project-dir
gem install overcommit
overcommit --install
overcommit --sign
```

ディレクトリ内のovercommitを無効にする場合、

```
overcommit --uninstall
```

このとき、`.overcommit.yml`は残るので不要なら削除してください。

### hook(pre-commit)の設定
overcommitのgit-hookの設定は`.overcommit.yml`で行います。
例えば、commit時にrubocopのチェックを通す場合、以下のような記述を追加します。

```.overcommit.yml
PreCommit:
  RuboCop:
    enabled: true
    command: ['bundle', 'exec', 'rubocop']
```

変更後は`overcommit --sign`でこの変更を反映してください。変更後のcommit時の動作が以下のようになります。

```.overcommit.yml変更後
git add sample.rb
git commit -m "commit message"
# ここでbundle exec rubocop sample.rbのチェックが入る。
# rubocopがpassすればコミットもpassします。
# rubocopがrejectすればコミットもrejectされます。
```

rubocop以外にもovercommitには設定できるlintやコミットメッセージのチェックオプションなどが数多くあります。公式のドキュメントは多機能にかかわらずわかりやすいので気になった方は覗いてみてください。

## lint-staged
git-hookを設定しやすくするツールです。現在は`husky`とセットで使うことを推奨しているようです。
https://github.com/okonet/lint-staged

### lint-staged導入
0. lint-staged及びhuskyはnpmで管理するので先にnode.jsの環境を導入する必要があります。
1. `npm install --save-dev lint-staged husky`でlint-stagedとhuskyをinstallする。
2. `package.json`にgit-hookの設定を追加する。

```lint-staged導入
cd project-dir
npm install --save-dev lint-staged husky
```

### hookの設定
lint-stagedのgit-hookの設定は`package.json`で行います。
例えば、commit時にrubocopのチェックを通す場合、以下のような記述を追加します。

```package.json
"scripts": {
	"precommit": "lint-staged"
},
"lint-staged": {
	"*.rb": [
		"bundle exec rubocop",
		"git add"
	]
},
```

overcommitと違い`overcommit --sign`のようなコマンドは必要ありません。

## まとめ
今回はgit-hookを拡張するためのovercommitとlint-stagedを使用した感想と導入方法をまとめてみました。
それでは良いコーディングライフを！
[Day3] TypeScript × Node.jsで簡単なRESTAPI作ってみる(Docker編)

## これまでの進捗
#### [Day1](https://qiita.com/okkun_includer/items/5b7a916cd7008f3c7a1c)
#### [Day2](https://qiita.com/okkun_includer/items/c68331ca4e07ac3159ea)

## dockerとは
コンテナと呼ばれる仮想OS環境を作成・管理出来るツール
ホスト型と違って軽くて早いのが特徴
#### ホスト型
ホストOS上にゲストOSが乗っかる。
当然PCへの負荷が大きい。
#### コンテナ型
ホストOSのカーネルを使って擬似的に環境を作る。
動いているOSは1つなのでホスト型より負荷は少ない。
ホストOSと全く異なるOSは動かせない。

## docker-compose
dockerコンテナ間の連携をしたい時に定義しておける。
頻出パターンとしてはAPPコンテナ + DBコンテナみたいな構成が多い印象

## docker-composeで開発環境を作る
docker-compose.ymlを作成する

```
# docker-composeのバージョン
version: '2'

# 動かしたいコンテナを記述していく
services:
  # api用のコンテナ。今回はnodejsの実行環境
  api:
   # ./build/Dockerfileを読み込む
   build: build
   # コンテナ名を定義
   container_name: api
   # コンテナを持続させる
   tty: true
   # ホストとコンテナのデータを同期
   volumes:
     - ./app:/app
   # ポートフォワードの設定
   ports:
     - "3000:3000"
  
  # Day2で説明したswaggerのeditorも入れておく
  swagger:
   image: swaggerapi/swagger-editor
   ports:
     - "3001:8080"
```

./build/Dockerfile
node.jsの環境構築

```
FROM node:8.12.0-alpine
# node.jsをデーモン化するツールを導入
RUN npm install -g forever

WORKDIR /app
EXPOSE 3000
```

イメージを作成する
`docker-compose build`
イメージを実行する
`docker-compose up -d`
node.jsのコンテナに入る
`docker exec -it api sh`
/appに入れたら成功

## 感想
週末って記事書くだけでもしんどいんやな
内容まとめが追いつきつつあるので土日休みは実装進めます
phpでバーコードを作ってGoogleAppEngineでCDN配信する

みんな大好きPHPもたまにはということで:frowning2:
動的にバーコードを作りたいんですが、バーコードの形式なんて早々変わるものでもないので……
どうせなら作成した結果はCDNに乗せてしまいたいなというニッチな目的を達成しようと思います。

[php-barcode-generator](https://github.com/picqer/php-barcode-generator)というライブラリを使用しています。

# 制作物

https://github.com/fumihiko-hidaka/gae-php-barcode

# Demo

https://neko-tech-test.appspot.com/gae-php-barcode
![コカ・コーラのバーコード](http://neko-tech-test.appspot.com/gae-php-barcode)

コカ・コーラのバーコードです:tropical_drink:

# 実装内容！

```barcode.php
<?php
require_once "vendor/autoload.php";

$generator = new Picqer\Barcode\BarcodeGeneratorPNG();

// CND配信されると10sかからないよ！
sleep(10);

header("Content-type: image/png");
header("cache-control: public, max-age=3600");

echo $generator->getBarcode(
    '4902102072618',
    $generator::TYPE_EAN_13,
    190 / 95,
    100
);
```

超シンプルです。
説明する必要あるかな……

composerでinstallしたライブラリを読み込んで、画像データを返してあげています。
この時にcache-controlのheaderをつけて返してあげると！
Google App Engineの強力なエッジキャッシュに乗っかってくれるので、sleep(10)がかからなくなります。

キャッシュについては[この記事](https://qiita.com/sinmetal/items/37c105a098174fb6bf77)がわかりやすかったです。

# 乗せる前

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235100/54406641-a6b6-ca40-4908-83ad4a625fbc.png)

10.25s！
まぁ、内部でsleep(10)してるからね……

# 乗せた後にリロード！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235100/256e9c83-eb34-89c0-a41e-5ac13eaf2923.png)

**11ms!!**

はやーい！！
変態的な速さでした！！
Nuxt.jsでVuesaxを使う方法

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3238393137332f35376534336161382d303163622d376632332d633262322d6437323964383065653036372e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/91558/7709dea9-f825-c616-9432-ed5e60efadef.png)

備忘録として。たぶんNuxt.jsのドキュメントをちゃんと読んでる人なら見なくていい記事。

# どうやるか

これ通り。ただ、Nuxt.js内にpluginsにプラグインファイルを追加してnuxt.config.jsをちょっといじる必要がある。
[Getting Started | Vue.js Framework Components - Vuesax](https://lusaxweb.github.io/vuesax/vuesax/#install-in-project-via-npm-or-yarn)

```bash
npm install vuesax --save
npm install material-icons --save
```

```js:plugins/vuesax.js
import Vue from 'vue'
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css'
import 'material-icons/iconfont/material-icons.css';

Vue.use(Vuesax)
```

```js:nuxt.config.js
  plugins: [
    { src: '~plugins/vuesax.js' }
  ]
```

# 使い方

これまんま
[Buttons - ssr | Vue.js Framework Components - Vuesax](https://lusaxweb.github.io/vuesax/components/)

```vue:
<template>
  <div>
    <vs-button vs-color="primary" vs-type="filled">Primary</vs-button>
    <vs-button vs-color="success" vs-type="filled">Success</vs-button>
    <vs-button vs-color="danger" vs-type="filled">Danger</vs-button>
    <vs-button vs-color="warning" vs-type="filled">Warning</vs-button>
    <vs-button vs-color="dark" vs-type="filled">Dark</vs-button>
    <vs-button vs-color="rgb(134, 4, 98)" vs-type="filled">RGB</vs-button>
    <vs-button disabled vs-type="filled">Disabled</vs-button>
  </div>
</template>

<script>
</script>

<style>
</style>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/91558/eb19fc5a-806b-2dbf-e249-366d29cde89c.png)

ᕙ( 'ω') ｵｯｼｬﾚｰ

# その他
`@nuxtjs/vuesax`とかだれか出してくれんかな?
ターミナルからprコマンドで、Githubに[WIP]PullRequestを一瞬で出そう！

実装前に、[WIP]でプルリクはあげておきたい🤗
実装目的や方法を記述しておきたいし、開発メンバーに進捗状況を可視化したいため。

でもいくつかコマンド叩くのも、Github上で緑のボタンポチるのも面倒くさい😭

そこで、一瞬でどのブランチにいても最新のmasterからブランチを切ってくれて、
[WIP]でプルリクを出してくれる ```prコマンド``` を紹介します。

# 要は
PullRequestを出すprコマンドなんてものは存在しないので、
```$ vi ~/.bashrc``` などに関数として下記を定義して、
```$ source ~/.bashrc``` を叩いてください。

```
alias openpr='hub browse -- pull/$(git symbolic-ref --short HEAD)'
function pr() {
  if [ $1 ]; then
    git checkout master;
    git pull origin master;
    git checkout -b `date "+%Y%m%d"`_$1;
    git commit --allow-empty -m "feat:create pull request";
    git push origin `git rev-parse --abbrev-ref HEAD`;
    hub pull-request -m "[WIP]$2";
    openpr;
  else
    echo "第1引数でブランチ名、第2引数でPRタイトルがほしーの！"
  fi
}
```


これで準備完了。
```$ pr ブランチ名 プルリクタイトル``` を叩くだけ！

```
$ pr fix_hogefuga hogefugaのバグ修正
```

はい！プルリク作れました。終了。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105093/ec974868-11e1-e3bd-7d4a-2135fa8e14a5.png)


hubコマンドないよと言われたら、下記コマンドでインストールしてください。
最初は、Githubのユーザー名とパスワードを求められます。二段階認証設定してるならそれも。

```
$ brew install hub
```

# 解説・補足
##### ① masterブランチに切り替える
```
$ git checkout master
```

##### ② 最新のmasterリモートブランチを取得する
```
$ git pull origin master
```

##### ③ 日付_引数をブランチ名としてブランチを作成して、切り替える
```
$ git checkout -b `date "+%Y%m%d"`_$1
```

今回はブランチ名をユニークにしたいので、先頭に本日の日付を付与しています。

##### ④ コミット対象がない場合でもコミットする
```
$ git commit --allow-empty -m "feat:create pull request"
```

##### ⑤ 現在のブランチでpushする
```
$ git push origin `git rev-parse --abbrev-ref HEAD`
```

##### ⑥ PullRequestを出す
```
$ hub pull-request -m "[WIP]$1"
```

##### ⑦ ブラウザで該当リポジトリのGithubを開く
```
$ openpr
```

```
alias openpr='hub browse -- pull/$(git symbolic-ref --short HEAD)'
```

わざわざこれだけエイリアスとして切り出して関数内で読んでいる。それはなぜか関数から`hub browse -- pull/$(git symbolic-ref --short HEAD)`を呼ぶと、以下のように本来 `pull` になるものが `tree` になってしまい、プルリクではなくリポジトリのトップページに遷移してしまうためである。
`https://github.com/OWNER/REPOSITORY/tree/BRANCH`


# （応用）テンプレート利用の場合
テンプレートを利用している場合は、 ```hub pull-request -m "[WIP]$2";``` の部分だけ変更すれば大丈夫です。利用しているテンプレートのマークダウンをコピペしてください。改行は\nで。

```
alias openpr='hub browse -- pull/$(git symbolic-ref --short HEAD)'
function pr() {
  if [ $1 ]; then
    git checkout master;
    git pull origin master;
    git checkout -b `date "+%Y%m%d"`_$1;
    git commit --allow-empty -m "feat:create pull request";
    git push origin `git symbolic-ref --short HEAD`;
　　　　　　　　echo -e "[WIP]$2`\n\n# 目的・背景\n\n# テスト（こんな感じでコピペ。）" | hub pull-request -F -;
    openpr;
  else
    echo "第1引数でブランチ名、第2引数でPRタイトルがほしーの！"
  fi
}
```

##### テンプレートの作り方
対象リポジトリに ```.github``` ディレクトリと、その配下に ```ISSUE_TEMPLATE.md``` ```PULL_REQUEST_TEMPLATE.md``` を作れば良いです。そうすると、issueやPullRequest作成する際に、こんな感じで、テンプレートを呼んでくれます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/105093/8f8212f5-37f2-a509-5a90-53d56c976351.png)

# 備考
調べたら ```prコマンド``` って、あるんですね。印刷用にファイルを整形するコマンドだそう。
特に問題ないと思いますが気になるようでしたら、よしなに変更してください。
Prometheus、Grafana、cAdvisorによる監視をコマンド一つで行える「dockprom」

本記事は、細かいところを抜きにしてPrometheusやGrafanaが動く様子を見たい人向けです。

## 監視、可視化ツール
近年、PrometheusやGrafanaなどの監視、可視化ツールが話題です
これらのツールは様々な企業に採用されており、導入を考えている方も多いと思います
しかし、様々なツールを連携させる必要があるので構築は難しいです

例えばPrometheusは起動自体は簡単ですがGrafanaやcAdvisorと連携させる場合、設定項目が多く煩雑です
試しに使ってみたい人にとっては、学習コストが高すぎます

そこで今回紹介するのが`dockprom`です

## dockprom（https://github.com/stefanprodan/dockprom）
dockpromはPrometheusやGrafanaの連携などの煩雑な作業を`docker-compose`コマンド一つで行うことができます。

ドキュメントにあるように基本的には、下記コマンドだけで全てが連携されたコンテナ群が生成されます

```
git clone https://github.com/stefanprodan/dockprom
cd dockprom

ADMIN_USER=admin ADMIN_PASSWORD=admin docker-compose up -d
```

ただし、masterブランチをそのまま利用する場合`docker-compose.yml`の`user`を`root`にする必要があります

```
  grafana:
    image: grafana/grafana:5.2.2
    container_name: grafana
    volumes:
      - grafana_data:/var/lib/grafana
      - ./grafana/datasources:/etc/grafana/datasources
      - ./grafana/dashboards:/etc/grafana/dashboards
      - ./grafana/setup.sh:/setup.sh
    entrypoint: /setup.sh
    // 下の一行を追加
    user: root
    environment:
      - GF_SECURITY_ADMIN_USER=${ADMIN_USER:-admin}
      - GF_SECURITY_ADMIN_PASSWORD=${ADMIN_PASSWORD:-admin}
      - GF_USERS_ALLOW_SIGN_UP=false
    restart: unless-stopped
    expose:
      - 3000
    networks:
      - monitor-net
    labels:
      org.label-schema.group: "monitoring"
```

また起動後のコンテナに入り、パーミッションを変える必要があります

```
docker exec -it --user root grafana bash

# in the container you just started:
chown -R root:root /etc/grafana && \
chmod -R a+r /etc/grafana && \
chown -R grafana:grafana /var/lib/grafana && \
chown -R grafana:grafana /usr/share/grafana
```

## 構築後

いくつかのプリセットが用意されており、Docker Containerの情報などが一目で確認できるようになっています

以下画像は実際に動かしている様子です。CPUやメモリの使用状況、プロセスの数などを簡単に可視化することができました
ここまでで大体10分程度で構築が完了したので、試しに使ってみたい人にとってはdockpromはとても便利なツールだと思います

![dockprom.png](https://qiita-image-store.s3.amazonaws.com/0/132463/d5d63fe1-7248-4cb4-4dc9-e9f09f4ce359.png)
基礎Ruby on Rails Chapter1 ディレクトリ構造・コントローラ・アクション・ビューの作成

前 [基礎Ruby on Rails Chapter1 アプリケーションの新規作成](https://qiita.com/tseno/items/3cca8f8207003d269e08)
次 [基礎Ruby on Rails Chapter3 コントローラ](https://qiita.com/tseno/items/c8ba099a325fa2f8fc97)

## Railsアプリケーションのディレクトリ構造

### ディレクトリの役割

asagaoフォルダの中

- app  モデル、ビュー、コントローラ
- bin  各種スクリプトファイル
- config  ルーティングやデータベースなどの設定ファイル
- db  マイグレーションスクリプトやシートデータ
- doc  開発者向けのドキュメント
- lib  自作のライブラリやrakeファイル
- log  ログ
- public  アプリケーションを介さずに送信する静的なファイルを配信
- storage  Active Storageが利用する
- test  テストスクリプト
- tmp  一時ファイル


# 自分が作ったページをサイトのトップページにする


## コントローラとアクションの作成

### コントローラを作成する前に


```shell
cd ~/rails/asagao
```

次の内容のファイルをgenerators.rbで作成してconfig/initializersディレクトリの下に置く。

```ruby:config/initializers/generators.rb

Rails.application.config.generators do |g|
  g.helper false   # ヘルパーを生成しない
  g.assets false   # CSS, JavaScriptファイルを生成しない
  g.skip_routes true   # config/routes.rbを変更しない
  g.test_framework false   # テストスクリプトを生成しない
end
```
- bin/rails g コマンドが生成するファイルを減らして、Railsの学習を進めやすくする。

### コントローラの作成

「rails g controller コントローラ名 アクション名」でコントローラとアクションを生成できる。

```shell
$ bin/rails g controller top index
      create  app/controllers/top_controller.rb
      invoke  erb
      create    app/views/top
      create    app/views/top/index.html.erb
```

### ルーティングの設定

config/routes.rbに「root "top#index"」を記述する。

```ruby:config/routes.rb
# config/routes.rb
Rails.application.routes.draw do
  root "top#index"
end

```
http://localhost:3000/ を見る。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/67b22d5d-9504-dfaf-347f-80f6ea6c7444.png)

## ビューの作成

app/views/top/index.html.erbを編集する。

```erb:app/views/top/index.html.erb
<h1>こんにちは</h1>
<p>これからRailsの勉強を始めます。</p>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/f371505c-e657-4b4f-2460-e9abe9d253d2.png)

### 変数の表示

app/controllers/top_controller.rbにインスタンス変数を追加する。

```ruby
class TopController < ApplicationController
  def index
    @message = "おはようございます！"
  end
end
```

app/view/top/index.html.erbに変数を追加する。

```erb:app/view/top/index.html.erb
<h1><%= @message %></h1>
<p>これからRailsの勉強を始めます。</p>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88686/7c89a42c-0a1f-7576-3f4d-d5d14e67d7ae.png)


参考
[改訂4版 基礎 Ruby on Rails (IMPRESS KISO SERIES)](https://www.amazon.co.jp/%E6%94%B9%E8%A8%824%E7%89%88-Ruby-Rails-IMPRESS-KISO/dp/429500460X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=1536666358&sr=1-1)
ExpresssでSalesforceと連携するWebアプリをサクッと作成する　その１　OAuth認証編


## 前提条件

Node.jsのインストールは済んでいるものとします。

また、以下の設定でSalesforceの接続アプリケーションを作成済みとします。

|設定名| 内容|
|---|---|
|コールバックURL|http://localhost:3000/force/oauth/callback|
|OAuth 範囲| フルアクセス| 

※実運用する際には使用用途に限って接続アプリケーションを設定します。
今回の記事で最低限必要になるのは
「ユーザに代わっていつでも要求を実行が最低限必要」です。


## 準備

まずはexpress をインストール。

```
% npm install -g express-generator
```

## プロジェクトの作成

今回は「express-force」というプロジェクトを作成します。

```
% express --view=pug express-force
% cd express-force
% npm install
```


## Salesforceへ繋ぐ準備をする

salesforce-oauth2というパッケージを使用してOAuthの準備をします。

```
% npm install --save salesforce-oauth2
```

次に、routes/force.jsを作成します。

``` routes/force.js
var express = require('express');
var oauth2 = require('salesforce-oauth2');

var router = express.Router();

let callbackUrl = "http://localhost:3000/oauth/callback",
    consumerKey = "コンシューマ鍵",
    consumerSecret = "コンシューマ秘密鍵";

/* GET home page. */
router.get('/', (req, res, next) => {
    //res.render('index', { title: 'Express' });

    var uri = oauth2.getAuthorizationUrl({
        redirect_uri: callbackUrl,
        client_id: consumerKey,
        scope: 'api', // 'id api web refresh_token'
        // You can change loginUrl to connect to sandbox or prerelease env.
        //base_url: 'https://test.my.salesforce.com'
    });
    return res.redirect(uri);
});

router.get('/oauth/callback', (req, res, next) => {
    var authorizationCode = req.param('code');
 
    oauth2.authenticate({
        redirect_uri: callbackUrl,
        client_id: consumerKey,
        client_secret: consumerSecret,
        code: authorizationCode,
    }, function(error, payload) {

        // 内容を表示する
        console.log(payload);

        res.render('force', {payload: JSON.stringify(payload)});
    });
});

module.exports = router;

```

最後に、Payloadの情報を表示するためのページを用意します。

``` views/force.pug

extends layout

block content
  h1 Payload
  p #{payload}

```

最後に、app.jsを編集します。

```app.js

// ~~前略~~

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var forceRouter = require('./routes/force'); // この行を追加

var app = express();

// ~~ 略 ~~

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/force', forceRouter); // この行を追加

```

それでは、起動します。

```
npm start
```

ブラウザを開き、 http://localhost:3000/force にアクセスします。

すると、以下のように聞かれますので、「許可」を選択します。

![force_auth.png](https://qiita-image-store.s3.amazonaws.com/0/97156/285310ed-c1a1-22f5-66f9-fdd2c40042a0.png "force_auth.png")


承認後、以下のようにアクセストークンを含むPayloadが表示されればログイン成功です。

![payload.png](https://qiita-image-store.s3.amazonaws.com/0/97156/87b279ab-4c6c-d0d9-10f9-28a1be702467.png "payload.png")


[次回](https://qiita.com/hikaruright/items/910d788d60bfa9447127)は、このアクセストークンを使用したSalesforce情報の取得を行います。
Web WorkersでFile API(FileReader)は使える

ServiceW〇rkerではないです。Web Workersです。

### 概要

ふとFileが指定されたときに、Fileを使った処理をWorker側で処理が出来るかどうかを試した。

一応、Edge, Chromeで動いた。

Fileの内容によっては、負荷のかかる処理で止まることが考えられるので、それをごまかせる。

### Demo

CSVファイルを読み取り、有効な件数を表示するもの

http://plnkr.co/edit/CQCiJRWoaKeeTldjwUSa?p=preview

（複数ファイルが使えるPlaygroundって他にないかなぁ）


### code

demoが見れなくなった時用

```index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Hello worker</title>
  </head>

  <body>
    <input type="file" id="input_file">
    <div id="message">(ここにメッセージが入ります)</div>
    <script>
      window.addEventListener('load', function(){
        var file_el = document.getElementById('input_file');
        var message_el = document.getElementById('message');
        
        var worker = new Worker('worker.js');
        
        // workerの結果を受け取る
        worker.addEventListener('message', function(e){
          console.log('[Main]', e);
          message_el.textContent = e.data.message;
        });
        
        // ファイル選択時
        file_el.addEventListener('change', function(e){
          message_el.textContent = "処理中...";
          var file = file_el.files[0]
          console.log(file);
          // ファイルをWorkerへ渡す
          worker.postMessage(file);
        })
      })
      
    </script>
  </body>

</html>
```

``` worker.js
// CSVっぽいファイルデータを受け取り、適当に行数を数えるWorker
// 1行目 or カンマが2個未満はカウントしない
onmessage = function(e) {
  var file = e.data;
  if(!file){
    postMessage({message: 'データないっぽい'});
    return;
  }
  
  if(file.type != 'application/vnd.ms-excel'){
    postMessage({message: 'CSVファイルではないっぽい'});
    return;
  }

  var reader = new FileReader();
  
  // ファイル読み込み完了時
  reader.addEventListener('load', function(){
      /** @type String[] */
      var data = reader.result.split(/\r?\n/);
      reader.result = undefined; // 読み取り済みなので破棄。（意味ある？）

      // テキストとして読めている
      // console.log("data", data) 

      // 行数を数える
      var count = data.filter(function(s, idx){
        // 50MB,20万行でも一瞬で終わるので無意味処理で時間を稼ぐ
        for(var i=0; i<1000; ++i){
          s.replace(',');
        }
        return !(idx === 0 || s.replace(',').length < 2);
      }).length;

      // console.log("件数: "+ count);
      
      postMessage({message: "件数: "+ count});
      console.log('[Worker]', 'done');
  });
  
  // ファイルファイル読み込み
  reader.readAsText(e.data);
}
```
cut コマンドで連続した空白による区切りを処理したい

こんにちは。
cut コマンドは一個の文字を区切りとしますので、連続した空白などによる区切りを処理できなくて残念です[^1]。そこで```tr```の助けを借りた後に cut へ渡すシェルスクリプトを作りました（```cut.sh```）。

#### 実行例 ####
ただし同様なことを awk [^2], set, read を使って比較すると、それらの方が素直かもしれません[^3]。

[^1]: cut はタブ区切りがデフォルトという少し珍しいコマンドです。
[^2]: awk では ```-F'[ ]'``` と指定すると、一個の空白による区切り処理となります。
[^3]: 参考記事：「[bashで文字列分解する時、cutやawkもいいけど、setの方が早い、けどreadが最強](https://qiita.com/hasegit/items/5be056d67347e1553f08)」

```console
$ echo ' 1  2 3 ' | ./cut.sh -f2
2
$ echo ' 1  2 3 ' | awk '{print $2}'
2
$ echo ' 1  2 3 ' | (set $(cat); echo $2)
2
$ echo ' 1  2 3 ' | (read a b c; echo $b)
2
$ echo ' 1  2 3 ' | (read -a arr; echo ${arr[1]})
2
```

#### 複数行処理 ####

さらに ```read``` コマンドで複数行処理してみると、

```console
$ echo -e ' 1  2 \n3 4' | while read a b; do echo $b; done
2
4
$ echo -e ' 1  2 \n3 4' | while read line; do set $line; echo $2; done
2
4
$ echo -e ' 1  2 \n3 4' | while read -a arr; do echo ${arr[1]}; done
2
4
```

同様の処理を ```set``` および ```xargs -L1``` を使って行ってみましたが、少し苦しいです。

```console
$ echo -e ' 1  2 \n3 4' | sed -E 's/ +$//' | xargs -L1 -I% sh -c 'set %; echo $2'
2
4
```

#### ソース ####

```cut.sh
#!/bin/sh
while [ $# -gt 0 ]
do
  case "$1" in
    '-f'* )
      list="$(echo $1 | sed 's/^-f//')"
      [ -z $list ] && list="$2" && shift
      shift
      ;;
  esac
done

cat "$@" | tr -s ' ' | sed -e 's/^ //' | cut -d ' ' -f $list
```
NuxtのPWAモジュールで「A bad HTTP response code (404) ...」が発生する問題

# tl;dr
https://github.com/nuxt-community/pwa-module/issues/88

Workbox3が出るまで待て

## 何が起きてる？
Chromeでリロードするとページが読み込まれない。

## 解消策は？
ない。Workbox3の修正待ち

## ワークアラウンドは？
- Firefox: Use `Forget this page`
- Chrome: Reset the service worker
【非エンジニアによるIT勉強レポート】機械学習・ディープラーニング・強化学習の違い

本を読んでいて、機械学習・ディープラーニング・強化学習の違いが明確に記述されていましたので、メモ代わりに。

#機械学習

・統計的な方法論

・柔軟性のない機械に、人間並みの柔軟性を持たせるために必要なもの。それがビックデータ。

・教師データ＝元データ
　→これは機械では作れないので、人間が作る必要がある。
　→精度を高めるためには、万単位、億単位でのデータが必要。

・コンピュータが与えられたデータを繰り返し学習することが、機械学習。
　→データの中にあるパターンや経験則、そしてその重要度を自律的に認識する。

・特微量をどう設計するか。特微量が現実世界をうまく反映していれば、判定精度は上がるが、そうでなければデータを増やしても精度は上がらない。


#ディープラーニング（深層学習）

・熟練のようなエキスパートが特微量を設計していた機械学習の効率を画期的に飛躍させたのがディープラーニング（深層学習）。

・どの特徴に目を付けるべきか自体を、機械に検討させる。

・単純な総和ではなく、特微量をいくつか組み合わせて、「丸い」とか、「放射状」ばどのやや抽象的な概念を表し、それがどのように含まれているか何段階で判断することで、直感頼みだった特微量の設計が自動で最適化することができるようになった。

・一定の枠組み（フレーム）の中で、十分な量の教師データを準備すると、これまで人間が手作りで試行錯誤していた部分も含めてAIがデータに基づき調整することで、伝統的機械学習に比べて、低コストでそれと同等か上回る正解率に達しやすい。


#強化学習

・教師データなしに完全に機械に任せることができる課題に最適。

・目的や目標と制約条件が記述できる課題には、最適化がうまくいく。


#最後に

順としては、

機械学習＞ディープラーニング（深層学習）＞強化学習

の順でAIとしての性能が高い感じですね。
Docker 開発環境の中から GCP サービスへの認証を通すかんたんなやり方

GCP のサービスへの認証は、特に指定しない限り [Application Default Credentials (ADC)](https://cloud.google.com/docs/authentication/production) が使用されます。

これは環境変数 `GOOGLE_APPLICATION_CREDENTIALS` に認証鍵の JSON ファイルパスを入れるという方法です。
ここに正しい鍵ファイルを指定しておけば、基本的に GCP の API は特別な設定なしですぐに使うことができます。

## コンテナ内で認証を通すには…

しかし、アプリの実行を Docker コンテナの中でやりたい場合どうでしょうか？
コンテナの外側の環境変数はそのまま引き継がれることはないので、コンテナ内では認証が通らなくなってしまいます。

だからといって、認証鍵のファイルは機密情報なのでリポジトリに含めるのは避けたいところです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/10713/be646a31-caef-5daf-9202-9f9d2574e0db.png)

## docker-compose で解決する
docker-compose の機能をつかって、外側のマシンにある `GOOGLE_APPLICATION_CREDENTIALS` をそのままコンテナ内に持っていくことができます！

- `environment:` でコンテナ内にも `GOOGLE_APPLICATION_CREDENTIALS` をつくる（値は適当に `/key.json` とかでOK）
- `volumes:` で外側の `GOOGLE_APPLICATION_CREDENTIALS` のファイルを内側の `/key.json` にマウントする

```yml
version: '3.6'
services:
  app:
    ...
    environment:
      GOOGLE_APPLICATION_CREDENTIALS: /key.json
    volumes:
      - ${GOOGLE_APPLICATION_CREDENTIALS}:/key.json:ro
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/10713/a5250282-11cf-b523-07f8-ecb6bc4ecf29.png)
【非エンジニアによるIT勉強レポート】Ubuntu18.04のCLIで日本語表示できるようにしてみた

#環境
▼環境
Google Cloud Platform
▼スペック
f1-micro（vCPU x 1、メモリ 0.6 GB） 
ディスク：10GB
OS：Ubuntu18.04 
▼リージョン/ゾーン
us-west1（オレゴン） / us-west1-b

#何が起こったのか
Linuxのコマンド練習のためクラウド上でインスタンスを立てて勉強しておりました。
OSは**Ubuntu18.04**です。
クラウドたてて、OSインストールして、いざコマンド打っている最中に、CLIが日本語表示されなくて悪戦苦闘しました。。。

結果、CLI上で日本語表示できるようになったのですが、どのように行ったのかをその手順を記載していきます。

#大前提
まずは、全てコマンドで行いました。
あとは、インスタンスをたてて、OS：Ubuntu18.04 がインストールされているものとします。



#①日本語パッケージインストール
```
$ sudo apt install language-pack-ja-base language-pack-ja ibus-mozc
```
上記コマンドで日本語パッケージをインストール




#②日本語表示へ変換

```
$ LANG=ja_JP.UTF8
```
こちらのコマンドで日本語表示へと変換



#③日本語表示になっているか確認
```
$ date
```
今日の日付を出せば、日本語表示になっているか確認できます。




#最後に
ログアウトすると、また英語表示になってしまうんですよね。。。
再度SSHでログインしても、日本語表示できるようか見つけ、ここは方法を探していきたいと思います。




#～～～20190920　追記～～～
再度SSHでログインしても、日本語表示できるようになりました。

```
$ sudo locale-gen ja_JP.UTF-8

$ echo export LANG=ja_JP.UTF-8 >> ~/.profile

$ source ~/.profile
```
②もしくは③のあとに、上記コマンドを打てば、デフォルトで日本語表示されるようになります。
これで解決！ｗ
【PostgreSQL】インデックス必要？explainで確認できない

#はじめに
rubyを学びはじめて３ヶ月目！
キータを使ってみたかった！マークダウンで書いてみたかった！

ということで、railsで簡単なタスク管理アプリを作る際に起きたことを共有します。

**PostgreSQL（以下SQL）でインデックスを追加したのに、テストデータによって使われてないことがあります。**

**インデックスを使って検索されるために、いくつかの条件でデータを作って調べてみました。**
##【SQL】インデックスとは
特定のカラムにインデックスを追加すると、データベースのテーブルから高速で取り出せるそう。
https://tech.nikkeibp.co.jp/it/members/ITPro/ITBASIC/20000919/1/　

ということで、titleカラムにインデックスをつけました。

```ruby:schema.rb
create_table "tasks", force: :cascade do |t|
    t.string "title", limit: 500, default: "", null: false
 #省略
    t.index ["title"], name: "index_tasks_on_title"
    t.index ["user_id"], name: "index_tasks_on_user_id"
  end
```

ただ本当に、インデックスを使ってデータを取り出しているか気になったので調べてみました。

##【SQL】Explainというステートメント
ExplainはSQLでの実行計画が効率的に処理できているかを調べるステートメントです。

実行計画の処理については、
**Seq Scan**・・・テーブルを最初から最後といったように調べます。
**Index Scan**・・・Index情報から検索条件に合うインデックスを調べてくれます。
などがあります。

詳しく説明をすると一つの記事になりそうなので割愛します。

以下の記事がとてもわかりやすいスライドでまとめられています。
https://www.slideshare.net/MikiShimogai/postgre-sql-explain


#【titleにインデックスつけたのにインデックス使われてない！からはじまった検証】
###検証0：ダミーデータ(facker:Pokemon.name)５０件から“ゴースト“を探す
<img width="802" alt="スクリーンショット 2018-09-14 12.32.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/284917/ff6a2b03-15c2-d741-873c-ff01e82960a4.png">
*３行目のTask.where(title:"ああああああか").explainをコンソールに入力の結果*
　 **Seq Scan on tasks →シーケンシャルスキャン（上から順に調べる）が使われる：失敗**

#####○データ数が足りないのかと条件変更
###検証１：１００万件のデータ（title1~title1000000で“title1000”)を探す
```１００万件のデータが浮かばれないのでコード非表示 ``` 
　**→シーケンシャルスキャン（上から順に調べる）が使われる：失敗**

#####○検証１でtitleが繰り返されて生成されている(密度が薄い)のがだめだということで条件変更
下記記事より引用
**インデックス使用状況の検証**
>
非常に小さなテストデータを使用することも、結果に特に致命的な影響を与えます。
>
>100,000行から1,000行を選択する場合は、インデックスが使用される可能性がありますが、100行から1行を選択する場合はインデックスはまず使用されません。
>
なぜなら、100行はおそらく1つのディスクページに収まるため、1ページを逐次読み取るよりも高速な計画は存在しないからです。
https://www.postgresql.jp/document/10/html/indexes-examine.html

ということで、君のデータは密度が薄かったのだよといわれていたので、fackerを駆使しschemaファイルに濃いデータを生成する。

##検証２：２０万件のデータ(200件以上の異なるデータ)から“hogehoge”を探す


**10種類以上のtitleのデータ型に対応するデータを２０種類を１０００セット作る（２０×1000=２０００００件）**

```ruby:seed.rb
1000.times do |n|

  10.times do |n|
    title = Faker::Pokemon.name
    content = Faker::Pokemon.name
    limit_time = Faker::Date.between(2.days.ago, Date.today)
    status = Faker::Number.between(1, 3)
    priority_color = Faker::Color.color_name

    Task.create!(title: title,
                 content: content,
                 limit_time: limit_time,
                 status: status,
                 priority_color: priority_color,
                 )
  end

  10.times do |n|
    title = Faker::Color.name
省略
end
```
**Task.where(title:"hogehoge").explainを入力...**
<img width="741" alt="スクリーンショット 2018-09-14 12.36.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/284917/ae63be2b-5be7-7445-ec1a-5cd08ea45813.png">

**Bitmap Index Scan→インデックス使用される！：成功**


#まとめ

１.SQLでは最も効率の良いデータの実行計画（検索方法）を探します。
　Explainを使うと、どの実行計画を使おうとしているか表示してくれます。

2.単純な（１００件から1件を探してくるような）データを探す時は、シーケンシャルスキャン（上から順に探す）を使っている（たとえ、インデックスをつけたとしても！）

3.SQLでインデックスが使われるのは、データ数が多くてなおかつ、そのデータの種類が多い場合です。
RIA Flash PDF

##RIAとは
**Rich Interface Application**

webアプリケーションの利点を活かしつつ、デスクトップアプリケーション並みの操作性を実現したもの。
RIAには大別して2種類ある。

* Flash
* Ajax


##Flashとは
Adobeが提供しているインタクティブなコンテンツを作成するために提供している規格、ソフトウェア群の総称。グラフィック、サウンド、テキスト、ビデオなどを組み合わせて表現力豊かなコンテンツ作成が可能であった。パソコンだけでなく、携帯電話などでも利用されていた。Adobe Systemsは2017年8月にFlashのサポートを2020年に終了すると発表している。

##Ajaxとは
JavaScriptで実行される非同期通信のこと。ページの一部だけを動的に処理し、画面遷移を発生させない。GoogleMapの登場とともに広く認知されるようになった。


##PDFとは
Aodobeが提供している、電子書類ファイル形式。プラットフォームに関係なく、作成時と同じ状態で文章、画像などを閲覧できる。また多くのファイルがPDFに変換可能。


####PDFの利点

| 利点                   | 説明                                                         |
| ---------------------- | ------------------------------------------------------------ |
| マルチプラットフォーム | PDF閲覧ソフトが入っていれば、どの端末からでも閲覧可能        |
| ファイルの再現性       | 作成された環境によらず、状態を保持する。フォントなどもそのまま保持される。 |
| アクセシビリティ対応   | テキストの読み上げや、画面のハイライト、ショートカットキーのサポートなどができる |
| セキュリティの保持     | パスワードによって閲覧制限をかけることができる               |
| 検索、ナビ機能         | メタデータを利用し、ハイパーリンクやナビゲーション機能を持つ |
| ファイルサイズが小さい | データを圧縮する。                                           |
| マルチディア対応       | 映像、音楽などを挿入することが可能                           |
| フォーム               | 入力フォームやプルダウンなどを挿入することができる           |
Vuexのドキュメントを呼んでみたので書き連ねてみる

Vuexについてのドキュメントを読んでみたので、備忘録としてまとめてみます。

https://vuex.vuejs.org/ja/guide/

## Vuex入門
Vuexの中心となりのはstore
storeは基本的にアプリケーションの状態を保持するコンテナ

Vuexストアはリアクティブ
ストアの状態は直接変更することが出来ない
ミューテーションをコミットすることによってのみ状態を変更することかできる

## ステート
Vuexは単一ステートツリーを使用する
アプリケーションレベルの全ての状態が含まれており、
信頼出来る唯一の情報源である
状態の特定の部分を見つけること
デバッグのために現在の状態よスナップショットを撮ることを容易にする

とはいえ、モジュール性がサポートされており、storeをモジュール化する機能も備えている

componentからstoreの値を使いたいときにthis.$store.state.hogeをcomputedプロパティで書くのが一般的だが、冗長なため、mapStateを使うことで、簡略化できる
mapSateの中では、this.storeは省略でき、引数にstoreを取るメソッドをプロパティに持つオブジェクトを書く

ステートの名前が同じであれば文字列配列の形で書くと勝手にマッピングしてくれる

mapStateはオブジェクトを返すので、
他のローカルプロバティと共存させるときにmapStateの中身を展開させる必要がある
そのときにes6のスプレッド演算子は便利

## getter
ゲッターは引数に関数をとり、その関数の引数はstate
第2引数にはgettersのゲッター一覧が取得できる

コンポーネントからはthis.$store.gettersでアクセスできる
基本的にはゲッターはキャッシュされ、再計算されない

メソッドスタイルでの定義もでき、stateを引数にとるメソッドのなかで、関数を新たに定義する
Idでリストの中のデータを取得するときに便利
メソッドスタイルはvueのリアクティブシステムにおいてキャッシュされないので毎回計算が走る

Mapstateと同様にmapGettersも使える

## Mutation
ストアの状態を変更出来る唯一の方法
イベントハンドラ的存在

Mutationは別ファイルにtypeだけを記述する
使う時はimport

Payloadはオブジェクトで渡すと良い
1つのオブジェクトでtypeとペイロードをまとめることもできる

子コンポーネント内でミューテーションをコミットする際はthis.＄store.commitかmapMutationsを使う
mapMutationsはthis.store.commitへマッピングするもの。スプレッド演算子を使う

全てのミューテーションは同期的
非同期と状態変更は分離したい、いつ変更されたかわからなくなる

## Action
アクションは状態を変更するのではなく、ミューテーションをコミットする
アクションは非同期処理を行うことが出来る

引数分割束縛は、プロパティ名を関数定義の時点で固定し、実際にはオブジェクトが渡された時もそのオブジェクトのプロパティを束縛できる

commit、state,getterはコンテキストから呼びだすことができる

Dispatchを使ってアクションは呼び出せる

dispatchもcommitと同様にペイロードを送れる

外から成功時と失敗時のコールバック渡すといい感じにそれぞれmutationをコミットできる

Actionでの非同期処理はPromiseを返すといい感じ
Actionの中で別のactionをdispatchできる

Async awaitを使う時さらにいい感じに
Action定義時にasync付けれる

## Module
ストアを複数にわけることができる
モジュールは、オブジェクトの形

モジュールの中で取得するstateほローカルState
1番ルートのStateはrootStateでアクセスできる

モジュールの中でnamespaceをtrueにするとそのモジュールの中のactionsやmutationsを呼ぶ時にprefixを付けてくれる
namespaceは親モジュールから継承されるためモジュールにprefixを付けることなくモジュールアセットを使用することが出来る

モジュール内でgetterを使う場合親のgetterを呼び出す場合、
第4引数にrootgetterを受け取ることかできる

モジュール内で親actionまたはmutationにdispatchまたはcommitする場合、第3引数にroot:trueを設定する

## アプリケーションの構造化

アプリケーションの構造としては、以下が満たせていればOK

1アプリケーションレベルの状態はストアに集約される
2状態を変更する唯一の方法は同期的に行うミューテーションをコミットすること
3非同期的なロジックはカプセル化されるべきであり、アクションによって構成される

ファイルが大きくなりすぎた場合は、ゲッター、ミューテーション、アクションごとに別ファイルに切り出せる

## Plugin
状態のスナップショットを撮る時などに便利。
ミューテーションの前後でイベントをハンドリングできるので変更前と変更後での比較ができる

ストアの状態のディープコピーをするために
_.cloneDeep関数を呼ぶ

スナップショットを取るのは開発用だけである必要があるため、webpackのdefinePluginを使う

createLoggerでログ出力できる

## 厳格モード
VuexStoreの定義時にstrict:trueにすればおけ

ミューテーションハンドラの状態が外部から変更された時にエラーがなげられる

本番環境では厳格モードはしようしてはならない
ステートツリーに対して深い監視を実行するためパフォーマンスに影響が出るため

## フォームの扱い
厳格モードでv-modelを使用する時
ユーザーがインプットしたとき算出プロパティは更新しようとするがこの更新はミューテーションハンドラ内部で行われていないので、エラーが投げられる

### 対応策1
computedからストアのデータを取得。inputイベント時にmutationをコミットするようにすると厳格モードでも使用できる

### 対応策2
v-modelを使う方法もある
算出プロパティのゲッターとセッターを使う
Getterでstateの変更
Setterでmutationのコミット
Laravelコミッターになるためにプルリクを読んで英語を勉強しよう



こんにちは。
オープンソースに参加して、技術力を伸ばしたい!でも英語が!!っていう人結構いるのではないでしょうか?
そこで、ララベルにコミットできるようになることを目標にLaravelのマージされたプルリクを教材に英語を教えてみることにしました。

海外で働きたいとか金髪美女と付き合いたいとかではなくLaravelのコミッターになるために必要最低限の英語力を最短距離で身につけてもらうことを目標にして書いていこうと思います。

で、お前は誰だ!って方いると思うので一応紹介させていただきますが、私はToeic960点取得、IT企業での翻訳経験ありのプログラマーです。


それでは早速第１回目のお勉強を始めましょう。

対象のプルリクは、なるべくネイティブが書いたものでかつみなさんが興味を持てそうな内容を選ぶように心がけてみました。

今回の対象のプルリクはこれにしました。

**URL** :https://github.com/laravel/framework/pull/24655 |
**タイトル**: [5.7] Email Verification (Framework)
**概要**

```
This PR adds optional email verification to the typical "make:auth" setup. 
To utilize this, the end-user must only do "make:auth" and then add implements
 MustVerifyEmail to their User model. Everything should be automatic from there.
```



内容としては、ララベルのmake:authコマンドで作成したユーザー登録機能に簡単にメール認証機能を加えることができるようにしたというものです。
今までは、make:authでログイン機能を作成してもメール認証については自分で実装しなければならなかったので非常にありがたいですね。
このプルリクで追加された機能は[ドキュメント](https://readouble.com/laravel/5.7/ja/verification.html)にも記載されています。
(ちなみにこのプルリクはLaravel創業者のtaylorotwellさんによって作成されています。)

ではそれを踏まえて一度自分の力で概要を読んで見ましょう。

以下にいくつかの重要な単語をピックアップしました。

verify    = 認証する
PR        = Pull Request = プルリクエスト
typical   = 典型的な
temporary = 一時的に
avoid     = 避ける


読めましたか?
それでは一緒に見ていきましょう。

**タイトル**
[5.7] Email Verification (Framework)
[5.7] メールの認証(フレームワーク)

これはそのままなのでいいですね。

では概要について一行ずつ見ていきます。

```
This PR adds optional email verification to the typical "make:auth" setup.
(これは、通常の「make:auth」コマンドの仕組みにメール認証機能を追加するためのプルリクエストです。)
```
日本語に訳すとこんな感じです。直訳すると違和感があるのでちょっと意訳しています。
勉強のために直訳バージョンも見ていきましょう。

英語を読むときは文章の切れ目にスラッシュをいれて、スラッシュで分けた部分ごとに読んでいくと文章が理解しやすくなります。

```
This PR adds optional email verification / to the typical "make:auth" setup. 
このプルリクエストは任意のメール認証を追加します    / 典型的な "make:auth"の設定に
```

そうするとこんな感じになります。英語がすらすら読めるようになるまではこのようにスラッシュで区切って読んでみるといいでしょう。

スラッシュ入れる場所がわからない?
大丈夫です。毎回少しづつコツを紹介していきますので徐々にわかるようになるはずです。

まず一つ目のコツは文章の構造を把握することです。
英語は結論を先にいって後から情報を追加していくような感じになっていて主語+動詞+目的語の順番になっています。

主語   This PR  このリクエストは
動詞   adds     追加する
目的語 optional email verification  任意のメール認証を

目的語まで揃った時点で文章としてはなりたっているのでこの後ろにスラッシュをいれてスラッシュ前とスラッシュ後を別々に訳すことで長い文章でも読みやすくなります。
まあちょっとややこしいですが、名詞の後に to があったらその間にとりあえずスラッシュを入れてみるっていうのもありですね
verificationのように ~ionとなっていたらまず名詞です。その後にtoなどの接続詞がきていたらその名詞の前までの文章の説明が始まると考えて良いでしょう。


ちょっと長くなってしまったので残りの文章は簡単に説明して終わりにします。

**意訳**

```
To utilize this, the end-user must only do "make:auth" and then add implements MustVerifyEmail to their User model.
(エンドユーザーは "make:auth"を実行し、UserモデルにMustVerifyEmailを追加するだけでこの機能を利用できます。)
```

**直訳**

```
To utilize this,   / the end-user must only do "make:auth"    / and then    / add implements MustVerifyEmail / to their User model.
(この機能を利用するには、/ エンドユーザーは、"make:auth" を実行するだけです。 / そしてそれから / MustVerifyEmailを追加します。      / ユーザーモデルに)
```

直訳

```
Everything should be automatic / from there.
全て自動です。                   / そこからは
```


以上です。

わからないこととかもっとこういううことが知りたいとかあればコメント残してもらえると嬉しいです。

ではー！
vue.jsで子コンポーネントで受け取った値を更新するときはpropsで受け取ってdataで名前を変更して使う。

- カスタムタグからv-bindで子コンポーネントに「items」という名前でデータを渡す。
- 子コンポーネントのpropsで「items」を受け取る。
- 子コンポーネントのdataで「lists」にpropsの「items」をセットする。
- propsとdataで同じ名前で定義できない。ワーニングになる。
- 名前を変更してdataとして扱わないと後から更新しても反映されない。一覧データに新規追加した場合などで困る。

https://jp.vuejs.org/v2/guide/components-props.html#単方向のデータフロー

```blade.php
@section('content')
<list-component :items='{!! json_encode($lists)!!}'></parent-component>
@endsection
```

```ListComponent.vue
<template>
  <div>
    <child-component
      v-for="hoge in lists"
      v-bind:key="hoge.id"
      v-bind:hoge="hoge">
    </child-component>
    <button v-on:click="add()">新規追加</button>
  </div>
</template>

<script>
    import ChildComponent from './ChildComponent'

    export default {
        components: {
            ChildComponent
        },
        props: ['items'],
        data: function () {
            return {
                lists: this.items// ローカル用に差し替えて使う。
            };
        },
        methods: {
            add: function () {
                console.log('新規追加');
                this.sites.push({
                    id: 1,
                    name: ''
                });
            }
        }
        }
    }
</script>
```