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

Gatsbyで作るサイトに、use-shopping-cartを使ってStripe Checkoutを利用したECカート機能を実装する

以前「カート機能を簡単に実装できるフックライブラリ」としてuse-shopping-cartを紹介しました。

https://qiita.com/hideokamoto/items/e7ee06e5084d853b7d7d

今回は、このuse-shopping-cartをGatsbyで作成した静的サイトで利用する方法を紹介します。

# 事前準備

今回紹介する方法では、REST APIなどを使用せず、クライアント側の組み込みのみでCheckoutのセッションを開始します。

そのため、事前にStripeダッシュボードの設定ページで、「クライアント側のみの組み込み」を有効にしましょう。
直接飛ぶ場合: https://dashboard.stripe.com/settings/checkout

**無効化されている状態**

![スクリーンショット 0004-03-10 14.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/367b6099-e605-c6b4-441d-

vue(nuxt.js)でanime.jsの使い方(インストール,fade/blur/callback/timeline)

実経験に基づき、anime.jsの使い方まとめです。

## vue(nuxt.js)でanime.jsをインストール

環境はnuxt(vue)で使っています。

“`
npm install animejs
“`

インストールしたのち、インポートします。

“`javascript:test.vue
import anime from ‘animejs’
“`

### anime.jsのドキュメント

どうやらフランスのパリの方が作ったようです。日本のアニメという名前がついているのが興味深いです。軽量なライブラリなのでお手軽っぽいです。MITライセンスです。

ドキュメントはこちらから参照できます。クリックするとコードが表示されるため大変わかりやすいです。

[anime.jsドキュメント](https://animejs.com/documentation/)

githubです。

[anime.jsのgithub](https://github.com/juliangarnier/anime)

なにやら日本語ドキュメントもありました。

[anime.js日本語

小ネタ　右クリックで画像をダウンロードできない

こちらで解決：https://stackoverflow.com/questions/40644087/save-image-as-not-working-in-google-chrome-when-using-window-open-and-docu

TransferTransacionの署名を検証してみる

# ノードの情報は必ずしも正しいとは限らない
私たちはトランザクションを取得する際，ノードから情報を取得します．当然，アプリケーションを作成する場合はノードからの情報取得が必須になります．多くの場合，自分の信頼しているノードから情報を取得すると思います．しかしながら，ノードはWebサーバーでありハッキングされることも十分にあり得ます．そして，ハッキングされたノードが不正なトランザクションを配信する可能性もあります．

不正なトランザクションはアプリケーションに様々な不具合を引き起こしてしまいます．例えば取引所が入金の監視に使っているノードが不正なトランザクションを配信するようになれば不正入金を引き起こすかもしれません．これを防ぐには，ノードが正しい情報を配信しているかどうか確認が必要です．

そこで今回はトランザクションに含まれる署名の検証を行ってみました．

:::note alert
今回はトランザクションの署名のみを検証しています．実際に正当なトランザクションであるかを検証するには，チェーンにトランザクションが承認されているかなど,更に他の検証が必要です．
:::

# トラ

javascript与jQuery

# javascript関数の出し方
“`javascript:方法の1つ
var x = function(){
console.log(“私は関数です”);
}
x();
“`
“`javascript:方法の2つ
function show(){
console.log(“私は関数です”);
}
show();
“`
# jQuery関数の出し方
$（）をjQueryのnewオブジェクト（newのjQueryオブジェクト）として理解する
$（）はjsオブジェクトをjQueryオブジェクトに変換することもできます
### idに基づいて指定されたタグオブジェクト（jQueryオブジェクト）を検索します
“`js:javascript
document.getElementById(div);
“`
“`js:jQuery
$(“#div”)
“`
# ネットワーク監視：コールバック関数（callback）
ページ内のすべてのタグが実行されたら、戻ってこの関数内のコードを実行します
通常の状況では、jsコードはhtmlコードの後に​​記述する必要がありま

Dartに入門してみたのでTypeScriptと比較する

# はじめに
※　対象読者: 普段JS、TSを書いている人, Dart初心者にツッコミを入れてくれる有識者の方々

とあるFluttrer勉強会に興味本意で参加してみたのですが、初回はDartの基礎をざっと学んだので所感を語ります。
Dartの解説をする記事ではなくて、私が普段よく使うTypeScript,JavaScriptとの比較を交えて感想を語るだけの記事です。
間違っている部分があると思うので優しく指摘してください…
普段は業務でVue、個人でReactを触っていて、JS,TSはわかるけど他言語はあまり詳しくありません。

よければLGTMしてください！

Dartの簡単な動作確認はhttps://dartpad.dev でできます。

# 目次

1. [変数、データ型](#hensu)
1. [class、関数](#class)
1. [その他](#other)

# ざっと感想
好きか嫌いかで言うと割と好きかも。
TSやってたらそんなに違和感は無

Expressフレームワークの使い方

# Expressとは
Expressとは、node.jsのWebアプリケーション・フレームワークです。

# Expressの始め方
express-generatorをインストールすると、アプリ開発の雛形を素早く生成することができます。
“`
npm install -g express-generator
“`

“`
express アプリ名
“`
で、開発フォルダを生成します。
“`
express test
“`
今回はtestとします。
また、テンプレートエンジンを指定しないとこのように自動的にjadeを使用するという注意ができます。
“`
warning: the default view engine will not be jade in future releases
warning: use `–view=jade’ or `–help’ for additional options
“`
テンプレートエンジンを指定するときは、
“`
express –view=pug test
“`
のようにしなければいけません

PixiJS

# PixiJSとは
[PixiJS](https://pixijs.com/)
– JavaScript の 2D描画ライブラリ
– WebGLのラッパー
– メジャーバージョンアップで大幅に内容が変わる傾向がある

## Pixiでできること
– オブジェクト(スプライトや図形)の描画
– オブジェクトのアニメーション(移動、回転、コマ送りアニメーション)
– フィルター処理
– オブジェクトとのインタラクション(クリックやドラッグなど)

## Pixiのメリット

– 処理の記述が簡単(ライブラリを使用しない場合と比較)
– スマホでも動く
– 軽い

# PixiJSを使う準備

## ローカル環境で試す場合

### 必要なファイル
– PixiJSの.jsファイル(CDNを使う場合は不要)
– 表示用ページの.html ファイル
– 自分のコードを書く.jsファイル

※JSでローカルの画像ファイルを読んで、処理しようとすると止まってしまうのでローカルサーバーを建てる

#### CDN
https://cdnjs.com/libraries

bind()とthisは、セットに理解するのがいい。

今回は `bind()` に関して理解を深めたいと思います。

### bind() について。

“`html
bind() メソッドは、呼び出された際に this キーワードに指定された値が設定される新しい関数を生成します。
“`
[Function.prototype.bind()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

なるほど、`thisを指定するんだな、新しい関数を作るんだな` というのがわかりました。

### thisの中身を見ていく

bindはthisには深い関係にありますので、まずは `this` の中身について見ていきましょう。

“`js
const testFunk = {
name: ‘太郎’,
onClick() {
console.log(this) // これな何になる？
console.log(this.name + ‘ clicked’);
}
};

testF

React環境構築とLinter・Formatter設定

# React 環境構築と Linter・Formatter 設定
特にLinter・Formatterの設定に苦労したので、同じところで躓かないよう備忘録として残す。
## [このページを参照した](https://qiita.com/ro-komatsuna/items/271eb2c8f430e3dd99ae)

### ○ まずはじめに

– npm：Node Package を管理(manage)するコマンド
npm は Node.js のデフォルトのパッケージ管理ツールです。npm コマンドを利用することでインターネット上のリポジトリから Node パッケージをインストールしたり、パッケージのバージョン管理をする
– npx：Node Package を実行(execute)するコマンド
npx は Node.js のパッケージランナーツールです。バージョン 5.2 からデフォルトでインストールされるようになりました。npx コマンドを利用することで Node パッケージをより手軽に実行可能にする

### ○React をインストール

– rtd0131がプロジ

Chromeの開発者ツールで画面サイズを変更すると、Swiperがスライドできなくバグについて

### この記事に書いてあること

JavaScriptのスライダープラグインであるSwiperのバグについて
SP時にスワイプできなくなる事象が発生したのでメモ書き

https://swiperjs.com/

### 具体的には

・Chromeの開発者ツールでブラウザを開く
・まずPCでロードする
・その開発者ツールのままでSPに画面サイズ変更する
・SPでスワイプできない

### 発生条件
IE11対応しているv4.5.1くらいを使用する場合に発生するようです

### issueも既にありました。

https://github.com/nolimits4web/swiper/issues/3229

### 対応方法
バージョンを最新のものにしましょう（グッバイIE）

JavaScript　ajaxやJQueryについて

:::note info
こんにちは:raised_hand_tone3:
ブログ、記事4日目です。
今日はJavaScriptの勉強です.
略してJSと呼ばせていただきます！
:::

JavaScriptについて

JSはクライアントサイド（ブラウザ側）で動かす動的プログラミング言語になります。なにができるか言いますと、Web上で指でマップを拡大できたり、ゲームを作れたり、地図を触れたりとものすごい便利で色々なサイトで使われています。ECサイトやSNSにも使われています。
僕もよくゲームサイトなどよく見たりしますが、ガチャのシュミレーションなどJSで作っているのかな？って調べたりしてます。結果その辺りはよくわからなかったです！！

Ajaxとは

Ajaxには非同期通信と同期通信があります。
同期通信はWeb上で更新や実行した時に、レスポンスが返ってくるまでなにもサワレナイ状況で、一つの処理が終わるまでなにも出来ないというのが同期通信です（遷移あり）。
非同期通信は更新や実行を行った時に同期通信ならレスポンスを待たないといけませんが、非同期通信なら

Javascriptで延々と非同期処理をしたい時につかう関数

# 概要
同一のURLにリクエストを送り続けるという事は中々ないのだけれど、色々あって作らなければいけなくなったので備忘録として書いておく。具体的には意図した結果が返るまで延々と非同期処理を処理を送り、なおかつレスポンスを待っている間はリクエストを投げずに待つというもの。

# ジェネレータ関数
詳細は[MDNの該当ページ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/function*)を参照。ジェネレータ関数の使い方自体は[やめ太郎さんの記事](https://qiita.com/Yametaro/items/6a24631687dca63c611a)の方が分かりやすい。要するに呼び出される度に次のyieldまでの処理を行う関数なのだが、当然反復処理を使うと呼び出すたびに処理を実行する。しかもasync/awaitも使える。
今回は念のため実行回数を指定するようにし、指定した回数に達したらnullを返すようにしてある。

“`typescript:request.ts
expo

ACDLを提唱します。その4

# 概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
todoアプリ作ってみた。

# サンプルコード

“`
new Vue({
el: ‘#app’,
vuetify: new Vuetify(),
data() {
return {
headers: [{
text: “作業名”,
sortable: true,
value: “task”,
width: “70%”
}, {
text: “優先順位”,
sortable: true,
value: “assignee”
}, {
text: “操作”,
sortable: false,
value: “control”
}, ],
items: [],
assignees: [“A”, “B”, “C”, ],
task: “”,
assignee: “”
}
},

ウェブサイト作成用備忘録・総集編：１号から２２号までのふりかえり【コピペでプレビュー】

2020年7月31日にウェブサイト作成用備忘録・１号を投稿してから、あっという間に2022年…

成長した様な気もするし、あまり変わっていないような気もする心情ですが、今回は１号から２２号までの総集編として、各記事の内容の紹介や、記事投稿を続けてきた事で感じたことなどをまとめていこうと思います。

## ウェブサイト作成用備忘録

「この機能使ってみたい」という理由で個人的に学習した内容については、
普段の業務で取り扱う事がない分、いざ業務で使う機会があった際に
「だいぶ前に学習で使ったことあるけど、それっきりだったから全部調べ直し…」
といった事が容易に想像できたので、キータ記事作成にあたり

**「普段の業務や自主学習で作成した課題から、技術や経験を小分けにして、備忘録として記録する」**

というテーマで投稿を続けています。

* * *

## コピペでプレビュー形式を採用した理由

2020年当時の自分は、プログラミングの学習をゼロから始めた際に利用していた動画教材の内容が、

+ HTML + CSS（フレームワーク無し）
+ JavaScript（JQuery）

という

Next.jsで今の場所（current url）を取得

業務でcurrent urlを使用する機会があったのでメモ。

# useRouter
Next.jsにはuseRouterというhookがあるので、そちらを使用しました。

# URLを取得する方法
“`JavaScript:JavaScript
import { useRouter } from “next/router”;

const router = useRouter();

console.log(router.pathname)
// http://localhost:3000/aaa/bbb ▶︎ /aaa/bbb
“`
useRouterを使うことで現在のページのドメイン以下のURLを取得することができます。

# routerオブジェクト
※よく使いそうなもの

## pathname

`router.pathname`でドメイン以降のpathが取得できます。
パラメータやクエリは取得できず、たとえば
`http://localhost:3000/blog/[id]`の[id]の動的ルーティング部分は取得できません。

## asPath
`router.

Svelteの根本部分を簡単に理解する

# 概要

Svelteには[svelte/template](https://github.com/sveltejs/template)の様にSvelteでのアプリ開発をすぐに始められる様なテンプレートや、より多くの機能を持った[Sveltekit](https://kit.svelte.dev/)の様な強力なフレームワーク(2022/3/10現在Beta)が既に存在しています。

しかし、この様なツールはとてもとても便利な一方、Svelteが結局何者なのかという根本的な部分を隠してしまう側面もあるかと感じています。

既にSvelteとは何か(Svelte=コンパイラ)説明する記事はたくさん存在するのですが、簡単なコードを使うことでより直感的に理解できると思い記事を書いてみました。

# 結局Svelteとは

上記でも記載したのですが、結論Svelteはコンパイラです。

:::note info
コンパイラとはプログラミング言語（高級言語）で書かれたコンピュータプログラムを、コンピュータが解釈・実行できる形式に一括して変換するソフトウェア。

[コンパイラ（compiler）と

useEffectとuseReducerの名前から学んだことメモ

useEffectはside effectsからきていること、reduceという関数があることから、名前の由来が気になって調べてみました。
結論、答えはわからないながら、勝手に納得したのでメモしておきます。

# Side Effectsとは
ざっくりインプット→アウトプットに関与せず（副）、関数スコープ外に関与する処理（作用）みたいなイメージ。
Functional Programmingのtermで、Pure Functions と一緒に理解するとわかりやすかった。

>A side effect is when a function relies on, or modifies, something outside its parameters to do something

https://www.yld.io/blog/the-not-so-scary-guide-to-functional-programming/

>A side effect refers simply to the modification of some kind of state – for

場合分けをして条件分岐をサボる

# はじめに
– 普段、条件分岐を書く時に非効率な書き方をしていました。
– 先輩エンジニアからスマートな方法を教えてもらい感動したのでシェアします。

# 伝えたいこと
– 条件分岐を書く時、場合分けを図示して俯瞰してみる。
– サボれる条件が見つけられて、シンプルなコードが書ける。（かも）

# 良くない例
– 下記のような仕様を実装したいとします。
– 条件Xがtrueで、条件Yがtrueのとき、画面Aを出す。
– 条件Xがtrueで、条件Yがfalseのときは仕様的に存在し得ない。
– 条件Xがfalseで、条件Yがtrueのとき、画面Bを出す。
– 条件Xがfalseで、条件Yがfalseのとき、画面Cを出す。

– こういうとき、いままでの筆者は下記のように記述してしまっていました。
– 想定される条件全てについて記述してしまっている状態です。

“`javascript
if (X === true && Y === true) {
// 画面Aを出す
} else if (X === true && Y === false) {

GAS の API に js の fetch で doPost する

GAS の API に js の fetch で doPost する際に
地味にハマったのでメモ。
まずは、正常に動作するもの。

“`js
fetch([post url], {
‘method’: ‘POST’,
‘body’: JSON.stringify([post obj]),
“Content-Type” : “application/json”
})
.then(response => {
return response.json();
})
.then(json => {
// レスポンス json の処理
})
.catch(err => {
// エラー処理
});
“`

GAS 側はこんな感じ

“`js
function doPost(e) {
log(“doPost e.postData.contents = ” + e.postData.contents);

let ret = {
“message” : “success”,
};

return ContentService.createText