[ハイブリッド開催] Wantedly x Qiita Meetup #1 フロントエンドのあれこれ https://github.com/3tomcha マーケットプレイスのフロントエンドエンジニアとして初期リリースから携わる。 Getting startedとハッカソンが大好き。

1. 小林 トモヤ
マケプレでの困りごとと
その解決策

2. • 小林トモヤ（
https://github.com/3tomcha）
• マケプレのフロントエンドエン
ジニア（現在は新規事業部へ異
動）
• ハッカソン1人参加勢
自己紹介

3. 困りごと

4. ケース1
フロントが後工程なのつらたん問題
バックエンド フロントエンド
理想
バックエンド フロントエンド
実際
(＾ω＾≡＾ω＾；；) おっおっおっおっ
ε-(´∀｀*)
((=ﾟДﾟ=)ﾉ スキーマ駆動開発 って何？

5. スキーマ駆動開発
ケース1解決策
Openapi
Marketplace.yaml
Typescript
api.ts
interface User {
id: number;
username: string;
email: string;
}
MockAPI
フロントエンド
バックエンド
Get users

6. スキーマ駆動開発をやってみて
良かった点
悪かった点
・フロントだけで作業完結！APIが未完成・バグっていても関係なくガシガシ進められる
・OpenAPI定義書(yaml)を書くのが面倒 → MSWが良さげ
・APIのリクエストレスポンスのTypescript型定義をする必要がない
・主に使うのはフロントエンドだが、レポジトリはバックエンドにある問題

7. ケース2
表示が崩れるよぉ・・・CSSって大変
((=ﾟДﾟ=)ﾉ 自動生成ツール って何？
壊れたボタン

8. 自動生成ツール
ケース2解決策
Teleport HQ
HTML
CSS
Figma

9. 自動生成ツールを使ってみて
良かった点
悪かった点
・デザイン通り、綺麗にスタイリングできる
・不要なCSSが増える、無意味なクラス名が多い
・とにかく早い
・頼りすぎてコンポーネント分けを怠ってしまった・・・

10. ケース3
マケプレ、状態が多すぎ問題
((=ﾟДﾟ=)ﾉ コンポーネント駆動開発
例）オークションの入札履歴の場合
・ログインしてるけど、入札がない場合
・ログインしてなくて、入札がない場合
・ランク内に入札がある場合
・ランク外に入札がある場合
・ランク内に入札があるけど、オークションが終了している場合
・ランク外に入札があるけど、オークションが終了している場合
(＾ω＾≡＾ω＾；；) おっおっおっおっ
って何？

11. コンポーネント駆動開発
ケース3解決策
・ログインしてなくて、入札がない場合
・ログインしてるけど、入札がない場合
・ランク内に入札がある場合
・・・・
コンポーネント
Storybook

12. コンポーネント駆動開発を使ってみて
良かった点
悪かった点
・着実に丁寧にコンポーネントを作れて安心感
・Storybookを書くことが大変
・読みやすいコードになった
・あんまり見ていないStorybookの保守作業が大変

13. 終わり
・PC/SP/タブレットのレイアウトがさっとできる方法
・AIツールをどうプロジェクトに取り入れるか
・今回の発表で、もっと良い方法あるよ
があったら教えてください！