Posts tagged with vue


Storybookとは、一言で表すならばコンポーネント見本市。コンポーネント志向が絶賛推し進められているフロントエンド界隈にて注目度が上がり続けている(のではないかと予想)される期待の開発ツールなのである。 どんな機能を持っているのかというと、作ったコンポーネントを単体で整列表示することができる。まさに見本市。 大雑把に言ってしまえばそれだけである。しかしフロントエンド開発を一度でも経験したことがある壮年層ならもうすでにピンと来ているに違いない。 そう、画面全体を表示することなく、目的の箇所まで画面操作をすることなく、作ったコンポーネントを、好きなプロパティを代入して、単体で表示することができるのである。 公式サイトに利用イメージがあるのでそちらも参考に。 ただいくつか問題があり、一番大きなものはReactを想定して作られていること。Reactを使っているなら何も問題はないが、俺はVueを使いたいんだという青少年にとっては乗り越えるべき壁はまだまだ多い。 だが安心して欲しい、Storybookは(先々月くらいから)正式にVueに対応している。資料の少なさという壁さえ乗り越えられたらStorybookはVueで使える。 前書きが長くなりすぎので本題に入ると、今回はvue-cliで作ったプロジェクトにStorybookを導入するまでの手順を紹介。 vue-cliセットアップ Storybookに興味を持つくらいならvue-cliでサクッとプロジェクトを作れるに違いないということで省略。あとyarnも。 Storybookインストール 導入ガイドを参考に手動でも良いが、getstorybookコマンドを使うと起動スクリプトや設定ファイルも作ってくれるので簡単。 まずはグローバルにツールをインストール。…

言わずもがなの公式ドキュメントにあるこの機能の破壊力が素晴らしいという雑記。 ルーティングでコンポーネントを切り替える機能は近頃のフロントエンドフレームワークなら当たり前のように実装されているけれど、その機能自体の破壊力に毎回感動してしまってあまり詳細な使い方までマニュアルを読み込んでいなかった。 そのせいで切り替えるコンポーネントはネストできるものの、1つのパスでは1つのコンポーネント切り替えしかできないものと思い込んでいた。 学習用にシンプルなものを作るならそれだけでも感動してしまう機能だが、webサイトとしての体裁が整ったものを作ろうとするとどうしても手の届かない箇所が出てくる。 メインコンテンツと、離れた場所(サイドバーとか)に表示するけどメインコンテンツと連動して表示を切り替えるツール系メニューなんかはまさしくその一例だろう。ツールバーに表示するタイトル部分をページによって切り替えたい時だってあるかもしれない。 切り替え対象全てを包含するような広い範囲をルーティングによる切り替え対象とすれば一応対応できるが、結局ページをほぼ丸ごと切り替えるような形になりエコではないしSPAとしてもどうなのという疑問が湧いてきてしまう。 こことこことここ、ついでにここもルーティングで切り替えられればいいのになぁと思っていたら普通に公式ドキュメントでやり方が紹介されていた。 あるじゃん、これだよこれ。1パス1コンポーネントなんて面倒な制約を考慮した画面設計なんてする必要なかった。これを使えばメインコンテンツ・ツール問題なんて直感通りのシンプルな方法で解決できてしまう。 公式でもサンプルはあったがちょっと味気なかったからもう少し切り替え感が分かるサンプルを用意してみた。 公式のサンプルを元にしてて素のecma2015が混じってるから対応ブラウザでないと動かないかも。chromeでは動いた。 http://www.miyanokomiya.tokyo/test/etc/vue-router.html#/ リンクをぽちぽち押してみると複数コンポーネントの切り替えイメージが分かるはず。ネストした中での複数コンポーネントももちろん対応してくれる。…