かもメモ

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

RSpec Capybara 非表示な要素のテストにハマる

- 非表示になっている要素には `visible: false` オプションを使う - 非表示になっている要素の内容をテストするには `find(selector, visible: false).text(:all)` を使う

RSpec Capybara href の無い a タグにハマる

RSpecの feature spec で href の無い a タグのテストをしようとしてハマったのでメモ ボタン / リンクの存在 ボタン button や submit <button>ボタンのラベル</button> <input type="submit" value="ボタンのラベル" /> expect(page).to have_button 'ボタンのラベル' リンク a タグはボタンではなくリンクでないとマッチし…

React JSX 三項演算子で Left side of comma operator is unused and has no side effects なエラーにハマる

危機管理〜 JSX内でコンポーネントを出し分けしようとしてハマったのでメモ ダメだったコード function App( isAdmin ) { return ( <> {isAdmin? ( <AdminMain /> <AdminAside /> ) : ( <Main /> <Aside /> )} ); } エディターのシンタックスハイライトで次のようなエラーが表示されていた Left side of </aside></main></adminaside></adminmain>…

今更の CSS レスポンシブに使える単位 vw, vh, vmin, vmax と計算する calc()

%, em, rem % ... 親要素の値を 100% として計算する相対値。 em ... フォントサイズを基準にした単位。親要素の font-size を基準にする。 rem ... root em. ルート要素 (html) の font-size を基準とする。 %, em で指定している値の実際のサイズは親要素…

Git fast-forward な状態にして update branch で master を取り込んだ commit を残さずに済むための git rebase

`$ git rebase ` で現在のブランチを親ブランチの先頭 (HEAD) から生えている状態にすれば fast-forward な merge ができるようになる。 GitHub の様なリモートリポジトリの場合は `$ git rebase origin/master` とすればOK

React create-react-app でプロジェクトを作成できないにハマる

$ npx create-react-app my-app で、Reactのプロジェクトを作成しようとしたけど、プロジェクトのフォルダが作成されてない現象になっていた。 その時のログはこんな感じ $ npx create-react-app my-app ... yarn add v1.16.0 [1/4] Resolving packages... …

React Hooks Jest + enzyme + act で useEffect を含むコンポーネントのテストする

react-create-app で作成した React Hooks を使ったアプリケーションのテストのメモ TL;DR 下書き途中にしたまま数ヶ月が経過してしまったので、少し情報が古くなってしまってるかもですが書きかけていた Jest + enzyme + act で React Hooks のテストをして…

VS Code 保存時にファイル末は改行必須にしたい

Files: Insert Final Newline にチェックを入れる ツールバー > Code > Preferences > Settings で設定を開く files.insertFinalNewline で検索 チェックボックにチェックを入れる Files: Insert Final Newline [x] When enabled, insert a final new line a…

Git 空コミットしたい

最初のコミットが rebase しづらいから最初のコミットを空コミットにしたかったり、CI 回すテストしたいから空コミットで push したいような時のアレ。 --allow-empty オプションを使う $ git commit --allow-empty -m :sparkles: (完) ノンプログラマーなMa…

JavaScript NodeList, HTMLCollection は配列(Array)ではない

テーブルのtr内の th, td を丸っと処理したいみたいなケースを考えると、querySelectorAll('tr') で tr を取得してループで回し、それぞれの tr で tr.childNodes か tr.children すれば th, td が取得できそうなイメージになります。 しかしquerySelectorAl…

Googleスプレッドシート QUERY で取ってきたデータの複数のセルをそれぞれフォーマットしたい

数値で計算しているシートから QUERY や IMPORTRANGE を使ってデータを取ってきて、SELECT文で必要な絡むだけにした上で単位を付けたりフォーマットして表示したい。 元のデータ例 シート名 販売目標 A B C D E 1 エリア 消費量 (kl, 2016) 目標売上量 (kl) …

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 の …