かもメモ

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

2019-05-01から1ヶ月間の記事一覧

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