f@ctor

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

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

[改良版]JavaScriptで複数のチェックボックスのうち1つでも選択されていたらボタンを有効にする

学習の過程を記載していきます。
完成形は[こちら](#5-完成形)です。
# 1. 前回の完成形
“`html:sample.html





“`

“`js:sample.js
function change() {
const submitBtn = document.get

元記事を表示

【完全初心者向け】AWS CDKに入門してみた

## 目次

– [目次](#目次)
– [はじめに](#はじめに)
– [AWS CDKの使い方](#aws-cdkの使い方)
– [準備](#準備)
– [CDK APPの作成](#cdk-appの作成)
– [CDK AppへのS3バケットの追加](#cdk-appへのs3バケットの追加)
– [CloudFormationテンプレートへの変換](#cloudformationテンプレートへの変換)
– [スタックのデプロイ](#スタックのデプロイ)
– [CDK Appの修正](#cdk-appの修正)
– [CDK Appの削除](#cdk-appの削除)
– [まとめ](#まとめ)
– [参考](#参考)

## はじめに
業務でAWS CDKを使っていますが、すでに構築済のコードを使っているだけだったので、勉強のためにAWS CDKに入門してみました。

## AWS CDKの使い方

### 準備

typescriptのインストール
“`bash
npm init
npm install typescript
“`

バージョンの確認

元記事を表示

【JavaScript】イベントキャプチャリング、イベントバブリングについて図解で理解する。

## JavaScriptのイベントキャプチャリング、イベントバブリングについて、よく分からなかったので、図を交えて理解してみました。

# イベントバブリングについて

突然ですが、以下のコードが表示されたブラウザで　”テスト”の文字をクリックしたらどうなるでしょうか？

“`html


test

テスト



“`
アラートで”hello”と表示されますよね。

では、なぜhelloと表示され

元記事を表示

Vueper Slides(Vue3)でasync使用のautoplayでハマった件

setupにasyncを使用している場合は問題なくautoplayが使用できるけど、onMountedでasyncすると、下記エラーで自動再生できなかったので解決までの半日を記録しておきます。（Vue3の知識も浅いので、組み方がうんこすぎて他の人には再現できないかもね！）

“`javascript:error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘duration’)
“`

# autoplayをscript内で実行
上記エラーよりdurationの値を設定してみたが全く変化なし。
ドキュメントを確認して「resumeAutoplay」なるものの存在を確認。（ここまで2時間）
https://antoniandre.github.io/vueper-slides/

“`vue:template

元記事を表示

OSS/ライブラリってどう調べて導入するの？ (moment.jsリプレースを通して)

# はじめに
世の中にはたくさんのOSSで溢れています。
そしてOSSには流行り廃りがあります。
昨日までデファクトスタンダードだったOSSが今日では斜陽となる可能性すらあります。
エンジニアはその中でどうやってOSSを調査し自プロダクトに取り入れているのでしょうか？
今回はそんなOSSに関わる業務の際に自分がどう進めているのかまとめたいと思います。

# 本記事
– 実際に業務で開発したこと無い初心者エンジニア向けに実務の開発の流れを具体例を用いて解説
– 今回は日付時刻操作ライブラリである moment を date-fns でリプレースする作業をやっていきます

# 対象読者
web 開発をしたい初心者エンジニア
OSS調査の流れを知りたいエンジニア

# リプレイスするコード
“`javascript:moment.js
import moment from ‘moment’;

function getStartTime() {
return ‘2022/07/01 15:22’;
}

const start_time = moment(getStartTime

元記事を表示

JavaScriptの中身があるけど中身のない配列について

[空じゃないけど空の配列の話。（配列とかおれおれ Advent Calendar2018 – 22 日目） | Ginpen.com](https://ginpen.com/2018/12/22/empty-slots/) を読んで面白かったので、JavaScript の空じゃないけど空な配列について自分でも調べてみた。

## はじめに

JavaScript の配列で以下のように中身があるようで中身のない配列がある。

“`js
const arr = [10, 20, 30];
arr[4] = 50;

console.log(arr);
// [ 10, 20, 30, <1 empty item>, 50 ]
“`

MDN では`空の配列スロット`と呼んでいそうだったので、この記事内では`空の配列スロット`と呼ぶ。

> in 演算子は、空の配列スロットに対して false を返します。直接アクセスしても undefined が返されます。
>
> MDN より引用
> https://developer.mozilla.org/ja/docs/Web/JavaScr

元記事を表示

jestでswcを使うようにしたらエラー文に出てくる行数と実際のソースの行数が合わなくなったので解消させた

日本語の記事が見つからなかったので投稿

## 概要

swcを使いだしてからエラー文のstackに出てくるソースコードの行数がずれる様になりました。
sourceMapは有効化しているはずなので何かがおかしいと思い調べてみました。

## 状況

– sourceMapは有効化している

“`
{
“sourceMaps”: true
}
“`

## 解決方法

“`
{
“sourceMaps”: “inline”
}
“`

## または（未検証）

“`
{
“sourceMaps”: true,
“inlineSourcesContent”: true
}
“`

## 参考

https://github.com/swc-project/swc/issues/1581
https://github.com/swc-project/swc/issues/2194

元記事を表示

ブラウザで1行JSONをストリーミングする

ブラウザで1行JSONをストリーミングするライブラリを作ったので、紹介したいと思います。

## 使い方

このライブラリは https://deno.land/ から配信されているため、`https://deno.land/x/jsonlines@v1.2.1/js/mod.js`というURLをインポートするだけで使えます。

以下のような1行JSONがあったとします。

“`json
{“id”: 1, “data”: [“xxxxx”, “yyyyyyyy”]}
{“id”: 2, “data”: [“bbb”, “aaaaaa”]}
…（以下無限に流れてくる）
“`

これを1行ずつ読み取って、JSONとしてパースして順次読み込むには、以下のようにします。

“`html





```

`MyHeader.vue`のコンポーネントをインポートしておいて使用していないので、
`vue/no-unused-components`のエラーになっちゃいます。

# vue/multi-word-component-names

・ファイル名　→　パスカルケース
・HTML内　 →　ケバブケース
・JS内 →　キャメルケース
参考
[【

元記事を表示

vimeoでendedイベントを取れないとき

vimeoを利用し、同一のiframe内で動画を連続再生したいという要望。
ところが、playerのendedイベントがなぜか1つめの再生のものしか取れない。
そのような状態でもgetEndedメソッドは使えたので、力業。
```javascript
setInterval(function () {
player.getEnded().then(function (ended) {
if (ended) {
// ここで必要な処理
}
});
}, 100);
```
もっといいやり方はないかな？

元記事を表示

JavaScriptで0パディングを行う方法

# 0パディングとは
ゼロパディングとは、数値を文字として表現・表示する際に、指定された桁数に足りない分だけ左右に「0」を追加する処理のこと。決まった長さ（固定長）の文字列に変換したいときに行われる。※1

この処理をJavaScriptで行いたい場合、非常に簡単に実装することが可能です。

## String.prototype.padStart()メソッド
0パディングを行うためにはpadStart()メソッドを用います。
padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

使用方法としては第一引数に設定したい文字数、第二引数に埋める文字です。
例えば3桁で表示したい場合は下記のようなコードになります。
```
let num ="6"
console.log(num.padStart(3, '0'));
```
出力結果
``` "006" ```

これが仮に初めから3桁の数字が用意されている場合は0を挿入しません。
```
let num

元記事を表示

先頭の文字を判定して必要に応じて削除する方法（JavaScript/Vue）

javaScriptで先頭の文字を判定して、それが特定の文字の場合削除する方法です。

例えばAPIから送られてくる値が
```userName: ",山田,鈴木,吉村"```
だとします。

この値をそのまま画面上に表示してしまうと先頭にカンマが表示されてしまい、よろしくありません。
画面表示の際に先頭のカンマを削除して表示するのが好ましいです。
それを実現するためにはstartsWith()メソッドとslice()メソッドを用います。

# 方法
まず、先頭の文字がカンマかどうかの判定を行います。
いきなり先頭の文字を削除せず。一度判定を挟むのはAPIの仕様が変わり先頭にカンマが入らなくなった場合に山田の山を削除してしまうことになるからです。
先頭の文字がカンマであるかの判定はstartsWith() メソッドを用います。

startsWith() メソッドは文字列が引数で指定された文字列で始まるかを判定して true か false を返します。
startsWith() メソッドがfalse、つまり先頭の文字がカンマでない場合はそのまま表示、startsWith() メソッド

元記事を表示

OTHERカテゴリの最新記事