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

JavaScript: [?, ?, ?, ?, ?, ?]のような配列を[[?, ?, ? ], [?, ?, ?]]に仕分けする

JavaScriptの配列を要素の内容に応じて、2つのグループに仕分け(partitioning)する方法です。

下の例では、要素が犬か猫かによって仕分けしています:

“`javascript:partition.js
const pets = [‘?’, ‘?’, ‘?’, ‘?’, ‘?’, ‘?’]

const [cats, dogs] = pets.reduce(
([cats, dogs], pet) =>
pet === ‘?’ ? [[…cats, pet], dogs] : [cats, […dogs, pet]],
[[], []]
)

console.log(cats, dogs)
//=> [ ‘?’, ‘?’, ‘?’ ] [ ‘?’, ‘?’, ‘?’ ]
“`

ちなみにTypeScriptでは`reduce`の型引数に`[string[], string[]]`を指定します:

“`typescript:partition.ts
const pets = [‘?’, ‘?’, ‘?’, ‘?’, ‘?’, ‘?’]

【じゃんけん（っぽい）ゲームで入門】JScript

# 1. はじめに

自作した **じゃんけん（っぽい）ゲーム** を題材にして **JScript** の文法や仕様を確認していきます。

## 1-1. ゲームの仕様

ルールは一般的なじゃんけんのルールに準じます。ただし、プレイヤーとCOMには5点の体力が用意されており、じゃんけんに勝利すると相手に1点のダメージを与えることができます。先に相手の体力を0点以下に減らしたほうの勝利となります。引き分けは発生せず、プレイヤーかCOMのどちらかが勝利するまで処理を続行します。

処理内容はコンソールに表示し、コンソールに表示された内容はログファイルにも吐き出すようにします。

## 1-2. JScriptとは？

JScriptはJavaScriptの方言の一種です。1999年12月に発表されたECMAScript3（ES3）に準拠しており、さらにMicrosoftによって拡張が行われています。ほぼ、JavaScript――もといECMAScriptですが微妙に異なるところがありますし、ES6から追加された多くの機能に対応していなかったりもします（なにせES3がベース

【jquery】tablesorter機能でよく使うものメモ

#はじめに

業務で必要だったのでtablesorterを使ったのだが、
欲しい情報が分散していて（何なら英語サイトにしかなかったりして）わかりにくかったので、まとめ。

#基本的な使い方

ダウンロードしたjqueryライブラリをscriptに読み込み、
function()でcallするだけ。かんたん。

tableにidを付けるのと、ヘッダを

に入れるのを忘れずに。
tbodyの中身だけがソート対象になる。
tfootはあってもなくてもいいけど、あってもソート対象外。必ず末尾に入るから合計行とかに便利。

“`

【Node.js v11】ディレクトリ内のファイルパスを再帰的に取得するワンライナー

ディレクトリ内全てのファイル一覧を取得するというありふれた処理ですがたまたまワンライナーを思いついたのでメモ代わりに紹介します
同期メソッドなので使いどころには注意してください

## JavaScript

“`javascript
const fs = require(‘fs’)

const listFiles = (dir) =>
fs.readdirSync(dir, { withFileTypes: true }).flatMap(dirent =>
dirent.isFile() ? [`${dir}/${dirent.name}`] : listFiles(`${dir}/${dirent.name}`)
)

console.log(listFiles(‘hoge/fuga’))
“`

fs.readdirに `withFileTypes: true` オプションが追加されてたんですね、最近知りました
https://nodejs.org/api/fs.html#fs_fs_readdirsync_path_options

`${dir}/${

元記事を表示

window.print横プリント

window.print()を使用してWeb画面をプリントする際、ipadは横プリントをサポートしない問題がある。

以下のCSSを使用して、この問題を解決できる。

“`css
@media print {
body {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
overflow-x: hidden;
position: absolute;
top: 100%;
left: 0px;
}
}
“`

元記事を表示

phpとjsの配列の型判定の違い

## phpの配列の判定
gettypeを使えば簡単に判定できる

“`php5
$array1 = [1,2,3];
echo gettype($array1); // array
“`

# jsの配列の判定

間違い. typeofを使うと判定はできるが、配列がオブジェクトになってしまう

“`js
let array2 = [1,2,3];
console.log(typeof this.array2); // Object
“`
正解. instanceofを使って、正誤を判定する

“`js

let array3 = [1,2,3];
console.log(this.array3 instanceof Array); // true
“`
何か間違いやアドバイスがあれば教えてもらえると幸いです。

元記事を表示

Deno と Node.js 共通ソースコードで開発する方法

# 概要

それなりにわかる人向けの記事なので各種説明を細かくは書きません。わからない用語は調べてください。

Deno がリリースされていますね。モジュールシステムが Node.js と異なっているためにコード互換性がなくて問題になっている方もおられると思います。

そういう方向けの記事です。

Node.js は CommonJS が標準です。
Deno は ESModules のみ対応です。

CommonJS は「読み込み：require」「書き込み：module.exports」
ESModules は「読み込み：import」「書き込み：exports default等」という構文になります。

Node.js でも package.json に type: module とすると ESModules に対応しますが、そうするとプロジェクト内コードで、Babel や Webpack などの Node.js のエコシステム的なものが(たぶん)使えないので、今回は Node.js は ESModules に対応しません。拡張子 .mjs にして node –experimen

元記事を表示

2020/06/22 Nuxt.jp勉強

https://qiita.com/otagaisama-1/items/50e240bee686dd823934

https://qiita.com/HeRo/items/56308a38388a05bdd550

https://www.atmarkit.co.jp/ait/articles/1809/13/news031.html

■コマンドプロンプトでファイル作成
https://win.just4fun.biz/?%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%B5%E3%82%A4%E3%82%BA0%E3%81%AE%E7%A9%BA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95

https://www.k-tanaka.net/cmd/type.php

元記事を表示

Promiseは何時呼ばれるのか？

Promiseは何時呼ばれるのか？
使う分には今まであまり意識してこなかったのですが、async/awaitを呼ぶことで処理がブロッキングされるのではないかというのを懸念していたのと、そもそもどのタイミングでPromiseのcallbackがされるのか気になったので今更ですが調べてみました。
Promiseが呼ばれる仕組みについては先にEventLoopとmicrotaskについて知る必要があります。

先に結論から書くと以下の感じです。

– PromiseはEventLoop内のmicrotaskキューでFIFO実行される。
– Timer系の処理(setImmediateやsetTimeout）はmicrotaskが全て実行された後に実行される。（つまり、`setTimeout(fn, 0)`はmicrotaskを全て実行した後にfnを実行するという意味）
– async/awaitはPromiseの箇所でsuspendしているに過ぎない（イベントループをブロッキングするかどうかはPromise内部の処理に依存する）、ジェネレータ文法（yield）やコルーチンの概念と同じ。
–

元記事を表示

React hooks 【シュチュエーション別 hooks利用方法と使い方まとめ】

モダンReactの代表になっているhooksですが、使いこなせるととても便利です。
今まで、クラスコンポーネントや
SFC(Stateless Functional Component)として高階コンポーネントやレンダープロップス、Recomposeなどを使っていた方は使い勝手の良さに驚くでしょう。

また、これからReactを学習する人に向けてもhooksを使いこなすことはとても価値があり、
FC(Function Component)+hooksから入門するべきだと思います。
実際の現場でclassやSFCはレガシーであり、FC+hooksへの移行が進んでいるからです。

復習がてら、どんなhooksがあるのか、どんな時にどう使うのかをまとめました。

##前提として
**React version 16.8.0 以降**
hooksはFCでないと使用できない

“`Hooks.jsx
import React, { useState, useEffect, useContext } from ‘react’

const hooks = () => {
//関数コンポーネ

元記事を表示

【JavaScript】値がundefined/nullの時だけtrue判定にする

# 値が`undefined`と`null`の時だけ`true`として判定したい（`0`は`false`判定にしたい）
タイトルの通り、こんな場合どうするか。

[[JavaScript] null とか undefined とか 0 とか 空文字(”) とか false とかの判定について](https://qiita.com/phi/items/723aa59851b0716a87e3)に全て書いてあるが、このトピックの部分だけまとめてみた。

## `if (!value)`
まず初めにこれを使っていたのだが、JSでは**`0`は`false`判定なので普通に間違い**。

勘違いして使っていたらバグの元になってしまう。

## `if (value === undefined || value === null)`
これならOKだが、どこか野暮ったい。

この書き方が最も明示的で誰にもわかりやすいと思うが、もっとシンプルに書きたい場合もあるだろう。

## `if (!value && value !== 0)`
2番目の書き方よりは短くなったが、少し分かりづらくなった気が

元記事を表示

WebでMIDIを記録して保存できるものをつくっておきました

# 概要
WebでMIDI入力を受け取って記録し、SMF(Standard MIDI File)の書き出しまで行えるものをつくりました。

動作には以下の条件が必要です。
・Web MIDI API対応のブラウザであること([Can I use](https://caniuse.com/#feat=midi))
・MIDI入力ができるデバイス等があること

## デモ
https://cagpie.net/web-midi-recording/
UIの作りがだいぶアレですが、

– 1) `Web MIDI API start` を押すとMIDIデバイスへアクセスを開始し、
– この状態から、繋いだMIDIデバイスから入力を送ると音が出ます(音が出る部分はソースコード的には `Sample` にあたります)
– 2) `recording start` で記録を開始し、 `recording stop` で終了してSMFの書き出しが走ります。
– 3) `play` で書き出したSMFの再生、また `download` からSMFのダウンロードができます。
– playでの再生

元記事を表示

iOS 13 以降ではウェブ上でセンサー値を扱う際にユーザからの許可が必要

## はじめに
iOS 12 までは、Safari の設定からセンサー値を利用していいか権限を与えていました。
iOS 13 からは仕様が変わり、サイトごとにユーザーからセンサー値の権限を JavaScript で与える必要があります。
**※ 永続化は不可能、セッション（？）ごとに許可を取る必要がある**

ご覧の通り項目がなくなっていますね…（iOS 13.3.1 にて）

“`js
DeviceMotionEvent.requestPermission();
DeviceOrientationEvent.requestPermission();
“`

このコードを実行するとセンサー値の権限を制御できるウィンドウが出てくるのですが
どうやらタップやクリックなどの意図的なユーザの行動

元記事を表示

Promiseとは・非同期処理時にPromiseを使うメリットとは

##Promiseとは
非同期処理のコードを扱いやすくするもの。
Promiseを用いると、非同期処理のコールバックの扱いがより簡単になる。

##Promiseを使った実装・使わない実装

・Promiseを使わずに実装

“`javascript
//doWorkCallback関数の定義
const doWorkCallback = (callback) => {

//非同期処理。2秒後に[1,2,3]を返す
setTimeOut(() => {
callback(undefined, [1,2,3])
}, 2000)
}

//doWork関数の実行
//第一引数：エラー時の返り値、第二引数：処理成功時の返り値
doWorkCallback((error, result) => {

if(error){
return console.log(error)
}
console.log(result)
})

“`
↓
２秒後に[1,2,3]が返る
または、2秒後にerrorが返る

・Promiseを使って実装

“`javascript
//doWorkPromis

元記事を表示

プログラミング TypeScript：第 2 章 TypeScript 全体像

## はじめに
TypeScript の学習のために「プログラミング TypeScript ―スケールする JavaScript アプリケーション開発」を購入しましたので、自身の学習のためにも本プログで数回に渡って、重要な部分に絞って紹介していければと思います。

[プログラミングTypeScript](https://www.oreilly.co.jp/books/9784873119045/)

学習用にサンプルプログラミングも Github で紹介されていますので、合わせて紹介していきます。
[『プログラミングTypeScript』のリポジトリ](https://github.com/oreilly-japan/programming-typescript-ja)

本記事についての内容は以下を参照してください。
[プログラミング TypeScript：第 2 章 TypeScript 全体像](https://freedom-tech.hatenablog.com/entry/2020/06/21/212557)

元記事を表示

TypeScript をはじめてみた！

## はじめに
[ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) を使用した簡単な Web マッピングアプリの開発に TypeScript を使用してみました。
ArcGIS API for JavaScript は、Google Map API と同じような Web マッピングアプリを開発するための API です。ArcGIS API for JavaScript は、Google Map とは異なり 空間検索などの GIS の機能やデータのビジュアライゼーションも豊富に対応しています。

今回は、ArcGIS API for JavaScript で TypeScript を使用するための準備として、開発環境の構築や簡単なサンプルアプリを作成までの手順を紹介したいと思います。また、TypeScript を使用するメリットについても紹介します。

本記事についての内容は以下を参照してください。
[TypeScript をはじめてみた！](https://freedom-tech.hat

元記事を表示

【Vue】filtersでthisが使えない

# Vueの`filters`で`this`が使えなかった話

Vue.jsのfiltersで↓のようなコードを書いて実行しようとしたらエラーがでた。

最初はMixinとして使っていたためMixinでは`filters`は使えないのかと思い、普通にコンポーネント内の`filters`プロパティ内で使っても同じエラーがでたので調べることにした。

ちなみに`filters`というのはVue固有のプロパティの一つで、ここに定義した関数をムスタッシュ構文内で例えば`{{ | oneFilter }}`のようにして使うと``を`oneFilter`で加工することができる。

“`vue