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

Vue.jsでのasync,awaitの書き方

#1. 目的
Vue.jsでのasyc,awaitの書き方をメモする。

#2. 概要

フロントエンド(Webサイト)に整数Nを入力し、バックエンドで計算(N+3)をする。
また、計算結果をフロントエンドに表示すると同時に計算結果をcsvファイルに書き込む


#3. アーキテクチャー

アーキテクチャーは、下記図のとおりです。フロントエンドで数値を入力し、「取得」ボタンをクリックし、バックエンドにデータを送ります。フロントエンドから受け取った数値に３を加算する計算をpythonで実施し、その計算結果をcsvファイルに書き込みを行うと同時にフロントエンドに返し表示します。

ただし
「➆計算結果をcsvファイルに書き込む」が完了した後に「⑧終了処理を返す」を行います。
![150.JPG](https://qiita-image-store.

【JavaScript】非同期処理について１〜タスクキュー、コールスタック、イベントループ〜

※当方駆け出しエンジニアのため、間違っていることも多々あると思いますので、ご了承ください。また、間違いに気付いた方はご一報いただけると幸いです。

#同期処理と非同期処理の違い

##一体何が同期で、何が非同期なのか。
それは、**「前の処理の終わりと、次の処理の開始」**です。

例えば

“`

関数A

関数B
　
関数C
“`

このような処理があった場合、同期処理では**関数Aが処理開始**し、**関数Aの処理が終了**したタイミングで、**関数Bが開始**されます。関数Bと関数Cも同様です。

非同期の場合は、関数Aの処理が開始し、**関数のAの処理が終了する前**に、**関数Bの処理が開始**されたりします。
この場合、関数Aは**非同期で処理**されています。

####同期処理の例

“`js
function first(time) {
const startTime = new Date();//処理開始時刻をセット
let i = 0;
while (new Date() – startTime < time) {//処理開始時刻と現在時刻

iOSでボタンを何度もタッチしないと押せない現象

#はじめに
webの改修のためボタンを追加したのですが、iOSでボタンを押そうとしたとき何度かタッチしないと反応しない現象が起こりました。

#原因
iOSではhover等を１タッチ分としてカウントします。
今回の場合既存コードで全体にかかる外側のdivにonmousemoveイベントがかかっており、これを1回タップした後フォーカスを移動させるためにもう1タップしてからでないと中に追加したボタンを押せなかったようです。

#修正方法
onmousemoveイベントを対象部分のdivに移して、ボタン部分に影響しないよう修正しました。

#まとめ
ブラウザによってcssやJSの動作が異なることがあるのですが、iOSはそういうバグが特に多かったので今後は先に自分でテストしておきたいと思います。

Ajaxを順番に実行させたい

#はじめに
Ajaxで取得した値を使用してjs上で処理を行いたかったのですが、js上の処理を先に行ってしまうためうまくいきませんでした。
引っかかった部分のメモとして残しておきたいと思います。

#非同期処理
非同期処理は別のタスクを順番を待たずに同時に実行できるというものなので、普通に書くと書いた順番は関係なく実行されていきます。
試しにthenやdoneで順番を変えられないかやってみたのですがうまくいきませんでした。

#方法①：`async: false`を使用
以下のように先に行いたいAjaxの中に`async: false`を追加して同期処理に変更する方法があります。
ただ、jQuery 1.8以降では非推奨となっているようです。

“`javascript
//js上の処理を行うfunction
function doSomething(){
getflgAjax().done(function(data){
if(data){
//フラグがtrueの時の処理
}else{

ReactアプリをFirebaseにHostingしてみた

みなさんこんにちは、グリドンです。

前回の記事を読んでくださった皆さん、ありがとうございます。
最近は、「変種型」のコロナウイルスが流行って来ているので、今まで以上に警戒が必要になってきそうですね。

さて、2020年ももうすぐ終わりですが、今日はFirebaseを利用して、Reactアプリをデプロイした流れをアウトプットして行こうと思います！

#Firebase とは
まずは、[Firebase](https://firebase.google.com/ “Firebase”)について軽く説明致します。
FirebaseはGoogle社が作っている、WebアプリやMobileアプリを作るサービスになります。元々は、別の会社が運営していたのを、2014年にGoogleが買収したみたいです。

個人的な意見としては、UIUXもとても使いやすく、「無料版」がはっきり分かれているので、勝手に多額の請求が来てしまった、というような心配はなさそうです。

#Firebaseの設定
それでは、今回の本題へ入ろうと思います。
まずは、プロジェクト作成します。

![image.png](http

分割代入の注意点

## はじめに
スプレッド構文はオブジェクトをイミュータブルに扱いたい場面で活躍します。Reduxでは、よく使われる構文の一つかなと思います。既存のソースを見ても、Reducerを作る際にスプレッド構分で書かかれることが多いと思うので、その利用方法と注意点のまとめです。

#### 対象読者
– JS初学者
– Redux初学者

##スプレッド構文とは

MDNからの引用です。

>配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

[MDN スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)

実際の利用方法を見てみましょう。

#### オブジェクトで利用する

既存のReducerの記述を見ると、`Object.a

MathJaxで動的な変化を追加するにはTypesetを用いる

# onclickで数式を表示したい

以下で実現できる。

“`javascript
const math = document.getElementByID(‘math’);
btn.onclick = function() {
math.textContent = ‘$x + 1$’;
MathJax.Hub.Typeset(math);
}
“`

`MathJax.Hub.Typeset`がないとただ

x + 1

と表示されるだけ。

`MathJax.Hub.Typeset`を記述すれば

$x + 1$

と表示される。

## 参考記事
https://ja.stackoverflow.com/questions/48544/%E6%95%B0%E5%BC%8F%E3%82%92javascript%E3%81%8B%E3%82%89%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A7html%E4%B8%8A%E3%81%AB%E8%A1%A8%E7%A4%BA%E3%81%

Next.jsでポケモン図鑑を作る

[Poke API](https://pokeapi.co/)というポケモンのデータをRestfulに取得できるAPIを最近知ったので、Next.jsで簡単なポケモン図鑑を作ってみました。これからNext.jsを使ってみようと思ってる方に向けて要所を一つずつ解説していきたいと思います。

今回は`/`(ホーム)にポケモンの名前のリストを表示して、`/pokemon/{ポケモンのID}`に各ポケモンのデータを表示させてみます。

_Poke APIには全世代のポケモンのデータが存在するみたいですが、便宜上ここでは初代の151匹のみに絞ります。_

**デモ**: https://nextjs-pokedex-six.vercel.app
**GitHub**: https://github.com/EddyNagakawa/nextjs-pokedex

**使用したバージョン**

– `react@17.0.1`
– `react-dom@17.0.1`
– `next@10.0.4`

## Next.jsとは
Next.jsとはいわゆる静的サイトジェネレータに分類されるReact

[連載]スーパーマリオ的なゲームをjavascriptで作ってみる 初級編 〜5章〜 休憩

## 本連載について
– プログラミング初心者がスーパーマリオ的なゲームを作成するのに情報をまとめたものです
– 不明点や不備あれば、なんでもコメントいただけると大変嬉しいです！！！
より良いものにしたいので！
– 一番最初の連載は[こちら](https://qiita.com/hockeyarchitecture/items/139c27ff4806eaf2367f)から確認お願いします！
▼ゲームイメージ

▼目次
[1章 準備する](https://qiita.com/hockeyarchitecture/items/139c27ff4806eaf2367f)
[2章 簡単なページ作ってみる](https://qiita.com/hockeyarchitecture/item

ツクールの「おまじない」からの卒業（prototype編）

**副題【prototype継承とprototypeチェーンをきちんと理解してから年を越そうぜ】**

【目次】

– 前置き
– prototypeによるウインドウクラスの継承
– 実例：Window_Scrollableの「おまじない」
– おまじないの全体像
– まずは定義－prototypeを親から引き継ぐ
– インスタンス生成－`new`してみよう
– 最後にinitializeが仕事をしてインスタンスの出来上がり
– 「おまじない」のフローまとめ
– prototypeチェーンについて
– 終わりに

##前置き
JavaScript初級者がツクールMV、MZのプラグインを書いていると
「毎回なんとなく書いてはいるけれど、具体的にこれが何なのかはきちんと説明できない」
という**「おまじない」**のような記述が幾つか出てくるかと思います。

典型的なものとしては「プラグインコマンド関連処理」「プラグインパラメータ関連処理」、そして「新規シーンクラスや新規ウインドウクラスの定義」などです。
確かにこれら「おまじない」を「おまじない」のまま見様見真似で書

MongoDB Atlasで無料かつ手軽にDB環境を利用してみる

調べ物をしてて発見したMongoDB Atlasを触ってみます。
**自前でインストール不要、無料ですごく楽に始めることが出来るMongoDB公式のサービス**といったところでしょうか。

少し触ってみましたが、プロトタイピングやデモ作成に向いてそうな印象を受けたのでそういった目線で紹介してみます。

## MongoDBのDBaaS

> 

https://www.mongodb.com/cloud/atlas

> Atlasを使うと、簡単にMongoDBのクラスタを作って、各種管理を行えます。
性能や機能は限定されるものの、無料で使える種類のクラスタもあります。

と紹介してくれている記事もあります。

> 参考: [M

呼び出し回数に制限がある外部サービスAPIの上限緩和方法

## 困っていた事
[Vimeo API](https://developer.vimeo.com/api/reference)を利用して、ライブストリーミング中のhls URLを、アプリケーションで許可した人にのみ配信したくて、
どうもそのようなエンドポイントは存在するものの、1分間内でのAPI実行回数制限があり、
サービスの成長途中でこの上限にぶつかりそうだなぁと思った。
APIドキュメントでは、「利用システム側でええ感じに頻繁にキャッシュしてね」と書いているものの、
取得できるm3u8 URLは有効期限が10秒とかなりタイトなため、キャッシュできるとしても、ブラウザ側であれこれアプリ全体のバンドルリソース読み込んでevalして、実行開始して、、、とかの関係ない時間を考慮すると、キャッシュできる時間はたかが知れてる。というかこれキャッシュで頑張りたくないと思った。

## どう解決したか
キャッシュするという考え方を変えた。キャッシュするんじゃなくて、ある一定時間内に大量に視聴URLのリクエストが発生した時、それらのブラウザからのリクエストに対して、Vimeoへのリクエストを1回で

Vue3 todoアプリ作成③ ~ Tailwindcss導入 ~

# Tailwindcss いれてみた

謎todoアプリ作成 第3弾

todoアプリ作ってみたのですが、cssも何も当てずに進めていたのでこの辺で
cssぶっ込みたいと思いtailwindcssの所感も試したくなったため入れてみました。

[Vue3 todoアプリ作成① ~ compositionAPI ~](https://qiita.com/nakamo-03/items/5f1a8283648f87ab0230)
[Vue3 todoアプリ作成② ~ Vuex vue-routerを触ってみる ~](https://qiita.com/nakamo-03/items/f5a559d89264a6a2b011)
[Vue3 todoアプリ作成③ ~ tailwindcss 使ってみた ~ ](https://qiita.com/nakamo-03/items/23320776e7a80b4038e6) :point_left:今ここ

## インストール/設定

“`terminal:terminal
$ npm install -D tailwindcss@npm:

javascriptにおける書き方まとめ（自分用）

#ループを使って配列に要素を足していく方法

“`
var source = [];
for(var i = 0;　i < 15;　i ++){ source[i] = i +　1; } ``` ①空の配列を用意。 ②for文を作り、処理にて増加させる。ここでiに１を足すのを忘れない。配列は０から始まる。 #配列の要素にfunctionを足していく方法 ``` const columns = []; columns[0] = createColumn(0); columns[1] = createColumn(1); columns[2] = createColumn(2); columns[3] = createColumn(3); columns[4] = createColumn(4); ``` ①からの配列を用意する。 ②配列の要素に引数を与えたfunctionを代入していく。

Clova,LINEBot,LINEPayをつないで、自分のカフェで利用可能なプロダクトをGCPに実装

# Clova,LINEBot,LINEPayをつなぐ

今回は、Clova,LINEBot,LINEPayをつないで、オリジナルのプロダクトを作成しました。

クローバーで商品購入のスキルを発動して、LINE botに商品の詳細内容を送るとこに成功！#protoout #デジタルヘルス学会 フィッシャーイェーツのシャッフル

## フィッシャーイェーツのシャッフルとは？

現在、javascriptの簡単なアプリ開発を勉強しているのですが、ドットインストールでアプリ開発講座を受けていると、配列をランダムに組み替えて返すという興味深い関数を見つけたのでそれをまとめます。（ドットインストールの三択クイズで使用されていたので興味があればぜひ受講してみてください。）

フィッシャーイェーツのシャッフルとは簡単にいうと引数として指定された配列をランダムにならびかるアルゴリズムです。これを使ってクイズアプリ開発をしました。

## 実際にコードに書いてみよう

今回はjavascriptで書いていくことにします。

“`javascript:main.js
const numbers = [1,2,3,4,5];
“`

このように簡単に数字を並べた配列があったとしましょう。今回はこの数字の配列を並び替えてみたいと思います。フィッシャーイェーツのシャッフルを用いてコードを書くとこのような感じになります。

“`javascript:main.js
function shuffle(arr) {
for

元記事を表示

お年玉計算機を作りました。


https://taoka-toshiaki.com/changer/otoshidama/

お年玉計算機を作りました。大人の人も子供の人もご自由にご使用ください。
[保存しません]

“`javascript
document.getElementById(“plus”).addEventListener(“click”, function () {
document.getElementById(“view”).insertAdjacentHTML(“beforeend”, `

Formikで基本的なフォームを実装してみた

Reactのフォームライブラリ「Formik」を使用し、基本的なフォームの実装方法についてまとめました。

今回実装するのは、以下のフォームになります。


まずはライブラリのインストールをして下さい。
formik公式が推奨しているバリデーションライブラリ「yup」も一緒にインストールします。

“`
npm install formik yup –save
“`

▼ 全体コード（※cssは省いています）

“`react
import React from ‘react’
import { Formik, Form, Field } from ‘formik’
import * as Yup from ‘yup’

const Top = () => {
return (

「error Irregular whitespace not allowed no-irregular-whitespace」１つの解決法

#はじめに
Vueでたまに発生するこのエラー！！！

“`console
2:5 error Irregular whitespace not allowed no-irregular-whitespace

✖ 1 problem (1 error, 0 warnings)
“`

厳密にはこのエラー、**vueではなくESLintのルールが原因。**

Vue CLIでプロジェクトを作成すると、デフォルトでJSのルールを設定す「ESLint」も付いてくるかと。
そいつのエラー。

##これは何？
[ESLintのエラールール。日本語ざっくり解説 可能性あるエラー編](https://qiita.com/M-ISO/items/f9097a75b362206c2a99#no-irregular-whitespace)
上記の記事で解説されている

#全角スペースが入っていませんか？
![スクリーンショット 2020-12-30 16.55.13.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0

VSCodeでVue + ESLint + Prettierの環境構築する

# 概要
VSCodeで、Vue + ESLint + Prettierを導入し、vueファイルやjsファイルの保存時に、自動的にフォーマットがかかるような環境を整えようとしたが、ちゃんと動くまでに時間がかかったのでメモしておく。

# 試した環境
– macOS Catalina (10.15.7)
– VSCode (1.52.1)

# 手順

## 1. Vueプロジェクトの作成
– vue cliをインストール
– `npm install -g @vue/cli`
– プロジェクト作成(途中でvue 2か3かを聞かれるが、2にしておく。)
– `vue create (プロジェクト名)`

## 2. ESlint, Prettier関連の設定
(https://www.npmjs.com/package/eslint-plugin-prettier-vue を参考にしたら比較的簡単にいった。)

– 上で作成したプロジェクトのルートディレクトリで、以下を実行
– `yarn add -D eslint-plugin-prettier-vue es