React、過剰に複雑な代物。

はいさい！ちゅらデータぬオースティンやいびーん！

今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。

React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。

# Reactに対する違和感＝芽生えては大きく育った種
筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。

Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。

Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。

しかし、そんな筆者は、最近になって、Reactに対してさまざまな疑問が雑草のように思考のあちらこちらから生えてきており、草刈りが間に合わない次第です。

最もReactに対して受け入れられないのは以下の項目です。

AbortControllerを使って、Promiseを中断する方法

はいさい！ちゅらデータぬオースティンやいびーん

# 概要
AbortController APIを使って、Promiseを中断・強制的に拒否する方法を紹介します！

## 背景
非同期処理を、Promiseの外から止めたい！と、思ったことはありませんでしょうか？

社内で、Fetch API以外の非同期処理の作業を中断する方法がないか議論がありましたが、筆者はAbort Controllerを使ったらいいのではないかという考えで一つの解決法を思いつきました。

Abort ControllerはFetch APIのリクエストを中断するのに使われることは周知の通りですが、Abort Controllerは実に多くの使い方があります。

以前の記事で紹介したように、Abort ControllerでEventListenerを外すこともできます。

https://qiita.com/tronicboy/items/31c1f60daf2

麻雀大会の点数管理とマッチングを自動化するDiscordBotを作成した

こんにちは。
普段は新人インフラエンジニアとして保守のお仕事をしつつ日々勉強させて頂いているのですが、お仕事外のことで1つ成果物として挙げられるものが完成したので記事にしてみました。アウトプットの練習を兼ねつつ、お仕事で接する方にどのような取り組みを行ったか知っていただける機会になればいいなと思っております。

## 事の経緯

ゲームから知り合い、普段から付き合いのあるコミュニティで半年に1度ほど16人程度の規模で麻雀大会を開催していました。昨年11月の開催で3回目となったのですが、大会から数日後に主催メンバーと話していた際、”大会の現行のマッチングシステムの欠陥”についての話題になりました。現行のシステムがどういったものか纏めると、

:::note
1. 完全にランダムに選手を振り分け、1回戦(振り分け戦)を行う
2. 振り分け戦の結果を元に同順位同士で1-4位卓に分け、2回戦(入れ替え戦)を行う(16人だったので都合がよかった)
3. 入れ替え戦の結果を元に、1位は1つ上の卓へ、4位は1つ下の卓に移動する(1位/4位卓は最下位/1位のみ移動)
4. 同様に入れ替え戦を更に

もう一度JavaScriptを理解する part2

# 初めに
今回はSpecail valueについてまとめていきたいと思います。

part2は
[You Don’t Know JS: Types & Grammar – Chapter 2: Values](https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/types%20%26%20grammar/ch2.md)
の勉強メモです。

[part1](https://qiita.com/hu-yu/items/c52499418cb448783ac4#letconst)では`undeclared`、`TDZ`、`undefined`を触れていますが、今回はもう少しまとめていきたいと思います。

# undeclared vs. undefined
`undeclared`は宣言されていないということで、
“`jsx
var a = 1 // declared global variable
b = 2 // undeclared global variable

console.log(b) // 2
“`
**（`’

【Vue.js】Computed, Watchの使い分け

## この記事の目的
PRでレビューをいただいた際に疑問に思ったため、アウトプット用
独自の解釈もあるので、間違いがあればご指摘をいただきたいです！

## どう分けるのか
基本的には`computed`の方が簡潔に記述できるから良い
→`computed`内に記述されている変数は依存関係になっている
→`watch`は依存関係(監視する変数)を宣言しないと監視できない(コードが冗長になる)
“`js
watch: {
firstName(val) {
this.fullName = val + ‘ ‘ + this.lastName
},
lastName(val) {
this.fullName = this.firstName + ‘ ‘ + val
}
}
“`
`firstName`, `lastName`は同時に`watch`することも可能

“`js
computed: {
fullName() {
return this.firstName + ‘ ‘ + this.lastName

[黙示録] Macでnodebrew を使ってnode.jsをインストールする方法

Javascriptの勉強を始めて1ヶ月。
node.jsをようやくインストールしたので、自分のインストール手順を忘れないためにも記事に残しておきます。

# 環境
– Homebrew 3.5.3
– MacOS Monterey 12.4

# nodebrewのインストール
brewコマンドでインストールをしていきます

“`　ターミナル:コマンド
brew install nodebrew
“`
以下のようなメッセージが表示されたので、メッセージ通りの初期設定を行っていきます。

“` コマンド:結果
You need to manually run setup_dirs to create directories required by nodebrew:
/usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew’s directories rather than ~/.nod

[js]スクロールをブロックしたい

# やりたいこと
ローディング表示中やアニメーション中にユーザーのスクロールをブロックしたい。

# 実装
bodyのoverflowをhiddenにすれば良いです！
reactではこんな感じで実装できた。
“`js
useEffect(() => {
if (isScrollable) {
document.body.style.overflow = “scroll”;
} else {
document.body.style.overflow = “hidden”;
}
}, [isScrollable]);
“`

# うまくいかなかった例
スクロールのブロックはできるが、removeEventLisnerがなぜかうまくいかない。
“`js
useEffect(() => {
const preventScroll = (e) => {
e.preventDefault()
}
if (isScrollable) {
document.removeEventListener(‘touchmove’, preventSc

【解説編】モダンJavaScript構文ビンゴ 〜あなたはモダンなJavaScriptをどこまで理解できていますか？〜

# モダンJavaScript構文ビンゴ

IE11お疲れ様でした記念！

皆様、モダンJavaScriptの時代がようやくやってきました。

というわけでまずは、こちらの「モダンJavaScript構文ビンゴ」を無心でやってくださいませ。
パッとみて「理解できる」と思ったらチェックできます。

https://mekepon.com/bingo/CossiLrrvvf0VkIfXZMY

どうでしたか？

割とできました？
それとも全然チェックできませんでした？

個人的には、これ1つでもチェックできる人と一緒に仕事したいです。

というわけで、回答編というか解説編です。

# […items]

“`javascript
…items
“`

これは「スプレッド構文」と言われるもので、itemsの中身が“`[1, 2, 3]“`だった場合に、“`…items“`は“`1, 2, 3“`に置き換えられます。
これはどういうことかというと、つまり、

“`javascript
const newItems = […items];
“`

が、

`

JavaScriptの部分適用とクロージャで処理結果が異なる落とし穴

JavaScriptのクロージャと部分適用は、「引数の一部だけを与えて別の関数を作る処理」という理解だけだと落とし穴があります。
意外にもこの２つを比較して書いている書籍やウェブページが見当たらず、それどころかまったく同じものだと書いてあるサイトもありました。
同じ間違いを犯す人が少しでも減ることを願い、この記事を書くことにしました。

## 前提
* 当然ながらブラウザ・Node.jsのどちらでも同じです。TypeScriptでも同様です。
* 筆者はアマチュアエンジニアかつQiita初心者なので、間違いはお手柔らかにご指導願います。

## 結論
* クロージャの閉包された引数は「**変数**」のように処理される。
* 部分適用で与えられた引数は「**定数**」のように処理される。

## 具体例
遠足に持っていくおやつは300円までというルールがあるとします。
買い物の際にルールに違反していないかを調べる関数を作ってみましょう。

### クロージャの場合
“`JavaScript
const budgetClosure = budget => price => {
bud

LetとConstとVarの使い分け

プログラミング言語が時代とともに進化していくように、JavaScriptもバージョンが更新されていきます。現在最新版として使われているのが、「ES6（ECMAScript6）」というバージョンです。

以前までは変数宣言にvarのみを使用していましたが、ES6の環境からletとconstが新たに追加されました。

varはスコープの範囲を広げる自由度の高い変数のため、意図していないエラーが起こり得ることから、使用頻度は低いです。特別な意図がない限りはletとconstを使うようにしましょう。


Link：
https://tcd-theme.com/2021/04/javascript-difference-let-const.html

Jamstackとは？

## はじめに

案件でJamstackについて使う機会がありそうだったので、メモ程度に記載してみた。

## Jamstackとは
– JamstackのJamとは
– JavaScript
– Api
– Markupの頭文字
– Jamstackの特徴
– ウェブサーバー停止の影響を受けない
– 大量のアクセスに強い
– 比較的安全

## Jamstackでよく使われるサービス
### ヘッドレスCMS
– コンテンツ内容を管理する部分であるバックエンドの機能だけを持ち、見た目のデザイン部分やCSSなどをもたないCMSの事を言う
– 記事の投稿をヘッドレスCMSで行い、データをAPIで公開する

### 静的サイトジェネレーター
– HTMLを生成するライブラリが必要になる
– ビルド時にAPIをたたいてそのデータを取り込める必要がある

### ホスティングサービス
– 生成した静的コンテンツを配信できるサービスが必要になる

## 現在考えているもの
### microCMS
– ヘッドレスCMS
– 日本製
– 投稿画面も

CancelablePromise を自前で作るのはやめておいたほうがいいのでは

世の JavaScript エンジニアは一度は考えることではないかと思うけども。

JavaScript の Promise には処理を途中でキャンセルする API は無いので、キャンセルできるようにする Promise を考えた。

“` js
class CancelablePromise extends Promise {
#reject = null

constructor(executor) {
let _reject = undefined
super((resolve, reject) => {
_reject = reject
return executor(resolve, reject)
})
this.#reject = _reject
}

cancel(reason) {
this.#reject(reason)
}
}
“`

普通の Promise に `cancel` メソッドを生や

MicroModalでモーダル閉じても親ウィンドウにフォーカスが戻らない場合

JSでcloseメソッド呼んでいる場合、繰り返し実行するとbodyに「overflow: hidden」が残ってしまうことがある。

`MicroModal.close(trigger)`
`$(“body”).attr(“stryle”,””)`

とりあえず閉じたら毎回、無理矢理スタイル消してみたけど。場当たり的だな

【Vutifiy】使えるコンポーネントたち、まとめ

プロジェクトでVuetifyを使用したので、備忘録として。
使用したコンポーネントのまとめになるので、インストールなどの手順は省きます。

## 1.テーブル

``を使う。
APIで取得したデータをテーブル形式で表示したいときなんかに便利。コードはこんな感じ。

“` template.html

“`
“`script.js
import Vue from “vue”

export default Vue.extend({
data() {
return {
tableHeaders: [
{ text: “Name”, value: “name” },

javaScriptで固定されたD-Dayを作り方

– 固定された入力値
　⇒クリスマスのD-Day

—
必要なページ
—

1．index.html
　　⇒画面に表示されるページ
2.　index.js
　　⇒機能のページ

——
固定された入力値
—
INDEX.HTML
“`

Time Until Christmas Eve

“`
INDEX.JS
“`
const clockTitle = document.querySelector(“.js-clock”);

function clock(){
const dday = new Date(“Dec 2

気づいたらOSSコントリビューターになっていた

# はじめに
気づいたらOSSコントリビューターなるものになっていた。本当に些細なPRがマージされただけであるが。

https://github.com/kentcdodds/match-sorter/pull/140

私の想像するコントリビューターとは、言わば天上人と言うべき存在であった。コンピューターの全てを理解した一部の天才エンジニアがその技術力、知見を余すことなく発揮した作品がOSSであると。そう思っていた。

エンジニア歴1年の新人の私から見ればそのような方たちのコードにケチを付けるような行為など恐れ多いにも程がある。ハンターハンターで言えばネフェルピトー、ワンピースで言えばカイドウに対する圧倒的力の差を感じてしまうものである。

しかし、どうやらOSSにPRを投げる行為はどうやらそのようなものでないらしい。

様々な方がOSSへの貢献を推奨している。だがそのような記事を見ても、いやいや自分はまだまだだし、、と億劫になってしまう方も多いでしょう。私もその1人だったので。

私と同じく億劫なエンジニア方に向けてOSSへの貢献を少しでも気楽に行えるためのアドバイスを送る。

学び直しのJS ~ スプレッド構文・分割代入編 ~

学び直しシリーズ第三弾！
今回はスプレッド構文と分割代入編です！

## スプレッド構文
スプレッド構文は**配列**や**オブジェクト**の要素を分解してくれる構文です。
スプレッド構文を配列とオブジェクトに使って例を紹介します。

### 配列
“`javascript
const array1 = [“cat”, “dog”];

// array1のコピー(参照ではない)
const array2 = […array1];

// 要素を追加して新しい配列を生成
const array3 = […array1, “mouse”];

// 配列を結合して新しい配列を生成
const array4 = […array1, …array2];
“`

### オブジェクト
“`javascript
const user = {
name: “Mike”,
age: 18
};

// userのコピー(参照ではない)
const copyUser = { …user };

// プロパティを追加した新しいオブジェクトの生成
const newUs

動画の編集とレンダリング、Webブラウザでできます【JavaScript / Web Audio API / ffmpegで実装したサービスの紹介】

# Double TONE
Double TONEというブラウザ上で動作する動画編集サービスを作っています。本業はエンジニアではないため諸先輩方にご紹介するのは痴がましいですが、デザインも実装も一人で進めているこのサービスの紹介と、どのようにWebブラウザで動画編集を実現させているかを紹介しようと思います。

まだまだなサービスではありますが、今後もどんどんいろんな機能だったり使い勝手の向上をしてきますので、ぜひご意見を頂戴できれば幸いです。

Double TONEはサーバーサイド含めてすべてをJavaScriptで構成しています。UI制御はだいぶレガシーな作り(なんと`jQuery`ベース)で、レンダリング部分は`Web Audio API`と`ffmpeg`で作り上げています。コードの一部はこの記事の後半に載せています。

学び直しのJS ~ アロー関数編 ~

学び直しシリーズ第二弾！
今回はアロー関数です。

ES6をちゃんと勉強せずVueの勉強をはじめてしまったせいで、`import`や`() => {}`の意味がわからなくて挫折したことがあります。
VueやReactなどのモダンな技術に触れようとする心意気は非常に大事だと思うのですが、同じような経験をしてほしくないのでこの記事でざっくりとイメージを掴んでもらえたらなと思います！

## アロー関数
解説に入る前にまずは従来の方法と見比べてみます。

“`javascript
// 従来の書き方
function square(x, y) {
return x * y;
}

// アロー関数
const square = (x, y) => {
return x * y;
};
“`

### 特徴１
アロー関数は **無名関数(匿名関数)** と同じように、関数を定義した段階では関数名が定まっていません。

### 特徴2
アロー関数の処理が１行の場合は`{}`と`return`を省略することができます。
“`javascript
// アロー関数
const squa

【初心者向け】今すぐ使えるJavascript クリーンコード簡単TIP

この記事では、文法自体よりもコード作成中によく出会う状況にごとにペストプラクティスをまとめています。

## if文関連
個人的な意見ですが、if文の周りで迷う時は大体ロジック自体を見直すことでリファクタリングができました。
不要なif文を使ってないか、いらないロジックを追加してないか、などを検討します。

### 条件文が長い時
条件文自体を定数に入れ、コードを読みやすくします。
“`jsx
// bad
const a = ‘dog’
if (a === ‘dog’ || a === ‘cat’ || a === ‘fish’ ) {
doSomething()
}

// better
const isPet = a === ‘dog’ || a === ‘cat’ || a === ‘fish’)

if (isPet){
doSomething()
}

“`
### if分文が多い、二重、三重if文を使っている時
不要なif文を使っていないか再確認します。
“`jsx
// bad
function canDrin