f@ctor

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

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

Javascriptで数字の桁数を固定する

時刻表示で常に2桁表示したかったのでメモ

“`
1 => 01
5 => 05
“`
みたいに。

# 数字を常に２桁で表示
`String.prototype.slice()`を使うとシンプルに書ける

“`javascript
let number = 1
number = (“0” + number).slice(-2)
console.log(number)
“`
numberは`01`になる

# String.prototype.slice()
String.prototype.slice()は文字列の一部を取りだしてくれるメソッド

– １つ目の引数は取り出す文字列の始点
– ２つ目の引数は終点

(どちらも0から始まるインデックス)

例えば…

“`javascript
const numer = “123456789”

//5文字目から取り出す
numer.slice(4)
=> “56789”

// 下4桁を取り出す
numer.slice(-4)
=> “6789”

// 4文字目まで取り出す
numer.slice(0,4)
“123

元記事を表示

Firebase: Firebase App named ‘[DEFAULT]’ already exists (app/duplicate-app) と怒られたら

どうもー、

新年あけましておめでとうございます?

2021年の書き初めならぬ、技術記事書き初め。

ドイツでフリーランスのフルスタックエンジニアと、[「オーダーメイド感覚プログラミング学習サービス | Lilac（ライレック）」](https://note.com/frontendlifeinde/n/n4e37d4cc5bca?magazine_key=m9b8feda1d547)の開発と運営、講師をしているArisaです。

主には自分のブログとnoteに発信してきましたが、2021年からQiitaの投稿を再開していきたいと思います。

[Lilac](https://note.com/frontendlifeinde/n/n4e37d4cc5bca?magazine_key=m9b8feda1d547)の教材閲覧のためのwebアプリケーション開発をしているのですが、ログイン機能を今実装中です。

が、少々Firebase Authenticationがはまりやすかったので、備忘録、メンテナンスのために書いておきたいと思います。

ざっと調べた感じ、結構みんな落ちるポイントが似

元記事を表示

AWS SDK for JavaScriptとDockerでAWS（S3、DynamoDB）のローカル開発をやってみる

# はじめに
ITニュースを漁っていると情報が目に入らない日はないくらい急速に拡大を進める__AWS（Amazon Web Services）__ですが、無料枠があるとはいえ中々手を出しにくいものかと思います。

本稿では、AWSの提供するサービスの中でも使用頻度が高そうな__S3（Amazon Simple Storage Service）__と__DynamoDB（Amazon DynamoDB）__をDockerを用いてローカルで開発してみた内容について記載していこうと思います。

# 実行環境
– Windows10 Pro
– Docker Desktop for Windows (WSL2)
– Node.js v14.15.3 (Vue CLI 3)　※必須ではない

# 主要技術概要
– AWS SDK for JavaScript：AWSのサービスを使用するためのJavaScriptライブラリ
– S3：AWSが提供するストレージサービス。
– DynamoDB：AWSが提供するフルマネージドNoSQLデータベース。Key-Value構造。

# 開発準備
Docke

元記事を表示

【TypeScript】オーバーロードの様々な書き方

## はじめに

TypeScript のオーバーロードには、大きく分けて以下の 2 つの書き方があります。

– [`function` を利用する](https://typescript-jp.gitbook.io/deep-dive/type-system/functions#brdo)
– `interface` や `type` に[呼び出し可能オブジェクト(Callable)](https://basarat.gitbook.io/typescript/type-system/callable)を定義する

それぞれの使い方についてまとめてみました。

## 環境

TypeScript: v4.1.3

## オーバーロードについて

最初に、TypeScript におけるオーバーロードについて軽く触れておきます。
既にご存知の方は読み飛ばしてください。

TypeScript は JavaScript のスーパーセットですが、元々の Javascript にはオーバーロードと呼ばれる機能はありません。
以下のように、関数の中で`typeof`を用いて引数の場合分けを行い

元記事を表示

【JavaScript】非同期処理について 3 〜Promiseチェーンについて〜

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

###注意
###本記事には、各種記事を調べた結果の自分なりの考察や推論が入っていますので、特に間違っている可能性が高いです。そのことを踏まえた上で参考にしていただけると幸いです。

本記事は下記の記事の続きとなります。
[【JavaScript】非同期処理について１〜タスクキュー、コールスタック、イベントループ〜]
(https://qiita.com/sho_U/items/ff82aa576837198097ce)
[【JavaScript】非同期処理について 2〜非同期処理のチェーン、コールバックヘル〜]
(https://qiita.com/sho_U/items/313df6fae06bf61bb58d)

また、クラスやインスタンス化の話もでてくるので、こちらの記事も参考になるかもしれません。
[【JavaScript】クラス構文について１]
(dhttps://qiita.com/sho_U/items/aaf31fad5

元記事を表示

Vue.jsで非同期処理関数を作る方法

皆さんこんにちは！！！

今回はVue.jsで非同期処理関数を作る方法をご紹介します！

めちゃめちゃ簡単なので、ぜひ学習の参考にしてください。

それでは説明していきます。

#Promiseを用いて関数を作成#

今回はTimeoutの関数を非同期処理で行います。

Vue.jsで非同期処理関数を作成する際は、宣言時にPromiseを利用するのではなく、返り値として利用します。

“`App.vue

“`

#エラー対処#

Vue2.x系を使っている方は下記のようなエラーが出ると思います。（出ない方はスルーして結構です）

“`
error: npm i core-js/fn/promise
“`

この

元記事を表示

Spring Boot + Java + PostgreSQL でDBに画像ファイルをアップロード＆画面表示

#はじめに
ユーザや商品等のテーブルに画像の一緒に保存したくなったので、データベース上に保存できないかどうか色々と調べた結果何とかその方法がわかったので備忘録としての残しておきます。誰かの参考になればと思います。

#完成イメージ
1. 以下のような、画面ファイルのアップロードボタンがあり、画像を選択する
![スクリーンショット 2021-01-01 19.00.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/a7215dde-8ac1-95b9-7c91-4c90f993697e.png)

2. アップロードボタンをクリックするとアップロードしたファイルが画面に表示されます。
![スクリーンショット 2021-01-01 19.02.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/637360/9997ec2f-00d0-3548-1b9a-8e6e6af79629.png)

#以下必要となる

元記事を表示

(Java、JavaScript、Python)文字列処理の比較

# Java、JavaScript、Pythonの処理比較

最近JavaScriptとPythonの勉強を始めました。
学んだことの整理として、Java、JavaScript、Pythonの3言語の処理比較を記事にしていこうと思います。
今回は文字列処理です。

## 文字列処理の比較一覧

|処理内容|Java|JavaScript|Python|
|—|—|—|—|
|文字列長|length()|length|len(文字列)|
|一致比較|equals(比較文字)
equalsIgnoreCase(比較文字)|==比較演算子
===比較演算子|==比較演算子|
|検索|indexOf(検索文字列)
lastIndexOf(検索文字列)
contains(検索文字列)
startsWith(検索文字列)
endsWith(検索文字列)
|indexOf(検索文字列)
lastIndexOf(検索文字列)
includes(検索文字列)
startsWith(検索文字列)
endsWith(検索文字列

元記事を表示

html, javasript, jquery とSakura Editor

#初めに
　Sakura EditorでHTMLページを保存する。
#Sakura Editorのダウンロード

https://sourceforge.net/projects/sakura-editor/

#HTMLページを保存する
“`HTML


タイトル

サンプルテキスト


“`
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/01c352d8-58e4-035e-03b7-20966d5a530c.png)

HTMLで保存して、実行する
![キャプチャ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965456/1b02343e-21f2-f0df-33aa-3fe5f

元記事を表示

【JavaScript】非同期処理について 2〜非同期処理のチェーン、コールバックヘル〜

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

本記事は下記の記事の続きとなります。
[【JavaScript】非同期処理について１〜タスクキュー、コールスタック、イベントループ〜]
(https://qiita.com/sho_U/items/ff82aa576837198097ce)

#非同期処理のチェーンとは

非同期処理のチェーンとは、一つの非同期処理が終了した後に、次の非同期処理を開始し、チェーンのようにどんどんつなげていく処理のことです。

今この様な非同期処理を行うプログラムがあるとします。

“`js
function sleep() {
setTimeout(function () {
console.log(0);
}, 1000);
}
“`
1000ミリ秒後に0を出力するプログラムです。

非同期処理をつなげるには、内部でさらに非同期処理を呼び出してあげます。

“`js
function sleep() {
setTimeout(fu

元記事を表示

[連載]スーパーマリオ的なゲームをjavascriptで作ってみる 初級編 〜6章〜 テキがいてこそ

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

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

元記事を表示

js namespace sample

JavaScriptの名前空間の実装例

“`javascript:sample.js
var test = test || {};
test = (function () {
function callAlert() {
alert(‘test’);
}

return {
callAlert: callAlert
};

})();

test.callAlert();
“`

参考
https://qastack.jp/programming/881515/how-do-i-declare-a-namespace-in-javascript
https://teratail.com/questions/83675

元記事を表示

打倒レンダリングブロック！（JavaScript編）

# はじめに

CSSやJavaScriptなどの読み込み方法（記述）によってはレンダリングを妨げることとなります。
本記事ではJavaScriptの読み込み（記述）に焦点を当てて、レンダリングブロックの対策について説明します。

レンダリングブロック対策の基本は**HTMLをとにかく速く出力**することです。
この前提をもとに、対策方法について説明できればと思います。

# レンダリングの基本

ブラウザにおけるレンダリングの流れは大まかに以下のようになります。

![render01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/118613/eb90d260-48c4-372f-17d6-5eb138592e22.png)

1. HTMLをパース。
– DOMツリーを構築する。
– CSSのマークアップからCSSOMツリーを構築する。
– JavaScriptを実行する。
2. DOMとCSSOMを組み合わせてレンダリングツリーを構成する。
3. 各ノードのビューポー

元記事を表示

web素人がChrome拡張機能を作って公開してみた

# 自己紹介
– C#でデスクトップアプリ開発2年目
– HTMLとかweb系は全く触ったことなし

# 何を作ったか
YouTubeの視聴時間を記録し、確認できるChrome拡張機能

# なぜ作ったか
1. 何か自分の手で作ってみたかった。せっかくなので公開できる系のやつ
1. YouTubeにどれだけ時間を吸われているか見えるようになれば、ダラダラする時間を減らせるんじゃないかと考えました。

# 作ったもの
## 概要
(作成時はこんな感じにメモ書いて考えてました。)
![メモ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497764/08856430-e620-227c-a9c6-c56ed4b594cf.png)

## 機能
1.　**URLの監視**
background.jsにてURLを一定周期で取得し、”youtube”を利用しいていれば視聴時間にカウントする。

2.　**視聴情報の保存＆取得**
Chrome拡張機能専用のストレージを利用して情報を保存する。
時間帯と視聴時間

元記事を表示

Vue.js composition-api を使った開発でおすすめしたいこと

この記事は Zenn と同時投稿しています。

# はじめに

Vue.js はバージョン 3 がリリースされたこともあり、バージョン 2.x 系を使っていてもプラグインを利用して composition-api を使った開発をしている人が多いと思います。

私も composition-api が公開されて比較的早い段階から利用してきました。結果、使い方が私の中で固まったので共有したいと思います。

なお、比較的大規模かつ、長期的にメンテナンスしたいようなプロダクトを想定しています (大体そうだと思いますが)。

プロトタイピングや寿命の短いソフトウェアなら、ここで説明することはあまり合わないかもしれません。
また、Typescript の利用を前提としています。

# composition-api と Options API について

composition-api 自体についてを知りたい場合は以下を御覧ください。
https://composition-api.vuejs.org/

私が composition-api を利用することで最もよいと思ったことはリアクティブな値

元記事を表示

【SVG制御妄想７】SVGの限界

この記事は「続・Mohoから出力したSVGを制御したい妄想の話」の一部です。

■実物
【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control

【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/

■記事一覧
【SVG制御妄想１】SVG解析しないと始まらない
https://qiita.com/flying_echidna/items/5a628db0d652d1558208

【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb

【SVG制御妄想３】連番データをどげんかせんと
https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86

【SVG制御妄

元記事を表示

【SVG制御妄想６】助けてマルチスレッド

この記事は「続・Mohoから出力したSVGを制御したい妄想の話」の一部です。

■実物
【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control

【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/

■記事一覧
【SVG制御妄想１】SVG解析しないと始まらない
https://qiita.com/flying_echidna/items/5a628db0d652d1558208

【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb

【SVG制御妄想３】連番データをどげんかせんと
https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86

【SVG制御妄

元記事を表示

【SVG制御妄想５】ボーンぐりぐり

この記事は「続・Mohoから出力したSVGを制御したい妄想の話」の一部です。

■実物
【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control

【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/

■記事一覧
【SVG制御妄想１】SVG解析しないと始まらない
https://qiita.com/flying_echidna/items/5a628db0d652d1558208

【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb

【SVG制御妄想３】連番データをどげんかせんと
https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86

【SVG制御妄

元記事を表示

【SVG制御妄想４】変形させたいよなぁ？

■実物
【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control

【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/

■記事一覧
【SVG制御妄想１】SVG解析しないと始まらない
https://qiita.com/flying_echidna/items/5a628db0d652d1558208

【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb

【SVG制御妄想３】連番データをどげんかせんと
https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86

【SVG制御妄想４】変形させたいよなぁ？
https://qiita.com/flying_e

元記事を表示

【SVG制御妄想３】連番データをどげんかせんと

■実物
【GitHub】SourceOf0-HTML/path_control: SVGを制御したい願望
https://github.com/SourceOf0-HTML/path_control

【GitHub Pages】ベクターデータをいじり倒したい気持ち
https://sourceof0-html.github.io/path_control/

■記事一覧
【SVG制御妄想１】SVG解析しないと始まらない
https://qiita.com/flying_echidna/items/5a628db0d652d1558208

【SVG制御妄想２】Mohoから出力したSVGのマスクがバグる
https://qiita.com/flying_echidna/items/3930caf04626deec7bfb

【SVG制御妄想３】連番データをどげんかせんと
https://qiita.com/flying_echidna/items/ded3f3590c3d67fadb86

【SVG制御妄想４】変形させたいよなぁ？
https://qiita.com/flying_e

元記事を表示

OTHERカテゴリの最新記事