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

これからReact始めたい人のための今日だけでできるTODO#13 form

## form周りのパーツ
formにはテキストの入力、セレクトボックス、ラジオボタンなど様々な要素があります。
Reactで作成する際にはどのようにして作るのかを実際のコードと一緒に紹介します。

### input
#### 完成イメージ

#### コード

“`js
const InputText = () => {
// 入力欄の状態変数`inputTextValue`と
// 状態を変更するための関数`setInputTextValue`を定義する
// 初期値は空としておく
const [inputTextValue, setInputTextValue] = useState(”);
// 上記と同様で変数と関数を定義し、初期値の文字列を定義
const [text, setTex

Vue.jsのv-for + Bootstrapでカルーセルを実装する方法

#はじめに
[BootstrapのCarousel](https://getbootstrap.jp/docs/4.3/components/carousel/)で表示される画像を、Vue.jsの`v-for`を使って実装するにはどうしたらいいか？を解説します！

**※[BootstrapVue](https://bootstrap-vue.org)ではなく、普通のBootstrapを使った場合です！！！**

#環境
・Vue.js v2系
・Bootstrap v4系

#htmlを編集するだけでは実現できないっぽい
これはどういうことか？
[BootstrapのCarousel](https://getbootstrap.jp/docs/4.3/components/carousel/

はじめてのJavaScript④ 「インクリメントとデクリメント」

#目次
[1.はじめに](https://qiita.com/drafts#1-%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
[2.インクリメントとは？](https://qiita.com/drafts#2-%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AA%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF)
[3.デクリメントとは？](https://qiita.com/drafts#3-%E3%83%87%E3%82%AF%E3%83%AA%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8%E3%81%AF
)
[4.後置演算子と前置演算子](https://qiita.com/drafts#4-%E5%BE%8C%E7%BD%AE%E6%BC%94%E7%AE%97%E5%AD%90%E3%81%A8%E5%89%8D%E7%BD%AE%E6%BC%94%E7%AE%97%E5%AD%90)
[5.例題](https://qiita.com/drafts#5-%E4

【Deno1.13】高速化されたHTTPサーバーに移行する

DenoのHTTPサーバー+WebSocketサーバーはv1.13から高速化されました。
これに伴いAPIが変更されており、移行にはコードの変更が必要です。

## 時系列

deno deployを「deploy」、ダウンロードして使うdenoを「CLI」と表記します。

– 元々deno CLIには標準ライブラリを使用したサーバーが、deno deployには`fetch event`を使用したサーバーがあった
– パフォーマンス向上＆http2対応のためdeno CLIに`Deno.serveHttp`と`Deno.upgradeWebSocket`が導入された
– その後、CLIとの互換性のためにdeployにも両者が導入された
– 従来のサーバー実装であった標準ライブラリの`http`は、内部で`Deno.serveHttp`を使うように変更され、deployからも利用可能になった
– 従来のwebsocketサーバー実装であった標準ライブラリの`ws`は非推奨化

|日付|変更点|
|–|–|
|2021.04.13 (Deno 1.9) | `Deno.serveHt

AWS Amplifyで既存のCognito User Pool / DynamoDBをimportする方法

# はじめに
今回、開発未経験の私がAWSのAmplifyを使いユーザーの検索を行うアプリを作りました。
そこで、既に作成されているCognitoからUserPoolをimportしてユーザー情報を取得する方法と、
既に作成されているDynamoDBから取得したいテーブルをimportして情報を取得する方法を、今後も扱うことがあると思いますので、メモとして残しておこうと思います。
また、右も左も分からない手探りな状態で進めているので、もしやっている事とその意味が違った場合は、教えていただけたら幸いです。

## 作成されているCognitoのUserPoolをimportする方法
私は、CognitoのUserPoolからユーザー情報を取得して、名前が存在した場合は表示させる機能を実践したのでそれを軸に書いていきます。

### 1: 自分以外のユーザー情報を取得するには`aws-sdk`をまずimportして使う必要がある。
### 2: aws-sdkのドキュメントで取得する方法を探す。それらしい処理を書いてみる。（この際はテスト的に書くため別ファイルを作り検証する）

“`ja

kabuステーションAPIをTypescriptから呼び出す環境設定

#概要
kabuステーションAPIの呼び出しはpythonで作成したほうが何かと便利だと思いますが
あえてTypeScript+axios+aspidaで呼び出す環境を作成します

# 必要な環境・ソフトウェア
– linux等のコンソール(WSLも可、ただしアクセス方法がやや難しい)
– VisualStudioCode(あれば楽)
– node(ver12以降)
– npm or yarn

# 構築手順
####1.ディレクトリ・ファイル作成

“`bash
mkdir kabucomapi
mkdir kabucomapi/src
mkdir kabucomapi/src/api
touch kabucomapi/src/getToken.ts
“`

####2.必要なパッケージのインストール

“`bash
cd kabucomapi
yarn init -y
yarn add -D @types/node @types/aspida typescript ts-node
yarn add @aspida/axios axios
yarn tsc –init –r

Vue.jsでローディング中にテンプレートが見えるのを防ぎたい

この記事では、
**Vue.jsでローディング中にテンプレートが見えるのを防ぐ**
方法について紹介します。

ローディング中、`{{text}}`⇦まま表示されてしまう問題を解決します。

## やり方
### 変更前

“`html:index.html

{{text}}

“`

“`javascript:main.js
const App = {
data() {
return {
text: “aaaa”
}
}
}
“`

**このままだとローディング時にテンプレートが見えてしまいます。**

### 変更後

“`html:index.html

{{text}}

“`

“`css:styles.css
[v-cloak] {
display: none;
}
“`

この2つの記述をすることで**ローディング時のテンプレート見える問題を防ぐ**ことができます。

## 最

【JavaScript】var と let, const の挙動の違い3点

# はじめに
JavaScript では `var`, `let`, `const` を使うことで変数代入の時をすることができる。

基本的に `const` を使うようにし、`let` は `const` では難しい場合だけ使用し、`var` は使わない方が良い。

この記事ではそれぞれの違いについて記す。

# 1. 再代入・再宣言
– `var`
– 再代入: ◯
– 再宣言: ◯
– `let`
– 再代入: ◯
– 再宣言: ×
– `const`
– 再代入: ×
– 再宣言: ×

つまり `var` が一番緩く、 `const` が一番厳しい

# 2. 変数の巻き上げ
var では変数の巻き上げが発生する。
以下にサンプルコードを示す。

## `let` の場合
~~~hello-world.js
// let の場合
a = ‘Hello World!’;
console.log(a);

let a;
~~~

実行すると下記のようなエラーが発生する。

~~~
$ node hello-world.js
…

Stripe.js ElementsがCordovaでロードされない時

# はじめに
Webで動いてるStripe.jsとStripe ElementsがCordovaのビルド後に動かなかった時のメモ。
※Cordova iosでのみ動作確認済み

– Cordova 10.0.0
– Stripe JS SDK v3

# 目次

1. [何がおかしかったか](#Chapter1)
1. [追加したコード](#Chapter2)
1. [参考文献](#reference)

# 何がおかしかったか

この画面でStripe Elementsを使っていて、Cordovaでビルドした後Elementsがロードされていない感じでCard Number、Expiration、CVCが入力できなかった。

![Screen Shot 2021-09-30 at 14.40.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2106354/2f83802f-c

WebMidi.jsを使ってみた

Web MIDI APIのライブラリ[WebMidi.js](https://github.com/djipco/webmidi)を使ってみました。指を離したときに音が急に切れるのでプツプツという音がしますが許してください。ブラウザではMIDIキーボードも使えるのかと感動しました。

“`index.html

hoge

hoge