JavaScript関連のことを調べてみた2020年01月07日

[トリビアの種] TaskQueueはオーバーフローするのか？結果は…ｫｱﾌﾝ

この記事は、私が素朴な疑問を抱いたところから検証してみたまでの一部始終です。
勘違い等がありましたら、ご指摘いただけますと幸いです。

結果だけを知りたい方はこちら。

エラーは発生しなかった。

## 今回のお便りはこちら
ある日、JavaScriptの非同期処理について勉強していた時にスタックとキューの存在を知りました。[^1]
これが「スタックにタスクが積まれすぎてオーバーフローになるのか！」と膝を打ちました。
それと同時に、キューオーバーフローって聞いたことないなと疑問に思いました。
そこで、キューオーバーフローになるようにあえてコードを実行するとどうなるのでしょうか？
これって種になりませんか？よろしくお願いします。

[^1]: https://developer.mozilla.org/ja/docs/Web/JavaScript/EventLoop

## このトリビアの種つまりこういうことになります
キューオーバーフローになるようにあえてコードを実行すると結果は、、、「ｫ

【 Laravel 】Laravel DB.comで『 CRUD簡単作成 』を解説

#Laravle DB.com を使って 「 ER図 → CRUD生成 」を試す！
以前にも書きましたが、Laravle DB.comでは「CRUD」のコードまで生成するようになりました。＼(^o^)／

###前提条件

– Laravelで環境を作ったことがある人（とりあえず動作するまで）
– Laravelの基本を理解している人（つもりの人）
– 確認環境：Laravel5.5/PHP7.2.1/MySQL5.6.38 （Chromeで確認）

—
#### メリット
– CRUDを自動生成！
– 超便利！ ER図を保存できるので、１度作ったものを別のアプリにも転用しやすい！
– どのPCからでも同じデータを操作できる（ブラウザアプリだから）！

さあ、はじめて行きましょう！

—

###【 LaravelDB.comへ ログイン 】
[ LaravelDB.com ](https://laraveldb.com/)
Googleアカウントのみログイン可能です。
※現在はGoogleアカウントを持っていない人は少ないですからね〜

高階関数、カリー化、部分適用

# 背景・動機

業務でReduxを利用していますが、公式サイトに以下のようなコードが現れビビったので調べました。

“`js
const middleware = store => next => action => {
next(action);
}
“`

# 高階関数とは

関数を引数にとったり、関数を戻り値とする関数のこと。

# カリー化とは

高階関数を使うと、以下のようなadd関数を定義することができます。

“`js
const add = function(a) {
return function(b) {
return a + b;
}
}
add(1)(2); // 3
“`

addのように、引数を1つずつとって関数を返し、関数がつながっている状態にすることをカリー化と言います。
上記は簡略化して以下のように記述できます。

“`js
const add = a => b => a + b;
“`

# 部分適用とは

カリー化された関数は、任意の引数を固定した別の関数を作成することができます。
これを部分適用と言います。

`

npm run serveの速度改善

# npm run serveが遅い

Vue.jsで書いたプログラムを確認しようとした時に、
npm run serveをしますが、動作が遅いし、他のブラウジングも同時に遅くなってしまう現象が発生しました。

## 原因
ESETなどのセキュリティソフトが影響しているみたい。

## 回避方法
Vue.jsのプロジェクトルートに、vue.config.jsというファイルを作成し、配置する。中身はこんな感じ。

“`js
module.exports = {
devServer: {
port: 8009,
},
};
“`

これで
“`npm run serve“`すると、
指定した通り、8009ポートで立ち上げている。


## 参考サイト
https://blog.kobasato.

javascript の最新技術情報 (ECMAScript2020) を確認する方法

# はじめに

three.js で簡単な星空を描画するプログラムを作成して以降も、何かと javascript を使ってきましたが、ふと、javascript で実装される新機能などはどのようにして決定するのかという疑問を持ちました。

調べた結果、Ecma International による正式仕様となるまでの過程が公開されているようなので、備忘のために投稿しました。

# 実装する機能を決定する組織等について

Ecma International という情報通信システムの分野における国際的な標準化団体の元で、**ECMAScript (エクマスクリプト)** という javascript の標準仕様として、手続きが行われています。

ECMAScript は、ECMA-262 という規格番号で標準化されており、Edition 番号で更新が行われています。
2015年までは 単純に 1, 2, 3, … 6 といったような形でしたが、2016年以降はその年を Edition 番号とするようになりました。

今年は 2020年なので、Edition は「ECMAScript 2

非Javascriptエンジニアのための「Javascriptの関数」

[前回 – 非Javascriptエンジニアのための「非Javascriptエンジニアのための「Javascriptの配列」」](https://qiita.com/akumachan/items/afd79303dd7db43444ef)

ITエンジニアのアクマちゃん([@akumachanit](https://twitter.com/akumachanit))デモ！
この記事は[JavaScript 「再」入門](https://developer.mozilla.org/ja/docs/Web/JavaScript/A_re-introduction_to_JavaScript)をベースに書いているデモ。

あけましておめでとうデモ。年末は体調を崩してしまってAdvent Calendarを書ききれなかったデモけど、引き続き「非Javascriptエンジニアのための」記事は書いていきたいと思いますのでよろしくお願いしますデモ！

#関数の基本
今回はJavascriptの関数について書いていくデモ！
関数の基本の書き方はこんな感じデモ。

“`js
function add

クリックでテキストをコピー【JavaScript】

# コード

“`html

コピーしないテキスト
コピーするテキスト
コピーしないテキスト
【ここをクリックでテキストをコピー】

“`

“`javascript:textCopy.js
window.addEventListener(‘load’, function(){
$(‘.copy-text-btn’).on(‘click’,function(){
var textElem = $(this).parent().find(‘.text’);
window.getSelection().selectAllChildren(textElem[0]);
document.execCommand(“copy”);
window.alert(“テキストをコピーしました！”);
});
});
“`

# 動作実演GIF
![202

async/await完全に理解した（JavaScript）

# きっかけ

最近Node.jsを触る機会があるが、言語を体系的に勉強してきたわけではないので、必要な機能から調べながら使っている。
あるとき一定時間待ってから次の処理を行うシーケンス的なことをしたいなと思って調べたところ、やりたいことは「非同期処理」と言われるようだ。次のようなサンプルコードが出てきた。

“`javascript:コールバックを使う方法
const t0 = Date.now(); // 開始時刻を取得
console.log(‘開始: ‘ + (Date.now() – t0)); // 経過時刻をあわせて出力
setTimeout(function() {
console.log(‘1秒後に実行されるはず: ‘+ (Date.now() – t0)); // 経過時刻をあわせて出力
}, 1000);
“`

“`:出力
開始: 0
1秒後に実行される: 1004
“`

**あーそーゆーことね完全に理解した**（画像は脳内補完願います）
よし、ちゃんと1秒後に実行された。
じゃあ処理を2段階にしてみよう。

“`javascript:コール

ReactでToDoアプリを作成してみました

# はじめに
この記事ではJavaScriptのライブラリであるReactを使用して簡単なToDoアプリの実装を行います。
クライアント側のみの実装になります。
Reactの[ドキュメント](https://ja.reactjs.org/docs/getting-started.html)や[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)（三目並べ）を一通り行った後の練習になるように書きたいと思います。
環境構築に関しては、`create-react-app`を使用して作成しています。環境構築に関しては以前書いた[記事](https://qiita.com/penpenta/items/2fa98aa885ba8fa7ed90)があります。
もちろん、オレオレな環境でもokです。
Reactについては初心者なので認識の齟齬や到らない点も多々あると思いますが、よろしくお願いします。

## 目次
1. 環境準備
2. コンポーネントの確認
3. ファイル構成
4. Reactで保持するデータについて
5. 各コンポーネントの

JavaScriptを学習してたらネスト（入れ子構造）で詰んだの

#前回のあらすじ（Javaスク編）
・ハローワールドのアラートを出すことに成功した
#今日やったこと
・if関数を使って、変数yがうるう年かそうじゃないか判定するプログラムを作ってみた！
（今回の教科書『新人プログラマのためのjQuery Webアプリケーション開発講座』)
#困ったこと
・教科書のソースコードをいくら見ても、入れ子構造がわかりづらくて詰んだ！！
#解決方法
先人に訪ねて、ソースコードの体裁を変えてみたら、すんなり理解できるようになった！
Before

“`
if{
example
}else{
false
}
“`

after

“`
if
{
　　example
}
else
{
　　false
}
“`

つまり、カッコの位置をわかりやすくして視覚的に理解できるように書くことにした！
#感想
プログラムそのものはすぐに実行して成功させることができたけど、今後のためにも構造を理解しようとしたらすっごく大変だなーって思った。
#次回の目標
・Switch関数について学習して、理解したい

動的に読み込んだJavaScript内でchrome.extension.getURLを使う方法

##問題点
Chrome拡張機能で拡張機能のアイコンをクリックしたときに必要なjsを読み込んだら、読み込まれた方のjsの中ではchrome.extension.getURLを使えなかった。

##間違ったコード

“`javascript:entry.js
appendScript(“main.js”);
function appendScript(url) {
chrome.extension.getURL(url);
const el = document.createElement(‘script’);
el.src = url;
document.body.appendChild(el);
};
“`

“`javascript:main.js
chrome.extension.getURL(“sounds/piano-c2.mp3”); //TypeError: Cannot read property ‘getURL’ of undefined
“`

##正しいコード

appendChildの代わりにevalでそのまま読み込む。

[JavaScript/React]テキストボックスの入力チエックを実装

### この記事で書くこと
React を使って、テキストボックスの入力チェックを実装

#### イメージ
1.テキストボックスに文字を入力または削除すると、現在テキストボックスに入力されている文字をコンソールに表示する。

2.テキストボックスに文字を入力していない場合
・**”文字を入力してください。”**という文言を画面に表示する。
・`false`をコンソールに表示する。

3.テキストボックスに文字を入力していない場合
・**”文字を入力してください。”**という文言を画面に表示させない。
・`true`をコンソールに表示する。

### 開発環境
開発環境は次の通り

|項目||
|—|—|
|PC|MacBook Air|
|OS|MacOS Catalina ver 10.

英語の「○○もできないの？」という質問に対して「はい、できます」と返す謎をプログラミングで解明する

英語の否定疑問文「Can’t you speak English ? (あなたは英語もできないの？)」に対し、
日本語なら「はい、できません」か「いいえ、できます」と答えるところを、
英語では「No, I can’t.」か「Yes, I can.」とYes/Noを日本語と逆に答えますが、僕はどうしてもこれがしっくりきません。

いざ会話のときにすごく混乱します。

というわけで何が起きているのかJavaScriptで書いて頭を整理してみます…。

## 通常の疑問文

“`javascript:日本語
const canSpeakEnglish = true

// あなたは英語ができるの？
if (canSpeakEnglish) {
console.log(‘はい、できます。’)
} else {
console.log(‘いいえ、できません。’)
}
“`

“`javascript:英語
const canSpeakEnglish = true

// Can you speak english ?
if (canSpeakEnglish) {
console

スコープの概念[JavaScript本格入門]__WebデザイナーのJS学習備忘録

# はじめに
今回は、JavaScriptにおける「スコープの概念」についてJavaScript本格入門の内容から重要な要素をまとめて行きます。

## スコープ
スコープとは、変数がスクリプトの中のどの場所から参照できるかを決める概念である。

**JavaScriptのスコープの分類**

– スクリプト全体から参照できグローバルスコープ
– 定義された関数の中でのみ参照できるローカルスコープ
– ブロックスコープ(ES6以降)

## グローバル変数
グローバルスコープをもつ変数のこと

## ローカル変数
ローカルスコープをもつ変数のこと

## グローバル変数とローカル変数の違い

– 関数の外で宣言した変数　=> グローバル変数
– 関数の中で宣言した変数 => ローカル変数

▼ サンプルコード

“`script.js
var scope = “Global Variable”;

function getValue() {
var scope = “Local Variable”;
return scope;
}

console.log(getValu

[WIP]claspの二つの設定ファイルappscript.json/.clasp.jsonについて理解する

TBDです。
仕事/プライベートclaspを使っていて設定や挙動が理解できなかったので調べました。
(特に「ウェブアプリケーションとしての導入」まわりと`clasp deploy`)
概要と参考文献あれば問題解決する人が多そうな気がしたので先んじて公開します。
調べながら書いているため、用語間違いなどあれば編集リクエストお願いします:pray:

# claspとは
claspはgoogle謹製のgasのローカル開発ツール。
[いいが記事たくさんある](https://qiita.com/search?q=clasp) ので導入は割愛します。

ローカルでスクリプトをコンパイル・アップロード→gasプロジェクトとして実行

という実装になっているため、ローカルの挙動を制御する`.clasp.json`とgasロジェクトの挙動を制御する`appsscript.json`の二種類の設定ファイルが存在する。

## .clasp.jspn
### 概要
claspそのもののオプションファイル。
gasプロジェクトはこのファイルのことを知らない。

### オプション一覧
TBD

### 疑

DOM操作 メモ

## DOM操作

“`js
///parent内のHTMLを取得します
parent.innerHTML
“`

“`js
///parent内のテキストを取得します
parent.textContent
“`

“`js
///parentにex属性を
parent.setAttribute(‘ex’,);
“`

### テキストを挿入したい場合

例として以下のHTMLを用意する。

“`html

• 1
• 2
• 3

“`

【React】オブジェクト配列（チェックボックスリストなど）のstateをsetStateで更新する方法

# 概要：setStateでpropsが更新されてしまう問題

前提としてReduxなどのフレームワークは利用していませんのでフレームワーク上の挙動については未確認です。

React.jsでチェックボックスのリストなどを1つのコンポーネントとして定義して使いまわしたい場合。
オブジェクトの配列をpropsとして渡すと管理がしやすいと思うのですが、checkedの変更などでstateの状態を更新する際にpropsの値まで更新されてしまうという問題に苦戦しました。

この問題の解決方法が日本語でなかなか出てこない＆求めていない情報が多く検索でヒットしてしまい解決するまでに苦戦してましたが、freeCodeCampで解決法を発見したので、備忘録の意味も込めて共有したいと思います。

結論のみ確認したい方は[解決方法](#解決方法：文字列にしたstateをJSONに戻して更新する)まで飛んでいたただければと思います。

Reactの状態管理についてはまだ理解が完全ではない部分もあって間違った認識などあったらご指摘頂けると幸いですm(_ _)m

# propsを参照したロールバックができない

TypeScriptチュートリアルを和訳しました

## 今日やること
今日は、TypeScirptのドキュメントのチュートリアルをやってみます。
[(TypeScript in 5 minutes)](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
チュートリアルからソースコード、記事構成を使わせていただいております。

## TypeScriptとは
TypeScriptとは型を持つJavascript。静的型付けであり、クラスを作れたりと**javaScriptの改良版**のようなイメージ。
コンパイルするとJavaScriptコードになります。

## インストールしようぜ

インストール方法は2つ
・npm（＝Node.jsのパッケージマネージャー）
・Visual Studioプラグイン

今回はnpmを使ってインストールします。

“`console
$ npm install -g typescript
“`

これだけです…！

## 書いてみようぜ

早速TypeScriptファイルを作成して書いていき

【Nuxt.js】正規表現基礎編①：よく使う表現を単語分割で解説！

# 前置き

今回は正規表現！
【Nuxt.js】Form実践編：GoogleFormと独自フォーム連携
https://note.com/aliz/n/n9c6deafe0633

ここのバリデーションの設定で使いました?
もちろんコードに反映させることも可能です。
正規表現の意味は様々なページで乗ってるので
**ここでは実際に使われる表現で
簡単なものから理解しやすいよう解説します。**

# 基本
まずはメタ文字の種類の把握！
ここが参考になります！
まずは一文を理解するのではなく、
単語を分割し、簡単に理解しましょう♪
https://userweb.mnet.ne.jp/nakama/

# インターネットURL
“`
^(http|https)://([\

JavaScriptとTypeScriptでC#の(マルチキャスト)デリゲートのようなことをする

#概要

まず大前提としてやっていることはnode.jsのEventEmitterとほぼ同じです。というかそのものです。
しかし、デリゲートとイベントでは意味も用途も少し変わってくるのと、
ふと「もっとC#みたいな感覚で書けたらいいなあ」と思ったので今回実装することにしました。

EventEmitterについてはこちらに良い記事がありました
https://qiita.com/yuku_t/items/d69d3a2c7dafa7d04e87

##デリゲートって何？？
そもそもデリゲート（delegate: 委譲・委託）とは、関数をオブジェクトとして扱うための仕組みを表します。
delegate（委譲）という言葉のニュアンスとしては、 「他の関数に処理を委託するためのオブジェクト」というような意味です。 イベントが発生したときのイベントハンドリングやどのメソッド処理を委譲（委託）するかを指示するためなどに使われます。
JavaScriptではすでに関数もオブジェクトとして扱われているためわざわざ実装する必要ないように感じられると思いますが、マルチキャストデリゲートと呼ばれる複数の