トーク

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

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

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

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

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

PWA（Progressive Web Apps）としてホーム画面に追加できるようにすることで、ユーザーの訪問率やコンバージョン率が上がるというデータがあります。その一方で、デフォルトのインストールバーは一般ユーザーにとっては用途が不明であったり急なインストール表記は敬遠されたりする可能性が高いです。ホーム画面追加の機能は比較的少ないコードで実装できますが、デフォルト設定のままにせず、インストールタイミングをコントロールする処理を追加しましょう。ユーザーが機能を理解した上で好きなタイミングでホーム画面に追加できるようにして、インストールのハードルを下げることが狙いです。その実装方法をコードで解説します。また、プッシュ通知のブラウザ対応も徐々に進んでいることから通知の実装・許可についても補足する予定です。

システム開発を行う上で必須であるドキュメントには、要求定義書のような文書からUMLのような図など、様々なものがあります。

しかし、重要とはわかっていてもこんなことになっていないでしょうか？
・更新されずに放置されている
・いつ何がどう更新されたのかわからない
・管理方法もフォーマットもバラバラで更新が大変

今回、試しにこういったドキュメントの管理・閲覧にVitePressを使ってみたらかなり相性がよかったので、実際に使って感じた良かった点と気をつけるべき点をまとめました。

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

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

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

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

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

フロントエンドでのプログラミングといえばJavaScriptですが、HTMLとCSSも、画面をクリック連打する装置(人間でも可能)を組み合わせることにより任意の計算が可能です。
このトークでは、最近Chromeにも実装された機能(具体的には:has()擬似クラス)により、HTMLとCSSによるプログラミングがどう変わったかをデモとともに話します。
※ 業務に役立たないネタ発表です キーワード: チューリング完全

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

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

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

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

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

Webは豊か表現力を持ち、ユーザから容易にアクセスしてもらえるという強い魅力があります。一方で、iOSやAndroidデバイスでは、HealthKitやNFC、外部デバイス制御などのデバイスAPIへのアクセスに制限があるため、実現できない要件も多いとされています。しかし、それは本当でしょうか。
本セッションでは、Webとブラウザの関係を見直し、デバイスの力を100%引き出してより自分のつくったWebサイトの価値を高める方法についてお話します。

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

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

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

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

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

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

WebARをやってみて一年間でぶつかった問題点や困ったことをお話します…最後はハッピーエンドです。

昨今デザインツールとして定番となってきた Figma、そんな Figma には API やプラグイン、ウィジェットなどプログラマブルにデザイン要素を操作できる機能の数々があることをご存知でしょうか？

このトークではそんな機能たちを活用して

• タイポグラフィや色のスタイルを生成
• コンポーネントのコードを生成
• デザイン上でアイコンや画像が増えたらレポジトリに自動で Push

などなどフロントエンド開発を楽にする工夫と開発の仕方をご紹介します。

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

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

OpenAPI Generator で API Client と型を自動生成して使った場合、エラーハンドリングはどうしたら良いのかについてお話しします。

• OpenAPI Generator を使うとどうなるか
• エラーレスポンスの型について
• エラーハンドリングしてみる

SvelteKitはUIライブラリのSvelteをベースとしたSSRやSPAを作るフレームワークです。
Svelte Summit Fall 2022が2022年9月8・9日に行われた際にSvelteKitはバージョン1.0のRCとなることが発表されました。
トーク時にはRCではなく、リリースされているかもしれません。

• そんなSvelteKitをなぜ採用したのか、
• SvelteKitは他のフレームワークとどう違うのか、何が良いのか
• 開発途上のフレームワークを使った開発はどうだったのか

などのSvelteKitの良さや開発の裏話ができればと思います。

フロントエンドエンジニアの方が個人開発をしてみたいと思える発表にします。

• 個人開発の目的
  • 学習か、リリースか
• 楽しさとメリット
  • ものづくりの楽しさ
  • 視野が広がる
    • デザイン、PMF、マネタイズ、マーケティング、イノベーションetc.
  • キャリアを拓いてくれる
    • 私は元々サーバーサイドエンジニアだった
    • 「コードの質」を追求しよう
• 技術選定
  • ツールやフレームワーク
  • ランニングコストを抑えるためのサービス選定
• 私の開発事例
  • ビール画像投稿サイト（Next.js + Tailwind UI + Supabase + Vercel）
  • 技術ブログ（Next.js + Tailwind UI + Storybook + Cloudflare）
    • 元々Gatsby + Sass + Netlifyだった

Figmaのプラグインの1つにFigma Tokensがあります。そのプラグインの結果をJSONに変換し、そのJSONで構成されたデザイントークンからStyle Dictionaryを使用するとCSSプロパティを出力してくれます。その一連の流れのノウハウや出力結果として出てきたCSSプロパティをユーティリティライブラリのTailwindCSSやWeb Componentsなどにどう絡めていくか、最終的にデザイナーとエンジニアの連携でどう役に立つかをお話ししていきたいと思います。