かもメモ

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

2019-01-01から1年間の記事一覧

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…

Git 空コミットしたい

最初のコミットが rebase しづらいから最初のコミットを空コミットにしたかったり、CI 回すテストしたいから空コミットで push したいような時のアレ。 --allow-empty オプションを使う $ git commit --allow-empty -m :sparkles: (完) ノンプログラマーなMa…

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

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

Googleスプレッドシート QUERY で取ってきたデータの複数のセルをそれぞれフォーマットしたい

数値で計算しているシートから QUERY や IMPORTRANGE を使ってデータを取ってきて、SELECT文で必要な絡むだけにした上で単位を付けたりフォーマットして表示したい。 元のデータ例 シート名 販売目標 A B C D E 1 エリア 消費量 (kl, 2016) 目標売上量 (kl) …

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

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

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

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