OmniAICreator/Qiita-1.07M huggingface dataset:
【JavaScript】スタックトレースをconsole.traceで出力してみた

## スタックトレースをconsole.traceで出力してみた
console.traceというメソッドでスタックトレースが表示できるらしいので、使ってみました。
MDN公式では`Outputs a stack trace to the Web Console.`と説明されています。
以下のコードを実行してみました。

```javascript
const func1 = () => {console.trace("TRACE!");}
const func2 = () => {func1();} 
func2();
```
<img width="420" alt="Screen Shot 2019-04-03 at 23.47.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/250231/d0dfbee4-362e-3954-ebbc-4771f6a27a79.png">
関数呼び出しのがトレースされていますね！
使い道が多くて便利そうなメソッドです。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
Macにgoをインストールするまで

# macにgoをインストールするまで

## インストール手順

### [anyenvのインストール](https://github.com/anyenv/anyenv)

```bash
brew install anyenv
# .bash_profileを直接変更しても良い
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
exec $SHELL -l
```

### [goenvのインストール](https://qiita.com/furuhashin/items/9c0f10045225f40d4189)
```bash
anyenv install goenv
# インストールができてるか確認できる
goenv -v

exec $SHELL -l
goenv install -l
# 何もなければ最新のバージョンをインストール
goenv install 1.12.1
# 特定ディレクトリ配下で異なるバージョン使いたければlocal使う
goenv global 1.12.1

# インストールできてるか確認
go version
```

### GOPATHの追加
hadaは$HOME直下にgoディレクトリを作成してそこをGOPATHにした

最終的な`.bash_profile`

```bash:.bash_profile
export GOPATH=$HOME/go
export GOBIN=$GOPATH/1.12.1/bin
export PATH=$GOPATH/bin:$PATH
eval "$(anyenv init -)"
```

`go env`とかでgo周りの環境変数が正しく設定されてるか確認
GOPATHにバージョン名のディレクトリとかできるけど気にしない
`/Users/yota.hada/go/1.12.1`

### depを入れる
```bash
go get -u github.com/golang/dep/cmd/dep

# GOBINを設定してればdepコマンドが使えるはず
dep version
```

### vscode使ってる場合
goの拡張機能入れる

settingにGOPATHを追加する

```json:settings.json
"go.gocodeAutoBuild": true,
"go.gopath": "/Users/yota.hada/go/1.12.1",
```

最初にgoファイル開いたときに推奨のライブラリとかおすすめされるのでインストールしておく
Nuxt.jsでAPIサーバーを建てる

# 趣旨
Nuxtの便利な機能を使ってAPIサーバーを建てます。
なお、筆者は初学者のため内容の正確性を保証できません。間違いの指摘やより良い方法、関連して知っておくと良いことなどありましたら、コメント頂けると幸いです。

Nuxtの公式ホームページ（https://nuxtjs.org/api/configuration-servermiddleware） を参考に書いていきます。

## 目標
あくまでAPIサーバーを動作させることが目的なので、ものすごく単純な`/api/test`にアクセスしてなにか適当な文字列を表示させるだけのものを作成します。

### 動作環境
* Nuxt.js - v2.5.0
* Express - 4.16.4

## Expressでバックエンドを書く
プロジェクトフォルダ直下に`api`フォルダとその内部に`index.js`を置きます。

```
project-name/
  ├api/
  │  └ index.js
  ├components
  ├layouts
  ︙ 省略
```

prefixをapiにしたい場合はフォルダー名を`api`に統一する必要があるそうです。

そして、`index.js`を記述していきます。

```javascript:/api/index.js
const express = require('express');
const app = express();

app.get("/test", (req, res) => {
  res.send("API server works fine");
})

module.exports = {
  path: '/api',
  handler: app
}
```

Expressの詳細な仕様についてはこちらのリンクを参照してください。
https://expressjs.com/


## serverMiddleware
APIサーバーの記述が終わったので、あとはNuxtのサーバー機能を利用して建てます。
`nuxt.config.js`に以下の記述をします。

```javascript:nuxt.config.js
module.exports = {
// ...前略
  serverMiddleware: ['~/api/index.js']
}
```

あとは、`npm run dev`で実際に動かしてみて`localhost:3000/api/test`にアクセスした際にブラウザ上で`API server works fine`が表示されたら確認終了です。


## 個人的な懸念点
今回は単純化するため`index.js`にapiを記述しましたが、通常のケースだとファイルで分ける場合が多いと思われます。
その場合、例えば以下のディレクトリ構成時に`users.js`に変更を加えてもホットリロードされません。

```
api/
  └routes/
    └users.js
  └index.js
```
そのため、何度も`npm run dev`を繰り返し行っています。もし、なにか解決策等ございましたらコメント頂けると幸いです。
[RUBY]  %記法　

##%記法

「’ ‘」や「” “」に対するエスケープを省略するためのもの。

###%w

文字列の配列の("")
などを省略することができる。

例：

```
puts ["test1", "test2", "test3"]
```

%wを使えばスッキリ書くことができる。

```
puts %w(test1 test2 test3)
```


また、%Wと%wの違いは以下の通り。
>%W→変数の式展開あり
%w→変数の式展開なし

###%と%Q

「” “」(ダブルクォーテーション)の代替をする。

例：

```
puts "\"テスト\" \"サンプル\""
```

```
puts %("テスト","サンプル")
```
###さいごに

まぁ、%wがめちゃ便利だということがわかりました。
bashでgitを快適に使う設定（補完とプロンプト）

# はじめに
これまでWindows+tortoiseGitを使ってきたのだが、最近LinuxやMacでgitをCLIから使うことが多くなった。bashでgitを快適に使うために設定した項目をメモしておく。よく知られている設定だが、何でもアウトプットするのが大事とものの本で読んだので。

# 環境
Ubuntu 18.04

# 必要なスクリプトを探す
必要なのは、bashのプロンプトにリポジトリの情報を出力するためのgit-prompt.shと、コマンド補完をしてくれるgit-completion.bash。どちらもgitに同梱されているが、存在するディレクトリはgitのインストール方法によって違うらしいので、要検索。findコマンドは「許可がありません」の警告がうるさいので、/dev/nullにリダイレクトするとよい。

```bash
$ find / -name "git-prompt.sh" 2>/dev/null
/home/linuxbrew/.linuxbrew/etc/bash_completion.d/git-prompt.sh
/home/linuxbrew/.linuxbrew/Cellar/git/2.21.0/etc/bash_completion.d/git-prompt.sh

$ find / -name "git-completion.bash" 2>/dev/null
/home/linuxbrew/.linuxbrew/share/zsh/site-functions/git-completion.bash
/home/linuxbrew/.linuxbrew/etc/bash_completion.d/git-completion.bash
/home/linuxbrew/.linuxbrew/Cellar/git/2.21.0/share/zsh/site-functions/git-completion.bash
/home/linuxbrew/.linuxbrew/Cellar/git/2.21.0/etc/bash_completion.d/git-completion.bash
```

# .bashrcの編集
```bash
source /home/linuxbrew/.linuxbrew/etc/bash_completion.d/git-completion.bash
source /home/linuxbrew/.linuxbrew/etc/bash_completion.d/git-prompt.sh
GIT_PS1_SHOWDIRTYSTATE=true      # *:unstaged, +:staged
GIT_PS1_SHOWUNTRACKEDFILES=true  # %:untracked
GIT_PS1_SHOWSTASHSTATE=true      # $:stashed
GIT_PS1_SHOWUPSTREAM=auto        # >:ahead, <:behind
GIT_PS1_STATESEPARATOR=':'

export PS1='\[\e[34m\]\W\[\e[0m\]\[\e[32m\]$(__git_ps1 " (%s)")\[\e[0m\] \$ '
```

プロンプトの出力は環境変数`PS1`によって設定できる。現状の値を`echo $PS1`で出力し、それをもとに設定するとよい。また、エスケープシーケンスによって様々な情報が出力できたり、色を付けたりできる。詳しくは[この記事](https://qiita.com/amidaku/items/841d62335a03792424d5)などを参照のこと。考慮した情報は次のとおり。

- ホスト名`\h`：ターミナルのタイトルに表示されているので不要
- ユーザー`\u`：切り替えることが少ないので不要
- 現在のディレクトリ（フルパス）`\w`：欲しいが、深い階層になったとき、プロンプトの大部分が占められそう
- 現在のディレクトリ（ベース）`\W`：上位階層まで表示してほしいタイミングがありそうだが、シンプルなので採用

コマンド`__git_ps1`でリポジトリに関する情報（ブランチ名など）を出力できる。引数にフォーマットを指定できるので、括弧をつけるなりお好みで。また、各種変数を設定することで、リポジトリの状態を出力ができる：

- `GIT_PS1_SHOWDIRTYSTATE`: staged/unstaged fileの有無
- `GIT_PS1_SHOWUNTRACKEDFILES`: untracked fileの有無
- `GIT_PS1_SHOWSTASHSTATE`: stashの有無
- `GIT_PS1_SHOWUPSTREAM`: upstreamに対するahead/behind
- `GIT_PS1_STATESEPARATOR`: ブランチ名と上記の情報とを区切る文字の指定。デフォルトは半角空白

詳細はgit-prompt.sh内の説明を参照のこと。特に`GIT_PS1_SHOWUPSTREAM`が便利だと感じた。pullするタイミングを忘れないので。

# おわりに
うっかりmasterブランチで作業しちゃった、みたいなことが少なくなった気がする。また、ブランチ名などの補完が聞くようになったおかげで効率が多少上がった気もする。
Indesignで自動組版するときのハマりポイント

自動でデータ流し込みをしてデザインデータを作りたい。データ結合を使ってみたい。

冊子、名刺、いろいろなものを作成する際に考えることではないでしょうか。その中でも一番簡単と言われるIndesignでの自動組版について、様々な罠にハマったので解説します。

# エラーメッセージ：選択した変数ライブラリが無効です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/242070/76d64c22-9dbe-dded-d124-b0fe796f4339.png)

**原因：インポートしたデータソースファイルが不正である**

Indesignでは `.csv`ファイルを読み込むことができます。このファイルのカラム（一番上の行）には必ず全てにデータが含まれるようにしてください。

また、文字コードを`.csv(UTF-8)`形式で保存しなければなりません。ExcelやGoogle Spreadsheetから保存した段階では，違う文字コードが設定されていることが多いためそのまま利用するのではなく，一度テキストエディタ等で開いて保存し直す必要があります。

# エラー：Illustratorで作ったテキストがIndesignで利用できない
**原因：IllustratorテキストをIndesignへコピー&ペーストするとアウトライン化されてしまう**

ほとんどの人はデザインデータをIllustratorで作って、Indesignへ持ってくると思いますが、 上述の通りそのままではデータ結合ができないのでご注意ください。ドキュメントの「配置」を使ってIllustratorファイルをIndesignへ載せることは不可能です。オブジェクトを選択して、コピー&ペーストすることのみが有効です。

解決策として，Indesignでデータフィールドプレースホルダーを改めて作ります。自動組版のためには、 データフィールドプレースホルダーというものが必要です。これは何かというと、データソースのカラムを配置したい場所に仮に置いておく、テキストボックスのことです。フォントも再度設定しなければならなく面倒ですが、必要な作業なので我慢しましょう。

# Tips：名刺データの流し込み
<img width="541" alt="スクリーンショット 2019-04-11 19.27.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242070/ee9fbe76-b979-6476-ac90-a0416df5e0f4.png">
単ページに設定しておきましょう。名刺や片面ビラなどを作るときには単ページで作成しましょう。`ファイル>ドキュメント設定>見開きページ`のチェックを外すことで設定できます。見開きページだと、結合面で塗り白が重なってしまいます。

# エラーメッセージ：データソース内に見つからないデータプレースホルダーが少なくとも１つあります。
<img width="501" alt="スクリーンショット 2019-05-28 12.47.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242070/ceee275d-8afd-e02e-a549-b6fce4b098eb.png">

**原因：データプレースホルダーとカラムの名前が異なる**
データプレースホルダーというのは，`<< >>`で囲まれた文字の入っている，テキストボックスのことです。一語一句でも間違っていると同じであると認識されないため，気をつけてください。
https://forums.adobe.com/thread/934669

**原因：ページを作成していない**
これは初歩的なミスですが，マスターページを元にして自動組版する場合にもページを作成して置かなければなりません。マスターページをオーバーライドしただけのもので構いません。もしページがない場合，データ結合のプレビューはできるが結合ドキュメントを作成できないという状況になっているでしょう。

**原因：無効なハイパーリンクが挿入されてしまっている**
自動組版の２回目以降，つまりテンプレートを再利用してデータを作成しようとしたときに起こります。

なぜなら，データプレースホルダーはデータソースの情報を保存しています。テキストボックスそれぞれがデータソースのパスを保持しています。データソースのパスを持ったままのテキストボックスに新しいデータソースのカラムを追加しても，古いデータソースのパスは上書きされることなく保持され続けるため，そのパスが参照できず，上記のようなエラーが発生します。

解決策として，まず`ウィンドウ>インタラクティブ>ハイパーリンク`から以下のようなウィンドウを開いてください。
<img width="251" alt="スクリーンショット 2019-05-29 14.31.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242070/5fac2f3c-5359-f0b6-eade-7b10d0c50382.png">
画像のハイパーリンク11~7は，データプレースホルダーの位置を指定するドキュメント情報があるので問題ありません。この場合は，マスターBページです。しかし，ハイパーリンク6~3はドキュメント情報が入っていないことがわかると思います。この場合，古いデータソースのパスが残っているので，削除しましょう。

なお，赤いポッチを触ると`URLを使用できません`といわれますがそのままで問題ありません。

# 最後に
以上のことを守れば，簡単なデータ結合は完璧にこなせると思います。ご愛読ありがとうございました。

詳しいことは公式ドキュメントをご参照ください。でもAdobe公式って、文字ばかりで読みづらいと思うのは僕だけですか？
https://helpx.adobe.com/jp/indesign/using/data-merge.html
996.ICU

最近Githubに話題になっている996.ICUですが、中国のプログラマーたちは自分の権利を守ろうと提唱しています。
996とは毎日　朝９時出社、夜９時退社で毎週６日働くことです。

最低72時間で標準の40時間遥かに超えています。
長期間続くと体調は悪くなり、ICUで崩れた体を回復するという感じです。

Open Source系は反996.ICUのライセンスを許可することで働きやすい環境を作りましょう。

短い期間で20万超のstarが獲得しました。すごく関心度は高いですね。

皆様も体調管理をちゃんとやりましょう。

![Screenshot_20190403-232308.jpg](https://qiita-image-store.s3.amazonaws.com/0/346425/3f06eac0-ab3c-0c15-05f7-4cf604d79856.jpeg)

https://github.com/996icu/996.ICU
VirtualBoxのゲストOSからホストOSへのpingが通らない場合の対処法

初めに
-------
VirtualBoxのホストオンリーネットワークでゲストOSからホストOSにPingが通らず苦労したので、その対処方法を記録しておきます

環境
---
ホストOS：Windows10
ゲストOS：Kali-Linux2019.01
仮想化：VirtualBox6.0

ネットワークの設定
---
１．VirtualBoxの「ホストネットワークマネージャー」でVitrtualBoxHost-OnlyEthernetAdapterを設定

２．VirtualBoxでKali-Linuxの「設定」-「ネットワーク」で以下を設定
　アダプター１：ホストオンリーネットワーク

３．Kaliでアダプター１に静的IPアドレスを割り当てる

問題
---
Kali（ゲストOS)からWindows（ホストOS）へpingが通らない

原因
---
Windows側のファイアウォールの設定

対処方法
---
WindowsDefenderの「詳細設定」-「受信の規則」で、「仮想マシンの監視（エコー要求ICMpv４受信）」を有効化

これで、ゲストOSからホストOSへのpingが通るようになりました
tmuxのマウス操作でドラッグしたらbufferにコピーするし、clipboardにも保存する

最近 `tmux` を導入したんだが、ゆとり新卒プログラマなのでマウス操作もしたいこと、ありますよね:raised_hand:

ちなみに

```
$ tmux -V
tmux 2.5
```

## マウス操作を可能にする
`tmux` で検索するとめちゃめちゃ上位に出てくる記事
[tmuxチートシート](https://qiita.com/nmrmsys/items/03f97f5eabec18a3a18b)

とりあえずこれだけ書いておく

```.tmux.conf
# 上記の記事のコード
set-option -g mouse on
bind-key -n WheelUpPane if-shell -F -t = "#{mouse_any_flag}" "send-keys -M" "if -Ft= '#{pane_in_mode}' 'send-keys -M' 'select-pane -t=; copy-mode -e; send-keys -M'"
bind-key -n WheelDownPane select-pane -t= \; send-keys -M

# コピーモードをvi風にする
setw -g mode-keys vi
```

これでマウス操作ができるようになります。

## tmuxのマウス操作について
ドラッグするとコピーができます。
`Ctrl-b + ]` でペーストできます。
でも、でも、私は`Command-v`でペーストしたい弱小macユーザー故、対策を模索しました。

### 検索したら一番上に出てくる
[tmuxとMacのクリップボードを共有する（copy-mode, vim）](https://qiita.com/upinetree/items/cd80bc7865c52091be10)
全くうまくいかない、そもそもこのユーザーはドラッグでコピーすることを想定していない

### 謎のブログ
[Everything you need to know about Tmux copy paste](http://www.rushiagr.com/blog/2016/06/16/everything-you-need-to-know-about-tmux-copy-pasting/)

>Copy from tmux buffer to system buffer (clipboard)
In newer iTerm2, you need to enable one option in settings to copy a text into both tmux buffer and clipboard at the same time. Go to iTerm2 > Preferences > “General” tab, and in the “Selection” section, check the box which says “Applications in terminal may access clipboard” if it isn’t checked. See here for a screenshot.

ふむ、よくわからん。

### 公式のコマンド紹介
http://man.openbsd.org/OpenBSD-current/man1/tmux.1
うーん、よくわからん。
でも`tmux list-keys`でkeyを出力できそう

```
# いっぱい出力されるので、grep
$ tmux list-keys | grep copy-mode-vi

# それっぽいのを見つけた
bind-key    -T copy-mode-vi MouseDragEnd1Pane send-keys -X copy-selection-and-cancel
```

多分`MouseDragEnd1Pane`はドラッグがendしたらという意味だと予想する
以下の記事を参考にしつつ
[tmux2.4からvi-copyがcopy-modeに変わっていた](https://qiita.com/jyotti/items/5383d909f7307762fefa)
`.tmux.conf`に追記

```
bind-key -T copy-mode-vi MouseDragEnd1Pane send-keys -X copy-pipe-and-cancel "reattach-to-user-namespace pbcopy"
```

できた！:relaxed:
`brew install reattach-to-user-namespace`忘れないようにな
JSPのformのパス

##サーブレット・JSP　formのパス

formのactionのパスについて

eclipseにて開発中ですが
formのパスで悩んだので記録

test.jsp 
から
サーブレットクラスの　
~~RetweetBot2.java~~
foo.java
にパラメータを送信したい時のパス

~~RetweetBot2.java~~foo.javaの修飾名は下記のものです。
/sample/src/pkg/foo.java

↓のコードだと404エラー

```html:test.jsp
<form action="/sample/src/pkg/foo" method="post">
    <p>送信したいテキストを入力して下さい：
      <input type="text" name="hoge"></p>
      <input type="submit" value="送信">
</form>
```
。。。。

↓のコードだと送信成功しました。

```html:test.jsp
<form action="/sample/foo" method="post">
    <p>送信したいテキストを入力して下さい：
      <input type="text" name="hoge"></p>
      <input type="submit" value="送信">
</form>
```

理由は勉強中です。まだ不明です。

理解できたら追記予定です。

・2019/04/06 修正
サーブレットクラス名に誤りがあった為
(誤)RetweetBot2.java　→　(正)foo.java
に修正しました。
pythonでAtCoder -ABC006-

# 対象
- AtCoder初心者（緑よりもランクが下の人）
- pythonがそれなりにかける人
- 数学やプログラミングに対する深い理解を持っていない人
    - Ex) DP, 深さ優先探索, メモ化再帰の実装ができない

# 動機
AtCoderは全ての問題に対して解説スライドが存在するが
解説をみて何となく理論を理解しても独力で実装ができない場合が多かった。

他の提出を見ても親切に解説コメントがついている回答はあまり存在せず、理解を実装に落とすことに苦労したため、簡単にでも解説がある回答はないものかと思い立ったことが動機である。

同様の苦労をしている人のためにも、稚拙なコードではあるが何らかの参考になればと思い
私の回答とそれに対する簡単なコメントを付与したコードをアップロードする。

# 実行環境
- python3

# A
```python
print('YES' if int(input()) % 3 == 0 else 'NO')
```
pythonは単純な`if else` が1行で書けます。

# B
```python
N = int(input())
S = [0, 0, 1]
if N <= len(S):
    print(S[N-1])
else:
    for i in range(len(S), N-1):
        S[i % 3] = sum(S) % 10007
    print(sum(S) % 10007)
```
トリボナッチ数列と呼ばれる数列を計算する問題。
注意点として
- 和を素直に持ち続けるとTLE(Time Limit Exceeded)になってしまう
ことが挙げられます。
この対策のために和に対して10007の余りをとりながら処理を実行しています。

# C
```python
N, M = map(int, input().split(' '))

if M % 4 == 0:
    ans = (M//2-(M//2-N)*2, 0, M//2-N) if M//4 <= N <= M//2 else (-1, -1, -1)
elif M % 4 == 2:
    ans = (M//2-(M//2-N)*2, 0, M//2-N) if M//4+1 <= N <= M//2 else (-1, -1, -1)
else:
    ans = (M//2-(M//2-N)*2-1, 1, M//2-N) if M//4+1 <= N <= M//2 else (-1, -1, -1)
print(ans[0], ans[1], ans[2])
```
カオスな数式ですが、条件式から読み解くとわかりやすいかと思います。

可能な限り赤ちゃんで構成すると必要最小人数がわかり、可能な限り大人で構成すると必要最大人数が分かります。指定の人数がこの範囲に入っていない場合は構成ができません。

組み合わせの中身については、赤ちゃんを1人減らして大人を2人増やすと足の数を変えずに人間の数を変えることができるので、求まります。足が奇数の場合1人、偶数の場合は０人でOKです。

# D
```python
from bisect import bisect_left
N = int(input())
C = [int(input()) for _ in range(N)]
S = [0]
for c in C:
    i = bisect_left(S, c)
    if len(S) == i:
        S += [c]
    else:
        S[i] = c
print(N - len(S) + 1)
```

# 終わりに
B問題が普段より難しかったですね。
次回もよろしくお願いします。
暗号理論2-2

## 初等整数論(2)
### 2.3 O記法とΩ記法
簡単にアルゴリズムの**計算量**について説明する.
あるアルゴリズムの計算量とは,

- 時間計算量 … そのアルゴリズムの処理時間を評価するための概念,または
- 空間計算量 … アルゴリズムを実行するうえで必要になる記憶容量の大きさを評価するための概念

を表すものである.
暗号理論では計算量評価が重要になる.
計算量評価を簡単にするために $ \mathcal{O} $ **記法**と $ \Omega $ **記法**を利用する.

#### Def 2.3.1
>
$ k $ は自然数, $ X , Y \subset \mathbb{N}^k $, $ f : X \to \mathbb{R} , g : Y \to \mathbb{R} $ はともに関数であるとする.
ある実数 $ m,c \in \mathbb{R} $ が存在して, $ n\_i \geq m (1 \leq i \leq k) $ を満たすすべての数の列 $ (n\_1,\dots,n\_k) \in \mathbb{N}^k $ に対して次の性質が成り立つとき, $ f = \mathcal{O}(g) $ または $ g = \Omega (f) $ と書く.
・$ f(n\_1,\dots,n\_k) \leq cg(n\_1,\dots,n\_k) $
$ f = \mathcal{O} (g) $ が成り立つとき, $ f $ は高々 $ g $ の**オーダー**であるという.

例.
$ k = 1 $ の場合,つまり $ f $ と $ g $ が一変数関数の場合を考えてみる.
このとき $ f = \mathcal{O}(g) $ は, $ \exists m , c \in \mathbb{R} \ s.t. \ \forall n \geq m \ (n \in \mathbb{N}) \Rightarrow f(n) \leq cg(n) $ を表している.

$ f(n) = 2n^2 + n + 1 $ のオーダーを求めてみよう.
$ 2n^2 + n + 1 \leq 3n^2 $ は $ n = 1 $ では成り立たないが,$ n \geq 2 $ では成り立つので, $ 2n^2 + n + 1 = \mathcal{O}(n^2) $ が成り立つ.つまり $ f $ は高々 $ n^2 $ のオーダーである.

### 2.4 加法の計算量
多くの暗号方式では,長い整数の加減乗除をする.計算に必要になる時間を評価するためには,その演算がどの程度長くかかるかを調べなくてはならない.ここではまず,実際のコンピュータで行われている計算方式に寄り添って加減乗除に必要な計算時間を評価しよう.

$ a,b \in \mathbb{N} $ は二進展開で与えられた自然数とし, $ \mathrm{size}(a) = m,\mathrm{size}(b) = n $ とする.

例.二進数の加法(ビット和)

$ a = 10101 , b = 111 $ とする.

```math
\begin{matrix}
  　　　 & 1 & 0 & 1 & 0 & 1 \\
　　　+  &   &   & 1 & 1 & 1 \\
繰り上げ &   & 1 & 1 & 1 &   \\
　　　=  & 1 & 1 & 1 & 0 & 0
\end{matrix}
```

二つのビット和が時間 $ 1 $ を必要とすると仮定する.(時間 $ 1 $ は一回の計算あたりの計算時間を表しており,実際の時間はコンピュータの環境により変動する.)気を付けておきたいのは,上記の計算では繰り上げが生じているが,三つのビットを一度に計算するのではなく例えば $ 0+1+1 $ ならば $ (0+1)+1 = 1+1 = 10 $ のように2回計算するので,ここでの計算時間は $ 2 $ となる.このことに気を付けると二進数で表された二つの整数の加減に必要な時間は $ \mathcal{O}(\mathrm{max}\\{m,n\\}) $ であることが結論付けられる.[^1]掛け算と割り算については省略する.

>
1. $ a $ と $ b $ の和は時間 $ \mathcal{O}(\mathrm{max}\\{ \mathrm{size}(a),\mathrm{size}(b) \\}) $ を必要とする
2. $ a $ と $ b $ の積は時間 $ \mathcal{O}((\mathrm{size}(a))(\mathrm{size}(b))) $ を必要とする
3. $ a $ を $ b $ で割って余りを求める除法は時間 $ \mathcal{O}((\mathrm{size}(b))(\mathrm{size}(q))) $ を必要とする.ここで $ q $ は商である.


### 2.5 多項式時間
暗号として運用可能なアルゴリズムは,秘密情報を伝達する上ではある程度効率的でありながら,効率的に破られないように設計されていなければならない.これは,暗号化された情報の復号は暗号化方式に則った手法であれば素早く実行できるが,そうではない場合は容易に解読されることのないように実装されていなければならないということを意味している.ここでは復号や解読が**効率的**に行われるとはどういったことを指すのかを厳密に定義する.

#### Def 2.5.1
>
あるアルゴリズムは入力として整数 $ z\_1, \dots, z\_n $ を受け取るとする.
負でない整数 $ e\_1,\dots,e\_n $ が存在して,そのアルゴリズムの実行時間が
$$ \mathcal{O}((\mathrm{size}(z\_1))^{e\_1} (\mathrm{size}(z\_2))^{e\_2} \cdots (\mathrm{size}(z\_n))^{e\_n}) $$ であるとき,このアルゴリズムは**多項式時間**をもつという.

今後はアルゴリズムの実行時間が多項式時間であるとき,そのアルゴリズムは効率的であるとみなすことにする.

[^1]: 詳しくはこのサイトを参考にして下さい. [算術演算の計算量](http://azapen6.hatenablog.com/entry/2013/12/31/235453)
ansibleのvmware_guestモジュール

# memo

* ``hosts``にIPを書いた分だけ、仮想マシンを作る
* パラメータは全部``conf.yaml``に書く
* ``template``の場所はある程度適当でも、都合良く解釈してくれそう

# playbook

```main.yaml
---
- hosts: localhost
  vars_files: 
  - conf.yaml
  sudo: yes
  tasks:
    - include: createvm.yaml
```

```createvm.yaml
---
- name: Create VirtualMachines from template
  with_inventory_hostnames: 
    - target

  vmware_guest:
    # vCenter情報
    hostname: "{{ vcenter_ip }}"
    username: "{{ vcenter_username }}"
    password: "{{ vcenter_password }}"

    # データセンター情報
    datacentername: "{{ datacenter_name }}"

    # esxiホスト情報
    esxi_hostname_ip: "{{ esxi_host_ip }}"

    # 仮想マシン設定
    name: "vm-{{ item }}"
    template: "{{ mytemplate }}"
    state: poweredon
    folder: "{{ datacenter_name }}/"
    wait_for_ip_address: yes
    validate_certs: no

    # 仮想マシンのディスク設定
    disk:
    - size_gb: "{{ disk_size }}"
      datastore: "{{ datastore_name }}"

    # 仮想マシンのネットワーク設定
    networks:
    - name: "{{ nw_name }}"
      type: static
      ip: "{{ item }}"
      netmask: "{{ nw_subnet }}"
      gateway: "{{ nw_gateway }}" 
```
Logstash メモ書き

# 試してみる

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

```bash
docker run --rm -it docker.elastic.co/logstash/logstash:6.7.0 -e 'input { stdin { } } output { stdout { } }'
```

コマンドライン上でHello Worldと入力する。

```bash
Hello World
```

と、以下の応答が返ってくる。

```bash
{
      "@version" => "1",
    "@timestamp" => 2019-04-02T15:25:48.400Z,
          "host" => "6e84982806ef",
       "message" => "Hello World"
}
```

# Logstashとは

Logstashは、なんか色んな所からデータを書き集めて、色んな人に配分するやつ。

![](https://www.elastic.co/guide/en/logstash/current/static/images/logstash.png)
図出典：[Logstash Reference](https://www.elastic.co/guide/en/logstash/current/introduction.html)

ログファイル、ウェブ、IoTとか何でも対応できる。

# アーキテクチャ

LogstashはLogstash pipelineという[パイプライン・アーキテクチャ](https://ja.wikipedia.org/wiki/%E3%83%91%E3%82%A4%E3%83%97%E3%83%A9%E3%82%A4%E3%83%B3%E5%87%A6%E7%90%86#%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%81%AE%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3)を採用している。Logstash pipelineは以下3つで構成される。

1. inputs plugins*
2. filters plugins*
3. outputs plugins

* は必須項目

![basic_logstash_pipeline](https://www.elastic.co/guide/en/logstash/current/static/images/basic_logstash_pipeline.png)
図出典：[Logstash Reference](https://www.elastic.co/guide/en/logstash/current/first-event.html)

# 設定ファイル

Logstashには[設定ファイル](https://www.elastic.co/guide/en/logstash/current/config-setting-files.html)がいっぱいある。

## Pipeline Configuration Files

パイプラインの設定ファイル。要するにログの処理の仕方を決める。

## Settings Files

Logstash自体の起動制御ファイル。

### logstash.yml

Logstashのコマンドライン引数をyml化したファイル。

### pipelines.yml

単一のインスタンスで複数パイプラインを処理するための設定ファイル。

### jvm.options

Logstashが乗ってるJVMのオプションをファイル化したもの。

### log4j2.properties

Logstash自体のログを出すlog4jの設定ファイル。
Swift 5 Brand New Result Type: Write Cleaner API Code

```
 struct Course: Decodable {
    let id: Int
    let name: String
    let imageUrl: String
    let number_of_lessons: Int
  }
  
  func start() {
    
    fetchCoursesJSON { (res) in
      switch res {
      case .success(let courses):
        courses.forEach({ (course) in
          print(course.name)
        })
      case .failure(let err):
        print("failed", err)
      }
    }
  }
  
  func fetchCoursesJSON(completion: @escaping (Result<[Course], Error>) -> ()) {
    let urlString = ""
    guard let url = URL(string: urlString) else { return }
    
    URLSession.shared.dataTask(with: url) { (data, resp, err) in
      
      if let err = err {
        completion(.failure(err))
        return
      }
      
      // successful
      do {
        let courses = try JSONDecoder().decode([Course].self, from: data!)
        completion(.success(courses))
      } catch let jsonError {
        completion(.failure(jsonError))
      }
      
    }.resume()
    
  }
```
運用引き継ぎについて

![image.png](https://qiita-image-store.s3.amazonaws.com/0/257568/bd547d1d-a97c-e59e-b7b3-550b1eff4097.png)

ログの設計についてどのように考えるべきなのかを知りたかったため読んだが、周辺知識も有用だったため運用引き継ぎのパートをまとめ

## 前提
運用設計の目的の一つが、複雑な作業を整理して誰にでも作業できるようすること

## 運用引き継ぎとは
運用担当者が必要なフローや手順を理解し、必要なドキュメントやデータにアクセスできるようにすること

## 運用引き継ぎの方法
運用引き継ぎの方法は大きく分けて2つ

- ドキュメントの引き継ぎ
- スキルトランスファー

## ドキュメントの引き継ぎ
運用を行う上での意思決定に必要な情報を意識した精査、作成

- 対顧客ドキュメント
- インフラ構成ドキュメント
- アプリケーション構成ドキュメント
- 運用設計ドキュメント

### 顧客ドキュメント
顧客に対するドキュメント

顧客に依頼されたドキュメントやガイドライン的なものなども。
個人的には顧客への対応ノウハウもあっても良いと思う

### インフラ構成ドキュメント
アーキテクチャ構成図はじめ、概要を理解するのに必要な設計図や手順書など。

利用頻度をもとに分類した方が良い

### アプリケーション構成ドキュメント
UML図など。

開発時にだけ必要だったものと運用後も必要なものを選別する

### 運用設計ドキュメント
運用設計書、運用フロー、運用手順書、管理一覧シートなど。

更にそれらを説明するため作成した資料などもあった方が良いものは必要

## スキルトランスファー
運用スキルの展開

運用担当者が触れたことのない機器や設計思想（アーキテクチャ）があれば、勉強会や説明会を開催して理解を深めてもらうこと。検証実機によるハンズオンまで実施すれば、運用開始直後もスムーズな運用が期待できる。

具体的には下記3つ

- システム理解
- 技術理解
- 運用理解  
　↓  
**安定運用**


## 実施を推奨するもの
### システム説明会
PMが主催して、運用担当者に対してシステムの仕様や現状、今後の方針を説明する。

説明会には既存のアプリ、インフラ、運用担当含め、システム開発に直接関わっているメンバーも参加すると望ましい。
できるだけ質問をその場で回答して課題として残さないようにする必要がある

### 導入製品勉強会
初見の導入製品などがある場合は勉強会などを開催しても良い。

一般的な製品仕様や機能を説明する。

### 運用テスト
運用を想定し、手順書、フロー図、管理シート等に問題がないことを確認する。

実環境が使える場合は、利用するアカウント権限まわりなど事前に説明や確認しておく必要がある。

## 運用引き継ぎ管理項目
網羅できているか確認する

|項目  |内容  |
|---|---|
|システム説明会/勉強会実施日|システム説明会、導入製品勉強会の実施日程と周知日、概要などをまとめておく|
|参加者|説明会、勉強会、運用テストの参加者を把握し、引き継ぎ対象に網羅性があるか確認する|
|説明内容|システム説明会、勉強会、運用テストにて行う説明内容を整理して、参加者に対して適切な内容であるか確認する|
|宿題・課題管理|各会の参加者からのコメント・指摘管理して対応する|
|決定事項・申し送り事項|各会での決定事項や、運用に対して申し送りとなる事項を取りまとめてドキュメントと合わせて引き継ぎを行う|
|参考資料|引き継ぎ資料として運用担当へ渡すドキュメントをまとめておく|


## 他ポイント
- 手順書と実体が乖離していないかを確認し、しているのであれば修正または削除をする
- 属人化していて可視化できていないものはまずドキュメント化する

## 書籍情報
JBS Technology Inc, 近藤誠司(監修), みんなが知っておくべき運用設計のノウハウ
https://amzn.to/2VU8olW

## 雑感
そのまま直接引き継いでも属人化を引き継いでいるだけであり運用の効率化になっていないし、それをもって引き継いだと言えるのは確証性もなく、それによる齟齬やキャッチアップコストの増大は伝える側の怠惰が原因となってしまいそう
「git svn clone」「git svn fetch」が遅い場合、「--log-window-size=<n>」を試してみては 

## 背景

現場でsvnからgitへの移行を行ったのだが、約6日もかかってしまった・・・
リビジョンも1400程度だったので、自分の感覚だとせいぜい半日ぐらいだと考えていた。
とにかく遅かったのはgit svn fetch。
svnの1つのcommitをfetchするのになにやら数分かかっているような状態。

## 解決策

なにか方法は無いかと探したところ、「git svn clone」「git svn fetch」のオプションに「--log-window-size=<n>」というのがあり、
こちらに値を設定して実行すると、速くなるという情報を見つけた。

公式：https://git-scm.com/docs/git-svn#Documentation/git-svn.txt---log-window-sizeltngt

日本語訳
>Subversionの履歴をスキャンするときに、リクエストごとに<n>個のログエントリを取得します。デフォルトは100です。非常に大きなSubversionリポジトリの場合、クローン / フェッチを適切な時間内に完了させるには、より大きな値が必要になることがあります。ただし、値が大きすぎると、メモリ使用量が増え、タイムアウトが発生する可能性があります。

ということでメモリ使用量を鑑みて調整してあげれば良いと理解するが、
適当に10000ぐらいにして実行。

## 結果
svnのcommit数が1400程度のうち、600程度が4日経過して終わったのが、
約800はオプション付与の実行後1晩で終わった・・・

「--log-window-size」を使用している日本語のページはあまり発見できなかったので、あまり使用されていないのか？
正直、オプションの仕様を理解しきれていないが、無事移行出来たのでこのページが誰かのためになると幸い。

参考：http://blog.leneghan.com/2012/03/experiences-of-using-git-svn-on-large.html
Inversion of Markup

Webアプリをモバイルアプリっぽく書ける Yet another なライブライリを作ってみたけど、その特徴をどう呼んだら良いのか分からずモヤモヤしてたので、ここにポエムを書いてみる。

craftkit: 
https://craftkit.dev/
https://github.com/craftkit

Web には2種類あって、それは ”おおよそ静的なサイト” と ”やたら動的なサイト”。

前者の当面のFINALアンサーはWebComponents。

後者は Vue や React が使われているのだけど、どうにも手に馴染まない。
馴染まない原因は多分 Markup に寄せられすぎてるからなのだろうと予てから思っていて、ごにょごにょしてたらある程度まとまった。

つまり

```html
<Hello name="world"></Hello>
```

を忘れ去って

```javascript
viewController.append(new Hello({name:"world"}));
```

と書きたかったんですね。Obj-c 好きだったし。

実現にあたって Shadow Dom をラップして外部から操作できるようにしたのだけど、こうした方法に名前が無かったので一先ず Inversion of Markup と名付けてみた。けど、英語的に意味が伝わるのかどうか分からない。

Shadow Inverse とかの方がより現しているようにも思うけど、これだと何かゲームっぽいよねｗ

そんな感じでモヤモヤしてるけど、誰か使ってくれたら嬉しいな！
Dagger2を使ったアプリでfragment-testingを使ってみたら"No injector was found..." エラー

# はじめに
https://developer.android.com/training/basics/fragments/testing

AndroidX TestでJVM上でEspressoのテストが実行可能になり、さらに`fragment-testing` を使えば以下のように簡単にFragment単体でのUIテストを実行できます。

```kotlin
@Test
fun test() {
    launchFragmentInContainer<FooFragment>()
    ...
    onView(...).check(...)
}
```

しかし、Dagger2を使った既存のアプリで `fragment-testing` を試してみたところ、以下のようなエラーが発生しました。

```
java.lang.IllegalArgumentException: No injector was found for FooFragment
```

Injectorが見つからないとのこと。。。

# 原因

`launchFragmentInContainer()` の内部実装を見てみるとテスト用の空Activityである `EmptyFragmentActivity`にテスト対象のFragmentをattachしていることがわかります。
そして`EmptyFragmentActivity` は単純なFragmentActivityを継承したクラスで、Dagger2の`HasSupportFragmentInjector` は実装していません。
私の試した環境では`HasSupportFragmentInjector`未実装ActivityにattachされたFragmentの`Fragment#onAttach()` 内で `AndroidSupportInjection#inject(fragment)`を呼び出してしまったことが原因で上記エラーが発生してしまいました。

# 対処法
`launchFragmentInContainer()` では起動するActivityを任意のものに差し替えることは（今のところ）できません。
https://issuetracker.google.com/issues/121347222

ではどうするか。。。

Applicationクラスで`HasSupportFragmentInjector` を実装しましょう！
Applicationクラスで実装しておけばActivityクラスで`HasSupportFragmentInjector` を実装する必要はありません。

```kotlin

class TestApp: DaggerApplication(), HasSupportFragmentInjector {
    @Inject
    lateinit var supportFragmentInjector: DispatchingAndroidInjector<Fragment>

    override fun supportFragmentInjector(): DispatchingAndroidInjector<Fragment> = 
        supportFragmentInjector

    ...
}
```

これで`launchFragmentInContainer()` でFragmentを起動可能になり、無事にテスト実行可能になります :sparkles:

# サンプルコード

https://github.com/atsuya046/FragmentTest
vimで画面分割！右半分をターミナルにする

vimでscreenのような画面分割がしたかった

---
#vim 8.1 をインストールする
:terminal コマンドが使えるのはvim 8.1からなので最新版にする。
vimのバージョン確認は

```
$ vim --version
```

バージョンが古かったらアップデート
普通に# apt install だけだと7.XXとかがインストールされる

```
$ sudo add-apt-repository ppa:jonathonf/vim
$ sudo apt-get update
$ sudo apt-get install vim
```
#ターミナルを起動時に垂直分割する


```vim:~/.vimrc
"vim 起動時に実行される
if has('vim_starting')
   "画面分割し、右画面に移動
   vs
   wincmd l
   terminal ++curwin
   "コマンドオプションを付与してカレントウィンドウでターミナルを開く
   wincmd h
endif
```
###tips
windowsのブラウザからエディタに貼り付けると改行コードが違って改行されない場合は
$ cat >> .vimrc とかでターミナルにコピペ、 Enter CTRL+D で追記するのが楽
vimを起動したらこんな感じになるはず
![image.png](https://qiita-image-store.s3.amazonaws.com/0/391640/8b9fb4bb-915e-cae0-baa2-2a9173522572.png)

右画面のターミナルを閉じずに:qで終了すると右画面がバックグラウンドに行くのであとあと面倒に。
移動して $ exit で毎回終了するのも面倒なので左画面で:Kuと打ったら終了するようにスクリプトを編集する。

```vim:~/vim/mycmd.vim
"ユーザー定義のコマンドは大文字じゃないとだめ
command! -nargs=0 Ku call Cl_all(<f-args>)

function Cl_all()
    "ノーマルモードでCTRL+w, wを実行する。\は特殊キーのエスケープのため
	execute "normal! \<C-w>w"
	call feedkeys("exit\<CR>")
endfunction
```

このスクリプトファイルをvim起動時に読み込ませるには source ~/vim/mycmd.vim を追加してやればOK

```vim:~/.vimrc
if has('vim_starting')
   vs
   wincmd l
   terminal ++curwin
   wincmd h
   source ~/vim/mycmd.vim
endif
```
vimを起動してみて:Kuと打って閉じれば成功！！！


__結果__
かいてきになった！！！！！！！
Vagrant + docker 環境で proxy しつつ gulp + browser-sync で自動リロードする

Qiita 初投稿です。
## なにがあったのか
ローカルで gulp + browser-sync するのは慣れていたので、Vagrant + docker でも問題ないでしょ～と思ったら自動リロードが動かなかった。

## 解決

バーチャルマシン上では普通にやると gulp のファイル監視がうまくいかないらしい。
なので `gulpfile.js` の browserSync のところに `usePolling: true` を書いてあげないといけない。

```js
browserSync.init({
    proxy: "接続先",
    files: [
      "監視したいファイル"
    ],
    watchOptions: {
      usePolling: true,
      interval: 100
    },
    reloadOnRestart: true,
    open: false
});
```
polling の処理が負荷としてどうなのかは気になるけど、とりあえず動いたのでめでたしめでたし。
Ruby 文字列の中に特定の文字列が含まれるかの確認

##はじめに
文字列中に特定の文字が含まれる場合の文字列の特定の仕方

特定の文字列が含まれる場合、それが含まれる文字列全体を返し、含まれない場合Noneを返すプログラムです

```
標準入力
cat　　　　　　#特定の文字列
catbrue      #調べる対象の文字列
```
```
word = gets.chomp
array = readlines(chomp: true).select { |x|
  x.include?(word)
}

if array.empty?
    puts "None"
else
    puts array
end
```
```
出力結果
catbrue
```

上のプログラムは調べる対象の文字が増えることにも対応しています

```
標準入力
cat　　　　　　#特定の文字列
catbrue      #これ以下は調べる対象の文字列
dogred
birdgreen     
```
```
word = gets.chomp
array = readlines(chomp: true).select { |x|
  x.include?(word)
}

if array.empty?
    puts "None"
else
    puts array
end
```
```
出力結果
catbrue
```

もちろん、一つも存在しない場合はNoneを返すようになっています

```
標準入力
cat　　　　　　　　#特定の文字列
rabittpink      #これ以下は調べる対象の文字列
dogred
birdgreen     
```
```
word = gets.chomp
array = readlines(chomp: true).select { |x|
  x.include?(word)
}

if array.empty?
    puts "None"
else
    puts array
end
```
```
出力結果
None
```
placeholderに付いてるスタイルを見てみたい！【Shadow DOM】

# placeholder プロパティ
placeholder 使っていますか？
placeholder は `input` 要素のフォームの中等にテキストを入れておけるHTMLの属性ですね。
↓こんな感じ。

```HTML:HTML
<input placeholder="キーワード入れて検索">
```
<img width="198" src="https://qiita-image-store.s3.amazonaws.com/0/309128/cf30dbe2-ddcf-a228-05b4-004b5c6ff02e.png">

このテキストにスタイルを付けるときは以下のように擬似要素を使ってスタイルを付けてやります。

```CSS:CSS
input::placeholder {
  color: red;
  font-size: 0.5rem;
  font-style: italic;
}
```
<img width="198" src="https://qiita-image-store.s3.amazonaws.com/0/309128/f6ae4d00-939d-38ac-5cfd-4011b540d6c4.png">

# スタイルを確認してみる
このスタイルをGoogle Chromeのデベロッパーツールで確認しようとすると…
<img width="951" src="https://qiita-image-store.s3.amazonaws.com/0/309128/026c8ad1-356e-311b-e231-3406c6f06820.png">
**>>>ない<<<**
そう…ないのです。付いているはずのスタイルが見当たらない。
これは placeholder が「Shadow DOM」というもので構成されているからです。

# Shadow DOM を見えるようにする
Chromeのデベロッパーツールで Shadow DOM を見えるように設定してみましょう。 
#### 1. 右上の「⋮」から「Settings」をクリック
<img width="777" src="https://qiita-image-store.s3.amazonaws.com/0/309128/c3493903-8cdc-e9ed-2dbf-7f1946424cad.png">
#### 2. 「Preference」→「Elements」で「Show user agent shadow DOM」にチェック！
<img width="436" src="https://qiita-image-store.s3.amazonaws.com/0/309128/83272177-2327-88bf-53f0-3361b831669a.png">

# Shadow DOM を見てみる
もう一度コードを見てみましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/309128/00d99373-3189-7113-05a3-24f7f64f58c6.png)
**なんか見たことないDOMがあるーーー！！**
**内側のdivにスタイル付いてるーー！！！**

こんな感じで見ることができます。
placeholderは実はShadow DOMであるdivにテキストを渡して実装しているようですね。

他にも今まで見えていなかったものが見えるかも…👀

# 参考リンク
- Shadow DOMについて  
https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM
- placeholder擬似要素  
https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder
- video要素やprogress要素もShadow DOMで実装されているそう。  
https://qiita.com/hokaccha/items/1aa9b0363cfa0daeaf48
phpのclassとinstanceと$this

最近業務の独自のフレームワークを使った案件で`$this`というのが良く出てくるので、調べたことをメモしてみます。

#`$this`はインスタンス自身を指す。
と簡単に言われても良くわからないので
整理して説明すると


####class (クラス)
クラスとは複数の処理をまとめた設計図みたいなもの。
あくまで設計図、これがそのまま色々動いて処理を返すわけではない。


####instance (インスタンス)
インスタンスとはクラスという設計図を元に作成したロボットのようなもの。
これが色々動いて処理を返してくれる。


そんでどうやってクラスを作ってインスタンスを作るのかというと

```php
<?php

class kurasu{
	public function hyouzi(){
		echo 'ひょうじ';
	}
}

$insutansu=new kurasu;

$insutansu->hyouzi();

?>
```

こんな感じに書く。

`kurasu`という設計図には`hyouzi()`という機能が設計されている。
その設計図を元に作られた`$insutansu`ロボットは`$insutansu->hyouzi();`と命令を出すことで動いてくれる。
というイメージ。


####$this
そして結局`$this`がどういうことなのかというと
設計図を元に作られたロボット自身の事を指す。
この指すというのは、設計図に書かれているが設計図の事を指しているわけではない。

では`$this`の使い所を説明していく。

```php
<?php

class kurasu{
	public $hensu='TEST';

	public function hyouzi(){
		echo $this->hensu;
	}
}

$insutansu=new kurasu;

$insutansu->hyouzi();

?>
```
こんな感じで書いていく
今度は設計図には`$hensu`という情報と、その情報を表示する機能である`hyouzi()`が設計されている。
その設計図を元にしたロボットである`$insutansu`は、当然設計図どおりに`$hensu`を覚えているので
`$insutansu->hyouzi();`と命令を出すと`TEST`と表示する。

まぁこれだけではわかりにくいので

```php
<?php

class kurasu{
	public $hensu='TEST';

	public function hyouzi(){
		echo $this->hensu;
	}
}

$insutansu_a=new kurasu;
$insutansu_z=new kurasu;

$insutansu_a->hensu='テスト';
$insutansu_a->hyouzi();

$insutansu_z->hensu='てすと';
$insutansu_z->hyouzi();

?>
```
今度はこう書いてみた。
`kurasu`という設計図で、2つのロボット`$insutansu_a`と`$insutansu_z`を作った。

それぞれに
`$insutansu_a`には`$insutansu_a->hensu='テスト';`
`$insutansu_z`には`$insutansu_z->hensu='てすと';`
と`$hensu`の情報を変更してみた。

そして最後に2つのロボットは同じ機能である`hyouzi()`を実行する。


結果はどうなるか想像出来るだろうか？

2つのロボットは同じ機能を実行したにも関わらず
`$insutansu_a`は`テスト`と表示し
`$insutansu_z`は`てすと`と表示する
異なる結果になる。

これは`hyouzi()`の中の`$this`によるもので
`$insutansu_a`の`$this`は`$insutansu_a`自身、
`$insutansu_z`の`$this`は`$insutansu_z`自身
を指している。
`hyouzi()`の中の`$this`は設計図を指してはいない。

なので2つのロボットはそれぞれ自身が覚えている`$hensu`を表示したのだ。

#編集後記
入社三日目
なんだか褒められて伸ばされている気がするが
それに比例してプレッシャーが凄い。
でも飛躍的な成長は大きな痛みを伴いやすいので
日々昨日の自分を超えるしか無いのかな、って思う。

そんな感じの事をイチローが言ってたな笑
Haml  導入

hamlの導入方法

hamlに必要なgemを追加

```rails:Gemfile
gem 'haml-rails'
gem 'erb2haml'
```

```linux:ターミナル
$hogehoge[アプリケーション名]　bundle install
```

### .erb を hamlに変える方法

```linux:ターミナル
$hogehoge[アプリケーション名] rake haml:replace_erbs
```

こちらのコマンドを打つことによって

```html:hogehoge.erb
<div class="hogehoge">
  <div class="hogehoge__text">
    <p>
      hogehoge
    </p>
  </div>
</div>
```

から

```html:hogehoge.haml
.hogehoge
  .hogehoge__text
    %p
      hogehoge
```

のように変更されます！
deviseの導入と実装

# deviseの導入と実装
Railsではdeviseを挿入することでユーザー登録機能を簡単に実装できます。

## 1.deviseの導入

### Gemfileにgemを追加

```Ruby:Gemfile
gem 'devise'
```

### bundle installを実行し、サーバーを再起動
```
$ bundle install
$ rails s
```

### deviseの設定ファイルを作成
```
$ rails g devise:install
```

### userモデルを作成
```
$ rails g devise user
$ bundle exec rake db:migrate
 #マイグレーションファイルに必要なカラム（name等）を設定した後に実行
```

### deviseのビューファイルを作成
```
$ rails g devise:views
```

## 2.サインアップ機能

### userのサインアップ時に名前を登録できるようにする
deviseでは初期状態でサインアップ時にメールアドレスとパスワードのみを受け取るようにストロングパラメーターが設定してあるので、
追加のパラメーターを許可したい場合は、application_controllerでbefore_actionにconfigure_permitted_parametersメソッドを設定する。

```Ruby:application_controller.rb
before_action :configure_permitted_parameters, if: :devise_controller?

protected

def configure_permitted_parameters
  devise_parameter_sanitizer.permit(:sign_up, keys: [:name])
end
```

## 3.サインアウト、ログイン機能の実装

### サインアウトボタンの設置

```xxx.html.erb
<%= link_to "サインアウト", destroy_user_session_path, method: :delete, class: 'btn' %>
```

###サインアウト後の遷移先を指定する
after_sign_out_path_forメソッド:サインアウト後のリダイレクト先URLを指定できる。

```Ruby:applocation_controller.rb
def after_sign_out_path_for(resource)
  '/users/sign_in' #サインアウト後はログイン画面に遷移
end
```

## 4.user編集機能を追加する

### ルーティング

```Ruby:routes.rb
resources :users, only: [:edit, :update]
```

### users_controller作成

```
$ rails g controller users
```

### edit,updateの定義

```Ruby:users_controller
class UsersController < ApplicationController
	def edit
	end

	def update
		if current_user.update(user_params)
	       redirect_to root_path #更新できた場合はTOP画面へ
		else
			render :edit #更新できない場合は編集画面に戻る
		end
	end

	private

	def user_params
		params.require(:user).permit(:name, :email)
	end
end
```

※redirect_toはデータの追加、更新、削除を行う時に、
　renderは単にデータの取得をする時に使用する。

### ビューファイル作成
editボタン作成

```xxx.html.erb
<%= link_to "edit" edit_user_path(current_user), class: 'btn' %>
```

/users/edit.html.erbを作成,updateボタンの設置
RakNetに関して自分なりにまとめてみた

RakNetの仕組みを日本語で解説した記事が無かったため勉強ついでにまとめていこうと思います。

# RakNetとは
C++で開発されたクロスプラットフォームなゲーム向けネットワークエンジンです。現在は開発が終了しているため基本的にRakNet自体の更新はありません。SLikeNetとして有志の方々が開発を継続していたりします。RakNetはMinecraft統合版やテラリアなどの有名なゲームにも使われています。

# 特徴
UDPを使用しますが、TCPのようなシーケンス番号や確認応答、コネクション管理、ウィンドウ制御などが実装されているのでUDPの速さをキープしつつ欠点である信頼性を克服しています。使いやすさとパフォーマンスを重視して作られているので手軽にプロジェクトへ導入できます。
※この記事では使い方には触れません。

# RakPeer
>***RakPeerInterface.h***
***RakPeer.h***
***RakPeer.cpp***

RakNetライブラリのコア的存在です。ほとんどの通信に関する操作はRakPeerを介して行われるでしょう。RakPeerはサーバにもクライアントにもなり得ます。インスタンス化時に最大接続数を指定する必要があるのでRakNetを使用したプロジェクトを考える際は注意です。

RakNetのUDTをベースとしたアーキテクチャなので先にそちらを学んでおくとソースコードも読みやすいと思います。
→ [***UDTについて軽くまとめました***](https://qiita.com/WhiteGrouse/items/a1d60988777774598364)

# Packet
```C
// RakNetTypes.h 一部省略しています。
struct Packet
{
    SystemAddress systemAddress;
    RakNetGUID guid;
    unsigned int length;
    BitSize_t bitSize;
    unsigned char* data;
};
```
## SystemAddress
IPアドレスとポート番号を保持します。RAKNET_SUPPORT_IPV6を指定してコンパイルすることでIPv4とIPv6両方を扱えるようになります。パケット受信時にセットされます。

## RakNetGUID
RakNetではピアをIP+PortではなくGUIDで識別します。プロキシのようなネットワークトポロジーの実装を可能にするためです。コネクションが確立されるまでは受信したパケットにはUNASSIGNED_RAKNET_GUIDが設定されます。

## Length
dataの長さをbyteで表します。lengthに対しbitSizeではbit単位でdataの長さを表します。通常```length == 8 * bitSize```でしょう。

## Data
受信したパケットの生データが指定されています。RakPeerは受信したパケットの内容を新しく用意したメモリ領域にコピーするので処理後にメモリの解放が必要になります。解放は簡単です。RakPeerインスタンスのDeallocatePacketにPacketのポインタを渡すだけです。

## Priority
>***PacketPriority.h***

パケット送信の際、優先度を設定することができます。

* IMMEDIATE_PRIORITY
* HIGH_PRIORITY
* MEDIUM_PRIORITY
* LOW_PRIORITY

Priorityには以上の4つがあり、送信キューから2の倍数ずつ送信されます。
ex) IMMEDIATE=>8つ、HIGH=>4つ、MEDIUM=>2つ、LOW=>1つ

## Reliability
>***PacketPriority.h***

* UNRELIABLE
* UNRELIABLE_SEQUENCED
* RELIABLE
* RELIABLE_ORDERED
* RELIABLE_SEQUENCED
* UNRELIABLE_WITH_ACK_RECEIPT
* RELIABLE_WITH_ACK_RECEIPT
* RELIABLE_ORDERED_WITH_ACK_RECEIPT

### UNRELIABLE
UNRELIABLEは単純なUDP通信と同じで信頼性が無く到達確認や再送などもしません。シークエンス番号が重複した際にはパケットを破棄します。

### RELIABLE
RELIABLEでは到達確認と再送が行われるので確実にパケットを送信することができます。
***必ずパケットは相手へ到達しますが、パケットが前後している可能性があるので注意***

### SEQUENCED
アプリケーションへ渡すパケットの順番を指定します。
SEQUENCEDではシークエンス番号が新しいものだけを受け付けます。
``` SequenceNum:1 => SequenceNum:3 => SequenceNum:2 ```
この場合シークエンス番号の2は破棄されます。

### ORDERED
アプリケーションへ渡すパケットをシークエンス順にし、必ず**連番**で渡します。
UNRELIABLEにORDEREDが無いのはこのためです。パケットが必ず届くことが条件です。

### *_WITH_ACK__RECEIPT
到達が確認されたことをアプリケーションに通知してほしい際に設定します。例として、再送が行われる際にパケットの内容を最新の情報へ書き換えてから送信することができます。


### Ordering Streams
ORDEREDなパケットシークエンスの待機バッファ(チャンネル)が32個用意されています。SEQUENCEDにも最新のシークエンス番号を保持するチャンネルが同じく32個用意されています。

### Algorithm for blending ordered and sequenced
ORDEREDなチャンネルにSEQUENCEDな機能を追加するアルゴリズムです。
ORDEREDなチャンネルの最新シークエンス番号をインクリメントすると同時にSEQUENCEDなチャンネルの最新シークエンス番号を0にリセットするだけです。
https://github.com/facebookarchive/RakNet/blob/master/Source/ReliabilityLayer.h#L423-L439

## MessageID Types
>***MessageIdentifiers.h***

MessageIDはパケットのタイプを表します。パケットのデータの先頭byteがこれにあたります。パデフォルトのパケットのID一覧はDefaultMessageIDTypesに定義されています。ユーザ定義のパケットを実装する際はID_USER_PACKET_ENUM以降の値を使用してください。

# 参考資料
http://www.jenkinssoftware.com/
http://www.jenkinssoftware.com/raknet/manual/congestioncontrol.html

### ※追記予定です。。。
Goでフロントも作れるVugu触ってみたよ

# なにこれ
VuguがGo言語でフロントをVueやReactっぽく書ける様にしてくれるらしい。
https://www.vugu.org/
ちょっと触ってみた。

> Inspired by modern web UI libraries like Vue and React.
Single-file components.
Runs in most modern browsers.
Simple and sane dev and build environment. (Say goodbye to that node_modules folder!)
Write UIs with the ease of HTML+CSS for presentation, and the facility of Go for interface logic. It's pretty cool! See the Getting Started page.

Vuguの読み方わからん。。。バグ？の訳無いよね。

# Getting Started
**Go 1.12**以上が必要の様です。

とても簡単な導入チュートリアルです。とりあえず動かしてみるだけなら簡単です。こんな事やります。

1. まずプロジェクトフォルダを作ります
2. go.modを作ります。`go mod init`でつくれます。
3. Vuguのコンポーネントファイルを作成。root.vuguというファイルを作成してサンプルコードをコピペ
4. 開発用のサーバ作成。これもdevserver.goというファイルを作成してサンプルコードをコピペ
5. 開発サーバを立ち上げる `go run devserver.go`
6. ブラウザから`http://127.0.0.1:8844/`にアクセス
7. 驚く

簡単ですね。
軽くコード触った感じだとこれはVueですね。

# ちょこっと改造してみる
上記チュートリアルを行うと、ボタンのオンオフで文字表示のオンオフができる様になります。

これだけだとつまらないのでちょこっと改造します。
ElmのHello World的存在のカウンターアプリを作ってみます。

こんな感じの超シンプルなカウンターアプリができます。

<img width="432" alt="スクリーンショット 2019-04-03 20.33.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/181482/c4284757-64b0-e758-2684-056498049f1c.png">

上記チュートリアルのroot.vuguを修正します。

```html
<div class="my-first-vugu-comp">
    <button @click="data.Toggle()">Test</button>
    <div vg-if="data.Show">I am here!</div>

    <br>
    <!-- カウンター -->
    <button @click="data.Increment()">+</button>
    <div><span vg-html='data.Count'></span></div>
    <button @click="data.Decrement()">-</button>
    <br>
</div>

<style>
.my-first-vugu-comp { background: #eee; }
</style>

<script type="application/x-go">
type RootData struct {
    Show bool
    Count int
}

func (data *RootData) Toggle() {
    data.Show = !data.Show
}

func (data *RootData) Increment() {
    data.Count = data.Count + 1
}

func (data *RootData) Decrement() {
    data.Count = data.Count - 1
}
</script>
```

単純にRootDataのメソッド`Increment()`と`Decrement()`を定義してボタンアクションに応じてRootData構造体のCountの状態を変化させているだけです。

#### ちょっと困った事
現在のCountを表示させる方法がわからん。。。
Documentを漁って、`vg-html`を見つけ出して多分これだろ。って感じで試したら表示された。


# おわりに
新しく出たものですからね。documentはまだ少ないですね。
ひよっこの私にはちょっとまだ私には良さはわからず。。。
おとなしく他の人の情報待ちします。
querySelector nth-child

https://codepen.io/gnjo/pen/LvpJVR?editors=1010

```js
let fn={}
fn.range=(l=0)=>{return Array.from({length:l})}
fn.q=(s,doc=document)=>{return doc.querySelector(s)}
;
let a=fn.range(20).map((d,i)=>`<li>${i}</li>`).join('\n')
document.body.innerHTML+=`<div><li>dummly li</li></div><ol>${a}</ol>`
;
fn.q('ol>li:nth-child(9)').textContent='xxxxxxx'
```
Unity カードゲームのフェーズ管理

```csharp:GameMaster.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GameMaster : MonoBehaviour {
	enum Phase{
		INIT,
		DRAW,
		STANDBY,
		BATTLE,
		END,
	};

	Phase phase;
	void Start () {
		phase = Phase.INIT;
	}	
	void Update () {
		switch(phase){
			case Phase.INIT:
			InitPhase();
			break;
			case Phase.DRAW:
			DrawPhase();
			break;
			case Phase.STANDBY:
			StandbyPhase();
			break;
			case Phase.BATTLE:
			BattlePhase();
			break;
			case Phase.END:
			EndPhase();
			break;
		}		
	}
	void InitPhase(){
		Debug.Log("InitPhase");
		phase = Phase.DRAW;
	}
	void DrawPhase(){
		Debug.Log("DrawPhase");
		phase = Phase.STANDBY;
	}
	void StandbyPhase(){
		Debug.Log("StandbyPhase");
		phase = Phase.BATTLE;
	}
	void BattlePhase(){
		Debug.Log("BattlePhase");
		phase = Phase.END;
	}
	void EndPhase(){
		Debug.Log("EndPhase");
		phase = Phase.DRAW;
	}
}


```

スタジオしまづでゲームの作り方を学びたい人向けのサロン▶︎https://camp-fire.jp/projects/view/149191
C++ ModulesのHeader units

C++20にモジュールが入ることが決まりました。

モジュールを使っていない古いコードとの互換性のため、いくつかの機能が追加されています[^1]。その中の1つに、モジュールと `#include` の中間的な機能、Header unitsがあります。

[^1]: This proposal provides several features to support interoperation between modular code and traditional non-modular code.

# Header unitsとは

import構文でモジュール名の代わりにファイル名を書くと、そのファイル内の宣言とマクロが使用可能になります[^2]。

[^2]: the interface of the header is extracted and made available for import, and any macros defined by preprocessing the header are saved so that they can be made available to importers

```cpp:#include
#include "some-header.h"
```

```cpp:import
import some_module;
```

```cpp:Header　units
import "some-header.h"; // <some-header.h>も可

/* ここではsome-header.h内の宣言やマクロが見える */
```

マクロも保存されるので、従来の `#include` とほとんど同じであると言って良いでしょう。
(`import`はプリプロセッサディレクティブではなく、おそらくはコンパイル時に処理されるという違いはあります)

ライブラリがモジュールで提供されていないとしても、Header unitsを使えば `#include` をやめることができます。

## 再エクスポート

Header unitsをインポートしても、その中の宣言がインポートする側のモジュールに属することにはなりません[^3]。
(これ自体はモジュール一般の仕様です)

Header unitsも普通のモジュールと同じように再エクスポートすることができます。

[^3]: Declarations from code in a header unit are not owned by any module.

```cpp
export module foo;
export import "some-header.h";
```

しかし、再エクスポートしてもヘッダーファイル中のマクロはエクスポートされません[^4]。

[^4]: when a header unit is re-exported, macros are not exported.

ヘッダーファイルをモジュールでラップすることが簡単にできるので、この仕様はヘッダーとモジュールの両方を提供する場合に便利だと思われます。移行の過渡期にはそのようなライブラリが増えるかもしれません。

# Importable Header

どんなヘッダーファイルでもインポートできるわけではありません。
Header unitsとしてインポートできるヘッダーの集合をimportable headerといいます。

**何がimportable headerかは処理系定義**です。

C++20では、importable headerを`#include`した場合はインポートに置き換わります。

# 参考文献

* [P1103R3 Merging Modules](http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2019/p1103r3.pdf)

# 謝辞

この記事は[C++20を相談しながら調べる会 #1](https://cpp20survey.connpass.com/event/124051/)の結果として書かれました。
php-master-changes 2019-04-02

今日は JIT 実装の最適化や修正が色々あった！
正直そこまでよく分かってないので、そのうち時間とって頑張って見ないとあかん気がする

# 2019-04-02
## dstogov: Use Zend MM for JIT temporary buffres allocation
- https://github.com/php/php-src/commit/6fccca54a20c34c972f0c98db17462a63189715e
- ext/opcache で、JIT 用のバッファ確保に Zend Memory Manager を使うよう修正
- 何も定義してないとすぐ下で include してる [dasm_proto.h](https://github.com/php/php-src/blob/9a06876072b9ccb023d4a14426ccb587f10882f3/ext/opcache/jit/dynasm/dasm_proto.h) の実装にフォールバックしてた奴かな

## dstogov: Eliminate hash lookup for immutable op_arrays
- https://github.com/php/php-src/commit/d196ec9b93805df1bc3e1446e834e42eada0eb8a
- ext/opcache で、JIT でのユーザ定義関数呼び出し時に ZEND_ACC_IMMUTABLE なものについては op_array のハッシュテーブル参照を無くして高速化

## dstogov: Removed checks for required object handlers
- https://github.com/php/php-src/commit/8bf2de045b5f3f5e3aa81042e09bc22addf1c517
- ext/opcache で、JIT でのオブジェクトアクセス時に（必須の）オブジェクトハンドラの存在チェックを削除して高速化

## dstogov: Fixed edge cases in ZEND_ASSIGN_OP+ASSIGN_DIM and replaced specialized helpers with single one
- https://github.com/php/php-src/commit/4e1d545d470cd56878ac47cd6eac26675582831b
- ext/opcache で、JIT 時のオブジェクト/配列の代入処理でなんかエッジケースがあったらしいがよく分からず
- 状況特化のヘルパをがっつり潰して共通関数で済ますようにしているようだ

## dstogov: typo
- https://github.com/php/php-src/commit/b6dc1d2466e14171ebcd0a5f02b9d5e25a2e0b4b
- ext/opcache で、JIT 処理内の typo を修正

## cmb69: Fix misplacement of calling convention declaration
- https://github.com/php/php-src/commit/ba67d44e0771ea0e93115c4a4105880213850f00
- ext/opcache で、JIT 用実装の関数宣言で ZEND_FASTCALL の指定位置が誤っていた問題の修正

## dstogov: Added comments
- https://github.com/php/php-src/commit/0d6fce887b19e1b78778bf41421f18f5ffcdeb7f
- ext/opcache で、JIT 用実装にコメントの追加
- あとなんか ```#if 0``` で [HYBRID VM](https://phpinternals.net/categories/zend_virtual_machine#hybrid) のハンドラ呼び出しを末尾呼び出しで直接飛ぶ形に処理したい気持ちが表明されている
#vue.js の component が分かりにくいので手で動かして理解する ( 公式チュートリアルより ) ( Codepen )

# Tutorial

[Introduction — Vue.js](https://vuejs.org/v2/guide/#Composing-with-Components)

# TD; DR

手を動かせ。

# なにやら図解されている

![image](https://user-images.githubusercontent.com/13635059/55471723-59c00780-5645-11e9-9e96-249e11370380.png)

# よく分からないので

とりあえず手を動かしたい。

# Code

ハッシュやら使われていてなかなかわかりにくい。

```js
<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
```

```js
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})
```

# ただの配列にしてみる

自分にわかりやすいように 変数名的なものも変えてゆく。

```html
<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
    
    <div id="app-7">
      <ol>
        <todo-item
          v-for="grocery in groceryList"
          v-bind:item="grocery"
        ></todo-item>
      </ol>
    </div>
        <script src="index.js"></script>
    </body>
</html>
```

```js
Vue.component('todo-item', {
  props: ['item'],
  template: '<li>{{ item }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      'Vegetables',
      'Cheese',
      'Whatever else humans are supposed to eat'
    ]
  }
})
```

# 同じく動作する

[Vue.js Playground](https://codepen.io/yumainaura/pen/jRbzbG)

![image](https://user-images.githubusercontent.com/13635059/55471932-d5ba4f80-5645-11e9-931e-a7f00d18e400.png)

# js側の理解


```
Vue.component('todo-item', {
```

こいつでHTML的に独自要素を定義できる

```
  props: ['item'],
```

こいつが HTML側で `v-bind:item=` 的な記述を可能にする
js 側に記述したテンプレでも同じ変数名で値が受け取れるようになる

```
  template: '<li>{{ item }}</li>'
```

その名の通りHTMLのテンプレ
props で定義した名前が変数として使える
公式チュートリアルではハッシュだったが、ここでは文字列を入れているだけ

# HTML側の理解

独自定義した component を記述できる

```html
<todo-item></todo-item>
```

配列データのループ

```
v-for="grocery in groceryList"
```

js の props で定義した名前で `v-bind` とか出来る様子

```
v-bind:item="grocery"
```

# その他

js側の props が配列なので、別名も追加できるんじゃない？など色々と試したり

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Android ChromeでPull-to-RefreshをCSSで無効化する。

##はじめに

Pull-to-Refresh(ページの一番上までいる時にさらに下にスワイプするとリロードされるやつ)
を無効にしたいと思い調べた所、[JavaScriptつかってごにょごにょすれば出来る記事](https://qiita.com/zeriyoshi/items/d73d6712400d75dc8bea)はあったのですが、
最近はCSSだけでいけるようなので試してみました。

## 対象プロパティ

- overscroll-behavior-y  
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y

## 設定例
```css
body {
  overscroll-behavior-y: none;
}
```
## 各ブラウザの対応
- Android Chrome は63以降(2017/12リリース)
- iOS Safari は未対応
なので普通に使われてるAndroidであればたぶん大丈夫。

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y#Browser_compatibility


## まとめ

[PWA](https://en.wikipedia.org/wiki/Progressive_Web_Apps)対応時の際にはPull-to-Refreshが邪魔になる事があるのでさくっと無効にできるのは便利です。
Windows版SlackをDarkThemeにする方法

C:\Users\[ユーザ名]\AppData\Local\slack\app-[Slackバージョン]\resources\app.asar.unpacked\src\static\ssb-interop.js
内の最後に以下のコードを付け加え、Slackを起動もしくは再起動する。

```javascript:ssb-interop.js
document.addEventListener('DOMContentLoaded', function() {
 $.ajax({
   url: 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css',
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
 });
});
```

---
参考
[5分でデスクトップ版のSlackにDark Themeを適用する
](https://qiita.com/kazuki1213/items/bfc85bc847caa1617c18)