Panda Noir

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

Docker で最速で nginxサーバーを立てる

サンプルリポジトリ 記事で紹介した内容をリポジトリにあげてあります。よろしければ参考にしてください。 github.com nginx イメージを使う たったこれだけでカレントディレクトリのpublicフォルダを公開するウェブサーバーを建てられます。 $ docker run -…

auth_requestをするときは変数に注意

3 時間くらいハマったのでメモしておきます。 ハマった状況 以下のようなコードを書いたら、変数が上書きされてうまくいきませんでした。 location /private { auth_request /auth/is_logged_in; resolver 127.0.0.11; set $upstream_server private; proxy_…

dependencies と devDependencies の使い分け

混乱しがちだったのでまとめました。 なぜ使い分けたいのか? ウェブアプリケーション開発においては、本番環境で不要なパッケージをインストールせずに済むからです。npm には dependencies に書かれたパッケージのみインストールする機能があるので、これ…

Defx.nvim でプレビューウィンドウを自動的に閉じる

Defx.nvim には floating window を使ったイカしたプレビュー機能があります。しかし、何も設定をしていないと、defx を閉じたあともプレビューウィンドウは残ります。この記事は autocmd を活用してプレビューをうまく消そうという記事です。 Defx を閉じた…

.eslintrcを別フォルダに移す

ルートディレクトリにコンフィグファイルがちらばっていると気になりませんか?僕はとても気になります。そこで、設定ファイルを別ディレクトリへ移す方法をご紹介します。 package.jsonに追記するだけで良い たとえば.config/eslintrc.jsへ移動させたとしま…

Vue3に書き直してみる

Vue2からVue3へ書き直す際に情報が不足していて困ったのでまとめておきます。 公式ドキュメント まだversion3の公式ドキュメントは揃っていません。マージされたPRかRFCを見るしかない状況です。 migrate from v2 to v3 ※「これだけ押さえれば7割くらいは移…

TypeScriptで配列からnullを取り除く

結論 const a = [1, 2, 3, null]; // nullとundefinedをはじく const filtered = a.filter(<T>(n: T): n is NonNullable<T> => n != null); // nullだけはじく const filtered2 = a.filter(<T>(n: T): n is Exclude<T, null> => n !== null); nullを除いた配列の型 nullを許容</t,></t></t></t>…

lower_bound、upper_boundで個数を数える

条件 コード xより大きい v.end() - upper_bound(v.begin(), v.end(), x) x以上 v.end() - lower_bound(v.begin(), v.end(), x) xである upper_bound(v.begin(), v.end(), x) - lower_bound(v.begin(), v.end(), x) x以下 upper_bound(v.begin(), v.end(), x…

{}は簡易Symbolにできる

Symbolの使い方として、たとえば独自の特殊値を持ちたいと言うものがあります。 // myFind: 配列と関数を受け取り、 // 関数を満たす要素が見つかればその要素、 // 見つからなければnullを返す const myFind = (arr, f) => { for (let i = 0; i < arr.lengt…

差分リスト(Difference List)について

Difference Listとは? その名の通り、差分(difference)リストです。差分リストはListのappendのパフォーマンスが結合に依存する問題を解消します。 Listのappendは結合順によって計算量が異なる appendは結合順を変えても意味としては同じです。しかし、con…

MapとObjectの違い

ES2015でMapが追加されました。パッと見Objectっぽいですよね。本記事ではどこが違い、どういう用途で使うのか解説したいと思います。

React ref解説

refとは? refとはReference(参照)のことです。ミュータブルな値を管理するときに使います。 refの使いみちの最たるものはDOMへのアクセスです。たとえばinput要素が持つfocusメソッドを呼びたいときにrefを使います。 const App = () => { const ref = useR…

イトーキF レビュー

中古でイトーキのFというオフィスチェアを購入したのでレビューです。 感想 すごくいいです。座椅子でずっと作業してたのですが、苦労が全てなくなりました。 ヘッドレストがないモデルですが、あまり気になりません。ディスプレイを買ったので下を向いて作…

10文字ごとに文字列を区切って配列にする

※改行については特に規定していません '01234567890123456789012345'.match(/.{1,10}|^/ug); // ['0123456789', '0123456789', '012345'] 解説 まず始めのところが1文字以上10文字以下の部分にマッチしてくれます。うしろの|^の部分で空文字を渡されたときに…

HHKB所感

HHKB HYBRID Type-Sを買ったのでレビューします。 所感 ノートのキーボードより打ちやすい Bluetooth接続でも遅延をほとんど感じない Fnキーは気にならないが、チルダキーの位置がとんでもないのでつらい Ctrl + Shift + Spaceで入力切り替えというのはやっ…

TypeScriptのExcludeはなぜT extends K ? never : Tで実装できるのか?

直感に反しているExclude型についてconditional typeの話をしつつ解説します。 Exclude型とは? Union型から特定の要素を取り除く型です。ある型から特定のプロパティを取り除きたいときに使えます。 interface Person { name: string; age: number; country…

JavaScriptでPriorityQueue

優先度付きキューを実装する必要に駆られたので書きました。 実装 TypeScript class PriorityQueue<T> { private container: T[] = []; private size = 0; private comp: (a: T, b: T) => boolean; constructor(comp = (a: T, b: T) => a < b) { this.comp = co</t>…

サブディレクトリでNext.jsのアプリをデプロイしたい!!

結構こういう要求はあるとおもいます。 解決する課題 /staticへのリンクが途切れる <Link>で遷移するとbasepathが変わる つまり、サブディレクトリ以下でNext.jsを使ったSPAをしたい!!という人向けの記事です。 /staticへのリンクをサブディレクトリ以下になるよ</link>…

Codeforcesで精進するときに便利なツールの紹介

github.com 今回はこちらのツールを紹介します(なぜか日本語記事でCodeforces向けのツール紹介がなかったので) ツール概要 このツールは以下のような便利機能を提供しています。 テストケースのダウンロード・ディレクトリセットアップ テンプレートファイル…

denite.nvimからfzf.vimに移行してみた

tl;dr 操作性が良い :Agコマンドが強すぎる めっちゃカッコイイ!! fzf.vimとは? fzf.vimとはfzfを使ってファイルオープンやバッファ切り替えを行うツールです。denite.nvimと役割はかなり近いです。 fzf.vimの使い方 requirement fzf本体を別途インストー…

NerdFontがうまく効かないときの対処法

半年くらい悩んでいた問題が解消できたのでまとめです 環境はUbuntu 19.10を想定しています。 1. そもそもフォント選択できていますか? そもそもターミナルの設定でフォントをきちんと設定できていない可能性があります。正しくインストールして、ちゃんと…

tmuxのプラグイン「tmux-respawn-all-panes」を公開しました

卒論ちょっと進んだマン。ドラフトの締切まであと2日…つらい… 昨日書いたこちらの記事の内容をプラグイン化してみました。 tmuxのすべてのpaneでzshrcの再読み込みをする - Panda Noir GitHub - pandanoir/tmux-respawn-all-panes: respawn all panes with o…

tmuxのすべてのpaneでzshrcの再読み込みをする

卒論が全然終わらないしストレスがすごいです…はぁ… とりあえず息抜きにこないだ作ったtmuxの設定を上げておきます。 モチベーション zshrcを書き直したあとに、一括ですべてのpaneに変更を適用したいからです。いちいち全てのpaneに移動してsource ~/.confi…

Reactのリハビリがてらアプリ作った記録

卒業研究とか部活に追われてあまりReactとか触れていなかったのでリハビリのつもりでやった。1日でガーッと書いたときの記録。コケたところとかも(どうせ後でまた同じところでコケるので)記録しておく。 どういうアプリ? graphemesplitという、Unicodeで1文…

まじかる☆ベーカリーのパンはどれほどの確率で焼けるのか?

www.youtube.com こちらは僕が好きでよく見ている動画です。まじかる☆ベーカリーというボードゲームで遊ぶ動画です。 このゲームは「パン」を焼き上げて得点をもらうゲームとなっており、パンにはそれぞれ焼き上げるための条件が書かれています。たとえばコ…

JSでHaskellのMaybeモナドを再現してみた

Haskell的な書き心地を再現しようと試みてみました。結果、かなりいい感じに仕上がりました。 // Haskellでは // Just 3 >>= return . (+ 3); // JSだと Maybe.Just(3) .bind (compose(return_, v => v+3) ); // 似てる!! Maybeモナド 結構えらい実装にな…

HTTPieを使いこなすためのサンプル集

問題という形でまとめてみました。 パラメータ付きGET httpbin.org/getにGETメソッドでリクエスト name=John、age=29というパラメータを渡す 解答: $ http httpbin.org/get name==John age==29 通常のようにURLへパラメータをつけることもできます。 $ http …

AtCoderで水色になりました

水色記念に書いておきます 競プロ歴 AtCoder歴は半年…というと微妙ですが、ちゃんと取り組みだしてから半年ですね。高校生のときに蟻本で挫折しているので、競プロにはじめて触れたの自体はAtCoderができるより前です。 水色になるまでに取り組んだこと ABC…

「7」の倍数を表す正規表現の解説

「7の倍数」を表す正規表現 - Qiita オートマトンから正規表現への変換方法について、この記事をもとに書きます。 オートマトンとは? 状態(計算の途中結果)をもっていて、値が入力されると現在の状態と入力値をもとに次の状態へ遷移します。入力を受けるた…

Space2回でfzfを呼び出すzsh script

fzf、使っていますか?ぼくはそこそこ使ってはいるのですが、どうしてもC-tを押すのが面倒くさく感じてしまいます。そこで、$ vim<space><space>のようにspaceを2回続けて入力するとfzfが起動するようにしてみました。 (わかりづらいですがspaceを2回押してfzfを起動してい</space></space>…