【Vue.js & Element Plus】ボタン押すと横からスライドで出るドロワーメニューをサクッと作ってみる

今回はVue.js(ver3)と、そのUI FrameworkであるElement Plusを使用して、ボタン押すと横からスライドで出るドロワーメニューを作ってみます。Element PlusはVue3で使いますが、管理人が以前使っていたのがver2のため、プロパティ名とかが変わっててちょっと苦戦しましたが、ver3書き方に適応させると割とサクッとできました。さっそく用語と作り方を確認してみましょう。
(＊そのほか、以前当サイトで書いたvue.js記事一覧はこちら。)

確認・ドロワーメニューってどういうやつ？

管理人は名前を知らなかったので『ボタン押すと横からスライドで出るメニュー』って言っていたんですけど、ドロワーメニューっていうらしいです。また、スマートフォン用サイトでよく使われるボタンがハンバーガーみたいなやつは、そのまま『ハンバーガーメニュー』って言われたりします。

一般的にはJqueryなどで実装することが多いみたいです（管理人の取引先のweb会社もJqueryでやってました）。作り方は、『toggleClassで見えない位置にある/出てくるを切り替える・z-indexで重ねる』とか、コツがわかっていると簡単なんですが、web制作始めたばかりのころは結構めんどかったりします。以下のような外部サイトで、作り方を紹介してくれています。

横からにゅるっとでてくるドロワーメニューの作り方
https://296.co.jp/article/09392320181809143

[JavaScript][jQuery]ハンバーガーメニュー(ドロワー)
https://qiita.com/Masanori_N/items/1dfcab17e676e37ff0e5

管理人は今回、こういうメニューをJqueryじゃなくてVue.js & Element Plusでやってみます。

element-plus ドロワーメニューのドキュメントは？

element-plus公式ドキュメントには、こんな感じで操作できるサンプルがあります。これはドロワーのページ。中には確認ダイアログなどが入ったものもありますが、No Titleにちょっと加えた程度のシンプルなやつをやってみますか。

また、API/AttributesやEventsあたりも目をとおしておくとよいです。『v-model初期値false（ドロワー見えない）』『titleでタイトルとか上に表示する文字付ける』『directionで出てくる方向』のような設定ができるからです。

Drawer(element-plus)
https://element-plus.org/en-US/component/drawer.html

vue.js & element-plus ドロワーメニューのコード

管理人が作ってみたところ、以下のようなコードになりました。一部の要素は省略しています。あとtitleのマークアップ間違ってますので調整してください（closeボタンにtitleついてたので、他の書き方推奨）

cdnで読み込むのは『element-plusのcss・vue3本体・element-plus本体』の３つです。element-plusのcssはページCSSより先に読みます。あとからスタイル上書きのためです。
el-buttonというのがメニュー開けるボタンで、@clickがクリックイベントをバインド。『クリックでopenDrawerメソッドが動く』という感じ。

el-drawerタグ内部がメニューです。title="〇〇"に書いたところがメニュー上部に表示。『Xボタン　となり』という理由でcloseって書いたけどマークアップ違います（笑）

directionの『rtl』は『right to left』で右から出ます（ltrだとleft to rightで左、ttbだとtop to bottomで上から）。

そのほか、javascript部分では『app.use(ElementPlus)』『app.mount("id指定した要素");』といったコード。これは前使ったときも書いた気がします。

const setAppの部分で『最初はdrawerVisible: falseをreturn』『クリックしたときopenDrawerメソッドでdrawerVisible = trueになる』のように押さえておくとわかりやすいのかなという感じです

element-plus ドロワーメニュー表示例

では動作確認をしてみます。初期状態で、右上のボタンがドロワーメニューのボタンです。

ボタンをおすと、こんな感じで横からメニューが出てきます。close（×）ボタンやメニュー外の暗くなっている部分を押すと、メニューが閉じます。

また、以下のページに動作確認に使ったhtmlを置いておきますので、興味がある方は操作してみてください。

（当サイトサンプル）element-plus ドロワーてすと
https://division-web.atelier-ss-agency.com/test/2025-0503-vuetest.html

あとがき・まとめ

まとめると、こんなところでしょうか。コツがわかるとシンプル目なコードで書ける気がします。いくつかエージェントや顧客に提示したサイトでelement-plus使ってたので、今度これも取り入れてみます。