かもメモ

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

JavaScript

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 化するにあたって必要なパッケージ…

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…

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

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

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

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

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

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

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

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

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 のテストをして…

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

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

JavaScript `{}` なオブジェクトだけを判定したい

個人的に JavaScript の要素は全部 Object で、型の概念は実質存在しないという認識。(Stringも "foo".length とか使える訳だし) ある程度は typeof() で判別することができるけど、Ruby とかで Hash とか Python で DIctionary (辞書) とかと呼ばれるような…

初めての npm パッケージ公開したメモ

よわよわな npm のパッケージ公開したみたので、パッケージ公開までのハマりどころとかをメモ 公開した npm パッケージ 1. npm アカウントの作成 npm のサイト からアカウントを作成する。 Sign Up のフォームにも書かれているが、npm のアカウントのメール…

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 …