トーク

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

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

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

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

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

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

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

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

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

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

みなさんはビルドツール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とは
• モデルの構築＆学習＆利用
• 用意したモデルとゲームで勝負