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

Material UI v5 と Emotion の環境構築

以前 `Material UI` と `Emotion` を使った環境構築について記事を書いたのですが、Material UI が **v4 から v5** にアップデートされたので、今回は以前の記事のリライトになります。

## 前提

[【React】Material-UI v4 と Emotion を併用するときの環境構築](https://qiita.com/yuki-endo/items/387194d29a44a3340bb9)の記事のリライトになります。
記事執筆時点で Material UI のバージョンは v5 なります。
npm ではなく yarn を使っています。

## React の環境構築

まずは `create-react-app` の typescript テンプレートを利用してプロジェクトを作成します。今回はプロジェクト名を myapp にします。å

“`shell
$ npx create-react-app myapp –template typescript
“`

## Material UI v5 と Emotion のインストール

【JavaScript】変数と参照の振り返り①

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/3ed1b5a2e6f08aaed5e0

#目的

* 変数についての理解を深める

#本題
###1.let, var, constの違い

| | version | 再宣言 | 再代入 | スコープ | 初期化 |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| let | ES6~ | ✗ | ◎ | ブロック | ✗ |
| var | | ◎ | ◎ | ブロック |undifined|
| const | ES6~ | ✗ | ✗ | 関数 | ✗ |

再宣言：もう一度変数として宣言する
再代入：一度設定した値を変更できるか
スコープ：varだけ関数スコープが生成
初期化：ホスティングのこと(varはundified

何でもかんでも非同期通信に頼るのは良くない？

#非同期通信とは？
ネットワークなどでつながれているコンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式・・・だそうです。

つまりどういうこと？
あるタスクを実行している最中に、その処理を止めることなく別のタスクを実行できる通信方式、と言えそうです。
イメージとしてはこうなります。

#非同期通信の利点
そもそも何がいいのでしょうか？
よく聞くのは、非同期はwebページの一部のみを更新するための機能として使われているということです。
ページ全体を読み込みしなくて良いので早い。これがメリットだと紹介されています。

* サーバーのトラフィックを減らし、スピードを上げる
* レイジーローディング
* 帯域使用量の削減
* フォームの検証

など

AngularアプリでBootStrapを使ってみる

# BootStrapとは
BootStrapはCSSのフレームワークです。BootStrapを使うとデザイナーでなくても簡単にそれっぽい見た目の画面を作成することができます。
また、Sassが採用されているため変数を使う・CSSクラスを継承して新しいCSSクラスを作るなど、プログラミング言語っぽくCSSを記載することができます。
Angularを使用していない場合でももちろんBootStrapは使えますが、jQuery等の関連ライブラリを読み込む必要があります。
また、Sassは直接ブラウザで読み込むことができないためCSSファイルにコンパイルする必要があります。
Angularを使っている場合はそれらの面倒をすべてAngularが補ってくれるため、比較的簡単にBootStrapの恩恵を受けることができるみたいです。
見た目には特にこだわりはないけどそれなりに見やすい画面を作成したいといった場合に使えそうですね。
# bootstrap(ng-bootstrap)を使ってみる
こちらを参考にしました。
[bootstrapの変数の書き換え方](https://qiita.com/pi

JavaScript入門(オブジェクト②)

# 概要
…[JavaScript入門(オブジェクト①)](https://qiita.com/andota05/items/86f359455eb4a233031a)の続きです。

JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

[JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)に他の記事をまとめています。

※下記「動作環境情報」を参考にし、開発者コンソールで結果を確認してください

動作環境情報はコチラ

**【環境】**
PC：Mac
エディタ：Visual Studio Code
プラグイン：`Live Server`というVisual Studio Codeのプラグインを使用し、サーバ環境を用意。
開発者コンソール：GoogleChrome

**【登場ファイル】**

Nuxt/FirebaseのGoogleログイン時に毎回アカウント選択を表示する

生きてます。

Webアプリケーションにつきもののユーザ管理ですが、APIベースのアプリだと非常に面倒です。出来るだけ個人情報は自前で持ちたくないですし、大体のケースにおいてここに労力をかけることが本題ではないと思います。今回は自主的に夜な夜な開発していたNuxt.js製社内用Webアプリケーションで、尚更そこに手間をかけたくなかったので、Firebaseを使ってちゃちゃっと済ませます。

といっても今回は表題の件がメインなので、それまでの過程についてはかなり端折ります。

# 導入

“`sh
npm install firebase@8.10.0
npm install @nuxtjs/firebase
“`

パッケージマネージャで入れます。
留意点としては`firebase` のメジャーバージョンが上がったことに伴い、最新版の9.xに`@nuxtjs/firebase`が対応していないようです。（私のときは、`firebase`のアプデ3日後のことだったので、地味にハマってました）

https://github.com/nuxt-community/firebase-mo

javascriptで多次元配列の重複を削除

１・名前の重複を削除したい
２・名前が重複していた場合、moneyが2000のデータが欲しい

“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);
var arr = [
{id:1,name:”花子”,money:5000},
{id:2,name:”江藤”,money:4000},
{id:3,name:”山田”,money:3000},
{id:4,name:”山田”,money:2000},
{id:5,name:”山田”,money:8888},
{id:6,name:”山田”,money:9999},
{id:7,name:”松井”,money:2000},
{id:8,name:”松井”,money:2093},
{id:9,name:”松井”,money:2090},
{id:10,name:”大川”,money:1000}
];
var check = [];
arr.forEach(fu

terraformで構成管理しつつaws lambdaをデプロイする

DMMデータインフラ部に所属している[yuua](https://qiita.com/yuua0216)です
terraformで作成しlambdaをデプロイする際にterraformにlambda関数を含めるとchangeがでたり、扱いづらく
悩むときがあるのでその際の手順的な備忘録です

今回のlambdaはlambda containerではありません

## 初回の手順

1.terraformで基本的なlambdaの事前の情報を作成する(配置先など)
2.lambda関数をzip化しs3バケットに配置する

## 継続的なデプロイの手順

基本的にgithub actionsなどのCI/CDを使います

1.github actionsでlambda function / lambda layerをバケットに配置
2.github actionsでupdate functionの実行

## 下準備

lambdaを配置するようのs3 keyなどをterraformで作成します

“`s3.tf
// bucket作成
resource “aws_s3_bucket” “l

【Vue.js】scrollToが効かない時、代わりに使えるscrollIntoView

#はじめに
##実現したいこと
あるボタンを押すと、画面一番上に移動するような動作（画面遷移はしない）

##やり方を探ってみる
「Vue.js トップに戻るボタン」とかで検索すると、ほとんどが?のような`window.scrollTo`を使ったようなやり方でした。

“`vue

“`

https://yuyauver98.me/vue-scrolltop/

https://qiita.com/TK-C/items/42b25ff4ec56528ad870

https://webty.jp/staffblog/producti

JSでresizeイベントを使うときの注意点

Webページでウィンドウサイズが変化したときに何か処理をさせるのに便利な

“`JavaScript
window.addEventListener(“resize”, function() {});
“`
ですが、

このまま素の記述で実装してしまうと、スマホのブラウザで表示したときに**URLのバーが伸び縮みする動作もウィンドウサイズが変更されたと判定されてしまう**ので、単にスクロールしただけでイベントが発火してしまいます。
（例：ウィンドウサイズが変更されたときにページをリロードするように記述していた場合、スクロールしてURLバーのサイズが変わるたびにリロードされてしまう。）

これはPCブラウザのレスポンシブモードでは**確認できない現象**なので注意が必要です。

「ウィンドウサイズの変化」とは少し性質が違いますが、
例えばスマホ画面の縦・横の向きが変化したときに処理を発火したい場合などは、

“`JavaScript
window.addEventListener(“orientationchange”, function() {});
“`

を使う方

React:Bootstrap Tabタイトルを子コンポーネントから変更

ReactでBootstrapのTabsを使っていて、keyのあるオブジェクトから作ったTabのタイトルを子コンポーネントからkeyを指定して変更した。メモを2点ほど。

“`react:ComponentParent
export default function ComponentParent(props) {
const [tabTitles, setTabTitles] = useState(null)
const [currentKey, setCurrentKey] = useState(111)

useEffect(() => {
// ここでは、例なのでオブジェクト直接記述
setTabTitles({ 111: “タブ1”, 222: “タブ2”, 333: “タブ3” })
}, [])

useEffect(() => {
// 何か選択が変わった時の処理
},[currentKey]}

const TabSample = () => {
if (!currentKey || !tabTi

JavaScript (主に React) 非同期処理 ~これまでとこれから~

# はじめに

JavaScript では非同期処理の書き方がたくさんあります。
ベストな書き方を知りたくないですか？

過去にどんな書き方がされてきたのか、これからどんな書き方が提案されていくのかをまとめてみました！

※ 本記事で紹介する手法やライブラリは JavaScript の長大な歴史の一部です。
（全部はとてもまとめきれなかった）
※ また、記載しているコードは引用元から抜粋している部分的なコードのため動作を保証するものではありません。

# これまでの非同期処理

## ES5 以前の世界では…

非同期処理の結果を待って次の処理を行う場合にはコールバック関数を書くことが大半でした。
このコールバック関数には “エラーファーストコールバック” という書き方のルールがあります。
言語仕様には用意されていない処理を言わばイディオム的な書き方で克服していました。
しかし、コールバック関数が連鎖する場合、ネストがどんどん深くなっていて
↓ のようになってしまいます。

“`javascript
function get(file, callback) {
console

TypeORMでQueryBuilderを使わずにJOIN先のテーブルのカラムをWhere句で使用する

### 注意
この記事の公開から時間が経っていたり、`typeorm`のバージョンが異なる場合は、仕様が異なる場合があります。

“`
動作確認: 2021/10/7
typeorm: v0.2.34
“`

## TL;DR

### JOIN先の主キー(ID）で絞り込む場合

“`typescript
const teenProgrammers = await getRepository(User).find({
relations: [‘role’], // なくてもOK
where: {
age: LessThanOrEqual(19),
role: {
id: programmer.id
}
}
})
“`

### JOIN先の主キー(ID）以外で絞り込む場合

“`typescript
const teenProgrammers = await getRepository(User).find({
join: {
alias: “user”,
innerJoin: { role: “user.r

jQueryリダイレクトが遅くて画面が表示する。

#ある条件の時リダイレクト、別の画面に移動してくれと依頼発生
リダイレクトってどうやるんだろう…から調べていきました。
.htaccessの設定を操作する、サーバーサイドで操作する等が出てきて、
どうしようかなと思っていたところ。
jQueryでリダイレクト設定できるというのを見つけたので実装しました。

####環境
MovableType 7
MtappjQuery
jQuery 3.4.1

“`ruby:jQuery　リダイレクト設定
window.location.href = “https://sample.com”
“`

windowはいるのか要らないのかよくわかってないです…。
なくてもできると思います。

“`ruby:jQuery　初期実装
$(document).ready(function(){
if((mtappVars.me.name == “sample1” || mtappVars.me.name == “sample2”) && mtappVars.scope_type == “user” && mtappVars.scre

[Rails]非同期（Ajax）でのコメント機能実装

## この記事の目的
非同期処理（ajax）でのコメント投稿機能を学んだのでアウトプットします
## 目標
[](https://gyazo.com/13b13c9847585f462000a341b671e8b8)
## 要件
コメント投稿は非同期で行う
## 環境
・Ruby 2.7.1

・Rails 5.2.6
## 前提
・UserとPostは作成済み

・bootstrapとjquery-railsが入っている

## 設計
ER図
[](https://gyazo.com/919c4a7bc8f4e5e4c7ff50fb2efcdab1)

ルーティング

“`
POST /posts/:post_id/comments comments#creat

TypeORMでSQLiteを指定してQueryFailedError: SQLITE_CONSTRAINT: NOT NULL constraint failed エラーが出たときの対処法

## 解決方法
解決策は４つあります。４つ目が本命です。

### 1. synchronizeをやめる

これでエラーはなくなるけど、エンティティが同期されなくなるので不便。。。

“`json:ormconfig.json
{
“synchronize”: true
}
“`

### 2. カラムをnullableにする

これも根本的な解決じゃない。。。

“`typescript:entity/user.ts
@Column({ nullable: true })
name: string;
“`

### 3. SQLiteを使わない

身も蓋もないですが、ありだと思います。

### 4. トランスパイルする

私の環境では、`ts-node`を使わないようにすると、エラーが解決されました。
以下の手順を行ってください。

#### STEP 1

`tsconfig.json`のCompilerOptionsに`”skipLibCheck”: true`を指定する。
これは、STEP3の`tsc`コマンド実行時にエラーを表示させないためです。
基本的に推奨

【JavaScript】スコープの学習の振り返り④

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/9e0f9201945c8d79dd45

#目的

* スコープについての理解を深める

#本題
###1.即時関数（IIFE）

即時関数とは**関数定義と同時に一度だけ実行される関数**のこと。

→実行結果が呼び出し元に返される。

基本構文

““javascript
let result = (function (仮引数){
return 戻り値;
})(実引数);
““

戻り値はresultに返ります。

““javascript

function a() {
console.log(“called”);
}
a();

// 上記と下記は同じ結果が出力される
(function(){
console.log(“called”);
return

これからReact始めたい人のための今日だけでできるTODO#18 useCallback

## useCallbackとは？
関数をメモ化するフックです。
`React.memo`を利用した場合でも親コンポーネントからコールバック関数をpropsで受け取った場合子コンポーネントは再レンダリングされます。

コンポーネントが再レンダリングされるたびにコールバック関数が再生成されるため処理が同じでも新しい関数を生成されているとみなされるからです。

例えば下記のような場合
（※[前回のコード](https://qiita.com/tanimoto-hikari/items/2f8765c85235455ea5af)をこコンポーネントにpropsで関数を渡す形で修正しました）

“`js:App.js
import React, { useState } from ‘react’;
import { Counter } from ‘./Counter’;

const initialCount = 0;

export default function App() {
const [countA, setCountA] = useState(initialCount);

Node/Vue-CLI/Viteを使わずに最速でVueのSPAを作る

#はじめに

本記事は、Node/Vue-CLI/Viteを使わず、CDNを用いることで最速のVueのSPA環境を構築する記事となります。

環境汚染を気にせず簡易的にVueの実行環境を作りたい方、CUIの知識が薄くてもVueの実行環境を作りたい方、そしてNodeを構築できないサーバでSPAを作りたい方、向けです。

注意：JS-Fiddleは使いません。あくまでローカルでの構築です。

注意：VueのSyntax等は触れません。あくまで環境構築記事です。

###背景
自分の大学では無料のサーバが全生徒に用意されているのですが、権限等々の問題からnodeの環境を構築することができず、htmlやCSS程度しか実行することができません。

就活も進む中、せっかくなのでプロフィールページのようなものをSPAで作りたいと思うものの、わざわざアクセス数などしょうもないページを有料で作るのもなんだかなということで、この制約の多い環境でもSPAを作ろう！という意図の下、このような技術を得る経緯となり

TypeORMのMigrationでCannot use import statement outside a moduleエラーの対処法

## TL;DR
あまり綺麗ではないですが、これで解決しました。
`typeorm`コマンドを使用せず、直接`ts-node`で`typeorm`を呼び出します。

“`bash
$ ts-node ./node_modules/typeorm/cli.js migration:generate -n ‘User’
“`

NestJSを使用しているときにこのエラーに遭遇した場合は、ページ下部の[ormconfig.jsonの書き換え](#手順3)を試してみてください。

## よくみたらドキュメントに書いてあった…

* [TypeORM > If entities files are in typescript](https://typeorm.io/#/using-cli/if-entities-files-are-in-typescript)

ドキュメントの推奨している方法だと、、、

### STEP 1
ts-nodeをグローバルにインストール

“`bash
$ npm install -g ts-node
“`

### STEP 2
`package.j