Vue.js を使って Grid System を実装した話

VueFes 2023 のセッション、「Vueを使ってGrid Systemを実装した話」の登壇資料です。

Transcript

1. Vue.js を使って Grid System を 実装した話 Vue Fes Japan 2023 - 2023/10/28 @t0yohei / CrowdWorks
2. Grid System を使ったことがある、 なんとなく知っている方 󰢧
3. 自己紹介 • とよへい ( @t0yohei ) • 株式会社クラウドワークス ◦ Web エンジニア • アニメとコーヒーが好き • Vue.js / Ruby
4. VueFes 1 週間前、 あることに気づいた
5. Grid System の実装詳細、 みんな興味あるか...？🤔
6. そうだ！ ライブコーディングしよう！
7. Vue.js を使って Grid System を 実装した話 Vue Fes Japan 2023 - 2023/10/28 @t0yohei / CrowdWorks
8. Vue.js を使って Grid System を 作ってみよう Vue Fes Japan 2023 - 2023/10/28 @t0yohei / CrowdWorks
9. ということで、 Grid System を作っていこう
10. そもそも Grid System って？
11. Grid System の定義 > グリッドシステムとは、画面上に架空の縦 横線をガイドラインとして引きブロックごとに 文字や図版を配置することでデザインのシン プルな美しさを引き出す手法 https://store.bookandsons.com/?pid=146801609
12. 実装における Grid System (Bootstrap の場合) > グリッドシステムは、12カラムのシステムと5段階のレスポンシブ、Sassとmixin、いくつかの定 義されたクラスですべての図形とサイズのレイアウトを作成可能です > グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトし、整列させま す https://getbootstrap.jp/docs/5.3/layout/grid/
13. 実装における Grid System (Bootstrap 風) に必要な要素 • N 個(ex. 12 個)のカラムで画面を分割できる • カラム数の指定で、縦・横のコンテンツレイアウトを制御 できる • M 段階(ex. 5 段階)のレスポンシブな画面にできる
14. 今回作る Grid System (Bootstrap 風) PC(Large) TBL(Medium) SP(Small) 画面サイズ >= 1200 px >= 576 px < 576 px 総カラム数 12 12 12
15. 完成イメージ
17. Grid System の実装パターン • float を使う • Flexbox を使う • CSS Grid を使う
18. Grid System の実装パターン • float を使う • Flexbox を使う • CSS Grid を使う
19. ここから ライブコーディング
20. 手順 1. 初期状態の確認 2. 12 分割の Grid を作成し、エリアを横並びに 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに 4. media query を使って、Tablet・SP 用の画面を表示する a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに b. SP の画面サイズでは横 1 エリア、縦 6 エリアに
21. 1. 初期状態の確認
22. 2. 12 分割の Grid を作成し、エリアを横並びに
23. 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
24. 4. media query を使って、 Tablet・SP 用の画面を表示する
25. a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに
26. b. SP の画面サイズでは横 1 エリア、縦 6 エリアに
27. 1. 初期状態
28. 2. 12 分割の Grid を作成し、エリアを横並びに
29. 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
30. 4. media query を使って、Tablet・SP 用の画面を表示する
31. シンプルな Grid System が 実装できた！
32. まとめ • Vue.js を上手く使うと、結構簡単に Grid System を作ることができる • 運用可能な Grid System を作ろうとすると、色々検討することがあってちょ い大変 • CSS Grid を使用した Grid System はまだ少なくて、今後に期待
33. 詳細はテックブログで！ https://engineer.crowdworks.jp/e ntry/2023/10/28/114403
34. ご清聴 ありがとうございました！
35. Appendix • サンプルコード • グリッドシステム　グラフィックデザインのために • Bootstrap Grid system • Chakra UI Grid
36. 運用可能な Grid System を作る上で検討が必要なこと • 画面サイズを何パターンにするか (Large, Medium, Small, etc…) ◦ それぞれ何 px を境界値(breakpoint)にするか • 各画面サイズにおいて ◦ 総カラム数は 12 カラムにするか、別にするか ◦ カラム間の間隔(Gutter)を縦横それぞれ何 px にするか。また可変にするかどうか。 • Grid のネストはどういう扱いにするか • 各種オプションの導入するか ◦ Order: カラムの順番を入れ替える ◦ Offset(Start): カラムの開始位置を指定できる • etc…