COLUMN

コラム

2023年04月25日

Serverless Frontend Meetup #2に参加しました

2023年4月21日に開催されたIT系勉強会「Serverless Frontend Meetup #2」に参加してきました。この勉強会は、フロントエンド開発で必要となるバックエンド側の技術に焦点をあてたもので、2回目となる今回は、フロントエンドアプリケーションのデプロイ先として知られている「Vercel」の活用がテーマでした。VercelはNext.jsの開発元でもあり、とても親和性の高いサービスとなっています。個人開発から企業ユースまで数多く利用されています。

勉強会には、オンラインで70名以上、リアル会場にも12名が集まりました。

—

VercelとNext.jsの機能を最大限に活用したA/Bテスト手法

最初の登壇者は、Aiji Uejima (@aiji42_dev)さん。VercelとNext.jsの機能を最大限に活用したA/Bテスト手法について発表してくれました。

Webサービスでは、A/Bテストと呼ばれるユーザー評価手法が行われていますが、Next.jsでA/Bテストする場合「AとBの両方のコンポーネントが紛れ込んでしまう」「管理が大変」「バンドルサイズが大きくなる」といった課題があります。

そこで、ブランチ・デプロイベースで分離する手法を紹介してくれました。こうすればチャレンジャのコードがmainブランチにまぎれることは一切ありませんし、結果をマージするのも破棄するのも簡単です。

そのために、Vercelのプレビューデプロイを活用するのですが、いろいろ運用が大変になりそうだったのでnext-with-splitというライブラリを開発したそうです。

—

Next.jsでの開発を加速させるVercelとNext.js/App Routerの便利な機能たち

2番目の登壇者は、microCMSHiMorishige (@_himorishige)さん。VercelとNext.js/App Routerの便利な機能を駆け足で紹介してくれました。

  • Vercelの便利な機能
  • Deployment Protection：関係者だけに見せる
  • Cron Job：サーバーサイドで定期バッチを実行
  • Edge Config : プロジェクトごとのデータストア
  • Edge Middleware : Middlewareと連携して様々な場面で利用できる
  • Comments : プレビューサイトにコメント機能を追加
  • App Routerの便利な機能
  • Data Fetcing + Cache API : コンポーネントレベルでData Fetchingを可能に
  • Mutatiing Data :
  • Route Groups : ディレクトリ構成を便利にする
  • Route Handlers
  • Image Generation

「Vercelをデプロイ先だけに使うのはもったいない」というコメントが印象的でした。

—

Vercel Astroで気づいたAstroのpros/cons

3番目の登壇者である機械割119%｜frontEndDeveloper (@baan_nasebanaru)さんは、オンラインでの参加でした。

Astro とは、スピードを重視したオールインワンWebフレームワークで、デプロイされるコードにできるだけJavaScriptを含まないという特長を持っています。

静的なサイトからECサイトまで作れると言われていますが、実際にはいろいろ厳しく、all pre-renderを前提にブログやポートフォリオくらいまでが実用的だろうとのことでした。

そして、実際に使ってみて次のような点がつらかったと説明していました。

  • たくさんのgetElementbyI、addEventListenerが必要
  • script、style tagが独特
  • いつもどおりのeslint・TSではない
  • なぞの挙動がある

Webで公開されている情報では、できることは見つけられても、実際に使ってつらかったことはなかなか見当たらないので、こういう感想は役に立ちますね。

—

まとめ

という訳で、Vercelを活用する上で役立つ情報が盛沢山の勉強会でした。

Serverless Frontend Meetup、次回のテーマは認証だそうです。

興味がある人は、こちらのConnpassページから登録してください。

役に立ったら、記事をシェアしてください

コラム一覧

Contact Usお問い合わせはこちら