OmniAICreator/Qiita-1.07M huggingface dataset:
Nuxt.jsでサーバーサイドからAPIアクセスして表示を行う

# はじめに

過去にVue.js + axiosで作成した[APIアクセス確認ソース](https://qiita.com/FrozenVoice/items/f8df3e4ec0c633b4221e)をNuxt.js上に移植してみる。
ついでにNuxt.jsのSSR(サーバーサイドレンダリング)も試してみる。

## 環境

Windows10 Pro
Docker for Windows
Nuxt.js 1.4.2


## 下準備

### Hot Reloadingの設定

Windows + Docker環境だとHot Reloading(ソース変更時に自動ビルドしてくれる機能)が上手く動かないので、webpackの設定でポーリングによるチェックを行うようにしておく。

```json:next.config.js
watchers: {
  webpack: {
    aggregateTimeout:300,
    poll: 1000
  }
}
```

参考ページ: https://github.com/nuxt/nuxt.js/issues/2481

### axiosのインストール

APIへアクセスするためにaxiosを使用したいのでインストールする。

```
$ yarn add @nuxtjs/axios
```

## 移植したソース内容

```vue:pages/search/index.vue
<template>
    <div id="app">
        <h1>Nuxt API Test</h1>
        <div class="itemContainer">
            <Item
              v-for="(result, index) in items" :key="index"
              v-bind:id="result.id"
              v-bind:name="result.name"
              v-bind:value="result.value"
            >
            </Item>
        </div>
    </div>
</template>

<script>
    import Item from '~/components/Item.vue'
    import axios from 'axios'

    export default {
        components: { Item },
        head: { title: 'Nuxt API Test' },
        asyncData ({ params }) {
            return axios
                .get("https://script.googleusercontent.com/macros/echo?…以下略…")
                .then((response) => {
                    return { items: response.data }
                })
        }
    }
</script>

<style scoped>
.itemContainer{
    display: flex;
}
</style>
```

```vue:components/Item.vue
<template>
    <div class="item">
        <div>ID: {{id}}</div>
        <div>名前: {{name}}</div>
        <div>値: {{value}}</div>
    </div>
</template>

<script>
    export default {
        name: "Item",
        props: {
            id: Number,
            name: String,
            value: Number
        }
    }
</script>

<style scoped>
.item {
    border: solid;
    margin: 5px;
}
</style>
```

### 実行結果

`http://localhost:3000` にアクセス

|![2018-08-26_17h00_15.png](https://qiita-image-store.s3.amazonaws.com/0/165884/7a28469a-191a-0bbc-c424-a7ec22925545.png)|
|:--|

## SSR(サーバーサイドレンダリング)での通信

Nuxt.jsでは `asyncData()` によりサーバーサイドでAPI通信によるデータ取得をしてレンダリングをすることが出来ます。

そのため、CORS対応されていないサイトからデータを取得する場合に、[過去記事](https://qiita.com/FrozenVoice/items/27301b8939e91665cba0) で書いたようにプロキシ的なAPIを間に挟まなくてもSSRにより表示を行うことが出来るようです。

クライアントサイドからAjaxによる取得をすることも可能なので、この辺は要件によってクライアント/サーバーどちらから通信をした方が良いのかを選択する必要がありそうです。
CentOSの環境構築

凄く久しぶりにLinuxの仮想マシンを構築することになったため何が必要だったか
思い出しながら書きます。各項目の詳細は別途記事にするかもしれません。
随時追記してます。

**サーバ用途**
特に限定しないよう汎用、必要最低限の設定を入れる
SSHでログインしてメンテするような運用を想定

**SSHの設定変更**
ROOTログインを無効
パスワード認証を無効
秘密鍵-公開鍵の認証を許可
PAM認証を無効
ポートの変更

**パケットフィルタ**
firewalldで全コネクションを無効にする
必要なポートのみ通す
※誤ってSSHのポートを遮断しないよう注意

**ユーザの実行権限を限定する**
ユーザ作成時実行権限が755となっているため、750に変更する

**ユーザの環境変数書き換え**
パス、文字コードを適宜定義する
bash_profileの行数を増やす
bash_profileに年月日時分秒を出す
プロンプトをユーザ名@時分秒にする

**カーネルの設定**
パケットリダイレクトを無効にする
パケット転送を無効にする
逆方向パス転送を厳密モードにする
ICMPのブロードキャストを無効にする
ソースルーティングを無効にする
syncookiesを有効にする
Martiansのログ取得を有効にする
スワップ頻度を必要最低限にする
ファイルオブジェクトの上限を変更する
IPv6を無効にする

**タイムゾーンの設定**
日付、時間、タイムゾーン設定

**ログ出力の設定**
journaldのログ永続化
logrotateの設定見直し

**サーバ要塞化**
サービス一覧から必要なものを残して全て起動しないよう無効にする

**監視**
後ほど記載する

**その他**
スワップ領域を数ギガ程度作成してマウントする
ファイルディスクリプタの上限を変更する
エイリアスを適宜設定する
サブドメインをRoute 53で管理してみた（メインはCloud DNSで管理、ドメイン移管なし）

簡単な備忘録（やってみたら簡単じゃなかった）

# やりたいこと
1. 本ドメイン「test-kojiisd.tk」はGCPのCloud DNSで管理している（ドメイン取得はFreenomを利用）
2. サブドメイン「dev.test-kojiisd.tk」を作成するが、このドメイン管理はRoute 53で行いたい
3. サブドメインは、S3のコンテンツに静的Webホスティングをしたい

いわゆる、「メインのドメインは移管できないから、サブドメインからAWSで管理したいパターン」です。

# メインドメインについて

メインドメインを取得して、静的ページを適当に割り当てています。

![スクリーンショット 2018-08-14 18.55.21.png](https://qiita-image-store.s3.amazonaws.com/0/102769/37198676-67b5-cbf0-0c06-909a686db8a9.png)

## ネームサーバはGCPのものを利用
Cloud DNSでZoneを登録すると発行されるNameServerの情報をFreenomのNameServer設定欄に入力します。
![スクリーンショット 2018-08-22 8.50.32.png](https://qiita-image-store.s3.amazonaws.com/0/102769/44874a06-a81b-0e7e-105a-6761cbfc32af.png)

これでしばらくすれば```test-kojiisd.tk```のNameServer設定がGCPの設定になっていることが確認できます。

```sh
$ dig ns test-kojiisd.tk

:
:

;; ANSWER SECTION:
test-kojiisd.tk.	60	IN	NS	ns-cloud-a4.googledomains.com.
test-kojiisd.tk.	60	IN	NS	ns-cloud-a1.googledomains.com.
test-kojiisd.tk.	60	IN	NS	ns-cloud-a2.googledomains.com.
test-kojiisd.tk.	60	IN	NS	ns-cloud-a3.googledomains.com.
```


# サブドメイン側コンテンツ準備
サブドメイン作成に向けての準備をします。サブドメインは最初に書いた通り```dev.test-kojiisd.tk```とします。

## S3にデータの配置、Webホスティング
適当に作成したindex.htmlを配置して、静的ホスティングの設定をします。特に難しい点はないので省略。バケットポリシーの設定などお忘れなく。

# Route 53でサブドメインの管理
Route 53で```dev.test-kojiisd.tk```を管理するためのHost Zoneを作成します。（具体的な手順は省略）そこで生成されるNSレコードを、Cloud DNS側に追加します。（FQDNとして認識させるために、最後のドットを入れることを忘れずに）

![スクリーンショット 2018-08-26 16.39.28_deco.png](https://qiita-image-store.s3.amazonaws.com/0/102769/ad393539-6ec0-7330-54b5-4aec56e57156.png)


GCPで管理している場合は、SOAレコードの「シリアル番号」を更新することを忘れずに。（自動では更新されない模様）

これで設定自体は完了です。```dig```コマンドで```dev.test-kojiisd.tk```のNSレコードが以下のようにGCP側のNSレコードを含む内容になっていればOK。

```sh
$ dig ns dev.test-kojiisd.tk

:
:

;; ANSWER SECTION:
dev.test-kojiisd.tk.	60	IN	NS	ns-xxxx.awsdns-xx.co.uk.
dev.test-kojiisd.tk.	60	IN	NS	ns-xxxx.awsdns-xx.com.
dev.test-kojiisd.tk.	60	IN	NS	ns-xxxx.awsdns-xx.net.
dev.test-kojiisd.tk.	60	IN	NS	ns-xxxx.awsdns-xx.org.
```

# まとめ
この辺の知識が自分に足りないことがよくわかった。
シェルスクリプトでディレクトリ移動する

職場のPCがwindows+cygwinで、vagrantのスクリプトがあるディレクトリに移動するのに難儀する。
階層が深すぎるのである・・・（Macがよかったなぁ・・・）
が、開発者みんな使ってるので、勝手にディレクトリ構成を変える訳にもいかない。
そしてcygwinってはじめて使ったけど、C:¥が/c/なのがどうもしっくりこなくて、打つの面倒。
ディレクトリ移動して起動するスクリプトを書いておいて、ちょいといつもとちがう感じで起動するすれば問題解決である。

```sh:sample_code/output/sample.sh

#!/bin/sh

echo "this is test!"
```

```sh:call.sh
#!/bin/sh

cd ./sample_code/output

./sample.sh

```

sample.shが起動したいスクリプトとする

```
$ . call.sh
```

のように叩くと

```
this is test!
$ pwd
/home/hoge/sample_code/output
```

実行後にスクリプト内でcdしたディレクトリに移っているのです。
面倒臭がりな私は、ディレクトリ移動して、vagrant resumeするのとsuspendのをスクリプトにしてます（それ位は入力しろよ・・・）
Rails tutorial 11 章　sendgridエラー「 sendgrid.net から無効な応答が送信されました。」

このエラーで数時間詰まったので、自分が解決した方法を記します。


自分の場合、production.rb  のhost名が原因でした。



Rails.application.configure do
  .
  .
  .
  config.action_mailer.raise_delivery_errors = true
  config.action_mailer.delivery_method = :smtp

  host = '<your heroku app>.herokuapp.com'

  config.action_mailer.default_url_options = { host: host }
  ActionMailer::Base.smtp_settings = {
    :address        => 'smtp.sendgrid.net',
    :port           => '587',
    ・・・



となっておりますが、このhost名を
'https://youngwave~~~.heroku.com'

httpsからきちんと自分のアプリ名を入れてください。
その後ちゃんと、git add, git commit git push して
heroku db:reset して、データベース消して、もう一回新規登録から、再挑戦してみてください。

　

健闘を祈ります！
【デザインパターン】Go言語で再考するAbstract Factory

# Abstract Factoryパターンを一言で！
インスタンスの生成（New）を全てインスタンス生成工場に任せるパターン

ソースコードは以下のリポジトリを参照してください。
https://github.com/yoshinorihisakawa/design-pattern/tree/master/abstract-factory

# Abstract Factoryパターンが使えるシチュエーション
- 使う側の修正を少なく、インスタンスを生成を切り替えたい
- 複数のオブジェクト群を間違いなく生成したい

※本来Abstract Factoryパターンは後者の複数のオブジェクト群の生成を一つの工場に任せて生成させるパターンですが、工場をうまく切り替えて製品を生成する方法（strategyのような）の方が実用的かと思います。なのでこの記事ではそれを考慮したものになっております。

# Abstract Factoryパターンを詳しく解説
Abstract Factoryパターンでは、抽象的な工場と、抽象的な部品を組み合わせて、抽象的な製品を作っていきます。
抽象的？と疑問を持たれたかもしれないので、抽象的という言葉について、一度定義しておきます。
抽象的とは、「具体的な実装のことは考えずに、インタフェースや抽象メソッドだけについて考えること」とします。
抽象的な部品を使って組み立てることで、使う人が具体的な実装には知らなくて良い状態になります。
言い換えると、こっそり具体的な実装を修正しても使う人はその修正を気にする必要が無くなります。
つまり、「使う人」と「実装」の依存関係が浅くなり、変更に強いプログラムを作ることができるのです。

それではAbstract Factoryパターンを使った場合、使わなかった場合を比較して見ていきます。
### Abstract Factoryパターンを不採用
例えば、Mysqlを生成し、使う場合もあれば、Postgresを生成し使う場合の２パターンがあるとします。
処理を切り替える場合は、以下のように生成する処理を書き換える必要があります。

```golang
// mysql
Mysql m = NewMysql();
m.hogehoge()

// Postgres
Postgres p = NewPostgres();
p.hogehoge()

```

### Abstract Factoryパターンを採用
上記の処理をAbstract Factoryパターンを採用したらどのようなコードになるか見ていきます。

```golang
// mysql
Factory f = NewFactory(Mysql)
Db db = f.getDb()
db.hogehoge()

// Postgres
Factory f = NewFactory(Postgres)
Db db = f.getDb()
db.hogehoge()

```

Abstract Factoryパターンを採用したコードでは、引数を変更するだけで、
MysqlからPostgresへ変更する事ができました。
このようにインタフェースなどを用いて、使う側に依存のないコードを書くようにすると変更に強いプログラムを作る事でできます。

# UMLでイメージを掴む
よく出回っているのでこちらのクラス図を参照
http://www.techscore.com/tech/DesignPattern/AbstractFactory.html/

# 実装してみる
以下のリポジトリにAbstract Factoryパターンを実装したソースを載せておきました。
https://github.com/yoshinorihisakawa/design-pattern/tree/master/abstract-factory

抽象と具象の境界を意識してコードリーディングをするとわかりやすいかもしれません。

# 最後に
Abstract Factoryパターンは比較的シンプルなデザインパターンなので、
積極的に実戦で使っていけるパターンだと思いました。
Google Apps Script (GAS)に関連するファイルだけ検索するやり方

driveでいつも頑張って探してたが、scriptのトップがあった。備忘録

https://script.google.com/home

スクリプトファイルと、スクリプトを書いたスプレッドシートなども出てくるので便利。
実行状況等もここで見れるので、知らないところで動いている過去のスクリプトなども抽出できる
プリロードを無効にする

# プリロードを無効にする
デフォルトでは全てのページのjsを読み込む動作になっており、ページ数が多くなってきたのでどうしたものかと
ドキュメント見たら普通に書いてあった。

> resourceHints
> Adds prefetch and preload links for faster initial page load time.
> You may want to only disable this option if have many pages and routes.

ズバリこれだ **if have many pages and routes.**
という訳でコンフィグに書いて事なきを得た。

```js:nuxt.config.js
module.exports = {
    render: {
        resourceHints: false
    },
```
このジャンルで一つだけでもマスターすればいいよね的なあれ

React? Angular? Vue?全部覚えなきゃいけないの? -> どれか一つで良いんじゃないっていうお話のときにでてきた例え。

| 種別 | 1 | 2 | 3 |
|:-:|:-:|:-:|:-:|
| JSフレームワーク | Angular | React | Vue |
| 古のエディタ | vi | Emacs | Vim |
| Windowsエディタ | 秀丸 | さくらエディタ | notepad.exe |
| Web系IDE | Eclipse | NetBeans | IDEA(PhpStorm, WebStorm) |
| Linux | Ubuntu/Debian | CentOS | Gentoo/Arch/Alpine |
| Cloud | AWS | GCP | Azure |
| エディタ2.0 | SublimeText3 | Brackets | Atom |
| Git | GitHub | Bitbucket | GitLab |
| CMS | WordPress | Joomla | Xoops |
| LL | PHP | Python | Ruby |
| RDB | MySQL (MariaDB) | PostgreSQL | Oracle |
| ブラウザ | Chrome | Safari | IE |

実生活の例だと…

| 種別 | 1 | 2 | 3 |
|:-:|:-:|:-:|:-:|
| 普通車 | トヨタ | Honda | 日産 |
| バイク | ホンダ | ヤマハ | スズキ カワサキ |
| 携帯キャリア | Docomo | au | Softbank |
視認性が高いCSSコメント 書き方バリエーション


Sassを使う以前、CSSが長い1ファイルだった頃。

の記述をわかりやすくする目的で
CSSプロパティより長いコメントで区切っていた。

Sassを使うようになり、Project単位でファイル分割をするため、
エリア分割コメントを入れていない。
たまに使う機会があるので、書き方バリエーションをメモしておく。

## コメント使い所

```CSS
/*
#####################################################################  
 1 .header
 2 .contents
 3 .footer
 作業者：sato
#####################################################################
*/
```
CSSファイルの先頭に目次を入れる。
footerは3番目の位置に記載されているとわかる。

```CSS

/*
#####################################################################  
 1 .header
#####################################################################
*/

Projectの先頭にコメントを入れて、範囲を目で見てわかりやすくする。

```

Project単位


## CSSコメントバリエーション

```CSS/SCSS
/*
#####################################################################  
 Project
#####################################################################
*/

/*
*********************************************************************
 Project
*********************************************************************
*/

/*
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Project
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

/*
/////////////////////////////////////////////////////////////////////
 Project 
/////////////////////////////////////////////////////////////////////
*/

/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 Project 
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/
```

## CSSにコメントを吐き出したくない場合

このような記述も使える。


```SCSS

//コメント
////////////////// Project ///////////////////

```


### 参考サイト

【CSS】CSS のコメントの書き方 | バシャログ。
http://bashalog.c-brains.jp/07/12/20-142330.php

コメントの書き方｜CSSの基本｜CSS HappyLife ZERO
http://zero.css-happylife.com/basic/comment.shtml

【CSSの基本】コメントを誰でも簡単にする方法を解説 | CodeCampus
https://blog.codecamp.jp/css-comment

HTML/CSSのソースコードのきれいなコメントの書き方まとめ
https://www.webprofessional.jp/how-good-are-your-html-and-css-comments/

SCSSの3つのコメントスタイル - 眠る前に布団にはいろうか
http://d.hatena.ne.jp/nenjiru/20111115/scss_comment_style
KAZYおすすめMacの設定、ショートカット(初心者用)

どうも、KAZYです。
トラックパッドは便利だけどキー操作で色んなところを触りたいですよね。
KAZYに見慣れていただいてから以下へお進みください。
## おすすめ設定
### 1.英語表記
- リストから選ぶ際、頭文字をタイプして移動するのが便利だから

[やり方] 

- `System Preferences>Language & Reagion`でEnglishを最上位にする、`Region`はJapanでよし<img width="618" alt="01.png" src="https://qiita-image-store.s3.amazonaws.com/0/141196/02b8712d-0fde-405f-e631-9711185fafaf.png">


### 2.ファンクションキー入れ替え
- `fn`キーを押しながらファンクションキーを押さなくてはいけないのは面倒だから

[やり方]

- 場所は`System Preferences>Keybord`の以下の部分をチェック
<img width="561" alt="02.png" src="https://qiita-image-store.s3.amazonaws.com/0/141196/bd98b371-192b-0850-d386-2fd105e606bb.png">

### 3.右上にVPN接続アイコンをつける
- `System Preferences>Newwork`へ行くのが面倒だから

[やり方]

- `System Preferences>Newwork`のVPN接続下部の以下をチェック<img width="214" alt="03.png" src="https://qiita-image-store.s3.amazonaws.com/0/141196/5edb05a9-2345-15da-a576-e28b23a21b1c.png">


### 4.半角カタカナON
- デフォルトのIMEだとなぜか自分はoffになっていてF8が効かなかったので。。

[やり方]

- `System Preferences>Keybord>Input Sources>Japanese`で以下をチェック
<img width="168" alt="04.png" src="https://qiita-image-store.s3.amazonaws.com/0/141196/0492a5f9-3c16-4dd5-0fc4-4d4ffa4c200c.png">

### 5.`￥`キーのデフォルトを`\`キーに
- "¥" key generates **\\(Backslash)**に変更
- 変更後`option + \`が`¥`に
- 因みにPunctuationをいじれば`、。`を`，．`に変更できるよ<img width="780" 
alt="06.png" src="https://qiita-image-store.s3.amazonaws.com/0/141196/473aca90-1a9f-6281-6f05-f0bf1e32c69b.png">


## おすすめショートカット
###全般
- ファンクションキーはワンタッチで使えるように設定を変更しておきましょう

|説明|コマンド|便利度|コメント|
|:----:|:-----:|:----:|:-----:|
|Preferencesへ|**commnad + ,**|＊＊＊|結構便利|
|左上🍎へ|**control + F2**|＊|ヘルプのほうがコマンド楽|
|左上Helpへ|**command + ?**|＊＊＊|good|
|右上(wifiとか)へ|**control + F8**|＊＊＊|自分はよく使う|
|ウィンドウ回し|**control + F4**|＊|つかわん|
|Dockへ|**control + F3**|＊＊＊|System Preferencesへ行くときによく使う|
|Delete|**fn + backspace**|＊＊＊|control + Dで事足りる|
|window最大化(戻す)|**control + command +  F**|＊＊＊|左上にカーソル持っていくのは疲れるよね|
|window最小化(Dockへ)|**command + M**|＊|あまり使わない|
|windowを隠す|**command + H**|＊＊＊|連打すればどんどん隠れていく。command+tabで選べば復活するよ|
|終了(ウィンドウ)|**command + W**|＊＊＊|qと間違えないように|
|終了(アプリごと)|**command + Q**|＊＊＊|command+tab時にもQ押すと終了できるよ|
|アプリケーション強制終了|**command + option + esc**|＊＊＊|固まっちゃったとき|


###Finder
- 覚えづらいものが多いので一部だけ

|説明|コマンド|便利度|コメント|
|:----:|:-----:|:----:|:----|
|Downloads|**command + option + L**|＊＊＊|Down **L** oads|
|Desktop|**commnad + shift + D**|＊|**D** esktop|
|Documents|**command + shift + O**|＊＊|D **o** cuments|
|ディレクトリ下位へor実行|**command + ↓**|＊＊＊|Enterではないよ|
|ディレクトリの上位へ|**command + ↑**|＊＊＊||
|一番上or下のファイルへ|**option + ↑or↓**|＊＊＊||
|ファイル名変更|**enter**|＊＊＊|ここで使うのか|
|ファイルの詳細|**command + I**|＊|command + **I** nfo
|削除(ゴミ箱へ移動)|**command + backspace**|＊＊＊|rmではないので安心だね|
awkを使ってrake routesのパス部分だけを表示

Qiitaに投稿するほどのことじゃないけど、awk普段全然使ってなかったので。便利。

```
# awkで3つ目の列だけ表示
bin/rake routes | awk '{print $3}'

# grepで絞り込んでからの場合はこんな感じ
bin/rake routes | grep hogehoge | awk '{print $3}'
```
【告知】iOSDC 2018で、圏論について話します ＋ Storyboard/AutoLayout相談会やります

こんにちは、 @inamiy です。
いよいよ来週、 **8月30日〜9月2日** の3.5日間にかけて、 **[iOSDC Japan 2018](https://iosdc.jp/2018/)** が開催されます。
私は、最終日の **9月2日（日） 15:10〜 Track Cで 「圏論とSwiftへの応用」** というテーマで登壇を予定していますが、
既に（次回イベント用の）英語版のスライドも完成して、今のところ進捗は200%です。
今回の発表は、[記録的な不作だった昨年の反省](https://qiita.com/inamiy/items/a6f73438b32896ffa81e)を生かし、**イラストを大量に用意して、「圏論入門資料」としての分かりやすさを最重視しています**。
また、元々の題材が良いだけに、 **今まで発表してきた中では一番面白い** と思いますので、ぜひ当日遊びに来て下さい 😉

- [圏論とSwiftへの応用 by 稲見 泰宏 | プロポーザル | iOSDC Japan 2018 - fortee.jp](https://fortee.jp/iosdc-japan-2018/proposal/45b858e0-753c-4387-9210-5837cff6da7a)
    - 9月2日（日） 15:10〜 Track C
<img width="796" src="https://qiita-image-store.s3.amazonaws.com/0/2249/88d90ab3-2346-d6db-e9e1-0b7106180552.png">

また、今回の登壇は、過去シリーズの続編になるので、事前に予習しておくと、さらに楽しめると思います。

- [Algebraic Data Type in Swift - Speaker Deck](https://speakerdeck.com/inamiy/algebraic-data-type-in-swift)
- [Swiftで高カインド多相 - Speaker Deck](https://speakerdeck.com/inamiy/swiftdegao-kaindoduo-xiang)

そのほか、知っておくと良い事前知識として：

- 末尾再帰
    - [末尾再帰による最適化 - Qiita](https://qiita.com/pebblip/items/cf8d3230969b2f6b3132)

- モナド
    - [モナドについてSwiftで説明してみた - Qiita](https://qiita.com/koher/items/12f72f2fc2db7fa709cf)

- レンズ
    - [SwiftでLens(すごいgetter/setter)を実装してみた - Qiita](https://qiita.com/to4iki/items/f0cc28e1102cf53be85d)
    - [Swift4 KeyPathを使った、自動生成が必要のないレンズの例](https://github.com/inamiy/Swift-Lens-Example)

圏論が、これらの（関数型）プログラミング用語とどのようにつながっていくかを、丁寧に紐解いていきます。
（関数型ポエムは一切ありませんので、ご安心下さい）

## 9月1日（土） 13:30〜 Track F で 「Storyboard/AutoLayout相談会」します
<img width="818" src="https://qiita-image-store.s3.amazonaws.com/0/2249/80aa0346-62e3-89b4-cb09-f05cfb6c4f6c.png">

また、 **9月1日（土） 13:30〜から、Track F で「Storyboard/AutoLayout相談会」** という座談会を20分ずつ、計3ラウンド開催して、その司会進行を務めます。

- [IRT: Interactive Round Table を実施します - iOSDC Japan スタッフブログ](https://blog.iosdc.jp/entry/2018/07/24/100415)

基本的に、 **StoryboardとAutoLayoutが好きなiOSエンジニア** を対象としていますが、「私はコードでビューを作る派」「Visual Format Languageこそ至高」「AutoLayout絶対◯すマン」な方でも気軽に参加して、お互いの知見を共有できる場になればと思います。
もし、皆に相談したい内容があれば、WWDCのラボのように、 **事前にメモを用意しておくとスムーズ** だと思います。


・・・というわけで、いよいよ来週が楽しみになってきましたね！
それでは、皆様、当日お会いしましょう😄
意外と深いJavaのリストの反転 ～ Stream処理まで

Javaでリストを反転させるのが意外と難しかったのでメモ。

```Ruby
[1, 2, 3].reverse
```
rubyでは配列は↑のように簡単に反転します。
JavaもStreamAPIとかに標準で反転が搭載されているだろうと思っていましたが、

```Java
list.stream().reverse();
```
こんなことはできませんでした。
ストリーム関連いろいろ探してみましたが、見つからず、困ってしまいました。

とりあえず、for文でリストを逆から回して反転するリストを生成するという愚行に。。。

ということで**リストを反転させて利用する3つの方法**をまとめてみました。

# 1. 最も一般的なCollections.reverseを使う方法
標準ライブラリで用意されている最も標準的な方法です。

```Java
List<String> list = Arrays.asList("a", "b", "c", "d", "e", "f");
Collections.reverse(list);
// list = [f, e, d, c, b, a]
```

この処理は`list`を破壊的に変更するので注意してください。
ちなみに`Collections`は`List`や`Set`などのコレクションを操作する処理が集まっています。例えば、`shuffle`や`sort`などがあります。

# 2. Dequeを使う方法
頻繁に右に左に構造を渡り歩くなら双方向リストに変えてしまうのがよいです。

```Java
Deque<String> deque = new LinkedList<>(list);
// 順
for(String s: deque) {
	// sの処理
}
// 逆
Iterator<String> iter = deque.descendingIterator();
while(iter.hasNext()) {
	String s = iter.next();
	// sの処理
}
```
ただ、少しレガシーな書き方になってしまうのが難点です。。。

# 3. StreamAPIのCollectを使う方法
StreamAPIを使う方法もあります。Stream処理自体は基本的には要素の順番に依存しない、それぞれの要素で独立した処理が得意です。一方で順序関係が含まれる処理は不得意となります。ただし、順序は保証できるので、これを利用して反転させることができます。

```Java
// 少し長い。。。が、何度も逆順リストを得る処理が出現しないなら
List<String> reversedList = list.stream().collect(ArrayList::new, (l, e) -> l.add(0, e), (l, subl) -> l.addAll(0, subl));
```
collectは集計処理を記述するメソッドになります。

0. `ArrayList::new`は集計のためのクラスを決める。
1. `(l, e) -> l.add(0, e)`は集計処理の本体。ここでリストlの先頭に要素を追加する。
2. `(l, subl) -> l.addAll(0, subl)`は並列実行時のまとめの処理。第1引数にまとめること。（並列処理時はリストを適当に区切って処理され、それぞれ集計結果が出力される。この複数の結果を統合する必要がある。）

これはやりたいことが単純な割に記述が面倒です。**本当は以下のように書きたいです。**

```Java
List<String> reversedList = strs.stream().collect(MyCollectors.reverse());
```

この場合は以下のようなCollectionの実装クラスを用意します。

```Java:MyCollectors.java
public class MyCollectors {

	public static <T> Collector<T, List<T>, List<T>> reverse() {

		return new Collector<T, List<T>, List<T>>() {
			@Override
			public Supplier<List<T>> supplier() {
				return ArrayList::new;
			}

			@Override
			public BiConsumer<List<T>, T> accumulator() {
				return (l, e) -> l.add(0, e);
			}

			@Override
			public BinaryOperator<List<T>> combiner() {
				return (l, subl) -> {
					l.addAll(0, subl);
					return l;
				};
			}

			@Override
			public Function<List<T>, List<T>> finisher() {
				// 最終的な集計処理は必要ないので、そのままリストを返す
				return l -> l;
			}

			@Override
			public Set<Characteristics> characteristics() {
				// 並列処理可
				return EnumSet.of(Characteristics.CONCURRENT);
			}
		};
	}
}
```
書くのは面倒ですが、1度書けば、stream処理で簡単に使うことができるようになります。

# おまけ) 場合によっては反転したリストを生成しなくてもいい
反転したリスト自体が中間生成物の場合はリストを反転させる必要はありません。
例えば、文字列を逆順で結合したいなら、反転したリストを作る必要もなく、以下の処理で済みます。

```Java
List<String> strs = Arrays.asList("a", "b", "c", "d", "e", "f");
String reverse = strs.stream().reduce((e1, e2) -> e2.concat(e1)).get();
// reverse = "fedcba"
```

# まとめ
Javaの場合はチェーンメソッドで一言だけで簡単にというわけにはいきませんが、主に以下の3つ方法がありました。
0. Java標準のCollections.reverseを使う
1. Dequeを使う
2. StreamAPIを使う
個別の処理にあった方法を使う必要がありそうです。
ExoPlayer でネットワーク接続が復旧した直後に自動でストリーミング再生を再開してみた件

# 目的

[ExoPlayer](https://github.com/google/ExoPlayer) で動画を視聴中にオフライン等で再生が不能になった後、オンラインに復帰して再生可能な状態になったときに再生を自動で再開したい。

## 例

- [YouTube](https://play.google.com/store/apps/details?id=com.google.android.youtube)

# 方法

`Player.EventListener` の `onPlayerStateChanged()` から返却された `playbackState` が `Player.STATE_IDLE` の場合や、`onPlayerError()` などで再生の失敗を検知した場合に `ExoPlayer` の `prepare()` を実行しておきます。

## サンプル

``` kotlin
override fun onPlayerStateChanged(playWhenReady: Boolean, playbackState: Int) {
    when (playbackState) {
        Player.STATE_IDLE -> player?.prepare(mediaSource, false, false)
    }
}
```

`ExoPlayer.prepare()` の第２引数は `boolean resetPosition` になっていますが、動画が生配信の場合は `true` にしておくのが良いかと思います。

## 結果

機内モードを解除した直後に動画の再生が再開されました :arrow_forward:

![タイトルなし.gif](https://qiita-image-store.s3.amazonaws.com/0/6881/c4c31507-f5c7-7d6d-73d2-59eabbaa0e4b.gif)

## 何故できるのか

`prepare()` を実施すると `player` の `playbackState` が `Player.STATE_BUFFERING` に変わり、一定時間経過しても再生準備ができない場合は `playbackState` が `Player.STATE_IDLE` に変わるため更に `prepare()` が呼ばれる。
つまり再生の準備に成功するまで一定間隔でリトライを繰り返す無限ループに陥るからである。
そんな仕組みで大丈夫なのでしょうか（？）

# 参考 :link:

[Android ExoPlayer not resuming after network is connected - Stack Overflow](https://stackoverflow.com/questions/35695839/android-exoplayer-not-resuming-after-network-is-connected)
ConoHaのVPSを初期設定。sshログイン後ユーザ作成、rootログイン禁止、port変更まで

さて、もう下記の通り。特に新しいことはございません。

[ConohaにVPSを設置して、SSHログイン、ポート番号変更、rootログイン禁止までを30分で！]
(https://qiita.com/ongaeshi/items/bb17ebfbd4d22057c8fd)

ただ、上記記事中の以下の部分だけちょっと変更。

##SSH接続の準備部分

RSAAuthenticationがsshd_configになかった。
いったんなしでやることにする。

~~RSAAuthentication yes~~

```
PubkeyAuthentication yes

AuthorizedKeysFile      .ssh/authorized_keys
```
```
$ sudo service sshd restart
```

## ssh ポート番号変更部分
iptablesの設定も省く。必要ないみたい。
firewalldの設定が必要。

参考↓
[ConoHaのVPS(CentOS7.4)にSSH接続する手順]
(https://qiita.com/EisKern/items/3a12bd61ba572e8430d9)

ということで、設定終了したからイメージを保存しておく。これで今後再構築しても設定は必要なくなる。。。！
macでマウスカーソルのサイズを変更する

現在開発環境で4K24インチのディスプレイ2台をつないだMacBookProを使ってますが、画面のサイズに対してマウスカーソルが小さすぎる！
Macのシステム環境設定からアクセシビリティを開き、ディスプレイの項目からマウスカーソルのサイズを調整できます。知ってました？私は今知りました

マウスの設定とか、アクセシビリティのマウスの項目じゃなくて、アクセシビリティのディスプレイの項目で変更できるのはもしかしたら気づかない人もいるかも知れませんし、
Mac初心者なんてマウスシェイクでカーソルが大きくなること自体知らない人いると思うんです。まぁ慣れるとWindowsには戻れませんが。

<img width="672" alt="スクリーンショット 2018-08-26 15.15.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/249725/7ed9eeff-a5ae-9030-1111-9bb1c426d13a.png">
システム環境設定を開き、アクセシビリティをクリック

<img width="667" alt="スクリーンショット 2018-08-26 15.15.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/249725/96ccec78-e655-55f2-48ba-aa961de302a1.png">
左の欄からディスプレイを探し、カーソルのサイズを調整
とっても簡単 SORACOM Lagoonで デジタルサイネージを作ってみよう

## SORACOM Lagoon の良いところ
・ダッシュボード作作成できる
・一度ログインしてしまえば、ログアウトしない限り好きなときにローディングしてデータ確認できる
・自動更新ができる！
　　これって意外と便利さMAX!更新ボタンを押すの面倒ですよね！！
　　自動更新できると、ぼーっと画面を眺めるだけでお仕事できますｗ
![777.jpg](https://qiita-image-store.s3.amazonaws.com/0/153317/f2f09111-cc23-6ef6-8b5d-6cf576492427.jpeg)



## これ・・・デジタルサイネージに使えるやん
事例「工場の温度管理をSORACOM Lagoonでやってみた」
イメージ図
![qqq.jpg](https://qiita-image-store.s3.amazonaws.com/0/153317/ad79617a-893d-9d10-049f-df45e09b338d.jpeg)

そしてこの画面をタブレットで表示し、
５分毎自動更新にする。(WioLTE+温湿度のセンシングおよび送信頻度は1分ごと)
タブレットは品質管理室に設置する。

工場全体を俯瞰できるので
温度管理できていない部屋がすぐに分かる。

プラウザの印刷機能を使用することで
簡易的な報告書にもなります。
Visual Studio Codeの拡張機能で簡単にC++をコンパイル・実行する

・筆者の環境はWindows10 64bit．
・C++に限らずPython等他の言語でも簡単に実行できるとのこと．

####拡張機能「Code Runner」をインストール
[こちら](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)よりインストール．

####コンパイル・実行
上記をインストール後に該当のC++ファイルを開き，`Ctrl+Alt+N`で処理実行．

####コード中で標準入力を用いている場合
ファイル>基本設定>設定
「設定の検索」に"runInTerminal"と入力．
`"code-runner.runInTerminal": true`に設定変更(デフォではfalse)．

上記を設定後，C++ファイルを`Ctrl+Alt+N`で実行することでターミナルから入力可能になる．
Dockerにディスク圧迫されし者へ贈るバルスコマンド

## バルス発動

下記コマンド実行し、25Gくらい使用されたディスクの16Gを開放する事に成功した！
Dockerを利用し続けたゴミがこんなにも残っていたとは。。。

`$ docker system prune`

```
WARNING! This will remove:
	- all stopped containers
	- all volumes not used by at least one container
	- all networks not used by at least one container
	- all dangling images
Are you sure you want to continue? [y/N] y

...中略

Total reclaimed space: 16.49GB
```

## コマンドの解説
警告文にも書かれていますが、不要と思われる下記の対象を削除します。

削除対象
- all stopped containers (停止中のすべてのコンテナ)
- all volumes not used by at least one container (少なくともひとつのコンテナにも利用されていないすべてのボリューム)
- all networks not used by at least one container (少なくともひとつのコンテナにも利用されていないすべてのネットワーク)
- all dangling images (不要なすべてのコンテナイメージの削除。不要=TAGが`<NONE>`になっているDocker image)
Zsh — エンターキーをバインドする


出来ないかもと思っていたら‥出来た :tada: 

## Example

```
bindkey a accept-line
```

a を押すと Enter されるのが分かるだろう。

## Versions

- zsh 5.5.1 (x86_64-apple-darwin17.5.0)

## Ref

- [18 Zsh Line Editor (zsh)](http://zsh.sourceforge.net/Doc/Release/Zsh-Line-Editor.html)

## Links

- [Gist](https://gist.github.com/YumaInaura/f2a981c08308628197e1d32ce52e5dd5)
- [Medium—imported](https://medium.com/supersonic-generation/zsh-zle-bind-enter-key-by-using-accept-line-zle-widget-c278ee1fb2f)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
MaterialButtonを使って、まるっこいボタンを難なく作る

ほぼ自分用のメモです。

## まえおき

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74571/37514f67-ab65-c737-66e6-3bdf6d15a5d6.png)
Webデザイナーがアプリをデザインするとよく出てくる、やたらと丸っこいこういうボタン。（偏見ｗ）



こういうボタンは、2018年に入るまでは

* 「そんなのマテリアルデザインじゃない」と突っぱねる
* リップル効果を諦めて、selectorのdrawableを作ってそれっぽい実装をする
* カスタムビューを作って頑張る

など、実装には涙ぐましい努力が必要でした。

しかし、最近になってようやく[マテリアルデザインにそれっぽい概念が組み込まれました](https://material.io/design/components/buttons.html#theming)。
従来のAppCompatButtonだけでなくMaterialButtonというUI部品が利用できるようになり、丸っこいボタンはMaterialButtonで簡単に実装ができるようになりました。

## MaterialButtonを使ってまるっこいボタンを作る

```xml
        <com.google.android.material.button.MaterialButton
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:text="会員登録"
            android:textAppearance="@style/TextAppearance.MaterialComponents.Button"
            app:backgroundTint="@color/colorPrimary"
            app:cornerRadius="28dp" />
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/74571/b1bd322c-49fe-c9f0-e421-9fa4af7cfe50.png)

ポイントとしては

* `app:cornerRadius` で高さの半分の値を指定する
* `style="@style/Widget.MaterialComponents.Button.UnelevatedButton"` 指定で、影をつけない
* `android:textAppearance="@style/TextAppearance.MaterialComponents.Button"` （もしくはそれを継承したTextAppearance）を指定する

の3点。1点目は簡単に想像がつきますが、2点目と3点目をしっかり指定してあげないと、正しくまるっこいボタンにはなりませんでした。（TextAppearanceの指定は、されていないとアプリがクラッシュしますｗ）

## 補足

ちなみに、この記事では挙げませんでしたが、[角丸の枠つきテキストボックス](https://material.io/design/components/text-fields.html#outlined-text-field)も TextInputLayoutで簡単に利用できるようになったみたいです。



https://github.com/material-components/material-components-android/blob/master/docs/components/TextInputLayout.md#outline-box

`style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"` を指定すればいいようですが、こちらはまだ検証してないので、検証してみてから記事にしようかなと思います。
Sublime textでエディット環境を整える

python練習とはいえ、xubuntu標準エディタのmousepadでコーディングするのは、地味にしんどくなってきた。

pycharmにしようかと思ったが、どうもOpenJDKのバージョンが合わず起動しなかった。
あまりベース環境をいじくるエディタは避けたい。

いろいろ見ているとSublime textというエディタが軽くて高機能でいいらしい。
早速入れてみる。

公式サイト
https://www.sublimetext.com/

aptでインストールする手順は公式より、以下。

```
wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -

sudo apt-get install apt-transport-https

# 安定版
echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list

sudo apt-get update
sudo apt-get install sublime-text

```
ビルドチェックもやってくれる。
というか、クラス定義した瞬間に、デフォルトの__init__を書いてくれる。べんり〜。

![スクリーンショット_2018-08-26_14-04-09.png](https://qiita-image-store.s3.amazonaws.com/0/283529/13b70116-06bf-d978-4ff9-16ed845b78ef.png)

[日本語化メモ]
tools -> Command Pallet
から
「install」と打って、
「Pachage Control: Install Package」
を選択
「Japanize」と打って、インストール
複数人で開発している時に、自分のローカル環境で新しいブランチを作る時注意すること

#まずmasterブランチに切り替える

```git branch```でブランチを確認して
masterじゃなければ、
```git checkout master```でmasterに切り替える。

#git pull origin master で最新にする
リモートの最新masterをローカルに持ってくる

#最新にしたmasterブランチから、featureブランチを作る
```git checkout -b feature/ブランチ名```
これで新たなブランチを作成＆ブランチ切り替えを実行できる。

できたら、そこから新規機能の追加など、開発スタート。


###自分の備忘録です
こないだmasterではないブランチから、```git checkout -b feature/ブランチ名```して間違えたので、正しい手順書いときました。
git masterのブランチを作成しpushする方法

```
$git branch b1`
```
ローカルにブランチを作成する

```
$git checkout b1`
```
ブランチをb1に切り替える

```
$ git branch -a
```

```
* b1
  master
  remotes/origin/b1
  remotes/origin/master
```

*がカレント

```
$git push origin b1`
```

b1をpushする originとはbitbucketとか場所の別名

```
$ git config --list|grep ori
remote.origin.url=ssh://bitbucket.org/shokoro/hajiboot2.git
remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
branch.master.remote=origin`
```
ブロックチェーンアプリケーションの概要が身に着けられるcryptozombiesやってみた①

# ブロックチェーンて何ができるの？
ブロックチェーンの簡単な仕組みはわかったけど、「じゃあ実際にどうやって動かすの？何ができるの？」ということでちょっと調べてみた。

ざっくりいうと以下の感じ（間違っていたらごめんなさい）
- ブロックチェーンのアプリケーションはDApps（ディーアップス）と呼ぶ
- イーサリアム上で動かせる
- SolidityというJavascriptライクな言語で記述できる

クリプトゾンビなるアプリケーションが入門に良いとのことなので、ものは試しでやってみた。（ググってみたら、すごい評判がよかった）
https://cryptozombies.io/jp/

レッスン通りにやっていくとだいたいのことは理解できるらしい。
ただ、前提としてJavascrpitのことはある程度分かっている必要があるとのこと

実際の説明は本家のサイトを見ていただくとして、
実際にやってみた上での所感を書いていく

## レッスン 1: ゾンビファクトリーの作成

### チャプター 1: レッスンの概要
やること：特になし。このレッスンの目的を理解する

アプリの目的の説明。16桁の数値を設定してゾンビを作成するんだってさ

### チャプター 2: コントラクト
やること：基本的な概念としてコントラクトを理解する

ここからコードの内容に入る
まずはSolidityの基本の考え方の説明
> Solidityのコードはコントラクト内にカプセル化されている
> コントラクト=イーサリアムアプリケーションの基本ブロック

classみたいなもので、プログラミング言語の基本的な使い方の話と理解。

> Solidityのソースコードは全て”version pragma"で始まらなければならない
> 実際にはpragma solidity ^0.4.19; という風に宣言する

互換性担保のためにビルドバージョンを宣言するらしい。ブロックチェーンアプリケーションは性質上切り戻しが難しい（通常のサーバアプリケーションと違って各ブロックにかかれてしまう）とのことなので、そのための配慮かもしれない

ここでは実際にブラウザにコードを打ち込むと次に進める

### チャプター 3: 状態変数と整数
やること：変数の型を理解する

> 状態変数=定数のこと
> Solidityでは整数型を使う際、int型ではなく、正の数のみを定義できるuint型をよく使うらしい

永久にブロックチェーン上に格納されるとのこと。

### チャプター 4: 数式演算
やること：数値演算のやり方を理解する

数式演算の話。普通の言語っぽく、特に癖はない

### チャプター 5: 構造体
やること：Solidityの構造体の概要を理解する

> 複数のプロパティを持つ複雑なデータ型を扱える形式を構造体という

json形式でデータを扱うようなものだと理解

### チャプター 6: 配列
やること：Solidityの配列を理解する
> 固定長配列と可変長配列があるとのこと
> 配列宣言時に[]内に数値を入れれば固定、いれなければ可変となる
> 構造体も配列とすることができる
> publicとすれば自動的にgetterメソッドができる

コントラクトの公開データを格納するときに便利らしい
宣言の仕方は
「"構造体"[] public 配列名」となる
例：Zombieが事前に作った構造体、zombiesが配列
 `Zombie[] public zombies;`

### チャプター 7: 関数の宣言
やること：Solidityの関数の概要を理解する

関数の宣言は`function`で宣言するため、いたって普通のJavascriptっぽい
ただ命名規則は以下が通例らしい

>グローバル変数と区別をつけるために、関数パラメーター変数名はアンダースコア(_)をつけるのが通例（必須ではありません）です。

### チャプター 8: 構造体と配列の操作
やること：配列への値追加を理解する
他の言語でいうaddとかappendの代わりにpushというメソッドを使うらしい

### チャプター 9: Private / Public 関数
やること：先ほど作った関数にPublicとPrivateの宣言を追加する

Solidityの関数はデフォルトではpublicらしいので、秘匿にしたい関数はキチンとprivate宣言してあげる必要があり

### チャプター 10: さらに関数を続けるぞ
やること：先ほど作った関数に戻り値と修飾子を追加する

戻り値は型を宣言時に指定するのと、returnで戻す値を指定するので特に癖はなさそう
関数の修飾子
他の言語になさそうな概念が二つ
- view:dataが読み取り専用で編集できないときに可能な宣言。コントラクト内の変数とかを使用したい場合はこちら
- pure:アプリ内のデータにすらアクセスできない。コントラクト内の変数とかも使用できない。引数に対して簡単な計算とか値を返す時に使用する（多分）

※Solidityのコンパイラがどちらの修飾子を使えばいいか教えてくれるらしいので、使いながら慣れていくことが出来そう

### チャプター 11: Keccak256と型キャスト
やること：ハッシュ生成と型キャストを用いた関数を作る

keccak256というハッシュ関数を使うと、文字列をランダムな256ビットの16進数にマッピングしてくれるので、それを使ってハッシュ値を生成する。
ここでは疑似乱数生成に利用する

出てきた数値をuint型にキャストしてあげる

※ブロックチェーンでの安全な 乱数の生成は非常に難しい課題らしいので、それはそれでまたちゃんと調べる必要があるとのこと

ハッシュ関数で乱数を生成するとものすごく大きい数値がでてくるので10の16乗の剰余を取ってあげると16桁の数値にすることができる。

### チャプター 12: 統合
やること：いままで作成した関数を利用してzombieを作成し、zombies配列に格納する関数を作成する

### チャプター 13: イベント
やること：eventを追加する

>Events は、ブロックチェーンで何かが生じたときに、コントラクトがアプリのフロントエンドに伝えることができるものだ。しかも特定のイベントを'listening'状態にして、何かあった時にアクションを起こすこともできるのだ。

まだこのeventの恩恵がわからないのでとりあえずここでは実装までやってみる

### チャプター 14: Web3.js
やること：フロントサイドのJavascriptの書き方を理解する

Web3.jsというJavascriptライブラリでフロントエンド側を記述できるらしい

コントラクトにアクセスするためのコードが書いてあるが、この章では書き方まであつかわないらしいので、コードを眺める程度

ここまででチャプター1は終了

## 所感

Qiitaにまとめながらやってだいたい2時間くらいで終わったので、普通にやったら1時間くらいで終わる分量だった。
ここまでだと基本的な言語の仕様理解までなので、ブロックチェーンアプリケーションの威力や癖は今後のレッスンを続けていくことで理解できると思う。

続きのチャプターをやったらまた投稿しようと思います
TypeScriptで書いた.vueから.d.tsを生成する。


# やりたいこと
Vue.jsの単一ファイルコンポーネントを（`vue-class-component`を使って）TypeScriptで書くときに、型定義ファイル（`.d.ts`）を生成して型の恩恵を受けたい。

# やること
`.vue`ファイルから、`<script>`タグの中身だけ抽出し、`tsc`でコンパイルする。

## ソースコード
PowerShellで書きました。 
カレントディレクトリから`.vue`ファイルを探して同じ場所に`.d.ts`を生成します。

```powershell
# 定義ファイル生成対象の.vueファイルを取得
$vueFilePaths = Get-ChildItem . -Recurse -Include *.vue

# .vueファイルからscriptタグ内のみを抽出し、.tsファイルを生成
$tsFilePaths = @()
$vueFilePaths | ForEach-Object {
    $content = Get-Content $_.FullName
    # scriptタグの開始位置、終了位置
    $startLine = ($content | Select-String -Pattern '<script').LineNumber
    $endLine = ($content | Select-String -Pattern '</script>').LineNumber
    # .tsファイルを生成
    $vueFileDir = Split-Path $_.FullName
    $tsFileName = $_.Name -replace '\.vue', '.ts'
    $tsFilePath = "${vueFileDir}\${tsFileName}"
    $contentScript = $content[$startLine..($endLine - 2)]
    $contentScript | Out-File "${tsFilePath}" -Encoding utf8
    
    $tsFilePaths += $tsFilePath
}

# 型定義ファイルを生成
tsc --emitDeclarationOnly --declaration
# .tsファイルを削除
$tsFilePaths | Remove-Item
```

# おわりに
[vuetype](https://github.com/ktsn/vuetype)を使えば同じことができてとっても便利なのですが、 
たまにうまく動かないときがあったので作ってみました。
Amazon EFSを作成してみた

# EFSがTokyoリージョンにきた
個人的に待ち続けていたEFSがやっとTokyoリージョンに来たので、作成してみた。

# マネージメントコンソールでの作成方法
①EFSを選択して、「ファイルシステムの作成」をクリックする。

②EFSを作成するVPC、サブネット、EFSにアタッチするSecurityGroupを選択し、「次のステップ」をクリックする。
![FireShot Capture 11 - Elastic File System _ - https___ap-northeast-1.console.aws.amazon.com_efs_home.jpg](https://qiita-image-store.s3.amazonaws.com/0/282630/8ab1df58-c0ea-b08e-152c-1ed9b57b6156.jpeg)


③オプション設定（タグ名、パフォーマンスモードの選択、スループットモードの選択、暗号化の有効化）を選択して　「次のステップ」をクリックする。
![FireShot Capture 8 - Elastic File System M_ - https___ap-northeast-1.console.aws.amazon.com_efs_home.jpg](https://qiita-image-store.s3.amazonaws.com/0/282630/8789c3f1-7ba2-469a-0e2f-a66a37f0d4c7.jpeg)



※）パフォーマンスモード、スループットモードの基準に関しては別記事で書こうと思います。
　　　よっぽどのことがない限りデフォルト値でよいかと思います。

④設定した内容を確認して「ファイルシステムの作成」をクリックする。
![FireShot Capture 9 - Elastic File System M_ - https___ap-northeast-1.console.aws.amazon.com_efs_home.jpg](https://qiita-image-store.s3.amazonaws.com/0/282630/6723bd7d-861e-43f9-5e6a-b6894fe88a44.jpeg)



以上、作るだけなら簡単！！

# まとめ
EFSの作り方としてはシンプルかつ簡単。
今まで、NFSサーバをAWS上で、Pacemaker + Corosyncで運用していたので
管理はすごい楽になる
Metatrader4 　各通貨のバックテストを自動化する

異なる複数の通貨をバックテストしたい場合、Metatrader4のストレージテスターからバックテストの通貨を選択し、1回1回バックテストを行うのは面倒。
そこで、以下のサイトを参考にし、各通貨ごとのバックテストを自動化する。

http://d.hatena.ne.jp/fai_fx/20100527/1274886367

①本家のperlプログラム(BatchFileMaker.pl)を少々改造し、引数に、バックテスト対象のEA名を指定できるようにした。
（perlははじめてだけど、なんとか改造できた）

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/5b880ce3-12ca-8f05-7a14-c9286e795a6e.png)

②「BatchFileMaker.pl」を実行する（事前にActivePerlインストールが必要）
ここでは、MT4標準の「MACD Sample」を引数に指定してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/8880c046-5245-e82c-a8fc-582859811eb6.png)

③同じディレクトリ配下にバッチプログラム「AutoBackTest.bat」が生成されていることを確認する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/44f26cab-7501-f116-0bb6-c3d5f6f0118e.png)

④「AutoBackTest.bat」を実行すると、各通貨のバックテストが自動的に開始される。楽になった！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/f7cbf6c9-77c7-b70a-58b7-696d125da631.png)


追伸
もちろん、各時間軸でもバックテストできるようにperlプログラムを修正することも可能。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/189952/1849ded7-412c-f08e-8127-1f27cf02c27e.png)
railsとか関係なく素のrubyのコード内でslimをhtmlに変換した結果がほしかったんだけど、なかなかやりかたが見つからなかった。

# ちょっとやっつけたいだけなんやわしは

ralisでアプリ書くわけじゃなくて、ちょっとした検証につかいたかっただけなんだけど、検索するとガチなやりかたやslimrbを使った変換しか見つけられなかった。

# あってるかどうかわからん

俺ただのWebデザイナーやし。得意種目はCOBOLとPerlやし。

## 検証コード

```slimtest.rb
require 'slim'

slim =<<EOL
doctype html
html
  head
  body
EOL

puts Slim::Template.new() { slim }.render
```

## 結果

```
<!DOCTYPE html><html><head></head><body></body></html>
```
Vueのプロパティを分かりやすくする

# 気になったこと

Vueは設定ではdataやpropsやcomputedで分かれていますが、実際に使うときは`this.~`でそのまま使えてしまうため、どこで設定したものか分かりにくくなってしまいます。

```vue:よくやる書き方
<template lang="pug">
div
  //- それぞれがどこのデータか分からない
  p {{ a }}
  p {{ b }}
  p {{ c }}
</template>

<script>
export default {
  props: {
    a: {
      type: String,
      default: 'Hello'
    }
  },
  data() {
    return {
      b: 'World'
    };
  },
  computed: {
    c() {
      // ここもdataのものなのかpropsのものなのかあんまりわからない
      return this.a + ' ' + this.b;
    }
  }
};
</script>
```

# 対応方法
propsとdataについては、Vue側で`this.$props`, `this.$data`が作られていたので、これを使って以下のようなルールにしたらある程度分かりやすくなるのかなと思いました。

- propsの呼び出しは`this.$props.~`にする
- dataは`this.$data.~`で呼ぶ（`this.~`でもいい）
- computedは先頭に`_`をつける（キャッシュ的な存在なので）

```vue:ルールに基づいた書き方
<template lang="pug">
div
  p {{ $props.a }}
  p {{ $data.b }}
  p {{ _c }}
</template>

<script>
export default {
  props: {
    a: {
      type: String,
      default: 'Hello'
    }
  },
  data() {
    return {
      b: 'World'
    };
  },
  computed: {
    _c() {
      return this.$props.a + ' ' + this.$data.b;
    }
  }
};
</script>
```

# watchについて
watchするときも`$props`をつけることは可能なようです（変な感じはしますが）。

```vue
<script>
export default {
  props: {
    a: String
  },
  watch: {
    '$props.a'(val, oldVal) {
      console.log('changed', oldVal, '->', val);
    }
  }
}
</script>
```

# 定数の扱い
定数については大文字で書くのでそのままthisに入れていても見分けはつきますが、`this.C`とかにまとめて入れておくと注入するのが楽になると思います。

```vue
<template lang="pug">
div
  p 定数：{{ C.STR }}
  p データ：{{ $data.value }}
</template>

<script>
const STR = '定数文字列';

export default {
  data() {
    this.C = {
      STR
    };
    return {
      value: 10
    };
  }
}
</script>
第33話 ラマヌジャンの円周率の式

この記事は[仮面ライダービルドの数式](https://qiita.com/izmktr/items/e26a624e79bce3edccc9)の第33話です。

```math
\sqrt{\frac{2\sqrt{2}\pi}{9} \sum_{n=0}^{\infty} \frac{(4n!)(1103+26390n)}{(4^n 99^n n!)^4 } } =33
```

見るからにわからない式ですね。
ですから、もちろんラマヌジャンが発見した式です。安定のお前。

元の式はこんな式です。

```math
\frac{1}{\pi} = \frac{2\sqrt{2}}{99^2} \sum_{n=0}^{\infty} \frac{(4n!)(1103+26390n)}{(4^n 99^n n!)^4 }
```

先程の式を使えば、Σの部分が同じなので次の計算式になります。

```math
\sqrt{\frac{2\sqrt{2}\pi}{9}\cdot \frac{99^2}{2\sqrt{2}}\cdot\frac{1}{\pi}}=\sqrt{\frac{99^2}{9}}=\frac{99}{3}=33
```

円周率は基本的に、無限に続く足し算を途中まで計算することで円周率を求めます。
最も理解しやすいのがライプニッツの公式と呼ばれる次の式です。

```math
\frac{π}{4}=1-\frac{1}{3}+\frac{1}{5}-\frac{1}{7}+\frac{1}{9}+\cdots
```

しかし、この式はわかりやすい半面、計算してもなかなか円周率に近づきません。
コンピュータがない時代は手作業で計算していたわけですが、
やはり計算する量は減らしたいです。

ラマヌジャンの式はややこしいですが、少しの計算で円周率を求められます。
以下はnの値まで計算したときの、あっている桁です。

| n | 円周率 |
|:-:|:--|
|0|3.141592…|
|1|3.141592653589793…|
|2|3.14159265358979323846264…|
|3|3.1415926535897932384626433832795…|

この式を使って1700万桁まで計算されたことがあり、
世界最高の円周率を求めた式になっていたことがあります。

しかし、計算された当時はまだこの式が正しいと証明はされていませんでした。
それまで知られている円周率と完全一致していたため、
多分正しいと考えられていたようです。
swift:「Firebase利用時の改行方法について」

#はじめに
かなり初歩的な実装かと思いますが、Firebaseを利用した際の改行方法について日本語の記事がありませんでしたので、記録として残したいと思います。

以下のような文章の場合

```Swift:Sample
"始は様々な書き方がありますが、個人的には以下のような文字が好みです \n\n ①1画目と2画目の終筆の横位置を同一にする。\n ②3画目比較的長く。\n ③6画目は下を、8画目は横を出すようにします。 \n\n  以上の点を気をつけるとよろしいかと思います。"
```

```Swift:改行方法
textView.text = hogeText.replacingOccurrences(of: "\n", with: "\n")
```

このように改行されます。
<img width="259" alt="スクリーンショット 2018-08-26 12.57.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/226787/b353f050-adfb-2863-c015-50914f7618f7.png">



今回参考にした記事です。
より詳細に記載がりますので、よろしければご参照ください。
https://stackoverflow.com/questions/48755746/new-line-command-n-not-working-with-firebase-firestore-database-strings?rq=1

ご参考になれば幸いです。
【bash】ヒストリ機能での`!#`の使い途

# 前置き

以前こんな記事を書きました
→[【bash】`!-n$`ができるってそれもっと早く教えてよ！ - Qiita](https://qiita.com/kitoo/items/59c0a6a0bf39d92aaf40)

bash(以外でもあると思いますけど)のヒストリ機能では、
`!-3`で3回前のコマンド実行、`!$`で直前のコマンド実行の最後の引数、`!-2$`で2回前のコマンド実行の最後の引数、などが参照できます。

その辺りを調べるために、`man bash`の`HISTORY EXPANSION`(履歴の展開)セクションを読んでいたらこんなものもありました。
> !#    The entire command line typed so far.

日本語版([Man page of BASH](https://linuxjm.osdn.jp/html/GNU_bash/man1/bash.1.html#lbCX))
> !#    これまでに打ち込んだコマンドライン全体。

つまり以下のような動きをします

```bash
$ echo hoge fuga !#
echo hoge fuga echo hoge fuga
hoge fuga echo hoge fuga
```

*？？？？？*

*一旦なにに使えるんだ？？*

と最初に読んだときは思いました。

が、最近使いどころがわかってきたので紹介します:smiley:

# 本題

「`!#    これまでに打ち込んだコマンドライン全体。`」というのは、見方を変えると、
`!!`が`!-1`のエイリアスだとすると、`!#`は`!-0`のエイリアスだと見ることができます。
(実際には`!-0`なんて使えないですけど。)

つまり、`!#`もイベント指示子なので、単語指示子と組み合わせて使えばいいのです:bangbang:
(これに最初気付かなかった :sweat_drops: )


例えば、`!#$`という風に`$`を付けると、「直前の引数」を参照できます。

つまり、

```bash
cp path/to/file !#$.bak
```
で

```bash
cp path/to/file path/to/file.bak
```
になります

(ちなみにこれなら`cp path/to/file{,.bak}`でもできますが)

また、

```bash
mv path/to/typo !#$:s/po/pe
```
で

```bash
mv path/to/typo path/to/type
```
になります


ちょっと使いどころが見えてきましたね？

しかも、`!!`や`!$`などと違って、「それまでに実行したコマンド」の影響を受けないので、
むしろそれらより気軽に手順書とかに使えますね。

例えば、たくさんの設定ファイルを所定の場所に配置する、と言った場合、普通に書くと以下のようになります。
※サーバー上に配置するファイルを、どこか(ホームディレクトリとか)の`deploy_files`ディレクトリ下に、ディレクトリ構造を保った状態で一旦配置して、そこからコピーする場合を想定

```bash
cp deploy_files/pathA/to/fileA /pathA/to/fileA
cp deploy_files/pathB/to/fileB /pathB/to/fileB
cp deploy_files/pathC/to/fileC /pathC/to/fileC
```
別にコピペで済むんですけど、いちいち2箇所書き換えるのが面倒です。

これが、`!#`を使うとこう書けます。

```bash
cp deploy_files/pathA/to/fileA !#$:s/deploy_files/
cp deploy_files/pathB/to/fileB !#$:s/deploy_files/
cp deploy_files/pathC/to/fileC !#$:s/deploy_files/
```
書き換えるのが一箇所で済むようになりました :slight_smile:

--------------------

それでは良きCLIライフを:exclamation:
第32話 結晶族点群

この記事は[仮面ライダービルドの数式](https://qiita.com/izmktr/items/e26a624e79bce3edccc9)の第32話です。

```math
\#\{crystal\ class\} = 32
```

結晶族点群は32 種類あります。

鉱石は種類に応じて結晶構造を持ちますが、この32 種類のどれかに属しています。
ただ、32 種類の中には理論的に提唱されているだけで、
その構造を持つ鉱石が発見されてないものがあります。

結晶というのはずらしたり回転させたり反転させても、
元の形に一致する形状のことです。
同じ形が繰り返されている、といってもいいでしょう。

その繰り返しがどういう基本構造で出来ているかを分類すると7 つの結晶系があり、
それを対称度で細かく分けると32 種類になります。

| 名前 | 単位格子の形 | 基本構造 |
|:--|:--|:--|
|三斜晶系| 6 つの平行四辺形で出来た六面体| 四角形|
|直方晶系| 2 つの長方形と4 つで出来た平行四辺形の六面体||
|単斜晶系| 6 つの長方形のみで出来た六面体||
|正方晶系| 2 つの正方形と4 つの長方形で出来た六面体||
|立方晶系| 6 つの正方形で出来た六面体(立方体)||
|六方晶系| 2 つの正三角形と3 つの長方形で出来た三角柱|六角形|
|三方晶系| 2 つのひし形と4 つの長方形で出来た四角柱||

また、結晶族点群は「群」です。第18 話、第26 話に出てきた有限群です。
次のような式を見れば何となく分かるでしょう。

270 度回転＋180 度回転＝90 度回転
反転+ 反転＝基本

変形パターンを組み合わせたらどの変形パターンと同じになるか、というのは
群の条件を満たします。
変形パターンは無限に存在しないので有限群です
メモ：情報エントロピーの計算

**メモ：情報エントロピーの計算**

全１２個の要素に、「aが４個」「bが８個」ある。

```
｛a,a,a,a,b,b,b,b,b,b,b,b｝
```

このとき、情報エントロピーは、

```math
 -p \log_2 p - (1-p) \log_2 (1-p)
```

から

```math
 -(4/12) \log_2 (4/12) - (8/12) \log_2 (8/12)
= 0.918295834
```

---

いま、この１２個にラベル(０か１)が付して有り、以下のとおりとする

```
{
 ['0', 'a'],['1', 'a'],['0', 'a'],['1', 'a'],
 ['1', 'b'],['1', 'b'],['0', 'b'],['0', 'b'],
 ['0', 'b'],['1', 'b'],['0', 'b'],['0', 'b']
}
```
全12個、ラベル0は全7個、ラベル1は全5個

|↓ラベル       |a |    b    |
|:------:|:-----------------:|:------------------:|
| 0|2/7個|5/7個|　
| 1|2/5個|3/5個|

この、ラベル(０か１)による、分割で得られる情報ゲインの計算は、

ラベル0：

```math
 -(2/7) \log_2 (2/7) - (5/7) \log_2 (5/7)
= 0.863120568567  ・・・(A)
```

ラベル1：

```math
 -(2/5) \log_2 (2/5) - (3/5) \log_2 (3/5)
= 0.970950594455  ・・・(B)
```
これを、全体の要素数で重み付けして、

```math
 (7/12)A +  (5/12)B 
= 0.90804974602
```

得られる情報ゲインは、正となり、

```math
 0.918295834054　 - 0.90804974602 > 0
```
分割することで、情報が「得られる」こととなる。

（→　この「ラベル(０か１)」には、一定の意味がある）
Vue.jsプロジェクトのPWA対応

Vue CLI3では、GoogleのWorkbox webpack Pluginsをラップしたプラグイン [@vue/cli-plugin-pwa](https://www.npmjs.com/package/@vue/cli-plugin-pwa) を使うことで簡単にPWA対応ができる。（2以前は [vuejs-templates/pwa](https://github.com/vuejs-templates/pwa) というテンプレートが提供されていたのみで、既存プロジェクトに組み込みが手間であった。）

##### プラグインの追加方法

```shell
vue add @vue/pwa
```

プラグインを追加するとプロジェクトに以下の変更が適用される。

- `register-service-worker` が依存関係 (package.json) に追加される。
- `src/main.js` に `import './registerServiceWorker'` が追記される。
- マニフェストファイル・アイコン画像ファイルなどが追加される。
  - `public/manifest.json` 
  - `public/robots.txt`
  - `public/img/icons/*.*`

##### ビルド方法

通常のビルドを実行すれば、PWA対応に必要なリソースが組み込まれる。

```shell
npm run build
```

##### ローカルでのテスト方法

開発用ビルドでは `service-woker` が登録されないため、リリース用にビルドしたリソースをローカルで実行したWebサーバーを経由でアクセスしてテストするのが良い。[Web Server for Chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb)というGoogle Chromeプラグインを使うと簡単にローカルのディレクトリを公開するWebサーバーを立てられる。

##### サブディレクトリへのデプロイ

アプリのデプロイ先がドメイン直下でない場合は `manifest.json` 内のパスを `manifest.json` からの相対パスで指定する必要がある。

```json
{
  ...
  "icons": [
    {
      "src": "./img/icons/android-chrome-192x192.png",
      ...
    }, 
    ...
  ],
  "start_url": "./index.html",
  ...
}
```
参考：https://www.w3.org/TR/2018/WD-appmanifest-20180719/#start_url-member
【Javascript/Node.js】ある配列が別の配列の部分集合であることを判定する

「ある配列の要素すべてがもうひとつの配列に含まれる」と考える。

```javascript
const superset = [10, 20, 30, 40, 100];
const arrayA = [10, 20, 40];
const arrayB = [10, 20, 50];

const isSubset = array => array.every(x => superset.includes(x));

console.log(isSubset(arrayA)); // true
console.log(isSubset(arrayB)); // false
```
オブジェクト指向のこころー演習問題(第６部)

# 第17章:Decoratorパターン
機能を付与するとき、サブクラスではなく、オブジェクトに付与することで行う。

## 基礎
Q1. 各Decoratorパターンは何を包み込むのでしょうか？
A1. オブジェクト

Q2. デコレータの例を２つ挙げてください
A2. 
・ヘッダー・フッターの付与：オブジェクトを実体化しておく時に、デコレータで、フッターとヘッダーを付与する。
・ストーリームIO：データの伸長or圧縮や復号化などを行う場合、デコレータの付与で多様な事態に対応できる。

## 応用
Q1. 問題を分割する際、Decoratorパターンはどういう風に使用することができるでしょうか？
A1. 
・新たな機能を付加するオブジェクトの実装方法（Factory)
・特殊ケース毎における、オブジェクトの体系化方法(Decorator)

Q2. 「この構造がパターンなのではありません。」Decoratorパターンの本質を考察する際、こういった表現をしようしました。この意味を答えてください。なぜこれが重要となるのでしょうか？
A2. 実行される機能を付加すること事態は、Decoratorパターンの機能であるということ。パターンは、このように使用出来るようにすることである。これによって、目的と実装の違いを明確にするために、重要である。

# 第18章：Observerパターン
## 基礎
Q1. GoFによる構造に関するパターンの責務とは何でしょうか？
A1. 既存の機能群を結びつけるために使用するもの。

Q2. GoFが分類したパターンのカテゴリを答えてください。また、私が示唆している4つ目のカテゴリとは何でしょうか？
A2. 
GoF
・生成：オブジェクトの生成や実体化
・構造：既存オブジェクトをまとめる
・振る舞い：柔軟な振る舞いを実現する
筆者
・分割：スケーラビリティと柔軟性を向上させる

Q3. 要求の持つ絶対的な性質を答えてください。
A3. 要求は常に変化する。

Q4. Observerパターンの目的を答えてください。
A4. オブジェクト間に一対多の依存関係を定義し、あるオブジェクトの状態が変化した際、それに依存するすべてのオブジェクトに対して自動的に通知、更新が行われるようにする。

## 応用
Q1. BridgeパターンとDecoratorパターンが、振る舞いに関するパターンではなく、構造に関するパターンに分類される理由を答えてください。
A1. どちらも既存の実装があり、それに対して、新しい構造を生み出すためのものだから

Q2. Observerパターンを解説する際、ソフトウェアとは無関係な放送局を例に挙げました。放送局は電波を送信し、誰でも気が向いた時にチューニングするだけで聞くことができる。これ以外の「実生活における例」を挙げてください。
A2. 掲示板？


Q3. Observerパターンを使用すべきでない状況を答えてください。
A3. 依存関係が常にきまっている場合

# 第18章 Template Methodパターン
## 基礎
Q1. Template Methodパターンによって、メソッド呼び出しが特殊な方法で行われるようになります。その方法を説明してください
A1. 処理をまとめたメソッドと変化する処理毎に抽象メソッドを用意するが、処理をまとめたメソッドから、呼び出す。その際、派生クラス中に定義するメソッドは、abstractあるいはprotedtedで基底クラス内では宣言する。

## 応用
Q1. GoFによれば、Template Methodパターンの目的は、「ある操作におけるアルゴリズムの骨格を定義し、いくつかの処理の定義についてはサブクラスにまかせる。そして、アルゴリズムの構造を変更することなく、その中に含まれている処理の再定義を行う」となっています。これはどういったことを意味しているのでしょうか？
A1. ある操作について、基底クラス内に定義し、その操作のうち、詳細の異なる処理を派生クラスで定義する。

Q2. GoFはこのパターンを「Template Method」と呼んでいます。なぜだと思いますか？
A2. 基本的な手順を定義するため。

Q3. StrategyパターンとTemplate Methodパターンの違いを答えてください。
A3. Strategyパターンは、複数のアルゴリズム(Concrete Strategy)を基底クラス(Strategy)によってまとめ、使用方法を基底する。一方、実際に何を使用するかは、Contextが、クライアントからルールとConcrete Strategyを受取り、処理される。
よって、Template Methodパターンは、基底クラスのTemplateMethod()を使用し、一部詳細が変わる部分をConcrete Classが担うのに対して、Strategyでは、基底クラスはインタフェースと共通した情報を保持し、メソッドは各Concrete Classに任される。
PhpStormでディレクトリをrenameする時にnamespaceが追従しない場合の対応

# はじめに

PhpStormでディレクトリをRefactor/Renameする際に、基本的にはnamespaceも一緒に変更されるはずなのですが、上手くいかない時があります。

## 発生環境

Windows10 Pro
PhpStorm 2018.2

Windows8
PhpStorm 2017.2

## 現象

namespaceを追従して変更出来る場合、下記のようなダイアログが表示されます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/165884/920a78b9-9390-15cb-e732-59ee17d21254.png" width = "70%">

ところが、ある条件を満たすと下記のようにnamespaceが追従しない状態となります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/165884/5852169f-f76e-6649-10c1-715c9b84b62d.png" width = "50%">

## 原因?

Rename対象ディレクトリ配下に、PHPファイルが含まれていない(namespaceがソース上に存在しない状態になる?)と発生するようです。

例として、下記のディレクトリ構成で`Foo`をRenameするとnamespaceを認識してくれますが、

```
App\
  Foo\
    FooClass.php    (namespace = App\Foo)
    Bar\
      BarClass.php  (namespace = App\Foo\Bar)
```

上記からFooClass.phpを削除して下記の構成で`Foo`をRenameするとnamespaceを認識してくれませんでした。

```
App\
  Foo\
    Bar\
      BarClass.php  (namespace = App\Foo\Bar)
```

なお、指定したディレクトリの子ディレクトリに関してはPHPファイルが存在しない(namespaceの定義が無い)状態でも問題無いようです。

```
App\
  Foo\
    FooClass.php       (namespace = App\Foo)
    Bar\
      BarClass.php     (namespace = App\Foo\Bar)
    Hoge\
      Fuga\
        FugaClass.php  (namespace = App\Foo\Hoge\Fuga)
```

## 対応方法

Rename対象ディレクトリに一時的にダミークラスを作ってRename後に削除することで対応可能でした。

2017.2及び、2018.2の両方で発生しているので、バグではなくそういう仕様なのかもしれません。
Nuxt.js vuex モジュールモードでのgettersの使用方法

忘れそうなので覚書を。

# gettersとは
要は、vuexのstateを取得する際のゲッターメソッドです。

#クラシックモードでの使用方法
まずはstoreの定義です。

```store/hoge.js
const store = () => new Vuex.Store({

  state: {
    hoge: null
  },
  getters: {
    isHogeExist (state) {
      return !!state.hoge
    }
  }
)
```

次に使用する側です。(抜粋)

```pages/index.vue
<v-btn to="/hogehoge" v-show="$store.getters.isHogeExist">ほげ</v-btn>
```

#モジュールモードでの使用方法
同じようにstoreの定義

```store/hoge.js
export const state = () => ({
  hoge: null
}

export const getters = {
  isHogeExist (state) {
    return !!state.hoge
  }
}
```

使用するとき

```pages/index.vue
<v-btn to="/hogehoge" v-show="$store.getters['hoge/isHogeExist']">ほげ</v-btn>
```

mutationと同じようにハッシュキーを指定する形で呼びだすようですね。:sunny:

##参考リンク
https://github.com/nuxt/nuxt.js/issues/848