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

環境変数をファイルで扱う env-cmd をローカルインストールで利用してみる（-f オプションでの利用）

環境変数を扱うようなパッケージで、[dotenv](https://www.npmjs.com/package/dotenv) などがありますが、自分は使ったことのない「env-cmd」というのを見かけて、それを試してみました。

●env-cmd – npm
　https://www.npmjs.com/package/env-cmd

●toddbluhm/env-cmd: Setting environment variables from a file
　https://github.com/toddbluhm/env-cmd

## サクッと試す
まずは、 `$ npm i env-cmd` というコマンドで env-cmd をローカルインストールします。

そして、ここで Node.js で環境変数を出力する以下のプログラムを動かしてみて、env-cmd を使わなかった場合にデフォルトで読み込める環境変数を確認してみます。以下を nodeコマンドで実行してみると、ご自身の環境の環境変数が出力されると思います。

“`javascript
console.log(proce

現在地の標高を取得する(JavaScript)

# ブラウザ上で現在地の標高を知りたい。

すでに標高を知ることができるアプリなどもありますが、オリジナルアプリ作成で
標高データ取得が必要なので調べました。

# GeolocationAPIで現在地の取得
GeolocationAPIはJavaScriptのAPIです。
位置情報、IPアドレス、WiFiなどの情報から現在地を取得します。

“`javascript:
function test() {
navigator.geolocation.getCurrentPosition(test2);
}
“`

getCurrentPosition()でデータの取得に成功すると引数のtest2()が実行されます。

“`javascript:
f

【Javascript】2種類の方法でAPIを叩いてみた。（async/then）

# 初めに
javascriptでAPIを叩いてみた。非同期通信が難しかったが、なんとか完全に理解したので、サンプルコードを残しておく。

非同期通信とは、通常のスクリプトでの常識である「上から順に処理を行う」を逸脱した通信のこと。考慮しないと変数にまだ何も入っていないのに、次の処理が行われてしまう可能性がある。
そこで、「awat」や「then」を用いて処理を待つ。
※非同期通信にはユーザーの待ち時間を減らすメリットがある。

## 環境
– MacOS 12.0.1
– Google Chrome 99.0
– APIはJSONで帰ってくる想定

# サンプルコード
### asyncを使用した例
“`javascript:async_api.js
//async awaitの例
const url = “アクセスしたいURL”;
async function call_api(url) {
const request = await fetch(url);
const json_data = await request.json();
//JSONを受け取っ

初めて、他人のソースをレビューして気づいたこと

三項演算子

ソースは短くなるが、すべてを三項演算子にするのはよくない

“`javascript
if (a) {
b(0, 0);
} else {
b(1, 0);
}

const code = a ? 0 : 1;
b(code, 0);
“`

大小判定

“`javascript
if(this.zoom > 0) {
this.zoom -= 10;
}
if(this.zoom < 50) { this.zoom = 50; } ``` マイナス10ずつ引いて行って、50以下にはならないというプログラムである まずいらない分岐は消す ```javascript this.zoom -= 10; if(this.zoom < 50) { this.zoom = 50; } ``` これは関数が用意されている ```javascript this.zoom -= 10; this.zoom = Math.max(50, this.zoom); ``` これで6行が一行に ```javascr

Next.jsでNotion APIを使った

と
• の取り扱い【notion-blog-nextjs】

# やること

– `notion-blog-nextjs` を元にして
– `

` を `

` で囲み
– Notionと表記を(だいたい)同期させる
– …あっ、CSSは `tailwind` で書いていきます

# `notion-blog-nextjs`を導入する

– Githubに公開されている `samuelkraft / notion-blog-nextjs`を
– 好きなフォルダに `clone` して
– 該当ディレクトリに `cd ~` して
– `npm install` してパッケージをインストールして
– `npm run dev` で動かせます
– あとは `.env.local` にいろいろ書けば自分のNotionのデータを参照させられます。

詳しくは以下リポジトリのREADMEを参考にしてください。

[https://github.com/samuelkraft/notion-blog-nextjs](https://github.com/samuelkraft/notion-blog-nextjs)

# `notion-blog-n

WordPressプラグイン「Snow Monkey Forms」に日付選択を実装する手順

「Snow Monkey Forms」はWordPressにメールフォームを実装するプラグインです。

Snow Monkey Forms

「MW WP Form」の実質の後継プラグインで、WordPressのブロックエディタに完全対応しているため乗り換えたいところですが、機能面は簡素化されています。

https://plugins.2inc.org/mw-wp-form/

要望が多そうな「日付選択」を実装する手順をまとめておきます。npmやwebpackを使用できない（JavaScriptがほとんど書けない）人向けにも補足しておきます。

## フォームの設定


日付を選択する場合、だいたいは「第一希望」「第二希望」を入

Vue.jsでトランジションの内容を特定イベント時にのみ変更する

v-ifもしくはv-showで要素の表示切替を制御している場合、それをtransitionラッパーコンポーネントで囲みクラスを調整すると簡単にアニメーションが実装できる。

ただ、特定の操作でのみ要素をアニメーションさせたい場合、つまり、他の操作による要素の表示切替ではアニメーションさせたくない場合は少し工夫が必要になる。

“`test.js
new Vue({
el: ‘#app’,
data: {
accBtnFlg : false,
navToggle : false,
navAnime : ‘toggle-no-anime’
},…
methods: {
toFalseAccFlg : function(){
this.accBtnFlg = false;
},
toggleAcc: function(e){
this.navToggle = !this.navToggle;
this.accBtnFlg = true;

【２日目】簡単な和演算の電卓を作る

# １．本日の課題
今日は前回のプログラムをもとに、整数の和演算ができる電卓を作成する。
まずは前回のプログラムや、参考としてネットを見ながら次のプログラムを組んだ。

“`html

Array.someで引数を渡したい

javascriptのArray.someで引数を渡して判定したときのメモ。

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

someを実行する配列がObjectの配列だったりすると、callback関数内での判定の際に複数の値をチェックしたくなると思います。
以下のようにコールバック関数の引数に`this`を入れてあげれば、それを使える。

“`typescript
function filterFunc(this:Obj1, element:Obj2){
//判定処理
}

obj2Array.some(filterFunc, obj1);

“`

MDNには以下のようにあって、`thisArg`をどうやって使えばよいかわからなかったのでメモ。

>thisArg 引数が some() に与えられると、それがコールバックのの this として使用されます。それ以外は、undefined 値が this として使用されるでしょう。 call

配列操作：新しい配列を定義した後に操作するvs 配列の定義と同時に操作する

# 元の配列をコピーして、新しい配列内で要素を削除
### 配列を定義してから削除するver
“` javascript
const originalArr = [0,1,2,3,4,5];

const newArr = […originalArr];
newArr.splice(0,1);//定義後に配列操作

console.log(newArr)//[1,2,3,4,5]
“`
### 配列の定義と削除を同時に行うver
“`javascript
const originalArr = [0,1,2,3,4,5];

const newArr = […originalArr].splice(0,1);//同時！！
console.log(newArr)//[0];
“`

# 元の配列をコピーして、新しい配列内で要素を追加
### 配列を定義してから追加するver
“`javascript
const originalArr = [0,1,2,3,4,5];

const newArr = […originalArr];
n

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がプロジ