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

とにかくカメがかわいい

JavaScriptで配列評価 / 全てtrueならtrue

jsのある配列の値が 全てtrueならtrue、1つでもfalseならfalseを返却してくれる var result = booleanArray.every(function(val, index, array){ return (val)}) 1つでもtrueならtrueを返却してくれる var result2 = booleanObj.some(function(val, index, a…

Vue.js Vuexのstateが配列のときgetterが変更しない

ハマったのでメモ。 vuexでstateが配列のものをgetterで返却していたのですが、stateの配列の値が変わっても変更されませんでした。 vuex/store.js const module = { state: { array: null }, mutations: { updateArray(state) { state.array[0] = '2'//arra…

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

break labelというものを初めて知ったのでメモ。 LABEL_NAME: { for (var a in array) { if (a == 2) { break LABEL_NAME; } } } でラベルの名前をつけたところの下に抜けることができる。 ちなみにCasperJSでbreak labelをやりたかった場合、はこちらを使わ…

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

github.com pocchi13.hatenablog.com をVue.jsのNuxt.jsに移行してみました。 なんとなくテンプレートでcreatedを使用してしまうんですが、 ライフサイクルをぜんぜん理解していなかったため、クライアントサイドのjsを動かそうと思ってつまづいていました。…

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

ちょっとやりたいことがあったので、描いてみました。 リロードのたびにランダムで円を書きます。 サンプル画像のジェネレータを自分が使いやすいように作ろうかなと。 その制作に組み込みます。 こちらを参考にさせていただきました。 yoppa.org canvasやっ…

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

PHP

PHPの配列マージには結構種類があって +で連結するとか arrarray_mergeとか array_merge_recursiveとか キーが同じ配列同士の2つの配列をマージしたい場合、 $array_1 +$array_2だと、同じキーであれば$array_1に食われてしまう。 +した場合 $array_1 = arr…

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

VueでちゃんとSSRしようと思ってNuxtに手を出すついでにPWAもやってみたいと思って、欲張ってやってみました。 すんごいハマったけど、なんとか までできたのでそこまでの方法を残しておく。 (まだservice-worker.jsのエラーいっぱい出てるしこの方法でいい…

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

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

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

PHP

最近はフロントながらサーバーサイドも触れるというおいしい位置にいるため、 リンクの非表示などでもcontrollerでちゃんと出し分けする意識がつきました。 逆にviewだけ触っていた今までがどうなのって感じですが・・ フロントだとテンプレートにロジックを…

CasperJsでnode-notifier が動かない

確実に勉強不足です。 CasperJsでe2eテストを書きました。 全てを実行してログをとるというよりは、実行するだけして、テストの通らないところを適宜直したい。 と思ったのですが、1つのテストが通るのが遅い。(非同期の部分のテストのため、表示を待つから…

Vuexの導入部分のカウンターのコードを書いてみた

Vuex とは何か? · GitBook 動くようにしたかったので ちょっとだけ付け足しました

vuex勉強会制作途中

完全版はこちら http://qiita.com/P0cChi/items/ebf8fbf035b36218a37e 手順 src/router/index.js ルーティングをするためのjs // `src/router/index.js` import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' //…

markdownでdiffを出す

勉強会資料で使えるかも console.log('aaa') - console.log('bbb') +console.log('ccc') Markdownでdiffを表示する。 | Ginpen.com

今日覚えたgitコマンド(git revert)

緊急対応で一時的に非公開にするみたいなことがあって、削除。 それを戻すっていう状況になった時に使ったコマンド。 コミットを1つだけにしたい場合は -n オプションをつけるって下のブログで言っていました。 対象コミットの打ち消しの差分を作ってくれま…

CasperJSで非同期部分をテストしたい

firefoxの仕様か何かで、iframeのadがうまく表示されないということがありました。 実装を非同期のものに変えたのですが、 非同期実装した広告が出ているかどうか、テストがしんどいと思い、CasperJSでE2Eテストを実装しました。 デフォルトで要素を待って実…

jsのObjectで.mapしたらはまった

//オブジェクトを作成 var tagNameArray = ["name1", "name2"]; var pushObjs = {}; tagNameArray.map(function (tagName, index){ pushObjs[index] = { "tagname": tagName, "size": "3", "id": index }; }); //勘違い実装 pushObjs.map(function (pushObj)…

ていねいにvue-cliを使った環境構築手順を書いてみる

Vue-cli環境構築 vue-cliで簡単にvue.jsの環境構築ができます。 前提条件 以下がインストールされていること node.js npm node -v npm -vでインストールされているバージョンが確認できます。 インストールしていない方はしてください。 nodeはnodebrewなど…

github dist使ってみた

github でスニペットを作成できるというdist。 ただただmarkdownで書いた勉強会用資料を、勉強会で共有したいためだけに使ってみた。 勉強会用配布資料でgithub distにたどり着くまでの流れ。 markdownでスライドが作成できる!Marpで資料を作成。 発表する…

アルゴリズムパズルを考えてみた

ルール 3 * 3マス。 1から9までの数字を当てはめて、縦、横、斜めの合計を全て同じにするよくあるタイプ。 まず、合計値を推測します 1 2 3 4 5 6 7 8 9 一番小さい値が 1 一番大きい値が 9 真ん中の値が 5 なので、1 + 9 + 5 で 15 なんじゃないかと。 奇数…

markdown-pdfを使ってmdをpdfに焼いてみた

marpを使ってプレゼン資料を作成していたのですが、 資料が重すぎるのか、ページがそこそこ増えた結果、pdfにエクスポートできなくなってしまいました。 marpが大好きなだけに辛い・・ markdownをpdfに変換するツールは他にもあるだろうということで、 npmで…

Vue.js勉強会資料作成中(その2)

Vue.js勉強会資料作成中(その1) - カメ飼ってる新米エンジニアの覚書き のその2です。 では、はじめてみましょう! Vue.jsの始め方(初心者用) htmlを作成し、CDN読み込んじゃう <script src="https://unpkg.com/vue"></script> jsFiddleってやつ https://jsfiddle.net/chrisvfritz/50wL7mdz/ 今回はこれ使…

vue.jsのindexについて

vue.jsでこの書き方できるんだと思ったら、そうでもなかったのでメモ。 <li v-for="todo in todos"> {{todo.text}} <input type="submit" value="削除" v-on:click="remove(todo.index)" /> </li> これで動いた気がしたから、いけるんだ!って思ったら、挙動がおかしかった。。 todo.indexのリストの値を削除するっていうclickのメソッドなんだけど、 一番最後のli…

iQuery セレクタ指定 eq(index)

jQuery普段あまり使わないんですが、セレクタの指定方法で初めて知ったものがあったのでメモ。 <ul> <li>0</li> <li>1</li> <li>2</li> </ul> .active { background: #f00; } $("li").eq(0).addClass("active"); eq(index)indexは0スタート。 0を指定したら <ul> <li class="active">0</li> <li>1</li> <li>2</li> </ul>

Vue.js勉強会資料作成中(その1)

不肖ながら会社でVue.jsの勉強会を開くことになったので、 作成途中の資料をそれとなく載せておきます。(第1回前編) Vue.js勉強会 vol.1 Hello Worldから始めるVue.js 対象者 Vue.jsというかJavaScript初心者。 デザイナーも含めるので、基礎の基礎からやっ…

jQuery日本語リファレンスのあの『ヌー』をJavaScriptで書き換えてみた

semooh.jp みんながお世話になっているjQueryの日本語リファレンス。これの「ヌー」。 //jQuery 4行 $('.semooh a').hover( function(){ $(this).text('ヌ?'); }, function(){ $(this).text('ヌー'); } ); これを、JavaScriptに書き換えてみた。 一応、想定…

wgetをmacでできない時

表題の通りなんですが wget -O xxx.html http://xxxx.com/ なんてある時、macだとwgetがないのでnot foundなんて言われてしまいます。 そんな時は curl -o xxx.html http://xxxx.com/ に置き換えすればいいんですね! オプションが大文字だと挙動が思う通り…

firefoxで:beforeが効かない(css)

chromeだと:beforeの擬似要素が表示されるのに、firefoxだと表示されない現象に悩まされたのでメモ。 原因はinputに:beforeが書いてあったせい。 <input type="radio icon" />ラジオボタン .icon::before { content: "#"; } ラジオボタンなんかで、装飾をするのにiconフォントなんか使い…

express4系+mongoDBチュートリアルしてみた

やってみたのはこちらの記事。 qiita.com とりあえずmongoDBの概要と、expressでのDB連携をやってみたかったので、restfulなかんじで。 krdlab.hatenablog.com 記事にはinstallの工程なかったけど、 これも使ってたよー。

検索時にXXXを除外したい!除外キーワード検索

スペースで区切って、複数ワードでの検索はしてるけど、このキーワードを除外したいってとき。 マイナスを頭につける。(。_。)φメモメモ 「たぬき -ぽんぽこ」 たぬきを検索したくって、ぽんぽこ以外を出したいときは異常で検索。 平成たぬき合戦はおもしろいよー