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

kmyacc を独立させました（Fork 後）

# kmyacc

[前回](https://qiita.com/Kray-G/items/c77f2d5401c31290bfcd) fork しました、と報告した kmyacc ですが、オリジナルは10年程度メンテされていなさそうだったので、何かあった場合に自分でメンテできるようにするために独立したリポジトリに変更しました。

* https://github.com/Kray-G/kmyacc
* kmyacc 本体のライセンスはオリジナルと同様に GPL 2.0 です。
* ただし、kmyacc で出力したパーサー・ファイルの利用は自由（Public Domain）です。
* これもオリジナル同様。

### リリース

リリースしておきました。ビルド済 Windows 用の実行ファイルを zip でアップロードしてあります。

* v4.1.4+update.1
* https://github.com/Kray-G/kmyacc/releases

## 修正

新たに以下の修正を実施。

* Windows では kmyacc.ex

@babel/preset-env (babel 7.9.0)をハンズオンでちゃんと理解する

# バージョン情報

||version|
|—-|——-|
|node|12.16.3|
|@babel/core|7.9.0|
|@babel/preset-env|7.9.5|
|@babel/cli|7.8.4|
|browserslist|4.12.0|

# `@babel/preset-env` とは

`@babel/preset-env`は、`babel` プラグインのプリセットのことです。

そもそも `babel`の本体(`@babel/core`)は、「JSコードを入力として受け取り、ASTに変換後、**何らかの変換処理**を行い、変換後のASTから再度JSコードを出力すること」が責務であり、**何らかの変換処理**を指定しなければ、何のトランスパイルも行われません。

この**何らかの処理** に該当する実装がbabelプラグインのことで、開発者は実現したいトランスパイルに応じて適切なbabelプラグインを適用する設定を記述する必要があります。

…でも面倒ですよね？

単純にIEを含む主要なブラウザで一通りのES6コードを動かしたいだけという

スクショ用にラベルを付ける

# はじめに

Webページの「この部分はこんな感じです」というような資料を作る事が多いです。例えば…

[](https://gyazo.com/2748d183b630ae654cbf303b9da880e1)
という部分をパワーポイント等で
[](https://gyazo.com/8b197ff5f8dd73e24fb16014e5cc86bb)
のように加工して、「①はXXです。」みたいな補足を加える感じ。
この赤部分を入れるのがめんどくさくてしょうがない…ので！ブラウザのコンソールから簡単に挿入できるスクリプトを作ってみました。

# 使い方
1. 加工対象の要素にid属性がない場合は付与する
* ブラウザのコンソールに下記を流し込む
※idとlabelの部分は置き換えて

1日でなんちゃって学習記録WEBアプリを作ってみた。（イントロ編）

#勉強勉強…….
学生の大半は今日の生活を退屈だと感じているかもですし、
そうでないかもしれません。

かくいう私も初めの方は暇で退屈だと思っていましたが、
今では色んな意味で大忙しです。

そんなある日のこと。
一人の真面目な友人からLINEでこんな依頼を受けました。

“`
この前、塾の先生に
「赤チャート1・2・3・A・B全部時間は測ってやって、
目標時間内にできてるかわかるようにして、
そのデータ頂戴。弱点分析に使うから。」
って言われたんだけど、
紙に書くのめんどいから
なんかアプリ作ってくれん？
“`

何だこりゃって感じの依頼ですがまあ練習がてら作ることにしました。

#APPの条件
今回次の条件で作ることになりました。
-自前でサーバー不要
-オンラインで使えればOK
-PC・スマホ両対応
-データがEXCELかそれに類するもので出力可能
-依頼者しか使わないけど、閲覧は外部でも可能

そこで、今回はGASとその周辺のものでWEBアプリを作ることにしました。

#とりあえず完成品
![SnapCrab_NoName_2020-5-10_21-29-0_No-

タブ切り替えのjsについて（３パターン）

js 動作のタブ制作を調べていると、簡単に作れるものとして下記がよく見つかるような気がする。

下記では、jQueryを使って、ボックスエリアをタブと同じ順に並べた形で、表示・非表示を行う形式。

##■１つ目
“`html

• ボタン１
• ボタン２

タブ１の中身（ボックスエリア１）

タブ２の中身（ボックスエリア２）

“`

“`js
$(function () {
$(‘.js-button’).on(‘click’, function () {

//クリックしたタブのインデック

MacにNode.jsをnodebrewでインストールして環境構築【決定版】

# Mac に Node.js を nodebrew でインストールして環境構築

Mac に Node.js をインストールする方法は複数ありますが、ここでは `nodebrew` によるインストールとバージョン管理方法を説明します。

## nodebrew の導入手順

`nodebrew` を `homebrew` でインストールします。

### homebrew のインストール

“`bash
/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”
“`

### nodebrew のインストール

“`bash
brew install nodebrew
“`

### nodebrew 有効化

以下のコマンドを実行し、 `nodebrew 1.0.1` と Usage などが表示されることを確認した上で、

“`b

JavascriptでCurry化したときの非同期処理

ちょっとハマったのでqiitaに書いて、同じところでハマった人の一助になれれば幸いです。
表題のとおり、関数をcurry化させてそのなかで非同期処理を書いたときの内容です。

下記の通り、curry化の2つ目の関数に非同期処理を書いた場合は、問題なく実装できました。

“`javascript
const hoge = (bar) => {
return async (foo) => {
const fuga = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(foo)
}, 1000);
})
console.log(fuga)
}
}
hoge(‘ichiro’)(‘matsui’)
“`

この書き方で1つ目の関数で非同期処理がある場合、こう書けばいいと思ったのがエラーになってしまいます。

“`javascript
const hoge = async (bar) => {
const fuga = await

何故Dateオブジェクトではなく日付操作ライブラリなのか？

JavaScriptでの製品開発において、日付を扱う場合は大抵moment.jsやdate-fnsなどのライブラリが活用される。
今までなんとなくライブラリを使ってきたが、js組み込みのDateオブジェクトだってそれなりに機能は充実しているように見える。少なくともメソッドは一杯ある。
Dateオブジェクトの何が辛いのか調べてみた。

# よくあるやりたいこと
jsで日付を扱う時には、大抵こんなことがやりたい。

– YYYY/MM/DD など日本人にとって一般的なフォーマットで表示したい 英語版なら英語用のフォーマットも用意したい
– サーバーのシステム日付に依存せず、常に特定のタイムゾーンを使用したい
– 取得した日付を別のフォーマットに直して扱いたい

この辺りについてDateオブジェクトを使う場合とライブラリを使う場合でどんな差が出るかを比較してみる
今回は知名度もシェアも高いmoment.jsを比較対象のライブラリとする。

## 日付をフォーマットする
現在時刻を「2020/5/12 21時2分44秒」のようなフォーマットフォーマットに変換する

### Dateオブジェクト

【小ネタ】JavaScriptのPromiseに関する実行順序を確認する

# はじめに
Promiseオブジェクト生成時に渡す関数（executor）っていつ実行されるんだっけ、とか、executor完了後に「.then()」「.error()」でコールバック関数を登録した場合ってどうなるんだっけ、という点が個人的に曖昧だったので整理しました。
関連情報、および確認用のコードをまとめます。

Promise自体の説明については、以下のドキュメントが丁寧で分かりやすいと思います。

JavaScript Promiseの本
https://azu.github.io/promises-book/

公式はこちら。

Promise – JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

# 確認したかったこと
– Promise生成時に渡す関数（executor）はいつ実行されるか
– Promiseオブジェクトを生成した時点で実行される
– Promiseの「.then()」「.error(

Electron で mac と win に対応したアプリを作る時のこと。

Electron は node + chrome をパックしてて、一つのソースで複数のプラットフォームで動作するアプリを作れるのですが、実際 Mac でも Win でも動くようにするといくつかはまりどころがあったので、私のはまり方が大きかった順にご紹介しておきます。（Linuxは機会があれば！）

# ショートカット／アクセラレータ

https://github.com/electron/electron/issues/3682

この`issue`にあるように`Window`と`linux`の`chrome`ではいくつかのショートカットがウィンドウ中のテキストに作用するようにハードコードされているようです。
なのでテキスト以外のものを扱う例えばグラフィックエディタのようなものでは、`keydown`もしくは`keyup`イベントで`preventDefault`して明示的に自前のハンドラを呼ぶ必要があります。
今のところ確認してるのは以下のものです。

* Ctrl-A
* Ctrl-C
* Ctrl-V
* Ctrl-X
* Ctrl-Z

# alt キー

https://s

わぁい！どうぶつの森 カブ損益ツールをVueで作ったよー！

#Tl;DR
– Vue Cliを使ってどうぶつの森 カブ損益ツールを作ったよ
– できあがったのは[こちらだよ](https://ac-kabu-profit.netlify.app/)
– GitHubは[これだよ](https://github.com/haduki-yuki/bell-profit)

##あなた誰？
はじめまして。葉月ゆき[（@peridot_snow08）](https://twitter.com/peridot_snow08)、初投稿です。
フロント未満コーダー以上の存在でエンジニアをやりつつ都内でほそぼそしてます。

##何やったの？
前から興味があったVueで簡単などうぶつの森 カブ損益ツールを作りました！

きっとまだ不完全だと思われる部分もあるけど、公開はできた！
なのでやってきたことを振り返ろうと思います。

#

HtmlTs: TypeScript製のHtml要素作成ライブラリを作ってみました

コロナでゴールデンウィーク中引きこもりだったのでJS内でHTML要素を作成するライブラリを作成しました。
せっかくなので公開して虚無のゴールデンウィークの供養としたいと思います！

[github: htmlts](https://github.com/alashino/htmlts)

なにかの刺激になれば幸いです :bow:

以下はreadme.mdです。

—

# HtmlTs

## 概要

TypeScript製のHTML要素を作成を支援するライブラリです。
コードでHTMLを作成したい人向けのライブラリです。
一見jQueryみたいな感じで使えますが、必要ないメソッドは省略しています。(jQueryフリー)
decoratorを切り替えることによって様々なCSS Frameworkに対応できます。（デフォルトではプレーンなものです）
SampleとしてBootstrap4を実装しています。

## 使い方

“`html

“`

destにあるJSファイルを読み込むだけです。

bootst

P5.js 日本語リファレンス(getURLParams)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の getURLParam関数を説明します。

## getURLParams()

### 説明文

現在のURLパラメータをオブジェクトとして取得します。

### 構文

getURLParams()

### 戻り値

オブジェクト：URLパラメータ

### 例

“`javascript
//例：http://p5js.org?year=2014&month=May&day=15

function setup(){
let params = getURLParams();
text(params.day, 10, 20); // “15”
text(params.month, 10, 40); // “May”
text(params.year, 10, 60); // “2014”
}
“`

### 著作権

p5.js was created by Lauren Mc

P5.js 日本語リファレンス(getURLPath)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の getURLPath関数を説明します。

## getURLPath()

### 説明文

現在のURLパスを配列として取得します。

### 構文

getURLPath()

### 戻り値

– String[]：パスコンポーネント

### 例1

“`javascript
function setup() {
let urlPath = getURLPath() ;
for(let i = 0; i

P5.js 日本語リファレンス(getURL)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の getURL関数を説明します。

## getURL()

### 説明文

現在のURLを取得します。

### 構文

getURL()

### 戻り値

String：URL

### 例

“`javascript
let URL;
let x = 100;

function setup() {
fill(0);
noStroke() ;
url = getURL() ;
}

function draw() {
background(200);
text(url, x, height / 2);
x– ;
}
“`

### 実行結果
https://editor.p5js.org/bit0101/sketches/lr_vJRg0j

### 著作権

p5.js was created by Lauren McCarthy and is developed

P5.js 日本語リファレンス(displayDensity)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の displayDensity関数を説明します。

## displayDensity()

### 説明文

スケッチが実行されている現在のディスプレイのピクセル密度を返します。

### 構文

displayDensity()

### 戻り値

Number：ディスプレイの現在のピクセル密度

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

### ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。

P5.js 日本語リファレンス(pixelDensity)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の pixelDensity関数を説明します。

## pixelDensity()

### 説明文

高ピクセル密度ディスプレイのピクセルスケーリングを設定します。デフォルトでは、ピクセル密度はディスプレイ密度と一致するように設定されています。これをオフにするには pixelDensity(1) を呼び出します。引数なしで pixelDensity() を呼び出すと、スケッチの現在のピクセル密度が返されます。

### 構文

pixelDensity(val)

pixelDensity()

### パラメタ

– val
Number：ピクセルスケーリング値

### 例

“`javascript
function setup() {
pixelDensity(1);
createCanvas(100, 100);
background(200);
ellipse(width / 2,

P5.js 日本語リファレンス(fullscreen)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の fullscreen関数を説明します。

## fullscreen()

### 説明文

引数を指定した場合、引数の値に基づいてスケッチを全画面表示にするかどうかを設定します。引数が指定されていない場合、現在のフルスクリーン状態を返します。ブラウザの制限により、これはユーザー入力時にのみ呼び出すことができることに注意してください。たとえば、以下の例のようにマウスを押したときだけです。

### 構文

fullscreen([val])

### パラメタ

– val
Boolean：スケッチを全画面モードにするかどうか(オプション)

### 戻り値

– Boolean：現在の全画面の状態

### 例

“`javascript
//ボックスをクリックすると, 全画面表示のオンとオフが切り替わります。
function setup() {
background(200);
}

function

P5.js 日本語リファレンス(height)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の height関数を説明します。

## height

### 説明文

描画キャンバスの高さを格納するシステム変数。 この値は createCanvas() の2番目のパラメータによって設定されます。 たとえば関数呼び出し createCanvas(320, 240) は height 変数を値240に設定します。createCanvas() がプログラムで使用されていない場合、高さの値はデフォルトで100になります。

### 構文

height

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by J

P5.js 日本語リファレンス(width)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の width関数を説明します。

## width

### 説明文

描画キャンバスの幅を格納するシステム変数。 この値は、createCanvas() の最初のパラメータによって設定されます。 たとえば createCanvas(320, 240) は、width変数を値320に設定します。createCanvas() がプログラムで使用されていない場合, widthの値はデフォルトで100になります。

### 構文

width

### 著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel John