【TypeORM】typescriptの開発時「synchronize: true」はEntityにもとづいてテーブルを自動生成してくれる。「synchronize: true」の強さの紹介と「synchronize: false」にする重要さの紹介

# 記事概要

掲題の通り。
typeormが持つsynchronizeの機能を使えば、ヒトがテーブルを作成せずともスキーマさえあればテーブル定義を自動生成してくれる。

反面、テーブル定義変更にもとづく自動DROPが行われる場合もあるため、あくまでも開発最初期のスタートダッシュに留めるべき機能と考える。

##

* 筆者自身。「こういうのができましたよ」と後で自他に確認する。
* typeormを他の人はどんな感じに書いてるのか知りたい人
* CREATE TABLEを最初っから書くのが面倒で、entityを書けば自動生成してくれないかなと思ってる人

# 実行例

### 出力Entity

“`ts
import { Entity, PrimaryGeneratedColumn, Column, BaseEntity, Index } from “typeorm”;

import { date_dictionary } from “./datadirectory”

// コードマスタ定義。
@Entity({ name: “m_code” })
// インデックスも張れ

【ES6】変数宣言const・let・var のまとめ

# これは何？
ES6記法で書く機会が増え、`const`, `let`, `var`の使い分けがよくわかっていないため、どのようなな違いがあるかまとめてみました

# 結論
基本的には`const`を使う。
forループの処理などのように再代入が必要なケースのみ`let`を使用する。
`var`は、挙動が把握しづらく、バグの温床になる可能性があるため使わない。

# 用語
それぞれの特徴を理解する際に、出てくる用語のまとめ
– 再代入 = 一度宣言した変数を更新すること
– 再宣言 = 一度宣言した変数を、同じ変数名を使って再び宣言し直すこと
– ブロックスコープ = ブロック{}ごとに囲まれた範囲のこと
– 関数スコープ = 関数のブロック{}ごとに作られる範囲のこと

# それぞれの特徴

## const
– **再代入不可**

– **再宣言不可**

– **ブロックスコープを持つ**
ブロックスコープ外からのアクセスを制限。つまり、ブロックスコープ外から参照ができない。

– **関数スコープを持つ**
関数スコープ外からのアクセスを制限。つまり、関数スコープ外から参

Node.js: docxをhtmlにするMammoth

## Mammoth .docx to HTML converter

https://github.com/mwilliamson/mammoth.js

## 導入
`npm –save-dev install mammoth`

## お試し
`npx mammoth sample.docx output2.html`

### Before
＊[テンプレート](https://template.k-solution.info/2017/05/18084425.html)

### After

##

【Atcoder】JavaScriptでもC++のSTLが使いたい！

## はじめに
競プロではC++の利用者が圧倒的に多い中、私はJavaScriptでAtCoderのコンテストに参加しています。理由は、競プロを始めようと思ったときに、新しくC++を勉強するよりも、使い慣れた言語で手っ取り早く競プロを始めたかったからです。JavaScriptはC++と比べると実行速度が遅い言語ではありますが、適切に実装すれば、大半の問題では制限時間を超えてしまうことはないと感じています。しかし、ときどきC++との大きな差を感じざるを得ない場面もあります。

## C++のSTLが使いたくなるとき
JavaScriptにはArray・Set・Mapなどのデータの集合を扱うためのクラスが用意されていますが、C++のSTLに比べると種類や機能が貧弱です。例えば、JavaScriptでキューを使いたいときはArrayで代替することになりますが、先頭の要素を取り出す`Array#shift`は計算量が`O(n)`のためかなり低速です^{[[1]](https://wass80.hateblo.jp/entry/2020/04/14/JS%E3%81%AEArray%23s}

jQueryプラグイン【Multiple Select】を使って複数選択可能なselectタグを生成してみよう

最近、業務でjQueryプラグインでselectタグをカスタマイズする機会がありました。
Qiita内にあまり記事を見かけなかった為、
せっかくの機会なのでアウトプットを兼ねて記事を作成してみました！

※随時内容を追記予定です。

##作成例
以下の様なプルダウンを簡単に作成可能です。


##コード
公式のサンプルを少し弄ったものになります。

最低限利用するために必要なのは
>・各種JS,CSSのインポート
・selectタグ内にmultiple=”multiple”の指定
・初期化処理の$(‘select’).multipleSelect()

と、非常にシンプルです。

“`index.html

Vue.js でタイピング練習ウェブアプリを作ってみた

Vue.jsで、多言語タイピング練習ウェブアプリを作成しました。

URL: https://www.typing-up.pro/

この記事では、主に技術的なところでポイントとなる部分を、備忘録的に解説していきます。githubでコードを公開しているので、細かいところは省き、ポイントのみの解説です。

対象は、Vue.jsの基礎をある程度知っている方です。

プログラミングの練習課題として、タイピング練習ソフトを作ることは定番かと思います。あくまで解法の一つですが、どうぞ参考にしてください。

[Githubリポジトリはこちら](https://github.com/seimatz/typingup-pro)

※ソースコードは、ローカル環境での個人利用に限り改変自由です。

## 仕様の概要

このアプリの特徴は、主に次の２つです。

– **オリジナル問題の利用**：　自分で作った問題集をアップロードして、タイピング練習をすることができます。ユーザー登録は必要ありません。

– **多言語対応**：　アルファベット入力をする言語であれば、おおよそどの言語でも対応しています。

【Handsontable】セル内に複数選択セレクト入力(Multi Select ComboTree )の表示

# はじめに
Handsontable でリスト選択をするには、セル種類に `Autocomplete`と`Dropdown`および`select`(正確にはセル種類ではない)を指定する方法があります。

|種類|内容|デモ|
|:–|:–|:–|
|Autocomplete|セル右端の▼ボタンのクリックでリストが表示され、リストから1つを選択する。セル内の文字入力が出来る。
オプション設定でリストにないものは検証エラーにしないようにも出来るし、検証エラー(セル背景色が赤表示)にすることでも出来る。|https://handsontable.com/docs/autocomplete-cell-type/|
|Dropdown|Autocompleteの派生、セル内の文字入力が出来る。
リストにないものは検証エラーとなる。|https://handsontable.com/docs/dropdown-cell-type/|
|Select|セルをダブルクリックすることでリストが表示され、その中から1つを選択する。セル内の文字入力が出来ない。|https://hand

【JavaScript】Uncaught TypeError: Cannot read property ‘プロパティ名’ of nullのエラーについて

すごく初歩的なエラーで1時間くらい時間を使ってしまったので
備忘録として残したいと思います。

### 前提

学習のためにメルカリのようなアプリを作成中です。
JavaScriptの非同期通信を用いて、販売価格を入力すれば
手数料と、入力した価格から手数料を差し引いた金額が自動で表示される機能を実装しようと下記のようにコードを記述しました。

“`application.js

require(“@rails/ujs”).start()
require(“@rails/activestorage”).start()
require(“channels”)
require(“../item_price”);

“`

“`items/new.html.erb

<%# 販売価格 %>

販売価格
(¥300〜9,999,999)
Firebase JS SDK v9 でログイン認証(Authentication)をする時の変更点

またFirebaseのv9.0.0以降の変更点です。
プログラミング初心者なので誤りがあるかもしれません。
その際はご指摘お願いいたします。

## Firebase Authenticationをこれから使用する人向け

Firebase v9はつい先日(2021/08/25)アップデートが行われ、正式にv9.0.0になりました。
“`npm install –save firebase“`
ってバージョンを明示せずにインストールするとv9になってるってことですね。
大きな変更点としては、Option API方式からComposition API方式になった事です。
といっても私もよくわかんないのでコードで説明すると、

“`v8_10_0.js
import firebase from “firebase/app”
import “firebase/auth”

const config = {
//…
}

firebase.initializeApp(config);
const auth = firebase.auth();
“`

“`v9_0_0.js

【React】React ことはじめ (ただの学習ログ) Part2

## きっかけ
– 前回の以下記事の続き

https://qiita.com/kei1-dev/items/33b630f477a4aaed050e

##学習の進め方
– 前回の本で触れられていなかったAPI呼び出しやルーティングの内容が触れられている[Reactハンズオンラーニング第2版](https://www.oreilly.co.jp/books/9784873119380/)で学習したいところだけメモしています。
– 前回と同じく、記事の記載に間違いがある場合、マサカリをお願いします…

## 学習内容
### ステート管理
– アプリケーション全体のステート管理
– 複数コンポーネントがステートを持つと複雑になるため、1箇所でステートを管理したい→最上位のルートコンポーネントで管理、参照は親から子コンポーネントへプロパティとして渡す、変更は子から親コンポーネントへ伝えステートを更新する

– コンテキスト
– 巨大アプリケーションでのステート伝達の際に、中間コンポーネントが伝達のためだけにプロパティ設定が必要となり、複雑なアプリケーションとなってしまう。→コン

mapとreduceでforやif文を置き換える

#はじめに
最近、mapとreduceを用いた面白い配列操作を学んだので備忘録としてこちらにまとめます。

#for文をmapで書き換える
配列内の値に変更を加えて再度配列に格納し直したい場合を考えてみます。

for文だと配列のlengthの数だけループを回して処理を加えたのち、新しく定義した配列にpushするという方法が考えられます。

###forを使ったケース

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

const array = [];
for(let i = 0; i < numArray.length; i++){ const doubleNum = numArray[i] * 2; array.push(doubleNum); } //出力　[2, 4, 6, 8, 10, 12] console.log(array); ``` ###mapを使ったケース これをmapで書くと以下のようにすっきりと書くことができます。 ```jsx const numArray = [1, 2, 3, 4, 5, 6];

【TypeScript】find()でundefinedを返さない方法

# はじめに

find()はJavaScriptの関数ですが、`undefined`を返す可能性があるので、**TypeScriptだとそのままでは使えません**。そんな時にどうやって使えば良いのかを解説します。

**結論：Nullish coalescing operatorを使う。**

# find()は配列要素or`undefined`を返す

`Array.prototype.find()`は、配列の要素を最初から順番に渡し、

1. 条件に一致する`(return true)`場合→その要素
1. 条件に全て一致しない場合→`undefined`

を返します。下のような、オブジェクトを要素に取る配列で使うことが多いです。

“`typescript
const language = [
{ value: “js”, label: “JavaScript” },
{ value: “php”, label: “PHP” },
{ value: “rb”, label: “Ruby” },
{ value: “”, label: “Others” }
]

node-webrtcでWebRTCを入門

# 環境

– Ubuntu 20.04 (AWS)
– node v10.19.0 (npm 6.14.4)
– npm packages
– wrtc 0.4.7 (node-webrtc)
– mkdirp 1.0.4
– chokidar 3.5.2
– dateformat 4.5.1

# 作ったもの

– WebRTCのデータチャンネルを使って文字列データのやり取りをするサンプル
– オファー側、アンサー側、共に `node.js` で実装、コマンドで実行
– P2Pを始めるまでの情報のやり取りをファイルシステム経由で行っている


# WebRTCでP2P通信をする流れ

– オファー側とアンサー側の２つあったり、イベントハンドラが複数あったりして混乱しがちだが、
– `setLocalDescriptio

JavaScriptでコードに影響を与える記号などを表示したい場合の方法

概要

JavaScriptにてシングルクオーテーション（’）など、パラメータ内で使用している記号をそのまま表示しようとすると　
エラーが発生してしまうため、その表示方法についてのまとめとなります。

内容

　　　
以下の文章を表示したい場合を例に説明したいと思います。
　　　“` I’m Japanese“`
これをそのままプログラムで表示しようとした場合、
　　　“`document.write(‘I’m Japanese’);“`

となりますが、シングルクオーテーションとアポストロフィが同じ記号であるためエラーが発生してしまいます。
このように、特殊な文字を表示したい場合はエスケープシーケンスと呼ばれるものを使って表示するようにできます。
上記の場合だとシングルクオーテーションであることを出力したいので__「\’」__と記載することで表示が可能となります。

　　　“`document.write(‘I\’m Japanese’);“`

その他まとめ

エスケープシーケンスには他にもいくつかあるので、表示でエラー

ブラウザレンダリングの仕組み

# はじめに
学習していく中でブラウザがユーザーにwebページを表示する仕組み、ページ表示までのレスポンスの流れについてつまずいたので紹介します。

# 目次
[1.全体図](#1-全体図)
[2.HTMLのダウンロード](#2-htmlのダウンロード)
[3.HTMLの解析](#3-htmlの解析)
[4.CSSのダウンロード](#4-cssのダウンロード)
[5.CSSの解析](#5-cssの解析)
[6.JavaScriptのダウンロード](#6-javascriptのダウンロード)
[7.JavaScriptの実行](#7-javascriptの実行)
[8.レンダーツリーの構築](#8-レンダーツリーの構築)
[9.Layout](#9-layout)
[10.レンダーツリーの構築](#10-painting)
[11.Composite](#11-composite)

#1 全体図
レンダリングの大まかな流れです。
![全体図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1015

【JavaScript】forEarchメソッド

#はじめに
こんにちは。
今回は、JavaScriptのforEarchメソッドについてアウトプットしていきます！

##forEarchメソッドとは
>`forEach()` メソッドは与えられた関数を、配列の各要素に対して一度ずつ実行します。

> 参照：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

“`javascript:JavaScript
const arry = [1,2,3,4,5];

arry.forEach(function(v){
console.log(v); //1,2,3,4,5
})
“`
配列arryには、1から5までの要素が格納されているので、要素の数だけ処理を実行している。

“`javascript:JavaScript
const ary = [1,2,3,4,5];

for(let i = 0; i< ary.length; i++){ const v = a

Stimulusでa11yを考慮したタブを実装する

## Stimulusとは
Stimulusとは、JavaScriptで書かれたクライアントサイドのライブラリです。
有名どころだとStack Overflowが採用していたりします。

StimulusはHTMLを中心に考えられていて、JavaScriptで書かれた振る舞いをHTMLから呼び出せるように設計されています。
それゆえ私のようなHTMLコーダー上がりの人間にとっても、とっつきやすいライブラリだと思います。

また、アクセシブルな実装は基本HTMLありきなので、その辺の親和性も高いと思っています。

## タブとは
【javascript】stringのyyyy年mm月dd日をyyyymmddにフォーマットする。

業務の中でどうしても年月日表記のデータを数字だけの表記に変換したい。

例）
渡ってくるデータ　→　2021年09月06日(月)
変換後の値　　　　→　20210906

moment.jsを使用して変更

“`html:index.html

2021年09月06日(月)

“`

---

replace()で変更

コメントにて　@gsw213　様より

“`ht

AzureにNode.jsから画像を保存したりDLしたりする

何かと画像を保存したいってシーンは出てきますよね。

[AzureにNode.jsから画像を保存する 準備編](https://qiita.com/n0bisuke/items/fb422677505da6c0997d)の続きですが、Azure Blob Storageに画像をアップロード、逆にダウンロードしてローカルに保存を試してみます。

とりあえず、Blob Storage内での概念として、`コンテナ=フォルダ的な概念`、`blob=ファイル的な概念でコンテナ内に作成される`と現状思っています。

## 画像用意など

まずは利用する画像を用意してみました。`n0bisuke.jpg`

> 

前回試したコードで`hell

AzureにNode.jsから画像を保存する 準備編

画像の保存などをやりたいなと思ってAzureでやってみよ〜と思った時の話です。

## まずは情報に行き着くまでが大変でした

Azureに限らずAWSもGCPもそんな感じだとは思いますが、サービス多いので概念理解をするのに時間がかかるといったやつです。

### Azureに画像を保存したいけどBlobストレージとかFilesとか調べるとごちゃごちゃ…

って感じです。

調べるとAzureのBlob Storageというサービスが画像とか保存できるっぽい話が出てきます。ただAzure Filesってのも出てきたり、なんかもっと色々出てきます。 ~~少しイラつき。笑~~

[Azule Filesとは](https://docs.microsoft.com/ja-jp/azure/storage/files/storage-files-introduction#why-azure-files-is-useful)とかを調べてみて雰囲気こんなかなぁという印象が

– Azure Blob Storage => API経由で利用想定
– Azure Files => NASとか社