かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript `{}` なオブジェクトだけを判定したい

個人的に JavaScript の要素は全部 Object で、型の概念は実質存在しないという認識。(Stringも "foo".length とか使える訳だし) ある程度は typeof() で判別することができるけど、Ruby とかで Hash とか Python で DIctionary (辞書) とかと呼ばれるような…

初めての npm パッケージ公開したメモ

よわよわな npm のパッケージ公開したみたので、パッケージ公開までのハマりどころとかをメモ 公開した npm パッケージ 1. npm アカウントの作成 npm のサイト からアカウントを作成する。 Sign Up のフォームにも書かれているが、npm のアカウントのメール…

scss-lint に QualifyingElement といわれた。

こんな感じで怒られた。 QualifyingElement: Avoid qualifying attribute selectors with an element. 「属性セレクタで要素を修飾しないで」ということらしい。 input[type="radio"]:checked, input[type="checkbox"]:checked { + label { color: $highligh…

Mac wifiの認証画面が表示されない。にハマる

カンファレンスや勉強会、お店などにある FreeWifi で wifi 接続時に認証画面が表示されログインをしないとネットワークに繋げられないものがあります。 通常であれば wifi を選択するとシステムダイアログ (Captive Portal って言うらしい) のような感じで…

Git 削除されたファイルを探したい

Railsのプロジェクトでrakeタスクが作成されてproductionに反映したからタスク削除済み。local環境に反映してなくて削除されたファイル探したいという事が頻繁にありGitで削除されたコミットを見つけてくる必要があったのでやりかたのメモ 削除されたファイ…

React JSX 親コンポーネントから子コンポーネントの子要素を出力したい

こんなの function Label(props) { // label で表示する要素を親コンポーネントで指定したい! return ( <label htmlFor={props.htmlFor}>{ ◯◯◯◯ }<label> ); } function Input(props) { return ( <> <Label htmlFor={props.id}>推し</Label> <input id={props.id} defaultValue={props.dafaultValue} /> ); } <Label /> コンポーネントを別に作っておいて、子要素はHTMLみた…</label></label></label>

JavaScript モジュールを Travis CI でテストして Coveralls でカバレッジを計測してバッヂを貼りたい。

GitHub の README とかによくあるバッヂをペタペタ貼ってみたかったので、CIのテストとカバレッジ計測をやってみました。 Travis CI は OSS (GitHub で public repo ならOKっぽい) なら無料っぽいという事だったので選びました。カバレッジの表示は Codecov …

Babel + Jest で JavaScript のテストをする

Babel のインストールと設定ファイルの作成 $ yarn add -D @babel/core @babel/cli @babel/preset-env babel.config.js module.exports = { presets: [ [ "@babel/preset-env" ] ], }; Jest のインストール $ yarn add -D jest 公式ドキュメントによると bab…

JavaScript &nbsp; なスペースのあるHTMLの扱い

先に JSX 内で &nbsp; が含まれる場合のテストのハマりどころ書いてしまったけど、改めて JavaScript での扱いをメモ。 JavaScript での取得 <p id="elm">星宮&nbsp;いちご</p> const elm = document.getElementById('elm'); elm.innerText; // 星宮 いちご elm.firstChild.n…

ag (the silver searcher) 検索時に log ディレクトリを除外したい

logやtmpディレクトリが同じ階層にあるからアプリ全体で検索したい時にlogファイルとかから引っかかってきてウザいので検索対象から除外したい時 --ignore オプションを使う $ ag -h -i --ignore-case Match case insensitively --ignore PATTERN Ignore fil…

Ruby ランダムに true / false を返したい

モックアップを作っていて、条件によって表示/非表示が分かれる要素があり、ランダムで表示/非表示させたいと思いました。 ランダムに 0 / 1 を返す ぱっと思いついたのが他のJavaScriptとかでもよくやる 0 || 1 を返す方法。 Random.rand(0 .. 1) Random#ra…

JavaScript, React &nbsp; なスペースのあるHTMLのテスト

HTMLで時々見かけるやつ。 &nbsp; &nbsp; Non-Breaking Space 文中で折り返しさせたくない語句を繋ぐ時に使う特殊文字。 JavaScript で &nbsp; が含まれるHTMLを扱う時のトラップ コンポーネント時代の昨今だとJSXとかJavaScript内にHTMLを書いたりすること…

React Jest + enzyme 'equal' of undefined になる

React で作ったアプリを Jest + enzyme でテストしている時にTypeError: Cannot read property 'equal' of undefinedというエラーになったのでメモ enzymeのAPIリファレンスを見ながらこんなテストを書いていました。 describe("App", ()=> { const app = sh…

Ruby benchmark-ips で処理のベンチマークを取る

で Ruby の case 文でクラス名を判定する時に、クラスそのものでもclass.name でも判定できるので、どちらのほうが処理が速いのか気になりました。 JS脳的なイメィジだとなんとなくStringでの完全一致の方が速そうな気がしたのでど、どうなんでしょう?と先…

Ruby Class を case 式で判定しようとしてハマったメモ。

Ruby は深く触ってないので初学者マンです。 Rails の複数のクラスで共通して使われている Decorator 内で case 式でクラスを判定して返す値を変えていた部分で self.class.name の文字列で判定するのではなく self.class で判定すればいいよ。とアドバイス…

sass-lint と scss-lint で lint から除外する場合の書き方が微妙に違ってた

理由があって lint を無視させたい時の書き方が sass-lint と scss-lint で微妙に違う。 sass-lint だと思ってたらプロダクトで使ってるのが scss-lint で ignore できてたなかったので自戒を込めてメモ。 ブロック内だけ lint を無視させる sass-lint sass-…

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

JavaScript null とか undefined を配列から取り除く

create-react-app で作ったプロジェクトを npm run eject して webpack の秘伝のタレを眺めていて次ような記述を発見しました。 const loaders = [ // 略 ].filter(Boolean); 0 とか null とか undefined とか false になる値を配列から削除してる array.fil…

GitHub PR のコミット順がローカルの log と違う件

git rebase で --fixup や --squash したり、コミット順を入れ替えたりしたブランチで PR を出すと、PR内や Commits タグで表示されるコミットの並び順がローカルのリポジトリで git log --oneline で表示した順番と違っていることがありました。 GitHub の …

Mac 黒い画面を Zsh にしてみた。

git やローカルサーバーの立ち上げ以外にも黒い画面 (ターミナル) 使うことが増えてきたので、デフォルトの bash から zsh にしてみたメモ。 尚、zsh のカラフルな画面にしてみたいと思っただけで bash との違いもイマイチわかってない。 環境は Mac OSX 黒…

JavaScript data-属性の操作

VDOMなフレームワークを使っているとHTMLの属性を直接触る機会はあまりないと思いますが、カスタムデータ属性 data-* の操作には getAttribute / setAttribute より dataset を使うと簡単です。 カスタムデータ属性 data-* カスタムdata属性の名前はdata-で…

Ruby gem install bundler で Permission denied エラーになった

こんにちは。今日は6月6日、D-dayだった日です。そんな日にエラーを出したのでメモ。 rbenv で Ruby のバージョンを管理していて、rbenv でインストールした別の Ruby のバージョンを切り替えた後に gem install bundler しようとしたら Permission denied @…

Google スプレッドシート 自動的に生年月日の列から年齢を計算したい

Spreadsheet に次のような誕生日の入ったデータがあり、自動的に今、何歳なのか表示させたい。 A B C 1 名前 誕生日 年齢 2 星宮いちご 1999/03/15 3 霧矢あおい 1999/01/31 4 紫吹LAN 1998/08/03 5 藤堂ユリカ 1998/12/26 6 大空あかり 2000/04/01 7 神崎美…

Sublime Text 3 タイトルバーにファイルのフルパスを表示したい

苦難のIE6-11同時対応時代を生きてきたせいで、はやりの VS Code に乗れず、Sublime Text を愛用しています。 フレームワークとか階層が深くて同じ名前のファイルがたくさん有るようプロジェクトでファイルを沢山開いていると、どれがどれだか分からなくなり…

RSpec include_context って何

プロジェクトの RSpec をみていて、 include_context 〜 という文章があり共通処理をしているっぽいけど、どういうものなのか知らなかったので調べたメモ include_context ref. shared context - Example groups - RSpec Core - RSpec - Relish shared_conte…

RSpec Capybara アクセスしてるページのURLを知りたい。

Capybara で visit してアクセスしてるページの情報をチェックしたい current_host を使う current_url ⇒ String Fully qualified URL of the current page. ref. Class: Capybara::Session — Documentation for jnicklas/capybara (master) 他にも色々ある…

RSpec メソッドの有無をテストしたい

メソッドがある事をテスト let(:foo) { create :foo } it 'foo has #method' do expect(foo).to respond_to(:method) end 又は expect(foo.respond_to?(:method)).to be true メソッドがない事をテスト let(:foo) { create :foo } it 'foo has #method' do e…

Sass if文 ( @ifディレクティブ ) の中で変数を使う時の罠

Sass で if文中で変数を使う時にスコープのトラップがあったのでメモ。 if文 ( @ifディレクティブ ) の中で作成された変数は、if文外でアクセスできない 次のような書き方だと変数が存在しないというコンパイルエラーになります。 .foo { @if $is-error { $c…

Sass if 文の条件式で &&, || は使えない

Sass で使える比較演算子は ==, !=, <, <=, >, >=。論理演算子は and, or, not。つまり、Sass には &&, || という演算子は存在していない。 Sass の if 文で複数条件を設定したい時は and, or を使う e.g. リンクカラーを設定するような mixin で、文字色だ…

React create-react-app したプロジェクトで stylus を使いたい

React のプロジェクトを作る時に create-react-app とても便利です。 しかしWEBアプリを作ると時に避けて通れないのが CSS 。 create-react-app のデフォルトではプレーンなCSSなので、コンポーネントごとにCSSを書けるとはいえチョット面倒です。せっかくな…