おじんブログ

Webアプリに関する知見とか雑記です

プログラミング2021年振り返り

プログラミング勉強 全体 自分はフロントエンド得意だと思っていたのですが、「標準のHTMLのフォームでデータ送信するときってどんな感じでやり取りするんだっけ?」「mimeTypeやHeadersって知っているけどどういう仕組みだっけ?」「Web Workerって?シングル…

Inputタグにアップされた画像ファイルのプレビューを オブジェクト URLと データ URL でやる方法で書き比べてみた

動機 アップロードした画像を使って画像を加工するなどの処理の場合、どのように取り出して取り扱うか、というのが全然整理できていなかったのでその整理を込めてサンプルコードを書いた。 File オブジェクトや addEventListener もあんまり書いたことがなか…

Next.js で SG したサイトがなぜあんなに早いのか、 Chrome DevTools とコードリーディングで調べる

はじめに 静的コンテンツをCDNに乗せておくとアクセス時間が早い、という話ではなく、 Next.js を SG してブラウザで閲覧した時の挙動に絞っています。 TL;DR SGした際に、 getStaticProps() 経由で渡したコンテンツは _next/data/ ディレクトリ配下に JSON …

Next.js で SG したサイトがなぜあんなに早いのか、 Chrome DevTools とコードリーディングで調べる

はじめに 静的コンテンツをCDNに乗せておくとアクセス時間が早い、という話ではなく、 Next.js を SG してブラウザで閲覧した時の挙動に絞っています。 TL;DR SGした際に、 getStaticProps() 経由で渡したコンテンツは _next/data/ ディレクトリ配下に JSON …

Next.js と外部 API で作成した静的サイトをデプロイしようとしたら、画像最適化を考えて結局 Vercel にデプロイした

TL;DR ローカルのリポジトリに入っていない、外部の API から取得した画像の最適化をどうするか 結局、 Vercel なら外部 URL の画像も最適化して高速で配信できるので Vercel を選択した 経由 Next.jsの getStaticProps と getStaticPaths を使ったStatic Ge…

JavaScript で小数点以下を桁数指定して四捨五入するなら、parseFloat() と toFixed() を組み合わせればよい

TL;DR 第一引数に四捨五入する値を、第二引数に小数点以下の桁数を指定する関数を定義する。 /** * Rounding number with digit * Example: * round(3.14159265359, 2) = 3.14 * @param {number} value * @param {number} digits default : 0 * @returns {nu…

「Reactを自作しよう」をやってみた & Babelの設定の復習

動機 以前から React を自作しよう を見かけてやりたいと思っていたが GW でやっとまとまった時間が取れたのでじっくり取り込んだ。 React をよく個人的に使うので、その設計と実装を経験したほうが React への理解が深まるのでは?と思った。 TL;DR 作業結果…

プライムデーで買ってよかったもの

プライムデーから2週間ぐらい経過したけど振り返る。 なんだかんだで合計3万円ぐらい買った。基本的に必要なものを買えたので満足。 Amazon Basicの10mm厚のヨガマット 自宅トレーニングの環境を改善するために買った。 ケトルベルを振ったりスクワットする…

確実に理解しながらWebpackで構築したReact + TypeScript環境にJestとReact Testing Library を入れる

TL;DR サンプルコードは下記です。サンプルで必要な箇所以外は極力シンプルにしています。 https://github.com/ryokryok/react-ts-jest-rtl React + TypeScript(with Webpack) Jest(ts-jest) React Test Library 前提 最低限の yarn または npm コマンドの使…

Webpackを一歩一歩確実に理解してReact + TypeScript環境を作る

動機 毎回 npx create-react-app で React アプリを生成していて Webpack の勉強から逃げていたが、いい加減向き合いたいと思ったため。 昔 Webpack に入門しようとしたら難しいという先入観を抱いたので、できるだけシンプルに、一歩一歩づつ入門する。 最…

useRefを実践例を挙げながら使う

React Hooks で追加されたuseRefは最初は使いどころがよく分からなかったのですが、実践例を見つつサンプルを書いてみたら使いどころが掴めてきたのでまとめます。 前提 ReactのuseStateとuseEffectの使い方は覚えたけどuseRefについてはあまり公式例を見て…

2年半プログラム学んできた履歴ともっと早めに知りたかったこと

toyokeizai.net プログラミング教育が学校教育でも始まるということや、人手不足だからスキルを身につけると稼げるとか、未経験から数ヶ月でエンジニアにとか、プログラミングが話題になってますね。 学習していた記録を思い出しながら早めに知りたかったこ…

雑な仕事観: 向いていないことは仕事にしないほうがいい

仕事観と書くと身構える人が多いのでラフにした。 こういう話はキャリアステップを狙う人だけの話、と考える人もいるけど仕事と趣味を分けてて充実させたい人でも、むしろそういう人ほど、向いていないことを考えた方がいい。 向いていないこととは ここで言…

React 360を開発するときに引っかかりやすい点

開発環境と他のサンプルページ見ていろいろ気が付いたこと。 ChromeではHttps環境でないとデバイスの傾きが感知できない サンプルページではスマートフォンでみると傾きが反映されていたのに、 開発環境で立てたローカルネットワークにアクセスしてみると、…

React 360ではまだHookは使えない

TL;DR React 360にて依存しているReactとReact NativeがHookに対応する前のバージョンのため、React Hookはまだ使えない。Issueには上がっている。 github.com github.com package.json も見てみると確かに対応する前のバージョンになっている。 "dependenci…

Twitterを初めて10年経過して思うこと

僕が好きなTwitterアカウントの人が僕が思ってることを大体言ってたので引用します。 Twitter、拾ったかっこいい木の枝や綺麗な石を自慢したり創作物やネタツイートを見せ合う場所だったはずなのにいつの間にか各々の怒りや正しさをぶつけ合う戦場になってし…

映画「イエスタデイ」感想: 様々なIFが存在する世界とバタフライ・エフェクト(一部ネタバレあり)

ダニー・ボイル監督の映画「イエスタデイ」を観ました。 突拍子も無いような設定ながら、Beatlesの存在がない事で音楽の歴史が変わっていたり、Help!のアレンジが新たな解釈でよりパンクな曲調になったりと、その辺りのリアリティも秀逸でした。 ある意味で…