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

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

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

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

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

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

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

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

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 分割代入な引数にデフォルト値を設定したい

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

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

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

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

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

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

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

JavaScript 配列のコピー

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

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

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

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

$ npx create-react-app my-app で、Reactのプロジェクトを作成しようとしたけど、プロジェクトのフォルダが作成されてない現象になっていた。 その時のログはこんな感じ $ npx create-react-app my-app ... yarn add v1.16.0 [1/4] Resolving packages... …

React create-react-app でプロジェクトを作成できないにハマる

react-create-app で作成した React Hooks を使ったアプリケーションのテストのメモ TL;DR 下書き途中にしたまま数ヶ月が経過してしまったので、少し情報が古くなってしまってるかもですが書きかけていた Jest + enzyme + act で React Hooks のテストをして…

React Hooks Jest + enzyme + act で useEffect を含むコンポーネントのテストする

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

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

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

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

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

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

こんなの 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>

React JSX 親コンポーネントから子コンポーネントの子要素を出力したい

GitHub の README とかによくあるバッヂをペタペタ貼ってみたかったので、CIのテストとカバレッジ計測をやってみました。 Travis CI は OSS (GitHub で public repo ならOKっぽい) なら無料っぽいという事だったので選びました。カバレッジの表示は Codecov …

JavaScript モジュールを Travis CI でテストして Coveralls でカバレッジを計測してバッヂを貼りたい。

Babel のインストールと設定ファイルの作成 $ yarn add -D @babel/core @babel/cli @babel/preset-env babel.config.js module.exports = { presets: [ [ "@babel/preset-env" ] ], }; Jest のインストール $ yarn add -D jest 公式ドキュメントによると bab…

Babel + Jest で JavaScript のテストをする

先に JSX 内で &nbsp; が含まれる場合のテストのハマりどころ書いてしまったけど、改めて JavaScript での扱いをメモ。 JavaScript での取得 <p id="elm">星宮&nbsp;いちご</p> const elm = document.getElementById('elm'); elm.innerText; // 星宮 いちご elm.firstChild.n…

JavaScript &nbsp; なスペースのあるHTMLの扱い

HTMLで時々見かけるやつ。 &nbsp; &nbsp; Non-Breaking Space 文中で折り返しさせたくない語句を繋ぐ時に使う特殊文字。 JavaScript で &nbsp; が含まれるHTMLを扱う時のトラップ コンポーネント時代の昨今だとJSXとかJavaScript内にHTMLを書いたりすること…

JavaScript, React &nbsp; なスペースのあるHTMLのテスト

React で作ったアプリを Jest + enzyme でテストしている時にTypeError: Cannot read property 'equal' of undefinedというエラーになったのでメモ enzymeのAPIリファレンスを見ながらこんなテストを書いていました。 describe("App", ()=> { const app = sh…

React Jest + enzyme 'equal' of undefined になる

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

create-react-app で作ったプロジェクトを npm run eject して webpack の秘伝のタレを眺めていて次ような記述を発見しました。 const loaders = [ // 略 ].filter(Boolean); 0 とか null とか undefined とか false になる値を配列から削除してる array.fil…

JavaScript 配列から null とか undefined を取り除く

VDOMなフレームワークを使っているとHTMLの属性を直接触る機会はあまりないと思いますが、カスタムデータ属性 data-* の操作には getAttribute / setAttribute より dataset を使うと簡単です。 カスタムデータ属性 data-* カスタムdata属性の名前はdata-で…

JavaScript data-属性の操作

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

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

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

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

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

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

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> ); } テンプレート構文 …

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