トーク

バックエンドエンジニアがSvelte + Viteの開発体験を経験してみて感じたことをお話します。

話者は普段バックエンド開発を主に行っていますが、あるきっかけでSvelte + Viteなフロントエンド構築を行う事になりました。

フロントエンドを選択するならReactで、Vueはやってみた事がある程度でしたが、驚くほどスムーズに構築することが出来ました。

今回は「フロントエンドを知らない」から見るSvelteの魅力についてお話します。

• 想定する聴講者
  • フロントエンドに興味のあるバックエンドエンジニア
  • バックエンドエンジニアから見るフロントエンドが知りたい方
• お話しないこと
  • Svelteやフロントエンドの超絶テクニック

私が所属する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テストでも利用しやすいということになります。
これを実践してみての知見を話します。

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

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

我々エンジニアが今からアートをすることは不可能でしょうか？いえ，クリエイティブコーディングのためのJavaScriptライブラリ「p5.js」と数学関数を組み合わせると魅力的なアート作品が作れます！と言っても数学と言われると難しいと思われるかもしれません．

もちろん，複雑なものや凝ったものを作るとなるとしっかり数学の世界にも踏み込まないといけないときもありますが，とにかくクリエイティブコーディング，デジタルアートに飛び込んでみる，いわゆるパターンアートのような作品を作るという意味であれば，思ったより簡単に入ることができます．

いくつかの作品例を解説しつつ，この世界に入る手解きをできたら良いなと思っております．

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

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

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

みなさんはビルドツールVite（ヴィート）を使ったことがありますか？
ビルドツールといえば、webpackやGulp、Rollupなど代表的なツールがありますが、最近はViteが注目を集めています。
参考）https://2021.stateofjs.com/ja-JP/libraries/build-tools

この登壇ではViteがなぜ注目を集めているのか？他のツールと比べて何が違うのか？などなど時間が許す限り解説させていただきます。
また10/11,12で開催予定のViteconfで発表されるViteの最新情報についてもご紹介できればと思います。

▼こんな方におすすめ
・フロントエンド開発している方
・フロントのビルドが遅いなーと日頃から感じている方
・新しいツールの情報をキャッチアップしたい方

最近クロスプラットフォームアプリケーションが作れるFlutterの採用事例が増えてきました。
その流れの中、Flutterはウェブアプリケーションを作る機能も提供していますが、フロントエンド界隈を見る限り、商用事例をそう多く見かけません。

憶測も入りますが、フロントエンド世界でデファクトスタンダードになっているTypeScriptではなく、Dartが採用されていることや、パフォーマンス問題や、そもそも安定しているのかなどの課題により、採用を足踏みされているのではないでしょうか？

本セッションでは、実際にウェブアプリケーションを開発・公開した知見をもとに、フロントエンドエンジニアからみて魅力的なフレームワークたりうるのか、ウェブアプリケーションの実運用的に耐えうるのか...などを、具体的なナレッジ・ノウハウを交えてご紹介します。

これまでバックエンドにPythonをおいて、機械学習モデルとやり取りするフロントエンドを作るという棲み分けでしたが、ブラウザだけでも簡易に機械学習ができる時代がきました！Tensorflow.jsを使ってフロントエンドだけで機械学習を行う発表をします！！簡易なブラウザゲームでオンラインに学習するAIの作り方を軸にTensorflow.jsの利用方法を紹介します。

• Tensorflow.jsとは
• モデルの構築＆学習＆利用
• 用意したモデルとゲームで勝負

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

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