OmniAICreator/Qiita-1.07M huggingface dataset:
Tween系アセットの新定番 DOTween #アセットアドカレ

この記事は [Unity Assets Advent Calendar 2016](http://qiita.com/advent-calendar/2016/unity-asset) 17日目の記事になります。

UnityのTweenアニメーションのライブラリアセットではフリーのiTweenが有名ですが、今回はiTweenよりパフォーマンスに優れるらしいDOTween (HOTween v2)のPro版について、インスペクターからサクッとTweenアニメーションの設定ができるのでご紹介します。

> 【Unity】【Tween】iTween, HOTween, DOTween, LeanTween 不專業比較 – TED SIE BLOG
https://tedsieblog.wordpress.com/2016/07/11/%E3%80%90unity%E3%80%91%E3%80%90tween%E3%80%91itween-hotween-dotween-leantween-%E4%B8%8D%E5%B0%88%E6%A5%AD%E6%AF%94%E8%BC%83/

## DOTween Pro  0.9.550 (Aug 24, 2016)
![image](https://qiita-image-store.s3.amazonaws.com/0/32347/565697df-290e-0ac5-e901-ce97cacda1f1.png)

## インスペクターでの指定だけで跳ねる箱を作る

![2016-12-21 01h49_43.gif](https://qiita-image-store.s3.amazonaws.com/0/32347/ea8f3b07-ee2c-fa8c-6f31-7f8217c5f4ae.gif)

1. 動かしたいゲームオブジェクトにDoTween Animationコンポーネントをアタッチ。
2. 基本的な設定は下記図の通り。
    3. 今回は上下に動かすのでLocalMoveを選び、TOボタン横のポジションの値を指定。
    4. 繰り返し跳ねるようにするためLoopsは適当な値(-1でずっとループ)。1度再生したら反対に動くようYoyoを選択。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/0453f197-f33d-07a7-8f3e-79f4d8cbfb83.png)

動きのキモとなるEaseの早見表
> Easing Function 早見表
http://easings.net/ja


## 動きの組み合わせ

![2016-12-21 02h47_36.gif](https://qiita-image-store.s3.amazonaws.com/0/32347/8b6def10-5d1f-3fc6-57b0-9f25b83f3b2a.gif)
LocalMoveのみの単純な上下だけでなく、様々なパターンを追加指定して複雑な動きを実現してみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/16a81c33-e768-fea2-2cce-dac019b4bac9.png)

複数の組み合わせはDOTweenAnimationコンポーネントを複数アタッチして実現していきます。
それぞれアタッチしたコンポーネントのAutoPlayを外し、OnCompleteでDOPlayNextで上から順番に実行しています。
また、最後の2つは同時に再生するために、前のDOTweenAnimationで2回DOPlayNextで実現


DOTweenでは、PositionやRotationだけでなくScaleなどのTransformコンポーネントの値を時間での変化を自由に定義できるだけでなく、様々なコンポーネントの値を操作することができます。

> DOTween - Documentation
http://dotween.demigiant.com/documentation.php#creatingTweener

もちろんiTweenのようにスクリプトから記述も可能で更に簡潔に書ける。

コールバックも用意されており、DOTween ProのDOTweenAnimationコンポーネントの使いようによってはPlaymakerのような使い方も場合によっては可能かもしれない
Node.jsの仮想DOM用のi18nライブラリ作った

[Mithril、Vue.jsの仮想DOM用のi18nライブラリ作った](http://qiita.com/shibukawa/items/c2298b21b4629941b230)の続きです。というか、クロスポストしようとして楽しようとしたらダメだったので別エントリーで。

前回のエントリーでだいたいの使い方は紹介したので、node.js用の機能を。

CLIでの使い方
------------------

CLIツールでは基本的な使い方は変わりません。おさらいとして、機能をフルに使ったサンプルを紹介します。主語の性別によるコンテキスト、数値情報のよる複数形、フォーマッティングによる変数への代入です。

```js
const i18n = require('i18n4v');

i18n.translator.add({
{
  "values": {
    "Yes": "はい",
    "No": "いいえ"
  },
  "contexts": [
    {
      "matches": { "gender": "male" },
      "values":{
        "%{name} uploaded %n photos to their %{album} album":[
          [0, 0, "%{name}は彼の%{album}アルバムに写真%n枚をアップロードしました"]
        ]
      }
    },
    {
      "matches": { "gender": "female" },
      "values": {
        "%{name} uploaded %n photos to their %{album} album":[
          [0, 0, "%{name}は彼女の%{album}アルバムに写真%n枚をアップロードしました"]
        ]
      }
    }
  ]
});

i18n("%{name} uploaded %n photos to their %{album} album", 1,
  { name: "John", album: "Buck's Night" },
  { gender:"male" }
); //  ->  Johnは彼のBuck's Nightアルバムに写真1枚をアップロードしました

i18n("%{name} uploaded %n photos to their %{album} album", 4,
  { name: "Jane", album: "Hen's Night" },
  { gender: "female" }
); //  ->  Janeは彼女のHen's Nightアルバムに写真4枚をアップロードしました
})
```

なお、node.js環境ではselectLanguages（）を使って、OSの言語情報を取得できますが、setLanguage()は未サポートです。

サーバでの使い方
---------------------

CLIやブラウザは各環境でユーザが見る言語のみを相手にしていれば良かったのですが、サーバは複数の言語をロードしておいて、適切な言語をユーザごとに提供する必要があります。

Express 4.0以降だと次のようなrequestのacceptsLanguageメソッドを使って[クライアントブラウザの言語情報を取得できる](http://stackoverflow.com/questions/11845471/how-to-get-user-language-in-nodejs-expresjs)とのことです。まだ自分では試していませんが・・・

```js
const i18n = require('i18n4v');

const en = i18n.create({
    values: {
        cat: "cat"
    }
});
const es = i18n.create({
    values: {
        cat: "gato"
    }
});
const ja = i18n.create({
    values: {
        cat: "猫"
    }
});

const languages = {en: en, es: es, ja: ja}

const express = require('express');

app.get('/cat', function(request, response) {
    var t = languages[request.acceptsLanguages('en', 'es', 'ja')] || en;
    response.send(t('cat'));
});
```

コマンドラインツール
--------------------

i18n4vコマンドを使うと、ソースコードやHTMLから翻訳のキーを抽出します。-fをつけると、キーをそのまま翻訳語として登録するので、プライマリー言語のJSONを出力するときに使うと便利です。また、一度実行したあとに実行すると、差分情報だけを適用するため、翻訳語がなくなることはありません。

このコマンドはnpmパッケージでi18n4vをインストールすると使えるようになります。

使う時は、出力先の言語と、入力のソースディレクトリ(複数可)をしています。

```shell-session
$ i18n4v -o languges/ja.json bin src
$ i18n4v -o languges/en.json -f bin src
```

次のようにi18n4vパッケージの関数を割り当てて、その関数の引数で渡した文字列をキーとします。

```js
const i18n = require('i18n4v');
i18n('Translation Word');
```

HTMLも、data-i18nがついているタグのテキストをキーとして抽出します。

```html
<span data-i18n>What's your name?</span>
```

さて、サーバ言語としてはGoにも要注目ですよね。辞書ファイルは単なるJSONなので言語を跨いでの再利用もしやすいはずです。ということで、Goの詳細については[Golang用のi18nパッケージを作ってみた](http://qiita.com/shibukawa/items/840b5f08f70c7ec0054b)を参照してください。
AtomでTeXをコンパイルする (Mac)

# はじめに
自分用の備忘録に。AtomでTeXファイル編集の環境を整備するのに自分が行った作業をメモしておきます。
環境は

* macOS Sierra 10.12.1
* Atom 1.12.7

# 準備
## パッケージのインストール
以下のパッケージをインストールする

* **latex** (核心)
* **script** (これをインストールしておくと，`cmd+i`でビルドができるようになる)
* **pdf-view** (これをインストールしておくと，PDFがAtomで表示できるようになる)
* **language-latex** (TeXのシンタックスハイライトを行うのに必要)

## 日本語対応
そのままだと日本語がPDFに表示されなくなってしまうので，scriptパッケージをカスタマイズ。
設定メニューのPackagesからscriptを選び，View Codeからコードを見る。そして，`script/lib/grammars.coffee`を選択し，下の部分を記載の通り修正する。

```:修正前
 LaTeX:
    "File Based":
      command: "latexmk"
      args: (context) -> ['-cd', '-quiet', '-pdf', '-pv', '-shell-escape', context.filepath]
  
  'LaTeX Beamer':
    "File Based":
      command: "latexmk"
      args: (context) -> ['-cd', '-quiet', '-pdf', '-pv', '-shell-escape', context.filepath]
```
```:修正後
  LaTeX:
      "File Based":
        command: "ptex2pdf"
        args: (context) -> ['-l', '-ot', '"-synctex=1 -file-line-error"', context.filepath]

    'LaTeX Beamer':
      "File Based":
        command: "ptex2pdf"
        args: (context) -> ['-l', '-ot', '"-synctex=1 -file-line-error"', context.filepath]
```

# 実行方法
`cmd+i`でビルドすればPDFが生成されるはず。あとはツリービューからPDFをダブルクリックしてAtomからPDFを表示しておけば，ビルドするたびにちゃんとリアルタイムに変わっていく。

# 参考

* [atomで快適LaTeX編集環境](http://ayihis.hatenablog.com/entry/2016/09/24/143641)
MediaRecorder の ondataavailable の Blob の結合時に動作が重くなる問題

# MediaRecorder の ondataavailable の Blob の結合時に動作が重くなる問題

下は [MDNのMediaRecorderの記事](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) の例にならって書いた MediaStream を録画する最小のコードである。

```js
const rec = new MediaRecorder(mediaStream, {mimeType: 'video/webm; codecs="vp8, opus"'});
const chunks: Blob[] = [];
rec.ondataavailable = (ev)=>{ chunks.push(ev.data); };
rec.start();

setTimeout(()=>{
  rec.stop();
  const webm = new Blob(chunks, { 'type' : 'video/webm' }); // 結合
}, 1000*60*1); // 1時間後に
```

実はこのコードには長時間録画すると blob の結合処理の動作が重くなるという問題がある。

## 原因

1. 高 bps の MediaStream （例えば getUserMedia ） を録画すると `MediaRecorder.prototype.ondataavailable` の呼ばれる頻度が高くなる.
2. `BlobEvent.prototype.data` の Blob が 1B に近い小ささなので、chunks に1分で数千ものBlobオブジェクトが溜まってしまう。
3. 1時間では数十万個近い Blob オブジェクトになり、大量の結合と大量のGCが入るため動作が重くなる。


## 対策

数分に一回は結合する。

```js
const rec = new MediaRecorder(mediaStream, {mimeType: 'video/webm; codecs="vp8, opus"'});
const chunks: Blob[] = [];
rec.ondataavailable = (ev)=>{ chunks.push(ev.data); };
rec.start();

let blob = new Blob([], { 'type' : 'video/webm' }); // 空のblobを用意する

function flush(){
  const _chunks = chunks.splice(0, chunks.length); // バッファを空にする
  blob = new Blob([blob].concat(_chunks), { 'type' : 'video/webm' });
}

const tid = setInterval(flush, 1000*60); // 1分おきに

setTimeout(()=>{
  clearInterval(tid);
  rec.stop();
  flush(); // 最後のflush
  const webm = blob; // 結合
}, 1000*60*60*1); // 1時間後に
```

## 追記

[`rec.start(timeslice)`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start) で ondataavailable の頻度を変えられたようだ。こちらを使うべきだろう。
新人エンジニアの育て方

#**新人エンジニアの育て方**
最近新卒の面倒を見始めた中堅エンジニアが
意識していることを大雑把にまとめてみた。:sweat_smile:
こういう記事を書くのはあまり慣れていないので、
生暖かく読んでください:heart_eyes:

##失敗から学び、繰り返さないようにする
- テスト環境で失敗を繰り返させる
- 本番環境でミスの発生率を下げる
- 失敗したら以下を本人に確認する

↓

- どうしてミスが発生したか
- 再発防止策はどうするか
- 同じミスを周りの人が起こさないにはどうするか

↓

- 原因をしっかり自覚させる
- 同じミスをしないように対策を一緒に考える
- 翌日チームに共有させる
- 必要に応じて社内向けの技術記事も書かせる

##使う側のことを考えて仕事に責任感を持たせる
- ある程度物が作れたらまずは自分で使わせてみる
- 他の人からも意見をもらう
- 過去のクレームやご意見を見させる

↓

- 自分の作業に責任感を持たせる
- 仕様が本当に適切か常に考えさせる
- 製品がさらに良くなる提案をさせる


## コードレビュー
- 早い段階で危ない宗教から離脱させる
- 一人では見ずにローテーションでコードを見る

↓

- コードの可読性の向上
- 不具合防止策になる
- 無駄なコメント、必要なコメントの意識を持たせる
- 条件分岐にelse(defualt)を意識させる

##見積もりの精度を上げる
- まずは残業させない
- おおよその作業工数を一緒に考える

↓

- あふれ（差し込み）作業はちゃんと報告させる
- 遅延もしっかり報告させる

↓

- 実際にかかった工数を確認させる
- 必要なバッファを意識させる
- どういう対応に時間がかかる傾向か覚えさせる

#まとめ
エンジニアの新人というか、
あまり業種は関係ないような話だと思います。
しっかり1つ1つ仕事を理解させることが大事で
上記はそれらの手段の1つだと思います。
信頼関係もすごく大事なので新人の輝いてる瞳が
年を越す前に濁ってるような事態は避けたいですね:scream:
BlobをVertexshaderで描くLogic

これは[GPU で暖を取りたい人のための GLSL Advent Calendar 2016](http://qiita.com/advent-calendar/2016/glsl)の21日目の記事です。

今回は少し頂点シェーダーのネタがあって嬉しいですね。
というわけで今年も[vertexshaderart.com](https://www.vertexshaderart.com/)にお邪魔して頂点シェーダーネタです。

##Blob
Blobとはいわゆる[メタボールの](https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%BF%E3%83%9C%E3%83%BC%E3%83%AB)ことです。
使い分けがあるのかは知りませんがソフトウェアによってそんな呼び方をしているものもあります。
今回はただ語呂合わせのためにそう呼んでいます。

##Vertexshaderで描く
本当はこのようなものをレンダリングするにはレイマーチングが簡単です。
それにはフラグメントシェーダーを使うのが高速で美しく、今ではそのような方法はこのアドベントカレンダーに限らずあちこちで紹介されています。

しかしここでは頂点シェーダーを使います。
それにはBlobにより生成される曲面に沿ってポリゴンで面を張るアルゴリズムが必要です。

##Logic
とりあえずボクセルを利用して面を張ります。ボクセルとは3D空間上に等間隔に並べたサンプル点です。そして近傍の8個のボクセルからなる立方体をセルと呼んだりします。

![voxel.jpg](https://qiita-image-store.s3.amazonaws.com/0/103261/7eaf1011-3996-c00a-0811-e89aff2dfb01.jpeg)

有名なものは[マーチングキューブス](https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%83%81%E3%83%B3%E3%82%B0%E3%82%AD%E3%83%A5%E3%83%BC%E3%83%96%E6%B3%95)でしょうか。
ちなみにこのWikipediaを鵜呑みにして15種類で作ると穴が開くという罠があります。
[有名な実装](http://paulbourke.net/geometry/polygonise/)があるので参考にしましょう。

マーチングキューブスはセルの立方体の中にできる面のパターンを全てリストアップしておくというアルゴリズムです。これはわかりやすくて良いのですが、一度に生成されるトライアングルの数が一定ではないという難点があります。

ジオメトリシェーダーなどがある環境ならいいのですが、ここではWebGLを使うのでそんなものはありません。

そこでSurfaceNetという方法を使います。実はSurfaceNetという名前の出所が若干謎なのですが検索すると一応出てくると思います。

これはセルの辺が面に突き刺さっていた場合、その辺を共有する4つのセルの内部には曲面上の点があるはずなので、その点を使って辺に交差する面を張る、というアルゴリズムです。

![surfacenet.jpg](https://qiita-image-store.s3.amazonaws.com/0/103261/ae93c0a4-daf7-3a52-43b2-4f1f59f38344.jpeg)

この方法では1つの辺に貼られる面は必ず四角形になります。
つまり頂点シェーダーで実装するのが簡単です。

##GPUを加熱してやるのだ!
というわけで[こちら](https://www.vertexshaderart.com/art/ZAHaRXC8kiQBzSkbb)にとりあえず作ってみたものを用意しました。
残念ながらフラグメントシェーダーで鬼のようなレイマーチングをするほど加熱しませんが、頂点シェーダーとしてはそこそこ暖をとれると思います。

しばらく見ていると四角形の面を張っているのがわかりやすいような仕掛けを入れてありますので十分加熱してご賞味ください。

それではオヤスミパラノイア。
素敵な頂点シェーダーライフを!
Perl6の中を覗いてみる

この記事はPerl6 Advent Calendar2016の21日目の記事です。

昨日は、titsukiさんによる「NativeCallを使ったプログラムの一部だけを最小構成で再現する方法」でした。

こんにちは、[吉祥寺.pm](https://kichijojipm.connpass.com)というイベントをやっているMagnolia Kです。

Perl6がリリース(と言っていいのか微妙ですが)されてから1年経ちました。皆さん、使っていますか？自分は使っていません！

1年ぶりにまた触ってみようかな、と思ったので以前調べたこと整理して書いてみます。

# Perl6の実装を追いかける

去年の年末に比べると実装がガラっと変わることも減ってきたPerl6ですが、2015年後半の怒濤の実装変更はもの凄いものが有り、いままで動いていたコードが突然動かなくなること多々有りました。最近は落ち着いてきたとはいえ、やはり慣れない言語を使い始めるときには、実装を追いかける方法を知っておいた方がいいですね。

## file-watch関数の実装を追いかける

ここではPerl6のコアモジュールである`IO::Notification`の`file-watch`という関数を例に実装方法の追いかけ方を紹介します。

`file-watch`は、Perl5でいうところの[`Filesys::Notify::Simple`](http://search.cpan.org/dist/Filesys-Notify-Simple/)みたいなやつで、監視対象のファイルがアップデートされたら指定したコードがキックされる、というものです。

Perl6(Rakudo)のコードはGitHub上で管理されていますので、まずはGitHubに置かれているコードを見てみましょう。

コアモジュールは、`src/core/`配下に配置されています。ダブルコロンをパスの区切りに置き換えてモジュールが配置されているのもPerl5と同じです。

[https://github.com/rakudo/rakudo/blob/nom/src/core/IO/Notification.pm](https://github.com/rakudo/rakudo/blob/nom/src/core/IO/Notification.pm)

わずか31行のコード、一つしか関数が定義されていないので、すぐに読めると思いますが、単に`nqp::watchfile`を呼び出して、Supplyを返しているのが分かりますね。

[`IO::Notification`のドキュメント](https://docs.perl6.org/type/IO::Notification#method_watch-path)には、短いですがサンプルコードが用意されているので、そちらと併せて読むとすぐに理解できるでしょう。

### nqpとは？

さて、ここからが本題です。

先ほどのソースコードを見ると分かると思いますが、実装の実態は`nqp::watchfile`という箇所です。この`nqp`とは何でしょうか？

正体は、このリポジトリのコードです。

[https://github.com/perl6/nqp](https://github.com/perl6/nqp)

nqpは、'not quite perl'の略とされていて、Perl6を実装するためのPerl6のサブセットを提供します。ややこしいですね。

Perl6はMoar VMや、JVM(Java Virtual Machine)といった複数の環境で動作することを目指して作られており、それらの実行環境の差分を吸収するのが、nqpという仕組みになっています。

例えばjvm用のwatchfileメソッドは、[こちら](https://github.com/perl6/nqp/blob/master/src/vm/jvm/runtime/org/perl6/nqp/runtime/IOOps.java)で定義されていて、実装されていない（！）ことが分かります。

**実際にjvm版を実行しようとしたのですが、2016.12.19現在、なぜかmacOS上ではビルドが通らないので、それはまた今度…**

一方でmoarVM用のwatchfileメソッドは、[こちら](https://github.com/MoarVM/MoarVM/blob/master/src/io/filewatchers.c)で実装されていることが分かります。

これでwatch-file関数の実装が分かりましたね！（名前が逆転する理由は分かりませんでしたが…）。

## おわりに

Perl6では、実装がRakudo -> nqp -> moarVM or jvmと多段階になっていて、なかなか追いかけづらい構成になっていますが、一つの関数やメソッドに絞って追いかけて行ったり、grep等を上手く使って丹念に見ていけば大丈夫です（というほど追いかけていないですが）。

明日は、titsukiさんです！
64bitレジスタ上でselectする


突然に64bitのレジスタ上でselectの操作をしたくなるときありますね (ありますね)。これは[ビット演算テクニックAdvent Calendar](http://www.adventar.org/calendars/1403) 19日目の記事です。


## selectとは

select\_q(k) は、配列x上を先頭から見たとき、k番目に出現する値qのインデクスを返す関数として定義されます。たとえば、配列 [0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1] について、(左を先頭にして) select\_1(3) = 6 となります。


このselectの演算ですが、64bitのレジスタを64要素の {0, 1} の配列と見て、この上で実行したくなるときがあります。これはsuccinct data structureの文脈で出てきたりします。(自分は別の目的でした)

## そこにpdepがあらわれた

x86_64にintelが導入したBMI2命令セットに、pdepという命令があります。

![pdep](https://qiita-image-store.s3.amazonaws.com/0/153117/96663bfa-2ad8-2db7-e1c6-1e574bf3a354.png)

こんな感じに、マスクレジスタを使ってsrcの下位に並んだビットをscatterします。これを使って64bitのレジスタv上でselect_1(k)を計算します。

![select](https://qiita-image-store.s3.amazonaws.com/0/153117/e25c7e8e-8acf-2cde-6cbb-6eca615ecf03.png)

1をkだけ左にシフトし、これをselectしたいベクタをマスクにしてpdepし、結果のレジスタをtzcnt (下位から0を数える) します。また、vのうち1の個数がk個以下の場合は、pdepで1が追い出されるので結果は64となります。シフト、pdep、tzcntともに3クロックかかるのでいうほど速くありませんが、分岐がないのは良いです。めでたしめでたし。

## おわりに

pdepってチェスとか将棋にしか使いどころがないのではと思っていたのですが、まさか自分が使うことになるとはと驚き、こんな使い方があったかと発見に嬉しくなりました。この驚きと喜びを誰かに伝えたかった...
SSHポートフォワーディングでVNC接続"open failed: administratively prohibited: open failed"でハマった

タイトル通り。sshコマンドの-Lオプションを勘違いしておりました。

- 環境:
 - ローカル　Mac
 - リモート　CentOS7(IPを10.100.100.1,ホスト名をCentOSと仮定)
 - tiger-vnc 5901でListen

```bash:SSHポートフォワーディングのコマンド（間違い)
ssh -L 5000:CentOS:5901 -N user@CentOS
```

/etc/ssh/sshd_configも.ssh/configも見直していたが以下のエラーが出ていました。
<img width="422" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/77622/9fe787d5-5641-63fd-dba0-b30eefc2cfca.png">

```bash:ターミナル
channel 2: open failed: administratively prohibited: open failed
```

##参考にしたもの①
OSXでssh ポートフォワードするときに　channel 1: open failed: administratively prohibited: open failed”
http://qiita.com/AKB428/items/7cd75bb25e6e9536adc4

こちらの通りやってみると上手く行きました。
`ssh -L 10001:10.100.100.1:5901 -N user@CentOS`

#参考にしたもの②
ここで間違いに気づく。

sshポートフォワーディング
http://qiita.com/mechamogera/items/b1bb9130273deb9426f5

どうしてと思っていたらこちらの記事のコメントで解決。
>ローカルフォワードの場合、targetのホスト名の名前解決はremoteの中で行われるみたいですね。

```bash:SSHポートフォワーディングのコマンド
ssh -L 5000:localhost:5901 -N user@CentOS
```

このようにするのが適切な書き方とわかりました。

#ちなみに

リモートのhostsに"127.0.0.1 CentOS"と書いて上げて
`ssh -L 5000:CentOS:5901 -N user@CentOS`とするとちゃんと上手くVNC接続出来ました。
js 偽とみなされる値を配列から取り除く

##お題
偽とみなされる値（ 0, -0, null, false, NaN, undefined ,空文字列 ("") ）を配列から取り除く。

```script.js
function bouncer(arr) {
//write your code.
}

bouncer([1, null, NaN, 2, undefined]);
```


##出力結果　例

```script.js
(["a", "b", "c"]) //["a", "b", "c"]
([1, null, NaN, 2, undefined]) // [1, 2]
([false, null, 0, NaN, undefined, ""]) // []
```



##主に使った関数
[filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

##試したコード

```script.js
function bouncer(arr) {
  return arr.filter(Boolean);
}
bouncer([1, null, NaN, 2, undefined]);

```

##考え方
・filterで条件として与えられたテスト関数に通った値のみを返すようにする。
・[Booleanオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean)を使うと、偽とみなされる値（ 0, -0, null, false, NaN, undefined ,空文字列 ("") ）に対してfalseを返すことができる。
・filterとBooleanを組み合わせることで正の値のみが返ってくるようにする。


###他にもコードが浮かんだ方、コメントお待ちしてます。
new Array(n) の初期化


## はじめに
```javascript
const arr = new Array(10).map((value, index) => { ... });
```
のようなコードを書いていてうまくmapが回らなく困ったので、調べていたら以下の記事を見つけた。

[new Array\(len\)と\[undefined, \.\.\.\]の違い \- Qiita](http://qiita.com/s-shin/items/88b2b6d4387312fe000a)

> なるほど、ここから察するにnew Array(len)はlengthは初期化するけれど、各要素は初期化されない、というよりは確保されていないような動作であることが分かりました。

> new Array(2)[1]のように要素アクセスするとundefinedを返しますが、これは要素が返されているのではなく、プロパティがないのでundefinedというわけですね。

なるほど、undefinedが定義されているわけではないので、mapで関数が呼ばれていないらしい。
[ECMAScript Language Specification \- ECMA\-262 Edition 5\.1](http://www.ecma-international.org/ecma-262/5.1/#sec-15.4.4.19)

## ES2015+では
上記記事にあるように`fill()`すれば問題なく、当初はそのやり方で対応していた。が、ES2015+なら以下の書き方でもいけるとの知見を得た。

```javascript
const arr = [...Array(10)].map((value, index) => { ... });
```

## [...Array(n)]は何をしている？
[Spread Operator](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_operator)で配列を展開している。
最初はmapと同じで要素が初期化されていないから展開もできないと思っていて、不思議だったので同様にECMAScriptの仕様を見てみる。

[ECMAScript 2015 Language Specification – ECMA\-262 6th Edition](http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists-runtime-semantics-argumentlistevaluation)

> ArgumentList : ... AssignmentExpression
> 　1. Let list be an empty List.
> 　2. Let spreadRef be the result of evaluating AssignmentExpression.
> 　3. Let spreadObj be GetValue(spreadRef).
> 　4. Let iterator be GetIterator(spreadObj).
> 　5. ReturnIfAbrupt(iterator).
> 　6. Repeat
> 　　a. Let next be IteratorStep(iterator).
> 　　b. ReturnIfAbrupt(next).
> 　　c. If next is false, return list.
> 　　d. Let nextArg be IteratorValue(next).
> 　　e. ReturnIfAbrupt(nextArg).
> 　　f. Append nextArg as the last element of list.　

ざっくり見ると Array.prototype.map と違って`hasOwnProperty`のチェックはしていないっぽい。
なので初期化がされていない要素はそのまま`undefined`として返されており、結果`undefined`でのfillと同様の動きをしているみたい。

仕様を読む大切さを知った。
MediaRecorder で録画した WebM の duration が Infinity になる問題

# MediaRecorder で録画した WebM の duration が Infinity になる問題

MediaRecorder で Stream を録画するとその動画の duration が Infinity になる問題がある。

## サンプルコード

https://jsfiddle.net/zsrchm7d/3/

```js
const ctx = document.createElement("canvas").getContext("2d");
const cnv_stream = ctx.canvas.captureStream(60);
const rec = new MediaRecorder(cnv_stream, {mimeType: 'video/webm; codecs="vp8, opus"'});
const chunks = [];

ctx.canvas.width  = 400;
ctx.canvas.height = 300;

document.body.appendChild(ctx.canvas);

rec.ondataavailable = (ev)=>{ chunks.push(ev.data); };
rec.start();

const tid = setInterval(renderer, 1000/5);

setTimeout(rec_stop, 3000);

function rec_stop(){
	clearInterval(tid);
  rec.stop();
  const webm = new Blob(chunks,  { 'type' : 'video/webm' });
	const video = document.createElement("video");
  video.src = URL.createObjectURL(webm);
  video.controls = true;
  video.autoplay = true;
  video.loop = true;
  document.body.appendChild(video);
  
  alert("before-loadedmetadata: "+video.duration);
  video.onloadeddata = ()=>{
		alert("after-loadedmetadata: "+video.duration);
  };
}

function renderer(){
	ctx.canvas.width = ctx.canvas.width;
  ctx.arc(
  Math.random()*ctx.canvas.width,
  Math.random()*ctx.canvas.height,
  10, 0, 2*Math.PI);
  ctx.fill();
}
```

## 原因

ffmpeg でヘッダを見てみる。

```
$ ffmpeg -i 01eb2a76-072c-4195-8c26-a71646b08d2f.webm
ffmpeg version 3.1.4 Copyright (c) 2000-2016 the FFmpeg developers
  built with Apple LLVM version 7.0.2 (clang-700.1.81)
(中略)
Input #0, matroska,webm, from '01eb2a76-072c-4195-8c26-a71646b08d2f.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, mono, fltp (default)
    Stream #0:1(eng): Video: vp8, yuv420p, 2592x1944, SAR 1:1 DAR 4:3, 15 fps, 15 tbr, 1k tbn, 1k tbc (default)
At least one output file must be specified
```

1. MediaStream は本質的にいつ停止するか事前にわからない
2. MediaRecorder API が webm のEBMLヘッダ+フレームバッファを逐次送る形式になっておりメタデータは最初に埋め込まれる
3. HTMLVideoElement が　webm の `Duration: N/A` を `Infinity` 扱いにする。

## 対策

`HTMLVideoElement.currentTime` に大きな値を入れて最後までシークさせると値が取得できる。

https://jsfiddle.net/zsrchm7d/4/

```js
video.currentTime = 7*24*60*1000;
video.onseeked = ()=>{
  alert("after-seeked: "+video.duration);
  video.onseeked = undefined;
};
```

ユーザに webm の blob を配布する場合、この情報を元に blob の EBML をパースして書き換えると良い。
Promiseでアニメーションの順番を柔軟に制御する



.then()の並び順を自由に変えられるので便利

## 引数に関数を渡す

デモ：http://codepen.io/mo4_9/pen/PbLZWa

```javascript:asyncProcess.js
const asyncProcess = (func, duration = 0) => {
  return () => {
    return new Promise((resolve, reject) => {

      if ( func === undefined || null ) {

        reject()

      } else {

        func()
        setTimeout(resolve, duration)

      }
      
    })
  }
}

// ex) firstが発火した3秒後にresolve（次のアニメーションが発火）
function startAnim() {
  return Promise.resolve()
    .then(asyncProcess(first, 3000)) // 3秒後にresolve
    .then(asyncProcess(second, 5000)) // 5秒後にresolve
    .then(asyncProcess(third, 8000)) // 8秒後にresolve
}

startAnim();
```

## ただ待つだけのプロミス

デモ：http://codepen.io/mo4_9/pen/OWzXNq

```javascript:wait.js
const wait = (duration = 0) => {
  return () => {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, duration)
    })
  }
}

function startAnim() {
  return Promise.resolve()
    .then(() => first())
    .then(wait(1000))
    .then(() => second())
    .then(wait(2000))
    .then(() => third())
}
```
そもそも線形ってどういうこと

この記事は[機械学習に必要な高校数学やり直しアドベントカレンダー Advent Calendar 2016](http://qiita.com/advent-calendar/2016/math_for_ml)の16日目の記事です。

近くにいる人から、そもそも「線形代数」の「線形」って何のこと？と訊かれたので、簡単にまとめてみます。

#線形とは
線形という日本語は、知らない人から見れば確かに分かりにくいですね。
英語を調べてみると、

```
線形代数
linear algebra
linear algebras
```
です。さらにlinearを調べると、

    linear
    【形】
    線の、線形の、線状に伸びる、直線の、直線状の、長さの

で、「直線状の(line + ar)」という意味になります。
つまり、「線形」というのは変数と変数の関係が直線的ということを意味してます。これをグラフに書くと、

![linear.jpg](https://qiita-image-store.s3.amazonaws.com/0/38304/b38a62ae-c27b-e02e-3f25-041de997a311.jpeg)

で表される関係ということになります。

#線形の定義

線形は次の2つの特徴を持っています。

1. $f(x+y)=f(x)+f(y)$
1. $f(kx) = kf(x) $　ただし、$k$は実数

つまりこの2つの性質が成り立つ関係を線形と言います。例として上のグラフの$f(x)=2x$でこの性質が成り立つかどうか見てみます。
まず、1についてですが、

```math
\begin{align}
f(x+y) 
&= 2(x+y) \\
&= 2x + 2y \\
&= f(x) + f(y)
\end{align}
```
と成り立ちます。2については

```math
\begin{align}
f(kx)
&= 2(kx) \\
&= k(2x) \\
&= kf(x)
\end{align}
```
と成り立ちます。したがって、$y = 2x$は線形だと言えます。では、$y=2x+1$は線形でしょうか？ この関数で上の性質が成り立つか計算してみます。
まず、性質1から計算します。

```math
\begin{align}
f(x+y) &= 2(x + y) +1 \\
&= 2x + 2y + 1 \\
&\neq f(x) + f(y)
\end{align}
```
となり、性質1が成り立ちません。したがって、$y=2x+1$は線形ではありません。こういうのは非線形と言います。
上のグラフに示したような直線の場合、原点を通る直線だけが線形であると言えます。

#線形性の例
参考文献にあげた「高校数学の美しい物語」からいくつか線形性の例を挙げてみます。

###例1 シグマ

```math
\begin{equation}
\sum_{i=1}^{n} (ax_i+by_i) = a \sum_{i=1}^{n} x_i + b \sum_{i=1}^{n}y_i
\end{equation}
```
上の式で性質1と2の両方が成り立つことが分かります。したがって、総和は線形と言えます。

###例2 ベクトルの内積
3つのベクトル$\vec{p}$、$\vec{q}$、$\vec{r}$を考えた時、

```math
\begin{align}
\vec{p}\cdot(a\vec{q} + b\vec{r}) 
&= \vec{p} \cdot a\vec{q} + \vec{p}\cdot b\vec{r} \\
&= a \vec{p} \cdot \vec{r} + b \vec{p} \cdot \vec{r}
\end{align}
```
$\vec{p}\cdot\vec{q}$は2つのベクトルの内積なので、性質1と2の両方が成り立つので、内積も線形と言えます。
このように高校数学の範囲でも線形の関数はいろいろあります。

#終わりに
普段、道具として数学（の一部）を使っているだけだと、あらためてごく基本的なことを聞かれた時、正確な定義はどうだったかなとか一瞬ためらいます。うろ覚えになってた基礎をたまには見返すのも良いんじゃないでしょうか。


#参考文献・サイト
[高校数学の美しい物語 - 高校数学における線形性の8つの例](http://mathtrain.jp/linear)
EC2でjekyllの準備

# 背景
S3や、heroku等で運用している方が多いみたいですが、EC2をすでに借りていたので同じインスタンスの中に立てる。
けど、１発で起動できなかったのでログがてらまとめます。

## <i class="fa fa-github-alt" aria-hidden="true"></i> jekyllとは
といっても本家を見たほうがいいです。
本家 => https://jekyllrb-ja.github.io

## <i class="fa fa-github-alt" aria-hidden="true"></i> jekyllをEC2にインストール
サイトに書いてあるコマンドだけでは動きませんでした:weary:
rubyの環境セットアップしてなかったら、しょうがない。。。

## <i class="fa fa-github-alt" aria-hidden="true"></i> jekyllインストール
```
$ sudo yum install -y ruby-devel
$ gem install bundler
$ bundle install

// io-consoleエラーが発生したため、インストール
$ gem install io-console
$ gem install jekyll

$ jekyll new my-poor-site
$ cd my-poor-site
$ vim _config.yml
```

### _config.ymlに下記の１行を追加
下記を入れないと外部から接続できません。
確かにサーバー内でのcurlは通って、ローカルのブラウザからは接続できませんでした。

```_config.yml
host: 0.0.0.0
```

## <i class="fa fa-github-alt" aria-hidden="true"></i> jekyllの起動

```
$ jekyll s
```

http://{ec2-host}:4000

ブラウザで上記URLに接続してください。正常に表示されていれば接続できれば起動成功です。

##### [おまけ] 
postファイルにはフォーマットが定義されているらしい。
http://jekyllrb-ja.github.io/docs/posts/

```
$ cd _post
$ vim YEAR-MONTH-DAY-title.mad
```

あまり良く読まないで始めるもんだからちょっと悩みました。
エンジニアなので自分の部屋にセントリーガン置いてみる #アセットアドカレ

この記事は [Unity Assets Advent Calendar 2016](http://qiita.com/advent-calendar/2016/unity-asset) 16日目の記事になります。

Team Fortress 2ではソルジャーとして敵陣に突っ込みリスポーン先を陣取るスタイルだった気がしますが、現実ではエンジニアなので部屋にセントリーガンを配置して守りを固めていきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/eef2a655-0537-b5f1-6988-c3c58622d1a7.png)


## セントリーガンを仕入れよう

*Unity Asset Storeなら重火器の購入もできる*
[![image](https://qiita-image-store.s3.amazonaws.com/0/32347/22ee14c1-d6c0-cfbe-593b-7839ad2c1107.png)](https://www.assetstore.unity3d.com/jp/#!/search/page=2/sortby=relevance/query=Turret)

Sentry GunやTurretで検索してみます。
https://www.assetstore.unity3d.com/jp/#!/search/page=2/sortby=relevance/query=Turret

今回は沢山おいても負荷的に大丈夫そうなこちらをチョイス。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/2e0f6c7a-15ca-0e31-af6d-cb4060f6831d.png)

更にPooling SystemもあってGood

## Weapon System 3.2b (Jul 18, 2016)
[![image](https://qiita-image-store.s3.amazonaws.com/0/32347/c74eb5a0-0aa6-8c1d-02d3-62e5ca76f31b.png)](https://www.assetstore.unity3d.com/jp/#!/content/7676)

さっそく含まれるデモシーンを見ていくと、シンプルなタワーディフェンスゲームが含まれているのでここで配置されているPrefabからお気に入りのセントリーガンを探してみます。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/f8dc2530-dad0-d4a6-7aa3-fae6e504f266.png)

このRocketGunがよさそうです。
早速シーンにおいてみてHoloLensのスケール感で調整します。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/d9e54650-4438-74cc-36ed-db1e82df9770.png)

このセントリーガンはTagで指定したもの(デフォEnemy)に対して自動的に方向転換して攻撃してくれるので、部屋へ自由に配置できるようにしていきます。

![image](https://qiita-image-store.s3.amazonaws.com/0/32347/7f08bcbd-ba3d-f683-0454-7b79e6b90e3e.png)

やり方は簡単。TapToPlace.csをRocketGunプレハブにアタッチするだけ。

適当な敵を配置してEnemyタグを指定して自分の部屋を守りましょう。

MainCameraに設定してミサイルを回避しても面白い。HPの便利スクリプトもWeapon Systemアセットのタワーディフェンスデモシーンに含まれるので、攻撃が当たってHPが0になったらゲームオーバーみたいなゲームもサクッと作れるでしょう。

全体的にわかりやすいGoodな完成プロジェクトです。
[短文メモ][備忘録][bash]半角スペースじゃなく改行区切りで for i in $(command) したい場合のforの代替

ググっても、IFS変えて戻す、みたいなクソめんどくさい方法が出ることが多かったのだけど。　http://askubuntu.com/questions/344407/how-to-read-complete-line-in-for-loop-with-spaces に、なかなかいい方法があった。
どうせまた忘れて、ググる羽目になりそうだから書いとく。

```bash:スペース区切りのループと改行区切りのループ
# スペース区切り
for i in $(command) ; do command2 "$i" ; done

# 改行区切り
command | while read i ; do command2 "$i" ; done
```
IchigoJamでじゃんけんマシーンの製作


※息子の代理投稿です

PCNこどもプロコン2016応募作品

■タイトル
じゃんけんマシーン

■概要
CPUとじゃんけん対戦
3回連続で勝利するとファンファーレがなって終了

■外観
![junken.GIF](https://qiita-image-store.s3.amazonaws.com/0/71746/e8c8875a-588f-a841-b70d-5a27112b17a2.gif)


■製作した感想
・回路を作るのが大変だった
・プログラムを書くのに３日ぐらいかかった
・３回かったらスペシャル音楽が鳴るようにした

■ハードウェア
IchigoJam
ボタンx3(自分のじゃんけんの手を選択)
LEDx3(CPUのじゃんけんの手を表示)

■プログラム
![source.GIF](https://qiita-image-store.s3.amazonaws.com/0/71746/b8ad44c1-a750-97e8-8901-5ac423e2f689.gif)

■PCNこどもプロコン2016
http://pcn.club/contest/contest05.html
canvas 要素が実 DOM に存在するときしか HTMLCanvasElement.captureStream の MediaStream が発生しない問題

# canvas 要素が実 DOM に存在するときしか HTMLCanvasElement.captureStream の MediaStream が発生しない問題

HTMLCanvasElement.captureStream を使えば canvas 上のアニメーションから MediaStream を作ることができる。

しかし、 GoogleChrome 55.0.2883.95 (64-bit) で確認したところ、
対象となる canvas が実 DOM 上に存在しない場合 MediaStream が止まってしまう。
`display: none;` もダメである。

## サンプルコード

https://jsfiddle.net/zsrchm7d/1/

```js
const ctx = document.createElement("canvas").getContext("2d");
const cnv_stream = ctx.canvas.captureStream(60);
const url_cnv = URL.createObjectURL(cnv_stream);
const video_cnv = document.createElement("video");
let flag = true;

ctx.canvas.width  = 400;
ctx.canvas.height = 300;

video_cnv.src = url_cnv;
video_cnv.controls = true;
video_cnv.play();

document.body.appendChild(video_cnv);

setInterval(renderer, 1000/5);
setInterval(toggle, 3000);

function renderer(){
	ctx.canvas.width = ctx.canvas.width;
  ctx.arc(
  Math.random()*ctx.canvas.width,
  Math.random()*ctx.canvas.height,
  10, 0, 2*Math.PI);
  ctx.fill();
}

function toggle(){
  if(flag) document.body.appendChild(ctx.canvas);
  else     document.body.removeChild(ctx.canvas);  
  flag = !flag;
}
```

## 原因

canvas でのオフスクリーンレンダリングをキャプチャできないのは問題である。
おそらくバグだと思うが確認を取っていないため不明である。

## 対処法

`visibility: hidden;` を使う。大きさを持つので `width: 0%;` も併せて使う。

https://jsfiddle.net/zsrchm7d/2/

```js
const ctx = document.createElement("canvas").getContext("2d");
const cnv_stream = ctx.canvas.captureStream(60);
const url_cnv = URL.createObjectURL(cnv_stream);
const video_cnv = document.createElement("video");
let flag = true;

ctx.canvas.width  = 400;
ctx.canvas.height = 300;

video_cnv.src = url_cnv;
video_cnv.controls = true;
video_cnv.play();

setInterval(toggle, 3000);
setInterval(renderer, 1000/5);

document.body.appendChild(video_cnv);
document.body.appendChild(ctx.canvas);

function renderer(){
	ctx.canvas.width = ctx.canvas.width;
  ctx.arc(
  Math.random()*ctx.canvas.width,
  Math.random()*ctx.canvas.height,
  10, 0, 2*Math.PI);
  ctx.fill();
}

function toggle(){
  if(flag){
  	ctx.canvas.style.visibility = "";
    ctx.canvas.style.width = "";
  }else{
  	ctx.canvas.style.visibility = "hidden";
    ctx.canvas.style.width = "0%";
  }
  flag = !flag;
}
```
SquashTMことはじめ。

こんにちは、@miwakaiです。
Acroquest Technologyで品質保証・テストエンジニアをやっています。
[ソフトウェアテスト Advent Calendar 2016](http://qiita.com/advent-calendar/2016/softwaretesting)の20日目です！
最近社内導入したSquashTMというテストマネジメントツールについて、お話しします。

#なぜテストマネジメントツールを導入したのか？
　今までAcroquestはテストケースはExcelで管理していました。**が、**
　案件が受託開発や大規模開発から、サービスやプロダクト開発が中心となり、
　頻繁にリリースが入るようになりました。

　そうして**短期でテストを繰り返し実施**するようになったことで、
　テストの状況も変わってきたのです。
　これまでのように、確定した仕様をもとにテストを行う、ということではなく、
　**開発と並行してテストケースを育て**、品質を向上する必要が出てきました。

　そうなったとき、Excelでのテストケース管理では限界がありました。
　ということで、テストマネジメントツール導入に舵をきりました！
![problem.PNG](https://qiita-image-store.s3.amazonaws.com/0/151557/1de148ea-53c3-a855-443d-92bf152c008c.png)



#なぜSquashTMにしたのか？
　数多のテストマネジメントツールがあるなか、なぜSquashTMかというと・・・

　　1. Webでテストケースを管理できるから、テストケースのメンテナンスが容易。
　　　 会社として一元管理なんかもできる！

　　　「あのテストケースどのExcelだっけ～」という会話が不要になり、
　　　「結局ログイン機能ってどのツールでも試験するんだから、
　　　　会社として共通のテストケース持ってればいいじゃーん」が実現できました。

　　2. Excelのエクスポート・インポートができる
　　　 過去資産（Excel）を流用でき、導入コストが抑えられます。

　　3. 画面がモダン！シンプル！
　
　という理由からです。ちなみに、最終決戦は TestLink vs SquashTMでした。

　SquashTMは4つのWorkSpaceがあり、これらを順につかうことで、テストを進めます。

![workspace.PNG](https://qiita-image-store.s3.amazonaws.com/0/151557/9fcc1cfd-83f0-5bbe-5256-f36bba62154c.png)

#DashBoardはホント、いいです

　わたしが一番気に入っているのは、このDashBoard機能です！
　![report.PNG](https://qiita-image-store.s3.amazonaws.com/0/151557/2289604e-5fa9-59c9-6b75-aea9a87341dd.png)

　自動でテスト結果を集計してくれます。
　面倒くさがりなわたしは、Excelでの集計や分析から解放され、
　これだけでかなり助かっています。
　遅れや問題にも気づきやすくなりました。ふぅ。

　また、円グラフの赤い部分、テスト失敗（failure）をクリックすれば、
　不具合項目が抽出されてくるのもホントに便利。
　![feedback.PNG](https://qiita-image-store.s3.amazonaws.com/0/151557/0f97e898-14e8-e28e-b2ea-1d52f806c12c.png)

　プロジェクトリーダーから、「テストの傾向教えて～」とか急に言われても、慌てたりしません。
　DashBoard見せながら「ここら辺が心配ですね～」と話がすすむ！これはうれしかったです。

#さいごに宣伝させてください

　ということで、テストマネジメントツールSquashTMについてお話ししてきたのですが、
　一番**「導入して本当によかった」**と感じたポイントについては、
　JaSST Tokyo2017でお話しさせていただけることになりました。

　2/3（金）の事例発表のセッションで
**「テストマネジメントツールSquashTMを利用した継続的テスト改善」**というタイトルで
　お話しさせていただきます。
　ご興味持たれた方はぜひお越しください！よろしくお願いします！
大人向けにも良さそうだなと思った子ども向けプログラミング学習サービス

はじめまして。のあぴーといいます。
今までプログラミングを何度かやろうとしてきたのですが、そのたびに挫折してきました(´・ω・｀)
なぜ挫折してきたかというと、以下のような理由がありました。

1. 本や動画サイトで学習をしようとしたものの、網羅的過ぎて分量が多すぎる
2. プログラミングのイメージがつかめない
3. 作りたいものはあるが、いざとなると作りたいもののイメージが壮大すぎて何から手を付けていいかわからない（調べ方もよくわからない）

そこで今回色々調べたところ、いくつかのステップに分けるのがいいということがわかりました。
【参考書籍】[プログラミング入門講座](https://www.amazon.co.jp/dp/B01LWOV92A)

この本によると、次の流れで学習を進めるのがいいそうです。
1. プログラミング学習サービスや教材アプリを利用する
2. ワークショップやスクールに参加する
3. 書籍やネットの情報で学習する

確かにこれまで、最初から書籍で網羅的にやっていたのですが、もっとスモールステップに分けて、しかもゲーム感覚で、書いたコードの結果を手軽に確認できるような環境のほうが手軽で、プログラミングのイメージがつかめるようになるかもしれません。これなら、作りたいもののことを考えなくても進めていけそうです。

プログラミング学習サービスには次のようなものがあるそうです。
[Hour of code](http://hourofcode.jp/)
・無料
・日本語あり
・4歳以上からできる
・アナと雪の女王とかマインクラフトなどの見た目が楽しい
・ブロックを組み合わせるようにしてプログラミングできる（中身はJavascriptらしい）
・CodeStudioという上級生用のコンテンツでは実際にJavascriptをいじる

[Lightbot](https://lightbot.com/)
・スマホアプリもあるのでどこでもできる
・数百円で利用できる（無料版もある）
・英語しかない　→　（12/21訂正　日本語版もできてました。）
・キャラクターがかわいい（主観）

[Scratch](https://scratch.mit.edu/)
・MITが作ったビジュアルプログラミング言語
・無料
・日本語あり
・オフライン版もある
・他の人が作ったプログラムもアレンジしたりして楽しめる
・ScratchJrというタブレット用の姉妹版もある

[Codemonkey](https://codemonkey.jp/)
・30面までは無料、以降は年5,040円
・日本語あり
・CoffeeScriptを使用する
・中学生以上が対象

これらは小学生とか中学生を対象にしているものなのですが、大人でも基本は変わらないわけですし、むしろすぐに挫折したり投げ出したりしてしまう子供向けだからこそ、飽きさせないような工夫や、挫折させないような工夫がしてあって、大人向けでもやりやすいなと思いました。

ここに挙げた4つのうち上3つは、プログラミング言語を意識せず、文字を打つのではなくプログラミングをしていく形式です。まるでレゴを組むようにそれぞれの部品を組み合わせていって一つ一つの課題をクリアしていくという形式になっています。
一番下のCodemonkeyに関しては、最初から実際にコードを入力していくので、若干敷居は高くなっているようにも感じますが、挫折しないぐらいのスモールステップになっているのでやりやすいです。
わたしは今、とりあえずCodemonkeyからやってみています。30面まで1時間ぐらいであっさり終わったので、あっさり5,040円課金。45面まで来ましたが、徐々に難しくなってきました。
今まで幼児向けや子供さんむけのプログラミング学習サービスをナメていたところがあったのですが、わたしにはこっちのほうが続きやすい感じがしています！
またこれが終わったら色々と考えてみたいと思います。
項書き換えマクロで最適化


Nimの特徴的な機能である項書き換えマクロ(English: term rewriting macro)についてです。

# 項書き換えマクロとは

項書き換えマクロについては知らない方も多いかと思います。  
他の言語にはあまり見られない機能で、自分が確認している言語はNim以外ではCommon Lisp(コンパイラマクロ)とScheme(一部の処理系)ぐらいしかありません。(この言語にも項書き換えマクロあるよ！という方はコメントで教えてもらえると嬉しいです。)  
項書き換えマクロは、項を書き換えるマクロで、項とは式などの構成要素を指す言葉です。  
すなわち、私の解釈では項書き換えマクロはプログラムの構成要素自体を書き換えてしまうマクロになります。  
なんでこんな機能があるの？と思われる方も多いかもしれませんが、これが特定の領域になると力を発揮します。  
その特定の領域とは**最適化**です。

Nimの項書き換えマクロの基本的な使い方としては、複数の呼び出しを１つの呼び出しとしてまとめたり、引数によってそもそも呼び出す関数を書き換えたりする際に使います。  
こういった最適化は通常コンパイラが行うものではありますが、Nimではこれをユーザーレベルで行うことが可能です。

# 実例

まず、分かりやすい例として、引数が定数である場合に最適化を施してみます。  
以下のコードは公式にある部分評価のコードを参考にしました。(<http://nim-lang.org/docs/manual.html#term-rewriting-macros>)

```nim
proc p(x, y: int, cond: bool): int =
  result = if cond: x + y else: x - y
```

上記の関数は、引数がtrueであった場合に加算、falseであった場合に減算するという関数です。  
非常にシンプルな関数でこれ以上最適化の余地がないように思えますが、特定のケースにおいて大きな無駄が発生します。  
その特定のケースとは引数のcondが定数の場合です。condが定数の場合、ifによる場合分けはコンパイル時に解決できるはずですが、この関数では愚直に実行時にいちいちifによる分岐が発生しています。  
今回はこの関数を項書き換えマクロを使って最適化してみます。

```nim
template optP1{p(x, y, true)}(x, y: untyped): untyped = x + y
template optP2{p(x, y, false)}(x, y: untyped): untyped = x - y
```

上記のコードが項書き換えマクロの一例です。テンプレート名の後の波括弧でASTベースのマッチングを行い、一致する場合テンプレートで置き換えるということをしています。  
この例では、上記の関数`p`の引数`cond`が定数であった場合にif文を除去するということをしています。

# ベンチマーク

最適化を実感するために上記の関数`p`を最適化した場合と最適化していない場合のベンチマークをしてみました。  
時間の計測にはNimの標準ライブラリにある`times`モジュールを使用しています。

```nim
# not optimized
import times

proc p(x, y: int, cond: bool): int =
  result = if cond: x + y else: x - y

let starttime = epochTime()
for i in 0..<100000000:
  discard p(10, 20, true)
let endtime = epochTime()
echo endtime - starttime
```

```nim
# optimized
import times

proc p(x, y: int, cond: bool): int =
  result = if cond: x + y else: x - y

template optP1{p(x, y, true)}(x, y: untyped): untyped = x + y
template optP2{p(x, y, false)}(x, y: untyped): untyped = x - y

let starttime = epochTime()
for i in 0..<100000000:
  discard p(10, 20, true)
let endtime = epochTime()
echo endtime - starttime
```

筆者の環境

|Type|Name|
|:--|--:|
|OS|Windows 10 Home|
|CPU|Intel Core i7-6700|
|GPU|AMD Radeon RX480|
|マザーボード|ASUSTek H170-PRO|
|メモリ|DDR4 8x2=16GB|
|Nim version|0.15.2|

一応念のためGPUも書きました。

結果は以下の通りになりました。

|Type|Second|
|:--|--:|
|not optimized|1.8s|
|optimized|0.63s|

多少分散はするものの、自分の環境ではおおむね上記のようになりました。

# まとめ

Nimの項書き換えマクロはコンパイル時実行と合わせて非常に強力になっています。  
ASTベースオーバーロードと組み合わせて、引数がリテラルもしくは定数の場合にのみ最適化するといったことも可能です。  

Nimはこういった自動で最適化したり、自動でボイラープレートを生成するといった、プログラム自体を自動で扱うといったことが得意な言語と感じます。  
基本的な機能にしぼって考えれば使用感は割とGoに似ていると感じますが(deferなど)、Goがシンプルでソースコードそのままに動くということを哲学にしているのに対して、Nimは自動最適化などプログラムを速度、そして自動化で無駄を省くなど最大限まで効率化するということを哲学にしているように感じます。

非常に面白い言語だと思うので、気になった方は是非試してみてください。
mocha + Vue.nextTick（）

小ネタ

```ts
import * as Vue from "vue";

function nextTick() {
    return new Promise(Vue.nextTick);
}

describe("sample test", function () {
  it("async test case", async function () {
    const vm = new Vue({ ... }).$mount();
    // check something
    await nextTick();
    // check something after Vue.nextTick()
  });
});
```

* async functionを渡すときは `function(done) { ... }` みたいにdoneを渡してはだめ
* async / await えらい
子育てエンジニアの小さな願い

# はじめに

妻と先月２歳になった娘が一人の、合計三人家族です。
そんな私には将来こんな感じの父親になりたいなという小さな願いがいくつかあります。

# 願い

### 子供と一緒に勉強を楽しむ

技術的なスキルを磨くため、また技術の進歩やトレンドをキャッチアップしていくためには日々の勉強は欠かせませんよね。
それに私は、自分にとって新しいことを吸収している時間が最も楽しく、何か出来上がるようなものなら快感がほとばしります。
そして、もしかしたら、子供が小学生くらいの年齢になると、家では宿題なんてものをやり始めたりするのかもしれない。
そんな時に一緒になって勉強出来るような父親になりたいです。
小学生の頃なんてなんのために勉強するんだろうってずっと思ってましたが、父親が自分の成長のために隣で必死こいて勉強してたら、もしかしたら勉強することを好きになってくれるかもって思っています。
別にテストでいい点数とって欲しいとかではなく、純粋に学ぶことの楽しさを感じて欲しいなと思っています。

### エンジニアリングで日常を楽しくしたい

別記事にも投稿しましたが、ちょっとしたアイデアで日常生活がほんの少し便利になったり、くすっと笑えたりするような開発をしていきたいです。
そんなこんなで、子供も「なんかお父さんすごい簡単そうにやってるしもしかして私にもできるんじゃ」なんて思ってくれたら嬉しいです。
子ども教育でプログラミング必須とかありますが、そういうのは子どものものづくりの選択肢が増えてとてもいいなと思っています。
私は小学校の図工の授業で謎のオブジェを作るのも楽しかったし、家庭科の授業でお昼ご飯を作るのもとても楽しかった記憶があります。
日常生活においては、家にある厚紙で模型を作って父親に褒められたり、卵焼き作って母親に褒められたりしたのが嬉しかったです。
そんなノリで、子どもが家にあるPCでAIのボットを作って会話して楽しんでるのを私が褒めるみたいな構図ができればいいなと思っています。
特に子どもにエンジニアになって欲しいとは思っていませんが、プログラミングを好きになってくれてお父さんすげーって思ってくれたら最高です。

# 最後に

これからプログラミングがものづくりの手段として一般化されていくであろう状況の中で、私がエンジニアであるということが子どもにとって少しでもアドバンテージになればいいなと祈っています。
今日も子どもの寝顔が見れて幸せな親バカのポエムでした。
Tab Bar Controllerのストーリーボードをタブごとに分割する

iOSではおなじみのタブを使ったインターフェイス。これはTab Bar ControllerとStoryboardを使えば、ノンコーディングで簡単に実装できます。

![スクリーンショット 2016-12-19 22.32.13.png](https://qiita-image-store.s3.amazonaws.com/0/75307/e6076c4e-a2d6-dea2-92d1-5d6d7424b3bd.png "スクリーンショット 2016-12-19 22.32.13.png")

ただ、タブごとの遷移が増えてくるとストーリーボードがとても込み入ってきて、git管理などしているとコンフリクトを起こす危険性も高まります。そこでストーリーボードのメリットは生かしつつ、ストーリーボードをタブごとに分割する方法について考えてみます。

サンプルソースはこちら
https://github.com/nakaken0629/SeparateTabSample

# Storyboard referenceを使う（iOS 9以降)

Storyboard referenceを使うと、ノンコーディングでタブごとにStoryboardを分割することができます。
まず、各タブごとにストーリーボードを作ります（例：Sub1.storyboard, Sub2.storyboard）。親のTab Bar Controllerと結ばれるViewControllerをinitial view controllerとします（Is Initiali View Controllerにチェックを入れる）。

![スクリーンショット 2016-12-19 22.33.16.png](https://qiita-image-store.s3.amazonaws.com/0/75307/4afc56e7-6de7-eb05-52be-4cf3aa665a01.png "スクリーンショット 2016-12-19 22.33.16.png")

次に、メインのストーリーボードにUITabBarControllerをベースにしたViewControllerを作成します。タブごとにStoryboard refenreceを作成して、結合します。Storyboard refenreceは、先に作ったタブごとのStoryboardと連携します。

![スクリーンショット 2016-12-19 22.32.52.png](https://qiita-image-store.s3.amazonaws.com/0/75307/1e6f18ba-d1d4-c1fd-1b76-22479daaa062.png "スクリーンショット 2016-12-19 22.32.52.png")

これで完成です。

この実装の問題点は、iOS 9以降からでないと使えない点です。ただ、最近はiOS 9のシェアも90%以上あるようなので、割り切ってしまうのもアリかもしれません。

# コードで実装する（iOS 9以前）

iOS 9より前のバージョンでStoryboardを分割したい場合には、Storyboard referenceを使わずに、コードで実装する必要があります。実装手順は次の通りです。

1. Tab Bar ControllerのCustom Classに、UITabBarControllerを継承した独自クラスを指定する
2. 上記独自クラスにSub1.storyboardとSub2.storyboardのViewControllerを設定する

コードは以下の通りです。

```swift:MainTabBarController.swift
import UIKit

class MainTabBarController : UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 各タブのViewControllerを取得する
        let names = ["Sub1", "Sub2"]
        
        // 手続き型の言語っぽく書いてみた
        var viewControllers = [UIViewController]()
        for name in names {
            let storyboard = UIStoryboard(name: name, bundle: nil)
            if let viewController = storyboard.instantiateInitialViewController() {
                viewControllers.append(viewController)
            }
        }
        setViewControllers(viewControllers, animated: false)
    }
}
```

`UIStoryboard.instantiateInitialViewController`メソッドは、対象のストーリーボードで、InitialViewControllerとして指定されたView Controllerのインスタンスを取得します。
`UITabBarController.setViewControllers`メソッドは、Tab Bar ControllerにタブとしてView Controllerを追加します。

## コードのリファクタリング

Swiftにはリスト操作に便利な構文やメソッドがあります。それを使って、タブを追加する処理をワンライナーで書いてみました。

```swift:MainTabBarController.swift
import UIKit

class MainTabBarController : UITabBarController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 各タブのViewControllerを取得する
        let names = ["Sub1", "Sub2"]
       
        // Swiftらしくワンライナーで書いてみた
         setViewControllers(names.flatMap { UIStoryboard(name: $0, bundle: nil).instantiateInitialViewController() }, animated: false)
    }
}
```
【VBA】チェックボックスのステータスを確認する


Excelでフォームコントロールから追加した「チェックボックス」のステータスを確認をVBAで実現する方法。
なお、今回は複数のチェックボックスをFor文を使用して確認する方法を紹介する。

--
## 1.フォームコントロールから追加したチェックボックスとは？

Excelの[開発]タブ＞[挿入]＞[フォームコントロール]から追加することができるチェックボックス。
VBAでチェックボックスのステータスを判定し、様々な処理を行うことができる。

![0001.png](https://qiita-image-store.s3.amazonaws.com/0/33479/b7a564d6-5cf2-0b82-0995-606b536ca914.png "0001.png")

![0002.png](https://qiita-image-store.s3.amazonaws.com/0/33479/e1074620-c7d1-a3d5-080b-5e8014e71bbc.png "0002.png")


チェックボックスのステータスは、「TRUE」と「FALSE」の値で取得することができる。

--

## 2.ステータスや項目名はどうやって取得するか？

私がよく使う方法は、次の2つの方法です。

### ①プロパティ画面から確認する

![0003.png](https://qiita-image-store.s3.amazonaws.com/0/33479/d648dacf-f840-33a1-c1ba-9fb4db23b61b.png "0003.png")

「コントロール」を「デザインモード」に変更し、ステータスを確認したいチェックボックスを選択する。
チェックボックスを選択した状態で、右クリックし、プロパティを選択する。


### ②VBAでプラパティを確認する

以下のコマンドで情報を確認する。

````コマンド
Sub test()

    'value ( true or false ) 取得
    rc = ActiveSheet.checkbox1.Value
    MsgBox rc

    'caption取得
    rc = ActiveSheet.checkbox1.Value
    MsgBox rc


End Sub
````

--

## 3.チェックボックスが複数ある場合に使えるknowledge

チェックボックスを大量に使用する場合など、ステータスや項目情報を取得するために、
1つ1つ手動で対応するのは非効率的である。
下記の方法で、効率的（楽に）情報を取得することができる。

````コマンド
Sub test()

    Dim i, n As Long

    With ActiveSheet
        For i = 1 To n
            With .OLEObjects("CheckBox" & i).Object
                rc1 = .Value
                rc2 = .Caption
            End With
        Next i
    End With

End Sub
````
TOPPERSをもっと使ってみよう

本記事は [ETロボコン Advent Calendar](http://qiita.com/advent-calendar/2016/etrobo) の20日目の記事です。

# はじめに
7日目の[２年目のETロボコンに向けてプラットフォームの知識を深めよう](http://ylgbk.hatenablog.com/entry/2016/12/07/004158)の記事でTOPPERSの仕様書を読むことを薦められてましたね。

TOPPERSを使ってることを意識してなかったという人もいたのではないでしょうか？理解するには実際に動かしてみるのが一番！ということで、sample1を試してみましょう。
sample1とはTOPPERSには必ずついている、カーネルの基本的な動作を確認するためのサンプルプログラムです。詳しくはsampleフォルダ内のsample1.cのコメントを参照してください。

大会も終わってEV3が自由に使える人も限られているでしょうから、手持ちのPCと安価なボードで動作させることを前提としてみました。

# ASPを試そう

ETロボコンで使用していたのはEV3RTという[HRP2カーネル](https://www.toppers.jp/hrp2-kernel.html)をベースにしたものでした。HRP2カーネルは、ASPカーネルにメモリ保護機能の追加をはじめとするいくつかの変更がなされたものです。TOPPERSの開発しているカーネルはASPカーネルがベースになっているものが多いので、今回は汎用性も考慮してASPカーネルを使ってみることにします。[^fn1]

## NUCLEO-F401REを使う

入手しやすい安価なボードとして、NUCLEO-F401REがあります。
NUCLEO-F401REは今なら[秋月電子の通販](http://akizukidenshi.com/catalog/g/gM-07723/)で1800円で売っています。
TOPPERSが対応しているボードの中で一番お手頃なので選んでみました。

### Windowsの場合
[NUCLEO-F401RE で TOPPERS/ASP(RTOS)を動かす](http://qiita.com/exshonda/items/bf691541526975b8f78c)という記事がQiitaにあります。

### Macの場合
Windows版を参考に[NUCLEO-F401REでTOPPERS/ASPを動かす(Mac+Eclipse版)](http://qiita.com/yurie/items/7bfe88d657bbbacc63c8)という記事をQiitaに作ってみました。

# 参考）他の方法で試すには
上記ボードが個人的にはお薦めですが、手持ちのものがあったり、PCだけで試したいなど他の方法で試してみたい方向けに他の方法も簡単に紹介しておきます。

## WindowsとGR-PEACHで動かす
[GR-PEACH で TOPPERS/ASP(RTOS)を動かす](http://qiita.com/exshonda/items/3742799cbc648e0505f7#_reference-300ba53be9bbbf1e04cb)
上記「NUCLEO-F401RE で TOPPERS/ASP(RTOS)を動かす」のGR-PEACH版です。

## PC本体だけでなんとかする

### Windowsの場合
直接Windows上でASPカーネルを動かすものは提供されていませんが、Skyeyeシミュレータ簡易パッケージがダウンロードページにあります(私は試してみていませんが)

### Macの場合
[TOPPERS/ASPカーネル簡易パッケージのダウンロード](https://toppers.jp/asp-e-download.html)には「Mac OS X用シミュレータ簡易パッケージ」があります。ただ、こちらは開発環境がGCCとなっています。最近のMacはClangのため、別途gccをインストールする必要があります。なので、後述のASP3を使用する方がよいでしょう。（新しいし :smile: ）

## ASP3を試す
TOPPERSには、ASPカーネルを拡張・改良した[ASP3カーネル](https://www.toppers.jp/asp3-kernel.html)があります。
当初本記事はASP3を紹介しようと思っていましたが、手頃なボードに移植されていなかったので（移植して紹介する時間もなかったし）ASPの紹介記事としました。

カーネル開発者がMacを使用されているためか [TOPPERS/ASP3カーネル簡易パッケージのダウンロード](https://toppers.jp/asp3-e-download.html)にはXcode対応のMac版があるのでMacで手軽に試してみたいならGCC対応のASPよりClang対応のASP3の方がお手軽かと思います。

また[上記URL](（https://toppers.jp/asp3-e-download.html）)には、「GR-PEACH簡易パッケージ」というのもあります。GR-PEACHが手元にあるなら、こちらを利用してみるとよいでしょう。

さらに、TOPPERSのサイトではありませんが、Raspberry Pi版も公開されています。手元にあるなら、こちらで試してもよいですね。
[Raspberry PiでTOPPERS(TRON系OS)](http://domisan.sakura.ne.jp/article/rp_toppers/rp_toppers.html)


# 終わりに

本記事ではsample1を動かすための環境の紹介にとどまっていますが、ぜひボードを使ってセンサーやモーターを動かしてみてください :smile: 。

[^fn1]: もちろんHRP2のターゲットボードが手元にあれば試してみるのもよいでしょう。
EXCEL2016はaccdbファイルを作ってテーブルが作ることができる

##前回から発展する
[EXCEL2016はMDBファイルを作ってテーブルが作ることができる](http://qiita.com/Q11Q/items/d3a21de0e7d7a1fcf9f5)
ということがわかったので次はaccdbファイルを作ってみましょう

##環境
Office 2016 64bit + Win 10 HOME

##前提

![image.png](https://qiita-image-store.s3.amazonaws.com/0/126919/de2cdd1c-8688-539e-d305-2678940a2337.png)

Listというシートを作り、全部長整数型の数字（小数点がない）
ものを作ります。

Gapは差なのですが、式は入っていません。ここはVBAで計算して差を値だけ入れるためです。
なんでそんなことをしているかというと、13000行を超えているので計算式を入れていると遅くなるからです。
ここはsqlを作成する場合0を補う必要があります。

　そして、HPにもあるように該当するエクセルファイルのあるフォルダにDBというフォルダを作り、sample.accdbというファイルを作ります。既存のファイルがあれば、それを削除します。

##参照設定
今回は参照設定を新しいものに変えてみます
Microsoft ActiveX Object Libraly 6.1
Microsoft ADO Ext for DDL and Security

##コードを変えるところ
前回Excel2016に変えるときに接続文字列が変わりました。
すると今回、変えるところがありません。
しいて言うならファイル名を変えます


```VB:makeaccdb.vb
Const cnsTitle = "AccDbの作成(ADOX)"
'///////////////
Const cnsMDB_FILE = "\SAMPLE.mdb"
Const cnsAccDB_FILE = "\SAMPLE.accdb"
Const cnsConnect1 = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source="
'///////////////
'Const cnsConnect2 = ";Jet OLEDB:Engine Type=5;"
Const cnsSH0 = "設定"
Const cnsSH1 = "テーブル"
Type typKey
    KeyName As String
    KeyIdx As Integer
End Type
'■iniﾌｧｲﾙ読込み(String)
Private Declare PtrSafe Function GetPrivateProfileString Lib "KERNEL32.dll" _
    Alias "GetPrivateProfileStringA" ( _
    ByVal lpApplicationName As String, _
    ByVal lpKeyName As String, _
    ByVal lpDefault As String, _
    ByVal lpReturnedString As String, _
    ByVal nSize As Long, _
    ByVal lpFileName As String) As Long
```

##以下略
あとは変えるところは1行しかありません
    ' MDBは本ブックのフォルダの配下にある「DB」フォルダに作成
    strMDB = strDB_Path & cnsMDB_FILE

ここを
    strMDB  = strDB_Path & cnsAccDB_FILE
にすると完成です。

##最新版の参照設定でMDBも作れる。
それではこのままですよ、strMDB = strDB_Path & cnsMDB_FILE
としたままだとどうなるのでしょうか
mdbファイルが作れます。
実は参照設定をわざわざ古いバージョンにする必要もないのです。


##比較してみよう
まあ一回かやらないので統計的な厳密さはないのですが、意外とaccDBの方が出来上がりが早く、MDBよりファイルサイズも小さくなりました。これはデータの種類にもよるのかもしれません。
しかしこのように自分で比較ができるというのは面白いと思います。ベンチマークにも使えるのではないでしょうか。

　CSVはマクロではなく名前をつけて保存からCSVに保存しています。


| ファイル形式     |   MDB             |    accdb   |  CSV　  |
|:-----------------|------------------:|:----------:|:--------:|
| ファイルサイズ   |           564 KB  |   456 KB   |   168 KB   |
| 作成時間         |           3:49    |   2:46     | 　 　　　　|
転職して業界が変わっても役に立った経験

この記事は、[Happy Elements株式会社 カカリオスタジオ Advent Calendar](http://qiita.com/advent-calendar/2016/hekk_cacalia_studio)21日目の記事です。
担当はエンジニアの@mdnです。よろしくお願いします。

## 前置き
はじめまして、こんにちは。
最近、Happy Elements株式会社カカリオスタジオに入社しました@mdnと申します。
前職では Objective-C や Java を使用したクライアント開発を担当しておりました。

会社が変わり、業界が変わり、使用する言語も全く変わりましたが、それでもなお役に立つ経験があります。
この記事では、転職しても役に立ったと感じた過去の経験について振り返ってみたいと思います。

## 一つの言語を深く勉強した経験
![computer_hacker_white1.png](https://qiita-image-store.s3.amazonaws.com/0/28546/0d48b0e4-b2d6-e896-9cc0-449aaacb454a.png)

自分の場合、一番長く勉強した言語はC++でした。なので、一番好きな言語もC++です。
最近はあまり触ることがなくなったのですが、トータルで10年間は勉強していることになります。
ポインターのなんたるかから始まり、STL、boost、vtbl、呼び出し規約、アセンブラ、テンプレートメタプログラミングなどなど、~~無駄なことばかり~~色々勉強してきました。

**いまだに業務で使用したことはありません**

しかし、業務で使用していないからと言って、勉強したことが全て無駄になったということは無く、考え方や機能は他の言語の学習でとても役に立ちました。ポインターを知っていれば参照は簡単に理解できますし、ジェネリクスは機能限定版テンプレートです。

モダンな言語は、お互いに良い部分を取り入れているので、一つの言語を深く知っていると、他の言語を学習する際にも役に立ちます[^1]。

## 様々な言語に少しずつ触れた経験
![daidougei_juggling.png](https://qiita-image-store.s3.amazonaws.com/0/28546/e4922e67-4aa9-d176-7f90-59c7a7359921.png)

先ほどとは逆に、色々な言語に触れていた経験も役に立ちました。コアな仕様まで深く学習しようとすると、時間がかかりますが、頻繁に使用される部分だけならそれ程時間はかかりません。

自分の場合、もともと勉強してはいたけど、業務で使用したことが無い言語は、C++, C#, Python, Ruby がありましたが、**4個中2個がいきなり役に立ちました**:tada:[^7]。

様々な言語を学習しておくことで、その言語が必要になった時により早くキャッチアップできますし、別の言語を学習する際の手助けにもなります。これは言語の学習に限った話ではなく、技術の習得にも言えると思います。

## 一つのアプリケーションを一貫して開発した経験
![kouji_tokkankouji.png](https://qiita-image-store.s3.amazonaws.com/0/28546/8f80ad47-0693-7a93-e56e-326990d4dd1f.png)
前職では、初期段階から開発に関わる機会を得られました。規模があまり大きくなかったことも幸いし、様々な試行錯誤し、その結果失敗することも多かったです。リファクタリングをしたり、新しい技術を取り入れてみたり、別の言語を導入したりもしました。比較的若いうちにこのような機会が得られたことは、今となってはとても貴重な経験だったと感じています。

## 無茶な納期に追われた経験
![business_zangyou.png](https://qiita-image-store.s3.amazonaws.com/0/28546/738cc635-ccf6-7bac-40d2-423d2887e628.png)
**精神的にタフになれました**

## 最後に
色々と書いて来ましたが、何かに対して真摯に取り組んだ経験と言うのは、いつか身を助けてくれるものだと信じています。まだまだ、周りのスーパーなエンジニア達に圧倒されていますが、早く自分も力になれるよう精進して参りたいと思います。

稚拙な文章ですが、最後まで読んで頂きありがとうございました。

[Happy Elements株式会社カカリアスタジオ](http://cacalia.jp)ではエンジニアを募集しています。
興味がある方は[こちら](http://www.happyelements.co.jp/recruit/)からご応募ください。

[^1]: C++はモダンな言語に分類されるのだろうか？
[^7]: C++が役に立つ日を切に願っております。
【MySQL】EXPLAINによるindex付与

※作成途中のため参考にしないでください！

### typeとextraをみる

1.type

･index使われている
const：PKまたはUNIQUEインデックスで等価検索（最速）
eq_ref：joinでPKまたはUNIQUE KEYが利用されている。
ref：PKまたはUNIQUEインデックス以外のインデックスで等価検索
range：インデックスを利用した範囲検索

･チューニング必須
index:インデックス全体をスキャン
all:インデックス利用されていない

2.extra
･完璧
Using index：インデックスのみ
Using index for group-by：MIN()/MAX()がGROUP BY句と併用されて、インデックスのみ

･解決の余地あり
Using where：インデックス以外も使用

･チューニング必須
Using filesort:テンポラリーテーブル作成。あまり良くない。
Using temporary:ファイル使ったソート。かなり良くない。

### インデックスずれてる？
possible_keysが候補のkeyで、keyが選択されたkey
何が使われているか確認する