孤独プログラマー譚

孤独死が近い。

Vue.js Ajaxを使った連動するセレクトボックス

1つ目のセレクトボックスの項目を非同期通信で取得。 そこで選択した項目を元に、2つ目のセレクトボックスの項目も非同期で取得する。 <div id="app"> <select v-model="selected_category_id"> <option v-for="item in category_list" :value="item.id">{{ item.name }}</option> </select> <div>{{ selected_category_id }}</div> <select v-model="selected_animal_id"> </select></div>

Vue.js 全て入力後に送信可能になるボタン

テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。 <div id="app"> <div><input v-model="field1"></div> <div><input v-model="field2"></div> <div><input v-model="field3"></div> <div>{{ entered_all }}</div> <button :disabled="!entered_all">submit</button> </div> new Vue({ el: '#app', data: { field1: '', field2…

Vue.js 複数チェックボックスを全て選択で切り替え

よくある「全て選択」チェックボックス。 <div id="app"> <div v-for="(item, index) in items"> <input type="checkbox" :value="item" v-model="checked_items">{{ labels[index] }} </div> <div>{{ checked_items }}</div> <input type="checkbox" v-model="checked_all">check_all<br> <div>{{ checked_all }}</div> </div> new Vue({ el: …

Vue.js 単一ファイルコンポーネントと通常使用の併用

通常使用とは何なのかというと、HTMLのscriptタグ内で、new Vue() してやること…ということにします。単一ファイルコンポーネントは使いたい。 でも、他のHTML要素の方も、Vue.jsで制御したい。 その場合、どうすればいいか、調べてもよく分からなった。例え…

Windows+PHP+Vdebug ブレイクポイントで止まらない

Vimを使う者として、IDE(統合開発環境)に負けたくないという気持ちはある。だが、さすがにログや画面にvar_dump()し続けることに疲れてきてしまった。ということで、vdebug(ステップ実行できるVimプラグイン)を使うことにした。環境: Windows10 Docker …

jQueryでMVVM

案件によっては、自由にJSフレームワークを使えないことがあるかもしれない。 既存システムがjQueryだけで作られているので、それを踏襲する必要があるかもしれない。そんな時、jQueryでMVVM…双方向データバインディングが出来ると、作業が楽になる。以下の…

PHP 引数の多いメソッド対策

以下のように、同じような引数が羅列されているソースコードをよく見る。 getMemberAddress('秋元真夏', '乃木坂46', 'ソニーミュージック'); $this->getMemberAddress('白石麻衣', '乃木坂46', 'ソニーミュージック'); $this->getMemberAddress('山下美月',…

PHP ユーザー定義関数に永続変数を持たせる

やりたいことは、JavaScriptで言うクロージャを作ること。 関数外のスコープにある変数を、関数内で保持していく。useを使えば出来ると思ったら出来なかった。 useを使えるのは無名関数のみだったのか…。

if文を考える

以下のような if 文をよく見かける。 if has_white_skin && is_good_looking p 'まいやん' # 色白で美人なのが、まいやん elsif has_white_skin && is_cute p 'さゆにゃん' # 色白で可愛いのが、さゆにゃん end ありがちだが、良くない。以下はもっと良くな…

JavaScript バブリング中毒

以下、セレクトボックスが3つ並んだHTML。 全てのセレクトボックスが選択完了した時、何か処理を実行したいとする。 <div id="wrapper"> <select id="select1"> <option value="">---</option> <option value="1">aaa</option> <option value="2">bbb</option> </select> <select id="select2"> <option value="">---</option> <option value="1">aaa</option> </select></div>

Ruby 元のクラスを触らずに機能を拡張する

機能を追加することになった。 だが、元のクラスは触りたくない。 だってバグりそうだから。前のテストのやり直しをさせらせるかもしれない…。自分の身を守るためにも、安全に機能を拡張する方法をまとめる。 以下クラスを拡張する。 フルネーム「白石麻衣」…

Ruby クロージャを使ってインスタンス変数を減らす

インスタンス変数は悪である。 だって、クラス内のどこからでも、値を改変できるから。 そこで、インスタンス変数を減らす手立を考えてみた。 以下、ゲッターもどき。 構造体を返す。構造体はラムダをgetメンバに持っている。 ラムダはクロージャになる。変…

Ruby ブロック付きメソッドの活用

普通は、スクリプトを読みながら、どういう順序・条件で処理が進むのかを調べる。それがつらい。処理の詳細を見ないと、実行順や分岐の条件が分からないのがつらい。だから、実行順や分岐の条件を、処理の詳細から分離する。OOPのTemplateパターンやStateパ…

CoffeeScript Privateメンバ

= で定義すれば、private : で定義すれば、public となる。Privateメンバは、コンストラクタ関数内のローカル変数として、 クロージャによって保持されている…と考えることが出来る。 class Sony # public pubVar: 'nogi46' pubFunc: -> console.log '乃木坂…

今さらCoffeeScriptでクロージャ

仕事でCoffeeScriptを使っている。練習も兼ねて、クロージャを書く。CoffeeScript、Rubyと似ている…。 素のJavaScriptと比べて、色々と省略できすぎるため、初見では何を書いているかさっぱり分からない。 引数を2倍にする関数、3倍にする関数を返す。 facto…

elseif・switchは撲滅して連想配列

前回に引き続き、今回も同じテーマで。以下、憎くて仕方ないelseif文。 id = 'nogi' if id == 'nogi' then name = '乃木坂46' elsif id == 'keyaki' then name = '欅坂46' else name = 'ソニーミュージック' end p name # 乃木坂46 本当にキモい。 たいした…

elseifやswitch文は連想配列に置き換えてポリモーフィズム

elseifやswtich文は出来るだけ避けたい。 一連のスクリプトから状態を排除したいし、後々の改修で誰かがネストしまくるのが想像できる。置き換えるには、Stateパターン等を使う必要があると思っていたが、実は連想配列で解決できることに気付いた。以下、よ…

Ruby 委譲

Rubyの便利な委譲な仕組み。一つ目。Forwardableモジュール。 class Sony extend Forwardable def_delegators :@keyaki, :discord def initialize(keyaki) @keyaki = keyaki end end class Keyaki def discord print '僕は嫌だ!' end end sony = Sony.new(K…

Rubyでクロージャ

JavaScriptでよく見るクロージャを、Rubyでもやってみる。 JavaScript 関数スコープ ・内側から外側の変数は利用できる。 ・外側から内側の変数は利用できない。 Ruby ブロックスコープ ・内側から外側の変数は利用できる。 ・外側から内側の変数は利用でき…

Ruby Procを触る

引数にブロックを取る関数。 def doSomething(something, &toDo) toDo.call(something) end PHP = 無名関数 Ruby = ブロック という考え方で良いと思う。以下、do から end がブロック。 Rubyでは、ブロックも引数の一種に考えるイメージだろうか。 doSometh…

PHP Proxyパターンを楽に実装する

Proxyパターンは有用である。最近知ったから使ったことないけど。例えば、以下、RobotクラスとMissileクラス。 ロボットクラスは、ミサイルの発射をミサイルクラスに委譲している。 missile = new Missile(); } function launchMissile() { $this->missile->…

JavaScript ツリー構造はCompositeパターン

ツリー構造といえばあれだ。 営業部 ┗ 1課 ┗ 山田 ┗ 鈴木 ┗ 2課 ┗ 佐藤 みたいになってるやつ。デザインパターンには、このツリー構造をうまく処理できる「Compositeパターン」というものがある。だが、ツリー構造自体、扱う機会が特に無かったので、Compo…

JavaScript Decoratorパターン

Decoratorパターンの良いところは、 主体となるオブジェクトと、処理を委譲しているオブジェクトの間に、スッと割り込ませることが出来ること。 そして、その処理を委譲しているオブジェクトには、傷をつけなくて済む。Decoratorでラッピングするか否か、動…

ループの中のif文が現れたら、Observerパターンを検討する

やはり自分はObserverパターンを理解していなかった。Observerパターンは、多種多様な輩をループで回す時、真価を発揮する。以下、よく見るケース。JavaScriptで。 function Student(name, sex) { this.name = name this.sex = sex } var students = [ new S…

Javascript 関数のデフォルト値設定の罠

今まで何気なくやってた、関数のデフォルト値設定。 function foo(a) { var a = a || 1; ... } 実は愚かな行動だったと知った。JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita例えば、 foo(0); // 1 引数が 0 や false の場合、意図どお…

ECMAScript6 let・ループ・ブロックスコープ

ES5以下がだいだい分かってきたような気がしたから、ES6に手を出していくことにした。以下の挙動が意味不明だった。 var callback = []; for (let i = 0; i < 3; i++) { callback[i] = function () { console.log(i); }; } callback[0](); // 0 callback[1](…

JavaScript バブリングの活用

例えば、以下のようなHTMLがあるとする。 <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> ... x 1000 ! </ul> <li>をクリックした時のイベントハンドラを登録したいとする。jQueryで普通に書くとこうなる。 $('li').on('click', function () { console.log(this.textContent); }); (19ms)ピュアJSで書くと</li>…

Drupal8 FormクラスでGET通信を使う

カスタムモジュールで、Formクラスを使う時の話。デフォルトはPOST通信になる。「設定を変えればGET通信なんて余裕だぜ、はははー」 なんて思いつつ、以下に設定。 setRequestMethod($request->getMethod()); // 'GET' 時の分岐 isMetho…

JavaScriptのコンストラクタとプライベート変数

まず、コンストラクタを使うこと前提で。コンストラクタ内でメソッドを定義する場合、プライベート変数を使うことができる。よくあるカウント機能を持つサンプル。 function Nogi() { var count = 0; this.say = function () { count++; console.log(count);…

Observerパターンについて考える

Observerパターン、名前は知ってるけど、いまいち使いどころがよく分かりませんでした。「状態の変化を通知する仕組み」とのことですが、あまりそういう状況に出くわさないというか、頭にピンとこないというか…。調べてみたんですが、おそらく自分は勘違いし…