Javascript

[Vue.js] コンポーネントTips

Vue.js

Vue.jsを使い始めて3年近くたったので、自分なりにコンポーネントに関するTipsをまとめてみた。なお内容的に以前投稿した記事に関連する部分も多いと思うので、そちらも参考にしていただきたい。ちなみに対象のVueのバージョンは2であって、3だと違うアプローチが取れるケースもあるかと思う。今後も思い付き次第追記していく。 ...続きを読む

[Vue.js] コンポーネントTips Read More »

[Vue.js] 俺的ベストプラクティス+バッドプラクティス

Vue.js

Vue.jsを1年半ぐらい使ってきて、それなりに知見が溜まってきたので、それらを俺的ベストプラクティスとして吐き出してみようと思う。巷にあふれるVueのベストプラクティスってv-forに:key付けようとか、お作法的な話ばかりで、あまり実践的な内容は見かけないのが記事を描き初めたきっかけ。というわけで内容的にはややマニアックで、Vue初心者にはちょっと難しいかもしれないのでそこはあしからず。なお対象はVue 2で、Composition APIは使ってないのであしからず。あとTypescriptでも使ってない。 ...続きを読む

[Vue.js] 俺的ベストプラクティス+バッドプラクティス Read More »

ウィンドウリサイズに応じて要素をサイズ調整させるjQueryプラグイン

今更ながら、ちょっとしたjQueryのプラグインを作りました。タイトルの通り、ウィンドウサイズに応じて要素のサイズを自動調整するプラグインです。

本当はCSSでやらないといけない内容なんですが、どうしてもスクリプトでやる必要があったので作りました。

仕様

基準となるウィンドウ幅に対する要素の幅を決めておき、そこからの差分を実際の幅に反映させます。例えば基準となるウィンドウ幅が1280で、要素の幅が60だったとき、

  • ウィンドウwidth=1280 => 要素width=60
  • ウィンドウwidth=1281 => 要素width=61
  • ウィンドウwidth=1282 => 要素width=62
  • ウィンドウwidth=1279 => 要素width=59
  • ウィンドウwidth=1278 => 要素width=58

・・・という感じにサイズを自動調整します。

実装

※現状width(幅)の自動調整しか実装してませんが、height(高さ)にも簡単に対応できると思います。

📄jquery.autoAdjust.js
/**
 * 基準サイズを基に、ウィンドウリサイズに応じてサイズを自動調整する
 * ※widthのみ height未対応
 *
 * ex)
 * <input type="text" class="jq-auto-adjust" data-base-width="60" data-base-window-width="1280">
 * $('.jq-auto-adjust').autoAdjust(); // ウィンドウサイズ1280のときにinputの幅が60px、リサイズと共に自動伸縮
 */
(function($) {
    'use strict';

    var methods = {
        init: function(options) {
            var settings = $.extend({
                baseWidth: 'current', // number(px) or 'current'
                baseWindowWidth: 'current', // number(px) or 'current'
            }, options);

            return this.each(function() {
                var $this = $(this);
                var autoAdjust = new AutoAdjust($this, mergeOptions($this, settings));
                autoAdjust.observe();
                $this.data('plugin_auto_adjust', autoAdjust);
            });
        },

        off: function() {
            return this.each(function() {
                var autoAdjust = $(this).data('plugin_auto_adjust');
                autoAdjust.stopObserving();
            });
        },
    };

    var mergeOptions = function($el, settings) {
        return $.extend({}, settings, $el.data());
    };

    $.fn.autoAdjust = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.autoAdjust');
        }
    };

    /**
     * クラス
     */
    var AutoAdjust = (function() {

        var NAMESPACE = '.auto_adjust';

        var AutoAdjust = function($el, settings) {
            this.$el = $el;
            this.$window = $(window);

            this.baseWidth = settings.baseWidth === 'current' ? this.$el.width() : settings.baseWidth;
            this.baseWindowWidth = settings.baseWindowWidth === 'current' ? this.$window.width() : settings.baseWindowWidth;
        };

        /*
         * インスタンスメソッド
         */
        $.extend(AutoAdjust.prototype, {

            observe: function() {
                this.$window.on('resize' + NAMESPACE, this._bind('onResize'));
                this.adjust();
            },

            stopObserving: function() {
                this.$window.off(NAMESPACE);
            },

            onResize: function(e) {
                this.adjust();
            },

            adjust: function() {
                var diff = this.$window.width() - this.baseWindowWidth;
                var width = this.baseWidth + diff;
                if (width < 1) width = 1;
                this.$el.width(width);
            },

            _bind: function(funcName) {
                var that = this;
                return function() { that[funcName].apply(that, arguments) };
            },
        });

        return AutoAdjust;
    })();
})(jQuery);

上記プラグインを読み込んだら、次のような感じで使用することができます。

📄test.html
<input type="text" class="jq-auto-adjust" data-base-width="60" data-base-window-width="1280">
📄test.js
$('.jq-auto-adjust').autoAdjust(); // ウィンドウサイズ1280のときにinputの幅が60px、リサイズと共に自動伸縮

どうしてもJavascriptでリサイズしないといけない場合なんかにご利用ください。

ウィンドウリサイズに応じて要素をサイズ調整させるjQueryプラグイン Read More »

ジョルダン乗換案内を音声検索できるGoogle Chrome拡張機能

電車の乗換案内に『ジョルダン』を利用しているのですが、いちいち発着時刻等を入力するのが面倒なので、音声検索できるGoogle Chromeの拡張機能を作りました。名付けて【愛しのジョルダン音声検索】です。

愛しのジョルダン音声検索

音声入力例

  • 「品川から二子玉川」
  • 「二子玉川 品川 渋谷経由 18時45分着」
  • 「新大阪 東京 終電」
  • 「東京から横浜 3時間後 出発」
  • 「明日の8時半 上野から水戸」

などなど。出発/到着駅はもちろん、日付や時刻も条件設定できます。まだ開発したばかりで大した機能はありませんが、今後ぼちぼち追加していこうかなと思っています。地味に便利なので良かったら使ってみてください。なお、ジョルダンLOVEなので、ジョルダン以外のサービスに対応するつもりは今の所ありません!

ダウンロードChromeウェブストアから

ジョルダン乗換案内を音声検索できるGoogle Chrome拡張機能 Read More »