JavaScript関連のことを調べてみた2022年10月11日

依存パッケージの脆弱性修正には、package.jsonのoverrides / resolutionsフィールドを使いましょう

## はじめに

この記事は、npmとyarnの依存関係ツリーを上書きする`overrides` / `resolutions`フィールドの使い方を共有するためのものです。

### 想定する環境

– node.js 16.17.1
– npm 8.15.0
– yarn v1.22.19

:::note warn
overridesフィールドは、npm [v8.3.0](https://github.com/npm/cli/releases/tag/v8.3.0)で導入されました。それ以前のバージョンでは動作しません。
:::

:::note warn
この記事は[yarn v1](https://classic.yarnpkg.com/lang/en/)系統を対象としています。[yarn v2+](https://yarnpkg.com/)では挙動が変わるかもしれません。各自でご確認ください。
:::

## 依存関係ツリーを上書きして脆弱性に対応する

依存パッケージが以下のような状態だと、セキュリティ更新に追従するのが難しくなります。

– 脆弱性を持ったパッケージに依存

React: イベントとエフェクトにロジックを分ける

本稿執筆時現在、「React Docs」(BETA)の公開が進んでいます。その中の記事のひとつ「[Separating Events from Effects](https://beta.reactjs.org/learn/separating-events-from-effects)」は、イベントとエフェクトのロジックををどのように切り分けるか解説したていねいな記事です。

本稿は基本的に記事の情報は網羅しているものの、邦訳ではありません。足りない部分は補ったり、説明の仕方を改めたり、不要と思われる記述は削除しました。また、公式サイトと異なり、サンプルコードはモジュール分けし、さらにTypeScriptも導入しています。

イベントハンドラは、あらかじめ定めたインタラクションを行ったときにのみ再実行されます。それに対して、プロパティや状態変数のような読み取った値が、直前のレンダリング時と異なるとき再同期するのがエフェクトです。場合によっては、ふたつの動きを組み合わせたいかもしれません。エフェクトをある値に応じては再実行し、他の値には応答させないというときです。こういう処理の考え方につ

lodashのimportでtree shakingが効かないパターン

先日、仕事でこんなコードに出会いました。

“`js
import _ from “lodash”;

// ここは適当なオブジェクトです
const user = {
username: {
first: “taro”,
last: “yamada”,
},
};

_.cloneDeep(user);
“`

あれ？この書き方ってtree shaking効くのかな？
そういえばlodashって、lodash-esと2パターンあったけど、何が違うんだっけ？
と思ったので、試してみました。

## 結論
先に結論ですが、こうなりました。
lodashはES Module形式で書かれていないため、tree shakingを使用するにはlodash-esを使用する必要がありました。

| パターン | ファイルサイズ | tree shaking |
| ———————————— | ————– | ———— |
| lo

Python,Ruby,PHP,Java,JavaScript,Perlの自動試験(ユニットテスト)の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの自動試験(ユニットテスト)の比較

# Python

https://qiita.com/_dakc_/items/e663359c81645bc4e65e

# Ruby

https://qiita.com/jnchito/items/ff4f7a23addbd8dbc460

# PHP

https://qiita.com/yamato1491038/items/7aa0168a6145749db78c

# Java

https://qiita.com/ryuutamaehara/items/c8efb304b73cc0542e6f

# JavaScript

https://qiita.com/jintz/items/61af86a12b53b24ef121

# Perl

https://perlzemi.

【TypeScript + Webpack】今すぐ誰でも、ローカルで GoogleAppsScript の開発を始められるテンプレート (初心者向け)

# ? 作ったもの
ローカルで TypeScript を使った GoogleAppsScript の開発を
**今すぐ・誰でも**はじめられるテンプレートです。

▶︎▶︎▶︎ **TypeScript で GoogleAppsScript の開発を始めるテンプレート** ◀︎◀︎◀︎

できるだけプロジェクトの内容をシンプルにするために
『TypeScript で GoogleAppsScript の開発をする』
ことに関係のないものはプロジェクト内にほとんど含めていません。

過去の僕がファイル数が多くなると
どのファイルが何に効いているのか分からなくなって思考停止してしまうマンだったため、
過去の僕向けに作った結果、シンプルになりました。

# ?‍♀️ 対象者

下記のような願望を持っている、
何度か GAS 開発をやったことがある人を想定しています。

– GAS で開発したプロ

Webページにツールチップを出すには？

# Webページにツールチップを出すには？
1. ツールチップ要素に、以下のスタイルをあてておく。
“`
position: absolute;
box-shadow: 3px 3px gray;
z-index: 適当な大きな数;
“`
1. 一旦、適当な位置指定で配置
1. getBoundingClientRectで配置位置を得る
1. 本当に配置したい位置との差分を計算して、位置指定して配置

# コード例

【JavaScript】URLSearchParamsを使っていい感じにURLパラメータを作る

# 概要

以前投稿した[【JavaScript】URLパラメータを今風に取得する](https://qiita.com/g-iki/items/8c6dbc8f55051fce834c) で使用した[URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)を使用すると、いい感じにURLパラメータを作ることができたのでそのメモです。

# あんまりおしゃれでない実装(個人的主観)

“`js
location.href = ‘/search?’
+ (q ?? ‘q=’ + q)
+ (start ?? ‘start=’ + start)
+ …
“`

(パラメータはGoogle検索のキーワードとページ)
パラメータ指定があったらひたすら文字列結合をしていく方法。
パラメータが少ないうちはいいですが、なんか野暮ったい感じ。。。

# いいかんじの実装(個人的主観)

– URLパラメータをすべて作る
– もともとのURLパラメータの内、一部分だけを書

javascript1・2終了

大学でC言語を習っているため、文法は違うものの考え方は一緒なのでサクサク進むことができる。
progateは非常によくできているサービスなので普通に進めていればエラーになることはなく、正直つまらないので早く自分で構想したものをコーディングしたい。

pythonの自動化も興味があるし、kaggleに出場してスコアを競い合いたい欲もある。機械学習や深層学習も勉強したい。やりたいことを絞って取り組んでいきたい。

令和のReact再挑戦

# 令和のReactに再挑戦

## はじめに
過去記事でVueについての記事をいくつか書いておりますが、実はSPAの勉強をし始めた当初、Reactに挑戦しなかなかわからなかったためVueで学習を進めたという経緯があります。
今回は令和になったということで、Reactに再挑戦してみようというものです。

以下の方向けに書いていきたいと思っております。
– Reactの初学者
– javascriptは書いたことがある
– webアプリを作りたい

## そもそもReactとは

Reactの公式サイトをみると以下のように言葉が添えられています。
**「ユーザインターフェース構築のための JavaScript ライブラリ」**

ブラウザ上に表示する全体をコンポーネントという単位に分解し、そのコンポーネントを実装するのに非常に楽な開発体系を提供するライブラリと考えております。よりUIライクな発想で開発を進めるためのライブラリとも取れるかと思います。

## React を起動する

Reactを起動するにはPCにnpmもしくはyarnのコマンドを叩ける状態にしてもらいたいと思います

ball sort puzzleを作ってみた

# はじめに
そのままなんですが、ball sort puzzleを作ってみました。
作ったきっかけは、妻が広告がうざいというから、そんなの簡単に作れるわとうっかり言ってしまい、３連休がつぶれました。

こんな画面のものです。広告は出ませんｗ
ボールの色と深さ、空きの数を指定して、開始します。

実行環境はこちら
http://ball-sort-puzzle-yo16.herokuapp.com/

ソースはこちら

https://github.com/yo16/ball_sort_puzzle

# 技術的なこと
いつものとおり、JavaScriptでやってしまいました。新しいことを身に着けたいと言いながら、いつも同じパターンに戻ってしまう。

d3.jsを使って、ボールを描いたり移動させました。d3.jsともだいぶ仲良しになってきました

Three.jsでおみくじアプリを作りました

# はじめに

最近占いに興味が出てきたのとThree.jsで何かアプリ作りたいな～とずっと思っていたんですが、
そうだ！おみくじアプリ作ればいいんや！ということでおみくじアプリをサクッと簡単に作ってみました

では早速作ったアプリを紹介します
こんな感じのアプリです！


おみくじの木箱と棒をイメージして、棒を出し入れすることで運勢を占うという非常にシンプルなWebアプリを作りました!!
スクロールで棒が動きます

# デプロイ先

アプリのデプロイ先はこちらになっています
https://omikujidaikicchi.vercel.app/

なお、PCのブラウザでChromeでしか動きませんのでそこは注意してください

# 使用技術

[言語]
・JavaScript

[ビルドツール]
・Vite
-> Vanilla

[アプリで

Node-RED MCU Editionでネットワーク接続(HTTP, MQTT)してみた。

# はじめに

Node-RED MCU Editionの環境構築、簡単なフロー、Lチカの動作確認まで終わったので、ついにネットワーク接続(HTTP, MQTT)を試してみます。

環境構築と動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/15cba2f4622bf3682083

GPIOの動作確認については以下を参照してください。

https://qiita.com/kitazaki/items/bac2b860b7d26fb450f4

# 前提条件

– Intel MacBook Pro (2017)
– macOS Big Sur (バージョン 11.7)
– M5Stick-C
– ボタンA (GPIO37)

【緊急】トイレの蓋を閉め忘れ彼女にブチギレられたので、obnizを使って解決しにいった話

# やばい状態です
現在、彼女と半同棲しているのですが、人間が共に暮らすと様々な問題が発生します。
我々の場合、それはトイレで起こりました。
僕はとてもズボラな人間で、よくトイレの蓋を閉め忘れてしまいます。
僕自身、「だから何？」程度の話なのですが、彼女はそれを許すことができないようで、この世の終わりくらいキレ散らかします。

いつもならば彼女に平謝りをして許して頂いているのですが、あまりに改善されないので、ついに彼女が僕に対して「制裁」を始めました。
**晩ご飯が豆腐とキムチだけになったのです、、、、**
さすがにいつか死んでしまう気がするので、緊急でなんとかしようと躍起になっております。

# インスパイアを受ける
そんなとき、これを見つけました。

https://twitter.com/togenkyoo/status/1413742448036126722?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1413742448036126722%7Ctwgr%5E1706c5c7d80f021a34cfa6953b83e

【Salesforce】【資格】Salesforce 認定 JavaScript デベロッパー 合格までのあれこれ

当記事は受験体験記です。
※2022年9月時点(Summer ’22)の情報です。
※あくまでもぴえさん個人の考えです。

# Salesforce 認定 JavaScript デベロッパー とは　（ざっくり）
・webassessor試験の合格とTrailheadのスーパーバッジの達成で資格が付与される
・スーパーバッジはLWCの課題が課される
・試験はJavaScript アプリケーション開発の知識が問われる
　　受験資格：なし
　　受験料：税込22,000円
　　105分60問（合格基準は65％以上）
　　選択式（ソースコードを書くような出題はない）

# ぴえさんの受験記録
【受験日程とバージョン】
日時：2022/9/25　13:00
受験方法：オンサイト受験（最寄りの会場）
バージョン：Summer ’22

【受験データ】
ウェブアセッサーのスクショ↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1461666/2c96eb59-f901-69ac-1c7e-346571

人事のおじさんプログラミングを学ぶ Day15「小数点第〇位で切り捨てる」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
小数点を任意の位取りで切り捨ててみた。
細かな記述内容はさておき、考え方を大事に学習を進めます。

仮想DOMの差分検知を実装してみた

# 仮想DOM
​
DOM構造の状態をJSで保持することによって、実際のDOMにアクセスする回数を減らし、DOM更新の際に高パフォーマンスを発揮できる。
​
“`html

ユーザー

コメント

“`
このようなHTMLがあったとしたら、SPAを使う際、JSで
​
“`ts
const ui = {
element: “article”,
children: [
{
element: “cite”,
innerText: “ユーザー”,
},
{
element: “p”,
innerText: “コメント”,
},
{
element: “img”,
src: “https://…jpg”,
},
],
};
“`
​
のようにDOMを保持します。仮想DOMの一部しか更新していないのに、差分を含まないElementごとす

Cordovaアプリ開発の備忘録(プラグイン編)

前回の投稿では、Cordovaアプリの基本的な開発手順についてまとめました。
今回は、プラグインの開発手順についてまとめようと思います。

Plugin Development Guide

https://cordova.apache.org/docs/en/11.x/guide/hybrid/plugins/index.html

# プラグイン名を決める

まずは、プラグイン名を決めましょう。
今回は適当に「sampleplugin」とでもしておきましょうか。

フォルダ名は、慣例があり、「cordova-plugin-sampleplugin」となります。

“`
> mkdir cordova-plugin-sampleplugin
> cd cordova-plugin-sampleplugin
“`

# plugin.xmlを作成

“`xml:cordova-plugin-sampleplugin/plugin.xml
自分用のESLint Shareable Configをつくった

自分用のESLint Shareable Configをつくり、npmパッケージとして公開しました。

## なぜつくったのか

自分が管理しているJavaScript/TypeScriptのリポジトリにおいて、中身がほとんど同じESLintの設定ファイルがいくつか存在していました。
これではメンテナビリティ的によろしくないので、共通化できそうな部分をShareable Configとして公開することにしたのです。

## 事前調査

パッケージをつくるにあたり、JavaScript用パッケージとTypeScript用パッケージの依存関係をどのようにすべきか、事前調査をしました。

https://qiita.com/munieru_jp/items/c9b26cf9984a09f73d6f

そのうえで、まずはJavaScript用パッケージをつくり、その後TypeScript用パッケージをつくる際にJavaScript用パッケージを依存に含めるかどうか考えることにしました。
結果的に、TypeScript用パッケージはJavaScript用パッケージに依存しないような構成になりまし

JavaScriptで自作言語インタープリタの作り方

自作言語やインタープリタの作り方の勉強。

書籍「[GO言語でつくるインタプリタ](https://www.oreilly.co.jp/books/9784873118222/)」で紹介されている、Monkey言語のインタープリタを作成します。


著者がGOのコードを[公開](https://interpreterbook.com/waiig_code_1.7.zip)していますが、読者によって様々な言語に移植されています。
今回は他者のコードを参考にJavaScriptで書いてみました。(本を買うのは後回しにした)

https://monkeylang.org/

## インタープリタ ＝ Lexer ＋ Parser ＋ Eval

|機能 |解説|
|:-:|:-|
|**Lexer** |ソースコードを先頭から1文字ずつ読み込んで、プロ

TypeScript でライブラリを使わずに簡易 throttle, debounce

“`typescript:throttle.ts
function throttle(fn: (…args: any[]) => void, wait: number) {
let timerId: number | null = null;
return (…args: any[]) => {
if (timerId !== null) {
return;
}
timerId = window.setTimeout(() => {
fn(…args);
timerId = null;
}, wait);
};
}
“`

“`typescript:debounce.ts
function debounce(fn: (…args: any[]) => void, wait: number) {
let timerId: number | null = null;
return (…args: any[]) => {
if (timerId) {
cl