かもメモ

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

React window リサイズ時にリスト要素の高さを揃えたい

カルーセルとか横並びの要素の高さをReactで揃えたいような場合 (display: flex が使えないようなケース) 要素のそれぞれのDOMにアクセスして高さを取得して最も高いものを取得しなければならないので、リストのような Ref が必要になります。 また、ウィン…

React イベントを間引いて処理を実行できる Debounce な Hook 作ってみた。

input タグの onChange イベントとか、入力の度に state 変更して再レンダリングするのなんだかなーと思ってたので、イベントの処理を間引いて実行したいと思ったので色々調べながら作ってみました。 要件としては、イベントが発生した後に同じイベントが発…

続・オブジェクトの入った配列からランキングをつくりたい

前回までのあらすじ、オブジェクト内の特定のキーから一意なランキングを作成してみました。 前回のコードでは、同じ得点の場合、配列の先にある方がランキングが上になるようにしていましたが、同位なランキングにしたい場合もあるな〜と思ったのでやってみ…

Object の入った配列を特定のキーでソートしてランキング付けしたい

こんなデータを特定のキーの値でソートしてランキングを付けたい const idols = [ {id: 1, name: '星宮いちご', score: 90}, {id: 2, name: '霧矢あおい', score: 83}, {id: 3, name: '紫吹蘭', score: 80}, {id: 4, name: '有栖川おとめ', score: 85}, {id:…

React Hooks useState state の更新にハマる

useState の setter で値を更新しても即時 state に反映されるわけではないので、更新された state を使って別の処理を行いたい時などで意図しない動作になってしまうことがあります。 function Counter({ initCount }) { const [count, setCount] = useSta…

React Hooks コンポーネントのPropsにデフォルト値をつけたい

// Credit.js export function Credit({ character, singer }) { return ( <> <b>{character}</b> <small>song by: {singer}</small> ); } こんな感じのコンポーネントがあり、props を渡さなければデフォルトで character, singer を表示させたい 1. オブジェクトの引数を分割代…

CSS text-indentなコンテンツ内にinline-blockな要素がると崩れる

text-indent のある要素内の `inline-block` な要素には `text-indent: 0` を設定するか、`display: inline` を設定しよう!

JavaScript 数値かどうか判定したい

const isNumber = (n) => { return typeof(n) === 'number' && n - n === 0; }; of Number.isFinite(n);

JavaScript 分割代入な引数にデフォルト値を設定したい

オブジェクトを分割代入で引数にとる関数の引数にデフォルト値を設定する方法のメモ 引数を分割代入でとる関数 const greet = ({ name, msg }) => { console.log(`${msg}, ${name}!`); }; greet({ name: 'Ichigo', mgs: 'Hi', }); // => "Hi, Ichigo!" 分割…

JavaScript ループを使わずに 1〜100 までを出力する

Twitter でループを使わずに1〜100まで出力するプログラム書ける?ってのが流れてきた。 「ループを使わずに1から100を順に出力するコードは書けますか」という質問に、凄腕たちがプログラム的な技巧を凝らした答えをする中、MSのデータサイエンティストが「…

React Hooks コンポーネント外のDOMに子コンポーネントを追加したい。

全面ReactなSPAではなく、部分的にReactを導入しているようなサービスにモーダルとそれを表示させるボタンをReact Component で作ろうとすると次のような構成になるかと思います。 function ShowDetailByModal() { return ( <> <button onClick={showModal}> SHOW </button> <Modal /> ); } しかし、このよ</modal>…

JavaScript const で作った配列を空にしたい

前回のおさらい 配列は参照 const array = ['シャミ子', 'もも', 'みかん']; const refArr = array; array.push('シャミ先'); console.log(refArr); // => ['シャミ子', 'もも', 'みかん', 'シャミ先'] 空配列を代入して配列を空にする方法だと const にでき…

JavaScript 配列のコピー

JavaScript の配列は参照なので、破壊的な変更を加えてしまうと副作用を発生させるので取り扱いには注意 (危機管理) が必要です。 副作用を発生させないために配列操作を行う時はコピーを行うことが多いですが、配列が入れ子だったり、配列の中にオブジェク…

Ruby メソッドの検索順

初めてのRubyやり終えたのでメモがてら 継承 (親クラス と 子孫クラス) Ruby のクラスはは 1つだけ親クラスを持つ 多言語とかだと継承って呼ぶ事が多いけど、Rubyも継承って言って良いのかがチョットわからない 同じメソッドがある場合、子孫の持つメソッドが優…

JavaScript 複数の要素をまとめて追加したい

VanillaJSなら DocumentFragment を作成してDOMに追加したい要素を溜めておき、appendChild( DocumentFragment ) で丸っと実際に表示されるDOMに追加することができる!

Google スプレッドシート GAS replace が見つかりません。

数値に `.replace()` をするとエラーになるので、数値が渡ってくるのか文字列が渡ってくるのか分からない場合は `.toString` したほうが安全。 今日も一日ご安全に!

Ruby Classメソッドのアクセス権

権限の種類 public ... どこからでもアクセス可能。クラス内にメソッドを定義した際のデフォルトのアクセス権 protected ... そのクラスまたはサブクラスのインスタンスメソッドからしか呼び出すことができない private ... レシーバーの省略形でしか呼び出…

Ruby クラス変数・インスタンス変数 のメモ

Ruby お勉強の自分用メモ インスタンス変数 クラス変数 クラスインスタンス変数 クラス定数 インスタンス変数 インスタンスごとに異なる値を持つ変数 @ から始まる変数名で定義する インスタンス変数はデフォルトでは外部からアクセスすることはできない、 …

Mac Catalina WEBでのヒラギノフォント表示問題について考えたメモ

ことの発端 macOS CatalinaのChrome 77のフォント問題。勘違いしている人が多いので説明。Chromeのデフォルトだった「ヒラギノ角ゴシック ProN」がCatalinaで未バンドルになる↓該当するフォントがなくなったため、Sans Serifが明朝体で表示される↓フォント指…

SCSS の !default フラグ についてのメモ

変数に !default フラグを付けて定義すると、変数が定義されてないか値が null の場合のみ値が設定されるようになる g.e. !default フラグなし $base-color: #333; $base-color: #000; // 後から出てきたもので上書きされる body { color: $base-color; // =…

Ruby メソッド定義 (def式) 内でメソッド定義 (def式)した場合のメモ

Rubyのお勉強をしていてメソッド定義内でメソッド定義したら不思議な挙動 (JS脳には予想外だっった) だったのでメモ。 メソッド定義 (def式) 内に メソッド定義 (def式) をした場合 def a puts 'A' def b puts 'B' end print "self.b > " self.b end a # => …

JavaScript 高階関数 (higher-order function) と カリー化 (currying)

今まで意識せずに使ってたけど、ジムでランニングしながら見てた funfunfunction で面白かったのでメモ。 高階関数 higher-order function 関数を引数に取る関数のことを、高階関数 (higer-order function) というらしい。 Javascript だと callback 関数と…

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…