トーク

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

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

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

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

最近流行りのCSS関連の技術としてよく話題に上がるTailwind CSSについての発表です。

Tailwind CSSはユーティリティファーストのCSSフレームワークで、以下のようにHTMLに対して「ユーティリティ（汎用）クラス」を設定することで、スタイルをあてる方式を取っています。
例： ‹button class=”m-8 px-8 py-4 bg-red-400 hover:bg-red-200”›

本トークでは、この設定されたクラスの中の hover:bg-red-200 の hover: 部分（これを状態（ステート）修飾子と呼びます）に注目し、他にどのような修飾子があるのか？どんな使い方ができるのか？を限られた時間でできる限り余すこと無くご紹介します！

意外と知らなかった。ここまで表現できたのか。となる修飾子がたくさんあるので、ぜひ聞いてください！

ウェブフロントエンドのビルドツールに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テストでも利用しやすいということになります。
これを実践してみての知見を話します。

UIとAPIが噛み合っていない、DB上の概念と異なるのでうまく引いてこれない、UIがAPIに引きずられてしまう、などで開発がうまく進まなかったり、理想のデザインを実現できなかった経験はありませんか？

DB設計にはさまざまなトレードオフがあり、設計時の選択によっては、ほしい情報をほしい順番で返してもらうために、開発者やコンピュータのリソースをより多く必要としてしまうことがあります。またAPIの構造がユーザーが理解する概念と可能な限り合致していると、1:1で対応できて楽になります。一方でバックエンド側の事情とのバランスもとる必要があります。

デザインに関わる人が、モデリングの観点でバックエンドの設計にどのようなところに気をつければ良いのか、事例を踏まえて紹介します。

弊社(THECOO株式会社)のメインプロダクトであるFaniconではこれまではほぼ全てのWebフロントにVue2が使われてきましたが、今年の7月にVue3への移行が完了したのでその際に並行して走ってる開発を止めずにエンジニア1人だけでミニマムに移行を完遂するための登り方を前半では語っていきたいと思います。
・移行ビルドの導入
・エラー解消と代用ライブラリの導入
・チームへの周知
Vue3に移行すればそれで全ての課題が解決されたというわけではありません。
既存コードがJSで書かれていた事、テストが存在しなかった事、UIに統一感が無かった事など依然として課題は残っていました。
そこで、トーク後半では弊社でさらなる成長に向けて取り組んでいる以下の試みについて紹介します。
・ JSのTS移行
・単体テスト + VRTの導入とCIによる自動化
・デザインシステム導入

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

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

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

ここ数年、コーポレートサイトやウェブメディアといったウェブ制作用途におけるReact/Vueの採用が増えてきました。
これらの技術を採用することでより良い開発者体験を得られることはできましたが、ユーザー体験という意味では一部毀損されてしまった点もあります。毀損されてしまった点の中で大きいのが「パフォーマンス」です。
こういった状況もある一方で近年、ページ中の必要な部分だけJSを有効にし小さなJSで動作させるIsland Architectureというアーキテクチャを備えたフレームワークが登場しています。
本セッションではNext.jsとAstro（Island Architectureを採用しているフレームワーク）を例に、開発者体験やユーザー体験を比較しつつ、各フレームワークに適したサイトの例や、Island Architectureがもたらすメリットとデメリットを比較していきます。

現在ホテルの清掃管理アプリをPWAで開発し、本番運用しています。
実際にPWAを本番運用している事例は多くないと思いますので、
・Next.jsのnext-pwaを用いたPWAの開発方法
・PWAを採用した理由
・何が良かったか、何が大変だったか
などを通して、自分の好きなPWAという技術の未来についてまでお話しできればと思います。

Testing Trophyとは、Kent C. Dodds 氏が提唱するJavaScript アプリケーションのテストコードに関する投資対効果のガイドです。
このTesting Trophyでは一番投資対効果高いテストはIntegration Testと言われています。
しかし実際にテストコードを実装してみるとどのようになるでしょうか？

当セッションではNext.jsのチュートリアルを題材に、Testing Trophyを意識しつつテストコードを書いて各テストの量がどのように変わっていくかを見ていきたいと思います。

具体的には以下のようなことを話す予定です。
・Testing Trophyとは何か？
・Next.jsのチュートリアルを題材にテストコードを書いてみる
　・E2E
　・Integration
　・Unit
　・(静的解析)

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

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

【WebGLによる表現手法とXR技術】
・WebGLとは？
・WebGLの使われているWebページの紹介
・WebGLライブコーディング
・WebGLでXRもできます！！
WebGLとは、Web Graphics Libraryの略称で、ブラウザ上でコンピューターグラフィックをレンダリングするJavaScript APIです。WebGLの登場により、Webページの表現の幅が広がりました。
そんなWebGLで、「どのようなことができるのか」、「どのように活用されているのか」に着目して、実際にWebGLの使われているWebページを紹介しつつ、ライブコーディングを交えながらお話したいと思います。
最後にはWebGL技術をフルに活用し、登壇者自身が作成したXRアプリを紹介することで、「WebGLでこんなこともできます」ということをお伝えしたいと思います。

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

・GraphQLの概要
・GraphQLとは
・Apolloについての説明
・GraphQL + Laravelでバックエンドを開発！