おじんブログ

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

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年に触りたい技術の領域

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

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

まとめ

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

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

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

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