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

Stripe Elementsで要素が表示されるまでの間ローディング画面を表示させる方法

Stripe Elementsの`PaymentElement`では、カード決済以外にもコンビニ決済やWeChatPayなど、さまざまな決済方法を自動で表示できます。

ですが、PaymentIntentの`client_secret`を要素に渡してから、フォームが完全に表示されるまでに少しタイムラグが発生することがあります。

## `loader`属性を利用して、ローディング画面を表示する

Elementsには`loader`オプションが用意されています。

この値を`auto`または`always`に設定すると、Stripeが用意したローディング画面を表示できます。

**@stripe/react-stripe-jsの場合**
“`jsx

create next appでカレントディレクトリに展開する方法

# はじめに

## create next appでカレントディレクトリにファイルを展開する方法

誰かが作った空のブランチとか、すでに存在するディレクトリ内とかにソースコードを展開する時だったり、“`create next app“`でrootディレクトリを作成せずにファイルを展開したい場合があると思います。そういう場合に“`create next app“`する方法をメモします。

# どうやるか

## “`.“`を使うとできる

直接カレントディレクトリを指定、もしくはディレクトリ名指定せずに実行してプロジェクト名の入力時に“`.“`を指定
“`
npx create-next-app .

//もしくは
npx create-next-app
✔ What is your

TypeScriptでsvgファイルのインポート時の型エラーを解消する

# はじめに

## TypeScriptでSVGファイルをimportした時に型エラーが出てしまう
以下のようにsvgファイルをインポートしようとしたところ、“`cannot find module ‘asset/star.svg’“`と型エラーが出てしまっています
TypeScript公式にも同様の記述がありますが、SVGファイルの型を作成することで。TypeScriptファイル以外も正常に処理するようにコンパイラーへ伝えます。

https://webpack.js.org/guides/typescript/#importing-other-assets

# どうやるか

## TS以外の型を定義する、“`custom.d.ts“`ファイルを作成
以下のように“`custom.d.

ポリヤの問題解決技法

今回は、昔読んだ問題解決に関する本についてお話したいと思います！問題解決は誰にとっても重要なスキルですが、開発者やエンジニアにとっては特に重要なスキルです。


1945年にジョージ・ポリアは「How To Solve It」という本を出版し、100万部以上売れたそうです。私はレジュメを作成し、彼の本からいくつかのコンテンツを再利用するつもりです、したがって、私はここですべてを要約しようと思います

ポリアは問題解決のための**4つの基本原則**を明らかにしました。

## 第一の原則：問題を理解する

まず、自分自身に問うべき簡単なことは、「質問・問題の意味を理解しているか」ということです。

– 問題を説明するときに使われる言葉をすべて理解しているか？
– 何を見つけるか、何を示すかを問われていますか？
– 問題を自分の言葉で言い直すことができますか？
– 問題を理解するのに役立つような絵や図が思

Gatsby.jsのgatsby-starter-blogをDockerで動かす

# はじめに

Gatsby.js を Docker で動かすことは簡単に以前できました。
しかし、`gatsby-starter-blog`スターターを導入して`npm install`したときにエラーが頻出してしまいました。
諸々インストールが必要だったので`docker-compose.yml`と`Dockerfile`をメモレベルではありますが記載します。

## 前提条件

– `Docker version 20.10.0`
– `docker-compose version 1.27.4`

# docker-compose.yml

格納先は`~/workspace/homepage/`直下だとします。

“`yml:docker-compose.yml
version: ‘3’
services:
gatsby:
build: ./docker/gatsby
volumes:
– ./gatsby:/usr/src/app
ports:
– “8000:8000”
– “9000:9000”
t

【Nuxt.js】axiosをインストール

# axiosとは
HTTP通信を簡単に行うことができる JavaScriptライブラリ。

以下でインストールしてください。
個人的にはyarnを推奨しております。

yarn
“`
yarn add @nuxtjs/axios
“`

npm
“`
npm install –save @nuxtjs/axios
“`

## nuxt.config.js の 「modules」 に追記
“`javascript:nuxt.config.js
export default {

==略==

// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
‘@nuxtjs/axios’,
],

==略==

}
“`

こちらでaxiosを使える準備は完了です！

実験的なJavascriptの仕様であるECMAScript throw expressionsを利用してみた　ESLintの設定も

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n2a3b9bab4c50

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/64bae9571175e44eaf3a63d7805d50e09cade55c

以前、[ところでwebapckでESLintが動くというけどタイミングは？](https://qiita.com/yuta-katayama-23/items/5d73bbe79c19301551df#%E3%81%A8%E3%81%93%E3%82%8D%E3%81%A7webapck%E3%81%A7eslint%E3%81%8C%E5%8B%95%E3%81%8F%E3%81%A8%E3%81%84%E3%81%86%E3%81%91%E3%81%A9%E3%82%BF%E3%82%A4%E3%83%9F%E3%83%B3%E3%82%B0%E3%81%AF)において、ESLintが実行されるコードがトランスパイ

GeolocationAPIが止まらなくて困った話

# やりたかったこと
Vue.jsでGeolocationAPIを使って現在地を取得したい。
## 実行環境
Laravel：7.20.0
Vue.js：3.2.37
docker:3
# 初期のコード
“`vuejs:LocationSerach.vue

のように書いて、あとは[]の中を要素の数分だけ指定して繰り返していくなんてめんどくさすぎる！
そう考えていた、そこのあなた(私)にこの記事を捧げます。

## ２．解決案

vanilla JSでタイピングしてる風なアニメーション


タイピングしてる感じをJSで表現しました。

ひらがなからローマ字への変換に
https://github.com/WaniKani/WanaKana
を使っています。

kuromoji.jsあたりを使えば分かち書きや読み推定できるでしょうが、
辞書のダウンロードが重くなりがちなので、今回は定型文のみ対応しています。

元々はSvelte + TypeScriptで実装してましたが、
需要がなさそうなのでvanilla JSで書き直しました。

```html:index.html