f@ctor

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

JavaScript関連のことを調べてみた2022年01月17日
目次

“use-shopping-cart”を使って、StripeとReactで簡単にECカート機能 + 決済機能を実装しよう

Stripeを利用することで、決済機能を簡単に実装することができます。
しかし通販機能を実装するためには、決済だけではなく買い物かご（カート）機能も実装する必要があります。

今回は、「use-shopping-cart」を利用して、Reactアプリで簡単にカート機能を実装する方法を紹介します。

# use-shopping-cartとは

![スクリーンショット 0004-01-13 10.31.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c7374dc5-6046-9d16-4027-17a0449d8e49.png)

use-shopping-cartは、Reactでショッピングカート機能を実装するために必要な機能を備えたHookを提供するライブラリです。

https://useshoppingcart.com/

内部的にReduxを利用しており、「カート機能」と「Stripe Checkoutへの遷移」の２機能が利用できます。

## use-shopping

元記事を表示

JavaScriptのFetch APIにtimeoutとretryの機能を追加する方法

## 目的
Vanilla JavaScriptのfetch()に特定の時間が追加したら、エラーを起こして処理を終わらせる時限機能、そして、fetchが取得に失敗した時に特定の回数のみ再度取得を試みる機能を追加すること。

## 背景
fetchを使うのか、axiosを使うのか、迷うエンジニアもいると思います。基本的に、axiosを使うべきだと筆者は考えています。なぜなら、Axiosを使えば、Timeoutはすぐに設定できるのと、axios-retryというパッケージを使えばretryの機能も簡単に追加できるからです。
ただし、場合によってはaxiosを入れたくない事情もあるのかもしれません。また、筆者も経験しましたが、axios-retryが思うように動いてくれなかったりします。axiosは簡単に使えるが、何をしているかわからん、ということはよろしくない状況なので、ここでは勉強も兼ねて同じことをfetchとPromiseでどうやって再現できるかをご紹介します。

## 目次
1. 環境構築
1. fetchを別のPromiseに包む
1. timeoutのPromiseを返してくれる

元記事を表示

ESP32による美和ロックの制御

# 【備忘録】ESP32による美和ロックの制御

「外車のクラシックカー整備してよ。自動車整備士なら簡単でしょ？」や
「スマホでオートロックつくってよ。ITエンジニアなら簡単でしょ？」は
無茶振りである上に薄給なら専門家軽視なのは言うまでもありませんが
内容が面白そうであればつい蓋を開けてしまう方も少なくはありません。

※そもそもスマホを持っていないエンドユーザのために散々作り直したのは別のお話

## 概要

wiremo やスマートロック(Ex: Qrio Lock, Akerun)などの既製品では不都合な場合を想定し、ESP32 やリレーを用いた電動錠制御装置の実装だけでなく簡易な管理システムの実装及び装置とシステムの連携を実施します。
ユーザ管理や認証については当書では LINE BOT を用いることで省きます。
実際のプロダクトに寄せた内容にし後任者による既存設計の大雑把な理解と
設計の所々の決定の背景が伝わるようにすることが目的になります。
※関係者の方でその他把握しておきたいことがあれば私信お願いします。(現在の仕事もあるので簡素な対応になるかと思いますが予めご了承くだ

元記事を表示

僕らはファイナライズを待たなければいけないのか～Symbolブロックチェーンの場合～

即時ファイナリティ。

分散化を徹底したブロックチェーンほど、縁の遠い存在と考えがちな言葉です。
例えば取引所の多くは、ブロックが覆らないと思われる時間を待って入金を確定させます。

ブロックチェーンを従来システムに組み込むためには、待たなければいけない時間がある。

と思っているなら、あなたの頭はまだWeb2.0を彷徨っています。
少し立ち止まって考えてみましょう。ブロックチェーンは第三者の仲介無しに送金を実現します。送金指示はあなたに直接投げられたメッセージです。たとえそれが未承認状態だったとしても、情報送信者の意思表示を証明するために必要な情報はすべて世界中に公開されているのです。

他チェーン同士が自律分散的にトークン交換するならまだしも、特定の組織によって管理されたシステム系への送信であれば、利益を享受する情報の受け手がトランザクションの信頼性向上に歩み寄ることができます。

何が言いたいかというと、ブロックチェーンがロールバックしようが、送金メッセージを受信して利益を得る権利を得た人が、そのチャンスが確信に変わるまで何度もアナウンスすればいいのです。

というわけで、今回は

元記事を表示

【JavaScript】ES6　モジュールのエクスポート&インポート、およびbabelのインストール方法

##モジュールとは
部品と近い意味ですね。

大きなファイルを機能ごととか、役割ごととかで細分化する。
細分化したものを組み合わせて一つのものにする。

###モジュールのメリット
・重複命名防止
・コード再利用可能
・保守しやすい

###モジュールの文法
export
モジュールをエクスポートする

import
モジュールをインポートする

##エクスポートの方法
主に三つに分けられる。
1.個別エクスポート
2.一括エクスポート
3.デフォルトエクスポート

###個別エクスポート
エクスポートしようと思う　データの前に、「export」を加えること。

“`javascript:individualExport.js

export let language = “JavaScript”;

export function output(){
console.log(“I’am from individualExport.js file!! “);
}

“`

###一括エクスポート
export{ // エクスポートしようと思う

元記事を表示

【Vue.js】privateな変数の双方向バインディング方法

# はじめに
JavaScriptでprivateな変数やメソッドが作れるようになったようです。
私は業務でVue.jsを触っているため、「双方向バインディングする場合はどのように書くんだろう？」
と気になったので試してみました。

# 結果
getterとsetterを用意して、**「v-model=”クラス名.変数名”」**で良いみたいでした。

# 検証
変数に「#」を付けることでprivateになるようです。
一旦setterは用意せず、以下のようなクラスを作成しました。

“`Javascript
module.exports = class Test{
#detail;
#tag;

constructor() {
this.#detail = null;
this.#tag = null;
}

get detail() {
return this.#detail;
}
get tag() {
return this.#tag;
}
};
“`

画面側は以下のように実装しました。

“`Javascr

元記事を表示

JavaScriptの論理演算子(&&, ||)を「かつ」「または」と覚えるのはもうやめよう

※こちらの記事は初学者向け・丁寧に解説を心がけております。
　その分、文章量も多いのでご了承ください。

プログラミングを学びたての頃、論理演算子の章で

– `&&`　を「**かつ**」
– `||`　を「**または**」

と覚えてしまった人も多いのではないでしょうか？
高校数学 A で習う「集合」のカリキュラムに登場する「`A∩B`」や「`A∪B`」の考え方に沿えば一番馴染みのある表現ではありますが、プログラムの振る舞いに着目すると厳密には異なります。

また、経験を積んでいくにつれて、`&&`を「**かつ**」、`||`を「**または**」と表現すると、説明がしづらいこと場面にも遭遇します。

この記事を読んで、「かつ」「または」という考え方から脱却していきましょう。

また、この記事では

– ブラウザですぐ実行できること
– 多くの初学者にも馴染みがある

という点からJavaScriptを基に解説していきます~~が、一部挙動は異なるものの、Ruby や PHP などでも考え方は同じです。~~

（追記：コメントをいただき調べましたところ、CやJava, PHPでは大きく挙

元記事を表示

Webの勉強はじめてみた その21 〜Slack上で動くbot作成1〜

N予備校の「プログラミング入門Webアプリ」を受講しています。
今回は第3章7〜9節です。
講義内ではTODOのbotでしたが、復習も兼ねて自分で作りました。

学んだ用語

CRUD クラッド

:::note
ソフトウェアが情報の永続化をしようとしたときに出てくる操作、Create, Read, Update, Deleteの頭文字をとったもの。
:::

リファクタリング

:::note
ソースコードを見易くする。可読性の向上。
:::

テスト駆動開発

:::note
実装や修正よりも先にテストを用意し、テストに適合するようにリファクタリングを繰り返すことでコードの品質を高めていく開発手法
:::

とにかくほめてくれるbotを作る

要件

1. 「ほめて」 : あらかじめ用意された配列からランダムで発言
2. 「もっと ~」 : ~という内容を配列に登録。
3. 「ほめないで ~」 : ~(インデックス)番のメッセージを削除
4. 「見せて」 : 登録されているメッセージ

元記事を表示

redux のソースコード を読んでみる

試しに redux を読んでみたので、そのまとめ。
この記事では、react-redux を除いた [redux](https://github.com/reduxjs/redux)、つまり createStore を使った getState・dispatch 操作を、実際の redux のコードを読んで理解してみます。

## 対象読者

redux の使い方を知っている人

## redux まとめ

まずは、簡単な概要を説明します。

redux は 状態管理 のライブラリ。

React の State状態管理 のバケツリレーを改善するために、大きな State を作っておき そこにデータアクセス（[react-redux](https://github.com/reduxjs/react-redux)）することで状態管理をする。ここでは「大きな State を作る」部分である [redux](https://github.com/reduxjs/redux) だけを解説します（暇があれば、後半の「データアクセス」部分をしている [react-redux](https://gi

元記事を表示

[JavaScript]forEachに弄ばれた話

# はじめに

JavaScriptを書いており、配列のループをしようとして弄ばれたときのメモ＆ネタ話です。

# 内容

## やりたいこと

最近JavaScriptを業務で使う中で、

> 配列を処理して配列内の値がtrueならエラーにしたい！
>

ということがあったので、JavaScriptのループ処理についてググることがあった。

## やったこと

自分の普段のメイン言語はPHPなので検索ワードは

「JavaScript foreach」

で調べたところ、JavaSccriptの`forEach()`メソッドがあったので「キタコレ」という感じで実装

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

具体的な実装イメージは以下の通り。

“`javascript
const hasDummys = [
false,
true,
false
];

// 配列hasDummyの値にtrueであれば、アラートだす
hasD

元記事を表示

Siemaをスマホ対応　メモ

今回Siemaをスマホ対応させてみたメモになります。

前提として、
Siemaとは　JavaScriptによる、画像スライダー
https://pawelgrzybek.github.io/siema/

詳しくは、ほかの人のこれらがわかりやすかったです。
【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。
https://on-ze.com/archives/6194
超軽量スライダーSiemaが最高なのでお勧めしたい
https://suzumenote.com/tech/395

やりたいことは、
表示される画像をPCでは2枚、スマホでは1枚にしたい。
HTMLまたは、CSSまた、公式Siemaのオプションではできない？わからなかったので、Siemaのsiema.min.jsファイルをいじりました。
ただ、JavaScript言語が全く分からない、なので取り敢えず弄ってみましした。
（あまり時間がなかったので、JavaScriptを学ぶのはまたの機会に）

—

本題の追加コードですが、こちら

“`diff_j

元記事を表示

DeepL API Freeを使用して翻訳してみる

# はじめに
新年早々、Netflexに加入しまして、以前からネットとかで海外ドラマのフレンズが英語の勉強にいいという噂は耳にしていたので、今年は素直にやってみようと思った次第です。
フレンズは1話あたり22分でシーズン1〜10まであり、全部で236話あるそうです。1日1話ずつ観ても8ヶ月くらいかかります。
フレンズの脚本のスクリプトも見ることができます。ただし、日本語訳はついていません。

https://dramadeenglish.com/friends_script_list/

http://livesinabox.com/friends/scripts.shtml

# DeepL API
DeepLは、口語に近い文章に訳してくれるということで、フレンズを訳すのにちょうど良いかなと思って、ちょっとしたアプリケーションを作る上でDeepL APIを試してみたくなりました。

## 準備
### 1.開発者向けのアカウントを登録
DeepLAPIを使うためにDeepLProアカウントを作ります。
https://www.deepl.com/pro#developer

姓名メー

元記事を表示

スムーススクロールさせる方法

今回は、jQueryを利用したスムーススクロールさせる方法を紹介していきます。
#スムーススロールとは
ヘッダーのメニューやトップへ戻るボタンなどをクリックした際に、ページ内のリンク先へ瞬時に飛ぶのではなく、ゆったり飛んでいく挙動です。
#jQueryに記述
“`:javascript
// #から始まるURLがクリックされた時
jQuery(‘a[href^=”#”]’).click(function() {
// 移動速度を指定（ミリ秒）
let speed = 300;
// hrefで指定されたidを取得
let id = jQuery(this).attr(“href”);
// idの値が#のみだったらターゲットをhtmlタグにしてトップへ戻るようにする
let target = jQuery(“#” == id ? “html” : id);
// ページのトップを基準にターゲットの位置を取得
let position = jQuery(target).offset().top;

元記事を表示

webview.hostObjects が async で失敗するのをなんとかする ver.2

message を汚染せず匿名関数でやりくりするタイプ

“`js:JavaScript
addEventListener(‘ExeLoaded’,e=>{

var url = `https://script.google.com/macros/s/SampleDeployId/exec`;
var text = `SampleText: Fixed newly exposed boat not showing up in the boat yard menu
Changed contraptions to drop resources and inventory objects (crates) to drop resources even
when killed with fire. Previously anything killed by fire would drop nothing.`

chrome.webview.hostObjects.exe.PostError(url,text).then(r=>{
console.log(r)// null、

元記事を表示

【JavaScript】ES5とES6において、親クラス継承の違い

##ES5においての継承

“`javascript