2019年10月4日Vueだけでつくる!ページトップへ自動スクロールするコンポーネント(DL可)さてさて、前回は時・分が連携する時間入力コンポーネントでユーザビリティがテーマの記事をお届けしましたが、今回もその流れで「あれば地味に便利」という機能をつくってみたいと思います。それは何かと言うと「クリックするとページの一番上まで自動的にスクロールしてくれる」機能です。ページが縦に長い場合だと便利なんですが、例えば以下のようなボタンをクリックすると一番上まで移動してくれたら便利じゃありませんか??なお、実は自動スクロールする部分はJavaScriptライブラリのパイオニアjQueryで以下のようにすぐ実装することができます。1秒で移動でも!最近はjQueryを使わないサイトもじわじわ増えつつありますので、今回はjQueryは一切使わずVueとJavaScriptだけでコンポーネントをつくってみます。合わせて読みたいやりたいことせっかくコンポーネント化するので、次のような7つの特徴があるボタンを作ってみます。どれかに固定する移動する速度(秒数)を指定できるボタンのテキストは自由に変更可能CSSだって自由に追加できちゃう!では、実際につくっていきましょう。Vueでページトップに自動スクロールするコンポーネントをつくるでは、今回もVue初心者にもわかるように順を追って説明をしていきます。Vueを使えるようにしてコンポーネントの基本をつくるでは、まずはをcdn(インターネット上で公開されているパッケージ)からVueを読み込んで、「v-move-to-top」という名前のコンポーネントをつくっていきます。});</script></body></html>Vueコンポーネントは第1引数に名前、そして第2引数にオプションを指定します。templateは実際に目に見えるHTMLを指定するのですが、今の段階では次のような、普通のボタンが表示されるだけです。このボタンを基本としていろいろな機能を追加していきましょう。クリックしたら自動スクロールでページトップへ移動するようにするでは、メインになる自動スクロールの機能を実装していきます。}});この中では、スクロール位置を移動させるmoveToTop()というメソッドを追加し、さらにこのメソッドをクリックで実行できるように先ほどのボタンに@click=""でセットしています。このメソッドではsetInterval()を使って0.025秒ごとに何度もコードが実行されます。その度にscrollBy()で少しずつスクロール位置が変更するので、あたかもアニメーションのように少しずつ移動するように見えるという訳ですね。特定のスクロール位置で表示・非表示を切り替えるでは続いて、スクロール位置によってボタンを「表示/非表示」にする機能をつくっていきます。ボタンが表示されのは、ちょっと邪魔・・・😅」だからです。それほど縦が長くないページはスクロール自体が必要ないので、自動的に非表示になるようにしておくほうがユーザビリティ的にはグッド!だと思います。}});まずこの中で変更したのは、まずtemplateの部分です。name="fade">〜</transition>で囲っています。mounted()内で、このタグがフェードイン&フェードアウトに必要な以下のCSSを「ページ本体」に追加しています。JS内でCSSを定義することには議論があると思いますが、今回はコンポーネントひとつだけで完結させるためにあえてこの形をとりました。気になる方は通常通りCSSで定義してください。表示/非表示を切り替えるためにshow変数を定義してボタンにv-if="show"として追加し、さらにその切り替わりはスクロール・イベントで「スクロール位置が150を超えてるかどうか」で判断するようにしています。これでフェードイン・アウトが実装できました。固定できるようにしてみましょう。省略});ここでやったことは、まずpropsの追加です。これは、以下のようにコンポーネントがプロパティを使えるようにする設定です。position="bottom-left"></v-move-to-top>つまり、ページのどの位置にボタンを表示するかはpositionで指定することができます。このpositionプロパティによって位置を固定するスタイルシートを作っているのがcomputedのstyles()です。positionがtop-rightの場合、作成されるスタイルシートは以下のようになります。'10px'}最後にボタンに:style="styles"として適用すれば4つの位置で固定できるようになります。(ちなみに指定しない場合は右下で固定されます)移動速度(秒)を指定できるようにする冒頭にjQueryでスクロール位置を変更するサンプルを紹介しましたが、その中では1000ミリ秒(=1秒)で移動を完了するという設定でした。今回のコンポーネントにもこの機能が使えるようにしましょう。省略});といっても、ほぼコードは出来上がっているのでpropsにdurationを追加し、moveToTop()に適用するだけです。parseInt()を使っているのはdurationには文字列が入ってくる可能性があるためです。実際にはエラーは発生しませんでしたが、今後の拡張などを見据えてこういう部分は正確にしておくことをおすすめします。ちなみに以下のように:をつけてデータとして指定すると数値として扱ってくれます。:duration="1000"></v-move-to-top>表示するテキストを自由に変更できるようにするほぼ完成に近づいてきましたが、ここでより汎用的に使えるようにボタンのテキストを自由に変更できるようにしてみましょう。省略});この中で、ボタンのテキストを<slot></slot>に変更しました。することで、以下のようにタグで囲んだ部分が自動的に置き換わるようになる、つまり、ボタンのテキストが指定できるようになるという訳です。<v-move-to-top>ここが自由に変更できる</v-move-to-top>CSSを自由に追加できるようにする実は、コード的にはすでに完成していてコンポーネントのタグに直接CSSを追加することができます。サンプルとしてCSSフレームワークのTailwindを使ってボタンを装飾してみましょう。--></body></html>これで実行したものが以下のボタンです。お疲れ様でした😊✨テストしてみるでは、今回作ったコンポーネントが実際に動くかをテストしてみましょう。スクロールできないとチェックができないので以下のように100個の改行を作って実行してみます。</v-move-to-top></div>では、これで実行してみましょう!(ボタンはページ右下で固定されます)うまくいきました😊✨ダウンロードする今回実際に開発したソースコードを以下からダウンロードすることができます。cdnを使っているので展開してすぐ試すことができますよ!ページトップへ自動スクロールするVueコンポーネントおわりにということで今回は、あれば便利なVueコンポーネントとして自動スクロール機能を開発してみました。実は、今回はじめて<transition>〜</transition>を使ったのですがシンプルに使えるようになっていてちょっと感動しました。フェードイン・アウトだけじゃなく他にも使い方があるようなので、jQueryを使っていないサイトでは重宝するかもしれません。普段はwindow.scrollTo()を使っているのですが今回はあえてwindow.scrollBy()を使ってみました。いうと、当初は以下のようにしていたのですがこれだと毎回スクロール位置を計算する必要があったからかintervalが短いほど移動速度が遅くなってしまったからです。interval);アイデア次第で解決できることも多いだなと実感しました😊✨なにわともあれ、今回はこのへんで終了です。皆さんも「あると便利かも」を探してみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。