【Vue.js】グリッドレイアウトのVueコンポーネントを作った

SweetScrollでお世話になってた、わだつよしさんが作ったReact Stack GridをVueコンポーネントとして再現してみました。

PinterestなレイアウトのためのReactコンポーネントを作った - wadackel.me
ここ最近はずっと、前の記事で書いた Web サービスをコツコツ作り進めています。その中で、よくある Pinterest っぽいレイアウトを使いたかったのですが、既存の React

GitHub

matometaru/vue-metal-grid
Grid layout components for Vue.js. Contribute to matometaru/vue-metal-grid development by creating an account on GitHub.

作ったきっかけ

Vue.jsある程度使えるようになってきたので、何かひとつ成果物を作りたいなと思い作りました。
たまたま、わださんの作ったものみてるとReactで、使いやすく、デモページも素敵なReact Stack Gridを発見しました。

VueにもVue Grid Layoutというコンポーネントはあったのですが、おそらく管理画面向きのコンポーネントで、フロントで気軽に使える形でなく、現時点でレスポンシブも未対応でした。

jbaysolutions/vue-grid-layout
A draggable and resizable grid layout, for Vue.js. - jbaysolutions/vue-grid-layout

React Stack GridをVueコンポーネントとして再現すれば、使ってもらえるのではないかと思い作成に至りました。

DEMO

vue-metal-grid Vue Metal Grid

使い方

GitHubに英語の説明はありますが、日本語でも説明します。

className アイテムのラッパーのクラス名
component アイテムのラッパーのタグ
itemComponent グリイドアイテムのタグ
gridRef render関数でAPI関数を参照したいときに使用。templateを使う場合はrefを使用。
columnWidth グリッドアイテムの幅
gutterWidth グリッドアイテム間の横マージン
gutterHeight グリッドアイテム間の縦マージン
duration transition-duration
appearDelay グリッドアイテムの出現間隔
appear 初回非表示アニメーション
rtl trueで右から出現

コード例は以下を参考にしてください。
vue-metal-grid/docs/js/pages at master · matometaru/vue-metal-grid

苦戦した箇所

VueではonMountedやstyleなど使えない語がある。
Vueでslotの更新をwatchできない。
TransitionGroupの仕様がReactとVueで異なる。
…など。
技術的な詳細はVue Metaruに、書こうと思います。

できてないところ

  • SSRに関する検証
  • 型検証

感想

Stack Grid LayoutをVueで再現するということで、お手本となるコードがあったのですが、当然ですがReac、Vueでは少し仕様が異なります。再現するという制約が、仕様の違いで苦しむ箇所があり、TransitionGroupの調査には2日程要しました。
ただ、その際に調べたり、コードを読むことでReacの仕様もかなり把握できました。Reactは触ったことがないのですが、だいたい使える気がしてます(笑)

またwebpackに関してもlaravel-mixや、vue-cliのような最初からある程度用意されているものではなく、必要なものを理解しながらインストールするを行ったため、時間はかかったものの非常に開発しやすい環境となりました。

感謝

README.mdからwebpackの設定、コードの記述、デモページ、作成記事、全て高いレベルで作成されており非常に勉強になることばかりでした。
私自身も真似してもらえるような物を今後は作れるよう引き続き努力します。
わだつよしさん、ありがとうございました。

コメント