かもメモ

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

Google map Maps JavaScript API 画像のカスタムマーカーを retina 対応 (2x) したい

Maps JavaScript API を使って google map を作成していて、オリジナルの Marker (ピン) を作成していました。 SVG 画像を使えれば問題がなかったのですが、諸事情で png で Marker を作成することになったのですが、retina ディスプレイだと荒くなってしま…

Webpack .env から変数を取り込んで HTML に渡して使いたい。

API KEY が必要な script タグを HTML に書く必要があって API KEY を直接書いたファイルを git にコミットしたくないので、gitignore した .env に変数として持たせて HTML に渡す方法のメモ JavaScript で .env を使う loadenv を使うと .env ファイルをオ…

ディレクトリ削除する npm script のメモ

build したディレクトリを削除したいとか rm -rf コマンドを npm script で呼ぶ # package.json "scripts": { "cleanup": "rm -rf build" } rimraf を使う rm コマンドがない環境だと上記は使えないので $ npm install --save-dev rimraf # package.json "sc…

React JS のプロジェクトを TypeScript 化したメモ

環境づくりの勉強がてら ReactHooks・テストは JEST + Enzyme で作っていたプロジェクトを TypeScript 化したメモ 1. TypeScript 化のパッケージをインストール して babel 関連のパッケージをアンインストール TypeScript 化するにあたって必要なパッケージ…

Git タグのいろいろメモ

TAG の作成 $ git tag -a <tag_name> # コメント付きで作成 $ git tag -a <tag_name> -m 'comment' TAG の確認 $ git tag TAG をリモートに push する $ git push origin <tag_name> # 一度にpush $ git push origin --tags TAG の削除 $ git tag -d <tag_name> # リモートのタグを削除 $ git push or</tag_name></tag_name></tag_name></tag_name>…

GitHub リポジトリ名を変えた時にすること

パッケージ名が被ってて使えなかったとか、名前がイケてないとか、GitHubのリポジトリ名を変えたいことが時々あります。 リポジトリ名の変更自体は GitHub のサイト上からカンタンにできるのですが、変更すると local のパスが変わってしまうので、パスを合…

Jest import 文が SyntaxError: Unexpected identifier になるにハマる

create-react-app を使わずに自分で独自に作成していたプロジェクトにテストとして Jest を導入したけど、テストコマンドを走らせると SyntaxError: Unexpected identifier が出てハマってしまったのでメモ。 構成 |- /tests | |- setup.enzyme.js | |- App.…

Jest + Enzyme config で adapter を自動的に読み込ませたい

React のテストの定番 Jest + Enzyme の構成で、React 16.x 系だと Enzyme の Adapter を読み込ませる必要がり、今までは下記の用な感じで Adapter を読み込ませるファイルを作りテストファイルで都度 import をしていました。 setup.enzyme.js import Enzym…

TypeScript オブジェクトのデフォルト値を Array.reduce で設定しようとしたら型指定でハマった

APIからあるオブジェクトが渡され、フロントでデータが無ければデフォルト値を付けるような処理を TypeScript で書いていてハマったのでメモ。 ※ フロントは React です API から渡されるデータ InitUnitData = { first: { id: 1, name: '春風 わかば', type…

RSpec Capybara name / id のない input の fill_in にハマる

プロダクトの施策であるフォームを react component に置き換えた所、元々あった feature spec で fill_in していた部分が Capybara::ElementNotFound: で落ちるようになってしまいました。 fill_in は id か name が無いと選択できない? 新しくした React …

TypeScript type を & でいい感じにマージしたい。

TypeScript はちゃんと学習していないのですが、関わっているプロダクトが ts, tsx なので触る時に雰囲気で使っています。 今回はあるコンポーネントをラップするコンポーネントを作成していて、バックエンドから渡される値が、ラップするコンポーネントに定…

Git リモートのブランチが先に進んでpushできなくなっているのをどうにかしたい。

複数人で同じブランチに手を入れていて、手元のブランチで変更をコミットして push しようとしたらリモートのブランチが force push とかで先に進んでそのまま push できない状態になっている時の対処方法のメモ --rebase オプションを付けて pull する $ gi…

Webpack dev-server で root になる URL を変更したい

TL;DR GitHub page で host されてる webサイトが webpack dev-server を使って開発されていたのですが、実際のサイトの URL は example.giyhub.io/repo_name/ だけど、開発環境が localhost/ で root のパスが異なっていて / 始まりのパスが使えず不便だっ…

JavaScript 要素を追加できる insertAdjacentHTML 試してみた。

VDOM が主流になってるから直に DOM 操作することすくなってると思うけど、innerHTML みたいにStringをHTMLとして追加できる insertAdjacentHTML っての初めて知ったので試してみた。 insertAdjacentHTML element.insertAdjacentHTML(position, text); inser…

JavaScript 数字のゼロ埋め(ゼロパディング)・少数の桁あわせがしたい

Viewで表示する時に桁揃えたいとかありがちなやつで、やり方結構忘れるからメモ ゼロパディング 001234 こんなやつ 先頭に 0 を足して slice する方法 伝統的な感じの方法。 const zeroPadding = (num) => (digits = 2) => { if (num.toString().length > di…

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に追加することができる!