アルダグラムでソフトウェアエンジニアとして活動している松田です。
プロダクト開発において、大きさの異なるUI要素を2次元で配置するデザイン要件が発生しました。
そのためのソリューションを検討する中で、Masonry Layoutに関する技術の変遷を知りました。
今回は、その調査をもとに、今後の開発におけるMasonry Layoutの取り扱いについて考えてみました。
Masonry Layout とは
Masonry Layoutは、異なるサイズの要素を隙間なく配置するレイアウト手法で、建築の組積造（Masonry）に由来しています。
画像や記事のギャラリー表示に多く用いられ、代表的かつ象徴的なサービスとしてPinterestやTumblrが挙げられます。
ライブラリの変遷
Masonryを実現するために、古くから数多くのライブラリが開発されました。
その一部を取り上げてみます。
jQuery時代
jQueryのPluginとして、多くのライブラリが提供されてきました。
商用ライセンスも多くあり、活発に開発が行われていたことが伺えます。
| 名称 | 備考 | License | 主な関連技術 | Developer |
|---|---|---|---|---|
| Gridster.js | グリッドベースのレイアウト。要素をD＆Dで直感的に配置・リサイズできる。 | MIT | jQuery | Ducksboard |
| Packery | 隙間を詰めることに最適化されている。不規則な配置も可能。 | 商用有り | Metafizzy | |
| Isotope | フィルタリングやソート機能がある。視覚効果も多い。 | 商用有り | jQuery | Metafizzy |
| Freewall | レスポンシブ対応。多様なレイアウトをサポート。 | MIT | ||
| Masonry | レスポンシブ対応。異なるサイズの要素を隙間なく配置可能。 | MIT | jQuery | Desandro |
TypeScriptや各種フレームワークへの対応
jQueryとともに、その時代に作成されたライブラリの開発は下火となりました。
そして、TypeScriptや各種フレームワークに対応したライブラリが台頭してきました。
それらは、jQuery時代のライブラリをリスペクトしている、と言及されている場合が多いです。
| 名称 | 備考 | License | 主な関連技術 | Inspired by |
|---|---|---|---|---|
| Gridstack | Gridsterの後継ポジション。 | MIT | jQuery, TypeScript | Gridster |
| muuri | 軽量で高いカスタマイズ性が特徴。 | MIT | Packery, Isotope | |
| React-Grid-Layout | React用のグリッドレイアウトライブラリ。 | MIT | React | Gridster, Masonry |
| vue-grid-layout | Vue用のグリッドレイアウトライブラリ。 | MIT | Vue.js | React-Grid-Layout |
CSS仕様策定の動向
一方で、 CSS Grid Layout Module Level 3 といったCSSの仕様策定においても、Masonryの実現についての議論が行われています。
CSS Grid Layout の概要
Grid Layoutは、要素を二次元で効果的に配置するためのレイアウト手法です。
対照的に、Flexbox Layoutは一方向（一次元）の配置に最適化されています。
以下、簡単な比較表になります。
| FlexBox | Grid | |
|---|---|---|
| 要素の配置 | 1次元 | 2次元 |
| 余白の設定 | 主軸のみ | 主軸と交差軸の双方 |
| 実装 | 単純 | 交差軸の分、propertyが増える |
CSS Grid Layout Module Level 3
Grid Layoutは要素を2次元的に配置するという点で、Masonryと類似しています。
このため、CSS Grid Layout Module Level 3では、Masonry LayoutがGrid Layoutの一部として仕様化される予定です。
display: masonry として独立させるか否かの議論
現状ではGrid Layoutの拡張とする方向で大方の話が進んでいますが、 display: masonry として display: grid から切り離すべきか否かといった議論も、各所で行われています。
このような背景もあるため、仕様策定は一筋縄ではいかないかもしれません。
各種ブラウザでの導入状況
CSS Grid Layout Module Level 3 が2024年8月現在、Editor’s Draftであるため、本格的な運用はできません。
Safariでのみ試験的に利用可能です。
また、開発者向けFireFoxのオプションで有効化することも可能です。
現代の Masonry との向き合い方
ライブラリにおいては、過去に、jQueryの盛衰がパラダイムシフトとなりました。
そして、現代では、Grid Layoutの仕様策定にあたってMasonryの導入が議論されています。
よって、次はCSSの仕様の策定が、次のパラダイムシフトとなることが予見されます。
したがって、既存のライブラリが今後の最適な実装手法とは言えなくなる可能性は高いでしょう。
今後、既存のMasonryライブラリを使用する際は、以下の点を心掛けることで、技術の変遷に対して適切に対応できるかもしれません。
- CSS Grid Layoutの進展を注視する
- 可能であれば、新しい仕様が導入された際に迅速に対応できるよう準備しておく
もっとアルダグラムのエンジニア組織を知りたい人は、ぜひ下記の情報もチェックしてみてください！
株式会社アルダグラムのTech Blogです。 世界中のノンデスクワーク業界における現場の生産性アップを実現する現場DXサービス「KANNA」を開発しています。 採用情報はこちら: herp.careers/v1/aldagram0508/
Discussion