Panda Noir

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

JavaScript

npm publishの練習をするならverdaccio + docker

みなさん、npm publish、怖くないですか??? npmでライブラリ公開したときに踏みつけた地雷7つ - Panda Noir npmでアップデートするときに踏みがちな3つの落とし穴 - Panda Noir 僕はもうトラウマだらけです。怖いです。しかし、いつかは克服しなければい…

esbuild なら React の playground が5秒で出来る!!!!!

esbuild はプラグインなしで JSX・TSXをコンパイルできるから、React のプレイグラウンドがすぐ作れる!! $ npm init --yes $ npm i esbuild react react-dom $ esbuild src/main.tsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=ou…

Record & Tuple Proposal がすごい話

github.com このプロポーザルの話です(2020年8月現在Stage2) どういうプロポーザルか? Record と Tuple は、簡単にいうとプリミティブ的なオブジェクトと配列です。どういうことかというと、次のようなことができるようになります。 [1, 2, 3] !== [1, 2, 3…

.eslintrcを別フォルダに移す

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

Vue3に書き直してみる

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

{}は簡易Symbolにできる

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

React ref解説

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

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

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

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

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

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

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

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

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

そうだ、明日京都行こう。

京 都 行 き た い ! ! ! ! ! …失礼しました。授業で「複数のWeb APIを組み合わせてオリジナルのサービスを作ってみましょう!」という演習があって、それで作ったサービスを公開したので紹介します。 https://pandanoir.net/webcomp 「そうだ、京都行こう」…

スターリンソートをJSで実装してみた

スターリンソートなる、「整列されていない要素を"粛清"することでO(N)でソートを実現する」というネタが盛り上がっているようなので、便乗して書きました。 実装 リストを先頭から見ながら暫定の最大値を持っておきます。その最大値よりも小さい値があった…

Generatorで自然数列とか素数列を作った

「ゼッタイにこういうライブラリあるだろ」と思って探したんですが、なかったのでここに書いておきます。ライブラリ化はするまでもないですが、たびたび使うので… // 自然数列. [0, 1, 2, 3, 4, ...]. 数列の最初の数を引数として受け取ります. const natura…

俺がESLintを勘違いしていたのはお前らが悪い!

ESLintというツールをご存知でしょうか?これは「コードスタイルを統一するためのツール」です。そのため、 リーダブルコードを読んだことがある人 コードの整形について知っている人 if文まわりの改行について一家言ある人 には必要ありません。 〜完〜 !…

そもそも静的型付けって?TypeScript入門以前の話

みなさんは「型」についてご存知でしょうか?「intとかcharみたいなアレでしょ?」くらいの知識はあるかと思います。今回の記事では型についての種々の疑問について解説して行きたいと思います。 そもそも型とは? 型があるとなんで嬉しいの? 静的型付け・…

webpack.config.jsのプラクティスを考えてみた

何度もwebpack.config.jsを手書きしていて面倒くさくなってきたので、ここに書き方を残しておきます。 webpack.config.jsを書く際によく使うTipsとして、これらが挙げられます。 mode: env.mode || 'development' path.resolve(__dirname, path_to_file)を使…

JSON5ならケツカンマができる!

JSONでケツカンマがあったらなあ、コメントを入れられたらなぁと思うことありませんか?僕はpackage.json内のnpm scriptsをいじっているときに頻繁に思います。 そんな我々の思いを受けてできたプロジェクトがあります。その名もJSON5です。今回はこれを紹介…

JavaScriptの環境構築あれこれ

JavaScriptの環境を構築するのがつらくて辛くて仕方がないのでチートシートを作ることにしました。やや長くなったので目次をつけます。 Webpack関連 WebpackのローダーとBabelの役割分担 Webpackのインストール ts-loader ts-loaderはJSXも扱える vue-loader…

jQueryでむりやりFluxをするとどうなるのか?

結論: 非常に辛い。なぜならFluxの恩恵はコンポーネント化によってもたらされるから。 jQueryのコードが汚くてつらい こちらをご覧ください。jQueryで作ったカンタンなアプリのコードになります。 <title>jQuery</title> <script src="https://pandanoir.net/js/jquery.slim.min.js"></script> <script src="socket.io/socket.io.js"></script> <script> jQuery($ => { const socket = io(); l…

WebSocketでカンタンなゲームを作った

火をつけて消えないように薪を足し続けるだけのゲームを作りました。サイトに接続している人なら誰でも薪を足したり、火をおこせます。 http://ws.pandanoir.net/ WebSocket通信をどう使っているか WebSocketは一度確立したコネクションを切断しないでそのま…

なぜrequire('lodash/zipWith')で関数ひとつだけ読み込めるのか

lodashというユーティリティライブラリがあります。lodashは便利な関数をたくさん提供しています。たとえば配列をシャッフルするshuffle()や、配列の差をとるdifference()などが挙げられます。 lodashは300個以上の関数を提供しています。しかし、実際に使う…

気がついたらimmerが独自クラスのインスタンスもサポートしていた

immerという、ミュータブルな操作を書く感覚でイミュータブルな操作が行えるライブラリがあります。 import {produce} from 'immer'; // 破壊的に配列をシャッフルする関数 const shuffle=(a,i=a.length,j) => {for(;[a[i],a[j]]=[a[j=0|Math.random()*i],a[…

超!体系的に学ぶWebアプリケーション開発

この記事はWebサーバーを建てるところからWebアプリケーションを開発できるようになることを目標としています。 目次 目次 この記事の目標 [超!基本] Webページが表示されるまで HTMLとは? JavaScriptとは? [超!Webサーバー] Webサーバーとは? ファイア…

バンドラなんていらない時代になりつつあるぞ

Webpackだとかbabelだとか、ダサくないですか?設定してnpm run buildして…そんなことしないで済む時代が来ているんですよ! バンドラがなぜ必要だったのか バンドラはたくさんあるファイルを1つにまとめ、依存関係を解消することが目的でした。 しかし、ES …

ちょっとフックがあれば知ってるけど、意外と知らないJavaScript技術

JavaScript技術は10年前とは比較にならないほど膨大で緻密になっています。それらはアンテナを張っていなければ見落としてしまいます。今回はそんな技術の一端を紹介します。 紹介する技術たち Web Worker + Service Worker SharedArrayBuffer + Atomics API…

隣接するマスへの差分の配列をワンライナーで生成する

初めに言っておくと、数式が覚えられないくらい複雑なので実用性はありません。これが簡単な数式だったらまだ使えたのですがね…普通に[[0,1],[1,0],[0,-1],[-1,0]]のように地道に書いたほうが早いです。 用途としては、forループ内で配列を使わないで生成が…

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

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

どんな深さの配列も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…

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

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