おじんブログ

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

Mr_ozinの2023年振り返り

下北沢で買った服を身にまとうMr_ozin
下北沢で買った服を身にまとうMr_ozin

趣味

映画

今年は「ガーディアンズ・オブ・ギャラクシー:VOLUME 3」が有終の美を迎えてとにかく楽しかった。ジェームズ・ガンもMCUから卒業し、シリーズ自体も最後、つまみ者同士の卒業映画として完璧。 MCUがどんどんマルチユニバースやドラマシリーズを絡めて内輪向け感を強める中、ガーディアンズ映画として独立させた内容なのも好感だった。

「Pearl」はプライム・ビデオで見たが前作「X」よりも断然好きだった。「オオカミ狩り」は2本の典型的な映画をかけ合わせることで新鮮味とバイオレンスを加速させた快作だった。

北野武監督の「首」も初めて同監督の作品を劇場で見たが、これも権力をうまい具合に風刺しつつ、シニカルな笑いとして昇華させていて大変良かった。世界の北野映画と言われる割に配信も再上映もあんまないのでこれを期に改善して欲しい。

ベストには入れなかったけどちょっと悪い意味で広まってしまった「バービー」も、自分たちが生きている現代社会のあり方を提示され、どう生きるのか?とシリアスな風刺をポップに包んでいて、なんで今さらバービーを題材に?と思ったが、正しく現代に沿う良い映画だった。

「自分に意外性や新たな視点を与えてくれる映画が好き」というのは特に変わらないけど、アクション映画のバイオレンスとか構成の妙とかも好きになってきた。来年も映画楽しみたい。

キーボード

HHKBが至高だとずっと思っていたけど、改めてメカニカルキーボードを買ってみたらすごくハマった。

買ったのは2個。

  • Keychron Q1 V2
  • NuPhy Halo75

すごく良い。筐体自体がすごくしっかりしているのもあるが、標準で付いているスイッチとの組み合わせでも十分打鍵感が良い。NuPhyは遊び心あるポップな見た目ながら打鍵感はかなり安定していて、とにかく楽しい。

個人的に打鍵音が静かな方が集中できるので静音スイッチに載せ替えているが、底打ちしてもHHKBのコトコト音程度しか鳴らなくなる。

そう言えばメカニカルキーボード版HHKBが今年発売されたので、来年からゲーミング以外のメカニカルキーボードも流行っていくんだろうなと思った。

体調

基本的にずっと胃腸が悪い。毎日30分ぐらいはトイレに篭っている。逆流性食道炎が慢性的に続いている。何食ってもすぐにお腹が張る。今年3月に胃カメラ飲んで胃がんではないことは確定したがそれでもずっと痛い。

筋トレは目標にしていた自体重超えをベンチプレスで狙う目標を達成したが、体重は全然減らない。上記の胃の不調もあるのに減らない。なのにずっとベンチプレスはすくすくと最大重量が上がっている。不健康なのか健康なのかよく分からない。

技術・プログラミング

念願だった個人Webサイトをやっと作った。ドメイン取得して1年ぐらいずっと放置していてやっと作れた。実際に作ってみると要素はどう配置しようか、みたいな悩みが無限に出てくる。デザイナーではないのでこの辺の勘が本当に分からない。デザイナーさん凄い。

mrozin.me

生成AIが世間ではブレイクスルーだったけど個人的にはCloudflare Workersが再びアツい。CDN上で動くサーバー実行環境みたいなものだが、基本的にWebアプリケーション作るのに必要な機能は大体パブリックになって、フレームワークのHonoも相まってかなり書きやすい。Discord Botも低コストで作れた。

何故か2022年に書いた結構基礎的なZennの記事が今年になって反応が増えたので、今年になってCloudflare Workers触りだした人が増えたんだろうなと推測している。

zenn.dev

結局AWS勉強すると言いながらちょっとしか勉強出来なかったのでちゃんと腰入れて勉強します。

zenn.dev

仕事

2022年があんまりにもダメすぎだったので比較すれば大体良いけど、それでも2023年は同じぐらい悪かった。

React + TypeScriptでガンガン開発していたが、人手不足なので別業務にアサインされて、「他人のテスト結果でNGになった項目を仕様書と突き合わせて、確定しなければもっと詳しい人に投げる」という業務を半年間やっていた。これが本当に良くなかった。

無限に愚痴が出てしまうが、プログラミング好きな自分の特性とも全然噛み合っていないのと、職務経歴でプラスにならない業務をやらされるのは、職務経歴を種に新しい経験を増やしていくフリーランスエンジニアには耐え難い苦痛ではある。

結果として3ヶ月ぐらい仕事が見つからず、Twitterで仕事募集した。この辺の経由は後日別ブログに書きたい。辛すぎてフリーランスエンジニアを辞めるか本気で悩んだ。

まとめ

映画やプログラミングの趣味は相変わらずずっと楽しいが、体調と仕事がずっとボロボロだった。 来年はボロボロなところを直しつつ。適度にコンフォートゾーンを抜け出して新しい事をやっていきたい。

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

ライブラリの公式ドキュメントの細かいところを読んで手元のコードを直していると、ふと「特定ライブラリに依存したことしかできるようになっていないのでは?」と思う。

じゃあライブラリを一切依存しないのは難しい。簡単なものならできるかもしれないが、プロダクションレベルのことを考えると、要求に対して考えることが爆発的に増えてしまう。現実的ではない。または、既にライブラリが使われているプロジェクトに入ることで利用するパターンも有る。

なのでどのライブラリもサンプルコードと公式ドキュメントをさっと目を通して使えるようにする。業務中のコードなら先人が残した書き方を参考にする。正しいかは別にして、とりあえずさっと使えるようにする。

仕事としてはそれで正しいが、ふと「日々出るライブラリに振り回されているんじゃないか?」と思う様になってきた。

そう思ったので、ライブラリの公式ドキュメントを見るときは、「Why」の項目を読むようになった。「Why」にはそれが生まれた背景が書いてあり、作者の発想の方向性を知ることができる。出発点が分かるので、「設計者はこう考えたのかな?」と、アタリを付けて利用できる。よくわからないまま振り回されるのは減ると思う。

流石に全部のライブラリのWhyは探れないようにしても、コアなライブラリについては読んでおいたほうがいいと思っている。ViteとかReactあたり。

後続ツールは基本的に先発の「課題点」をクリアする、または前提背景が変わってきたため生まれる。その課題点をすくい取る審美眼は、ライブラリが変わっても持ち越せる資産だと思う。

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

選定経由

Keychron Q1
Keychron Q1

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

また、Fnキーを押さないと矢印キーすらタイプ出来ないのは日常使いとしては辛い。ソフトによってはF1キーとかに操作が割り振られていたり、ショートカットにF1~F12系列のキーを登録するときに認識してくれない時がある。

そんな中、自作キーボード界隈の盛り上がりを見ているうちに「昔使っていたメカニカルキーボードにまた手を出して」みようか、という気持ちになった。

そこから幾多のセールの見逃しを経験して最終的にKeychron Q1に決めた。

Realforce TKLモデルも良かったが、比較していくうちにKeychron Q1の方が魅力的だった。

Win / Mac切り替えを1スイッチできる

仕事と遊びの都合で接続先PCを毎日切り替えることが多い。RealforceだとWinとMac用で別モデルのためこれが出来ない。多分無視して使えるかもしれないが。

75%キーボード

正直TKLレイアウトでも良かったかもしれないが、机が狭いので少しでも小さい方がいいかも。

スイッチ交換可能

自作にはそんなに興味ないけどスイッチやキーキャップを交換して自分好みに変えられるのはマンネリ解消に良さそう。

ゲーミング光

人生一度は光ったヤツ欲しいじゃん。

使ってみてどうだったか

最初は付属していた赤軸のGateron G Pro Redから静音タイプであるKailh Midnight Pro Silent Switch Linearに換装したのを使っているが、理想的で快適に使えている。

Gateron G Pro Redは赤軸とは言え底打ちすると「バチバチ」鳴る。結構強くタイプするので静音タイプのスイッチに変えてもあまり意味ないかと思っていたが、欲を出して静音タイプに手を出した。

結果的にはKailh Midnight Pro Silentに変えてみて大正解だった。静音タイプとはいえ本当に音が静か。赤軸で底打ちした時のバチバチ音がない。強いて言えばスイッチが擦れる時の音が聞こえる程度。音量的にはシャーペンでちょっと筆圧強めで紙に書いた時程度。多分タイプしながら通話してもノイズが乗らないと思う。

打鍵感もHHKBに少し近い気がする。HHKBは「スコスコ」としか形容できないが、Kailh Midnight Pro Silent Switch Linearは「シャコシャコ」といった感じ。HHKBやRealforceは「静電容量無接点方式」なのでメカニカルスイッチとは原理的に全然違うし、打鍵した時の圧もKailhのほうが軽めだが、これはこれでいい。この軽さは押す時の引っ掛かりがないLinearタイプだからかもしれない。

筐体もアルミニウム製だからか、かなり重く、強くタイプしてもびくともしない。また、クッション機構が仕込まれている模様。試しにキーを押し込んでみると緩衝材みたいなものが仕込まれていそうなのがわかる。 スイッチとキーキャップだけでなくこの筐体の機構も打鍵感の一要素を兼ねているんだと思う。

HHKBと違ってとにかく重く、1.8kgぐらいなので、これを持ち運ぶは流石に狂気の沙汰だと思う。

まとめ・余談

というわけでHHKBからKeychron Q1に乗り換えて満足した。たまたまセールやっていたのでQ1の赤い筐体を買った。

Keychron Q1 QMK Custom Mechanical Keyboard - Version 2

KeychronはQシリーズに限らず、K Proシリーズも充分魅力っぽい。多分持ち運び用に買うかもしれない。 種類が多く見えるが、基本的にQ、Q Pro、K Proシリーズとキーボードのレイアウト100~60%の組み合わせで選べばいいっぽい。

最近だとハの字で打鍵するAliceレイアウトや左右分離レイアウトがある模様。Aliceレイアウトに関しては最近色々な新商品が出ているみたい。

初めてキーボードのスイッチ単品を買ってみたが、種類によっては売り切れになっていることもしばしばあるっぽい。 自分はkeychron.comで買ったが、在庫状況によってはいろんなショップで買い集める必要がありそう。 日本国内だと遊舎工房が品揃え豊富で良さそう。

shop.yushakobo.jp

後々調べてみたらQシリーズ+Kailh Midnight Proの組み合わせが売っていて最初からこれにすればよかったと思った。赤色のボディではないが。

Keychron Q3 QMK Custom Mechanical Keyboard

本名バレとThreads

いつ本名がバレたのか

Meta 社がサービスを開始した Threads のアカウントを取得し、ツイートした段階

なぜ本名がバレたのか

Instagram を格好つけて運用するために本名で登録しており、 Threads 登録の際に Instagram のアカウントが必要だったため、特に何も考えず、そのアカウントをそのまま流用したため。

mr_ozin という ID の同一性を大事にしたかったこと、流行に一早く乗りたい気持ちが先行したため、そのまま Threads アカウントを Twitter で公表した。

本名がバレた反応

アカウントのオリジナリティを作りたいがために自撮りをアイコンにしている。

そのため下記のフォロワーの反応で自分のことが言及されていた。 ちなみに、そのフォロワーの Threads のフォロー欄を見たら顔出ししているのが自分しかいなかったため、自分のことだと確信した。 思っていた以上に顔出ししているオタクアカウントはいないらしい。

実を言うと 8 年以上前に自分の名前をほぼ分かる形で書いていたが特に反応はなかった。

Threads の感想

リリースから現時点で、フォローした人の投稿が時系列順に表示されるタイムライン機能がないというのは結構衝撃的ではある。「これでリリースしちゃったんですか」と。

Threads に登録した人が口を揃えてこの点を指摘して「ダメだ」と言うし、自分もインフルエンサーっぽい投稿がずらっと並ぶ投稿一覧を見て、民主的な雰囲気がない。高層ビルの広告をずっと見上げているような気分になる。

もちろん Meta 社はタイムライン機能が足りていないことは把握していると思う。 Instagram でも基本はフォローした人のタイムラインが流れている。

(もし Threads が Instagram みたいなタイムラインと言っている人がいるなら、Instagram エアプ勢の可能性がある)

この背景には Twitter の閲覧制限というショックのタイミングをを狙ってリリースを急いだのかもしれない。 実際には Threads のユーザー数は 3000 万人を突破しているそうなので、自分が思っているよりもタイムライン機能というは大事じゃなかったのかもしれない。

xtrend.nikkei.com

何人か絵描きさんをフォローしたらタイムラインが色んな絵描きさんの投稿になった。ターゲティングされているが、高層ビルの広告を見上げているような気分は変わらなかった。

そろそろ少し視点を落として、ビルの足元で変なことをしていたり、独自のスタイルを持っている一般人に目を移したい。

自分のことを特徴のない人だと思う人でも、よく見ればどの人も独特の考え方があるし、賛同はしなくても観点として面白い人はいるし、そういう人に目を向けられる空間がインターネットには欲しい。

そんなわけで Meta 社さん、Web フロントで最重要と言える React を開発しておきながら Web 版がまだないのどうなのと思っているので、お願いします。

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

なんで胃カメラを飲むことになったのか

近親者に胃癌の人が居たため。 胃カメラを飲む前には血液検査(ABC 検診)でピロリ菌に感染しているか調べていました。

幸いにもこの検診は陰性でしたが、近親者に胃癌の人が居たので安心のために胃カメラやろっか、という話になって思わず二つ返事でやりましょう、って感じです。

胃カメラの結果ですが、結論として特に異常はありませんでした。ただし荒れていることは確かなのでゆっくり食事しましょうということでした。

そもそもとしてなんで消化器内科に行っていたのかというと腹がパンパンに腫れ上がることが起きたためです。ちなみに原因は逆流性食道炎でした。

ガスが溜まって腫れ上がった著者

どんなことをやったのか

  1. 実施前日に早めに夕飯を終えて朝飯を抜いて病院に行った
  2. 胃の中を綺麗にする薬を飲んだ(バリウムっぽい味がする)
  3. 鼻の通りを良くする薬をシュッシュされた(飲むと苦い)
  4. 鼻の麻酔をされた(なんか甘いゼリーっぽいけど痺れた)
  5. 鼻にチューブっぽいものを取り付けられた
    1. このあたりから看護師さんに背中を摩られまくって「何が起きるんだろ」ってなった
  6. 胃カメラを鼻から挿入(細くて長い)
  7. 終わって 15 分後ぐらいに診断結果を聞いた

胃カメラの感想

鼻から挿入するので辛くないかと思いましたが喉の付近を結局通るのでそこが一番辛かったです。

ただそれを抜けると痛覚はないので全然辛くありませんでした。 鼻呼吸ができないので口からヨダレを垂らしまくりながら口呼吸をするのですが、食道を通り始める頃には口呼吸に順応したので「なんか身体の中に管が入っているな」って感じでした。

暇すぎたので、痛覚ないのに「今どこら辺にカメラ入っているかな」って考えていました。

副作用っぽいもの

  • 鼻と口付近から粘液が出まくってカピカピになる
  • オナラが結構出た
  • お腹が 1 日中緩いのでトイレによく行った
  • 朝から何も食べていないにも関わらず夜になっても食欲が沸かなかった

胃カメラ終えて 30 分後ぐらいにはもう飲食 OK になるのですが、本当に何も食欲が湧きませんでした。 なんかカロリー取らないとヤバそうだなって思っていたところ、オレンジを丸ごと絞ってジュースにする自動販売機があったのでそれを飲みました。味はオレンジ 100%って感じで美味しかったです。 そういえば林原めぐみさんがラジオで言っていたな~って思い出しました。

lineblog.me

夜になって固形物摂らないとカロリー足りなくなると思って二郎系ラーメンのもみじ屋に行ってきました。空腹じゃない時に食べても美味いやつでした。

ramendb.supleks.jp

胃カメラを終えて

胃カメラの値段は 5000 円しませんでした。保険適用とはいえ手間かかった割に安いなぁ…って感じです。

ちなみにお嬢様系 VTuber みたいに写真貰えるかと思って聞きましたが貰えませんでした。なので写真目的で受診するのはやめましょう。

2022年学んだ技術

筆者情報

今年からフリーランスとしてフロントエンドエンジニアをやっています。仕事では React + Redux Toolkit + TypeScript というごく普通の技術スタックです。

前職は受託開発会社で色々やっていましたが、直近1年はWordPressを触っていました。

Cloudflare Workers

2022年一番趣味で触った気がする。8月に無職になって暇になったので調べていた。「エッジサーバー上で動くFunction as a service」と言えば大体伝わると思う。

とにかくResponseが早い。無料プランなのにデプロイしたHello Worldレベルのコードが20-30msレスポンスを返す。

ちょっとした外部APIへのRequestでAPI Keyを秘匿して通信するために使ったり、キャッシュしてオリジンサーバーへのRequestを減らしたり、定期実行したりと色々使える。 関連するミドルウェアも豊富で、S3互換のR2や、Key-Value形式で保存できるKVがある。組み合わせればお手軽オレオレファイルアップローダーも作れる。

開発体験も良い。公式が用意しているwranglerでサクッとボイラープレートを用意したり、GitHub Actionsのworkflowを利用して自動デプロイ環境を簡単に組むこともできる。

ただ、既存のFunction as a serviceとは違い結構制限がある。 File base routingではなかったり、ワーカーの各種APIが少し癖がある。 またResponseの早さという旨味を活用するにはキャッシュしたりKVに保存/読み出しするなど、パフォーマンスを意識して書く必要がある。

とはいえ豊富にあるExampleやDocumentを見ればだいたい作れると思う。

次々発表される新機能の中で、Puppeteerが動く「Workers Browser Rendering API」はかなり注目している。 Vercel functionでPuppeteer動かそうとしたら諸々の制限で挫折したので、多少課金が必要でも使うと思う。

blog.cloudflare.com

npm ( Pure ESM パッケージの公開 )

npm の公開についてHello Worldレベルのことはしたが、それから最新状況を全然キャッチアップできていなかったのでおさらいした。

npm の CommonJS と ES Modules のアレコレも最近やっと落ち着いてきて、 Pure ESM という形式でnpmを公開することで、公開時のビルド設定やpackage.jsonに頭を悩ませる必要がなくなった、ということを知った。

TypeScriptで型付きでPure ESMで公開するときには具体的にどうすればいいのかは調べて下記でまとめた。

zenn.dev

自動テスト(単体テストコード)

恥ずかしながら仕事でも趣味でもテストコードを書く習慣が全然なかったので実行が早いと言われているVitestを使ってUnit Testを書いていた。

テストコードを書いた感想としては、後でテストしやすいように実装するので、基本的な「関数の責務や小さく保つ」「引数と返り値を意識して設計する」を意識してコード書けるようになった気がする。

前職で細かい修正のたびに手動テストして、それが開発の度に雪だるま式にチェック項目が膨れが上がるという辛い経験があるからか、自動テストは書ける段階から書いていきたい。新しいフレームワークを入れるにしても、どうテストを書くかも意識していきたい。

手動テストに対する所感はベテランの人も述べていて、やっぱり自動テストでコードを書いたり捨てたりできるポータビリティの担保は大事、と思った。

yshibata.blog.ss-blog.jp

これはDBにデータを投入してチェックする時のUnit Testを書いた記録。

zenn.dev

2023年に触りたい技術の領域

機械学習に関してはキーワードは点々とは耳にしているが、手を動かしていないのでどう動いているか実感がない。画像中の物体認識や自然言語処理をやれたら面白いことできそうだなと思いながら学んでいる最中。

AWSやGCPは、自分が無料でデプロイできるサービスばかり使っているのと、インフラをガッツリ構築する機会が仕事でもないので後回しを続けているが、いい加減一人で一通りできるように向き合いたい。

まとめ

大体の場合は技術やライブラリは必要に駆られて1ヶ月程度でキャッチアップしながら仕事で学んだ方が良いと思う。なのに、こうやって趣味の時間で技術を学んでいるのは面白さを感じているからではあるが、問題に対して対応できる手札を多く持っておいた方が良いと考えているからでもある。

経験を積む中で、別のアプローチだったらあっさり解決することを不適切なアプローチで労力かけて解決しているんじゃないかと疑心暗鬼になることがあり、その不安を軽減する意味合いもある。どうやっても大変な事はあるが…

そもそもとしてそれは解決するべき事なのか?という議論もしたいが、自分に降ってくる時点で「やると決まった事」なので自分がwhyを入れる余地が無い…辛い!

とりあえず目の前の問題に向き合いながら、目の前の問題で埋もれないように頑張っていきます。

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

参画する前の状態

Web フロントエンド(主に React + TypeScript)を趣味で 2 年ぐらい触っていたけど、実務としてフロントエンドをがっつり触る案件に恵まれなかったという状況でした。

受託開発会社でWeb エンジニアとして 3 年ぐらい働いていましたが、どっちかというとコード書くより社内での Google Workspace 導入とか社内 Wiki 整備とかそういう DX 系のことの方が多かったです。

良かったこと

  • 思っていたよりコードをガシガシ書く
  • 思っていたより趣味でやっていることもちゃんと通用すると実感できた
  • 「フリーランスとして活躍してるエンジニアは全員バキバキにできる人」という先入観がいい意味で崩れた
  • 良くも悪くも React + TypeScriptを採用している現場のことを知れた

前職だとコード書く仕事が少なかったのでそういうものかと思っていましたが、現在の現場では毎日ガシガシ書いています。 もちろんコード書くだけじゃないですが、前職とは全然違うので良い意味でカルチャーショックです。

前述の通り、趣味ではフロントエンドやっていたけど実務では無縁だったので「通用するかな?」と思ったけど幸いなことにやっていけています。

「フリーランスで使えない奴はすぐにクビ切り」とあらゆるところで脅されまくってビビり散らかしていていましたが、結構初歩的なことで詰まっている人も居て、それに対して質問していい雰囲気があったので安心しました。

フロントエンドは変化が激しいというのも落ち着いてきて、複雑なUIを作る際にはReactが「枯れた」立ち位置にはなってきたと思います。 ただ、Reactはフレームワークであり、良くない設計であれば腐ります。 その点では基本的な「関心の分離・捨てやすいコード」を意識した書き方はどこでも大事。

悪かったこと

  • 責務が分断されすぎて、トラブルがあった時に責務を超えて動けない
  • 契約の交渉がよくわからない

趣味でやっているときは基本的に 0 から 10 まで全部 1 人でやってしまうので、責務が分かれていると「あーこれ自分で巻き取ってしまえばすぐに終わるのに」ということを考えてしまいます。

とはいえ担当する責務が多くなると自分のキャパシティを超えて期待通りにできないこともあるだろうなというので、責務が決まっているのは一長一短だと感じています。

案件の交渉ですが、自分自身が経験が浅すぎるのであんまり強く言えないかな、と弱気になっているところと、交渉自体が人それぞれ過ぎて知見がないので未だに分かっていません。主導権をある程度握らないと駄目だなとは思っていますが…難しい。

まとめ

結果論にはなりますがフリーランスとしてフロントエンドの実務経験を踏み出してよかったと思います。良い意味で色んな「壁」を壊せたと思います。