かもメモ

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

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を書けるとはいえチョット面倒です。せっかくな…

Sass (SCSS) BEMで書く時に @at-root は必要か?

CSS を Sass (SCSS) + BEM ( Block-Element-Modifier ) で書いているプロジェクトに参加してて、BEMに合うようにするために @at-root を使ってくださいと言われ、 @at-root というものを知らなかったので調べたメモ。 結論としては現在では Sass で BEM な C…

Sass (SCSS) 書き方のメモ

5年ぶりくらいにSass (SCSS) を触る機会があってすっかり忘れてて手間取ってしまったので、基本的な事を思い出す意味も込めてメモ。 Sass Sassには{}の不要なSASS記法と、{}が必要でCSSに近いSCSS記法の2つがある。 このエントリーは SCSS にについて。 { } …

Mac ターミナルからファイルをアプリで開きたい。

Mac

Rails 大きなプロダクトになると、たくさんの関連するファイルが別々の深い階層にあるの辛くない? (デキるエンジニア諸兄はターミナルから直接開くから気にならないのかな? RSpec Rails Decorator で undefined method にハマる - かもメモ open コマンド…

React JSX の中で if で分岐させたい

React のアプリで例えば編集モードの時にはフィールドで、そうでない時はテキストを表示するなど、条件によって表示を変えたい時など JSX 内で分岐をさせたい場合とか。 ふと思った。 JSXの中でif文使いたい場合って何がスタンダードなんだろう?JSXの中で {…

Ruby キーワード引数で見通しを良くするゾ

Ruby には 2.0 から導入されたキーワード引数という引数の値を変数名に割り当てメソッドを呼び出す方法があるそうです。(Ruby 2.1 からデフォルト値のない Requiredキーワード引数 が使えるようになった) キーワード引数のメリット メソッドに渡している引…

React Hooks 親コンポーネントから子コンポーネントをのDOMを ref を使って触りたい。

React Hooks を使ったアプリでボタンの状態やフィールドへのフォーカスなど ref を使った操作を、そのボタンやフィールドの親コンポーネントから呼び出したい時のメモ。 日本語が不自由なのでサンプルを 例えばボタンを押した時に非同期処理をするから、処理…

RSpec Rails Decorator で undefined method にハマる

やっはろー!RubyもRailsもほぼ初心者マン即実戦で四苦八苦してる日々です。 ActiveDecorator が使われている Rails のプロジェクトで decorator のテストを RSpec で書いていた所、decorator にあるはずのメソッドが undefined method になりテストがコケて…

JavaScript 配列をオブジェクトに変換したい。

[{id:1, ...}, {id:2, ...}. {id:3, ...}, ...] みたいな配列を{id: {...}, id: {...}, id: {...}, ...} なオブジェクトに形式に変換したい時のメモ。 e. g. 元の配列 const arg = [ {id: 1, name: '星宮いちご', type: 'cute'}, {id: 2, name: '霧矢あおい'…

React JSX className に変数と固定値を混ぜて使いたい

ReactのJSXでクラス名を付ける時に変数と固定値な文字列を一緒に使いたいとき コレはうまくいかない return ( <button className="btn btn-${btnState}">BUTTON</button> ); 文字列結合する function Button() { const [btnState, setBtmState] = useState('primary'); return ( <button className={'btn btn-' + btnState}>BUTTON</button> ); } テンプレート構文 …

JavaScript eval vs. new Function

文字列をそのままJavaScriptとして実行できる邪悪なパーツとされるeval と new Function のメモ。 node使ってモジュール入れてBabelしてwebpackする時代に使う事なんてなさそうだけど、、、 eval グローバル・スコープ内にある変数にアクセスできる let n = …

JavaScript (ES2015) super のメモ

ES2015 で使えるようになった class ですが、JavaScriptではあくまでクラスっぽいモノ(プロトタイプ・オブジェクト)として実装されているらしいので、継承元のプロパティやメソッドを使えるsuperがどうなってるのか気になったので調べてみたメモ。 super con…

CSS3 疑似要素 :blank と :empty 試してみた

CSS

恥ずかしながら空要素だけに適応できる:blank, :empty って疑似要素があることを知らなかったので試して見たメモ。 1. <div class="square"> </div> 2. <div class="square"> </div> 3. <div class="square"></div> .blank .square:blank { background-color: #ec4727; } .blank .square:-moz-only-whitespace { background-color: #ec4727;…

MySQL 関連性のないテーブルから取ってきたデータをINSERTしたい。

こんにちは。ジョニー別府です。イェー! idols, brands, typeという別々のテーブルに入っているデータを基に stage のデータを作りたい! テーブルの構成 idols table: アイドルハニーたちの名前とタイプ +----+-----------------+---------+ | id | name | ty…

Git ブランチ名を変えたい

git

ブランチ名が合ってないとか、タイポってるとかでブランチ名を変更したい時 今の作業ブランチ名を変更 $ git branch -m <new_branch_name> ブランチ名を変更 作業ブランチではない別のブランチ名を変更する場合は 対象ブランチ 新しいブランチ名 で指定する $ git branch -m <old_branch_name> <new_branch_name></new_branch_name></old_branch_name></new_branch_name>…