トーク

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

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

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

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

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

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

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

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

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

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

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

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

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

最近流行りの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月〜　正式リリース（有償にてサービス提供）

知人の運営するヨガスタジオでは顧客情報の管理を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テストでも利用しやすいということになります。
これを実践してみての知見を話します。

ユーザーの操作から実際のシステムまでを自動でテストする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による自動化
・デザインシステム導入

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

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

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

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

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

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

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

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