Web デベロッパーとして 2020 年に使った技術スタック

2020 年最後のポスト。

立場

主に店舗運営を支援するプロダクト・サービスの運用・開発に、一フロントエンドエンジニアとして関わらせていただくと共に、個人としてもいくつかプロダクト製作を進めています。

そうした前提の下で一年間の KPT、利用した技術一覧を見ていきます。

最後だけ自身の手違いだが、いずれも COVID19 を一因に言えます。

来年も同じような理由で上手く行きませんでした、というのでは少々惨めないので、ここはひとつ打開したい。

Scrap 機能はベータ利用という位置付けで当ブログに導入済。これまでのブログほどの内容では無いけれど、ちょっとしたことを記録するのに活用していきたい。

これは GitHub Profile Summary Cards という便利ツールを使わせてもらい自動生成している。自身の Github アカウント内のみ、他 Gitlab を使っているプロジェクト等あったが、この自動生成分には含まれていません。

主軸としては TypeScript/React/AWS の辺りでした。おしごとの場面では React を使うことが増え Vue 以上に触る機会が多くなりました。

フロントエンド環境の刷新から運用効率化の一端を担うツール製作まで、幅広くかつ手堅く動いていました。

昨年は Vue CLI をベースに MPA 環境の構築を進めたが、これとは全くの別プロジェクトながら同じような MPA 環境の構築を進めています。単なる描画に留まらずユーザの意向をサーバサイドに反映する、SPA としての双方向性の実現に寄与しました。

既に納品を済ませたものについては、取り急ぎ Vue 3 へ更新する予定はありません。

しかし、Options API を採用したことで、今後仮にメジャーアップデートを試みたとしても、そこまで大変な労力にならないのではと考えています。

一方、Vue MPA 環境の外に構築を進めている React MPA 環境下では、React Hooks を書いていくことを基本としたガイドラインを策定しました。

また、多言語化の一環で、新たに react-i18next を選定し、その導入を進めました。

最後に、コンポーネント集 (仮) の製作を開始しました。まだ、既にプロダクトへ組み込まれたもの、そうではないものにと二分されていますが、実際こればかりはフロントエンドをやっている身が私のみというプロジェクトでやるせない気持ちも然り。

しかし、フロントエンド技術の標準化に時間を当てられたのは、こうしたプロジェクトにとって大変意義深いことだと感じています。

去年以上にライブラリ用プラグインを自作することが多かった 1 年。無ければ自分たちでプラグインを作るのをモットーにした。

その例を下記に挙げた。

プライベートに限っては型を無視して JavaScript で書くこともあったが、ちょっとしたツール製作を含めても、大体 TypeScript で書いていた。

スプレッドシートでイシューを管理しているため Google Apps Script を使って効率化を図る場面が増えた。また GCP AppEngine や CloudRun を組み合わせてトリガー実行する場面も多く存在、お金もかからないのでとても重宝していたり、と Google 様々。

来年はフロントエンド技術を磨くのはもちろん「特定のフレームワークにとらわれず」新たな知見を生み出したい。