JavaScript: Promise.raceのどれかがエラーになったらどうなるか？

JavaScriptの`Promise.race`は2つ以上のPromiseに対して、早く完了したものを戻り値として得られる関数です。

もし、`Promise.race`で競争するPromiseのうち、どれかがエラー(reject)になったら、どうなるのでしょうか？ これについて検証してみます。

## 早いほうがエラーになった場合

下のサンプルコードでは、2つのPromiseが競争します。

ひとつは、100ミリ秒後にエラーになるPromise。もうひとつは、200ミリ秒後に成功裏に完了するPromiseです。

この2つのPromiseを`Promise.race`で処理すると、前者のエラーのほうが勝ち、`new Error(‘100ミリ後にエラーになった処理’)`のほうが戻り値になります。

“`javascript
async function test1() {
// 100ミリ後にエラーになる処理
const willError = new Promise((_, reject) =>
setTimeout(() => reject(new Erro

JavaScript: Promise.raceの基本的な使い方

`Promise.race`は2つ以上の`Promise`のどちらか早い方を戻り値として取得する関数です。

下の例では、100ミリ秒後に完了するPromiseと、200ミリ秒後に完了するPromiseのどちらか早く完了するほうを取得するものです。この例では、前者のほうが早いので、`Promise.race`で得られる値は`Promise<"100ミリ後に完了した処理">`のほうになります。

“`javascript
async function test1() {
// 100ミリ後に完了する処理
const one = new Promise(resolve =>
setTimeout(() => resolve(‘100ミリ後に完了した処理’), 100),
)

// 200ミリ秒後に完了する処理
const two = new Promise(resolve =>
setTimeout(() => resolve(‘200ミリ後に完了した処理’), 200),
)

const result = await Promise.ra

JS 配列の後方最初に一致したindex番号を返す（開始位置も指定できる）

## lodashのlastIndexOfを作成してみた
~~~javascript
const lastIndexOf = (array, selectNum, startIndex = array.length – 1) => {
for (let i = startIndex; 0 <= i; i--) { if (array[i] === selectNum) { return i } } return -1 } console.log(lastIndexOf([1, 2, 1, 2], 2)) // => 3

console.log(lastIndexOf([1, 2, 1, 2], 5))
// => -1

console.log(lastIndexOf([1, 2, 1, 2], 2, 2))
//2番目から『2』の値が最初に一致したindexを返す
// => 1
~~~

【JS/TS】Lookupテーブルを活用する

# 概要

戻り値の値が与えられた値に依存している際に、`if` や`switch`を使用して、下記のように対応する場面があるかと思います。

## Ifを使用した場合場合

“`tsx
const colorMapper = (color) => {
if (color == “yellow”) {
return “黄”;
} else if (color == “blue”) {
return “青”;
} else if (color == “red”) {
return “赤”;
} else {
return “該当なし”;
}
};

colorMapper(“yellow”); //=> 黄
colorMapper(“pink”); //=> 該当なし
“`

## Switchを使用した場合

“`tsx
const colorMapper = (color) => {
switch (color) {
case “yellow”:
return “黄”;
case “blue”:

AWS Amplify での Cognito アクセスは React Context.Provider を使って認証処理を Hooks 化しよう


AWS Cognito は認証・認可を提供している AWS のサービスです。Amplify と統合することで、超高速に構築できます。Cognito を使用することで、API Gateway や S3 など他の AWS サービスとの統合がより簡単にできるようになります。

本記事では、Cognito を使用した React アプリケーションの実装例を紹介します。Cognito へのアクセスには [amplify-js](https://github.com/aws-amplify/amplify-js) というライブラリを使用します。さらに React の Context.Provider という機能を使うことで認証に関連する処理をカスタムフックに集約する方法を考察します。

本記事で実装されたアプリケーションは以

Magentaチームによる機械学習＆音楽のリモートワークショップ＆ハッカソンイベント”Bit Rate”が開催

Google の機械学習音楽ライブラリーMagenta開発チームと、サンフランシスコのメディアアート機関”Gray Area”による機械学習＆音楽のリモートワークショップ＆ハッカソンイベント”Bit Rate”が８月７日〜９月７日に開催されます。

開催場所はもちろんアメリカサンフランシスコと言う事ですが、今回はコロナ禍の状況下でリモート開催と言う事で日本からも参加できるのではないかと思います。


BitRate: Machine Learning & Music Series

主にJavaScriptの音楽ライブラリーやMagentaを組み合わせて、機械学習＆音楽の新しいアプリを開発するワークショップとハッカソンの組み合わせでスケジュールは下記の様になっています。

**INTRODUCTION & OPEN

Spring＋Vue.js でAPIの連携をする

## はじめに
今回SpringフレームワークでRestAPIを作成し、
Vue.jsでデータを表示させることをゴールに記載していきます。
（Javaのインストール等の初期設定となる環境構築は省きます。）

## プロジェクト作成
#### ◇Vue.js
VueCliを用いて作成していきます。

①VueCliをnpmよりインストールする

“`console:コンソール
npm install -g @vue-cli
“`
②プロジェクト作成

“`console:コンソール
vue create practice
“`
実行すると、アプリケーション作成に必要な設定ファイルやサンプルソースが自動で作成されます。
③サンプル画面確認
作成したプロジェクト配下にて以下実行

“`console:コンソール
npm run serve
`

[JavaScript] セミコロンをつければ絶対安心できるのか？;

## はじめに

[こちらの記事](https://qiita.com/riku-shiru/items/dce12248947f7f33aecc) を読んで、改めてJavaScriotの `;` について気になったので調べてみました。

## 結論

私が思ったより安心じゃなかった。

セミコロンありのスタイルでも、下記のように予期せぬセミコロンの挿入が起こってしまうパターンがあります。

“`javascript
function f() {
return
{
foo: ‘foo’
};
}

f(); // undefined
“`

セミコロンに関することは参考にさせていただいた[セミコロンに関する ESLint ルール](https://qiita.com/mysticatea/items/9da94240f29ea516ae87)という記事に全部書いてありました :pray::pray::pray:

以下の内容はリンク先の記事に(個人的な感想以外)書いてあることなので、ぜひそちらを参考にしてください！

#

通常関数とアロー関数でのthisの違い【JavaScript】

最近JavaScriptを勉強し始めた中で`this`の使い方がイマイチぴんと来ていないので、今回は、

– **`function(){・・・}`（通常関数）**
– **`()=>{・・・}`（アロー関数）**

**の`this`の使い方の違いについてまとめます。**

# 何が違うのか？
私自身、調べる前は「`this`の範囲が違うらしい」ということくらいしか分かっていませんでした。

違いを一言で言うと、

– 通常関数の`this`は、**`function` を呼んだ時の `.` の前についているオブジェクト**
– アロー関数の`this`は、**関数の外の`this`**

を指してます。

通常関数を先に説明をします。

# 通常関数の`this`

“`JavaScript
function test() {
console.log(this)
}
var obj = {}
obj.test = test
obj.test() // => {test: ƒ}
“`
`this`は`function`を呼んだ時の`.`の前についている`obj`オブジェク

【超初心者向け】30秒ではじめるプログラミング

はじめまして
Qiitaはじめてみましたゲバラです。

今回はプログラミングを全く触ったことのない方にとりあえずプログラミングを10秒で触れていただく方法をご紹介します。

#前置き
プログラミングって最初に何をしたらいいかわかりませんよね。やるにしても色々と準備しなきゃいけないし、時間もかかるわけです。
なのでプログラミングに超簡単に触れて、チャレンジするきっかけになれば幸いです。

## 30秒でプログラミングしてみよう
#####1. PCを用意してください。
WindowsかMacでOKです。
#####2. GoogoleChromeを開いてください
#####3. 画面で右クリックして「検証」というメニューを押してください。
#####4. 右側でてくるウィンドウ内の上部にある「Console」というタブを押してください。
#####5. 以下のコードをコピーしてください。

“`javascript
let hako = “これからプログラミングをはじめてみよう。”;
console.log(hako);
“`
#####6. 以下の場所にコピーしたコードを貼り付け

Javascript覚え書き

# 日付の取得

今日の日付を取得

“`Javascript:
var today = new Date();
“`

指定した日付を取得

“`Javascript:
var date = new Date( ‘2019/11/5 20:30’ );
“`

そこからさらに、すきな要素を取得

“`Javascript:
date.getFullYear(); // 日付の「年」を取得する（4桁）

date.getMonth(); // 日付の「月」を取得する（0 – 11）

date.getDate(); // 日付の「日」を取得する（1 – 31）

date.getDay(); // 日付の「曜日」を取得する（0 – 6）

date.getHours(); // 日付の「時」を取得する（0 – 23）

date.getMinutes(); //日付の「分」を取得する（0 – 59）

date.getSeconds(); // 日付の「秒」を取得する（0 – 59）
“`

配列の基礎

配列についてまとめます．
Reactの勉強をしているので，記述例がReactの構文になっています．

#配列の作り方
基本的な文法は，`var 配列名　= []`です
###記述例
~~~js
import React, { Component } from ‘react’;

class App extends Component{
render(){
const array = [1,2,3,4,5,6,7,8,9,10];
return(

{array}

)
};
}

export default App;
~~~

#ある要素を表示する方法
配列から，ある要素を表示するためには`配列名[順番]`です．

元記事を表示

JS 正の整数なら前からN個、負の整数だったら後ろからN個返す

##Lodashのnth関数を作成してみた

###当初はすごく複雑に考えていた
~~~javascript
var array = [“a”, “b”, “c”, “d”, “e”, “f”]

const nth = (values, selectNum) => {
if (0 < selectNum) { return values[selectNum] } else { let absolute = Math.abs(selectNum) let newArray = [] for (let i = 0; i < values.length; i++) { const array = values.length - (i + 1) newArray.push(values[array]) } return newArray[absolute - 1] } } console.log(nth(array, 3)) // => d

console.log(nth(array, -5))
//

元記事を表示

【javascript】テトリス作成に向けて

テトリス作成に向けて調べた関数などを書いていきます。

#配列内の値を一括で変更する
##Array.prototype.fill()
> メソッドは、配列中の開始位置から終了位置までの要素を固定値で設定します。その際、終了位置は含まれません。
出典：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

###構文
“`javascript
arr.fill(value[, start[, end]])
“`
|引数|説明|
|—|—|
|value|配列に設定する値|
|start|開始する位置。デフォルトは0|
|end|終了する位置。デフォルトはthis.length|

####例
“`javascript
bord.forEach((item) => {
bord[i].fill(0)
});
“`
これでbordの配列の値をすべて0にできる。
#2つの配列を比較する
##Array.prototype.filter()
#

元記事を表示

transitioned

# transitionedとは
HTMLベースのページで、javascriptによってCSSの切り替えが起こったときのことを表す
例）

“`
key.addEventListener(‘transitioned’, removeTransition)
“`

元記事を表示

【JavaScript】レスポンシブな条件分岐にはwindow.matchMediaを使う

JavaScriptを書いていて良く使用するレスポンシブな条件分岐は下記2つのパターンだと思います。どちらもwindow.matchMediaを使えば簡単に実装することができます。

– **デバイス幅が〇〇px以上と以下で処理を分岐したい**
– **特定のデバイス幅を通過したときに処理を実行したい**

今回はこちらの2つの頻出パターンについて紹介します。

## デバイス幅が〇〇px以上と以下で処理を分岐したい
こちらの条件分岐は、PCとスマホで処理を分けたいときなどに重宝します。一番良く使いますね。

“`ruby:JavaScript
const matchMedia = window.matchMedia(‘(max-width:1000px)’);

if (matchMedia.matches) {
// 1000px以下で行う処理
} else {
// 1001px以上で行う処理
}
“`

ちなみに**if (!matchMedia.matches)**とすることで、**条件にマッチしないとき**といった条件分岐を行うこともできます。

## 特定のデ

元記事を表示

JS 配列の最初以外を返す

##Lodashのtail関数を作成してみた
###メソッド使用せずに作成した場合
~~~javascript
const tail = (array) => {
const tailNewArray = []
for (let i = 1; i < array.length; i++) { tailNewArray.push(array[i]) } return tailNewArray } console.log(tail([2, 4, 5])) // => [4, 5]

console.log(tail([1]))
// => []
~~~

### filterメゾッドを使用した場合
~~~javascript
const tail = (numbers = []) => {
return numbers.filter((value, index, array) => {
return array.indexOf(value) !== 0
})
}
console.log(tail([2, 4, 5]))
// => [4, 5]

元記事を表示

Audio/Video DOM のcurrentTime1とは

#Audio/Video DOMとは

bodyブロックに書く音声や映像の情報。
例）
``

#current Timeの使い方

“`
window.addEventListener(‘keydown’, function (e){
const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`);
//再生時間を取得
var time =audio.currentTime;
});
“`

例えば

“`
audio.currentTime=0;
“`
とすると
再生時間が最初に戻る

元記事を表示

javascriptで回帰直線を求める

# 回帰直線とは
組となるデータの、中心的な分布傾向を表す直線。
最小二乗法( least squares method )によって求められます。

# 最小二乗法の式

?[最小二乗法(wikipedia)](https://ja.wikipedia.org/wiki/%E6%9C%80%E5%B0%8F%E4%BA%8C%E4%B9%97%E6%B3%95)より引用

これを、javascript( ES6 )で関数化します。
`Σ`を`reduce`で表現しています。

“`Javascript
// 回帰直線を求める（最小二乗法）
const lsm = coordinates => {
const n = coordinates.length;
const sigX = coordinates.reduce((acc,

元記事を表示

いままでのリード・ライトに、もうひとついれたパパ・ラッチ

ラッチ機構をいれることにより、ビジネスの範囲にまで進めたんだろうね。

あと、もう一歩だ。

元記事を表示