経験は何よりも饒舌

10年後に真価を発揮するかもしれないブログ 

技術

mackerel-plugin-accesslogを中心にMackerelのコードを読んだ

グラフのラベル名をいい感じにする簡単なPRを投げた時のメモ。[plugin-aws-cloudfront]Replace label name of graph by wafuwafu13 · Pull Request #766 · mackerelio/mackerel-agent-plugins · GitHub 公式ブログを読めばなんとなく機能的な部分はわかった…

はじめてOSSに新機能追加した

owという、Lots of built-in validationsなOSSに、BigIntのバリデーションを追加した。github.com github.comowに関しては2月頃に3回、型整備のPRを出してマージされていたので、コードには少し馴染みがあった。 https://wafuwafu13.hateblo.jp/#sindresorhu…

axiosの内部構造を理解してadapterの仕組みを解明する

axiosのadapterを使う機会があり、仕組みが気になったのでメモしておく。 github.comadapterで検索をかけると、lib/core/dispatchRequest.jsの51行目の記述が目についた。 axios/dispatchRequest.js at 7821ed20892f478ca6aea929559bd02ffcc8b063 · axios/ax…

AWA株式会社でのインターンでインフラに強くなりました

株式会社サイバーエージェントの全職種向け 実践就業型インターン【オンライン参加可】に3月2日~3月31日の1ヶ月間参加し、インフラに強くなりました(過去の自分比)。 参加するまで サイバーエージェントは魅力的な会社ですし、人生で1回は行っておきたいとい…

DefinitelyTyped で Ace の型を大幅に改善した

前のこの記事では、Definitely Typedから型をインストールして適用する際に、実際にレポジトリまで見に行かないといけなかった、ということを書いた。wafuwafu13.hatenadiary.com今回は、PRを出してマージされたので、そのことを書く。github.comPRタイトル…

Jest のモック関数を整理する

npqという、npmやyarnでインストールする際に安全確認をするライブラリがあり、そこで使われているaxiosをnode-fetchで代替するというissueがあったのでやってみた。github.com github.com置き換えるだけの簡単な作業かと思っていたが、テストを通すのが難し…

Go の Short variable declarations と Named return values

go-mp4という、mp4ファイルをパースしてくれるGoで書かれたライブラリがあった。 Goに慣れるため、golintのカバレッジを上げるPRを出してみた。github.com自分の書いたコードで、:=ではno new variables on left side of :=というエラーが出たけれど、代わり…

qrcode.react とスナップショットテストの相性が最高すぎた

qrcode.reactは、その名の通りQRコードを生成してくれるReactコンポーネントだ。 github.comファイル構成はsrc/index.jsでゴリゴリ計算というか文字列を算出し、コンポーネントを返す構成だった。 テストがなかったので、テストを追加したかったのだが、何に…

npmから@typesを使う場合はDefinitelyTypedを見に行かないといけないことがある

Link Preview JSという、「allows you to extract information from a HTTP url/link (or parse a HTML document) and retrieve meta information such as title, description, images, videos, etc」なレポジトリがあった。github.comそこでは、cheerioとい…

自分のPRを見て思う、TableDrivenTestsの良さ

jdという、commandline utility and Go library for diffing and patching JSON valuesなライブラリにTableDrivenTestsを導入したので、その良さを主観的にまとめておこうと思う。github.comgithub.com まずは、実際にdiffの一部を見てみる。 https://github…

単純作業の効用は意外と大きい

owという、TypeScriptの型制限を拡張したOSSに何度かコミットして気づいたことは、単純作業は意外と効用が大きいということだ。 github.com具体的に何をしたかというと、typescript-eslintの、explicit-function-return-typeが無効になっていたのを、有効に…

Cypress で `blitz new` をテストしたい(が、できていない)

ことの発端は、最近よくBlitzを聞くようになり、GitHubを訪れると、good first issueが転がっていて、テストに関するものがあったので、Blitzを触ったことも、GraphQLやPrismaもあまり知らなかったけど、拾ってみた。このissueの内容は、blitz newの挙動をCy…

NTT Performance Tuning Contest の対策と反省と抱負

nttcom.connpass.com 今までISUCONのようなパフォーマンスチューニングのイベントには参加したことがなかったのですが、興味はありました。 23卒があつまっているSlackで参加したいとつぶやくと、一瞬で反応が返ってきてチームを組めることになり、@PANORAMA…

「関数型プログラミングの基礎」モナドを作るを理解する

wafuwafu13.hatenadiary.comと同じ本の、p.268~p.274あたりでつまずいたので、メモを残しておく。 コードはここにおいてある。 akimichi.github.ioモナドの機能は、「値にコンテキストを付加すること」、「コンテキストを付加したまま処理を合成すること」で…

GoでPythonのrandom.shuffle()を実装し、カイ二乗検定を用いたユニットテストをする

背景 Goでコントリビュートできそうなレポジトリを探していると、goshというレポジトリがあった。 これは、JavaScriptやPythonでの構文をGoで書く、というものだった。 面白そうだったので、Pythonのshuffleを実装し、PRを出そうと思った。 Pythonのshuffle…

数学3の教科書をSymPyで解く

自然言語処理に興味を持っている。 wafuwafu13.hatenadiary.comが、本を読んでいても数式が結構出てきてきついところがあった。 数1と数2はかろうじて履修していたが、数3からは全くわからず、∞とかがでてくると拒否反応を示すレベルだった。 だからまず数学…

「関数型プログラミングの基礎」代数的データ構造とパターンマッチを理解する

関数型プログラミングの基礎 JavaScriptを使って学ぶ作者:立川察理発売日: 2016/10/29メディア: 単行本(ソフトカバー)この本で関数型プログラミングの基礎を押さえようとしたけれど、p140の「代数的データ構造とパターンマッチ」あたりから理解に苦しんだ…

Released npm package 「react-p5-components」

Hi :) I released react-p5-components.GitHub github.comnpm www.npmjs.com Library features is that you can use p5.js in react without writing p5's code.It means this library generate p5.js Canvas depending on your settings.There are few type…

Reactのコードを読む(3)

前回はhello worldが描写されるところまでをみたので、今回はuseStateをみていこうと思う。wafuwafu13.hatenadiary.comまずは、useStateがどこで定義されているのかを確認する。 <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> …</head></html>

Reactのコードを読む(2)

前回はReactDOMについてみたので、今回はrenderでhello worldが描写されるところまでみていこうと思う。wafuwafu13.hatenadiary.comまずは、ReactDom.renderを出力してみる。 <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></head></html>

『リファクタリング(第2版): 既存のコードを安全に改善する』をTypeScriptで実装

最近、フロントエンドのコードを整理する機会が増えてきたので、ただ型をつけるだけではなくて、構造を捉えたリファクタリングができるようになりたいと思い、進めている。リファクタリング(第2版): 既存のコードを安全に改善する (OBJECT TECHNOLOGY SERIES…

Reactのコードを読む(1)

この前jQueryのコードを読んでなんとなくコードリーディングがわかってきたので今回はReactのコードを読んでいこうと思う。 wafuwafu13.hatenadiary.com直近の目標は、以下のコードでどのようにして画面にhello worldが表示されるかを解明することである。 <html> <head></head></html>…

Linuxを購入

ポチったhttps://t.co/SfLKiSwTX7— わふわふ (@wafuwafu13_) 2020年11月22日 のが届いた。Macの5倍厚い。1万5000円。Ubuntu 16.04。前からこういう本をやりたかったけど、Macだと仮想環境を用意しないといけない。ルーター自作でわかるパケットの流れ作者:小…

jQueryはいかにしてDOMを取得するか(3)

wafuwafu13.hatenadiary.comいよいよ今回は、以下のHTMLを用意して実際にDOMを取得していく。 <html> <head> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> </head> <body> <h1 id="hello">hello world</h1> <script> console.log($('#hello')) </script> </body> </html> まずは前回と同じように、3133行目に定義されている関数の引数に何が入ってい…

jQueryはいかにしてDOMを取得するか(2)

wafuwafu13.hatenadiary.com前回は、以下のHTMLを用意し、 <html> <head> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> </head> <body> <script> console.log($); </script> </body> </html> 以下の実行結果を得た。 ƒ ( selector, context ) { // The jQuery object is actually just the init constructor …

jQueryはいかにしてDOMを取得するか(1)

最近、バイトの隙間時間に、jQueryを廃止してTypeScriptにリプレイスする、というタスクをするようになった。 jQueryのDOMの取得を、Documentを使って書き換える時に、jQueryはいかにしてDOMを取得するか、ということが気になったので少し調べていく。今回は…

はじめてのOSS貢献

ついさっきpushしたのでメモしておきます。 STEP1 OSS貢献に関する記事を読む とっつきやすいとか、誰でもとか書いてありますが、やはり難しそう... でも、今書いてる記事を読んだらとっつきやすさは伝わると思います。qiita.comqiita.comtech.gunosy.io STE…

Understanding the difference of Unit Test and Integration Test

Understanding the difference of Unit Test and Integration Test by testing add function and total function in App.js, using Jest and I quote Unit Test vs Integration Test: What's the Difference?. export const add = (x, y) => x + y export co…

Rethinking about role of Babel and webpack

I rethink about role of Babel and webpack. Initial state of my code is here.First, don't use webpack or Babel. It means edit index.html as below. <html> ... <body> <script src="../src/js/app.js"></script> </body> </html> ``` When previewed it in the browser(Chrome), get the following…

複数行副問合せを復習するついでにSQLアンチパターンについて考えた

SQL文に自信がなかったので1年前くらいに買ったスッキリわかるSQL入門 第2版 ドリル222問付き! - インプレスブックス(以下、本A)を復習した。 特に第7章「副問合せ」の練習問題7-3の3を解いてみて、あー、なるほどと思ったのでメモする。まずは、カラムなど…