【参加レポ】フロントエンドカンファレンス沖縄2022

公開日: 2023/04/02 @t_yama5k

フロントエンドカンファレンス沖縄 2022
日時：2022 年 11 月 19 日（土）
会場：Lagoon Koza+ オンライン配信

(大分日が経っていますが)現地参加し作成していたメモを公開。
各発表などをまとめてます。

資料

配信動画:フロントエンドカンファレンス沖縄 2022 - YouTube

スライドまとめ:【随時更新】フロントエンドカンファレンス沖縄スライドまとめ - Qiita

ツイートまとめ:フロントエンドカンファレンス沖縄 2022 のツイートまとめ - Togetter

プロポーザル:フロントエンドカンファレンス沖縄 2022 #front_okinawa - fortee.jp

全体的な感想

タイムテーブルを見てまず思ったのが、登壇者がPHP カンファレンス沖縄 2022と大分被っていること。バックエンドやフロントエンドやデザインの領域にとらわれること無く、得手不得手はあったとしても、チームメンバーがそれぞれ全部こなせる体制のなかで仕事されているのだなと思いました。

そして個人開発系の発表を聴く中で、(私の中では)最近よく聴くようになったフルサイクルエンジニアみたいな動きが求められていくのだろうと感じました。フルスタックエンジニアから「フルサイクルエンジニア」へ。和田卓人氏による「組織に自動テストを根付かせる戦略」（その 3）。ソフトウェア品質シンポジウム 2022 － Publickey

全員が責任を担う、というのは継続的デリバリの世界において、特に近年この傾向が高まっていて、それぞれスペシャリストがその人の仕事をするという分業ではなくて、全員が得意不得意はあれど全ての仕事を担うというチームで開発をしていきましょうと。全員が、設計もやる、開発もテストもデプロイも運用も、それだけじゃなくてサポートも含めて、みんなそれなりにやるよ、という時代です。いろんなスキルを持ってるエンジニアのことを「フルスタックエンジニア」と言いますが、最近ではフルスタックではなくて「フルサイクルエンジニア」が大事です。

発表メモ

レガシーフレームワークからの移行

発表者：CBCloud／新垣雄志

タイトルからも想像想像つくようにシステムマイグレーションのお話。 2016 年に AngularJS を利用してサービスリリースしたらその年 Angular2.0 が公開されたなどの不幸が重なる
移行先についてフロントは AngularJS ⇨ Nuxt.js へバックエンドは Scala⇨Rails(逆じゃないよ)へ採用面で Scala は結構難航した様子 Railsway を捨ててでも(ベタ書きトランザクションスクリプトでも) そのほかアプリも改修あり
「ビジネスを前にすすめるために以前行った決定の上に僕らは立っている」誕生からいままで、会社の利益になったり社員のための便利なツールとして動いてくれていたものに、まずは敬意を、というふうに受け止めました。そしてコードに延命ではなく進化を!

発表資料は見つからなかったので代わりに note の記事を CBcloud に入社してからの 1 年半で何をやってきたのか｜あらかきゆうじ｜ note

PWA をインストールしやすくするための実装

スライド内で使用されたコードのリポジトリはコチラ発表者：まぁし

PWA のインストール誘導についてインストール用のバーを作ってあげても、バナー広告と思われて忌避されちゃうツラミありそうであった。ちゃんとインストールの説明画面をつけて上げることで利用者の理解につながる。(でも利用者側への PWA が浸透はまだまだかもですね。) PWA でホーム画面に追加されたアイコンは通知のバッジをつけたり、いろいろできるらしい。

バックエンドエンジニアが行う Svelt+Vite なフロントエンド構築

発表者：清家史郎

スピード感
- フロントエンド担当者が準備してくれた環境(Svelt + Vite)のおかげ
- その人が抜けてもを持って作業できたよ
Svelte
- ユーザーインターフェースを構築する JavaScript のライブラリ
- 作者曰く「Svelte はコンパイラーである」
Vite
- 開発サーバが早い
- ビルドが早い
- 必要十分な機能をゼロコンフィグで提供
すぐに書き出せるってのが良い
- 優れたフレームワークに乗っかるのも一つの選択
- ※但し、責任は伴う

SvelteKit を本番投入してみて

発表者：Kenjiro Kubota

技術選定話
- DX(Developer Experience)の良いものを
- 開発スピードが期待できる
- メンバーの同意が得られること
- それらを軸にフレームワーク比較
  - メリデメ比較

何を選んでも銀の弾丸ではないし作りたいアプリケーションの要求を満たせるのでワクワクするものを採用

最終的な選定
- チームの同意が得られているからこそ、このような選択ができる
- キャッチアップできるでしょという判断
- SvelteKit といえば M&A クラウドでやっていきたい
  - 求職者アピールできる技術
DX 関連(テストについて
- Playwright
  - E2E がが実行できるライブラリ
  - テスト結果が HTML に出力できたり便利そう
おまけちなみに最近こんな記事を読んでいたので参考として載せておきます

Javascript なフレームワーク比較の記事 https://lealog.hateblo.jp/entry/2022/11/02/102525

JavaScript× 数学でデジタルアートの世界へ

発表者：桑原聖仁

Generative Art
- サインコサインぐらいがわかればあなたもアートの世界に入門できる
- バラ曲線だけでいろんなデザインが表現できるよ
  - バラ曲線 - Google 検索

ビルドツール Vite を 10 分で解説！

発表者：AkitoTsukahara

ビルドツール話
- 生まれた経緯とその歴史を紐解く
- なぜ今 Vite が注目されているかを説明

他の発表でもちょいちょい出てきているあたり DX は大きな関心ごとであると実感しました。

明日業務で役立たない Web 開発 Tips

発表者：株式会社ちゅらデータ／hoto

スポンサートーク　その１　ちゅらデータ WebXR(AR/VR の総称)なお話

開発環境コマンド１発で立ち上げたいんだぜ
- スマホの実機検証必須な開発
- いろいろごにょごにょうする必要がある - docker compose up 一発で開発環境立ち上げられるようにするぜ
  - そのメリットは
    - 並行して別案件をやってても起動方法に困らない
    - オンボーディングにも役立つ

こんなに大掛かりではないが自分も make up 一発でコンテナ立ち上がるように Makefile 一つおいているので気持ちはよく分かる。

Web 開発を補助する目的で Playwright を使っている話

発表者：株式会社 BASE／aokiken

スポンサートーク　その２　 BASE

E2E ツールの Playwright の話
- 他の発表にもちらほら登場している
- 便利そう
  - ビジュアルリグレッションテストもできたり
  - HTMLReport として出力できたり
    - スクリーンショットや動画もレポートとして生成される

ノーコードツール「STUDIO」でニューモーフィズムデザインを作ってみよう

発表者：株式会社 Re:Build ／きぬ

スポンサートーク　その３　 Re:build

ノーコードツール話
- 今回のカンファレンスのサイトは Re:build さんによって STUDIO で作成されている
- ちなみに実演も兼ねるため、発表資料も STUDIO で作成されていた
ニューモーフィズムデザインとは。。
- 2020 年頃に流行ると言われていて流行らなかった
- 凹凸のあるデザインのこと
- 【2020 年】新しいデザインのトレンド「ニューモーフィズム」に注目 | FASTCODING BLOG
- ニューモーフィズム（Neumorphism）とは、昔流行った、立体的で質感のあるリアルなデザイン「スキューモーフィズム」とシンプルでミニマムな「フラットデザイン」や「マテリアルデザイン」を組み合わせた新しいスタイルのデザイン手法です。

発表では STUDIO で実際にニューモーフィズムデザインなボタンを作成していました。

型安全を目指した URL-based polymorphic ID のコード生成

発表者：株式会社ヘンリー／岩永勇輝

スポンサートーク　その４　ヘンリー

ノーベル平和賞の受賞を目標に掲げる会社ミッションは社会課題を解決し続け、より良いセカイを創る

ちなみに発表資料は Notion で作られていました。

いろいろな方法で通知先を指定できる slack のメンションのパターンを挙げてるとこまではわかったが実際の説明の部分での使いどころとかがまだピンとコず、、、いつか見直す。 (私、API 関連がよわよわだなぁと思いました。)

JavaScript からデバイスの力を 100％引き出すための WebAPI と Capacitor 入門

発表者：榊原昌彦

ネイティブアプリに比べモバイルブラウザは制限が大きい
- なぜ?
  - アプリストアからの認証を受けていないから
- じゃあどうする?
  - Web サイトをアプリにしちゃう
    - 単なる Web サイトを表示されるアプリはリジェクトされちゃう
    - しっかりアプリになったら通るよ
  - Capacitor
    - Capacitor はどんなウェブアプリでもネイティブアプリにすることができるので iOS、Android、ウェブを横断して同じコードで一つのアプリを走らせることができます。
- ネイティブアプリ vs Web アプリ
  - アプリインストールはユーザのハードルが高い、月に何個もインストールしてもらえない
  - Web アプリならサイトに訪れるだけ
    - いろいろ試してもらえる
    - Web アプリになれたユーザその後アプリインストールするようになる
      - 有用と判断できたので、次は利便性をもとめるということか

アクセシビリティと E2E テスト

発表者：ypresto

E2E テストの知見紹介
- (イケルと思ったが想定とちがっていたようで、やや失敗談となる)
  - Cypress が便利そうだった。
- ラベルに対して要素の特定にセレクトだけで特定するのはつらい
  - ユーザが見える部分のテストなので、そのラベル部分に対して contains とかで探せるといいよね
  - 壊れにくいテストになるということか。

Figma をフル活用するフロントエンド開発

発表者：seya

API、プラグイン、widget 話
- Figma から画像圧縮して書き出ししたり
- コード出力したり
- 使いこなすとデザイナ、エンジニア双方の連携が取りやすくなりそう
ビューワー権限だとプラグイン使えない
- 使いこなしたくなったら契約してね

私の場合、最近 XD のアカウントもらったのだけど Figma の方も触ってみたいのでおもしろかった。

ウェブフロントエンドエンジニアから見る Flutter Web の現在地点

発表者：小木曽槙一

アプリ作成(ネイティブ化)を見据えた上で、 Flutter Web を選定した
- まさに、この前提だからこその選択
  - 理由
    - パフォーマンスの問題
    - パッケージサイズでかすぎ問題
  - まだまだ発展途上感もある
    - しかり、TypeScript ではなく、Dart という選択肢はあるよね

フロントエンドエンジニアと個人開発の楽しみ

発表者：プログラミングをするパンダ

個人開発がやりたくなーる話学習目的の開発ももちろん効果もあるし楽しいけどリリース目指すならま別の戦略を建てる必要もあるよ。
学習しながらのリリースを目的とした開発はモチベ維持が難しい
- なぜ
  - 個人開発の原資は。。。
    - お金やスキルではない
    - 時間とモチベーションである。そしてそれは減り続ける
「リリースされるまでは、何も本当には完成していないのだ。」
- スタートアップを殺す 18 の誤り　より
個人開発の楽しさとメリット
- ものづくりの楽しさを実感できる
- いつのまにか事業の仕組みを学べる
  - エンジニアリング以外にも
  - イノベーション
  - マーケティングを学ぶことになる
    - いいものを作ればうれるってものではない
  - デザイン
- 会社の事業でもどんなことが行われているかを体感することになる
  - この一通りのながれを体感することがフルサイクルなエンジニアにも繋がりそうと感じた
[[「企業には２つの基本的な機能が存在する。すなわち、マーケティングとイノベーションである。この２つの機能こそ起業家的機能である。」]]
- by ピーター・ドラッカー
パンダさんのキャリア
- サーバサイドエンジニアとして WordPress の受託
- 転職後は個人開発で React に興味を持つ
- フロントも任せてもらい Nexr.js と PHP で新規開発を担当
- フロントに専念すべく、フロントエンジニアとして転職
個人開発は技術選定の知見が溜まる
- 仕事に活かすなら漫然とやるだけではだめ
  - 本番想定して
    - 学習対象に設計を加える
    - テストしっかりやる
      - きれいな設計につながる
    - アーキテクトの視点をもつ
      - 変化に強く

フロントエンドだけで機械学習

発表者：aipa

ちゅらでーたのひと　と思いきや最近転職したらしい

(今回どっちもスポンサーだったが、関係はいたって良好な様子)

Tensorflow.js の利用方法紹介
- 顔検出とかできる
- 実演
  - ブラウザだけで顔検出とかできるよい
    - GoogleMeet の背景合成とかモザイクもこん感じで実装されていたりするのだろうか

React/TypeScript/Firebase で個人開発した Web アプリを商用提供して 1 年半、運用を続けてわかったこと

発表者：いわむー

~~謎の~~ スクラムマスターでヨガマスターの人

個人サービスの提供で対価を頂いている
- 顧問契約?な形でヨガ教室にシステム導入、保守している話
  - 自分の持つスキルで組み合わせて創った
    - これより前の発表のパンダさんの「リリースを前提とした個人開発の技術選定」にも合致している
稼働時間と収入の円グラフ大公開
- グラフから見るに個人開発の単価だけを見ると割りに合ってはいなさげ
  - とはいっても、個人サービスの対価をもらうというのは大きな経験となりそう
契約周りの失敗談
- 口約束はだめ、絶対
  - 成果物の双方の認識違い
    - 契約がこじれてしまった
  - しっかり契約書作ろうね
  - 毎月の報酬受取時は、コミュニケーションの機会になるよ

(おまけ)イベント情報

その１スクラムフェス沖縄 Gwave にて 12/9 , 12/10 にイベントを主催するそうです。直接問い合わせれば参加枠あるかも、らしいです、

スクラムフェス沖縄 | Scrum Fest Okinawa 2022

Scrum Fest Okinawa はスクラムの初心者からエキスパート、ユーザー企業から開発企業、立場の異なる様々な人々が集まる学びの場です。この 2 日間を通じ、参加者同士でスクラムやアジャイルプラクティスについての知識やパッションをシェアするだけでなく、ここで出会ったエキスパートに困りごとを相談することもできます。

その 2 フェニックスプロジェクト全国各地で開催されている DevOps シミュレーション研修こちらは沖縄開催未定ですが、人集まったらやれます的な話をされてました。 (なお、私がインタラクティブに所属している話はしているので、会社に案内くるかもしれません)

【全国開催】フェニックスプロジェクト DevOps シミュレーション研修無料体験会｜イベント｜ IT プレナーズ

開発から運用、そしてビジネスサイドまでの実際の組織を再現したチームとなっていて、参加者全員がそれぞれ違う役割を担当

みたいな研修らしいので、ビジネスサイド、開発サイド全員で参加するとおもしろいかも

開発ドキュメントの管理・閲覧に VitePress を使ってみて感じた良かった点と注意点

発表者：Yuhei FUJITA

ドキュメント更新されない問題
- ドキュメントバラバラ問題への一つの回答
VitePress
- Markdown + α 　なドキュメントで十分な場合
- これでフィットした様子
- Git 管理もできるのでバージョン管理も可能
- ただ、同時編集は難しそう

Figma Tokens と Style Dictionary から始めるデザイナーとエンジニアが連携しやすい取り組みの話

発表者：mk0812__

デザイナーとエンジニアの連携の話
- ルールを作れ
Figma Token
- 色、タイポグラフィなどをデザイントークンとして定義
- JSON 形式で出力可能
- つまり Github で管理可能

一年間、四苦八苦しながら WebAR やってみた

発表者：べいず

スマホ実機での WebAR 話
- Android は機種ごとに測定方法が違う
  - 闇魔術をつかう
    - Android 機種のばらつきを解決
- iPhone はその点一貫しているので楽

OpenAPI Generator を使ったときのエラーハンドリングについて

サンプルリポジトリはコチラ

発表者：千葉リリィ

アバター!? バ美肉科登壇!!?

API 設計話
- ステータスコード
- エラーハンドリング

カンファレンスの中では URL-based polymorphic ID の話と同じくピンとこれていなかったので、いつか見直したい。

HTML と CSS によるプログラミングの今

五目並べ

BF→HTML+CSS

発表者：ぺん！

HTML と CSS でここまでできるんです
- 五目並べプログラム
  - 最近 Chrome にも実装された機能(具体的には:has()擬似クラス)を活用
- 計算だって可能
  - ものすごい数のクリックが要求されるけどな
  - ひゅーまんりおーす
    - でもつらい
      - 我々には JavaScript がある
        
        HTML と CSS に JavaScript が加わって最強に見える