Panda Noir

JavaScript の限界を究めるブログでした。最近は幅広めに書いてます。

JavaScript

NodeでGraphQLサーバーにアクセスしてみる

Nodeだとカンタンにアクセスできる $ npm i --save superagent をしたらあとは以下でアクセスできます。 const request = require('superagent'); request .post('http://localhost:8080') .send(` query { user(name: "香風智乃") { name, age } }`) .end((…

今日も今日とて「生誕○日記念祭」やろうぞい!

あなたは生まれてから何日が経ちましたか?20歳なら約7,300日、30歳なら約10,000日、40歳なら約14,600日だそうです。 ここまで数字が大きくなってくると、N進法(N=2〜32)にしたときに「何かそれっぽい数字」になってる可能性が高いとは思いませんか?つまり…

localStorageを意識せずに使えるようなライブラリを作りました。

localStorageをgetItemしたりsetItemしたりとかめんどくさいですよね?そこで、はじめに設定したら、以降はlocalStorageを全く意識する必要がなくなるライブラリを作りました。 (イラスト: 複数のPCサーバーのイラスト | illalet(イラレット))

複数イベントを組み合わせたオリジナルイベントをカンタンにつくる方法

たとえば「これらのラジオボタンが全てクリックされたあとに発火する」みたいなイベント、普通に作ろうとするとフラグを管理するなどしなければなりません。しかし、これをカンタンにする方法を見つけたのでご紹介します。

ドラッグ&ドロップでファイル選択できるinput要素

ドラッグ&ドロップで選択できるコンポーネントはよく使いたくなりますよね。今回はそんなコンポーネントをVueで作ってみました。

asyncキーワードはなぜ生まれたのか?

みなさんasync/await使っていますか?とても便利な機能ですよね。しかし、ふとこんな疑問をいだきませんか?「これ、なんでわざわざasync関数を導入したんだろう」と。 そうです。awaitさえ実装していれば、機能的に既存の関数で十分に対応ができたはずなの…

アキラ100%が安心しておぼんを外せるサービスをつくった

夏休みが終わってしまい悲しみを隠しきれないクロパンダです。 さて、アキラ100%さんを皆さんはご存知ですか?おぼんで恥部を隠して、見えるか見えないか絶妙な動かし方をして視聴者をハラハラさせる裸芸を披露する芸人さんです。 そんな彼はおぼんを落とし…

アルゴリズム勉強会 第三回 A*探索

久しぶりにこのシリーズ書きました。シリーズ一覧はこちらから。 A*アルゴリズムとは? 「今までにかかったコスト + これから先の推定されるコスト」が最小になるノードを選びながら探索していくアルゴリズムです。 最短経路探索を考えると分かりやすいです…

同じ引数のとき新しいインスタンスを生成しない省エネなClassを作る

タイトルはつまり new Hoge(1, 2, 3) === new Hoge(1, 2, 3)を実現するということです。 実装 まず実装をお見せします。 const pool = []; class Hoge { constructor(x, y, z) { if (!pool[x]) pool[x] = []; if (!pool[x][y]) pool[x][y] = []; if (pool[x]…

時代遅れのJavaScript記事を判別する4つのポイント

ES2015が勧告されてからすでに3年近く経っています。IEもほぼ駆逐されモダンブラウザたちが跋扈する時代になったにもかかわらずES2015を使ってない記事はもはや時代遅れです。 というかつい先日ES2018が勧告されたわけですから、ES2017あたりまで含めるべき……

プログラミングパズル作った

HTTPの知識やHTML、JavaScriptの知識を使って解くパズルを作ってみました。昔、「超究極迷宮」をプレイしたことがある人はそれっぽいものと思ってください。

\sは本当に空白文字を網羅できているのか?

世の中にはやたらと空白文字があり、なんと30文字以上もあります! 「/\s/はこんなにたくさんある空白文字の全てに対応しているのか?」という不安に駆られたので検証してみました。

void演算子の活用法を考えてみた

考えてはみましたが、実際に使うと多分怒られます。

これでもう怖くない!npm versionで失敗しないための3つのポイント

npm versionコマンドの挙動がよくわからない tagがズレた CHANGELOG.mdをいつコミットすればいいのか dist/の生成タイミング などなど、npmパッケージのアップデートはややこしすぎます。毎回不安になるのでポイントをまとめました。

UnitaryJS 0.1.2公開しました

今回のアップデートは大きな変更点が2つあります。 Point.fromPolar()の追加 GroupがfillStyleなど描画用のプロパティを持てるようになった

yarn-or-npmが有能すぎた

これこそ全人類が求めていた答えだ(確信)

標準出力に色をつけてカラフルにログ表示する

こんなカッコイイことができるようになれます。

式変形をアニメーションにするサービス作った

こんな感じで式変形の様子がアニメーションになります。結構革新的ではないですか??個人的には大満足の出来です。 diffがうまく取れず、よくわからない変形になったり、iPhoneだと表示が崩れたりしますがご愛嬌ということで。

npmリポジトリの雛形を生成するシェルスクリプト書いた

以前npmパッケージの雛形を作ったことはありました。しかし、これをいちいち複製するのは結構面倒です。そこでシェルスクリプトを使って雛形からリポジトリを生成してみました。

Jestいいぞ

今更コードのカバレッジを気にし始めたクロパンダです(プログラミング歴7年目())。今までは結構ざっくりとテストを書いてきていました。というのも、コードカバレッジという概念がどうも七面倒でやる気が起きなかったのです。 しかし、JavaScriptテストツー…

文字列からミリ秒を計算するライブラリtime-f作った

setIntervalの秒数指定の場面など、ミリ秒で指定する場面は多いです。これをもう少しリーダブルにかけると嬉しいですよね?そこで今回は「time-f」というライブラリを作りました。

イミュータブルを簡単に実現するライブラリ「Immer」

なかなかクールなライブラリだったので紹介します。

enumをそこそこ綺麗に書く

今日で本ブログは6周年となりました。特に何かするわけではありませんが。 本題に入ります。enumをJavaScriptでそこそこ綺麗に書くテクニックの紹介です。 const [SUN, MON, TUE, WED, THU, FRI, SAT] = Array(7).keys(); これだけのTipです。Array(7)をArra…

log = console.log;はなぜダメなのか

本記事ではNodeJSのコードを検証しています。ChromeやSafariなどブラウザによっては実装が異なる可能性があります。

Closure Compilerが遅すぎるので早くする

google-closure-compilerここにガッツリ書いてありましたが、今まで気づいていませんでした。だいたい今まで8秒かかっていたところが2秒に縮まりました。4倍早くなった計算です。

gulpでJSの圧縮+モジュールバンドルをする

GulpっぽくRollupする記事が日本語で見つからなかったので書きました。

ES2015のクラス構文は今までのクラス構文の糖衣構文ではない

もう2018年になったのに今更ES2015の話かよという感じですね・・・ES2018といえばAsync Iterator楽しみですね。 仕様書を読んだわけではありませんので厳密なことは言えません。ご容赦ください。

Node.jsのFile操作まとめ

ファイル読み込み処理を書くたびにググっているので、まとめてみました。書き込みについては、読み込みとほぼ同じなので割愛します。

購読すべきJavaScriptブログまとめ

日頃から情報をかき集めていきたい人間なので、ためになりそうなブログを探してみました。今回、調査対象としたのは次のサービスです。 はてなブログ FC2ブログ アメーバブログ ライブドアブログ JUGEMブログ ソネットブログ ヤフーブログ 調査手法としては…

祝WebComponentsサポート!実際にコンポーネントを作ってみた

いよいよWebComponentsが主要ブラウザでサポートされたそうなので、ライブラリ抜きで実装してみました。