銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

JavaScript

JavaScriptで構文解析:npm Lex-BNF で任意の言語を定義する

BNF的に任意の構文を定義して、その文法に従ったテキストの解析と評価を支援する npm lex-bnf

意外な結果:MapとObjectの速度を比較

JavaScriptでKey-Valueマップを扱うために object と Map クラスのどちらを使えばよいのか検証してみました。

JavaScriptのヤヤコシイとこ

JavaScriptは大好きですがヤヤコシイところもたくさんあります。そんなところを何点か書いてます。

全部約束 Promise.all - 非同期処理を効率よく並列実行するために

互いに独立した複数の非同期処理は、 Promise.all で待ちましょうってことを書いています。

JavaScriptのArray.fillで気をつける事

JavaScriptの配列の、全ての要素を同じ値で初期化する Array.fill で、ObjectやArrayなどで初期化する場合、全部が同じ値を参照していることになるので気をつけましょうと書いています。

npm scripts で eslint-watch を実行するには npx が必要だった

ナゼかはわからん

JavaScriptで文字列のバイト数を得るにはどーする?

ブラウザのJavaScriptとNode.jsで文字列のバイト長を知る方法です。文字数ではありません。両環境で、やり方が違いますけど、統一コードについても書いています。

祝!MZ-700シリーズ発売37周年っ!に合わせてMZ-700フルJavaScriptエミュレータをWebWorkerでレンダリング!

SHARP MZ-700シリーズ発売から37年目の祝日に、思い出話や拙作Webのエミュレータについてダラダラ書きます。

mochaとBabelでESモジュールをテストする

npm内のESモジュールをmochaでテストしようとしたのですが、上手くいかない。 Babelが必要なんですね。mochaのテストスクリプトをbabelで変換しないと import / export が構文エラーになってしまうのです。 事前に変換しなくても、@babel/register を使ってm…

npmパッケージのダウンロード数をアカウント別に一括取得

npmのユーザーアカウントを指定して、そのアカウントが公開している全パッケージの直近ダウンロード数を一括取得するnpmを公開しました。

JavaScriptで可変長引数を扱うモダンな書き方

「JavaScript 可変長引数」でググると「arguments」のことばっかり出てきますけど「今やJavaScriptの可変長引数は arguments を使わなくてもスッキリかけますからねっ!」ってことを書いてる記事です。

WebWorkerを手軽に扱うTransWorker v1.1でSharedWorkerが利用可能になりました!

この度、JavaScriptでWebWorkerを手軽に扱う [npmモジュール TransWorker](https://www.npmjs.com/package/transworker) を v1.1.0 に更新しました。 従来は DedicatedWorker にしか対応していなかったため、ワーカースレッドを生成したメインスレッドからし…

非同期処理の直列化:今やArray.reduceを使わなくてもできますよね

photo credit: hans-johnson 700-7000 Series_1 via photopin (license) 非同期処理の直列化とは「複数の非同期処理を、順番に実行する処理」のことです。非同期処理の順次実行や逐次実行とも呼ばれます。 処理速度は、並列処理よりも遅いのですが、処理順が…

mocha を使った npm のユニットテストをブラウザで動かす設定

mochaとchaiを使ったnpmのユニットテストをブラウザで動かすための設定をご紹介。試行錯誤を繰り返して自分なりのテンプレートみたいなのにたどり着いた感じかな。

あなたが正しくウェブページのカーソル形状を変更するには

結構みんなが知ってるつもり?ウェブページのマウスカーソルの形状を変更する方法を書いています。小ネタといえば小ネタです。

ウェブアプリからGoogle Driveのファイルを扱う 'gdrive-fs'

photo credit: suzyhazelwood DSC04299-02 via photopin (license) ウェブアプリから Google Drive のファイルを操作するモジュール(npm)を公開しましたので、ご紹介。 これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほんposted with amazlet a…

ParcelのBabelでAsync関数を変換せずに使う設定

ParselでAsync関数が普通の関数に変換されてしまって困っていましたが、回避する方法が分かりました

設定なしのバンドラー「Parcel」がWeb開発には最強の予感!だがしかし(期待を込めて)・・・

昨年末あたりから、よく聞くようになった設定なしのバンドラー&タスクランナー「Parcel」を使いはじめました。簡単・便利ですが不安定な点もありましたので紹介がてら対処法なども含めて書いておりますー

今後JavaScriptでArray.forEachはほとんど使わなくなるのかも

React Native+Expoではじめるスマホアプリ開発 ~JavaScriptによるアプリ構築の実際~posted with amazlet at 18.08.31松澤 太郎 マイナビ出版 (2018-08-29)売り上げランキング: 6,280Amazon.co.jpで詳細を見る いままでJavaScriptの繰り返しは Array#forEach…

WebアプリからGoogleドライブにファイルを保存する方法

前回記事の読み込みに引き続いて、WEBアプリからGoogleドライブにファイルを保存するサンプルコードを掲載します。 公式ガイドにWEBブラウザのJavaScript向けサンプルコードは有りませんでした。 しかし前回懲りて学習しました。 XHRで直接APIを叩けばOK。 …

WebアプリでGoogleドライブのファイルを読み込む方法

「ブラウザで動作するWebアプリから、ユーザーのGoogleドライブに保存されているファイルを読み込む方法」を書いてます。

async / await の基本事項 ― やっぱりPromiseは無視できない

JavaScriptのES2017で使えるようになった async / await を理解するとき勘違いしそうな所をまとめてみました。結局Promiseを理解していないとコードを追いかけられないですよねという話でもあります。

mouseenterとmouseoverの違いなどDOMイベントの発生状況を可視化して調べてみたよ

HTML5のDOMイベントに、mouseenter と mouseoverという、よく似たマウスイベントがあります。ここには、その違いについて調べたことを書いておきます。 どちらもマウスポインターが要素の上に入ってきた時に発生するイベントで、それぞれに対応する「マウス…

ES6に対応した「grunt-contrib-uglify-es」を使用する

grunt-contrib-uglifyのES6対応版がgrunt-contrib-uglify-esという名で別途公開されてましたというお話。 速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズposted with amazlet at 18.03.22WINGSプロジェクト (2015-08-28)売り上げ…

DynamoDBをSQLで操作するNodeモジュール

Amazon DynamoDBをSQL的な記述言語(SQL-ish)で操作できるNodeモジュールのご紹介。最新版は v0.8.8 。SQLに小数点を含む数値を指定した時、正しく解釈できなかったバグを修正。

C++でJsonを扱うクラスライブラリ jsonexpr

8月から支援に入った画像処理(リアルタイム・オブジェクト・トラッキング)プロジェクトの検証システムで、C++の本体からJSONを吐く必要がありまして、急いでやっつけたのですが、「そういや昔、C++でJSON扱うクラスライブラリ作ったね・・・」と思い出しま…

意外に悩ましい整数部分の四捨五入

photo credit: danmachold calculator via photopin (license) JavaScriptで整数部分を四捨五入する場合の注意点。桁落ちに気を付けましょうってお話です。 JavaScriptで、小数を整数に四捨五入するにはMath.roundを使いますね。 でもこれ、残念なことに桁数…

「プロミス地獄」に落ちないための基本事項

「コールバック地獄」からボクらを救ってくれた「Promise」ですが、ふと気が付けば、ちょっと種類の違う別の地獄に落ちてる場合がありますよと。 「なんだPromiseお前もかっ!」的な(笑) 「コールバック地獄」は見た目にネストが深くて「ダメだコリャ感」…

WHATWG Fullscreen API を仕様通りに使えるモジュール「fullscrn」

WEBページ内の特定HTML要素を画面全体に広げられるフルスクリーンAPIのラッパーモジュールをnpmで公開しました。 WHATWGが策定しているフルスクリーンAPIは、現状(2017年5月現在)、多くのブラウザで、プリフィックス付きの実装(mozとかwebkitというアレで…

SVGの重なり順序をJavaScriptで制御する「svg-z-order」

JavaScriptからSVG要素の重なり順(Z-Order)を制御する方法をご紹介。意外に簡単にできますよ。