おじんブログ

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

Mr_ozinの2023年振り返り

下北沢で買った服を身にまとうMr_ozin 趣味 映画 今年は「ガーディアンズ・オブ・ギャラクシー:VOLUME 3」が有終の美を迎えてとにかく楽しかった。ジェームズ・ガンもMCUから卒業し、シリーズ自体も最後、つまみ者同士の卒業映画として完璧。 MCUがどんどん…

ライブラリのWhyをしっかり読む

ライブラリの公式ドキュメントの細かいところを読んで手元のコードを直していると、ふと「特定ライブラリに依存したことしかできるようになっていないのでは?」と思う。 じゃあライブラリを一切依存しないのは難しい。簡単なものならできるかもしれないが、…

HHKBからKeychron Q1 + Kailh Midnight Pro Silent Switch Linearに乗り換えて、気持ちいい

選定経由 Keychron Q1 HHKBを6年近く使っていて、壊れる予感も全く無かったが、それだけ使っているとマンネリを感じてしまう。 スペースキーを押した時の「ジャカジャカ」した鳴りが気になってきた。構造上仕方ないとは言え、タイピングが強めなので気になっ…

本名バレとThreads

いつ本名がバレたのか Meta 社がサービスを開始した Threads のアカウントを取得し、ツイートした段階 Threads登録した mr_ozin だよ 本名出てるけど勘のいい人にはバレているし仕方ないよね— おじんさん (@Mr_ozin) 2023年7月6日 なぜ本名がバレたのか Inst…

胃カメラを飲んで鼻から小腸まで撮影された話

なんで胃カメラを飲むことになったのか 近親者に胃癌の人が居たため。 胃カメラを飲む前には血液検査(ABC 検診)でピロリ菌に感染しているか調べていました。 幸いにもこの検診は陰性でしたが、近親者に胃癌の人が居たので安心のために胃カメラやろっか、とい…

2022年学んだ技術

筆者情報 今年からフリーランスとしてフロントエンドエンジニアをやっています。仕事では React + Redux Toolkit + TypeScript というごく普通の技術スタックです。 前職は受託開発会社で色々やっていましたが、直近1年はWordPressを触っていました。 Cloudf…

Web フロントエンド実務未経験でフリーランスとしてフロントエンド案件に参画して2ヶ月の感想

参画する前の状態 Web フロントエンド(主に React + TypeScript)を趣味で 2 年ぐらい触っていたけど、実務としてフロントエンドをがっつり触る案件に恵まれなかったという状況でした。 受託開発会社でWeb エンジニアとして 3 年ぐらい働いていましたが、どっ…

退職してフリーランスエンジニアになるためにやった役所手続き

お断り これは自分がフリーランスエンジニア(個人事業主)として開業するために行った役所の手続きの記録です。案件の獲得のノウハウはありません。 概ねの場合、これで充分だと思いますが、不安なら市役所の窓口に聞けばだいたい教えてくれます。そこで確認…

3年4ヶ月勤めた受託開発会社を退職して無職になりました

Hasta la vista, baby 退職エントリーです。 2022/07/31 をもって 3年4ヶ月勤めた受託開発の会社を退職しました。 こういう内容を長々書くのはいかがなものか、という意見もありますが、他の人の退職エントリーを読んでて自分も転職の意思が言語化された経由…

30 歳で受託開発会社を退職してフリーランスのエンジニアとして実務の開発経験を積もうとしている

概略 7 月末で 3 年間勤めた受託開発会社を辞めることにしました。 退職理由としては「実務上の開発経験がほとんど詰めず、雑用業務ばかりで、今後もそういうのに関われる可能性が低いため」です。 自分自身は Web 技術が好きで、特にフロントエンドの領域を…

15%OFFセールに釣られてアーロンチェアを買った

Mr_ozin with Aeron Chair 感想 まだ2日しか使っていませんが、ゲーミングチェアを使っていた時の「ある程度座っていると腰の疲れが溜まって休憩したくなる」というのが無くなって、疲れが溜まらず、ずっと座っていられます。 座面のフレームがガッチリして…

ゆめみ社のフロントエンドコーディング試験をやってみた

取り組んだものは下記です。 notion.yumemi.co.jp 応募する予定はありませんが、フロントエンドの素振りの課題としては面白そうと思って取り組んでみました。 やってみた感想として、適切に作ろうと思うと意外に設計に頭を使うのと、Unit Test の経験値がな…

2022 年度に習得&復習したい Web 技術

誰向け? 2022 年度内に Web フロントエンドポジションに転職したい自分の整理 エンジニアとして 4 年目だけど Web アプリの開発経験があんまりなくて詰みかけている 友人 その他、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!のアレンジが新たな解釈でよりパンクな曲調になったりと、その辺りのリアリティも秀逸でした。 ある意味で…