#javascript

JavaScript/TypeScript における Array.prototype.reduce() (以下、reduce() とする) は配列から単一の値を作るために使われるメソッドである。典型的には次のような使われ方をする。 const total = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reduce((prev: number, curr: number) => { return prev + curr; }, 0); console.log(total); // 55 配列にある複数の要素を、単一の値に reduce (= まとめあげ) している、ということだ。 reduce で、配列を単一のハッシュに変換することもできる。次のような配列を考えよう。 [ { name: "ケンシロウ", style: "北斗神拳", strength: 10, }, { name: "ジャギ", style: "北斗神拳", strength: 5, }, { name: "レイ", style: "南斗聖拳", strength: 8, }, ]; これを次のように変換したいとする。 { "ケンシロウ": { "style": "北斗神拳", "strength": 10 }, "ジャギ": { "style": "北斗神拳", "strength": 5 }, "レイ": { "style": "南斗聖拳", "strength": 8 } } この変換は reduce を使うと簡単に実現できる。 [Read More]

転職にともないフルスタックエンジニアとして仕事をするようになったので、フロントエンド技術にも手を出すことが増えてきた。この領域は不得手で苦労している。 先日、仕事の一部としてボタン画像 (i.e., <button /> の中に <img /> を入れて、画像をクリック可能にしたもの) を実装した。このとき、クリック後のボタンには「選択済み」であることを示すために枠線をつけたいという要望があり、この課題にどうアプローチしたかについて、メモを残そうと思う。 パターン1 (JavaScript を使わないパターン) 先に実装を示す。 See the Pen VEYRqX by mahata (@mahata) on CodePen. ボタンの縦幅と横幅を 104px 取っている。これは 100px の画像に、二本ずつ 2px のボーダーを入れるため 100 + (2 * 2) で 104px と計算している。 初期状態ではボタンに透明なボーダーを入れており、ボタンが押されたとき (= :focus 擬似クラスが有効になったとき) にボーダーの色を red に変更している。 次の部分はボタン内の画像を中央寄せするために書いている。 .button { display: flex; justify-content: center; align-items: center; ... } 画像は縦幅と横幅が 100px で表示しているため、透明なボーダーの中にぴったり収まる。 パターン2 (JavaScript を使うパターン) こちらも先に実装を示す。 See the Pen VEYRqX by mahata (@mahata) on CodePen. [Read More]

REPL で複数行の入力を行う方法

Node.js の REPL で複数行の入力を行うには .editor とタイプすればよい。.editor とタイプしてから Ctrl-d をタイプするまでの範囲をインタプリタが解釈する。

$ node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> .editor
// Entering editor mode (^D to finish, ^C to cancel)
const foo = 'bar'
foo

(^d をタイプして REPL を終了する)

'bar'

REPL で直前に評価した値を再利用する

Node.js の REPL で直前の値を参照したい場合は _ 変数を使う。次に使用例を示す。

$ node
Welcome to Node.js v14.2.0.
Type ".help" for more information.
> [1, 2, 3]
[ 1, 2, 3 ]
> _[0]
1

なお、直前のエラーは _error 変数に入れられる。