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

【JavaScript】非同期処理（コールスタック、キュー、Promise、async/await）について図解で理解する。

# はじめに
　この記事は、javascriptの中でも高度（と自分が思っている）非同期処理について、自分の中で整理も兼ねてアウトプットしている記事です。
できるだけ図を用いて、噛み砕いて非同期処理の概略を理解することを優先に心がけて記載しています。

そのため、正確性に欠ける場合がございます。（そもそも筆者が勘違いしている場合もあり。）
ご理解の上、お読みいただけますようよろしく願いいたします。
この記事を読んでいただき、非同期処理のイメージを掴んでいただいた後、さらに深く正確な知識を学んでいただくための足掛かりとして利用していただけると幸いです。

この記事を作成するにあたり以下のページを参考にさせていただきました。

[イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理](https://zenn.dev/estra/books/js-async-promise-chain-event-loop)
[JavaScriptの非同期処理を理解する その1 〜コールバック編〜](https://knowledge.sakura.ad.jp/24888/)
[Jav

TypeScript文法(基礎編) 関数の作り方

# 関数とは何か？

TypeScriptに限らず、プログラミング言語のほとんどには、
関数という概念があります。

変数が、**値**を使いまわしたり、名付けをしたりすることができる箱であるなら、
関数は、**処理**を使いまわしたり、名付けをしたりすることができる箱です。

プログラムをわかりやすく分割して、
処理ごとに命名をして、
見通しをよくすることができるため、
特に大規模のプロジェクトなどでは、
関数を使うことはもはや必須です。

# TypeScriptの関数定義

TypeScriptの関数宣言は、
**function 関数名(引数リスト): 返り値の型 { 処理の中身 }という形の構文で
表されます。**

“`ts
function test(arg1: number, arg2: number): number[] {
const val = [];
val.push(arg1);
val.push(arg2);
return val
}

console.log(test(10, 30)) // [10, 30] と表示され

toLocaleString()の言語タグ一覧

# はじめに
toLocaleString()の使い方は公式でわかったが、その中引数として指定できる言語タグの一覧を見つけられなかったので調べた。

# `toLocaleString()`の使い方
公式にある通り、その数値を表す言語依存の文字列を返す。
日本語だと、三桁カンマ区切りにしてくれる。
“`ts
var number = 3500;

console.log(number.toLocaleString(‘ja-JP’)); // 3,500
“`
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

# `toLocaleString()`の言語タグ
`toLocaleString()`の引数に指定する、localesである言語タグの一覧を探した。

以下のサイトが言語タグを定義しているBCP47の公式。
https://www.ietf.org/rfc/bcp/bcp47.txt

だが上記のWebサイトは文章が長くて見づ

S3: ファイルのアップロードやダウンロードと考慮事項

# 背景
S3 にファイルアップロードが必要になったので、調べた記録

# 利用例

## 前提
“`typescript: client
import { GetObjectCommand, PutObjectCommand, ListBucketsCommand, ListObjectsCommand, ListObjectsV2Command, S3Client } from “@aws-sdk/client-s3”;

const REGION = “ap-northeast-1”;
const clientConfig = {
region: REGION,
// for Proxy
// requestHandler: new NodeHttpHandler({
// httpAgent: httpsAgent,
// httpsAgent: httpsAgent
// })
}
const s3Client = new S3Client(clientConfig);
const BucketName = “

TypeScriptにおけるuseReducer・useContextによるグローバルStateの実装方法

# はじめに
ReactによるContextAPIを用いたグローバルStateの仕様・実装方法について学習したため、復習と応用を兼ねてTypeScriptによる書き換えを行いました。

その際に、React単体のみの実装と結構、実装方法や記述が異なり苦戦したため、備忘録として記事にさせていただきます。
***※Todoアプリの実装例となります***

# グローバルStateの実装
早速、実装内容を見ていきましょう。
まず、`createContext`でコンテキストを作成します。
（比較のためReactの記述から記載してます）

Reactでの実装の場合は、下記のように`createContext`を呼び出すだけでOKです。
“`javascript:sample.jsx
import { createContext } from “react”;

const TodoContext = createContext();
“`
一方で、TypeScriptの場合、***`createContext`に初期値(defaultValue)を設定しないと`undefined`が渡され

ドラッグ&ドロップ実装の極意

# はじめに

ドラッグ＆ドロップ（DnD）機能を実装したことありますか？
例えばリストのアイテムの順番を入れ替える機能を作りたいときに、ユーザーがドラッグして移動できるインターフェイスだと便利ですよね。
使ってみると非常に便利なDnD機能ですが、いざ実装してみるとなかなか難しいものです。
最近WEBアプリにドラッグ＆ドロップの機能を実装した際に気を付けた点、こだわった点を備忘録として残します。

ReactDnDなど、DnDを簡単に組み込めるようなライブラリは存在しますが、
個人的な感覚として既存の機能にジャストな形でこの手のライブラリを組み込めた経験がないです。（何かしらを妥協する）
要件にジャストでハマらないケースが多いため、今回はフレームワーク（React、SolidJS）の機能のみを使ってゼロベースで実装しました。

SolidJSを使う理

base64をimg/pngに保存した時にちょっとつまづいたこと。文頭の`data:image/png;base64`は消す。

以下の質問いただきました。
「パソコンのwebカメラで写真撮って、jpgとかpngで保存したいです」

と言うことで、

1. まずは「ブラウザで写真を撮影する方法」を確認したところ、すでに記事があるのでこちらを[参考](https://zenn.dev/tatsuyasusukida/articles/84e789bea68b1e)。

2. また、PHPには`base64_decode`関数がある様子。
(公式は[こちら/base64_decode](https://www.php.net/manual/ja/function.base64-decode.php))

と言うことで,base64形式を取得してデコードすりゃいいんじゃないかと思ったんですが、どうもうまくいかない。

で、確認するとエンコードされたbase64の文頭の`data:image/png;base64`はdecode時には不要なんですね。
[参考](https://stackoverflow.com/questions/15153776/convert-base64-string-to-an-image-f

Numberオブジェクトって結構厄介

Numberオブジェクトの挙動が意外にも厄介だったのでまとめておく。

“`javascript:something.js
Number(“0”); // → 0
Number(“hoge”); // → NaN
Number(“”); // → 0 (NaNじゃないんかい)
“`
Reactにおいて、以下のようにクエリの値に応じて表示する内容を変えようと思ったのだが、実際にはクエリが指定されていない場合、blockID=0となってしまうため、「0以上やで〜」が表示されてしまう。

“`tsx:something.tsx
// 省略

const component = () => {
// urlは、https://localhost:3000/something
const location = useLocation();
const search = location.search;
const query = new URLSearchParams(search);
const blockID = Number(query.ge

dynamic importによって本番で犯してしまいがちなエラーを防ぐ

# はじめに
Webアプリケーションを開発するにあたってバンドルファイルを分散するためには`dynamic import`を用いてコード分割する必要があります。
この記事では`dynamic import`を用いてコード分割したアプリがファイルを読み込むことができずにエラーを吐いてしまうことに対する解決策を提示します。

# なぜ起こるのか
バンドルはwebpackやrollupといったバンドラによって行われます。
これらのバンドラから出荷されるバンドルファイルには内容をハッシュ化した文字列が割り当てられます。
例えば`index.92f37065.js`というファイルには`92f37065`とハッシュ値が与えられています。同時に出荷されたファイルに同じハッシュ値が与えられるのではなく、`index.92f37065.js`と同時に出荷されたファイル`vender.944r675e.js`のようにファイルごとに異なるハッシュ値を持ちます。また、同時に出荷されたファイルはハッシュ名込みでファイルの読み込みなどのやりとりを行います。
ハッシュ値はファイルの内容を元に生成されるので何らかの変

Agora WebSDK デモページの紹介 Advanced編

## はじめに
Agora SDKにはWebSDKのデモページの提供をしております。
今回はどんなデモがあるのか皆様にご紹介いたします。
今回はAdvanced編ということで、Agora WebSDKに触れ始めて様々な機能に触れてみたい方向けの内容となっております。
その他検証などにお役立ちする場合もあるかと思いますので有用にご利用いただけますと幸いです。
下記リンクよりすべてのWebDemoにアクセス可能です。

https://webdemo.agora.io/

## WebDemo紹介

### RecordingDeviceControl
RecordingDeviceControlはカメラとマイクを取得できているか確認できるデモとなっております。
ネットワークテストを行うことも可能ですので、クライアント環境チェックツールのサンプルとしてお役立ちできるかと思います。

https://webdemo.agora.io/recordingDeviceControl/index.html

### AdjustVideoProfile
AdjustVideoProfileは映像の

JavaScriptの配列操作のまとめ（map/filter/find/every/some/reduce）

## はじめに
JavaScriptで配列を操作する時に使用する便利な各メソッドのまとめです。

### map
すべての要素に対して1つずつ処理をして全ての要素を返す
↓mapを使用して数字を１０倍した例
“`
const numbers = [1,2,3];

const tenTimes = numbers.map((number) => {
return number * 10
});

console.log(tenTimes);　// [10, 20, 30]
“`
### filter
条件を満たした要素をすべて返す
↓filterを使用して２の倍数のみ抽出した例
“`
const numbers = [1,2,3,4];

const result = numbers.filter((num) => {
return num % 2 == 0
});

console.log(result);　// [2, 4]
“`

### find
最初に条件を満たした要素1つだけ返す
↓findを使用して３以上の要素1つを抽出した例
“`
const numb

オブジェクト配列をオブジェクトに変換する

“`
const array = [
{id: 1, value: 1},
{id: 2, value: 1.2},
{id: 3, value: 3},
];
const obj = array.reduce((sum, v) => ({…sum, [v.id]: v}), {});
“`

配列の要素の追加、削除のまとめ(JavaScript)

配列の要素の追加、削除のまとめです。JavaScript編です

“`JavaScript
‘use strict’;
const scores = [80,90,40,70];
// 要素の前に配列を追加
scores.unshift(46,48);
// 配列の要素の1番後ろを削除する
scores.pop();

for(let i=0;i Score${i} : ${scores[i]}

`);
}
“`
unshiftメソッドで要素の1番前に要素を追加します。
popメソッドを使って要素の1番最後を削除します。

“`JavaScript
‘use strict’;
const scores = [80,90,40,70];
// 要素の後ろに配列を追加
scores.push(60,50);
// 配列の要素の1番最初を削除する
scores.shift();

for(le

個々のblade.phpファイルの中でそれぞれvueを記述する

## 環境

– Laravel: 8.6.2
– Vue.js: 2.6.12
– PHP: 8.0.8
– Composer: 2.5.1
– Node.js: 19.3.0

“`zsh
$ composer create-project –prefer-dist laravel/laravel:^8.0 project-name
$ php artisan migrate:fresh
$ composer require laravel/ui
$ php artisan ui vue –auth
$ npm install && npm run dev
$ php artisan serve
“`

Viewが用意されていて楽なので、この記事では既に用意されているhome.blade.phpに追記する形で、動かしていきたいと思います。

### Tips.認証機能の無効化

環境構築時に`php artisan ui vue –auth`としたのは、新たに追加されるapp.blade.phpとhome.blade.phpを使うためです。
しかし、一々このためにregi

実務未経験文系大学生が完全独学で制作したReact/firebaseのWebサイトをみてほしい

こんにちは。ゆうたと申します。

タイトルの通り、プログラミング初心者の私がポートフォリオ用のwebサイトを作ったので紹介させていただきます。

それにあわせて**独学の苦悩**なども書きたいと思います。

わたしと同じ実務未経験でプログラミングをやっている人は共感できることも多いと思います。

この記事は、
– **only text**(React/firebaseで制作したWebサイト)の紹介
– **未経験でたった一人で制作すること**の苦悩
– 作ってみた感想、これからやりたいこと

の構成で書いていきます。

Qiitaの投稿どころかインターネットに記事を載せたことはないので細かいことろは大目に見てください。

この記事を読んでくださっている方のほとんどはわたしより経験や知識が豊富だと思うのでそういった方々のご指摘点があればコメントしてもらえるとうれしいです。

# only text(React/firebaseで制作したWebサイト)の紹介
[**only text**](https://onlytext.net)
![スクリーンショット ホーム画面.png](http

Gatsby-starter-blogをTypeScript化する [2022-12版]

# はじめに

先月個人でブログを作成した際に、Gatsby.jsのgatsby-starter-blogというテンプレートを使ったのですが、デフォルトではTypeScript化されてないのでその手順を紹介しようと思います。

ネット上の関連記事ではconfigファイルのts化で一工夫されているものがいくつかあったのですが、今ではconfigファイルのts化が公式サポートされ、より簡単にTS移行できるようになっており本記事ではそこを踏まえて紹介させていただきます。

コードは動作確認後、筆者のレポジトリにあげてあるのでもし動かない！ということがあれば参考にしてみてください
[https://github.com/ironkicka/gatsby-starter-blog-typescript](https://github.com/ironkicka/gatsby-starter-blog-typescript)

# ****gatsby-starter-blogって？****

Gatsby.jsが提供しているStarterと呼ばれるテンプレートの１つです。

> [Starter

kintoneにおける「添付ファイル」フィールド仕様まとめ　～標準・カスタマイズを俯瞰して～

# kintoneの添付ファイルフィールド
kintoneでは、「添付ファイル」フィールドと呼ばれる、
様々な形式の添付ファイルを保存できるフィールドが標準で用意されています。

簡単にファイル管理ができるため非常に便利な機能ですが、
カスタマイズなどで詰まってしまう、困ってしまう部分も多々あるため、
今回、標準機能からカスタマイズまで、「添付ファイル」を軸にしてまとめておこうと思います。

注意：下記記載の内容は**2022年12月時点**のkintoneの仕様で記載しています。

# 標準機能
## 添付方法
　kintoneの標準機能では、添付方法としては以下の二つがあります。
　画像引用：[kintoneヘルプ>添付ファイル](https://jp.cybozu.help/k/ja/id/040514.html)
　①[参照]をクリックして、ファイルを選択する
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584477/b4cc8a69-acf0-c6e0-559b-d1c3c

誰でも作れるBetterJSONトランスパイラを作ってみる

# 概要

(厳密な)JSONはイメージとは裏腹に手で書くには思ったより不便な仕様になっています。

– コメントが書けない。
– Trailing comma(末尾のカンマ) は認められていない。(=手で追加する際にカンマを意識する必要が出て面倒)
– (ダブルコーテーションの代わりに)シングルコーテーションは使えない。
– キー名もダブルコーテーションで囲む必要がある。

などなど・・・

というわけで、JavaScriptのオブジェクト表記のようにゆるく書けてなおかつそのままJSONに変換できるトランスパイラを作ってみる。

# 誰でも作れる

ちょこっとコードを付けて`eval(new Function)`して`JSON.stringify`で出力するだけです。

node.jsなら追加のモジュール一切不要で実現できます。

“`bjson.js
const fs = require(‘fs’);

if(process.argv.length < 3) { const path = require('path'); jsfile = path.basenam

javascriptの勉強記録

li要素のテキスト取得
“`html

• aaa
• bbb
• ccc

“`

CSSの疑似クラス:nth-child()とquerySelector()で取得する方法
（コメントで教えて頂きました）

“`html

• aaa
• bbb
• ccc