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

JavaScriptでFizzBuzz作成してみた

# FizzBuzzとは
プログラミングの問題（課題）のことです。
プログラミング力を図るものです。
下の記事に説明があります。

https://wa3.i-3-i.info/word18535.html

# FozzBuzz作成
以下を出力させます。

1. ***1から1000までJavaScriptで出力させてください。***
2. ***そして３の倍数がFizz,5の倍数がBuZZを出力させてください。***

“`js
function fizzbuzz() {
for (i = 1; i <= 1000; i++) { if (i % 3 === 0 && i % 5 !== 0) { console.log("Fizz"); } else if (i % 3 !== 0 && i % 5 === 0) { console.log("Buzz"); } else if (i % 3 === 0 && i % 5 === 0) { console.log("FizzBuzz"); } else {

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

優柔不断なのでお昼ご飯を決めてくれるbotをGASで作る

# はじめに

:::note info
[TLB Enjoy Developers Advent Calendar 2022](https://qiita.com/advent-calendar/2022/tlb-enjoy) の14日目の記事です。
:::

**ある日のお昼**
職場の人「今日の昼ごはん何食べます？」
自分「うーん、、、 **なんでもいい** です」

**次の日のお昼**
職場の人「今日の昼ごはん何食べます？」
自分「うーん、、、 **なんでもいい** です」

こんな不毛な会話をほぼ毎日している気がします。

優柔不断な自分はお昼ご飯を決めることができません。
お昼ご飯すら決めることのできない人間にプログラムの変数名を決めることはできませんし、実装期日を決めることもできません。
そしてSlackの返信は後回しにして溜まり続け、スケジュール管理もできないんです。きっとそう。

そういえば人間には1日に判断できる回数が決められているみたいな話をどこかで聞きました。
決断の度に脳みそに負担がかかって決断力の精度が落ちるみた

StripeとReactで、銀行振込やコンビニ決済などの複数の決済手段を表示する方法と見た目のカスタマイズ方法

この記事は、[React Advent Calendar 2022](https://qiita.com/advent-calendar/2022/react) 14日目の記事です。

Stripeでは、Checkout / Payment Linksなどのリダイレクト型の決済フォームとは別に、埋め込み型の決済フォーム「Elements」を提供しています。

https://stripe.com/jp/payments/elements

Stripe.jsやiOS/Android SDKを利用してElementsをサイトやアプリに埋め込むことで、提供するサービスの中で決済体験を完結させることができます。

## Elements組み込みの前準備（サーバー側でのPayment Intent作成）

Stripe Elementsでの決済フォーム組み込みには、サーバー側の処理が必要です。

“`js
const stripe = new Stripe(STRIPE_SECRET_KEY, {
apiVersion: ‘2022-11-15’
});

【React】useStateとuseReducer、使うのはどっち

# 概要
この記事はWano Group Advent Calendar2022 14日目の記事です。
https://qiita.com/advent-calendar/2022/wano-group

Wanoで[Video Kicks](https://www.tunecore.co.jp/video-kicks?via=115&gclid=Cj0KCQiAnNacBhDvARIsABnDa69Iao9-3UA-EV_kKfrduesrPQv0iY11LOWSoHOxNWMAhM-GxBE64qcaAskqEALw_wcB)という
ミュージックビデオをiTunesやApple Music、レコチョクMUSICストア、dミュージック、GYAO!、LINE MUSICなどのビデオ配信ストアで配信/販売できるサービスを開発しています。

私は最近Reactを使い始めたので、useStateとuseReducerの違いと、どちらを使うべきかについて考えていきます。

# 環境
Vite,React,Typescriptを使用しています。

# 結論

#### 基本はuseReduce

お客様へ適切に「HRBrain」を届けたい

こんにちは！
株式会社HRBrainでPdM（プロダクトマネージャー）の小西です。
この記事はHRBrainのAdvent Calender1の14日目の記事です。
この記事ではお客様へ適切に「HRBrain」を届けるための取り組みについて書いていきます！

https://qiita.com/advent-calendar/2022/hrbrain

## 自己紹介
– 2016年新卒で通信キャリアへ入社し、法人営業、営業企画などに従事
– 2021年4月にHRBrainのCSへ入社、半年ほど導入後のオンボードチームで顧客の導入後の支援を行い、テックタッチチームでPJを推進
– 2022年8月からPdMへ異動となり、タレントマネジメントや外部連携のプロダクトを担当

## 何について書くか
お客様がHRBrainを活用して業務やビジネスに役立てるには、機能を知り、活用方法を理解頂く必要があります。

そのためにSalesやCSメンバーが日々の打ち合わせ等で直接伝えることに加え、様々なツールを活用しています。
この記事では特に「ツールを活用してプロダクトを届ける方法」に

[Day14] クラス part2

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

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

## 9.５ 組み込みのクラスを拡張する
### 知らない単語
– ネイティブとは
– 主にソフトウェアにおいて、あるCPUやオペレーティングシステムが本来サポートするインターフェイスを利用するもの

### 学んだこと
Array、Map などの組み込みのクラスも拡張可能である

例えば、下記は PowerArray がネイティブの Array を継承している
“`javascript
// 1つメソッドを追加している
class PowerArray

JavaScriptの同期/非同期処理について整理してみた

:::note info
この記事はOPENLOGI Advent Calendar 2022の14日目の記事です。
:::

## はじめに
私は新卒でSIerで2年ほど働いた後にオープンロジに今年の5月に入社し、バックエンド(PHP/Laravel)、フロントエンド(JavaScript/React)で開発をしています。

前職はバックエンドの開発経験が多くフロントエンドの経験があまりない状態で入社したのですが、入社後にフロントエンドの開発でJavaScriptを触る上で躓いたことの一つに同期/非同期処理があります。

JavaScriptで非同期処理というと、PromiseやAsync/Awaitなどを思い浮かべる方も多いと思います。

私もコードを触る中でPromiseやAsync/Awaitを見る機会があったのでそれらの使い方について調べていたのですが、調べていくうちにPromiseやAsync/Awaitを理解するにはまずはJavaScriptの同期/非同期処理とはどういったものか知る必要があることに気づきました。

これまでは細かい修正が多くかったのでなんとかなっていまし

【N】Null, Undefinedの違いを雰囲気で理解した気になりたい

これ、言語化難しいよね〜

## Nullとは？

『”なにも無い”がある』

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/null

## Undefinedとは？

『”無い”』

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined

## 違い

**Nullはある、Undefinedはない**

『”なにも無い”がある』ってつまり無いってことじゃんと思ってはいけない

## 例え

### 郵便配達

Null……その住所が示す場所は存在するが、そこに家はない
Undefined……そんな住所はない

### 変数を箱で例えて教えた人相手

Null……その箱はここにあるが、何も入っていない
Undefined……そんな名前の箱はない

## 課題

String型の空文字列`””`との区別もつけるとなるとやばいですよね
`””`も『”なにも無い”がある』

Deno入門[インストール、環境構築、ファイル実行、標準ライブラリ]

この記事は筆者の[ソロ Advent Calender 2022](https://qiita.com/advent-calendar/2022/panda) 14日目の記事です。

前回までKotlinとテスト中心に記事を書いてきましたが今回からJavascriptランタイムであるDenoに入門してみたのでその備忘録です。

# Denoとは
Denoの情報はまだ少ないにしろ大変わかりやすくまとめていただいている神記事があるので詳しくはそちらを

https://qiita.com/azukiazusa/items/8238c0c68ed525377883

https://zenn.dev/uki00a/books/effective-deno/viewer/what-is-deno

公式はこちら
https://deno.land/

# なぜ書くのか
普段はサーバーサイドエンジニアとしてKotlinを書いていますが、世の中のトレンド的なものを考えるとフロントエンドを書かないにしてもTypeScriptのキャッチアップをしておかないといろんなものから置いていかれそうという焦燥感

RustとWebAssemblyでDOMを操作する

## 概要
WebAssemblyを使用して、HTMLのDOMを操作することを目的とします。
メモベースで書いていきます。

## まずはプロジェクト作成
`cargo new`でライブラリのテンプレートを作成します。

“`bash
$ cargo new –lib dom
“`

### Cargo.tomlに追記
多言語からもビルド後のライブラリを触れるようにするために、 `carte-type`に`cdylib`
を設定します。

“`toml
[lib]
crate-type = [“cdylib”]
“`

https://doc.rust-lang.org/reference/linkage.html

WebAssemblyとJavaScript間でデータの受け渡しができるように、`wasm-bindgen` をインストールします。

“`toml
[dependencies]
wasm-bindgen = “0.2.83”
“`

ビルドを高速にするためにweb-sysのAPIを制限しているっぽいです。なので、`dependencies.web-sy

画像ファイルアップロード時に圧縮をかけたい

この記事はディップ株式会社[ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/dip-dev) の14日目です。
12月ももう半分ですか…時の流れの速さは恐ろしいですね（白目）

## 概要
写真などをアップロードしてもらう際に、サイズや容量を規定値以下にしたい時の処理になります。
だいぶ昔に一度実装したことがあるのですが、その頃とはだいぶ環境も変わったのでこれを機に書き直してみました。

## ざっくりとした手順
– ファイルinputから画像ファイルを取得
– 取得したファイルをプレビューとしてimgタグへ挿入、表示
– imgタグに表示した画像をimageオブジェクトとして取得
– サイズを調整してcanvas要素に描画
– canvasに描画したデータをバイナリ化
– 加工後容量以上かチェック
– 容量以上なら容量を減らす

## やっていきます
### ファイルの取得
[FileReader](https://developer.mozilla.org/ja/docs/Web/API/FileR

忠臣蔵 × kintone

# はじめに
[kintone Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kintone) 14日目の記事です。

さて、12月14日といえば、忠臣蔵です！
ということで、忠臣蔵にひっかけたkintoneカスタマイズをしてみました！
（※旧暦の12月14日なので、今の時代だと1月30日になるそうですが…）

# デモ
こんなアプリをつくってみました！
吉良邸屋敷図の図面上に設置したボタンから、各義士の配置をセットできるカスタマイズです。
標準の入力フィールドよりも、直感的に入力をすることが可能となります。

# 要件と実現方法
1. 隊編成アプリの入力画面に、吉良邸屋敷図を表示する。
– スペースフィールドを設置し、そこに吉良邸屋敷図の画像を表示させる。
1

JavaScript のオブジェクト指向と class キーワードの使い方

JavaScript では関数を使ったり変数を使ったり、割と自由にコードを書くことができます。
ただ言語としてベースになっているのはオブジェクト指向です。いろいろ調べながら「いつの間にか知らない間にオブジェクト指向使ってたんだな〜」と思ったので調べてまとめていこうと思います。

## オブジェクト指向とは

JavaScript のオブジェクト指向について触れる前に、まずはオブジェクト指向そのものがどんなものか見ていきましょう。

いくつかサイトを覗いてみたのですが、「オブジェクト指向難しすぎる」ばっかり書いてあって震えています。
MDN の「[初心者のためのオブジェクト指向 JavaScript | MDN](https://developer.mozilla.org/ja/docs/conflicting/Learn/JavaScript/Objects/Classes_in_JavaScript)」は難しい部分を全て省いたエッセンシャルな説明になっている（本人談）ようなのでこちらを参考に調べていこうと思います。

> OOP の基本的な考え方は、プログラムの中で扱いたい、現実世界

埋め込んだiframeで全画面表示(fullscreen)をする

# はじめに
ページに埋め込んだiframe要素に対し、全画面表示をする必要が有りました。実装の際に学んだ事をここに記します。

# この記事の対象者
– ページ内にiframeを埋め込む人
– 埋め込んだiframeを全画面表示したい人
– 埋め込んだiframeが全画面表示されない人

# iframeを全画面表示する

## iframeを埋め込む親ページの設定
### 全画面表示を可能にする
allowfullscreen属性もしくはallow属性を指定します。
“`js