Panda Noir

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

graphql-go入門

graphql-goの入門記事が全く出てこなくて苦しみ悶えながらようやく理解できたので、ここに戦いの記録を残しておこうと思います。 今回の環境 今回はMongoDB+GraphQLという構成にしました。 成果物をここにまとめましたので、参照ください。 github.com Graph…

Nodeで外部のwebサーバーを建ててkillするまで

Goで書いたwebサーバーを、Nodeでテストをしています(地獄)。テストする上で、Nodeのchild_processモジュールが孫プロセスをうまくkillできずに躓きました。そこで、孫プロセスをゴリ押しでkillする方法を調べて実装してみました。 孫プロセスのPIDを取得す…

ネットワークでよく出てくる「コネクション」ってなんなんだろう?

ネットワークにおいて「コネクション」という単語はよく耳にします。 「WebSocketはコネクションを確立後、ずっとそのコネクションを使う」 「ロングポーリングは返すたびにクライアントがコネクションを確立し直す」 「TCPでは3ウェイハンドシェイクでコネ…

どんな深さの配列も1次元配列にする

ES2019でArray#flatMapが導入されたので、それを使ってどんな深さの配列でも1次元にする方法を紹介します。 flatMapの仕様 flatMapはmap()してからflat()するメソッドです。 [1,2,3].map(n => [n,-n]); // [[1,-1],[2,-2],[3,-3]] [[1,-1],[2,-2],[3,-3]].fl…

HTTP/1.1とかHTTP/2とかQUICとかにGraphQLとか、Webサーバー関連の話題についてまとめてみた。

最近ネットワーク周りについて興味があって調べているので、その結果をまとめました。 主な話題 HTTPの最近の流れ なぜHTTP/2は高速なのか? QUICとはなにか?何を解消するのか? WebRTCとは?WebSocketとは? RESTとGraphQL、gRPC Edgeサーバー HTTP関連 HTTPの…

リーダブルコードを読んだらコードの質が格段に上がった

リーダブルコードを読む前に書いたコードを見たら、ゴミすぎて全部書き直しました。 今回はこちらのコードを書き直しました。 ひらがなからローマ字への変換可能パターンを列挙するプログラムをつくった - Panda Noir

z-indexを心穏やかに使うための方針

z-indexを「なんとなく」で扱っていませんか?その結果 すべてのCSSを読まないと重なりについて理解できない 最大値を探し出さないとつぎの要素を設定できない z-index:100と設定する といったことになったこと、ありませんか?z-indexという"""災厄"""とう…

Reactで<dialog>いじってみたけどつらい件

みなさん<dialog>要素を知っていますか?HTML5.2で追加された要素で、モーダルウィンドウをカンタンに実装できるステキ要素です。これをReactから使おうとしてみたのですが、Flux的なやり方ができなくて辛かったです。 …というだけの記事です。 この記事の環境 この</dialog>…

TABでの移動についてまとめてみた

たびたび「あれ?Chromeのタブ間移動ってどうだっけ?」「同じアプリのウィンドウ間移動って?」となるので、まとめました。 Ubuntu18.04用です。 キーボードショートカット 動作 Ctrl+TAB Chromeで次のタブへ移動 Super+TAB アプリ間を移動 Alt+TAB Super+T…

メールサーバー構築に四苦八苦したので記録

あけましておめでとうございます。今年もよろしくお願いします。 去年、メールサーバ構築・独自ドメインのメールアドレス作成(4/4)~メールサーバのインストール~ - Qiitaを参考にメールサーバーの構築をしたのですが、どうもうまく行かなかくて苦戦してい…

mgoでよく使いそうな処理をまとめてみた

mgoでよく使う処理を逆引き辞典としてまとめてみました。

Gravatarを使えばサービスごとにアイコンを設定する必要がなくなるよ!

PHP

Gravatarというサービスを知っていますか?Gravatarとは、「メールアドレスにアイコンとプロフィールを紐付ける」サービスです。その仕組み、APIについてご紹介します。

NodeでGraphQLのリクエストを出す

superagentというパッケージを利用します。 const request = require('superagent'); request .post('http://localhost:8080') .send(` query { user(name: "香風智乃") { name, age } }`) .end((_, res) => { console.log(JSON.parse(res.text)); }); めち…

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

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

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

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

RDB脳でもMongoDBを使い倒したい!

「RDBリレーショナル・データベース強すぎでは???」と思っていました。MongoDBに出会うまでは。 MongoDBはJSONベースでやりとりができるので、かなりJSerにやさしくて涙が出ちゃいました(出てない)。 しかし、RDBをかじっていたせいで脳が凝り固まってお…

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

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

Svelteでドラッグ&ドロップでファイル選択できるinput要素を作った

以前ドラッグ&ドロップでファイル選択できるinput要素をVue.jsで作りました。それを今度はSvelteに書き直してみました。ついでに得た知見も披露します。

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

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

Vueでコンポーネントを作る時の知見

Vueでコンポーネントを作る時、意外といろいろな方法があります。そのため、毎回調べてしまうので記事にまとめてみました。 全体の流れ component.vueを書く app.jsでcomponent.vueを読み込む rollupでapp.jsを変換(dist/main.jsとする) vue.jsとdist/main.j…

Vimの置換モードの有効活用方法を発見しました

Vim

Vimの置換モードが表を編集する場面で役立つと発見しました。

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

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

プログラマが資本主義についてかじってみた話

(まだ大学生なので職業プログラマではありませんが) 最近というか万年金欠で食費1万円チャレンジを毎月課せられているクロパンダです(親にバレたら怒られそう)。金欠すぎて「投資」で稼げないかと思い、資本主義についてかじってみました。そうしたら「プロ…

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

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

文字で背景画像を反転させるオシャレなやつやる

こんな感じのものを作ります。

「ビジネスロジック」のビジネスの意味とは?

tl;dr 「ビジネスマン」とか「ビジネスモデル」のビジネスと同じ意味です。 ただし、「ビジネスロジック」はビジネスのみではなく、「そのサービスのロジック」くらいに拡大解釈されていることがほとんどです。 英語wikiを見てみる 英語wikiのBusiness logic…

Emacsclientの基本的な使い方

Emacsclientに関してまとまった情報が見つからなかったので(というかEmacs全般に言えると思います)、自分で書きました。

LINE Payカードを入手したのでレポート

あまりプログラミングには関係ないですが、キャッシュレスに興味があったのでまとめてみました。 LINE Payカードとは? LINE PayカードというのはJCBプリペイドカードの一種で、LINE Payの媒体となるカードです。 LINE Payにお金をチャージしておくとLINE Pa…

アルゴリズム勉強会 第三回 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]…