カメ飼ってる新米エンジニアの覚書き

とにかくカメがかわいい

jsでbreakを思ったところに返す

break labelというものを初めて知ったのでメモ。

LABEL_NAME: {
  for (var a in array) {
    if (a == 2) {
      break LABEL_NAME;
    }
  }
}

でラベルの名前をつけたところの下に抜けることができる。

ちなみにCasperJSでbreak labelをやりたかった場合、はこちらを使わせていただきました。

github.com
casper.gotocasper.labelをコピペしてきて、こんな感じ

casper.label("LABEL_NAME");

for (var a in array) {
  if (a == 2) {
    this.goto("LABEL_NAME");
  }
}

Nuxt.jsにcanvasを追加してみた

github.com

pocchi13.hatenablog.com

をVue.jsのNuxt.jsに移行してみました。

なんとなくテンプレートでcreatedを使用してしまうんですが、
ライフサイクルをぜんぜん理解していなかったため、クライアントサイドのjsを動かそうと思ってつまづいていました。

ライフサイクル
vuejs.org

createdbeforeCreatedはクライアントサイド・サーバーサイドの両方実行、
それ以降は全てクライアントサイドらしい。
プラグイン - Nuxt.js


github pagesで公開できるらしいので試してみました。
generate後、.gitignoreの記述を変更。(_nuxtdistがignoreされています)
upしてみましたが、_nuxtの読みこみでエラー。 -設定の変更が必要かも。- f:id:pocchi13:20170518013053p:plain

リポジトリ名がユーザー名と同じになっていなかったためでした。

LT会で発表してみました。

https://www.slideshare.net/secret/goZj0bHG9GoHXX

Canvasでランダム円弧描いてみた

ちょっとやりたいことがあったので、描いてみました。

リロードのたびにランダムで円を書きます。 サンプル画像のジェネレータを自分が使いやすいように作ろうかなと。 その制作に組み込みます。

こちらを参考にさせていただきました。

yoppa.org

canvasやっぱりお手軽で面白い。

次はVue.jsに組み込んでみようかな。

配列の後に配列を追加するのはarray_mergeでよかった(PHP)

PHPの配列マージには結構種類があって

  1. +で連結するとか
  2. arrarray_mergeとか
  3. array_merge_recursiveとか

キーが同じ配列同士の2つの配列をマージしたい場合、
$array_1 +$array_2だと、同じキーであれば$array_1に食われてしまう。  

+した場合

$array_1 = array(0=>'value0', 1=>'value1', 2=>'value2');
$array_2 = array(0=>'value3', 1=>'value4', 2=>'value5');

var_dump($array_1 + $array_2);
/* 結果
array(3) {
  [0]=>
  string(6) "value0"
  [1]=>
  string(6) "value1"
  [2]=>
  string(6) "value2"
}
*/

array_mergearray_merge_recursiveを使う

var_dump(array_merge($array_1, $array_2));
var_dump(array_merge_recursive($array_1, $array_2));
/* 結果
array(6) {
  [0]=>
  string(6) "value0"
  [1]=>
  string(6) "value1"
  [2]=>
  string(6) "value2"
  [3]=>
  string(6) "value3"
  [4]=>
  string(6) "value4"
  [5]=>
  string(6) "value5"
}
array(6) {
  [0]=>
  string(6) "value0"
  [1]=>
  string(6) "value1"
  [2]=>
  string(6) "value2"
  [3]=>
  string(6) "value3"
  [4]=>
  string(6) "value4"
  [5]=>
  string(6) "value5"
}

# array_mergearray_merge_recursiveのちがい

キーを文字列に変えてみた場合が顕著

$array_1 = array('a'=>'value0', 'b'=>'value1', 'c'=>'value2');
$array_2 = array('a'=>'value3', 'b'=>'value4', 'c'=>'value5');

var_dump(array_merge($array_1, $array_2));
/*結果
array(3) {
  ["a"]=>
  string(6) "value3"
  ["b"]=>
  string(6) "value4"
  ["c"]=>
  string(6) "value5"
}
*/

var_dump(array_merge_recursive($array_1, $array_2));
/*結果
array(3) {
  ["a"]=>
  array(2) {
    [0]=>
    string(6) "value0"
    [1]=>
    string(6) "value3"
  }
  ["b"]=>
  array(2) {
    [0]=>
    string(6) "value1"
    [1]=>
    string(6) "value4"
  }
  ["c"]=>
  array(2) {
    [0]=>
    string(6) "value2"
    [1]=>
    string(6) "value5"
  }
}
*/

var_dump($array_1 + $array_2);
/*結果
array(3) {
  ["a"]=>
  string(6) "value0"
  ["b"]=>
  string(6) "value1"
  ["c"]=>
  string(6) "value2"
}
*/

www.tam-tam.co.jp

PHP: array_merge - Manual

Nuxt(Vue)でservice workersを動かしたい

VueでちゃんとSSRしようと思ってNuxtに手を出すついでにPWAもやってみたいと思って、欲張ってやってみました。

すんごいハマったけど、なんとか

f:id:pocchi13:20170508232547p:plain

までできたのでそこまでの方法を残しておく。 (まだservice-worker.jsのエラーいっぱい出てるしこの方法でいいのかわかんないけど動いたのでとりあえず)

static/service-worker.jsを作成

とりあえずstatic/service-worker.jsを作成しておく。

github.com

とかほんとは使えるといいみたいだけど、ひとまずサンプルをコピペして作成。

サンプルコピペ元とか参考とか引用とか

www.webprofessional.jp

plugins/registerSW.jsを適当に作成

if ('serviceWorker' in navigator) {

  navigator.serviceWorker.register('/service-worker.js')

}

static以下にservice-worker.jsを置いておけば、'/service-worker.js'でアクセスできます。

nuxt.config.js の plugins キーにファイルを記述

plugins: [
    { src: '~plugins/registerSW.js', ssl: false }
  ]

sslをfalseにするとブラウザのみで動かせるって書いてありました。

プラグイン - Nuxt.js

ここまでやったら一番初めの画像まで動きます。
残りはまた後日。


mountedとかクライアントサイドのみで動作するものならstore/index.jsへの記述でいけるのかも・・

ja.nuxtjs.org

ChromeでデバイスにPort fowardingできるの知らなかった

今までローカル上で開発中にモバイル端末で確認したいとき、
browsersync
Browsersync - Time-saving synchronised browser testing
でライブリロード用にローカルサーバ立ててついでにモバイルでも確認するのが快適で良いのですが、

ポートが空いてなくてちょっとめんどくさいとか、ちょろっと確認したいだけだからもっと手軽にやりたい時。

Chromeフォワード(?)してモバイルで確認できるのを初めて知ったのでメモ。

ちなみに知ったのはPWAの記事からでした。

www.webprofessional.jp

f:id:pocchi13:20170507171029p:plain

バイスをusbでつなぎ、

developerツールの
3点のアイコン > More tools > Remote devices
でコンソールを開く。

Port fowarding にチェックを入れて
指定したいポートをaddする。

PHPの配列の値比較にin_arrayが便利

最近はフロントながらサーバーサイドも触れるというおいしい位置にいるため、 リンクの非表示などでもcontrollerでちゃんと出し分けする意識がつきました。

逆にviewだけ触っていた今までがどうなのって感じですが・・

フロントだとテンプレートにロジックを書きがちな現場です。他のところはどうなのかなぁ。

phpでレビューを受けて改善されたものを以下にメモ。

hogehogeという配列のid2と3に該当するものを除きたい場合。こう書いていました。

foreach ($hogehoge as $key => $hoge)
        {
            if ($hoge["id"] == 2 || $hoge["id"] == 3)
            {
                unset($hogehoge[$key]);
            }
        }
        return $hogehoge;

それがレビューを受けてこうなる。

foreach ($hogehoge as $key => $hoge)
    {
      if (in_array($hogehoge["id"], [2, 3]))
      {
          unset($hogehoge[$key]);
       }
    }
return $hogehoge;

配列にある値をチェックするin_array 比較が配列で書けて便利。比較値の増減にも対応が簡単。

PHP: in_array - Manual

おお!と思ったのですが、レビューからさらに変更し、controllerの処理を消してmodelで取得のidを絞りました。