falsy

どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画される。 なんで〜〜〜〜と思ってたら、 stackoverflow.com これに書いてありました。 そう、0はfalseなんですね。numがtrueだと処理が&&の右に移りが描画される…という記述で、falseのとき…

TypeScriptでの話。特に下記のような値が0の場合の条件式の書き方に迷っている。 const func = (num: number) => { if (!num) { // numが0の場合、このif文に入る } if (num === 0) { // numが0の場合、このif文にも入る } } valueがnumber型でnullやundefinedをとり得ない場面を想定している。後者の方が前者より直感的にわかりやすい条件式だと思う。が、この条件だけだと-0やNaNの考慮漏れで思わぬバグを生む可能性がある（今まで-0に出会ったことはないが）。 書きながら、ちゃんと0以外のFalsy…

こんな感じの柱をつくるとき、セクションマーカーを使うことが多いです。 セクションマーカーはとても便利なのですが、 「一つ一つマーカーを設定するのはめんどくさい…」 「項目の増減があったときに設定し忘れそう…」 といった不満や不安がありました。 そこで、特定の段落スタイルが登場したらそのページをセクションの開始ページとし、セクションマーカーを設定するスクリプトを作成しました。 特徴としては、 柱の内容が「大見出し＋小見出し」になる場合にも対応しています。小見出しを括弧で括ったりもできます。 柱の文言を見出し以外の言葉にしたい（例えば「1章目.inddは見出しは無いけれど『はじめに』という柱にした…

イベント処理 Reactのイベント処理は DOM 要素のイベントの処理と似ているが、イベント処理文法的な違いがある。 camelCaseで名付ける JSX では関数を渡す デフォルト動作の抑止に preventDefault を使う HTML <button onclick="activeLases()"> Active Lasers </button> React <button onClick={activeLases}> Active Lasers </button> デフォルトの動作を抑止するには、 preventDefault が必須。新しいページを開くというリンクの動作を例に考えて…

どういう状況の話かと言うと、 num && ( <Text>{list[num]}</Text> ) のように、型がnumberの変数numが入っていたらlist[num]を描画したい、という状況。 で、numに1とか入ったら意図通り<Text>list[1]</Text>が描画されるのだけど、numに0が入ると、<Text>list[0]</Text>ではなく、なぜか0だけ描画される。 なんで〜〜〜〜と思ってたら、 stackoverflow.com これに書いてありました。 そう、0はfalseなんですね。numがtrueだと処理が&&の右に移りが描画される…という記述で、falseのとき…

はじめに これは「フィヨルドブートキャンプ Part2 Advent Calendar 2020」11日目の記事です！ adventar.org フィヨルドブートキャンプ Part 1 Advent Calendar 2020はこちら adventar.org きっかけ 配列に対してループ処理したいなって思ったとき、どうしますか？ 私はfor文かfor...of文が浮かびます。 forEachなんてのもJSPrimerにあったかも...と頭に浮かんでもコールバック関数何それ状態で避けていました。 実際、過去に書いたプログラムのFizzBuzz問題、カレンダー問題などを見返してもfor文かfor…

この記事はテックタッチアドベントカレンダー2日目の記事です。 1日目は mistyによる Postman をチームで運用していくためにフォーク機能を使ってみた でした。 フロントエンドエンジニアの国定です。久しぶりにポケモンで遊び始めたのですが、PokemonHOME というマルチプラットフォームのクラウドサービスでポケモンを一元管理できるようになってて感動しました。 テックタッチで使っている TypeScript を3.9から4.1に更新したので、影響の大きそうな変更を紹介します。

暗黙的型変換 → ある処理において、その処理過程で行われる明示的ではない型変換のこと == と === の違い。 // `==`では、異なるデータ型は暗黙的な型変換をしてから比較される // 暗黙的な型変換によって 1 == 1 のように変換されてから比較される console.log(1 == "1"); // => true // 暗黙的な型変換が行われ、数値の加算として計算される 1 + true; // => 2 // 次のように暗黙的に変換されてから計算される 1 + 1; // => 2 厳密等価演算子 === を使えばOk。正直、等価演算子の比較結果を全部覚えるのは無理 真偽値 …

JavaScript の parseInt, parseFloat は 10px とか単位がある文字列でもいい感じに数値変換して返してくれますが、空文字列 "" の時 NaN が返されます。その後の計算でエラーになることも多いので NaN の代わりに 0 を返したいときのメモ 空文字や undefined が渡された時 parseInt, parseFloat は NaN を返す parseInt("10px"); // => 10 parseInt(""); // => NaN parseInt(undefined); // => NaN parseFloat('2.5rem'); // =…

10/20 にリリースされた Node.js v15 の主な変更点を紹介します。 nodejs.org 15,000 文字以上あるので、適宜気になったところをお読みください。 npm v7 が同梱 V8 v8.6 ES2021 の機能追加 Promise.any and AggregateError String.prototype.replaceAll Logical assignment operators Web Crypto API の追加 AbortController の追加 EventTarget の追加 Node.js EventTarget vs. DOM EventTarg…

はじめに 各種バージョン 第14章 リスト14.4: Relationshipモデルのバリデーションをテストする リスト14.9: Relationshipモデルのバリデーションをテストする リスト14.13: followersに対するテスト リスト14.24: フォロー/フォロワーページの認可をテストする リスト14.29: following/followerページのテスト リスト14.31: リレーションシップの基本的なアクセス制御に対するテスト リスト14.40: [Follow] / [Unfollow]ボタンをテストする リスト14.42: ステータスフィールドのテスト

jsprimer.net 目的、モチベーション 最近はバックエンドしか触ってなくて、久しぶりにフロントエンドのキャッチアップしておきたかったから。 全体の感想 最近のJavaScriptを知らない人や、雰囲気で触っている人には良いと思った。 本がGitHubで管理されていて差分も把握しやすいため、新しいバージョンが公開されたときにも部分的にキャッチアップしやすくて良いと感じた。 これが無料で読めるのは本当にありがたいなと思った。 目次 目的、モチベーション 全体の感想 目次 メモ 第一部: 基本文法 変数と宣言 データ型とリテラル BigInt 文字列（String） [コラム] undefi…