Zenn
Closed10

ひろしまフロントエンド勉強会 Vol.35 参加レポート

勉強会
frontend
勉強会まとめ
広島
dyoshikawadyoshikawa

LT1 「ヒロフロ再始動」

  • 初回より8年
  • 35回やってきたがしばらく途切れていた
  • だれてしまった部分がある
  • 再始動する
  • ネタ切れ
  • 1回1時間、持続可能な勉強会にしていきたい
  • サクッと参加できる勉強会
dyoshikawadyoshikawa

LT2 「ダメ絶対！クソダサデザインレシピ10連発！」

  • 角丸が大きすぎる
  • シャドウ実はほぼ不要
  • 行間デフォルトになってない？
    • 狭すぎ
  • 画像はそのまま配置しないで
    • 適切にデタッチする
dyoshikawadyoshikawa

LT3 「SEとデザイナー。それぞれのデザイン回路」

  • エンジニアのデザインはださい？
  • Qiitaに面白い記事 なぜエンジニアが作る画面はださいのか？
  • エンジニア
    • とりあえず画面を作って、それからデザインを考えていく
    • 画面設計→デザイン
  • デザイナー
    • 画面を作る前に考える
    • どう使われる？
    • そしてどの手段で実現するかを考える（カードか、テーブルか）
    • デザイン=設計
  • ポイント
    • いきなり表作りから始めない
    • なくてもいいものは消す
    • 強弱をつける
    • データの加工を厭わない
    • 装飾でどういうものか表現する
    • 設計とデザインを線引きしない
dyoshikawadyoshikawa

LT4 「Figmaプラグインでコードを生成してみた」

  • Animaプラグイン
    • 環境構築が容易
    • デザインの再現性が高い
    • HTML、Reactコンポーネント両方に対応
  • 実際に生成したコード
    • 生成したいページのレイヤーを選択
    • break point
    • 作成したページの幅が最小幅になる？
    • フォント余白は割と忠実に
    • コンテナの中央寄せがなく左に寄ってしまう
  • 「ソースコード汚いんでしょ？」
  • HTML
    • いくつか難点あり
    • レスポンシブだが、それぞれのパターンが出力
    • セマンティックなマークアップが苦手
      • すべてdiv？
      • 実はfigmaで設定することも可能
      • 手動で変える方が速そう
  • CSS
    • Reset CSSが入ってる
    • Google Fontを自動でインポートしてくれる
    • スタイルガイドとしてCSS変数を生成してくれる
    • すべてに対して display: flex; がかかっている
      • gridにしたい場合は手動修正が必要
    • すべて position: relative; が入る
      • 手動で不要なものを消す
  • 結論
    • レスポンシブ対応の自動化は期待できない
    • セマンティックなマークアップはコーダーが補う
    • シンプルなレイアウトであれば有効活用できそう
dyoshikawadyoshikawa

LT5 「フロントエンドとバックエンドを繋ぐ認証サービス、Amazon Cognito」

  • SPAを作りたい、Amazon Cognitoを使って認証を実装してほしい
  • ID管理、ユーザー認証
  • フロントエンドとバックエンドを繋ぐとは？
    • SPAの場合、フロントとバックにシステムを分ける
    • ユーザーからは1つに見える
    • 第3のシステム、認証認可システム
  • Next.js+APIGW+Cognito+Lambdaの例
  • デメリット
    • Cognitoにユーザデータが入るので、RDBのデータとのジョインができなくなる
    • ここをどう解決するかがバックエンドエンジニアの腕の見せ所
dyoshikawadyoshikawa

LT6 「Notion APIの活用事例」

  • Notion使ったことがある人？
    • 9割くらい
  • Notion APIは？
    • 1名？
  • 構成
    • Notion API
    • Lambda
    • S3
      • ここにJSONファイルを保存
    • CloudFront
  • 直接APIを叩かない理由
    • レート制限
    • そこまでリアルタイム性を求められていない
    • Notionがダウンしている場合でも利用可能
    • セキュリティの考慮
      • シークレット漏れ
      • CloudFrontでアクセス制限
dyoshikawadyoshikawa

LT7 「オラ、元気玉作りがうめえディレクターになっていきたいぞ!!」

  • ディレクター1年くらい
  • Webサイトデザイナーやってた
  • BTC=元気玉？
    • ビジネス
    • テクノロジー
    • クリエイティブ
  • 自分よりできる人に任せる
dyoshikawadyoshikawa

LT8 「10256行のapp.ts」

  • 10年前に開発した基幹業務システムリプレース
  • 脱フルスタックアプリケーション
  • まずはバックエンドに注力
  • フロントエンドの技術選定は難しい・・・
  • バニラJSにした
  • 一個のファイルでやっちゃえ
  • クソコードあるある
  • 破綻せずに機能している。設計をちゃんとしたから
  • 設計大事
このスクラップは2ヶ月前にクローズされました