📚
【レポート】ひろしまフロントエンド勉強会 Vol.35に参加してきました
はじめに
ひろしまフロントエンド勉強会 Vol.35にいってきました。
簡単にですが、参加レポートを残しておきます。
ひろしまフロントエンド勉強会とは
ひろしまフロントエンド勉強会は、2016年9月に始まり8年の歴史を持つ勉強会です。2023年ごろから開催が途切れ気味になっていましたが、「サクッと参加できる短時間勉強会」という新しいコンセプトのもと再始動したそうです。
フロントエンドに限らずバックエンド、デザイン、ディレクション、インフラなど幅広いテーマで登壇してOKとのことです。
Xでのハッシュタグは #hirofuro です。
各発表のメモ
LT1 「ヒロフロ再始動」
井上 拓（ファナフェクト株式会社）さん
- 初回開催より8年経過した（！）
- 35回やってきたがしばらく途切れていた
- だれてしまった部分がある
- ネタ切れ感もあった
- 再始動する
- 1回1時間、持続可能な勉強会にしていきたい
- サクッと参加できる勉強会というコンセプト
LT2 「ダメ絶対！クソダサデザインレシピ10連発！」
マスベサナ（ひろしまクリエイターズギルド/デザイナー）さん
- 角丸が大きすぎる
- シャドウ実はほぼ不要
- 行間デフォルトになってない？
- 狭すぎ
- 画像はそのまま配置しないで
- 適切にデタッチする
LT3 「SEとデザイナー。それぞれのデザイン回路」
やんこ（デザイナー）さん
- エンジニアのデザインはダサい？
- Qiitaに面白い記事があった
- エンジニア
- とりあえず画面を作って、それからデザインを考えていく
- 画面設計→デザイン
- デザイナー
- 画面を作る前に考える
- どう使われる？
- そしてどの手段で実現するかを考える（カードか、テーブルか）
- デザイン=設計
- ポイント
- いきなり表作りから始めない
- なくてもいいものは消す
- 強弱をつける
- データの加工を厭わない
- 装飾でどういうものか表現する
- 設計とデザインを線引きしない
LT4 「Figmaプラグインでコードを生成してみた」
満井 美恵（株式会社Taupe）さん
- Animaプラグイン
- 環境構築が容易
- デザインの再現性が高い
- HTML、Reactコンポーネント両方に対応
- 実際に生成したコード
- 生成したいページのレイヤーを選択
- break point
- 作成したページの幅が最小幅になる？
- フォント余白は割と忠実に
- コンテナの中央寄せがなく左に寄ってしまう
- 「ソースコード汚いんでしょ？」
- HTML
- いくつか難点あり
- レスポンシブだが、それぞれのパターンが出力
- セマンティックなマークアップが苦手
- すべてdiv？
- 実はfigmaで設定することも可能
- 手動で変える方が速そう
- CSS
- リセットCSSが入ってる
- Google Fontを自動でインポートしてくれる
- スタイルガイドとしてCSS変数を生成してくれる
- すべてに対して
display: flex;がかかっている- gridにしたい場合は手動修正が必要
- すべて
position: relative;が入る- 手動で不要なものを消す
- 結論
- レスポンシブ対応の自動化は期待できない
- セマンティックなマークアップはコーダーが補う
- シンプルなレイアウトであれば有効活用できそう
LT5 「フロントエンドとバックエンドを繋ぐ認証サービス、Amazon Cognito」
兼安 聡（株式会社サーバーワークス）さん
- SPAを作りたい、Amazon Cognitoを使って認証を実装してほしい
- ID管理、ユーザー認証
- フロントエンドとバックエンドを繋ぐとは？
- SPAの場合、フロントとバックにシステムを分ける
- ユーザーからは1つに見える
- 第3のシステム、認証認可システム
- Next.js+APIGW+Cognito+Lambdaの例
- デメリット
- Cognitoにユーザデータが入るので、RDBのデータとのジョインができなくなる
- ここをどう解決するかがバックエンドエンジニアの腕の見せ所
LT6 「Notion APIの活用事例」
Fumiya Nagaoka（GoQSystem）さん
- Notion使ったことがある人？
- 9割くらい挙手
- Notion APIは？
- 1名くらい挙手
- 構成
- Notion API+Lambda+S3+CloudFront
- S3にNotion APIから取得した内容を蓄積するJSONファイルを格納
- クライアントはCloudfront+S3から内容を取得する
- クライアントから直接Notion APIを叩かない理由
- Notion APIのレート制限を回避するため
- そこまでリアルタイム性を求められていないため
- Notionがダウンしている場合でも利用可能にするため
- セキュリティを考慮するため
- Notion APIのシークレットを直接取り扱うと漏洩が怖い
- S3+CloudFrontでアクセス制限を実装している
LT7 「オラ、元気玉作りがうめえディレクターになっていきたいぞ!!」
ドイチェ（株式会社フォノグラム）さん
- ディレクター1年くらい
- Webサイトデザイナーなどをやっていた
- BTCトライアングル=元気玉？
- ビジネス
- テクノロジー
- クリエイティブ
- 自分よりできる人に任せていくことも大事
LT8 「10256行のapp.ts」
k2works（ネット通販会社内プログラマ）さん
- 10年前に開発した基幹業務システムリプレース
- Railsのフルスタックアプリケーションだった
- 脱フルスタックしたい、フロントエンドとバックエンドと分離したい
- フロントエンドの技術選定は難しい
- バニラJS+1個のファイルでやってみた
- それでも1ファイルの中でクラス分割を行っているので破綻せずに機能している
- 設計大事
- 現在はさらにReactにリプレイスした
おわりに
様々な視点から開発とデザインに関する知見を得ることができました。
エンジニアとデザイナーのデザインアプローチの違いや、Figmaプラグインを使ったコード生成の実践的な話、そしてNotionAPIの活用事例など、実務に直結する内容が多かったのが印象的でした。
今後も都合がつく限り参加してみたいと思います。登壇者、運営スタッフの方々ありがとうございました。
Discussion