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

【JavaScript】String配列の要素をキーとするオブジェクトを作成する方法

# はじめに

ループしながら、配列内の要素をキーとするオブジェクトを作成する方法を紹介します。

# 方法

“`javascript
const array = [‘key1’, ‘key2’, ‘key3’,]

const createObj = (array) => {
const obj = new Object();
array.forEach(item => (Object.defineProperty(obj, item, {
enumerable: true, // ループのために必要!
value: ‘ここに値’
})));
return obj;
}

console.log(createObj(array));
// {key1: ‘ここに値’, key2: ‘ここに値’, key3: ‘ここに値’}
“`

オプションとして設定する、`enumerable: true`が重要です。
これがないと動きません。

# まとめ

配列内の要素をキーとするオブジェクトを作成することができました。

NCMB（Nifty Cloud Mobile Backend）データストアの基本操作チートシート（JavaScript SDK）

自分なりにまとめてみました。足りないものは随時更新。

## 使用するための準備
SDKの入手やセットアップは下記リンクを参考に。
https://mbaas.nifcloud.com/doc/current/introduction/sdkdownload_javascript.html#gsc.tab=0

“`javascript
var ncmb = new NCMB(“ApplicationKey”, “ClientKey”);
“`

## レコードの取得（Select）
#### 1レコードだけの取得の場合
“`javascript
let object = ncmb.DataStore(“DataStoreClassName”);

object.equalTo(“objectId”, value)
.fetch()
.then(function(result){
// 取得時処理
}).catch(function(err){
// 取得エラー処理
});
“`
####

配列に大きい添字を指定して値を代入したときのサイズ

## 動機
　Webアプリを開発する際、ユーザーID（整数）をインデックスにした配列を作ったときに、無駄に大きい配列になるのでは？？

## 結論
　PHPでは配列、JavaScriptでは`Map`を使用すると、サイズが無駄に大きくならない。

### PHPの場合
　大きい添字を指定しても、問題はなさそう。

“`php
$array = [];
$array[100] = ‘hoge’;

echo count($array); // 1
“`

### JavaScriptの場合
　大きい添字を指定すると、あいているところに`empty`が挿入された配列になった。

“`javascript
let array = [];
array[100] = ‘hoge’;

console.log(array); // [empty x 100, “hoge”]
console.log(array.length); // 101
“`
`Map`を使用すると、PHPの配列と似たような振る舞いになった。

“`javascript
let map =

JavaScriptでスマホアプリを作る7つ方法

・ヮ・）あ、おはようございまーす

JavaScript でスマートフォンアプリを作る方法を調べる機会があったのでまとめました！

細かいアーキテクチャに関しては割愛します:sob:

# ネイティブアプリ

## 1. [React Native](https://reactnative.dev/) ★89.9k

React でネイティブアプリを開発できるフレームワーク
JavaScript でアプリ開発といえばこれですね！

[Expo](https://expo.io) という React Native での開発をサポートするプラットホームを使うと
ネイティブ機能を使うためのプラグインに制限がかかりますが
簡単に実機で確認したり[Appleの審査なし](https://qiita.com/keneo/items/625c7623d0dfb0cf0c6c#%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA)にアプリをアップデートできるらしいです

[Playground(ex

gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する

# これまでの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc2

YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみた

#はじめに

YouTube Data API を使って、YouTubeチャンネルにアップロードされた動画を埋め込みHTML形式で取得してみました。

JavaScriptのYoutube用ライブラリもいくつかあるみたいですが、
今回はURLを直打ちする形で実装しました。

GET URLやJSONの仕様は下記を参照しました。
https://developers.google.com/youtube/v3/docs

環境は下記になります。
macOS Catalina 10.15.6
Node.js v14.8.0
(Node.js Library)request 6.14.7

#コードと実行結果

コードは下記になります。

“`youtube.js
const request = require(‘request’);

const URL_YOUTUBE_API=’https://www.googleapis.com/youtube/v3/’;
const YOUTUBE_APP_KEY=process.env.YOTUBE_APP_KEY;
const MY_YO

gatsby入門 チュートリアルをこなす 6. 変圧器プラグイン※Transformer pluginsのgoogle翻訳

# これまでの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc2

Web画面初心者の教育用メモ2

#HTMLの基本構造

“`html

　
　　
　　　 　　　

　　　
　　　
　　　
　
　
　　
　　
　

“`

HTMLは上のように\の中に\などが入りその中に…といったような入れ子になっている形です

それぞれを解説すると
●\
　HTML5の文書であることを示しています。と

型レベルプログラミングとTypeScriptとPureScript

# 導入

[TypeScriptで型のループを計算する](https://qiita.com/cuttlefish_math/items/792c911794a5a1bb304b) という記事で、TypeScriptでタプルの型を逆順にする方法が紹介されていました。これが非常に興味深く、この方法を応用すれば、以前断念していた型付リスト的なもののライブラリを作り直せるのではないかと思い、そのためにまずはPureScriptで同じものが作れるか調べてみよう、というのが今回の動機です。

[TypeScriptで型のループを計算する](https://qiita.com/cuttlefish_math/items/792c911794a5a1bb304b) で定義されている`Reverse`総称型(ジェネリクス、多相型)を使うと、例えば要素数が3で、それぞれの要素の型が「文字列、数値、論理型」である

“`typescript
[string,number,boolean]
“`

というタプル型があった場合に、タプル内の型の並び順を逆にした型 `R`を次のように構成することが出来

２つの配列比較してkeyの値が一致したもののみを返す配列を作成する

使用する配列

“`javascript
id: [1, 7, 5, 8],
list: [
{
id: 1,
value: ‘id = 1’
},
{
id: 2,
value: ‘id = 2’
},
{
id: 3,
value: ‘id = 3’
},
{
id: 4,
value: ‘id = 4’
},
{
id: 5,
value: ‘id = 5’
}
]
“`

１つ目の配列の値の中にlist.idと一致する値がが存在すれば、新しく作成される配列に新しいオブジェクトを格納する

“`javascript:for文パターン

filteringList() {
let newArray = []
for (let i = 0; i < this.list.length; i++) { this.id.map(val => {
if (this.list[i].id === val) {
newArray

【AWS】Cognito + Amplifyでオリジナルのサインアップ・サインイン・サインアウト画面を作成する

# はじめに

ユーザ管理基盤の実装というのはいつだって考えることや懸念するセキュリティリスクが多くてめんどくさい。。。

というわけでAWSが提供するフルマネージドなユーザ基盤の[Cognito(コグニート)](https://aws.amazon.com/jp/cognito/)と[Amplify(エンプリファイ)](https://aws.amazon.com/jp/amplify/)のAuth SDKを使って~~手抜きで~~簡単にログイン認証基盤を作ろうと思い立ったのですが、一番ラクそうだった[Cognitoが予め用意している認証UIは日本語対応不可](https://www.slideshare.net/slideshow/embed_code/key/2cEJN3Tcx0GDI4?startSlide=41)だったためオリジナル管理画面を作るしかない…ということに。

いざオリジナルのユーザ管理画面を作成するぞ…と思い立ったら結構めんどくさくて忘れそうだったので環境構築から実装までの手順をまとめてみました。

## システム構成

今回構築するシステム構成図をま

gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング

# これまでの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc2

disabled属性の項目値はサーバへ送信されないのでリロードすると値が消えるときの対応方法

– 環境
– CentOS Linux release 7.8.2003 (Core)
– openjdk version “11.0.7” 2020-04-14 LTS
– JSF 2.3.9
– jquery 3.2.1

# 事象 : 画面がsumit後にリロードされたら非活性のラジオボタンの選択値がクリアされた
画面初期表示時にラジオボタンは初期値を設定して、ラジオボタンが未選択にならないようにした。が、リロードされたら未選択になってしまった。

## 原因 : ラジオボタンがdisabled属性だからsubmitされずサーバに値が送られない
disabled属性でサーバ送信されない > バッキングビーンに値が設定されない > リロードしても画面に値がバインドされない
という流れでリロードするとラジオボタンの値がク

JavaScriptのclassについて学んだことメモ(随時追記)

オブジェクト指向プログラミングにあこがれ、JavaScriptのclassを勉強しているので発見をメモ。随時追記します。

## コンストラクタ
コンストラクタはクラスからインスタンスを生成したときに実行される関数。
平たく言えば”関数”なので関数でできることはだいたいできる。

#### 定数・変数を定義

“`js:js
class Hoge {
constructor() {
const a = ‘AAA’;
console.log(a);
}
}

const hoge = new Hoge(); // AAA
“`

コンストラクタ内で定義した定数・変数はコンストラクタ内でしか使えない。
コンストラクタの外、例えばメソッドでつかったり、インスタンス化したあとインスタンスプロパティとして呼び出すことなどはできない。

“`js:js
class Hoge {
constructor() {
const a = ‘AAA’;
console.log(a);
}
}

const hoge = new Hoge();
co

VScode スニペット登録 【JavaScript】

##活用するメリット:point_up:

– 　 “`clickEvent() =>“`などの、記述が長く、クセのある構文が、改行込みで設定可能

– 　“`console.log()“` など使用頻度の高いメソッドを、任意のキーワードで素早く呼び出せる

– 　“`文字列の空白“`も調整可能。

– 　設定は、“`基本設定 → 　ユーザースニペット →　 検索窓[javascript.json]“`

##【Javascript.json】

“`java
“clickEvent”: {
“prefix”: “.adc”, //.adcと入力すれば、”body”の中身が出力される
“body”: [
“.addEventListener(‘click’, () => {“,
” $1″, //[$1] = スニペット実行後、始めにカーソルが当たる位置を指定。 $2 も設定可能
“});”
],
},
“`

##【JavaScript】

“`javascript

const button = document.qu

[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreから使う

createNamespacedHelpersの使い方に関してはこちらの記事をご参照ください。
[[Vuex]ヘルパー関数createNamespacedHelpersの使い方](https://qiita.com/kazukinaruse/items/4dc0909220b2a43ffd3a)

createNamespacedHelpersを複数のstoreから使用するには以下のように記述します。

“`Top.vue

```

createNamespacedHelpersを複数のstoreから使う方法に関しては、
以下の記事で紹介しています。
[[Vuex]ヘルパー関数createNamespacedHelpersを複数のstoreか

Vuexで状態管理を行うサンプルコード

Vuexを学んだけど実際にどうやって使えば良いのか分からない、という方の参考になれば幸いです。

今回紹介するVuexの流れとしては、

①ActionsでAPIを実行してデータを取得して、Mutationsにcommitする
②MutationsでActionsから受け取った値を、Stateにセットする
③StateにMutationsからセットされた値を格納しておく

です。

```index.js
export const state = () => ({
data: null
})

export const mutations = {
setData: (state, value) => {
state.Data = value
}
}

export const actions = {
async fetchData({ commit, state }) {
try {
const resp = await this.$axios.$get('//ここはAPIを書く//')
commit('setData', res

[Vuex]Actionsでasync/awaitを使う

今回はActions内でAPIを実行してデータを取得し、
Mutationsにcommitする場合を考えてみます。

```index.js
export const actions = {
async fetchData({ commit, state }) {
try {
const resp = await this.$axios.$get('//ここはAPIを書く//')
commit('setData', resp)
} catch (error) {
console.log(error)
}
}
}
```

fetchDataという関数を作成し、
その中でAPIの実行、値をrespに格納しています。
その次の行でcommitを使ってsetData（Mutationsに定義している関数とする）にrespのデータをコミットしています。

Web Workers を使った JS マルチスレッド

# はじめに
昨今の Web サイトは昔と比べて Javascript での処理を多く行うようになっています。
そんな中、Javascript は基本的にシングルスレッドで処理を行うため、ボトルネックになってしまうことがあります。
これを解消するために `setTimeout` や `setInterval` を使って、擬似的な並列処理を行なったりしているかと思います。
Web Workers を使うとこうした並列処理を行うことができます。

# Web Workers の使い方
```javascript:doWork.js
self.addEventListener('message', function(e) {
self.postMessage(e.data)
}, false)
```

```javascript:main.js
const worker = new Worker('doWork.js')

worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.