2021-01-09
「こいつま〜たブログに友達紹介リンク貼ってやがる」「アフィリエイトの旨味を覚えやがったな」「ブロックしよ」とお思いかとは思いますが、どうか、どうか最後までお読みください。 そういう気持ちがないわけでは
2021-01-05
明けましておめでとうございます。 早速ですが私はつい昨日 "IE 始め" を行いました。 久々の IE 対応で様々な箇所でハマった、また babel を使わずに tsc のみという普段の IE 対応と
2020-12-31
最近は食事を考えることが増えてきていろいろ試してみたので、食事周りのライフハックをまとめてみようと思います。 今年は会社をやめたり自粛で引き篭ったり、さまざまなライフスタイルの変化がありました。 特に
自由人生活で 1 年間めちゃくちゃゲームしていたのでそのタイトル紹介です。 いわゆるゲームは好きだったけど家庭の教育方針でゲームをあまりできなかった（隠れてこっそりやっていたのですが）子供が、大人にな
2020/06/10 から始めたこのブログの振り返りを書いていきたいと思います。 以前、毎月やっていたのですが、まあなんかめんどくさかったので辞めていました。 しかし、年が変わり、半年近く更新したとい
2020-12-24
私はプログラミングを 3 年近くやってみて、「ただ知らなかっただけで損した」という悔しい経験をたくさんしました。 そこで自分にとって「これを知っているだけでエンジニアとしてステップアップできた」という
2020-12-23
WebSocket は RFC 6455 で定められた仕様で、クライアント <-> サーバ間の双方向通信を可能にします。 この WebSocket で通信できるサーバーを、ライブラリを使わずに RFC
2020-12-18
linaria を NextJS で動かすためには、linaria の install、linaria/loader の設定、 babel の設定が必要です。 最近 linaria + Next を仕
2020-12-16
この記事は Node.js Advent Calendar 2020 の 16 日目の投稿です。 今年のゴールデンウィークに CBOR(Concise Binary Object Representa
2020-12-14
クソアプリ Advent Calendar 2020 の 5 日目に 俺の恋人 ~my covid~ という記事を書きました。 こちらがその糞アプリです。 https://my-covid.web.
2020-12-10
Context API と useReducer で custom hook を作る例が見つからなくて色々と思考錯誤をしていたのですが、現時点で自分なりにたどり着いた答えを紹介します。 フォルダ構成と
2020-12-09
つい先日、知人とペアプロしているときに custom hooks の戻り値は配列かオブジェクトかで意見が分かれたことがあって、結局何が正しいのかを調べてみました。 結論 どっちでもいい。 hooks
2020-12-02
この記事は Next.js Advent Calendar 2020 2 日目の記事です。 先日このブログと別にもう一つ別で、til.ojisan.ioというブログ的なものを作ってみました。 これはブ
2020-11-25
毎回やり方を調べている気がするシリーズです。 firebase-admin を初期化する際、サーバーに Firebase Admin SDK を追加する を見ると、 や、 として初期化されています。
2020-11-20
「何を今さら」って感じのタイトルですが、最近 初めて luxon を使うことがありまして「へぇ〜〜〜」って思ったことが色々あったのでまとめていきます。 当方 moment, dayjs しか使ったこと
2020-11-18
OGP は「環境を考慮しよう！」という画像です。 NextJS へ環境変数をセットする時、デプロイを考慮した上で.env を使いたい・ビルド時と起動時の環境変数がある・サーバーとブラウザでの環境変数が
2020-11-13
min-caml という教育用のコンパイラがあります。 これは大学の講義などでも使われており、速攻 MinCaml コンパイラ概説という解説では、字句解析、構文解析、型推論、最適化、コード生成のステッ
働いていないことへの言い訳記事です。 この夢のような生活がもうすぐ終わるので書きたくなりました... ちなみにサムネイルは「仕事」でぱくたそで検索したら出てきました。 「エレベーターも給料も下降中の写
2020-11-12
websocket サーバーを作る時に sha1 の base64 ダイジェスト値が欲しくなったのでそのときのメモです。 Buffer.from(str, 'hex') 同等のコードの作り方を教えてく
「ハローワールドするためにどこまで複雑にできるか」を目指して HelloWorldEnterpriseEdition というレポジトリを作って遊んでいたのですが、いろいろなエコシステムに触れることがで
2020-11-11
Aaptiv の登録導線のラジオボタンを見てて、「これどうやって実装するんだろう？」って気になったので調べてみた + 実装してみました。 (https://twitter.com/sadnessOj
2020-11-09
いつも再レンダリングを確認するときは Chrome の DevTool から Profiler 立ち上げて、'Highlight updates when components render.' のチ
2020-11-08
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe
2020-11-02
preact なんとなく理解した記念ブログです。 もともと React を読むつもりが挫折したので慣れるために preact を読みました。 おかげで仮想 DOM の悲鳴が聞こえるようになりました。
2020-10-29
@babel/preset-typescript を使わず、@babel/plugin-transform-typescript で React + TSX をビルドしてみましょう。 @babel/p
2020-10-23
ESLint にも TypeScript にも「ルールを設定してみたけど、いざ運用するとなるとエラー出ちゃった。これ動作確認して欲しいのにデプロイが CI に弾かれちゃう。うーん、ごまかしちゃえ(てへ
2020-10-14
lint-staged の設定をしているとき公式の Installation and setup に とあったのですが、ここは npm i -D lint-staged でもよいはずなので、この mr
2020-10-13
最近 React のパフォーマンスチューニング、特に再レンダリング抑制について調べたのでそのまとめです。 特に昔からおまじないとして書いていたことを、「なんであの書き方していたんだっけ」というのを調べ
2020-10-06
そろそろブログを大幅に改修しようと思っており、その前準備をしてリファクタリングをしていました。 具体的には css modules からの脱却と、スタイル周りのリファクタリングをしていました。 そのと
2020-10-02
firestore の SDK に withConverter というメソッドがあるのですが、その宣伝です。 型が欲しいってどういうこと？ たとえば firestore 上のあるドキュメントが nam
Jest で TypeScript を動かす時「preset: ts-jest とすればいい」という話をたまに聞くのでその補足です。 結論 jest.config.js の transform もしく
2020-09-26
先日 microbundle というバンドラーを使って reghcss というコンポーネントライブラリを作ったのですが、ビルド体験が良かったので紹介したいです。 microbundle とは micr
公式では制御されたコンポーネントを推奨し、<input type="text" value={this.state.value} onChange={this.handleChange} /> のよう
2020-09-24
前に書いた ESLint と Prettier の共存設定とその根拠について が公式推奨が変わったことにより一部間違った情報になっているのでその訂正記事です。 該当記事に書いた内容は Prettier
2020-09-23
TaPL(型システム入門 -プログラミング言語と型の理論-) は型システムについて体系的に学べる教科書です。 友人から「型周りちゃんと勉強したいならこれ読むと良いよ〜」と勧められ読んでいるのですが、正
2020-09-20
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディ
これは「要素のスワイプ機能作りたいなー、そういや Slick とか Swiper とかが実現してる、スワイプした時にピタッって固定する機能が CSS だけで作れるようになったらしいんだけど、あのプロパ
2020-09-19
一般的に JSX と言えば の return 以下の部分を指しますが、どうしてこれが実行できるのでしょうか。 これが createElement 相当であることは知っていましたが、どうやってその変換を
2020-09-18
a タグにtarget=_blankをつける時はとりあえず rel 属性に rel="noopener noreferrer" と書いておけばいいと思ったのですが、どうして noreferrer だけ
2020-09-15
styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなる
2020-09-13
stylis を調べたのでそのメモ書きです。 stylis は styled-components の内部で使われており、styled-components の調査をしてる中で挙動を知る必要が出てきた
2020-09-12
結論 -j を使う！ やりたいこと dist/module/script.js という階層にファイルがあるとして、この script.js だけを配布したいとします。 ここで GitHub Relea
2020-09-10
Firebase Authentification は OAuth 2.0 フローにのっとったログイン方法以外にも Email/Password を使ったログイン方法も提供しています。 このログイン形
2020-09-09
このブログで検証した結果の成果物のデプロイには GitHub Pages を多用しているのですが、それは GitHub Actions から行っており、そのフローがあまりにも便利なので紹介します。 G
2020-09-08
nabettu さんのstripe のサブスク実装に Firebase の Extension がいいに便乗して stripe について書きます。 stripe は決済機能を簡単に実現できる素晴らしい
2020-09-07
React には material-ui という比較的歴史の長いコンポーネントライブラリがあります。 最近これいいじゃんということで使うようにしていまして(今更!?)、ノウハウやハマりどころを知ったの
2020-09-02
タイトルを見てめちゃくちゃなタイトルと思われるかもしれませんが、言いたいことは伝わると思います。 こういうレイアウトを作ってみましょうって話です。 実は筆者はこういうデザインなんといえばいいのか分か
2020-09-01
何を書いたか ブログに material-ui の Drawer を入れた Gatsby 製サイトを Netlify にデプロイする前に見ておきたい設定 2 つ（ビルドと表示） gatsby-plug
2020-08-31
例えば購入者に音楽や動画を配信するサービスを Firebase で実装することを考えましょう。 配信するファイルはなんらかのオブジェクトストレージに格納されますが、その公開 URL は購入者以外は見え
2020-08-24
所用で先週preactを初めて触っていたのですが、環境構築をしているときに「この情報ドキュメントにないよね？」「情報が間違ってそう？」っていうのを節々で感じた部分があって難航したので、これから環境構築
2020-08-21
PATH のことちゃんと理解していなかったのでちょっと勉強したって話です。 PATH を消すとどうなるか PATH を消します。 消えたことを確認しましょう。 そしてコマンドを叩いてみると、これまで使
2020-08-17
ずっと他のシェルを使っていたのですが fish に切り替えました。 せっかく設定を dotfiles として Git で管理していたのに、設定の依存関係を何も覚えておらず持ち運べない状態になっていたの
fish(friendly interactive shell)で環境変数をセットする際、公式に To give a variable to an external command, it needs
2020-08-16
私は プログラミングの基礎や大学の講義資料でプログラミングを勉強しており、OCaml の開発者ではないもののサンプルコードとして OCaml を読んでいます。 この記事では、そういったコードリーディン
2020-08-15
3 年前に MacBookPro の 2017 年モデルを買っていたのですが、それがバッテリーが 1 時間ほどしか持たなくなったので修理に出しました。 AppleCare は 3 年間有効 予約せずに
2020-08-14
Blog のシンタックスハイライトに関してPrism.jsとうまく折り合いを付けられなかったのでshiki に乗り換えました。 Prism.js を採用していた理由 「syntax highlight
2020-08-13
React でコンポーネントのスタイルを上書くことは、ページをコンポーネントに分割していく上で必要になるテクニックです。 コンポーネント自体のスタイリングとレイアウト用のスタイリングを分離し、レイアウ
2020-08-12
最近 React Native をはじめたので詰まったことを雑多にメモしていこうと思います！ 「react-native header hide」 などで検索すればいくらでも情報が出てくるとは思います
2020-08-09
このブログにユーザーという概念を爆誕させました。 記事に著者を紐付けたりユーザーの詳細ページを持てるようにしました。 静的ブログかつ CMS を使わず入稿している Gatsby 環境でどうやってユーザ
2020-08-05
はてブにおけるネガティブなコメントやそれが引き起こす炎上から自分を守るための、そのプロテクト機能をこのブログに実装した話です。 燃えたくないけど読まれたい 私はこのブログを運用する上で 「燃えたくない
Vercel での環境変数周りでのあれこれ、ずっと苦しみ続けていたので自分なりのプラクティスをメモします。 辛さの原因は Vercel のアップデートのスピードが早く正しい情報にアクセスし辛いことが一
2020-08-03
今朝更新した Gatsby 製サイトを Netlify にデプロイする前に見ておきたい設定 2 つ（ビルドと表示）のボツ原稿です。 この記事では Netlify でのビルドキャッシュを使う方法を紹介し
Netlify にはビルド時のキャッシュと HTTP のキャッシュをユーザー側で設定できる口があります。 このキャッシュの設定をすることで、ビルドや表示が早くなり良いこと尽くしなのでこれを気に見ていき
2020-08-02
ヘッダーにナビゲーションを付けたくて、SP 対応を考えた結果 Drawer をつけることにしました。 ただアニメーションとか考えるのめんどくさかったのでコンポーネントライブラリを入れることにしました。
2020-08-01
何を書いたか Hover 時に他の要素にスタイルを当てたい Ajax でコンテンツ取得するとページ内スクロールされなかった話（全面的に俺が悪かった編） ブログの 1 ヶ月を振り返る Gatsby 製の
2020-07-31
エンジニア向け OGP 画像作成サービスを作りました。 サービスはこれで、ソースコードはこれです。 ソースコード(HTML, JSX)から OGP 画像を生成し、それをシェアできるサービスです。 各
2020-07-30
No Class CSS Museumという No-Class CSS フレームワーク比較サイトを作りました。 簡単な demo 用のコードに何かスタイル当てたいけど、そんなに時間かけたくないしそもそ
2020-07-28
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が
2020-07-26
今からお話しすることは本当にしょうもないことである... たとえば、フォームの入力画面があって、送信前に確認画面(Confirm)を挟むとしよう。 そしてそれはいろんなフォームでやる操作なので、共通レ
2020-07-22
明日から 4 連休だけど 東京都民は Go To トラベルができないらしいので、ちょっとした暇つぶしな情報を共有しようと思います。 最近まで Slay the Spire というゲームにハマっていたの
2020-07-20
OGP 生成をタダでやろうとするとそのデプロイに意外と苦労したという話です。 アプリケーションの技術スタックは React/NextJS、クラウドサービスとして Cloud Storage, Clou
2020-07-18
少し前に ogpng というサービスを作りました。 これは HTML や JSX を使って OGP 画像を生成しシェアできるサービスです。 こういうエディタで OGP 画像を作り、 そこで発行された
2020-07-17
このブログにタグ機能を作りました。 タグって自作ブログを作ると絶対に欲しくなってしまう機能なのですが、Gatsby でそれを作るのはちょっと敷居の高さを感じていたので、噛み砕きながら解説しようと思いま
2020-07-11
ちょうどこのブログを初めて 1 ヶ月たったので、 なんでこのブログをやっているか どういう意識でやっているか 読者の反応 これからどうするか みたいなことを書きます。 ブログを始めた理由 開発のサンド
2020-07-02
HTML の a タグではページ内リンクが使えます。 このブログでも右についてるタイトル（SP だと右下についてるオープナー）をクリックすると、その記事の該当箇所にジャンプできます。 これは、遷移先に
2020-07-01
(iframe の実験用の記事) Twitter のメニューなどそうなのですが、Hover した要素の中や隣接した要素のスタイルが変わるデザインってありますよね。 ↓ こういうの ↓ これって実装し
2020-06-28
できる場合とできない場合があります。 SSR(つまり NodeJS での実行)するなら、当然 S3 単体ではできません。 Lambda@Edge が必要で、さらに Lambda をルーティングごとに実
できます。 ここにある通り、S3 の設定ページで エラードキュメント に index.html をセットするだけで良いです。CloudFront がなくてもできます。 （完） ただ、たとえば /abo
2020-06-26
css-loader と style-loader どっちがどっちかってたまになるので、そうならないための備忘です。 これらは webpack の loader であり、JS で構築されるアプリケーシ
2020-06-24
注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては
2020-06-18
少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。 これから JavaScript/TypeScript
2020-06-15
ESLint の Plugin と Extend の違いを説明できますか？ 違いを知っている人からすれば（というかそもそも全然違うものなので）、「え、それ悩む？」となるところなのですが、ユーザー向けド
2020-06-12
そういえば Babel をちゃんと勉強したことなかったなと思ってちゃんと勉強してみたって言う話です。 つまり Babel をノリで使ってたことになるのですが、自分がプログラミングを始めたときは @ba
2020-06-10
Blog を作りました！！！！！ 会社を辞めて 5 ヶ月経とうとしており、ついに堕落しきった生活による危機感が生まれはじめました。 その危機感が結実したものがこの Blog です。 で、Blog を作
