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

大量の非同期APIをawaitを使わずにシーケンシャルに呼び出す

## やりたいこと

こんな場面を想定します。
エンドポイント“/m1score“と、パラメータの配列がある。

“`javascript
const params = [
{ team: “madical”, score: 649 },
{ team: “oide”, score: 658 },
{ team: “mitori”, score: 648 },
…
];
“`

この配列の各要素を使って、POSTメソッドを全部シーケンシャルに（逐次処理で）呼び出したい。
下記のイメージ。

“`javascript
// まずは↓を実行
fetch(“/m1score”, {method: “POST”, body: JSON.stringify({“team”: “madical”,”score”: 649})});
// ↑が終わったら↓を実行
fetch(“/m1score”, {method: “POST”, body: JSON.stringify({“team”: “oide”,”score”: 658})});
// ↑が終わったら↓を実行
fe

【Vue.js】IMEで変換中の文字列を取得する

# v-modelだとIME変換中の文字は取得できない。

“`vuejs:出来ない例

// これだと変換中なにも取得できない…
“`

## ドキュメント見てたらそれらしきものを発見
>IMEを必要とする言語 (中国語、日本語、韓国語など) においては、IME による入力中にv-modelが更新を行わないことに気づくでしょう。このような入力に対しても同様に扱いたい場合は、代わりにinput イベントを使用してください。
> [フォーム入力バインディング/基本的な使い方](https://v3.ja.vuejs.org/guide/forms.html#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9)

## この書き方でできるらしい

“`vuejs:app.js

Kinx で ModanShogi 実装してみた

# はじめに

新年明けましておめでとうございます。本年もよろしくお願いいたします。

さて、**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)ですが、今年も何卒ご贔屓頂ければ幸いです。

今回は言語処理系を作るシリーズその１。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)
* 個別記事へのリンクは全てここに集約してあります。
* リポジトリ … [https://github.com/Kray-G/kinx](https://github.com/Kray-G/kinx)
* Pull Request 等お待ちしております。

パーサー・コンビネータ作ったし、JIT ライブラリも作ったので言語処理系作りたいですよね。今回が最初で最後かもしれない

【自分用】配列でsort()とpush()に関する備忘録

##sort()を使う際の注意点
sort()は便利ではありますが、元となる配列を破壊してしまう可能性があるので、注意する。
sort()とセットで覚えておきたいのが、slice。
これを使うことで元の配列をコピーすることが出来る。

“`javascript
var array = [‘a’,’b’,’c’];
var array_copy = array.slice();

console.log(array);
//[‘a’,’b’,’c’]
console.log(array_copy);
//[‘a’,’b’,’c’]
“`

##文字列のsort()
・文字列：50音順

“`javascript
let name = [‘村上’, ‘佐藤’, ‘高田’];
name.sort();
console.log(name);
//[‘佐藤’, ‘高田’, ‘村上’]
“`

##数値のsort()

###・昇順
“`javascript
function sortA(a, b) {
return a – b;
}

let grade = [660, 80

JavaScriptのMapオブジェクトでmap関数やfilter関数を使いたい

## 概要
ES6からJavaScriptではMapオブジェクトと呼ばれる、キーと値の組み合わせを保持することができるオブジェクトが使用できます。詳しい仕様については、@chihiroさんの[JavaScript　Mapオブジェクト](https://qiita.com/chihiro/items/9965cd7eca0380cf288c)にまとめられています。
この、Mapオブジェクトについて反復処理を行いたい場合は、forEachやfor文で値を取り出していくのですが、ではmap関数やfilter関数を使いたい場合どうすれば良いのかというのを今回記事にまとめました。

## 対応
[Convert ES6 Iterable to Array](https://stackoverflow.com/questions/27612713/convert-es6-iterable-to-array)の記事にある通り、`Array.from()`関数ではMapオブジェクトやIterableオブジェクトを配列に変換できます。ので対象のオブジェクトを一度配列に変換した後に、map関数やfil

【初心者必見】ポートフォリオを作成途中ですが、今までの知見をまとめました。

はじめに
私は転職活動のための、ポートフォリオを作成中です。
PHPとSQLの学習に入る前に、それまで行った事をまとめました。

作成中のポートフォリオサイト：https://neptune.sakura.ne.jp/Hanatachi/
ポートフォリオサイトのGitHub：https://github.com/fujioka8700/Hanatachi

1.サイトの目的の明確化
道端に咲いている花たちについて、語れるコミュニティの作成、運用。

2.サイトの狙い、目的
　道に咲いている花たちの紹介。
コミュニティを作り、情報交換の場を作ります。

3.ターゲット
　ウォーキングをしている人たち。
これから、ウォーキングを、始めようとしている人たち。
花が好きな人たち。男女は問いません。

4.サイトを作ろうとした動機
　私は健康維持のために、ウォーキングをしています。
ウォーキングをしていると、初めて知るお店や、
見たことのない景色に、遭遇することがよくあります。
目の前の大きな発見があるとともに、小さな発見もよくあります。

　それは足元に咲いている花たちです。
道端に咲い

【JavaScript】個人メモ

# はじめに

本記事は、JavaScriptの個人的なメモです。
間違い等ございましたらご指摘お願い致します。

## DOMとは

– Document Object Model
– HTMLやXMLを扱うためのAPI
– JSからHTMLにアクセスするための窓口
– HTMLの探索やスタイルの変更、イベントの設定、HTML要素の取得などができる
– また、ユーザーが操作したときの処理を設定できる

### DOMの特徴

– ツリー構造（階層構造）
– ノード（NODE）で表現される

## パースとは

– JSONをHTMLに変換すること

—

## スコープの種類

– グローバルスコープ
– スクリプトスコープ
– 関数スコープ
– ブロックスコープ
– レキシカルスコープ

### グローバルスコープ

– windowオブジェクトもグローバルオブジェクトの一つ
– グローバルスコープもスクリプトスコープも挙動に変わりはないため、一般的には同じ認識を持たれている

### スクリプトスコープ

– グローバルスコープの内側にあるスコープ
– グローバルスコープにも

【Robocode】JavaScriptを勉強しながら戦車ゲームを攻略していく　その１

#はじめに

前回記事で構築したRobocodeを遊びながら攻略していきます。
https://qiita.com/abemaki/items/54712e50e4a4a25c229b

ゲームを起動すると以下のような画面が出てきます。
初期段階でもステージ0であれば、五分五分の戦いです。
今回は軽く触りながら、ステージ0での勝率を高めていきたいと思います。

反響があればGithubに改良版をアップしたり続編を書いてみようかな。

　
**画面イメージと画面の見方**

#ソースコードを理解する
##公式の説明を読む前にちょっとだけソースコードを見ていきます
ソースコードを見ていくと
boss-*.jsといたファイルとmyrobot.jsといったファイルがあるのがわかります。
myrobot.jsは自機で、boss-*.jsは敵機を表してい

【Javascript】BigIntの使い方

競プロなどで Javascript を採用していると、稀にロジックは正しいはずなのにクリアしない時がある。
これは、Number 型で定義されている「`Number.MAX_SAFE_INTEGER`より大きい」または「`Number.MIN_SAFE_INTEGER`より小さい」数値で演算されており、丸め誤差が発生している可能性が高い。

これを解決するには BigInt 型を使用すると良い。(var の自動変換に BigInt が含まれていない為、今回のようなエラーが表示される)
しかし、使用するにあたって直感的に使用できなかったので使い方を備忘録程度に記載しておく。

#宣言方法#
BigIntの宣言方法は、2通り存在する。
①代入する数値に **n** を追記する。
②代入する数値の型を設定する。

“`javascript:initialaize.js
//①
var a = 0n;

//②
var b = BigInt(before_BigInt);
“`

#演算方法#
2021年1月時点では BigInt に Math などの演算パッケージが対応しておらず、`基本

javascriptによる並列処理

## 概要
普段javascriptを書いているとよく使う非同期処理（Promise）だが、言語仕様上(
シングルスレッドのため)非同期処理は処理の順番を変えているだけで厳密には同期処理のようだった。

ざっくり図

“`
同期処理
実行→結果→実行→結果…

非同期処理
実行→実行→結果→結果…

並列処理
実行→結果…
実行→結果…
“`

よくよく調べていると`Worker`オブジェクトを使用すれば並列処理ができるみたいなので試してみた

**Document**
– [Docs Worker](https://developer.mozilla.org/ja/docs/Web/API/Worker)

## ブラウサでの使用

※メインスレッド以外では、domの更新などができない

“`index.js
var worker = new Worker(“./greeting-worker.js”);

// データが送られてきたら発火
worker.onmessage = function (message) {
console.log(messa

JavaScriptで文字がはみ出している時に自動横スクロールする

#目標
コレ↓ を作ります。

#完成形
“`javascript
function StartScroll(target_id){
const ele = document.getElementById(target_id);
var style = ele.style;
style.overflowY = “scroll”;//横スクロールする
style.whiteSpace = “nowrap”;//改行しない
style.setProperty(“-ms-overflow-style”,”none”);
style.setProperty(“scrollbar-width”,”none”);
style.setProperty(“-webkit-scrollbar”,”none”

【備忘】【JavaScript】動かしながらthisについて理解する

# この記事の意図
thisが何か分からなくなるので、忘れないようにメモ

# JavaScriptのthisってなに
thisは、呼び出す場所でころころ変わる特殊なオブジェクト

# 呼び出す場所で変わるってどういうこと
下の例だと、一方はhelloと出力され、もう一方はundefinedになる。

“`js
class Example {
constructor(param) {
this.param = param
console.log(this.param);
}
lateHello() {
setTimeout(function() {
console.log(this.param);
});
}
}

const example = new Example(‘hello’); // →　hello
example.lateHello(); // →　undefined
“`

「なぜlateHello()だと、this.paramがundefined

【Google Chrome】拡張機能の作成方法を分かりやすく解説してみた Part. 2

#準備
前回は**”manifest.json”**を作成し、Chromeで確認した所で終わっていましたね。今回は**スクリプト（純正JavaScript）**も作成していきます。では、前回の**”example_extension”**フォルダを開いて下さい。

**background.js** //名称通りバックグラウンドで動作するスクリプトです
**”example_extension”**フォルダ上に作成して下さい。

自作拡張機能を追加した際にログを表示させるコードを**background.js**に書き込みます。しかし、このままでは**background.js**が認識されないので**manifest.json**を開き、下記の内容を追加して下さい。

“`json:manifest.json
{

“name”: “

JavaScriptのわかりずらかったことメモ

Javascriptでわかりずらかったことのメモです。

##可変引数
“`javascript:コード
function test(…args) {
console.log(args);
}

test(“1”, “2”);
“`

“`text:結果
[ ‘1’, ‘2’ ]
“`

##論理演算子と代入
“`javascript:コード
var a = “1”;
var b = “2”;

var c = a && b;
console.log(c);

var d = a || b;
console.log(d);
“`

“`text:結果

2
1
“`

a && bは!a ? a : b; と同じ。
a || bはa ? a : b; と同じ。

こちらを参考
https://qiita.com/masakazu_ca/items/3ce9228a6c009499cb79

##キーの名前でメソッド的

“`javascript:コード
var map = {a:”1″};
console.log(map.a);
“`

“`text

緯度経緯をURLへ変換するサービス、マップクリエイター

マップクリエイターとは、どんなWebサービスですか？
Googleマップの任意の地点をWebページ化するサービスです。場所をWebページ化することで空間にテキストが紐付くので、検索サイトから検索した時スムーズにその場所がどこにあるのかが、日本国民全員に分かるようになります。

マップクリエイターを作ろうと思ったきっかけは何だったのでしょうか？
旅行に行った時よくバスをよく利用するのですが、田舎のほうになるとバス停がどこにあるのか分からなかったり、バス停が分かってもどのバスがどこへ向かうのかが分からないことが多々あったので、それを上手い具合に解決したいと思って作りました。

そこで、ITとかにあまり詳しくない人でも、特定の場所に対して簡単にテキストを埋め込めるサービスがあれば、Googleで検索した時にその場所の詳細がすぐ分かるだろうと思って作りました。

バス停だけにとどま

Reactでいい感じのサブウィンドウを実装する ⑤ 初期表示の設定方法

今回は、Reactでサブウィンドウの初期表示の設定方法について説明していきます。

# やり方

Rndのdefaultプロパティに値を指定してあげると指定した箇所に表示することができます

## 例1 画面の真ん中にサブウィンドウを表示する

“`javascript

test

“`

## 例2 画面の右上に表示する

“`javascript

test

“`

# おまけ
defaultプロパティにwidthとheightを指定すると、　サブウィンドウの初期表示時のサイズを調整できます。
## 例

“`javascript

コメントによるセクシー構文 (仮)

(JavaScript や C 言語の系列等の、ブロックコメントを　 /\*　(´ε｀ )　\*/ 　で表す言語でのお話です)

はじめまして。
数年ぶりにプログラミングを趣味として再開した、うらしま状態の中年です。
技術情報の知識が 10年くらい空いているので、別世界に転移してきた気分です。(異世界転移、しかし激弱体化・・・)
そんな訳で、昔からのローテクな観点からの投稿です。
今回は、コメントについて記します。

***

プログラムを書いている最中に、ちょっと試してみたい事って、ありますよね？

今書いているコードの一部を別の書き方を試してみたくなったり。
JavaScript で DOM を操作する関数をコーディング中、上手くいっているかを試すために、その関数を様々な引数で呼び出してみたり。

そんな時は、既に書いた部分をコメント化してその場に保存しながら、他のいろいろなチャレンジをしていくことになると思います。

していきますよね？
え？　もっと高度な事をしていたりします？
・・・そんな高尚な方には縁の無い、泥臭いコメント化のテクニックをご紹介いたします。

まずは基本の

【フロントエンド学習①】フロントエンドとバックエンド

# これは？

フロントエンドの学習をして、その理解のアウトプットとして作りました。
初学者にもわかりやすい文章を心がけます。
理解に間違いがありましたら、ご指摘いただけると幸いです。

# フロントエンドとは
主にHTML、CSS、JavaScriptで構成されている
サーバーとの通信や、ブラウザに表示されるもの

– HTML・・・規則に則ってコンテンツを記述する
→文章、画像、動画、など

– CSS・・・HTMLで記述されたものにデザインを付与する
→文字や画像の色や大きさ、コンテンツの配置、など

– JavaScript・・・ページに機能を持たせる場合に使用する
→ボタンを押した時の動作、サーバーとの通信の定義、など
→ブラウザ上で動作するほぼ唯一のプログラミング言語！（ここ重要)
→ライブラリやフレームワークが豊富(jQuery、Bootstrap、React.js、Vue.js、Node.js、など)

# バックエンドとは
フロントエンドと比べて、使用できる言語は多い

LeetCode回答例【JavaScript】（Good率80%以上の良問厳選）※随時更新

LeetCodeのEasyレベルの良問をJavaScriptで解きました。
問題の解き方はここに載せているもの以外にもたくさんあるので、実際に自分で打って確かめてみてください。

https://leetcode.com/problemset/algorithms/?difficulty=Easy

LeetCodeはすべて英語ですが、Google翻訳を使うと質問の意図は伝わるくらいに訳してくれます。

## 問題　1047. Remove All Adjacent Duplicates In String

https://leetcode.com/problems/remove-all-adjacent-duplicates-in-string/

### 回答例
“`javascript
/**
* @param {string} S
* @return {string}
*/
var removeDuplicates = function (S) {
const stack = [];
for (const char of S) {
stack[stac

【備忘】【JavaScript】JavaScriptのclassをざっと理解する

# classとは
プロパティとメソッドをひとまとまりにして、特定の機能を実現するように設計されたオブジェクト。
`特定の機能：日時に関する処理を扱う、とか、文字列を操作する、とか…etc`

### classを定義するわけ

– 同じような処理をクラスにまとめて、コードをすっきりさせるため（可読性向上）
– クラスのロジックを修正すれば、一か所の修正で全てが修正できるため（保守性向上）
– クラスの使い方さえ知っていれば、中身のコードを知らなくても似た処理を書けるようにするため（開発効率向上）

# classからオブジェクトを生成する（インスタンス化）
new [Class名] でclassの定義に従ってオブジェクトを生成する。

### classの定義方法とインスタンス化①
“`js
// クラスを作る
class Example {
// constructor関数内は、インスタンス生成時に実行される
constructor(param) {
console.log(param);
}
}

// インスタンス生成
new Ex