Vue で親の値が変わったら子コンポーネントも更新する

Vue で親が子コンポーネントに対して値を渡す場合、以下のように props を介して渡します。 index.html <script type="text/x-template", id="child"> <div> <input v-model="message"> <a>Child message is: {{ message }}</a> </div> </script> <div id="example"> <input v-model="message"> <a>Parent message is: {{ message }…</a></div>

クラス名の直後にクラスメソッドを呼び出す

本日の知見。 うーん、そこにextend書くのか…… https://t.co/298XtYmzfJ— Pocke(ぽっけ) SW-1309-2807-5790 (@p_ck_) 2017年11月18日 module Asd extend self def some_method p 'something' end end 今までこういうコードは見たことがなかったんですが、上…

Vim で :terminal の使い勝手をよくした

Vim

重い腰を上げてやっと Vim の :terminal を使ってみたんですが、いろいろと使い勝手が悪かってので魔改造しました。 いろいろと便利な設定を書こうと思ったら完全に煽り記事みたいになってしまい大変申し訳無くry。 :terminal を真面目に触ってからまだ半日…

Rails で hoge.foo.present? ? hoge.foo : "none" を短くしたかった

https://t.co/xgYQnFY6hO.presence || 'none'でいけそうです— Pocke(ぽっけ) (@p_ck_) 2017年10月27日 Object#present メソッドが『present? が true なら self を、そうでないなら nil を返す』という挙動になっているので、こんな感じにかけるぽい。 めち…

Nokogiri で任意の node を削除する

やりたかったので覚書。 #remove メソッドで自身を削除することが出来ます。 コード require "nokogiri" html = <<EOS <body> <div> <a></a> </div> <br> <a> <br> </a> <br> <div></div> <br> </body> EOS doc = Nokogiri::HTML.parse(html).at(:body) # 最初に見つかった <div> を消す doc.at(:div).remove puts doc puts "-" * 20 # 全</div>…

JavaScript で Array と Object がネストしたデータを展開したかった

以下のような Object が保持してる配列をいい感じに展開したかった。 元データ const obj = [ { name: "name1", children: [ { name: "name2" }, { name: "name3", children: [ { name: "name4" }, { name: "name5" }, ] }, ], }, { name: "name6" } ] 結果 …

JavaScript で数値をソートするときの注意

JavaScript 界隈では常識だと思うんですが、知らなかったので覚書。 配列のソート行う Array.prototype.sort() 関数は、 compareFunction (比較関数) が与えられなかった場合、要素はそれぞれの文字列に変換したものを比較して辞書 (あるいは電話帳。数的で…

GCC の __PRETTY_FUNCTION__ 識別子

C++

C++11 では __func__ という識別子が追加され、関数名が文字列で取得する事が出来ます。 #include <iostream> namespace my{ template<typename T, typename U> auto plus(T a, U b){ // 現在の関数の名前を取得できる std::cout << __func__ << std::endl; return a + b; } } int main(){ std:</typename></iostream>…

Vim で1行がとてつもなく長い場合に描画を軽くする

Vim

例えば、JavaScript で minify されているコードは1行が途轍もなく長いです。 こういうコードを Vim で開く場合、シンタックスハイライト回りが非常に遅く、Vim 自体が重くなってしまう事があります。 'synmaxcol' を設定する そのような場合に 'synmaxcol' …

第33回 PORTもくもく会に行って LT してきた

第33回 PORTもくもく会に行ってもくもくするついでに LT してきました!! もくもく もくもく会っていうことで一応 Ruby のコードを書く予定だったんですが、結局午後からはほとんど LT のスライドを書いてました…。 いや、スライド自体は事前に用意していた…

Ruby 2.5 で追加される yield_self メソッド

Ruby 2.5 では Object#yield_self というメソッドが追加される予定です。 これは以下のような実装になっています。 class Object def yield_self yield(self) end end 平たく言うと『ブロックの戻り値を返す #tap』って感じですね。 何が嬉しいのか この手の…

node.js で全ての階層のディレクトリを作成する

node.js の Path の mkdirSync でディレクトリを作成する場合、階層のディレクトリが存在しない場合は新しいディレクトリはつくってくれません。 const FS = require("fs-extra"); // hoge, foo, bar というディレクトリは存在しない場合 FS.mkdirSync("./ho…

C++17 で追加される std::apply 関数

C++

C++17 で std::apply という関数が新しく追加されます。 これは『タプル型を展開して関数の引数として渡す』という関数になります。 #include <tuple> #include <iostream> int main(){ auto print = [](auto id, auto name, auto age){ std::cout << "id:" << id << " name:" </iostream></tuple>…

lodash を使って JavaScript でオブジェクトのコピーを行う

昨日書いたオブジェクトのコピーですが、lodashというユーティリティライブラリを使うのが手っ取り早そう // npm install lodash -g const _ = require("lodash"); const obj = { // Object のプロパティ name: { sei: "yamada", mei: "tarou" }, age: 24 };…

JavaScript でオブジェクトのコピー

さて、JavaScript ではオブジェクトの値を代入した場合に参照としてコピーされます。 const obj = { name: "tarou", age: 24 } // obj を代入する const other = obj; // コピーした値を変えると other.name = "hanako"; other.age = 17; // コピー元のオブ…

JavaScript でセミコロンを省略した場合の弊害

JavaScript でセミコロンを付けるべきか否かっていうは割と宗教的な違いがあると思います。 じゃあ、実際セミコロンをつけなかった場合にどういう弊害があるのか、というのを簡単に調べてみました。 その中で気になった記述をいくつかピックアップしてみます…

C++ でコンストラクタの引数名をメンバ変数名と同じにする

C++

コンストラクタで引数を受け取ってメンバ変数を初期化する場合、 struct X{ X(int _value) : value(_value){} int value; }; みたいに引数名に _ prefix/suffix をつけているコードをたまに見かけます。 しかし、実は引数名はメンバ変数名と同じでも問題なく…

表参道.rb #27 での発表に一部誤りがあったので訂正と補足

発表から一週間以上経ってしまっているんですが、発表中の発言に一部誤りがあったので訂正と補足。 pattern-match を使っているコードを説明する時に 「pattern-match は using PatternMatch をすることで match と with が使えるようになり〜」 と発言して…

C++17 の構造化束縛を range-based for で使う

C++

C++17 では構造化束縛という言語機能が追加されました。 これは std::tie のように std::tuple などを個別に変数で受け取る事が出来る機能です。 auto homu = std::make_tuple(1, "homu", 14); // std::tuple の要素を個別に受け取る auto [id, name, age] =…

npm install で github のリポジトリからインストールする

npm install で github のリポジトリを指定してインストールする方法の覚書。 $ npm install osyo-manga/thomash-node-audio-metadata また #{branch 名} を付けることで任意のブランチからインストールすることも出来ます。 $ npm install osyo-manga/thoma…

Vim でシンタックスハイライトが突然オフになる現象の対処方法

Vim

覚書っていうか情報共有というか。 Vim の syntax が突然オフになる現象にお困りの方へ* パッチ 8.0.0647~8.0.1132 の方 → 8.0.1133 以降にアップデート* 8.0.1133 以降の方 → redrawtime の値をデフォルト値に戻してみて下さい— mattn (@mattn_jp) 2017年9…

element-ui の tree コンポーネントでノードのレンダリングをカスタマイズする

かなりマイナーなネタですが、element-ui の tree コンポーネントで表示されるノードをカスタマイズしてみたいと思います。 環境 Vue.js : v2.4.4 element-ui : v1.4.6 コード HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.6/lib/theme-default/index.css"> </head> <body> </body></html>

ES2015(ES6)以降 の JavaScript でオブジェクトのキーに変数を使う

次のように JavaScript でオブジェクトのキーに変数を使おうとしても当然ですが変数は展開はされません。 const key = "age"; const value = 14; const obj = { key : value }; console.log(obj); // => { key: 14 } 通常このような場合は obj[key] = value …

Ruby の #class_eval と #module_eval の違い

Ruby の #class_eval はクラスオブジェクト専用、#module_eval はモジュールオブジェクト専用のメソッドだと思っていたのですが、実は名前が違うだけで同等のメソッドだったみたい。 検証コード class C end C.class_eval { def homu end } # クラスオブジェ…

表参道.rb #27 ~ RubyKaigiのおさらい ~ で発表してきた

表参道勢でもないし、RubyKaigi にも参加していませんが、タダ飯に惹かれていろいろと思うところがあり参加&発表してきました。 発表内容は以下のような感じ。 表参道.Rb #27 pattern-match の一部を読む from pink_bangbi 内容はやきとりいさんが RubyKaig…

browser-sync を使ってお手軽にライブリロードする

今までライブリロードといえば gulp を使っていたんですが、 『動作確認用のサンプルコードとかでいちいち gulpfile.js を用意するのめんどいなー』 と思い、もっとお手軽にライブリロード出来ないか探していたんですが Browsersync というのがよさそうでし…

Vue.js + UIkit でアイコンが2つ表示される場合の対処方法

Vue.js + UIkit でアイコンを表示させようとしたら2つ表示される事があったので対処方法を覚書。 再現する環境 Vue : 2.4.4 UIkit : 3.0.0 beta 30 jQuery : 3.2.1 再現コード <html> <head> <title>Welcome to Vue</title> </head></html>

Ruby で xlsx を編集する

Ruby で既存のエクセルファイルを編集したかったので試してみた。 Ruby でエクセルファイルを扱う手段(gem)はいくつかあるが今回は、 .xlsx ファイルの読み込み .xlsx ファイルの書き込み セルの結合 を行いたかったので RubyXL を使うことにした。 余談 …

Electron で jQuery 使う場合の注意点

Electron で UIkit を使っていたらハマったので覚書。 問題点としては、 Electron で jQuery を使おうとするとエラーが出た 上記の問題を解決した結果、gulp のライブリロードが動作しなくなった という2つの不具合が発生した。 先に書いておくと手元では下…

今更聞けない! Ruby の継承と mixin の概念を継承リストから学ぶ

Ruby を学ぶ上で継承と mixin の概念を理解することはとても重要である。 しかし、このあたりの仕組みを学ぼうとすると、include や prepend、特異クラスや特異メソッドなどという様々な機能を理解する必要がありとても複雑である。 そこで本記事は『継承リ…