トーク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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