OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js基本文法2

#Vueの基本構成

```js
new Vue({
    el:"#app",//mountする要素
    data:{//データ
        num1:2,
        num2:3
    },
    computed:{//算出プロパティ
        calc(){
            return this.num1 + this.num2
        }
    },
    mounted(){//ライフサイクルフック系をいろいろ書く

    },
    methods:{//自由に作るメソッド
        hogeMethod(){

        }
    }
})
```
 
##　ライフサイクルフック一覧

| メソッド名          |       タイミング |
|:-----------------|:-----------------------|
| beforeCreate     |インスタンスが作成されて、リアクティブの初期化される前|
| created          |インスタンスが作成され、リアクティブの初期化がされた後|
| beforeMount      |インスタンスがマウントされる前|
| mounted          |インスタンスがマウントされた後|
| beforeUpdate     |DOMが再描画される前に呼ばれる| 
| updated          |DOMが再描画された後に呼ばれる| 
| beforeDestroy    |インスタンスが破棄される前に呼ばれる|
| destroyed        |インスタンスが破棄された後|

##データバインディング

### テキストのデータバインディング
```html:index.html
    <p>{{message}}</p>
```
```js
    data:{//データ
        message:'Hello Vue.js'
    },
```

###属性のデータバインディング

```html:ダメな例
    <input type="text" value="{{message}}">
```

```html:正しくはこっち
    <input type="text" v-bind:value="message">
```
:valueと書いても良い

### リストデータの表示と更新
まずは表示

```js:main.js
    data:{//データ
        list:[
            {name:"hogehoge1",mail:"hoge1@example.com"},
            {name:"hogehoge2",mail:"hoge2@example.com"},
            {name:"hogehoge3",mail:"hoge3@example.com"},
        ]
    },
```

```html:index.html
    <ul>
        <li v-for="item in list">{{item.name}}</li>
    </ul>
```
リストの更新について

```js
 this.list = []//プロパティの更新なのでOK
 this.list[0].name = 'hogehoge4' //プロパティの更新なのでOK
 this.list[0] = 'hogehoge4' //配列要素の更新なのでNG
```
インデックス数値を使った配列要素の更新は検知できない
後から追加されたプロパティの更新も検知できない

インデクス数値を使った配列要素の更新は検知できないので
Vue.setメソッドを使用して明示的に更新する

```js
  this.$set(list,0, {name:'new hogehoge', mail:'hoge@example.com'})
```
第1引数が更新するデータ、第２引数がインデックスもしくはキー、第３引数が値
いまさらMattermostを導入することにした話

# Mattermostとは(おっちゃんの理解)
- オープンソースのSlackクローン。Enterpriseは有償だが拡張されてるみたい。[Mattermost公式](https://mattermost.com/)で提供。Slackとほぼ互換のため、Slack向けのプラグインが利用可能
- クラウドサービスの利用が困難な環境であってもオンプレミスで利用可能

# 背景
筆者は業務でSlackをメインに利用してきましたが、独立しました。できるだけ出費を抑えたいのと、Slackの機能のうち使わない機能もあったので、チャットプロダクトの検討を実施しました

# 候補
色々なものを検討しましたが、そのなかで以下に絞り込みました。
- ChatWork (Slackの前に使ってた)
- Slack (よく使われてるよね)
- Teams (Office365は使うのでついてくる)
- Skype for Business (社内の電話はコレを利用している)
- Mattermost (Slackクローンだし数年前からあるしオープンソースだしいいんじゃね)
- これらをそれぞれ導入し、全社員で試用を半年ほど実施しました。
- 全世界でのマーケットでの評価等ではなく、弊社のビジネス環境という偏った評価になるため、違う環境で評価すればまた違った結果になるかと思います。

# 評価
評価軸を以下に設定し、それぞれを評価しました。これあわせ、フィーリングも取り入れ、各評価点数とフリーテキストコメントをアンケートで収集しました。アンケートの回答率は全従業員の100%でした。みなさん協力的で助かります。

| プロダクト |ビデオ会議 | レスポンス | モバイル | plugin数 |  導入実績   |UIの好み  |コスト   |
|:---------|:---------|:---------|:--------|:---------|:--------|:-------|:-------|
|Slack    　|2 |5 |5 |5 |5 |5 |2 |
|Chatwork   |2 |5 |3 |5 |0 |4 |3 |
|Teams　    |4 |2 |2 |1 |0 |3 |5 |
|Skype　    |5 |3 |5 |1 |5 |5 |5 |
|Mattermost　|0 |5 |3 |5 |0 |5 | 4|

- このことから、ビデオ会議はチャットシス手ムは不要。連係できればよい。
- レスポンスはWebプラウザ、あるいはデスクトップアプリが提供されている場合にはそれで。
- モバイルはモバイルアブリの使用感。
- 導入実績は自社が関わっている顧客、パートナーでのもの。もっと広い範囲でみれば違うかもしれないです。Skypeは電話・会議目的では一番の実績、チャットシステムとしてはSlackが多かったです。
- Skypeは電話・会議システムとしてすでに構築もしているため導入・運用コストはゼロとしています。

-- 
# 所感
各プロダクトについて、得られたコメントを以下に記述します。

- Slack
    - ユーザ多い、プラグインが多い、こなれている等最も評価が高いものでした
    - が、ファイルストレージが小さく、他のサービスとの連携が必須であり、かつファイルストレージを使わない場合でもコンプライアンスのために必要な機能を有するのはプラスプランだけのため、コストは高いものとなります。
- Chatwork
    - 使い慣れているので一番好みではある
    - 残念ながらおつきあいのある企業様での利用実績がゼロ
- Teams
    - Officeとの連係はSkypeとともに一番強力。
    - アプリの動きがSkypeよりさらにもっさりしている。
    - Skypeの後継プロダクトであり、音声・会議機能はまだSkypeには及ばない。
    - 電話システムとして既に構築済みのSkypeからのマイグレーションがしてもよい時期になってから導入したい。
    - 今後に期待。
- Skype
    - 会議・電話システムとしては一択。
    - Office以外との連係は弱い。
    - 画面が間延びしている
- Mattermost
    - 利用実績ゼロ
    - UIはほぼSlackで好み
    - 弊社でつかうレベルであればかなり小さなインスタンスで稼働可能
    - Slackに慣れたユーザならほぼ違和感なく使える
    - ドキュメントがちゃんとしてる。導入カンタン
    - 運用は試用期間の間、とくに目立つトラブルはなく、一度試験的にリストアしてみたがカンタンであった
    - オープンソースモデルでも十分に実用的

# ということで
- 期待感が一番高いのはTeams、
    - 最終的には、チャットも電話も会議もTeamsで完結したい。
    - Skypeの音声まわりの機能すべてが実装されているわけではない。
    - 期待をこめたとして、今実装するのは早い。
 
- Mattermostの選定理由は以下。
     - マニュアルがなくても使い始めて慣れることが可能。
    - 規模が大きくても小さくても適度なインフラで運用できる。
    - パートナー企業で、クラウドであることがチャットの導入障壁となっているところにも導入をすすめられそう。
      (=仕事になる)
    - 専属の運用エンジニアがいなくとも、運用が比較的楽にできる。
    - 音声通話・会議機能がない。= Skypeだけに集約できる｡

---
# 最後に
*  弊社は技術部門を持っておらず、すべて外部委託をしています。
*  技術部門のトップ、トップ候補、エンジニア募集しています。
*  今ならいきなり主役になれます。興味のある方は連絡ください。

# 次回予告
次回は、実際に導入したときのことを書いてみたいとおもいます。
WordcloudでMr.Talkboxの英語歌詞のメッセージを可視化する

# 目的

過去に、Mr.Talkboxの歌詞に出てくる単語を出現数順にソートしました。

> [pythonのCounterを使用してMr.TalkBoxの英語歌詞の単語を出現数順にソートした記録](https://qiita.com/seigot/items/a145a143d246bf5ae654)

今回は、歌詞に出てくる単語を使ってword cloudで可視化します。
コードは[こちら](https://qiita.com/kenmatsu4/items/9b6ac74f831443d29074)を参考にさせて頂きました。

# 準備

word cloud用ライブラリをインストール

```
git clone https://github.com/amueller/word_cloud
cd word_cloud
python setup.py install
```

その他ライブラリをインストール

```
pip install beautifulsoup4
pip install requests
```


# コード

```
$ python sample.py
```

```:sample.py
import matplotlib.pyplot as plt
from wordcloud import WordCloud
from bs4 import BeautifulSoup
import requests
import MeCab as mc

def create_wordcloud(text):

    fontpath = "/System/Library/Fonts/HelveticaNeue.ttc"
    stop_words = [ u'am', u'is', u'of', u'and', u'the', u'to', u'it', u'for', u'in', u'as', u'or', u'are', u'be', u'this', u'that', u'will', u'there', u'was']

    wordcloud = WordCloud(background_color="white",font_path=fontpath, width=900, height=500, \
                          stopwords=set(stop_words)).generate(text)

    plt.figure(figsize=(15,12))
    plt.imshow(wordcloud)
    plt.axis("off")
    plt.show()


wordlist = """
I feel something 
feel something 
I feel something 
feel something good inside
I feel something 
feeling something 
I feel something 
feel something 

There is something that I’m going try to explain
(省略)
"""

create_wordcloud(wordlist)
```

# テスト

下記word cloudを作成できました。
![Figure_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/1e363a23-8732-0d7f-09ef-a01da4e7f086.png)

feel something good inside shoo, のような感じが出ています。
coolです。

# CodingError対策

```
ModuleNotFoundError: No module named 'wordcloud.query_integral_image'
```

他のword cloud用リソースが重なっている際に出るエラーのようです。
[こちら](https://github.com/amueller/word_cloud/issues/255)を参照し、下記をword cloudをcloneしたパスで実行して解決。

```
$ python setup.py build_ext -i
```

--

```
OSError: cannot open resource
```

osコマンドで参照しているファイルが見つかりません。
今回の場合だとfont pathに存在するファイルを指定して解決。
　fontpath = "/System/Library/Fonts/HelveticaNeue.ttc"

# 参考
[Word Cloudで文章の単語出現頻度を可視化する。[Python]](https://qiita.com/kenmatsu4/items/9b6ac74f831443d29074)
[No module named 'wordcloud.query_integral_image'](https://github.com/amueller/word_cloud/issues/255)
ノートの代わりにMarkdown で数式を書く

(記事を加筆します。)

> 私には数式を「清書」するにはWordかTexしか選択肢がありませんでしたが、ノートに書く内容の電子化としてどちらも大変な作業でした。今、Markdown でノートに書く内容を電子化できないかなと考えています。ここに追記しながら、自分の使い方メモにしたいと思います。(2019/06/03)

------

2019/05/11

数式をQiita以外のブログやオフライン編集できる環境で書きたいと思い、調べました。Texコマンドを数式フォントに変換して表示するMathJax.jsというものを利用するようです。（理解が合っているかな?^^:)

### はてなブログ

- HTMLの最初に、以下を書く必要がある。java script を読む。 mathjax.js をいうものを使う、らしい。

```
<p>
<script type="text/x-mathjax-config">// <![CDATA[
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
  }
});
// ]]></script>
<script type="text/javascript" async="" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML">// <![CDATA[

// ]]></script>
</p>
```

- 毎回HTML編集の最初に書くのは面倒なので、これはブログ編集の設定のヘッダに毎回書くことように設定できる。
  - Hatena blog の管理画面（普通の画面）の左側にある「デザイン」を選択する。すると、左側に３つのアイコンがあり、マウスをアイコンに乗せると、「デザインテーマ」「カスタマイズ」「スマートフォン」という文字が出て、それぞれに意味が分かる。ここでレンチのアイコンの「カスタマイズ」から「フッタ」を選ぶ
  - フッタに書くべきHTMLを設定できるので、ここに先ほどのHTMLコードを書く。
  - 「変更を保存する」でOKでした。何故フッタなのか分かりませんが、「HTMLを記述できます。ブログパーツやプラグインの設置にもお使いいただけます。」という説明があったので、header ではなくfooter に書くのが礼儀のようです。

- 数式が書けるのを確認したが、後述のatom での数式の書き方と微妙に違いそう。boldでなくboldsymbol とか。
- 参考にさせていただきました：[数式を描くMathJax.jsのはてなブログでの使い方と基本数式のLaTexサンプル／JavaScript](https://arakan-pgm-ai.hatenablog.com/entry/2018/02/26/060000)

### Atom で数式を書いて表示する

Markdownファイルの編集でmathjax を使い、markdown preview で見ることができたので、メモ。

- ２つのパッケージをインストールしました。
 - Settings --> Install で markdown-preview-plus と mathjax-wrapper をそれぞれインストールしました
 - markdown-preview-plus をインストールしたとき、

> Settings
> masterFetchGitHubGit (1)
Markdown-preview-plus has disabled markdown-preview package.

と言われますが問題は無さそう。（後でSetting --> Packageで Enable/Disable の変更ができると思います。）

- markdown ファイル(拡張子 *.md)を編集するとき、文中で \$S=\sum_{n=1}^N x_n$ と書くと、Preview (Contl + Shift + m　を押す)と数式に変換された文章が表示されます。
- 参考にさせていただきました：[Atomで数式を扱えるようにしよう](http://note.ksuga.jp/2015/03/08/post-685/)
- その後、preview で数式に変換されないときがあったりするのですが、今は表示されてます。今、Edit --> Select Grammar を見てみると、"Github Markdown"にチェックが入っています。

ふー。(2019/05/11)


---

### Chrome の Markdown Viewer

ブラウザでMarkdown を見れないか、と思って少し調べたらありました。
選択肢はいろいろあるようですが、私は Chrome の Markdown Viewer
3.6という拡張機能を入れたら見えました。

- Chrome のURLの入力欄で"chrome://extensions/"とすると、拡張機能の設定画面になる。
- Chrome の右上に"m"のと書かれたアイコンが追加されます。これでContents のタブでmathjax をオンにします
![chrome_markdown_viewer_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294040/2875d3d6-d4ab-8f42-0a76-3576b19cf71e.png)


- Chrome へ*.md ファイルをdrag & drop で表示された

(2019/06/19)


-----
文系大学生のプログラミング学習０日目

#プログラミングを学習するにあたって

初めて投稿します。Qiita自体の使い方もよくわかりません（笑）
就職活動が終わり残りの大学生活で何かを勉強しようと思い、プログラミングをやることにしました。
ちなみに大学は文系でプログラミングは授業でやりましたが、チンプンカンプンでした。
せっかくなら何かサービスを作りたいと思うので、とりあえず100DaysofCodeに乗っかって１００日間勉強を続けることにします。
拙い文章ですが読んでいただけると嬉しいです。

#現状の知識

実は少し前から勉強を始めていて、progateの無料版でHTML/CSS、JavaScriptについては多少やりました。
スライドで見やすくなっていて、環境を構築せずともプログラミングをやることが出来てとても便利です。
勉強は嫌いではないのでこれなら続けられそうです。

#これからの計画


最終目標
webサービスの開発(内容はまだ決めてません)

何かで初心者はwebサービスから始めるのが良いと聞いたので、それに関する言語を中心に勉強します。
ひとまずHTML/CSS、JavaScriptあたりをprogate、ドットインストールでやっていきます。

今日はこのへんで、ありがとうございました。
App : ARTea


<h5>手搖飲料擴增實境應用，掃描手搖飲料杯上的圖片，顯示擴增資訊，進而吸引消費者購買。</h5>

![cup.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276243/219c7985-d27b-fa34-c774-eb607ba76d9f.jpeg)


<h5>Google play</h5> 
ARTea [Download](https://play.google.com/store/apps/details?id=com.koin.tea)
[JavaScript] jasmine spy（モック） レシピ集

あるオブジェクト/関数が、また別のオブジェクト/関数に依存していることは普通にあります。
ユニットテストのときは、実際の依存先オブジェクトではなく、スタブやタプル、モックと呼ばれるダミーのオブジェクトを使います。
jasmineでは、このダミーのオブジェクトをSpyと呼んでいます。これはそのSpyの使い方メモです。

# Spyを準備する

## Spy関数を作る

```js:
const spyFunc = jasmine.createSpy('関数名');
```

Spy関数を作成します。
関数名はなんでもよいです。


## Spyメソッドを持ったオブジェクトを作る

```js:
const spyObj = jasmine.createSpyObj('クラス名', [ 'method1', 'method2', ... ]);
```

`method1`、`method2`というメソッドを持ったSpyオブジェクトを作成します。
クラス名はなんでもよいです。

## 既存オブジェクトにSpyプロパティを作る

```js:
const spyObj = {};
spyOnProperty(spyObj, 'property1', 'get');
const spySetProp = spyOnProperty(spyObj, 'property1', 'set');
```

`property1`という名前のSpyプロパティを`spyObj`に作成しています。
第3引数のget/setは、値を入出力する方向です。

# Spyの振る舞いを定義する

## 戻り値を設定する

```js:
spy.and.returnValue('hoge');
```

戻り値を`'hoge'`にしています。

メソッドの場合はこのようになります。

```js:
spyObj.method1.and.returnValue('hoge');
```


## 複数回呼ばれたときの戻り値をそれぞれ設定する

```js:
spy.and.returnValues('hoge', 'fuga', 'fugo');
```

1回目の戻り値は`'hoge'`、2回目の戻り値は`'fuga'`、3回目の戻り値は`'fugo'`にしています。

## 例外を発生させる

```js:
spy.and.throwError('Error message');
```

## コールバック関数を呼び出す

```js:
// 例）第1引数がコールバック関数だった場合
spy.and.calls.first().args[0](コールバック関数の引数);
```

`first()`は、関数の初回呼び出しを意味します。
最後の呼び出しの場合は、`mostRecent()`を使います。

```js:
spy.and.calls.mostRecent().args[0](コールバック関数の引数);
```

複数回呼び出される時の回数を指定する場合は、`all()`に添字をつけます。

```js:
spy.and.calls.all()[2].args[0](コールバック関数の引数);
```



全体としての例はこんな感じです。

```js:
// テスト対象のクラス
class Timeouter {
    constructor(timeout) {
        this._timeout = timeout;
    }

    echoAfter10Secocnds() {
        this._timeout((message) => console.log(message), 10);
    }
}

// テストコード
const timeout = jasmine.createSpy('timeout');
const instance = new Timeouter(timeout);

instance.echoAfter10Seconds();
timeout.calls.first().args[0]('Hello.'); // 初回呼び出し
timeout.calls.all()[1].args[0]('I am Jasmine.'); // 2回目の呼び出し
timeout.calls.mostRecent().args[0]('See you again.'); // 最後の呼び出し
```


# テストの方法

## spyが呼ばれたか

```js:
expect(spy).toHaveBeenCalled();
```

## spyが呼ばれなかったか

```js:
expect(spy).not.toHaveBeenCalled();
```

## spyが特定の引数で呼ばれたか

```js:
expect(spy).toHaveBeenCalledWith(期待する引数);
```

## spyが何らかの引数で呼ばれたか

```js:
expect(spy).toHaveBeenCalledWith(jasmine.any(期待する引数の型));

// 例）Number型の場合
expect(spy).toHaveBeenCalledWith(jasmine.any(Number));
```

## `null`あるいは`undefined`以外の引数で呼ばれたか

```js:
expect(spu).toHaveBeenCalledWith(jasmine.anything());
```

## spyがn回呼ばれたか

```js:
// 例）2回呼ばれたか
expect(spy).toHaveBeenCalledTimes(2);
```

## spyがn回目に特定の引数で呼ばれたか

`expect`を複数個並べればよいです。

```js:
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith(期待する引数);
```
競技プログラミングって？

# はじめに
はい、お久しぶりの方はお久しぶりです。初めましての方は初めまして。
東京大学工学部電気系発VTuber 風里えれなです！
今回は、競技プログラミングについて書いていこうかなと思います！

#競技プログラミング？？
競技プログラミングは、代表的なものとしては、与えられた問題を時間内(1時間や2時間など)に解いて、その回答までの速さを競うものや、マラソン型といってもっと長い期間で題材に合うような良いプログラムを作るものがあります。今回は、前者に的を絞って説明したいと思います！

#なんだか難しそう……
**とんでもない！**まあ、当然難しい問題や、たくさん勉強を積まないと解けない問題ももちろんあるのですが、最初の1,2問には配列を使ったり、if文やfor文を書ければ解けるものが多いかと思います。徐々に解ける問題を増やしていけば良いので、練習とモチベーションのためにぜひ活用してみてください！

#どんな感じに参加できるの？
競技プログラミングを開いているのはいっぱいあるのですが、以下のものが代表的かなと思います。
・日本語対応
    1. [AtCoder](https://atcoder.jp/)
    2. [AOJ](http://judge.u-aizu.ac.jp/onlinejudge/)
    3. [yukiCoder](https://yukicoder.me/)
・英語のみ
    1. [TopCoder](https://www.topcoder.com/)
    2. [CodeForces](https://codeforces.com/)
    3. [GoogleCodeJam](https://codingcompetitions.withgoogle.com/codejam)
基本的には登録すればできるかと思います。日本語対応だと、AtCoderは毎週やっていてモチベの維持には非常に向いているかなと思います！
それぞれ体験記のような記事を出しているかたがいらっしゃるので、そのようなブログを参考にするといいかと思います。

#具体的に何の知識が必要なの？
次のようなトピックについて勉強していけば、最初は順調に得点が上がっていくかと思います。
・ 使いたい言語の文法(先ほど行ったように最初の方はifやforのみで良いので勉強しながら使っていっても大丈夫です！）
・ データ構造(スタック、キュー、連結リスト、二分探索木、二分ヒープ etc...)
・ アルゴリズム(ソート、DFS、BFS、ダイクストラアルゴリズム etc..)
サイトや本もいっぱいあるので、ぜひ自分に合うものを探してみてくださいね！
factory method pattern

# factory method pattern

どのクラスのオブジェクトを生成するかのロジックをサブクラスに切り出す。

## ケース

オブジェクトを生成する必要のあるクラスが、
どのクラスのオブジェクトを生成するかわからないとき
サブクラスに判断を切り出す。

## 結果
### pros
動的に生成するクラスを決めうる。
### cons
思いつかない。
## 実装対象

生成されるクラスのインターフェイス
オブジェクトを生成する必要のあるクラス
オブジェクトを生成する必要のあるクラスのサブクラス

## example
要は他のクラスに、どのクラスを生成するかのロジックを切り出せれば良い。
継承を使わずにコンポジションと移譲で実装することもできる。

商品を売る、営業の例
### 継承
```
// オブジェクトを生成する必要のあるクラス
class Salesman {
    func sell(for buyer: Buyer) {
        let product = suggestProduct()
        // something like...
        // product.prepareForSell()
    }

    // factory method
    // public でも privateでも
    // privateの場合実質的にtemplate method patternも現れる。
    // 今回はtemplate method(sell)から呼ばれる & public
    func suggestProduct(for buyer: Buyer) -> Product {
        return NormalProduct()
    }
}

class WiseSalesman: Salesman {
    // override
    func suggestProduct(for buyer: Buyer) -> Product {
        switch buyer {
        case .rich: return ExpensiveProduct() 
        case .poor: return CheapProduct() 
        }
    }
}

let tramp = Buyer()
let homeless = Buyer()

Salesman().sell(for: tramp)
WiseSalesman().sell(for: tramp)
WiseSalesman().sell(for: homeless)
```

### コンポジションと移譲の例
```
protocol SuggestProductProtocol {
    func suggestProduct(for: Buyer) -> Product
}

class SuggestProduct: SuggestProductProtocol {
    func suggestProduct(for buyer: Buyer) -> Product {
        return NormalProduct()
    }
}

class WiseSuggestProduct: SuggestProductProtocol {
    func suggestProduct(for buyer: Buyer) -> Product {
        switch buyer {
        case .rich: return ExpensiveProduct() 
        case .poor: return CheapProduct() 
        }
    }
}

class Salesman {
    private let suggesting: SuggestProductProtocol

    init(suggesting: SuggestProductProtocol) {
        self.suggesting = suggesting
    }

    func sell(for buyer: Buyer) {
        let product = suggestProduct()
        // something like...
        // product.prepareForSell()
    }

    // factory method
    func suggestProduct(for buyer: Buyer) -> Product {
        // コンポジションに移譲
        return suggesting.suggestProduct(for: buyer)
    }
}

let tramp = Buyer()
let homeless = Buyer()
let salesman = Salesman(suggesting: SuggestProduct())
salesman.sell(for: tramp)

let wiseSalesman = Salesman(suggesting: WiseSuggestProduct())
wiseSalesman.sell(for: tramp)
wiseSalesman.sell(for: homeless)
```
51歳からのプログラム　備忘録　empty isset if(変数) の戻り値

isset,emptyなど、混乱するので、テストしてまとめてみた。
同じようなのがあれば、ここに追記していこう。

**if(empty($param))**
--
| 変数の存在 | 変数の値 | 戻り値 |
|-----------|---------|--------|
|存在しない||true|
|存在する|無い|true|
|存在する|有る|false|

**if(!empty($param))**
--
| 変数の存在 | 変数の値 | 戻り値 |
|-----------|---------|--------|
|存在しない||false|
|存在する|無い|false|
|存在する|有る|true|

**if(isset($param))**
--
| 変数の存在 | 変数の値 | 戻り値 |
|-----------|---------|--------|
|存在しない||false|
|存在する|無い|false|
|存在する|有る|true|

**if(!isset($param))**
--
| 変数の存在 | 変数の値 | 戻り値 |
|-----------|---------|--------|
|存在しない||true|
|存在する|無い|true|
|存在する|有る|false|

**if($param)の戻り値**
--
| 変数の存在 | 変数の値 | 戻り値 |
|-----------|---------|--------|
|存在しない||undefine variable|
|存在する|無い|undefine variable|
|存在する|有る|true|

**if(!$param)の戻り値**
--
| 変数の存在 | 変数の値 | 戻り値 |
|-----------|---------|--------|
|存在しない||undefine variable|
|存在する|無い|undefine variable|
|存在する|有る|false|
ABC 105: C - Base -2 Number

# はじめに
AtCoderの公式解説がしょっぱい問題を自分なりにわかりやすく解説してみようという記事です。

# 問題概要
整数 $N$ の $-2$ 進数表記を求めなさい。
[ABC 105: C – Base -2 Number](https://atcoder.jp/contests/abc105/tasks/abc105_c)

# 解説
問題テキストにもありますが、 $N$ の $-2$ 進数表記を $S = S_kS_{k-1}\dots S_1S_0$ とすると、次が満たされます。

- $S_i$ は `1` または `0` である
- $N \neq 0$ ならば $S_k$ は `1` である
- $N = S_k(-2)^k + S_{k-1}(-2)^{k-1} + \cdots + S_1(-2)^1 + S_0(-2)^0$ が成り立つ

試しに、いくつかの $N$ について $-2$ 進数表記を求めてみると、次のようになります。

| $N$ | $S$   | $N$ |    $S$ |
|----:|------:|----:|-------:|
|    0|    `0`|
|    1|    `1`|   -1|    `11`|
|    2|  `110`|   -2|    `10`|
|    3|  `111`|   -3|  `1101`|
|    4|  `100`|   -4|  `1100`|
|    5|  `101`|   -5|  `1111`|
|    6|`11010`|   -6|  `1110`|
|    7|`11011`|   -7|  `1001`|
|    8|`11000`|   -8|  `1000`|
|    9|`11001`|   -9|  `1011`|
|   10|`11110`|  -10|  `1010`|
|   11|`11111`|  -11|`110101`|

このくらいなら手計算で簡単に出せますが、大きな数になるとそうもいかないので、何らかのアルゴリズムを考える必要があります。

以下、各 $S_i$ を通常の2進数と同じように「ビット」と呼びます。

## アルゴリズム
では、$N = -150$ に対する $S$ を求めてみましょう。

まず、$-150 = (-2)^7 + (-22)$ と分解します。このとき、$-150 = (-2)^5 + (-118)$ でもないし、$-150 = (-2)^9 + 362$ でもありません。

$N_1 = N - (-2)^k$ とおくと、

```math
\sum_{0 \leq 2i+1 < k} (-2)^{2i+1} \leq N_1 \leq \sum_{0 \leq 2i < k} (-2)^{2i}
```

である必要があります。
いまの場合、$(-2)^7$ 未満のビットのみで表せる数は、最小で $(-2)^5 + (-2)^3 + (-2)^1 = -42$ 以上、最大で $(-2)^6 + (-2)^4 + (-2)^2 + (-2)^0 = 85$ 以下なので、$22$ はこの範囲内にあり適しています。
しかし、$(-2)^5$ 未満のビットのみで表せる数は、最小で $(-2)^3 + (-2)^1 = -9$ 以上、最大で $(-2)^4 + (-2)^2 + (-2)^0 = 21$ 以下なので、$-118$ を表すことができません。
また、$(-2)^9$ 未満のビットのみで表せる数は、最小で $(-2)^7 + (-2)^5 + (-2)^3 + (-2)^1 = -170$ 以上、最大で $(-2)^8 + (-2)^6 + (-2)^4 + (-2)^2 + (-2)^0 = 341$ 以下なので、やはり $362$ を表すことができません。

以下、同様に $-22 = (-2)^5 + 10$、$10 = (-2)^4 + (-6)$、$-6 = (-2)^3 + 2$ と分解できます。したがって、$N = -150$ に対する $-2$ 進数表記は $10111010$ であることがわかりました。

まとめると次のようになります。

1. $(-2)^k$ のビットが立つかどうかを判定する。ビットが立つ条件は、$\sum_{0 \leq 2i+1 < k} (-2)^{2i+1} \leq N' \equiv N - (-2)^k \leq \sum_{0 \leq 2i < k} (-2)^{2i}$ が成り立つことである。
1. ビットが立つ場合は $N := N - (-2)^k$ とする。$k$ を $1$ 減らして1.に戻る。

ループの開始条件は、$|N|$ を2進数で表した場合の最高ビットの2つ上から始めれば十分だと思います。もちろん $k = 31$ から始めてもよいでしょう。ループの終了条件は $k<0$ です。

## 実装例
https://atcoder.jp/contests/abc105/submissions/5228976
よくわかるPHPの教科書 / Chapter5・6の画面遷移図的な資料を作ってみる

[以前の投稿](https://qiita.com/blacklions20/items/ffa0354e625c43c95582)にも書きましたが、PHPについては「[よくわかるPHPの教科書【PHP7対応版】](https://book.mynavi.jp/ec/products/detail/id=89743)」を使ってPHPを勉強しました。

なかなかまとまった時間が取れず細切れの勉強になってしまったため、現在自分がどこ(テキストで作る昨日の中のどの機能)を勉強してるのか迷子になってしまうことがありました。
それを防ぐために、Chapter5と6において常に全体を俯瞰できるように、作成するPHPファイルの関連図を作成してみましたので載せてみます。(著者の谷口さんにもQiitaの載せてもいいことをご快諾頂けたので♪)
※必ずしも画面単位では無いので画面遷移図じゃないし、クラスってわけでも無いのでクラス図じゃないし、何て呼べばいいんでしょう・・・


作ってみようと思ったきっかけは、guiflowという面白いツールを見つけたからです。
guiflowについてはこちらを参照しました。
https://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42(guiflow作成者)
https://qiita.com/toshi4dev/items/b1c3a9ffcf579127d599
すぐに慣れてサクサク作れるし、修正がリアルタイムにフローに反映されていくのを見ながら出来るので、楽しいツールです。

### Chapter5についての関連図
![Chapter5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367907/afa58d65-39e6-489b-b88b-6098ec40fbdf.png)

### Chapter6についての関連図
![CHAPTER6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367907/f449e484-99ce-a551-98d4-eb51c25b74fc.png)

### ちなみに、Chapter6にいいね機能を追加([以前の投稿](https://qiita.com/blacklions20/items/ffa0354e625c43c95582)参照)した後の関連図はこちら。↑の関連図に対して追加した部分を赤枠で囲ってます。
![CHAPTER6+α.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367907/6ef9707b-654b-9e98-7619-0da19b3bacd4.png)



以上です。
よくわかるPHPの教科書を使ってPHPを学んでいる初心者の方の参考になれば幸いです。
GraalVMであそんでみる

GraalVMについて調べてみたくなったのでちょっと触ってみます。

# getting started

## とりあえずDockerで触ってみる

GraalVM公式のGetting Startedを見てみる。
https://www.graalvm.org/docs/getting-started/
Dockerで動かす方法がDocker Containersに書いてあるので、それを参考にとりあえずpullしてbash立ち上げてみる。

    docker pull oracle/graalvm-ce:19.0.0
    docker run -it oracle/graalvm-ce:19.0.0 bash

動いた

## Rubyを使いたい

bashから

    gu install ruby

したらインストールできるが、Rubyのインストールに非常に時間がかかるのでRubyをインストールしたimageをbuildしておきたい

```docker:Dockerfile
FROM oracle/graalvm-ce:19.0.0
RUN gu install ruby
```

buildして動かしてみる

```
docker build -t #{適当な名前} .
docker run -it #{上でつけた名前} bash
bash-4.2# irb
irb(main):001:0> RUBY_ENGINE
=> "truffleruby"
```

動いた。


## Polyglotっぽいことをしてみる

ここを参考に
https://www.graalvm.org/docs/reference-manual/languages/ruby/

```ruby:test.rb
require 'json'

obj = {
  time: Time.now,
  msg: 'Hello World',
  payload: (1..10).to_a
}

encoded = JSON.dump(obj)

js_obj = Polyglot.eval('js', 'JSON.parse').call(encoded)

puts js_obj[:time]
puts js_obj[:msg]
puts js_obj[:payload].join(' ')
```
jsのオブジェクトをRubyでputsしています。

```
bash-4.2# ruby --jvm --polyglot test.rb
2019-05-11 07:31:35 +0000
Hello World
12345678910
```

動いた

普通のRubyでこのコードを動かすとPolyglotなんてクラスはないので当然コケる

```
$ ruby test.rb
Traceback (most recent call last):
test.rb:11:in `<main>': uninitialized constant Polyglot (NameError)
```

ただ、これだけだと「GraalVMであそんでみる」というより、「TruffleRubyのPolyglotクラスを使ってみた」という感じ。
もう少し違う実験をしてみたいと思ってRubyVM::InstructionSequenceで内部処理を覗けないかと思ったけど、さすがにTruffleRubyにはないみたい。
https://bugs.ruby-lang.org/issues/15743
Splunkのeventstats と streamstatsの使い分け。

eventstatsとstreamstatsの使い分けについて
--
- Splunkを使い始めてすぐにつまずきやすい、違いがわかりにくいSPLの代表。eventstatsとstreamstats。
- Proxyログを対象にしてeventstatsとstreamstatsをそれぞれ使ってSPLイメージの違いを理解してみましょう。

streamstats
---
利用例：  ProxyログのWebアクセス件数をカウントし、12時間間隔で変動する動的閾値を設けて、閾値を超える回数のアクセスを外れ値として検知する

```SPL:SPL(timechartとstreamstats組み合わせ)
sourcetype="intersafe_http"
|timechart count span=1h
|streamstats window=12 avg(count) as avg stdev(count) as stdev
|eval upper_bound = avg + 2*stdev
|fields - avg - stdev
|eval outlier = if(count > upper_bound, 1, 0)
```
<img width="1231" alt="スクリーンショット 2019-05-11 16.29.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/9efb4981-e896-4abe-49f3-7c7901373e9d.png">

eventstats
---
利用例：ProxyログのWebアクセス件数をカウントし、検索期間全体の固定閾値を設けて、閾値を超える回数のアクセスを外れ値として検知する

```SPL:SPL(timechartとeventstat組み合わせ)
sourcetype="intersafe_http"
|timechart count span=1h
|eventstats  avg(count) as avg stdev(count) as stdev
|eval upper_bound = avg + 2*stdev
|fields - avg - stdev
|eval outlier = if(count > upper_bound, 1, 0)
```
<img width="1237" alt="スクリーンショット 2019-05-11 16.30.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/da804a03-ca81-c4c9-c570-72937bca2079.png">

eventstatsはtimechart（時系列グラフの可視化）との組み合わせ利用よりも、以下のように、「全体統計量に対する異常な乖離を探す」使い方のほうが一般的かもしれません。

```SPL:SPL(statsとeventstat組み合わせ)
sourcetype="intersafe_http"
|eventstats avg(sum_bytes) as avg stdev(sum_bytes) as stdev
|stats sum(bytes) as sum_bytes by dest
| eval threshold = avg + 2*stdev
```

利用例：Proxyログのbytes_inをdest毎に合算し、全体の標準偏差から2σ以上のdestを外れ値として検知する
![スクリーンショット 2019-05-11 16.19.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/185759/baee5b9f-3528-be5e-4758-4f1ce4b24fba.png)

ポイント
---
- 閾値を動的に変えていきながら外れ値を見たい⇢⇢**streamstats**
   - 例：認証回数やネットワークのトラフィックボリュームなど１日の周期の中で上限値/下限値が変動するものに向いている
- １日また１週間ごとの期間全体の平均や標準偏差を求め、そこから乖離する送信元や宛先をあぶり出す⇢⇢**eventstats**
   - 例： 宛先サイト別のデータ転送量を見て、全体平均より大きく外れたボリュームの宛先をあぶり出す
Pythonでthreadingを使った非同期処理

pythonの非同期処理には、`threading`、`multiprocessing`、`asyncio`の3種類があります。それぞれの違いについては[こちらの記事](https://qiita.com/icoxfog417/items/07cbf5110ca82629aca0)が詳しいです。

今回はマルチスレッド処理の`threading`を使って複数スレッドをたて、単一のキューからデータを取り出して処理していく方法を紹介します。

いきなりですが、そのコードがこちら。

``` async.py
from queue import Queue
from threading import Thread
import time


def worker(q):
    while True:
        result = q.get()
        time.sleep(1)
        print(result)
        q.task_done()

if __name__ == '__main__':
    q = Queue()

    for _ in range(3):
        thread = Thread(target=worker, args=(q,))
        thread.setDaemon(True)
        thread.start()

    a = [1, 2, 3, 4, 5, 6]
    for i in a:
        q.put(i)

    q.join()
```

## スレッドで実行する処理

`worker()`はスレッドで実行させる処理です。
`q.get()`でキューから要素を取り出し、1秒スリープしてから取り出した要素を表示しています。`q.task_done()`でキューから取り出した要素の処理が完了したことをキューに知らせます。これらの処理を無限ループします。

## メイン処理

メインの処理では、`q = Queue()`でキューを作成します。引数に`maxsize`を指定しない場合はキューの大きさは無限になります。
`thread = Thread(target=worker, args=(q,))`でスレッドを作成し、上で作成した`worker()`関数と引数を渡します。
`thread.setDaemon(True)`でスレッドをデーモンスレッドにする処理です。デーモンスレッドは残っているスレッドがデーモンスレッドだけの時pythonプログラムを終了させます。
`thread.start()`でスレッドをスタートさせています。
今回はfor文で3つのスレッドをたてています。

次はキューに`a`の要素を順次入れていきます。
最後`q.join()`でキューの処理が全部終わるまで待機します。

## 実行結果

このプログラムを実行すると、

```
python async.py
# 1秒待機
1
3
2
# 1秒待機
5
6
4
```

のようになります。
3つのスレッドが同時に実行されるので、順番は実行するたび変わって3つずつ出力されるのが確認できるかと思います。


# 参考
* [Pythonにおける非同期処理: asyncio逆引きリファレンス](https://qiita.com/icoxfog417/items/07cbf5110ca82629aca0)
* [Pythonの非同期I/O（asyncio）を試す](https://qiita.com/tanuk1647/items/052c68bd06b9efbec205)
* [Queue – スレッドセーフな FIFO の実装](http://ja.pymotw.com/2/Queue/)
* [Python スレッドをやってみる（２）](https://bty.sakura.ne.jp/wp/archives/69)
railsのformのエラー時にdivとかで囲わずにinput要素にclassをつける

`fireld_error_proc` でデフォルトの状態だとエラー時にinput要素の周りをdivで囲われてしまいます。

```html
<div class="field_with_errors">
  <input autofocus="autofocus" autocomplete="email" placeholder="email" type="email" value="" name="user[email]" id="user_email">
</div>
```
↑こんな感じ
その際に、divで囲うのではなく要素自体に特定のクラス名をつけたい時の書き方

## 追加手順

nokogiriをinstall

```ruby:Gemfile
# nokogiri
# https://github.com/sparklemotion/nokogiri
gem 'nokogiri'
```

application.rbに以下を追加

```ruby:config/application.rb
# Application class内に追加
config.action_view.field_error_proc = proc do |html_tag, _instance|
  if html_tag.match?(/<(input|label|textarea|select)/)
    html_field = Nokogiri::HTML::DocumentFragment.parse(html_tag)
    html_field.children.add_class 'error'
    html_field.to_s.html_safe
  else
    html_tag.html_safe
  end
end
```
特定の要素だった場合、nokogiriで特定の文字列をパースしてadd_classをする

## 出力結果
```html
<input autofocus="autofocus" autocomplete="email" class="error" placeholder="email" type="email" value="" name="user[email]" id="user_email">
```

## 参考
https://gist.github.com/Stex/5539836
5/11 本日の勉強記録　Ruby　例外と例外処理

**例外**
プログラムの実行中に発生した「例外」的な問題。予期しないエラー、発生するはずがない、してはいけないエラーのこと。

**例外処理**
例外、つまり予期しないエラーが発生した時に、それをキャッチして、ユーザーにメッセージを表示するなそど、なんらかの処理を行うこと。(スマホアプリなどを使っていて、"予期せぬエラーが発生しました"とメッセージが表示され、強制終了されるなど)

```rb

puts '--- Please enter an integer. ---'
i = gets.to_i

begin 
 puts 10 / i #例外が起こるかもしれないコード
rescue => ex #変数(例外オブジェクトの代入)
#例外が発生した時のコード
 puts 'Error'   
 puts ex.message
 puts ex.class
ensure 
#例外が起こっても起こらなくても実行したいコード
 puts 'end'
end
```

上記を実行し、2と打つと
`5`
`end`
となる。

しかし、0を打つと、例外が発生し、
`0 
Error
divided by 0
ZeroDivisionError
end`
となる。

自分で例外を発生させる`raise`メソッドというものもあるらしい。
どんな時に使うんだろう。調べてみよう。
【備忘録】AnacondaでBeautifulsoup4をインストールする

Anaconda環境でBeautifulsoup4を使おうとしたときに、Errorが出た。
パッケージのインストール方法をおさらいしておく。

●環境
Windows10 64bit
Python 3.7
Anaconda 3

●インストール方法
①Anaconda Promptを実行

②prompt上で以下コードを実行

```Anaconda
pip show beautifulsoup4
```
③以下コードが表示されて終わり

```
Name: beautifulsoup4
Version: 4.7.1
Summary: Screen-scraping library
Home-page: http://www.crummy.com/software/BeautifulSoup/bs4/
Author: Leonard Richardson
Author-email: leonardr@segfault.org
License: MIT
Location: c:\programdata\anaconda3\lib\site-packages
Requires: soupsieve
Required-by: conda-build
```
matplotlibのboxplotとhistogramの軸のスケールを合わせる

# x軸を揃える
ポイント: `ax.set_xlim([-10, 5])`を使う。逆に`hist(range(-10, 5))`は使わない。
![plot_out.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341384/4cb119df-e6fc-f395-c807-538ac868b4d3.jpeg)

```python
#!/usr/bin/env python3

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.gridspec as gridspec

# prepare test data
data=np.random.randn(1000)

plt.figure(figsize=(5,2))
gs=gridspec.GridSpec(2, 1, height_ratios=[1, 3])
gs.update(hspace=0.5)

ax=plt.subplot(gs[0])
ax.boxplot(data, vert=False) # boxplot
ax.set_xlim([-10, 5]) # x軸の範囲を設定

ax=plt.subplot(gs[1])
ax.hist(data, color='blue') # histogram
ax.set_xlim([-10, 5]) # x軸の範囲を設定

plt.savefig('plot_out.pdf')
```

# 失敗例 (x軸のスケールが揃わない)
![plot_out_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341384/16f3fcb2-2692-f058-07b2-0e6ceb97c74e.jpeg)

```python
#!/usr/bin/env python3

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.gridspec as gridspec

# prepare test data
data=np.random.randn(1000)

plt.figure(figsize=(5,2))
gs=gridspec.GridSpec(2, 1, height_ratios=[1, 3])
gs.update(hspace=0.5)

ax=plt.subplot(gs[0])
ax.boxplot(data, vert=False) # boxplot
ax.set_xlim([-10, 5])

ax=plt.subplot(gs[1])
ax.hist(data, color='blue', range=(-10, 5)) # ここでx軸の範囲を設定するとダメ

plt.savefig('plot_out.pdf')
```

# 環境
Ubuntu 18.04
Python 3.7.2
matplotlib 3.0.3
seaborn 0.9.0
numpy 1.15.4
#ruby でローカルのPDFファイルをテキスト化する例

```
$ gem install pdf-reader
```

```ruby
require 'pdf-reader'
io = File.open('/Users/yumainaura/Downloads/some.pdf')
reader = PDF::Reader.new(io)
reader.pages.each { |page| puts page.text }
```

# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Python *kwargs **kwargs について

Pythonのコードでよく出てくる*kwargs **kwargsについて？と思った方
下記のURLを見れば分かります。

結論から言うと＊と＊＊を付ける事で、任意の数の引数(可変長引数)を渡す事が出来るというもの。
＊と＊＊の違いはタプルとして渡すか、辞書型として渡すかの違い。

https://note.nkmk.me/python-args-kwargs-usage/
abstract factory pattern

# abstract factory pattern

あるクラスが必要とするオブジェクトの生成を、
他クラス（Factory）に切り出す。
あるクラスはFactoryが生成するオブジェクト(product)の型に、
依存することになる。

比較的抽象度の高いパターン。

## ケース

あるクラスがインターフェイスA, インターフェイスBに依存していて、
インターフェイスA, インターフェイスBには複数の実装が存在する。
その組み合わせを指定したいとき。

例えば組み合わせに条件が存在するなど。

## 結果
### pros
組み合わせを容易に置き換えられる。
### cons
インターフェイスCを後から追加するのは容易ではないケースが多そう。
ファクトリークラスは、指定して生成する必要がある。

## 実装対象
オブジェクトを生成するインターフェイス
インターフェイスを実装するクラス
生成されるオブジェクトのインターフェイス

## example
家の例。
家クラスは壁、屋根、床のみで成り立つとする。

家の例は不適切かもしれないことに注意。
abstract factoryでは
壁、屋根、床以外の要素を
後から追加するのは状況によっては容易でない。

### swift
```
protocol WallProtocol {}
protocol RoofProtocol {}
protocol FloorProtocol {}

protocol HouseFactoryProtocol {
    // これはfactory methodでもある。
    func createWall() -> WallProtocol
    // これはfactory methodでもある。
    func createRoof() -> RoofProtocol
    // これはfactory methodでもある。
    func createFloor() -> FloorProtocol
}

class House {
    private let wall: WallProtocol
    private let roof: RoofProtocol
    private let floor: FloorProtocol

    init(houseFactory: HouseFactoryProtocol) {
        self.wall = houseFactory.createWall()
        self.roof = houseFactory.createRoof()
        self.floor = houseFactory.createFloor()
    }
}

class GreatHouseFactory: HouseFactoryProtocol {
    func createWall() -> WallProtocol { return NiceWall() }
    func createRoof() -> RoofProtocol { return StrongRoof() }
    func createFloor() -> FloorProtocol { return WarmFloor() }
}

class PoorHouseFactory: HouseFactoryProtocol {
    func createWall() -> WallProtocol { return FragileWall() }
    func createRoof() -> RoofProtocol { return OpeningRoof() }
    func createFloor() -> FloorProtocol { return SmallFloor() }
}

// 家の壁、屋根、床の具体的なクラスはわかっている。
// Factoryを指定することは間接的に具体的な部品の組み合わせを指定している。
let greatFactory = GreatHouseFactory()
let greatHouse = House(houseFactory: greatFactory)

let poorFactory = PoorHouseFactory()
let poorHouse = House(houseFactory: poorFactory)
```

Houseを生成するクライアント(呼び出し側)は、家の壁、屋根、床の具体的なクラスはわかっている。
Factoryを指定することは間接的に具体的な部品の組み合わせを指定するということ。
Houseから見ると、壁、屋根、床の具体的なクラスはわかっていない。
この違いはややこしいが、他のパターンと比較するときに役立つ。
<head>要素の中に記述される要素

# はじめに
HTML文書のhead部分は、ほとんどwebブラウザには表示されない部分ですが、webサイトの仕様をコンピューターが読み取るために非常に大事な情報です:relaxed:

# 1. meta（メタ）の役割
meta(メタ)要素とは「ページの情報」定義する要素です。
HTMLにおけるメタデータは、その文書に関する様々な情報を意味します。
簡単に言うと、検索エンジンやブラウザ、ソーシャルメディアなどのシステムに向けて書きます。
そのためwebページに見に来てくれた人がメタタグを見ることは、ほとんどありません。



### 書いておきたい・知っておきたいメタタグ



 **文字コード**
 
~~~HTML
<meta charset="UTF-8">
~~~
文字を指定するために書きます。日本語のサイトであれば<head>タグのすぐ下に必ず書きましょう。

 **ページの概要を表す**

~~~HTML
<meta name="description" content="ページの概要をあらわす"
~~~
meta description(メタディレクション)は、結果画面でのクリック率を上げることが基本的な役割です。検索エンジンと検索ユーザーへ、ページの概要を伝えるためのタグとなります。内容はどのように記述しても構いませんが「この記事にはこのような内容が書かれています」という簡単な情報がいいでしょう。Google検索結果に表示される文字数や重要性は常に変動しています。



 **レスポンシブデザイン用（スマホ対応）**

~~~HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
~~~
スマホやタブレットでも表示が最適になるように書いておく必要があります。
この指定を記述して**スマホ向けの*CSSを書いていくことにより***スマホ向けのwebサイトにすることができます。

 **IEを最適化する**

~~~HTML
<meta http-equiv="X-UA-Compatible" content="IE=edge">
~~~
Internet Explorer(IE)ではwebサイトを表示する際に通常表示の「標準モード」と過去のバージョンで表示される「互換モード」という機能があります。閲覧者がわからないまま互換モードで閲覧しているとページのデザインが崩れてしまっていたりする可能性があります。このメタタグを記述すると常に標準モードで表示されることができます。古いバージョンのIEを利用しているユーザーに配慮した記述です。



**他の言語に翻訳をしない**



~~~HTML
<meta name=“google”  content=“notranslate”>
~~~

英語のサイトなどを閲覧すると「翻訳しますか？」と表示されることがあります。
このメタタグを記述していると翻訳オプションが表示されなくなります。

 **SNSとの連携 OGP**
 
~~~HTML
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="サムネイルとして表示する画像">
<meta property="og:type" content="ページの種類">
~~~
OGPとは「Open Graph Protocol」の略です。
FacebookやTwitterなどのSNSでweb ページがシェアされた際にそのページのタイトルやURL、アイキャッチ画像などを指定した通りに表示させる仕組みです。

# 2.title（タイトル）要素
~~~HTML
<title>ページのタイトル</title>
~~~
webページにはそれぞれのページにタイトルが存在します。
このタイトルはbody要素のなかの要素とは別もので、webブラウザのタイトルバーやタブの部分に表示されます。
検索結果にも表示される部分なので分かりやすく簡潔な表記で指定しましょう。
# 3.link（リンク）要素
~~~HTML
<link rel="stylesheet"  href="ファイルの場所・ファイル名">
~~~
link要素の用途は、外部ファイルで準備したCSSファイルを参照する際に使用します。
linkタグを指定する場合、href属性とrel属性が必須です。
rel属性の値にリンクタイプを指定することで文書との関係を設定します。
href属性の値にはURLを指定します。
CSSファイルを参照する場合rel属性に`stylesheet`を指定しhref属性にCSSのファイル名を指定します。

## style要素でCSSを直接指定しよう
~~~HTML
<html>
<head>
<meta name="Content-style-Type" content="text/css">
</head>
<body>
<p style="color: #000000; ">文字色の指定</p>
</body>
</html>
~~~
style要素はCSSの記述を直接指定できます。
link要素でCSSを外部参照した場合には他のページにも使えますがstyle要素で指定した場合「記述したHTML文書のみ」の適用となります。

style属性によるスタイル指定をする場合には、文書内で使用されるスタイルシートがCSSであることをブラウザなどにしらせるためにhead要素内にmeta要素を記述してスタイル言語の値にはtext/cssを指定します。
ブラウザによって自動的に判断されますが誤動作を避けるために記述します。

# おわりに
必須だからとコピペするのではなく、きちんと意味を理解してからコードを書くとしっかり身に付きます:clap::blush:
GASに関する個人メモ

# MEMO

- GASに関する個人メモ。
- GASに関し、2019年2月から勉強開始。
- Gistは全部Secretで作成。


## ①日次ランキング

- https://gist.github.com/sam-ple/c6d757ed1abc92cc922f86a12b820c36
- ２つのスプレッドシートの情報から情報取得→整理し、ランキング形式で上位5位をメールで送りたいという要望があったので。
- 新たにスプレッドシートを作成し、 IMPORTRANGEとRANK関数でまずは情報整理し、その情報をメール。
- スプレッドシートは本文にURL記載していたが、別途Excel添付も欲しいとの事で、Excelデータを添付する形に。
- トリガーで毎日にすると土日も送られるので、営業日のみにしようかと思ったがめんどいので、毎週月・火・水・木・金と5つのトリガーを作成。


## ②アクセスログ＆変更履歴

- https://gist.github.com/sam-ple/0be8118c6080fc82e2bad0524e08eaa7
- スプレッドシート自体に閲覧者や編集履歴はあるが、すぐに確認できるようにしたいという要望があったので。
- 一番下に追記では無く、一番上に追記する形に。
- 特定の人は追記されない形に。


## ③メール一括送信

- https://gist.github.com/sam-ple/77d1fc8e3e7529ab30fa12dca4e0cbd4
- 有料版のBenchmark Emailを使っているが、もっと簡易的に送りたいという要望があったので。
- トリガー設定も作り、予約配信できる形に。
- スクリプトをわざわざ開かなくて良い様に、スプレッドシートのメニューにトリガー設定や即時送信を追加。


## ④Googleドライブ内にフォルダを一括作成

- https://gist.github.com/sam-ple/d8f1b9e23b2367ce321e2c30d6d4966d
- Googleドライブ内にフォルダを一括作成したかったので。


## ⑤Googleカレンダーから誕生日をメールで

- https://gist.github.com/sam-ple/2ffaaf66087d954ad23f59ff9c1e12e1
- Googleカレンダーにグループ全体の誕生日はまとめているが、今日から１ヶ月以内の誕生日予定をメールで特定の人に送りたかったので。
- スプレッドシートから追加、スプレッドシートに取得等も追加。


## ⑥社内管理システム

- WEBアプリ。
- ~~https://gist.github.com/sam-ple/bc4b9b3d342198682b5b34e5d6e087e4~~
- 人事や労務や総務の情報をまとめたくて。
- 作成途中。
- https://gist.github.com/sam-ple/87ea6271b2c566d6a6bafb69a37faab0
  - ⑨管理システムを基に、再度作り直し。


## ⑦会食アプリ

- WEBアプリ。
- https://gist.github.com/sam-ple/e1e948ed1c68e54352cf4b94c8f4062a
- スプレッドシートで管理している会食場所候補をスマホから閲覧できて、検索したいという要望があったので。


## ⑧通知用の関数整理

- https://gist.github.com/sam-ple/67af71b459b2d58a221492a05336119c
- メール、Slack、LINE、Chatwork、Hangout Chatへの通知関数を簡易的に纏めたかったので。


## ⑨管理システム

- WEBアプリ。
- https://gist.github.com/sam-ple/e33cea0107330dfabded91c888bdec95
- スプレッドシートの内容をWEBから新規追加・閲覧・編集がしたかったので。
MySQLのbinlogとredo logについて

MySQLにbinlogとredo logの二つの重要なログシステムがあります。本文では、この二つのログの仕組みについて説明します。
#１．基本知識
MySQLは、SQLの解析と実行する機能を実現するServer層とデータアクセス機能を提供するストレージエンジン層で構成されています。ストレージエンジンには、MyISAM、InnoDB、Memoryなどが存在します。

binlogは、Server層が出力するログです。redo logは、InnoDBエンジンが出力するログです。二つのログは、ともにDBテーブル更新時に出力されます。

ディスクアクセスに時間がかかるため、InnoDBエンジンがメモリ上でレコードを更新し、redo log bufferに記録したら、レコード更新操作が完了とします。この仕組みは、WAL（Write　Ahead Logging）といいます。別の専用スレッドが適当のタイミングでredo log bufferの内容をディスクにあるredo logファイルに書き出します。redo logファイルの個数とサイズが固定であり、ループで使用します。最後のファイルが一杯になったら、最初のファイルに戻って、再利用します。MySQLが異常終了して再起動する時に、redo logを用いて、コミット済みでディスクに保存されていないレコードのデータを復元します。

binlogは、レコードの更新内容を保存します。誤って削除したデータを復元する場合、binlogを利用します。データベースのバックアップをベースに、バックアップ時点から指定時点の間のbinlogを適用することで、指定時点のデータを復元できます。また、マスタスレーブ構成で２つ以上のデータベースサーバが存在する場合、マスタサーバからスレーブサーバにbinlogの内容を転送します。スレーブサーバがbinlogを適用して、マスタサーバのデータと一致性を保ちます。

binlogとredo logの違いは、下表で示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414462/3dec1573-49c2-70cb-9730-5ac48f1637dc.png)


#２．更新SQL文の実行プロセス
下図にて、更新SQL文の実行プロセスを説明します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414462/6612e809-6938-4c52-7e91-76ac6a7550d2.png)


上図の最後の三つのステップでredo logとbinlogを２フェースコミットの形で更新します。これは、redo logとbinlogの一致性を保つための仕組みです。
MySQLが再起動する時に、redo logをスキャンして、コミット状態であれば、redo logに記述されたレコードの更新内容をコミットします。prepared状態であれば、まずbinlogの状態をチェックします。該当binlogが完了していない場合は（上図①のタイミングでクラッシュ）、redo logに記述されたレコードの更新内容をロールバックします。該当binlogが完了している場合は（上図②のタイミングでクラッシュ）、更新内容をコミットします。

※statementモードのbinlogの最後に「COMMIT」句があり、rowモードのbinlogの最後に　XIDイベントが存在します。MySQL 5.6.2以後のバージョンでは、binlog-checksumを導入しました。checksumの値を検証してbinlogが完了しているか判定できます。
※トランザクションにトランザクションIDが割り振られて、トランザクションIDがredo logとbinlogに記録されます。



#３．redo logの書出し
redo logに三つの状態があります。下図にて三つの色のあるボックスで表します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/414462/a54a786e-2a4e-d518-a538-cdc3c4cb557b.png)

1.redo log buffer。MySQLプロセスのメモリに存在します。
2.Page cache。ファイルシステムのCache（メモリ）に存在します。writeシステムコールの呼び出しでデータをPage Cacheに書き出します。
3.Hard Disk。ハードディスクに存在します。fsyncシステムコールを呼び出して、データをHard Diskに保存します

InnoDBにバックグランドスレッドがあって、１秒毎に、redo log bufferにあるデータをwriteの呼出しでPage cacheに書出し、次にfsyncを呼び出してHard Diskに保存します。
まだコミットしていないトランザクションの更新データもredo log bufferにあるので、同じタイミングでHard Diskに保存されます。

上記以外、以下の場合でも未コミットデータがディスクに書き出されます。
1.redo log bufferの使用済みサイズがパラメータ「innodb_log_buffer_size」の半分になる直前に、バックグランドスレッドがディスクにredo logを書出します。ただ、この場合、writeのみを呼び出し、fsyncを呼び出しません。
2.並行実行のトランザクションがコミットされた場合、パラメータ「innodb_flush_log_at_trx_commit」の値が「1」であれば、redo log bufferの内容がDBに書き出されます。
GASで始める在庫管理

友達と飲んでた時に「社で在庫管理がヤバくって、こっちでエクセルで管理してるけどなんか不便やねんなぁ…。どないかならんか。」と聞かれたのでスプレッドシートでやればよいんじゃね？となってやった話をします。

#前提条件
・Python,Rは触ったことあるものの、GAS全く分からん。
・ググり力を信じて頑張る。
・諸諸の設定は無視する。
・「在庫数とかはこっちで聞き取って手打ち。マジでエクセルにベタうちしてるだけ。」

#最初にやったこと
・SpreadSheetを作って送り付ける。
→気を付けたこととしては一応在庫の%表示して条件式突っ込んで色付けた。

#相手からの返答
・これめっちゃええんやけども、在庫数やばくなったとき通知とか来たら嬉しいんやけど…。どないかならんか。

#本題
SpreadSheetの在庫の％の項目が50％切ってたらメールを送る。


```GAS
function myFunction() {
  var sheet = SpreadsheetApp.getActiveSheet();
  var lastRow = sheet.getLastRow();
  for (var i=2; i<=lastRow; i++) {
    total = sheet.getRange(i, 5).getValue()
    if (total >= 0.3) {
      MailApp.sendEmail('（メアド）', '在庫のお知らせテストです。', '在庫が少なくなっています。注文お願いします。');
    　break;
    }
  }
}
```

E2セルに在庫率を持ってて、そこの値で通知がいくようにしました。あとはもっといい方法ある気がするけど良かったですね。あとはイベントトリガーでセルの更新でFin.

#蛇足
・最初ifから抜けるbreak;忘れてて只の激やばメール送信Botになった。
・列方向の操作がちょっと難しかった。
・作成にかかったのSpreadSheetから大体3時間くらい。
・無駄なコードがある気がするけどどうなんか知りたいのでコメントください。

#参考
メールの送信方法: [GASでのメール送信についてまとめてみる](https://qiita.com/mistolteen/items/404c10657b1b27007a3c)

全般: [割と役に立つプログラミング言語 Google Apps Script (GAS) の紹介](https://qiita.com/szf/items/df3e6ae3212366b76e8d)
[Terminal]ターミナルのホスト名を無くす方法

#本記事の目的

デフォルトでは, 以下の画像のように＄の左側（黒い図形で覆っている部分）にホスト名・ディレクトリ名・ユーザー名が, この順で表示されているはずだ. この部分をディレクトリ名だけにしたい場合がある. 筆者もその1人であり, これを実現しようと試みた. そして, 参考文献[1]より, bash_profileにコードを追加すると実現することができた. しかし, bash_profileを編集するという作業に思いの外, 苦労をしたので, その方法について書き記したく本記事を投稿する.

<img width="1138" alt="screenshot 5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285948/8aa274e4-1ea2-9d0b-4f01-a02a39a39187.png">

#bash_profileの編集方法
まず, bash_profileのあるディレクトリ名を確認する. 次のコマンドをターミナルで打つ.

```
ls -la
```

これにより確認できたbash_profileが存在するディレクトリ名が「DIR」と仮定する.
そして, Finderを開き上部メニューバーの「移動」を押し「フォルダへ移動」を押す. そして, 次のコードを記述する.


```
~/DIR/
```

しかし, 私の場合はこれで移動したディレクトリをみてもbash_profileを確認することができなかった. 
実はbash_profileは隠しファイルになっていたのだ. この理由は不明だが, 次のキーで隠しファイルを表示させることができる. DIR上で押す.

```
command + shift + .
```

そうすることで, bash_profileを表示させれる. あとは[1]を参考にし, bash_profileに

```
export PS1="\W \$ "
```
を追加し, ターミナルで

```
source ~/.bash_profile
```
を打つことで終了.

#参考文献
両サイト共に2019年5月19日に参照した.

[1]ターミナルに毎回表示される長ったらしい表示を短くする
https://qiita.com/tonkotsuboy_com/items/b752a86cee7eaedf28da

[2]Macのターミナルで最初のコンピューター名・ユーザー名を消す
https://tech.qookie.jp/posts/terminal-turn-off-prompt/
コンピュータにmacosをインストールできませんでした (macOS could not be installed on your computer)のエラーメッセージリスト

# 概要
macOSをインストールするときに出てくるこの画面のエラーメッセージを集めました。あんまりテキストになっていなくて（特に日本語）、ググラビリティを上げるべく頑張ります。
こんなの出ました！というのがありましたら、コメントしていただけると大変助かります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/ba44a4d5-ad78-3819-7840-36f57f762e1c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68213/d5c6c179-bd51-d2f5-aba5-8e9fc03bf6bb.png)

# リスト
## リソース読み込みの失敗
- An error occurred while loading the installer resources.
Restart your computer and try again [link](https://www.tonymacx86.com/threads/solved-macos-could-not-be-installed-on-your-computer-installer-resources-error.263961/)
- インストーラリソースの読み込み中にエラーが発生しました。インストーラを終了してコンピュータを再起動してからやり直してください。[link](https://buncho.xyz/2018/10/24/%E3%80%90mac%E3%80%91%E3%82%A8%E3%83%A9%E3%83%BC%E3%80%8C%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%ABmacos%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A7/)

## OSInsall.mpkg関連
- The path /System/Installation/Packages/OSInstall.mpkg appears to be missing or damaged. Quit the installer to restart your computer and try again. [link](https://appletoolbox.com/2017/12/macos-could-not-be-installed-how-to-fix/)
- パス"/System/Installration/Packages/OSInsall.mpkg"は存在しないか破損しているようです。
インストーラを終了してコンピュータを再起動してからやり直してください。[link](http://hackerhouse.hatenablog.com/entry/2017/12/29/053103)

## 空き容量不足
- 英語版探し中
- Macintosh HDにはインストールに必要な空き領域がありません。
インストーラを終了してコンピュータを再起動してからやり直してください。[link](http://pasora.hatenablog.com/entry/2016/09/23/002652)

## Core Storage関連
- A boot helper partition is required when working with Core Storage.
Quit the installer to restart your computer and try again.[link](https://superuser.com/questions/972600/problems-upgrading-os-x-10-11-el-capitan-from-beta-to-gm-candidate-on-a-dual-b)
- Core Storageで作業する場合は、起動ヘルパーパーティションが必要です。インストーラを終了してコンピュータを再起動してからやり直してください。

## Apple Diagnotics関連
- [link](https://www.tonymacx86.com/threads/solved-im-getting-macos-could-not-be-installed-on-your-computer-error-when-trying-to-install-hs.241957/)

## リソースが見つからない
- The installer resources were not found. Quit the installer to restart your computer and try again.[link](https://bartechtv.com/macos-could-not-be-installed-on-your-computer-error-when-installing-mojave-on-hackintosh/)

## Error on the storage system
- [link](https://www.youtube.com/watch?v=gheoy07XNEU)

## Volume contains?
- [link](https://discussions.apple.com/thread/7904160)

## The installer resources have expired.
- [link](https://www.tonymacx86.com/threads/high-sierra-fresh-install-issue-the-installer-resources-have-expired.249020/)

## No packages were eligible to install
- [link](https://techsparx.com/computer-hardware/apple/macosx/install-osx-when-you-cant.html)

## まだまだ追加していきたいのでコメントお待ちしています！

# 参考
https://qiita.com/hidehiro98/items/c7b029cd611a1ef37b1a
Visual Studio 2017(2019)でmbedマイコンのビルド

PICからmbed(STM32)へ移行を考えていて、なるべく簡単に開発環境を整えたいと思っていました。mbedはオンライン上でビルドできるのですが、オフラインでできたらいいなと思っていて（インストーラー1回の実行で何も考えなくても環境を整えてくれると有難いのですが）、調べたら以下のサイトが見つかりました。Visual Studioでオフラインでmbedをビルドできるというものです。

http://matsujirushi.hatenablog.jp/entry/2018/01/14/153530
http://matsujirushi.hatenablog.jp/entry/2018/01/14/203033

mbedをオフラインでビルドする方法は色々あるみたいですが、色々なソフトを入れないといけなかったりと大変面倒そうでした。しかし、こちらの方法基本的にVisual Studioを入れて、mbedサイトから出力したファイルをインポートするだけで簡単にできます。他にVS以外の開発環境として、eclipseがあるのですが、昔のトラウマがあるのでこれはいいと思いました。

今回、僕の環境はWin10 64bit、Visual studio2017 community (2019でも可)、マイコンはNUCLEO_F303K8を使いました。

上記サイトの手順をまとめると以下のような感じです。

①mbedサイト( https://ide.mbed.com )でアカウントを作って、適当なサンプルプロジェクトを作る。
②サンプルプロジェクトでプログラムのエクスポート（MAKE-GCC-ARMを選択）
③Visual Studioをインストール
④インストールの際に、C++によるLinux開発 にある、Embedded開発とIoT開発 をチェック
　（すでにVSをインストール済だったら、メニューからVisual Studio Installerを起動・変更）
⑤ ②のファイルを展開したフォルダをVSで開く。
⑥ CppProperties.json の作成・編集
⑦ Makefileを選択してビルド。できたbinファイルをマイコンへコピー。

ところが、僕の環境では上記手順でビルドの途中でmain.oまではできるものの、リンクがうまくいかずビルドが失敗するようでした。おそらく、mbedサイトで出力されたMakefileの書式が変わったようです。

具体的にはMakefileの以下のリンカー部分でエラーがでました。

	@$(LD) $(LD_FLAGS) -T $(filter-out %.o, $^) $(LIBRARY_PATHS) --output $@ @.link_options.txt $(LIBRARIES) $(LD_SYS_LIBS)

これは、main.oとmbedオブジェクトファイル群をリンクしているのですが、mbedオブジェクトファイル群を一旦.link_options.txtというテキストファイルに出力して、これをリンクしているようですが、僕の環境(win10-64, VS2017 or VS2019 community)ではうまくいかないようです。

そこで、以下のように.link_options.txtではなく、直接、変数を指定します。

	@$(LD) $(LD_FLAGS) -T $(filter-out %.o, $^) $(LIBRARY_PATHS) --output $@ $(OBJECTS) $(SYS_OBJECTS) $(LIBRARIES) $(LD_SYS_LIBS)

ただし、これでも、mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/PeripheralPins.oがない、と怒られたため、../mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/PeripheralPins.o をリンクするように変更します。これはMakefileの上の方のオブジェクトパスの部分

	SYS_OBJECTS += mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/PeripheralPins.o
	SYS_OBJECTS += mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogin_api.o
	SYS_OBJECTS += mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogin_device.o
	SYS_OBJECTS += mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogout_api.o
	SYS_OBJECTS += mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogout_device.o

を、以下のように変えました(たくさんあるので一括置換で変えました)。

	SYS_OBJECTS += ../mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/PeripheralPins.o
	SYS_OBJECTS += ../mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogin_api.o
	SYS_OBJECTS += ../mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogin_device.o
	SYS_OBJECTS += ../mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogout_api.o
	SYS_OBJECTS += ../mbed/TARGET_NUCLEO_F303K8/TOOLCHAIN_GCC_ARM/analogout_device.o

一応、上記の変更でうまくビルドできて、マイコンも動きました。もっとうまい方法があるかと思いますが、とりあえずこれでできた、という報告です。
JavaScriptエラーハンドリング

## Errorオブジェクト
`name` `message`の2つのプロパティがある

```javascript:err.js
const err = Error("エラーオブジェクト");
console.log(err.name);
// >> Error
console.log(err.message);
// >> エラーオブジェクト
```

## try/catch構文
例外が発生し得る場合にtry/catch構文を使用します。

```javascript:try-catch.js
try{
  console.log("定義していないundefinedFuncを使用します")
  undefinedFunc()
} catch(err) {
  console.log("エラーが発生しました")
  console.log(error.name)
  // >> ReferenceError
  console.log(error.message)
  // >> undefinedFunc is not defined
} finally {
  console.log("finallyの中は例外の有無に関わらず実行されます")
}
```

## throw
例外を投げることができる。

```javascript:throw.js
try {
  throw new Error("例外を投げる");
} catch (err) {
  console.log(err.name)
  // >> Error
  console.log(err.message)
  // >> 例外を投げる
}
```
VSCode Remote

#動機
この記事を読んでやってみたくなる
https://qiita.com/relu/items/defde8de8c4d21af662f

しかし、この記事を読んでvscodeと設定が混ざったら面倒だなと感じる。
https://forest.watch.impress.co.jp/docs/news/1183/384/index.html
> 無用な事故を避けるためにも“Visual Studio Marketplace”から直接拡張機能をインストールするのではなく、「Visual Studio Code」内からセットアップするのがおすすめだ。

そして、このコマンドがうまくいかない。（dpkgがエラーを吐く）

```
wget --content-disposition https://update.code.visualstudio.com/latest/linux-deb-x64/insider \
    && sudo dpkg -i code-insiders*.deb \
    && code-insiders --install-extension ms-vscode-remote.vscode-remote-extensionpack
```
#やること

- 下記ページのリンク先からダウンロードしてくる
https://code.visualstudio.com/insiders/

- VSCode-darwin-insider.zipを解凍する

- アプリケーションフォルダにコピペ

- 下記の記事にしたがって code-insiders コマンドを使えるようにする。
https://github.com/Microsoft/vscode/issues/6627#issuecomment-267456703

記事内容

- vscode-insidersを開く
- command + p を押す
- \>pathを入力
- shell:command install ~~を選択

コマンドプロンプトを開く

- 下記コマンドを実行

```
code-insiders --install-extension ms-vscode-remote.vscode-remote-extensionpack
```