銀の弾丸

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

JavaScript

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の重なり順序を操作する「svg-z-order」

JavaScriptからSVG要素の重なり順(Z-Order)を操作するモジュールのご紹介。 SVG要素には、HTMLに使えるz-indexスタイルが効きません。 なので、重なり順を変更するには、単純に要素を並べ替える必要があります。 コードからDOM要素を並べ替えるにはNodeク…

D3.js v4 でドラッグするには d3.drag() で behavior を取得する

D3.jsでドラッグイベントを処理する必要があったのですよ。 ほぼ初めてのD3ですからグーグル先生にいろいろ聞いて、「ほうほうなるほど」と学習していたのですけど、 ドラッグに関して各所で示されていたサンプル通りにやってみたら、まさかのエラー。 結局…

JavaScriptのラムダ式(アロー関数)は丸括弧で括らなければ即時実行できませんのね

Link: Flickr PAGE - CC BY 2.0 Node.jsで以下のようにラムダ式を即時実行していたのですが、ブラウザでは構文エラーとなって動かないんです。 (()=>{ console.log("これ動きません"); }()); まさかコレが動かないとか思いもよらず。 どう見直しても問題があ…

JavaScriptでマイクロ秒単位の定期処理を実行する(npm fractional-timer)

JavaScriptで1ミリ秒より短いインターバルタイマー処理を提供するモジュール fractional-timer のご紹介。 Link: Flickr PAGE - CC BY-SA 2.0 実際のところ、精度はよくありませんので、クリティカルな用途には向きません。 単純な処理をなるべく高速にタイ…

npm 「hash-arg」 ― コマンドラインパラメータに名前でアクセス

コマンドラインで指定されたパラメータに名前でアクセスする為の、シンプルなNode.jsのモジュールをnpmで公開したので御紹介。

Node.jsで正常終了:process.exit(0) は呼ばないほうが良いですね

「ダメ!絶対!」ということでも無いですが、Node.jsで、正常終了するとき、`process.exit(0)`と明示的に呼び出さないほうが良いですねっていう小ネタです。いや、引数0は省略できるとか、そういうことではなくて。

JavaScriptのWebWorkerでスレッド間のリモートプロシジャコール(RPC)を実装する

ブラウザのJavaScriptでWebアプリをマルチスレッド化できる Web Workers API の基本と、Worker側を使ってスレッド間でのリモートプロシジャコールを実装して、ワーカースレッドのメソッドを呼び出して戻り値をコールバック関数で受け取れるようにする方法を…

テキストを日本語的に傍点(圏点)で強調するJavascript

ふと思いついてテキストに傍点をつけるためのスクリプトを作りましたので、ご紹介。(ソースはGitHubに置いてます) 「傍点」は「圏点」ともいうらしいのですが初耳でした。この文書では以降「傍点」で通します。 「傍点によるテキストの強調」は、CSS3のtex…

jQueryプラグインを正しく簡単に作る方法

キチンとしたjQueryプラグインを簡単に作れるようになる関数のご紹介。 javascriptのクラスを作れる人なら、「jQueryプラグインはjQuery.fnに~」とか、「メソッドチェインをするために~」なんてことを詳しく知らなくても大丈夫。

jQuery UIで普通のテキスト入力を少し立派に見せるjQueryプラグイン

フォームのテキスト入力項目の見た目を、jQuery UI の spinner(スピンボタン付き数値入力ウィジェット)と同じようにする、jQueryの簡単なプラグインです。spinnerのスタイル(CSS)を利用するので、jQuery UI も必要です。 spinnerは結構高さがあって、ボタン…

日付入力スピンボタンとdatepickerとの併用

日付入力用のspinnerです。例によってjQueryとjQuery UIが必要です。 datespinner: 以下のように、datepickerと同時に使えます。 datepickerだけではテキストボックスにテーマのスタイルが適用されないようですが、spinnerを使えばOKです。 datespinner(with…

時刻入力スピンボタン

時刻入力用のspinnerです。時分のみ入力します。秒も入力したい場合は追加コードが必要です。 jQuery UI の spinnerをカスタマイズしたものですので、jQueryとjQuery UIが必要です。 timespinner: ウィジェットの値としてはシーケンシャルな分の値になってる…

jQueryでフォーム部品のcheckedやselectedはpropで操作する

よく勘違いして慌てているので書いておきます。 フォーム部品のcheckedやselectedといったbool型のプロパティの操作は、propを使用する。以前はattrを使っていた記憶がありますが、それではちゃんと動いてくれないです。 いちご みかん りんご いちご みかん…

入力日付をチェックする関数

文字列として入力された日付が正しいかどうかをjavascriptで判定する関数です。うるう年などの関係で、ややこしそうに思いますが、javascriptなら意外にあっさりしています。

フォームのリセット時にjQuery UIのselectmenuの表示もちゃんと更新する

jQuery UI のselectmenu は、フォームがリセットされても表示が元に戻らないみたいですね。 以下のようにして解決。 $("input[type='reset']").button() .click(function() { window.setTimeout(function() { $("[name='sel']") .selectmenu('refresh'); }, …

はてなブログでjQueryを普通に使う

jQueryやっぱり便利ですね。単純な処理では不要論もありますけど、お手軽さがいい。 はてなブログでも、jQueryが標準で読み込まれていますが、残念ながらHEADやコンテンツ内で、そのままでは利用できないです。 ページの体感的な描画速度の向上のため、jQuer…