javascript JavaScriptのquerySelectorが便利 JavaScriptでDOM操作を行う際には、 document.getElementById や document.getElementByClassNameなどをよく使うと思います。 しかし、document.querySelectorがとても便利だったため、紹介したいと思います。 IDを取得する <div id="te... 2020年1月30日
javascript JavaScriptで親要素のElementsを検索し、一致した場合に返す jQueryには、親要素を検索することができるparentsという関数があります。 ただ、jQueryを導入せず、生のJavaSctiptで同じような動きを再現したかったため、以下の関数を作成しました。 function parents(elements, attribute, name){ while(true){ elemen... 2020年1月29日
javascript window.onloadの利用はお勧めしない その理由 window.onloadを書いたけど、動かないことが多々あります。 これは、同じページ内で複数のwindow.onloadが記述されている場合に、一つしか動作できないのが原因なようです。 また、「一つしか動作できない」というのは、正確には、関数を上書きしてしまっている(オーバーライド)しているようです。 複数の開発者で開発して... 2020年1月19日
javascript Javascript DOM削除する【脱 jQuery】 JavascriptでDOMを削除する方法についてです。 もし、IDが「sample」のDOMを削除したいのであれば、以下のように記述します。 サンプルコード var removeElement = document.getElementById('sample'); if(removeElement != null) rem... 2020年1月9日
javascript Vuejs 属性要素にマスタッシュ構文を使用する【idやclassを指定する】 マスタッシュ構文なるものを覚えたので、属性要素idにマスタッシュ構文を使用し、idを指定してやろうと思ったのですが,,, <div id={{custom-id}}></div> こんな書き方は、出来ません。 タイトル詐欺じゃないか、と思った方。 ごめんなさい。 ただ、他の方法があるため、そちらをご紹介い... 2020年1月9日
javascript Vuejs の基礎を理解する【マスタッシュ構文編】 最近流行りのvuejsを使用してみました。 その中で特徴的なマスタッシュ構文、データバインディング構文などをvuejsを触ったことがない人でも理解しやすいよう、まとめてみようと思います。 今回は、「マスタッシュ構文」のみについて書きます。 基本構文の確認のみなのでCDNを使用しようと思います。 そのため、何かをインストールしたりす... 2020年1月9日
javascript Vuejs テンプレート内でのid重複を回避する【idを振りなおす】 テンプレート内でidを使用しているため、テンプレートで複数呼び出したら、idが重複してしまい、警告されてしまいました...。 しかし、テンプレートの中身を弄ると、影響範囲も広く、面倒なため、idを振りなおすように記述することにしました。 現状サンプル(問題の状態) var mainTemplate = { template: '... 2020年1月8日
javascript JS 正規表現でバリデーションをかける【サンプルコード】 Javascriptで正規表現をかける場合のサンプルを作成しました。 サンプルコード function regularExpression(value, name, array){ const katakana = '\\u30a0-\\u30ff'; const hiragana = '\\u3040-\\u309f'; co... 2020年1月8日
javascript JavaScriptでPHP関数 array_columnを実装する【コピペで簡単】 PHP関数でarray_columnといえば、配列の構造を変換するのに便利な関数です。 それをjavascriptで実装しましたので、利用してください。 実装 function array_column($array, $name=null, $key=null){ if(arguments.length < 1 ) th... 2020年1月3日
javascript JavaScriptでPHP関数 array_flipを実装する【コピペで簡単】 PHP関数でarray_flipといえば、配列内のキーと値を入れ替えてくれる関数です。 それをjavascriptで実装しましたので、利用してください。 実装 function array_flip($array){ if(arguments.length != arguments.callee.length) throw ne... 2020年1月3日
javascript JavaScriptでPHP関数 array_count_valuesを実装する【コピペで簡単】 PHP関数でarray_count_valuesといえば、配列内で同じ要素をカウントしてくれる関数です。 それをjavascriptで実装しましたので、利用してください。 実装 function array_count_values($array){ if(arguments.length != arguments.callee... 2020年1月3日
javascript JavaScriptでPHP関数 array_chunk を実装する【コピペで簡単】 PHP関数でarray_chunkといえば、配列を指定したサイズで分割して返してくれる関数です。 それをjavascriptで実装しましたので、利用してください。 実装 function array_chunk($array, $size){ if(arguments.length != arguments.callee.len... 2020年1月3日