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

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

Transcript

1. Vue.js を使って Grid System を
   実装した話
   Vue Fes Japan 2023 - 2023/10/28
   @t0yohei / CrowdWorks
   

   View Slide

2. Grid System を使ったことがある、
   なんとなく知っている方 󰢧
   

   View Slide

3. 自己紹介
   ● とよへい ( @t0yohei )
   ● 株式会社クラウドワークス
   ○ Web エンジニア
   ● アニメとコーヒーが好き
   ● Vue.js / Ruby
   

   View Slide

4. VueFes 1 週間前、
   あることに気づいた
   

   View Slide

5. Grid System の実装詳細、
   みんな興味あるか...？🤔
   

   View Slide

6. そうだ！
   ライブコーディングしよう！
   

   View Slide

7. Vue.js を使って Grid System を
   実装した話
   Vue Fes Japan 2023 - 2023/10/28
   @t0yohei / CrowdWorks
   

   View Slide

8. Vue.js を使って Grid System を
   作ってみよう
   Vue Fes Japan 2023 - 2023/10/28
   @t0yohei / CrowdWorks
   

   View Slide

9. ということで、
   Grid System を作っていこう
   

   View Slide

10. そもそも Grid System って？
    

    View Slide

11. Grid System の定義
    > グリッドシステムとは、画面上に架空の縦
    横線をガイドラインとして引きブロックごとに
    文字や図版を配置することでデザインのシン
    プルな美しさを引き出す手法
    https://store.bookandsons.com/?pid=146801609
    

    View Slide

12. 実装における Grid System (Bootstrap の場合)
    > グリッドシステムは、12カラムのシステムと5段階のレスポンシブ、Sassとmixin、いくつかの定
    義されたクラスですべての図形とサイズのレイアウトを作成可能です
    > グリッドシステムは、一連のコンテナ、行、列を使用してコンテンツをレイアウトし、整列させま
    す
    https://getbootstrap.jp/docs/5.3/layout/grid/
    

    View Slide

13. 実装における Grid System (Bootstrap 風) に必要な要素
    ● N 個(ex. 12 個)のカラムで画面を分割できる
    ● カラム数の指定で、縦・横のコンテンツレイアウトを制御
    できる
    ● M 段階(ex. 5 段階)のレスポンシブな画面にできる
    

    View Slide

14. 今回作る Grid System (Bootstrap 風)
    PC(Large) TBL(Medium) SP(Small)
    画面サイズ >= 1200 px >= 576 px < 576 px
    総カラム数 12 12 12
    

    View Slide

15. 完成イメージ
    

    View Slide

16. View Slide

17. Grid System の実装パターン
    ● float を使う
    ● Flexbox を使う
    ● CSS Grid を使う
    

    View Slide

18. Grid System の実装パターン
    ● float を使う
    ● Flexbox を使う
    ● CSS Grid を使う
    

    View Slide

19. ここから
    ライブコーディング
    

    View Slide

20. 手順
    1. 初期状態の確認
    2. 12 分割の Grid を作成し、エリアを横並びに
    3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
    4. media query を使って、Tablet・SP 用の画面を表示する
    a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに
    b. SP の画面サイズでは横 1 エリア、縦 6 エリアに
    

    View Slide

21. 1. 初期状態の確認
    

    View Slide

22. 2. 12 分割の Grid を作成し、エリアを横並びに
    

    View Slide

23. 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
    

    View Slide

24. 4. media query を使って、
    Tablet・SP 用の画面を表示する
    

    View Slide

25. a. Tablet の画面サイズでは横 2 エリア、縦 3 エリアに
    

    View Slide

26. b. SP の画面サイズでは横 1 エリア、縦 6 エリアに
    

    View Slide

27. 1. 初期状態
    

    View Slide

28. 2. 12 分割の Grid を作成し、エリアを横並びに
    

    View Slide

29. 3. PC の画面サイズでは横 3 エリア、縦 2 エリアに
    

    View Slide

30. 4. media query を使って、Tablet・SP 用の画面を表示する
    

    View Slide

31. シンプルな Grid System が
    実装できた！
    

    View Slide

32. まとめ
    ● Vue.js を上手く使うと、結構簡単に Grid System を作ることができる
    ● 運用可能な Grid System を作ろうとすると、色々検討することがあってちょ
    い大変
    ● CSS Grid を使用した Grid System はまだ少なくて、今後に期待
    

    View Slide

33. 詳細はテックブログで！
    https://engineer.crowdworks.jp/e
    ntry/2023/10/28/114403
    

    View Slide

34. ご清聴
    ありがとうございました！
    

    View Slide

35. Appendix
    ● サンプルコード
    ● グリッドシステム　グラフィックデザインのために
    ● Bootstrap Grid system
    ● Chakra UI Grid
    

    View Slide

36. 運用可能な Grid System を作る上で検討が必要なこと
    ● 画面サイズを何パターンにするか (Large, Medium, Small, etc…)
    ○ それぞれ何 px を境界値(breakpoint)にするか
    ● 各画面サイズにおいて
    ○ 総カラム数は 12 カラムにするか、別にするか
    ○ カラム間の間隔(Gutter)を縦横それぞれ何 px にするか。また可変にするかどうか。
    ● Grid のネストはどういう扱いにするか
    ● 各種オプションの導入するか
    ○ Order: カラムの順番を入れ替える
    ○ Offset(Start): カラムの開始位置を指定できる
    ● etc…
    

    View Slide