Encraft #1「フロントエンド × 設計」開催レポート

こんにちは、よしこです。
今回は、弊社ナレッジワークで初の開催となったオフライン勉強会「Encraft #1」のイベントレポートをお届けします！

Encraftとは？

Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。

“Enablement” はナレッジワークの事業内容、”Craftsmanship” はナレッジワークのStyle（行動指針）から持ってきています。Encraft、造語ですがなかなか良い語感ではないでしょうか？

今回は#1としてシリーズ初の開催となりましたが、20名の参加枠に対して100名以上の応募がある盛況ぶりとなりました！ご応募いただいた皆様、ありがとうございました。定員によりご参加いただけなかった方も多くいらっしゃいましたので、是非以下のセッション内容・動画をご覧ください！

セッションの感想はハッシュタグ #encraft でツイートしていただけたら嬉しいです！

セッション内容

第一回は「フロントエンド × 設計」をテーマに、フロントエンドに関連する場面での様々な設計について3名の登壇者にお話しいただきました。

1. ナレッジワークのフォーム設計へのこだわり

https://www.youtube.com/watch?v=jr0j9OZZvD4

@otofu_square / 登壇資料

• ナレッジワークのフォーム実装を再設計して改善した話
• 前提
  • SaaSアプリケーション
  • 大小様々なフォームが約25件ほど存在
• 課題
  • 実装方針が統一されていない
  • 副作用によるテスタビリティの低下
  • 実装の重複部分が多いことによるメンテナンス性の低下
• 再設計でやったこと
  • 全フォームreact-hook-form+zodで統一
  • Container / Presentationパターンの導入
  • ディレクトリ構造の見直し
• 4つのこだわり
  • 依存を閉じ込めるディレクトリ構造
  • react-hook-form の hooks を使ったフォームの挙動の安定化
  • フォームオブジェクトのスキーマ定義とバリデーションをzodで一括管理
  • Storybookを活用したコンポーネントテストの拡充
• 今後やっていきたいこと
  • 決めた設計に沿った構成を生成できるボイラープレートの用意
  • 作成フォーム・編集フォームで異なるUIを提供する場合の設計

2. Webアプリケーション設計の第一歩はディレクトリの整理から

https://youtu.be/XdTWmDyJoCc

@okunokentaro / 登壇資料

• 設計とは何か
  • ソフトウェア設計は建造物の設計のことではない
  • やりたいことはアプリケーションの「維持」である
• 維持すべきものは「理解のしやすさ」
  • アーキテクチャの大半は「依存管理」と「理解」を助けるための整理のルール
• 整ったディレクトリ構造を維持する
  • Next.js案件での例
    • pagesの運用
    • コンテキストごとのディレクトリ
    • 外部環境への依存にはboundaryを設ける
    • 共通化したい欲求の扱い方
    • コンテキストをまたぐ定義や扱いに困るファイルの分類
• 分類ルールを守る
  • 守れないルールならいらない。eslintで守れるものにする
    • import/no-restricted-paths
    • eslint-plugin-import-access
  • ルールを守ると依存方向や影響範囲を理解しやすい
    • コードレビュアーにもテストにも優しい

3. ユーザーとの摩擦を最小限に保ちつつPrettierを改善していくための機能設計

https://youtu.be/JzDCDMqcMjc

@ __sosukesuzuki / 登壇資料 （各ページにspeaker noteがあります）

• 注意事項
  • 実際にどうなるかはまだ決まっていない話です
  • Prettierチームを代表するものではなく個人の見解です
• Prettierとは
• 寄せられるフォーマットの変更リクエスト
• “良いフォーマットの変更” における二つの課題
  • 良さを見極める難しさ
  • ユーザーに受け入れてもらう難しさ
• 課題を解決する仕組み
  • experimental flags / deprecated flags
• 実際のフォーマット変更リクエストの紹介
  • 二項演算子を行頭に置く
  • 三項演算子のフォーマットの改善
• 最後に
  • 実はまだ何も決まっていません。でも、できるだけ早く進めたい
  • 寄付をお願いします

---

どのセッションもスピーカーの方の経験からくる知見が詰まっており、学びの多い発表でした。

ご登壇いただいた皆様、ありがとうございました！

開催の様子

会場や懇親会の様子を少しだけお届けします！

懇親会も最後まで大変盛り上がり、話題の尽きない時間となりました。

Encraftは今後も定期的に学びと交流の場として開催を予定しています！

Connpassでグループメンバーになっていただけると開催通知メールが送られますので、開催を知りたい方は以下より是非グループメンバー登録をよろしくお願いします。

https://knowledgework.connpass.com

セッションをオンラインでご覧いただいた方も、感想などハッシュタグ #encraft でツイートしていただけたら嬉しいです！

それでは、#2の開催をお楽しみに！