この記事はハンズラボ AdventCalendar2022 17日目の記事です

はじめに

アドベントカレンダーらしく、1年を振り返るテーマにしてみました。
2022年、長野県に移住したり、スプラトゥーン3が発売されたりと私の人生における重大な出来事が発生し、プライベートでは充実した1年を過ごせたと感じています。

さて、この記事では私が個人・もしくはチームで今年初めて触れた技術などについてざっくばらんに紹介していきます。
技術の詳細な内容は書きませんので、どちらかというと自分の記録用といったほうが正しいかもしれません。
フロントエンドをやっている人間なのでフロント技術をまず紹介し、次にそれ以外の技術、おまけで便利ツールやちょっとハマったことを書いていきます。

前提

今年触った技術の振り返りの前に、これまで主に使ってきた技術を挙げておくと、
ユニケージ（シェルスクリプトで Web アプリを作る手法）、AWS の一部サービス、VBA、Vue.js2 + VueCLI、Docker。
学習だけでいえば MySQL や Django なんかも触れてました。
Qiita も気が向いたら書いているので興味があればこちらをご覧ください。

2019年の後半からフロントエンドエンジニアとなり、主に Vue.js を使っています。
プロジェクトのほとんどはサーバレスアーキテクチャで、フロントからシームレスに AWS のサービスを利用するために、Amplify の JS ライブラリを活用しています。

フロントエンド技術

React.js

小さな通話アプリを作るプロジェクトで React.js を使用した開発を行いました。
普段 Vue.js なのになぜ React.js を使ったかというと、
長いことフロントエンドフレームワーク人気1位で、ネット上にもナレッジがたくさんあり一度使ってみたいと思っていたことと、
Amazon chime SDK が組み込まれた React 用のコンポーネント（amazon-chime-sdk-component-library-react(便利)）があったからです。

所感としては、Vue.jsではよしなにやってくれていたところを自分で書かなくてはいけなかったり、スタイルなどjsxの記法で書くことなどに苦戦した覚えがあります。
今後のプロジェクトでも機会があれば採用したいと思っています。

Vue.js 3 と Vite

ついに Vue 3 に手を出しました。
夏の終わり頃だったのですが、よく使っている CSS ライブラリの Vuetify の3版がまだ Beta 版だったりで
動作の保証がされないためお客様向けではなく社内プロジェクト的なところで検証も兼ねて採用しました。

Composition API により、script タグ内がスッキリしました。
ただ、変数をリアクティブにするために ref を使うところなどは少しコードがごちゃごちゃして見えます。。（呼び出す時に毎回 .value をつけないといけない）

さらに、Vue 開発サーバーとして Vite を採用しました。
Vue-CLI との違いとして、環境変数の呼び出し方が違ったり、Amplify と併用する時に気をつけないといけない（詳細はこちら）などなどありましたが、とにかく速くて快適でした。今後も Vite を使っていきたいです。

ES Lint と Prettier

近年でやっと1つのプロジェクトに複数人のフロントエンジニアが配置されることになり（今まで1人でやってた）、チーム開発について考える年でもありました。
結果、Voler の他に ES Lint と Prettier の設定を VSCode に入れることで、コードの書き方をある程度自動的に統一できたのがよかったです。レビューも楽でした。

Prettier の設定はこんな感じで落ち着きました。

.prettierrc

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "vueIndentScriptAndStyle": false
}

こいつを ES Lint で読み込み、VSCode の設定でセーブ時に自動 lint するようにしています。

.vscode/setting.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Amplify UI

Vue 3 のプロジェクトに Amplify UI を導入してみました。
ドキュメントを見てみると、Vue 向けには認証部分が提供されているので、ログイン画面の開発で利用しました。
今まで JS ライブラリを使っていた際はログインの処理などを書かなければいけなかったのが、
Amplify UI で提供されているコンポーネントを配置するだけでログイン、パスワード再発行、新規登録の処理まで完成させることができ、開発スピードが爆上がりしました。
日本語化や primary カラーの変更も簡単ですので今後も使っていきたいツールです。

TypeScript（勉強中）

チームの勉強会では、サバイバルTypeScriptを使わせていただきながら TS の勉強をしています。
Vue 3 にしてから参考記事が TS で書かれていることが多く、読めるようになるため始めました。
サイトの方もまだ作りかけのようですが、型を定義することでどんな良いことがあるかを体感できたりします。

フロント以外

Appsync（GlaphQL）

通話アプリの開発で、AWS サービスの Appsync を採用しました。
GlaphQL の Subscriptions で、Web アプリ上に受信通知を表示させ通話を開始するような仕組みを作りました。
Appsync 自体はバックエンドチームが構築し、フロントとしては AWS コンソールから Appsyncのスキーマをダウンロードして React アプリに読み込ませました。
こちらの公式記事が大変参考になりました（3. Amplify ライブラリ (Javascript) x 既存の AppSync）。

slackApp

slack で、「特定のチャンネルで特定の人が投稿したメッセージを別のチャンネルに転送する」という bot を作りたく、slackApp を使用しました。
こちらの記事が大変参考になりました。

OpenAPI

環境構築は他の方にしていただいたのですが、OpenAPI を使った API 定義書を作成しました。言語は yml です。
OpenAPI 自体は以前より活用していたのですが、今年から prism を導入したことにより、API の開発の終了を待たずに画面から API のコールをして動作確認ができるようになりました。OpenAPI で定義したダミーのデータがレスポンスに入ってきます。
これによりフロント開発の効率がぐんと上がりました。また、前提として API 定義書をしっかり作る必要があるので、ついでに完璧なドキュメントが残ります。一石二鳥です。

CodeceptJS

E2E テストに CodeceptJS を使ってみました。
弊社で実績もあり（参考記事）、コードが直感的で使いやすそうだったので導入してみました。

画面数40弱くらいの中規模 PJ でしたが、7〜8人で取り組んで結構時間がかかった記憶があります。
アプリに少し変更が入っても、コマンド一つで他機能への影響がないかチェックできる優れものですが、やはりその分時間を要するので余裕のある PJ にしか導入できなさそうです。

おまけ

ちょっとした今年のニュースを紹介します。

DeepL の Chrome拡張が便利
待望の拡張機能が昨年末リリースされ、今年初めから使い始めました。Chrome の標準翻訳より精度が高い（個人的な意見）ほか、英文の一部だけ選択して翻訳できるのが嬉しいです（さらに精度が高くなるため）。

github で未レビューのプルリクがあるときに slack 通知するようにしたら QOL が上がった
slack の GitHub アプリから DM で「まだレビューしてないプルリクあるで！」と通知させる設定を入れてみました。始業時間の10時と夕方17時に来るようにしています。少し古いですがこちらの記事が参考になります。

レビュー or マージされるまで一生通知してくれるので、PJ が活発な時だと普通の slack 通知が流れていってしまいがちなのでとても便利でした。
また、アカウントに設定を入れるのでリポジトリが増えてもいちいち設定を増やさなくても大丈夫です。

M1 MacBookPro で Node の Docker イメージが使えなかった
2年前くらいの PJ の開発環境が、node:14.15.5-alpine を使った Docker 環境だったのですが、
M1 MBP で立ち上がらないということが起きました。

arm64のアーキテクチャに対応していない Node バージョンだということを教えていただき、Dockerfile のイメージ指定箇所に --platform=linux/amd64 オプションを入れることで解決しましたが、
docker build の際のエラーメッセージからは M1 が原因とは読み取れず、教えてもらってなかったら詰んでました…。

まとめ

私の個人的な雑記をここまで読んでいただきありがとうございます。
こうして書き出してみると、思ったよりもいろいろやってるなあと俯瞰して見ることができました。
来年はどれくらい新しいことに触れてみるかといった目標も立てやすいと思います。

皆さんも今年の振り返りをしてみてはいかがでしょうか？