トーク

私が所属するBASE株式会社では、ネットショップ作成サービス「BASE」というネットショップの作成・運営を支援するプロダクトを提供しています。

本トークではCakePHPとVue.jsを組み合わせて実装している、ショップオーナーさん向けの管理画面のビルドとデプロイを支える技術についてお話します。

トピックとしては以下のようなことについてお話する予定です。

• 最近完了したプロダクトコードのmonorepo化とそれに関連するツールと運用の工夫
• デプロイ速度を上げるためのビルド成果物のキャッシュ戦略

ウェブフロントエンドのビルドツールにViteを使うケースが増えてきたと思います。
Viteを直接利用するケースが多いと思いますが、AstroやSvelteKitなどのフレームワークは内部でViteを利用しています。
これらのフレームワークの理解を含めるために、Viteを利用した簡易的なオレオレフレームワークを作りながら拡張方法について紹介します。

実務に直接役に立つ内容は少ないですが、ViteプラグインやViteベースで作られたフレームワークのコードリーディングへの抵抗感が減らせたらいいなと思っています。

知人の運営するヨガスタジオでは顧客情報の管理をExcelで行なっていましたが、相談を受けてこれをWebアプリ化しました。

運用開始してから1年半、大きなトラブルもなく順調にサービス稼働しています。
また、この間にもユーザーのフィードバックを受けての機能追加や、使用ライブラリのバージョンアップ対応も行ないました。

今回のプロダクト開発・運用の経験を通じて得た知見をお話しします。
特に、個人でプロダクト開発してお金を稼ぎたい人には１つの事例として参考になるかと思います。

■言語／環境
・React
・TypeScript
・Firebase

■スケジュール
2020年秋頃　課題ヒアリング
2020年の年末〜年始　冬休みの２週間でプロトタイプを開発
2021年1月〜2月　β版リリース、お試し利用
2021年3月〜　正式リリース（有償にてサービス提供）

ユーザーの操作から実際のシステムまでを自動でテストするE2Eテストは、すでに動いているフロントエンドアプリの品質を担保しながら開発する際に欠かせないものと考えています。一方で、HTMLのクラス名でボタンや入力欄を指定したりすると、HTML構造を変更しただけでテストが壊れメンテが大変になります。 (テストから押すボタンにdata-属性をつけて回ることも提案されています)

一方で、HTMLにはアクセシビリティのためのWAI-ARIA規格があり、スクリーンリーダーのために必要なメタデータを記述できます。
ここでスクリーンリーダーとは人間のための機械であり、機械で処理しやすいということは、E2Eテストでも利用しやすいということになります。
これを実践してみての知見を話します。

皆さん毎日勉強されていますか？されてますよね？過去の私は勉強できていませんでした．
notion に「後で読む」記事リストがどんどん溜まって来たはいいものの全然消化できず…

とある日にリストに追加するだけで満足している自分に気付いてしまった私は，一念発起！自分の中で消化しようとするから進まないのなら，外部に公開して外の力を借りれば良い！ということで，毎朝９時（前後）から Twitter Space で技術記事を読むという会をはじめてみたところ，ゴリゴリリストが減っていく体験は気持ちよい．さらに今まであまり読んでこなかった海外の記事を読むようになり，国外の視点も入ってくるようになりました．ただし，比例してゴリゴリ記事リストが増えていきましたが（笑）

そんな中の気付きや学びなどをフロントエンドの領域に絞ってお話してみるとともに，皆さんにも朝活の素晴らしさをお話したいと思います！

主に下記の内容を話します！

• headlessブラウザを使ったオートメーションの工夫
  • 実行するコード生成
  • セッションを再利用
  • セレクターを指定する際の工夫
  • 任意のJavaScriptを実行
• UIテストの工夫
  • 実行するコード生成
  • セッションを再利用
  • Visual Regression Testingを実施
  • APIへのリクエスト、レスポンスをコントロールする
  • GitHub Actionsで実行
  • HTML Test Reportsの紹介
• Component Testing with Playwright
  • （現在Experimentalなので、本利用出来るようになったら内容に含めたいと考えています）