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

Promiseのresolve()を他の場所で呼び出してawaitでの待ちのを終了する

# 確認した環境

– Google Chrome Version 93.0.4577.63 (Official Build) (64-bit)
– 今回、試した記述方法が、あらゆる環境で動作するかは把握できていない

# 内容

– Promiseのresolve()は、「Promiseクラスのコンストラクタの第1引数に渡す関数内」でしか呼び出してはいけないと思っていたが、
– resolve()を参照する変数を別のスコープに用意して、呼び出しても期待通りに動作した
– Pormiseオブジェクトを返却する関数を用意しないといけないとも勘違いしていた

“`html

Click me!

Redux入門[一週間前までRedux未経験だった僕が伝えるReact + Redux]

こんにちは　take-2405です。

今回はReact+Reduxの入門者向けに記事を書きたいと思います。
とは言いつつも、僕自身１週間ほど前まではReactは触ったことはあったものの、Reduxについては全くの初心者でした。

そんな僕が、Reduxを書かざるを得ない状況になり、１週間で基本的な概念の理解～与えられたタスク（昨日の実装）まで行った際の経験について書き残したいと思います。

#### 注意
– この記事ではRedux-toolkitを使用する方を対象としています
– 理解が不十分で誤った知識を記載している場合があります（その際はご指摘ください）

## 目次
#### 1. Redux toolkitとは
#### 2. Redux(Redux toolkit)の基本的な概念(知識)の理解
#### 3. 実際にコードを書く
#### 4. 参考にさせていただいた記事
(1,2の手順が逆だと感じる方もいるかもしれませんが、今回はこの順番です。)

—

## 1. Redux toolkitとは
素のReduxを使う際に、簡単に・効率良く開発を行うためのツール
R

React公式チュートリアルでホットリロードの結果がブラウザに反映されない時

## 状況
https://ja.reactjs.org/tutorial/tutorial.html#lifting-state-up
Reactの勉強を始めて上記の公式チュートリアルに従い進めていたらホットリロードの結果がブラウザに反映されない問題にあたりました。CLI上ではホットリロードが動いてる感じ。WSl2でやっていたのでそれが原因かと思いましたがMACでも同じような状況になりました。検索しても見当たらなかったのでここに解決法を書きます。

## 解決法
公式チュートリアルではindex.jsにコンポーネントを記述しそれを読み込むやり方をしていますがこれをやめます。/srcにGame.jsファイルを作成します。index.jsのコンポーネントのところをコピペしてコンポーネントをエクスポートします。

“` Game.js
import React from “react”;
import “./index.css”;

class Square extends React.Component {
render() {
return

未経験からWebエンジニアになる為の4つの課題

未経験から４つの課題を完成させるのは少し難しいですが、エンジニアになれば**「高給、テレワーク、残業なし」**の好条件で働けるのでおすすめです。

私は未経験からエンジニアになって、「こんな楽な仕事でこんな金もらえんのかい」と思いました。

##課題1：Todolist
https://qiita.com/hamaguri/items/476e75e6a29276ad1ba7

**※こちらの記事はHTMLの基本知識があるのが前提です。
わからないところは無料サイトで調べながらアプリ作成して基本を学びましょう。**

個人的おすすめ
[クリエイタークエスト](https://creatorquest.jp/lessons/html/html-intro/)
[ドットインストール](https://dotinstall.com/)

##課題2 ：クイズアプリ
https://qiita.com/hamaguri/items/7e382077da95e824ad3a

https://qiita.com/hamaguri/items/36d7c3b39850b2c961f6

::

Angularでのrxjsを用いたモーダル共通化

# はじめに
Angularに標準で入っているrxjsライブラリを使用してモーダルを共通化することができます！
一つだけモーダルを作っておき、あとはメソッドを呼び出して表示したいタイトル、内容を引数に渡すだけです！
最終的な成果物は動画↓のようになります

# 1. モーダルの状態を司るサービスの作成

“`ts:src/app/services/modal.service.ts
import { Injectable } from ‘@angular/core’;
import { Subject } from ‘rxjs’;

@Injectable({
providedIn: ‘root’,
})
export class ModalService {
private _subject: Subject<{ title:

配列を操作するforEachとmapの違い

#はじめに
Javascriptの配列操作を学んだ際、forEachとmapの違いがいまいちピンとこなかったので当時の自分に書くつもりで完結にまとめてみました。

#forEachの使い方
forEachは配列の値を順番に一つずつ取り出して設定した処理を実行します。
下記だと配列に格納された数字を一つずつ取り出して2倍して出力します。

“`jsx
const array = [1, 2, 3, 4, 5];

array.forEach(el => {
console.log(el * 2);
});

//出力：2 4 6 8 10
“`

#mapの使い方
それに対してmapは、配列の値を順番に一つずつ取り出して設定した処理を実行するというところまで同じです。しかし、それに加えて処理の結果を配列として生成しなおすという性質を持っています。

そのため、mapは下記のように配列に処理を加えて新たに生成した配列を出力します。

“`jsx
const array = [1, 2, 3, 4, 5];

const newArray = array.map(el => {

【JavaScript】繰り返し処理for文

#はじめに
こんにちは。
JavaScriptのfor文についてアウトプットしていきます！

##繰り返し処理とは
> 繰り返し処理とは、ある条件下において何らかの行為を繰り返し実行するための処理です。「ループ（Loop）」とも言われています。

> 参照：https://tcd-theme.com/2021/05/javascript-for.html

###for文の記述
“`javascript:JavaScript
const arry = [1,2,3,4];

for(let i = 0; i < arry.length; i++){ console.log(i); //0,1,2,3 } //for(初期化処理; ループの条件式; ループ内で実行される式) ``` このfor文では、定数arryに格納された配列の要素の数だけループを実行させる。 ###for in ```javascript:JavaScript for(let i in arry){ console.log(i); //0,1,2,3 } ``` for inは要素の添字を

[Ajax]いいね機能を非同期にした

# はじめに
本記事では、非同期通信についてを記述します。
本日実装しました。

## 前提
いいね機能は同期通信で実装しています。

また、オリジナルアプリ開発途中で不要なコードが多いので、
`省略は多め`ですが、該当箇所は記載します。

# いいね機能
### ビュー
いいねを表示しているビュー`index.html.erb`

`

Setオブジェクトについて（Javascript）

# 初めに
今回はPaizaのスキルチェックで問題を解いていく中で学んだオブジェクトを備忘録としてまとめた記事です。

# Setオブジェクトとは
Set オブジェクトは値のコレクションです。挿入順に要素を反復することができます。Set に重複する値は格納出来ません。Set 内の値はコレクション内で一意となります。

※MDN記事を引用
参考記事：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Set

# Paizaスキルチェックを解いていく中で学んだ使い方
・配列の要素が同じデータで重複していた際に、重複分を取り除いてくれる

“`javascript
let array = [1,2,3,3,3,4,5,5,6]

let setArray = new Set(array)
console.log(setArray)

// { 1, 2, 3, 4, 5, 6 }
“`

・new Set()で求めた値の要素数の求め方（length❌ → size⭕️）

“`ja

jQueryでAjax通信時サーバで200を返してもdoneが実行されない

# 概要
jQueryで下記のようにAjax通信をしていたときに、
サーバ側はステータスOKを返していても成功時のコールバック関数（done）
が実行されないという問題が起こったので備忘録として記載。

“`Js
$.ajax({
type: “POST”,
url: “APIのURL”,
dataType: “json”,
data: {
パラメータ…
}
})
.done(function () {
alert(“OK”);
})
.fail(function () {
alert(“NG”);
});
“`

# TLDR
ajaxオプションのTypeにjsonを指定してるとレスポンスが存在している & 厳格なJSONであるかチェックする。
空レスポンスを返していたのでエラーとなりfailで処理されていた。
Typeをtextにして空文字列として処理するようにした。

# 詳細
$.ajaxのオプションであるtypeのリファレンスを見ると
オプションの意味及びJSON指定時は下記のように書いてある。

> dataType / st

push()の使い方(Javascript)

# 初めに
現在開発しているアプリでpushの使い方について基礎ではありますが、改めてなるほどな〜と思ったので記事書きました

# pushとは
push() メソッドは、配列の末尾に 1 つ以上の要素を追加することができます。また戻り値として新しい配列の要素数を返します。

※MDN記事そのまま引用
参考サイト：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push

# 使い方
・用意した配列に1つの要素を追加したい場合

“`javascript
let numbers = [1,2,3,4]
let addNumbers = 5
numbers.push(addNumbers)
console.log(numbers)

//[ 1, 2, 3, 4, 5 ]
“`

・用意した配列に”配列”の中身データを追加したい場合

“`javascript
let arr = [1,2,3,4]
let add

【TypeScript入門】非同期処理のまとめ　Promiseとasync/await

# はじめに
Typescriptを書いてて、非同期処理にPromiseとasync/awaitの２種類の書き方があったのでまとめました。

# まとめ
* 個人的にPromiseで書くよりもasync/awaitを使うほうがシンプルに書けると思う

## 非同期処理とは
* 通信が発生する処理で起きる
* Web　APIを叩く
* データベースへクエリを投げる
* 実行完了を待たずに次の処理に進む
* Javascriptはシングルスレッドの言語
*　非同期APIにより効率よく処理を行うことが可能

## 非同期処理は一長一短
* 複数の処理を並行して効率よく実行できる
* 思い処理や時間のかかる通信中にユーザーに別の操作を許可するなど
* 制御が難しい
* 処理が実行中なのか実行完了したのかトレースしにくい
* どう対処すべきか
* “`Promise“`や“`async/await“`で非同期処理を同期的に制御する
* 型をつけることでわかりやすく！

## 非同期処理をそのままにコードで書く

下記のコードの場合

【jquery】filter()の使い方 奇数行を非表示

#jQuery

“`javascript

• リスト 項目 1
• リスト 項目 2
• リスト 項目 3
• リスト 項目 4
• リスト 項目 5
• リスト 項目 6

ここをクリック

表示されました

```

#出力結果
```
true
false
```

【jquery】val()の使い方 ※value値を取得するだけ

#jQuery

```javascript