JavaScript関連のことを調べてみた2021年12月28日

Node.jsでimport・export（ES6の構文）を使えるようにwebpack × Babelの設定をやってみた

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n77562e0926e3

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

## 補足
### 設定全体は以下を参照

https://github.com/yuta-katayama-23/node-express/tree/d3224ed684d0a96894fd112b049d4ca8db9ef776

### おまけ
今回、Node.jsでimport・export（ES6の構文）を使えるようにする方法を見てきたが、上記のように`import ‘core-js/stable’;`, `import ‘regenerator-runtime/runtime’;`と書かないでも動く場合もあり混乱した。ちょっとどのパターンならbuildして動くのか？を調査してみたので以下にまとめてみた。

**※注意
　今回検証に使ったコードだから動いただけの可能性もあり、この辺りはまだ理解が完全ではないため参考情報程度に見て頂ければと思います**

TypeScriptチートシートその１

1:boolean,number,string

“`typescript
let aaa: boolean = true
let bbb: string = “string”
let ccc: number = 100
let ddd: number = 3.14
let eee: number = -1
“`

2:型注釈と型推論

明示的に書かなくても、代入した型から推測してくれる

“`typescript
let aaa = true
let bbb = “string”
let ccc = 100
“`

3:オブジェクトに型を付ける

“`typescript
const person: {
name: string;
age: number;
} = {
name: “jack”,
age: 20,
};

“`

4:配列

“`typescript
const fruits:string[] = [‘apple’,’banana’,’grape’]
“`

【kintone】テーブルの入力内容の重複チェックの方法を紹介

##はじめに
kintoneのテーブルの入力内容の重複チェックの方法について紹介します。

このようにテーブル内に1つの項目がある状態を前提としています。
今回はルックアップを使用しているため、同じデータを取得してしまうケースが発生することを考慮し重複チェックを入れました。

##kintoneでの挙動
1行目と3行目に同じ値、2行目と4行目は空で入力して保存ボタンを押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazon

Node.jsのworker_threadsで並列処理

Node.jsでworker_threadsを使うとき、非同期処理の使い方にコツがあったのでメモ。

# 並列処理の基本

Node.jsでworker_threadsを使うと並列処理が可能です。
以下の二つの記事がとても分かりやすいです。

– (参考1) [Node.js: CPU負荷で3秒かかっていた処理を「Worker Threads」で1秒に時短する](https://qiita.com/suin/items/bce351c812603d413841)
– (参考2) [Node.js Worker Threads: スレッド間でデータを送受信する方法](https://qiita.com/suin/items/8fb7f77dd0a994b6f524)

上記を一口で言うと、以下のようになります:

“`main.js
// ワーカーを作成する
const {Worker} = require(‘worker_threads’);
const worker = new Worker(‘./worker.js’);
// ワーカーからの結果を受ける
worker.on(‘m

[JavaScript] flat関数の自作

タイトルの通り、flatを自作してみました。

Array.prototype.flat() と同じように depth のデフォルト値を1にしていますが、デフォルト値はundefined か 0 にして無限回まわす方がいいんじゃないかと迷うところです。

“`js
const flatFull = (array) => flat(array, 0);

const flatOne = (array) => flat(array, 1)
“`

可読性を高めるには、こんな関数書いておくのもいいのかもな。と迷いつつ。

## flatのコード

“`js
const flat = (array, depth = 1) => {
const _flat = (array) => {
let iOffset = 0;
for (let i = 0, l = array.length; i < l; i += 1) { const element = array[i + iOffset]; if (Array.isArray(element))

[JavaScript] Class の継承元をたどって property を全て列挙する

## はじめに

JSのクラスのメソッドは列挙属性がないので、for…in では列挙できません。結構不便。

getOwnPropertyNames では自分自身のプロパティは、列挙属性がないプロパティでも列挙できるので、それをprototypeをたどって、すべて列挙するようにできる関数を作りました。

次のページを大変参考にさせていただきました。

> JavaScript Classのpropertyとmethodを列挙する – Qiita
> https://qiita.com/BlueSilverCat/items/fc530e096a40beeb2a43

リンク先記事では、getAllMethodNames と getAllStaticMethodNames と getAllPropertyNames とがそれぞれ別関数になっていますが、

JSの場合結局は、Object.prototype が根っこにあり関数でもオブジェクトでも同じ扱いができるので、自分のコードでは統合しました。

JSではメソッドもプロパティの一部なので、メソッドなのかプロパティなのかは、そのプロパ

Expo SDK44で新しいJSX Transformが使えるようになった

[Expo SDK44のアナウンスブログ](https://blog.expo.dev/expo-sdk-44-4c4b8306584a)に以下のように書いてあります。

> **React 17 JSX transform now enabled by default**: this means that you don’t need to write `import React from ‘react’;` at the top of every source file that uses JSX. [Learn more about the transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) and [how you can disable it](https://github.com/expo/expo/blob/master/packages/babel-preset-expo/README.md#jsxruntime), if you prefer.

非エンジニアでも3分でChrome拡張を作ってQOLを上げる

# 背景
楽天市場、便利ですよね。みなさんもよく使われると思います。
我が家でも良く使われています。

https://www.rakuten.co.jp/

### PCで商品を探し、スマホで決済したい
楽天市場には、スマホアプリで決済すると獲得ポイントが+0.5倍になるというキャンペーンがあります。

こちらのキャンペーン、商品が見やすいからとPCでショッピングをしていると、ついつい決済までそのまま行ってしまい、
購入完了後の画面を見てから「スマホアプリで購入すればよかった〜〜！！！」となりがちです。

# それ、拡張機能でどうにかなるのでは？
以前からChrome拡張機能を作ってみたいと思っていたため、ぱぱっと作ってみることにしました。

要件は以下です。

– 楽天市場でカートを表示した際、「スマホアプリで購入するように！！」と促すメッセージを表示する
– なるべく気付きやすい形が良い
– メッセージ表示中は注文確定ボタンなどが押せない

# 拡張機能を作っていく

Chrome拡張機能を作るにあたり、必要なファイル構成は以下です。

– content.js (機

固定バナーをつくる

#はじめに
単純だが自分のような初心者のために書いておく。

#手順

* 画像とｘをボタン記述。
* デザインする。
* ×ボタンで閉じるのを実装する。

#コード

とりあえず、一気に書いて順々に説明。

“`html

ｘ