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

React + TypeScript: 要素で選択した画像ファイルのイメージをページに表示する

[``](https://developer.mozilla.org/docs/Web/HTML/Element/input/file)要素を使うと、ローカルのファイルが選べます。そして、取得した情報にもとづいて、ファイルが操作できるのです。本稿では選択するのは画像ファイルとし、そのイメージをページに差し込んでみます(サンプル001)。

#### サンプル001■React + TypeScript: Displaying image selected with \
https://codesandbox.io/s/react-typescript-displaying-image-selected-with-input-type-file-v1j229

この記事は全3回のチュートリアルシリーズの第1回です。3回とおしてつぎのサンプル002ような画像ファイル操作のインタフェース例をつくります。``要素を共通に扱うものの、それぞれテーマは別です。興味に応じて、解説を個

JSで0埋めをsliceを使わずに実装する

JSで毎度sliceを使って0埋めを描くのも手間になるので、何かいい方法がないか探ってみた。

「JS 0埋め」でググると大抵出てくるの以下の例で考える
1桁や2桁の数字が出てくるとその前に０を入れて必ず3桁にしたいのような例を考える。

“`js
const num = 1;
const result = (“000” + String(num)).slice(-3);

console.log(result);
// 出力結果　001
“`

es20117までであればこの書き方で良いのだが、es2017でpadStartというものが追加されている。

説明文はmdnのままであるが以下のようになっている。
padStart() メソッドは、結果の文字列が指定した長さになるように、現在の文字列を他の文字列で (必要に応じて繰り返して) 延長します。延長は、現在の文字列の先頭から適用されます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ

この記事はようやくSafariでもフルサポートされそうな`Web Animations API`の`composite`（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。

▼ こういうアニメーション作るのもだいぶん楽になります

Web Animations APIで星空パーティクル

単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bf

【JavaScript】for of文の使い方（foreachの代わり）

# for of文の使い方メモ
for of文を使って配列、オブジェクトを処理する方法をメモ

## 配列の処理
“`JavaScript
let array = [
‘value1’,
‘value2’,
‘value3’,
‘value4’
];

for (let value of array) {
console.log(value);
}
“`
**結果：**
value1
value2
value3
value4

## オブジェクトの処理
for in文は予想通りの動きをしない可能性がある為、for of文を使用する。

### キーの取り出し
`Object.keys(object)`を使用することでオブジェクトのキーを値にした配列に変換する。
“`JavaScript
let object = {
key1: ‘value1’,
key2: ‘value2’,
key3: ‘value3’,
key4: ‘value4’
};

for (let key of Object.keys(obj

Heroku scheduler addonの画面でUTCではなく日本時間を表示する

# やること

Heroku Schedulerの時間がUTC時間表記なのでわかりにくい

これを、日本時間を併記するスクリプトを作る

# コード

自分用なので適当に書いた。
うまくいったからそれでいい的なコードですいません。

– JavaScriptは日付時刻のフォーマットが面倒だ。0:0になるけど気にしない。
– 日付の判定は`Date()`に任せた。うまくいったときだけ日本時間表示する。
– UTC -> JST変換もDateが正しく返す前

絶対はずさないお店を検索できるwebアプリケーションをリリースするまで③

javascript　文字列を数値に変換するメソッド

~~~
parseFloat　メソッド名
javascript　文字列を数値に変換するメソッドになる。
~~~

~~~
グーグルマップ表示
let timer = setInterval(() => {
if (window.mapLoaded) {
clearInterval(timer);
console.log(parseFloat(this.cooks[0].lat))
const map = new window.google.maps.Map(this.$refs.map, {
　　　　　　　　　　　　　　　　center: { lat: parseFloat( this.cooks[0].lat),
　　　　　　　　　　　　　　　　lng:　parseFloat(this.cooks[0].lng) },
~~~

~~~
parseFloatの使い方（緯度経度）
center: { lat: parseFloat( this.cooks[0]

ワイ「なに！？普通のJavaScriptなのに型が書けるやと！？」

# リモートワーク中ワイ
ワイ「あー、もう10時10分やないか」
ワイ「10分もぶっ続けで仕事してもうたわ」
ワイ「そろそろ10分休憩しよか」
ワイ「むしろ、今日はもう上がってまうのもアリやな」
ワイ「今日はもう**十分働いた**、いうてな」
ワイ「ガーファファファ！！！」

# Twitterでも見てみる
ワイ「ほなTwitterでも見てみよか」
ワイ「お、今日もエンジニアさんたちが技術ツイートをしてて、勉強になるなぁ」
ワイ「ふむふむ・・・なに！？」
ワイ「普通のJavaScriptで、**型が書けるようになる**やと！？」
ワイ「TypeScriptなしでか！？」

娘（**6歳**）「いや、まだ[**そういう提案がされてる**](https://github.com/tc39/proposal-type-annotations)だけだよ」

ワイ「おお、そうなんか娘ちゃん」

# これが実現されたら

ワイ「でも、もしこれが実現されたら・・・」

> 「コンパイラ要らずで型の恩恵を受けられて、ハッピー！」

ワイ「↑こういうことやな？」
ワイ「もしかしたら、TypeScript

【高専ベンチャー社×ゆめみ社 2022ハッカソン春】ReactとFirebaseでお絵描き×チャットアプリを作る

# はじめに
こんにちは、高専ベンチャー社×ゆめみ社 ハッカソン チームDのnaotikiです。
この度ハッカソンに初参加してアプリを作って優勝したので主に私が実装した部分の
技術的な事を書いていきたいと思います。

↓ @tos-up先輩のこちらの記事も是非読んでください！ ↓

https://qiita.com/tos-up/items/0b783c87dadb905b01c1

間違いがあったら優しく指摘してください
# なにつくろう・・・
テーマは「WITHコロナ時代のコミュニケーションを活性化せよ」
とあるチームの会話(一部省略)
Aさん「何作ろう」
Bさん「みんなで同じ課題に取り組むのがいいですよね！」
Aさん「お絵描きっていいですよね！」
Cさん「作ろう！」

こうしてお絵描きチャットアプリが作られることになりました。
# 開発開始！
こうして開発が始まりました
フロントエンドのフレームワークはチームメンバーが触ったことあったり、興味があったりしたReactに決定しました。
~~本当はKotlin/JSでもよかったKotlin最高(しかしwrapper書くのめんどく

Reactでindex.js:1 Warning: Received true for a non-boolean attribute outline.が出た時の対処法

## エラー内容

“`bash
index.js:1 Warning: Received `true` for a non-boolean attribute `outline`.

If you want to write it to the DOM, pass a string instead: outline=”true” or outline={value.toString()}.
at button
at http://localhost:3000/static/js/vendors~main.chunk.js:22611:3
at div
at ModalArea (http://localhost:3000/static/js/main.chunk.js:1951:5)
at Portfolios
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:61799:29)
at Switch (http://localhost:3000/st

ReactでQRコードリーダーを実装する

ブロックチェーンSymbolのウォレットの開発をしています。Webウォレットの開発ということで、React向けのQRコードリーダーの実装を進めていたのですが、意外と時間がかかったので、メモも兼ねてやり方を掲載します。


# パッケージ
“`
react@18.0.0
@mui/material@5.6.4
@zxing/browser@0.0.7
@zxing/library@0.19.1
“`

# QRライブラリの選定について
当初Webで検索し一番に試したライブラリは以下ですが、こちらは私の技術スキルでは内部エラーを解消できず、断念しました。

https://www.npmjs.com/package/react-qr-reader

代わりに今回 zxing というライブラリを利用しています。

https://github.co

JupyterLab(JavaScriptノートブック)にて「Kernel Restarting」が頻発する際の対処法

### 注意
本記事はJuyterLabにてJavaScriptのノートブックを動作させたときのものです
Pythonのノートブックでのことではありませんのでご注意ください

# 動機
JuyterLabにてJavaScriptのノートブックを動作させた際、カーネルを再起動させると「Kernel Restarting」が頻発し、煩かったため

# 環境
・OS : Windows11 pro
・JupyterLab : Version 3.3.4

# 対処法
JupyterLab起動時のオプションに
  KernelManager.autorestart False
を加える

例
  jupyter lab –KernelManager.autorestart False

このオプションを見つけたのはJupyterNotebookのページでしたが、JupyterLabの方でも機能するようでした

# 参考
https://jupyter-notebook.readthedocs.io/en/stable/config.html

Monaca × NCMBでマンガビューワーアプリを作る（その3：マンガビューワーの実装）

NCMBにはいくつかの機能がありますが、データベースのように使えるデータストアや写真などを保存しておくファイルストアはよく使われる機能になります。

今回はそのデータストアとファイルストアを組み合わせて、マンガビューワーアプリアプリを作ります。[前回はデータの準備と一覧画面の作成を行いました](https://qiita.com/goofmint/items/12fa244f01a0789a8f00)ので、今回はマンガビューワーの実装を解説します。

## 完成版のコード

作成したデモアプリのコードは[NCMBMania/Monaca_Comic: MonacaとNCMBを使ったマンガアプリのサンプルです](https://github.com/NCMBMania/Monaca_Comic)にアップロードしてあります。実装時の参考にしてください。

## ビューワー画面の実装

`www/pages/view.html` を作成します。HTMLを含めた基本形は次の通りです。

“`html