JavaScriptにおける配列の操作（「要素数取得」「配列のコピー生成」「並び替え」など）について紹介します。
　
目次
length｜要素数取得
includes｜存在確認
indexOf｜位置確認 & 存在確認
join｜結合
slice｜配列のコピー生成
reverse｜逆順
sort｜並び替え

length｜要素数取得

　　　Array.length

includes｜存在確認

　　　arr.includes(valueToFind[, fromIndex])

　　　valueToFind：検索する値です。
　　　fromIndex（省略可）：この配列内で valueToFind を探し始める位置です。

indexOf｜位置確認 & 存在確認

　　　arr.indexOf(searchElement[, fromIndex])

　　　searchElement：検索する配列要素です。
　　　fromIndex（省略可）：この配列内で searchElement を探し始める位置です。

join｜結合

　　　arr.join([separator])

　　　separator（省略可）：配列の各要素を区切る文字列を指定します。
　　　省略した場合、配列の要素はカンマ (",") で区切られます。

slice｜配列のコピー生成

　　　arr.slice([start[, end]])

　　　start（省略可）：取り出しの開始位置を示す 0 から始まるインデックスです。
　　　end（省略可）：取り出しを終える直前の位置を示す 0 から始まるインデックスです。

reverse｜逆順

　　　a.reverse()

sort｜並び替え

　　　arr.sort([compareFunction])

　　　compareFunction（省略可）：ソート順を定義する関数を指定します。
　　　省略された場合、配列の各要素は文字列に変換され、
　　　各文字の Unicode のコードポイント順に従ってソートされます。

　
compareFunction では、２つの要素の値を引数に取ります。
そして、次のルールに従って並び替えをおこないます。
==========================
・コールバック関数が 0 未満の値(例えば -1 )を返した場合、一つ目の要素を二つ目の要素より小さいインデックスにする
・コールバック関数が 0 を返した場合はそのまま
・コールバック関数が 0 より大きい値(例えば 1 )を返した場合、二つ目の要素を一つ目の要素より小さいインデックスにする
==========================

form の input の入力値を取得するには、input への入力のイベント「input イベント」または「change イベント」を利用します。　
　
「input イベント」⇒input エリアに文字を入力するたびに発火します。
「change イベント」⇒input エリアに文字を入力して Enterキーを押すと発火します。
　
●要素の属性値にイベントハンドラを登録する場合は 「oninput 属性」または「onchange 属性」を使用します。

　　　<input type="text" name="test1" oninput="inputChange01()">

　　　<input type="text" name="test3"  onchange="inputChange02()">

　
●addEventListener を使用して、イベントハンドラを登録する場合

　　　input.addEventListener('input', inputChange);

　　　input.addEventListener('change', inputChange2);

　
●引数 event で、入力された値を取得することができます。
・「oninput 属性／イベント」

　　et inputChange = (e) => {
    　text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
    　input_val.textContent = e.data;  //今、入力されたテキスト
　　}

・「change 属性／イベント」

　　et inputChange = (e) => {
    　text_val.textContent = e.currentTarget.value;  //テキストエリアに入力されたテキスト
　　}

アロー関数（Arrow function）を利用すると、関数リテラル（無名関数　匿名関数）をシンプルに記述することができるようになります。
コードも可読性を上げて、メンテナンスを容易にするためにも、ぜひ覚えて使えるようになりましょう。
　
■基本的なアロー関数の記述方法

　　　(引数) => {関数の本体}

　
■アロー関数は条件によってさらに簡素化できます。
①関数の本体が一文である場合は、{…}の「{」と「}」を省略することができます。

②引数がひとつの場合、引数のカッコも省略できます。

③引数がない場合、「()」と記述します。

　
　
■アロー関数での、this の取り扱いについて
・通常の無名関数で this を使用すると、その呼び出し元のオブジェクトになります。

・一方、アロー関数式で宣言された関数は、宣言された時点で、thisを確定（＝束縛）させてしまいます。

分割代入(Destructuring assignment)とは、配列やオブジェクトの要素を取り出して個別の変数に代入するのを簡単に行えることをいいます。
　

　
取り出したプロパティ値を、名前の異なる変数に割り当てることもできます。

　
対応するプロパティがない変数には、undefinedが入ります。

　
■この構文とスプレッドの組み合わせで、要素を取り出しつつ残りを変数に代入することが可能です。

ネストしたオブジェクトの場合

スプレッド構文(Spread Syntax)とは、「…foo」の形で記述され、配列やオブジェクトの要素を文字通り展開する構文のことをいいます。
　
例：配列の場合

　
例：オブジェクトの場合

　
■ネストしている場合
配列・オブジェクトの両方において、ネストしている場合ｇは注意が必要です。
下記のとおり、クローンした子要素は元の配列・オブジェクトを参照しています。

これを解決するには、ネストしている配列・オブジェクトも分割してスプレットする必要があります。

コードを書いていると、ネストが複雑になってコードが見にくくなることがよくあります。
そんなときは、return を利用して、見通しの良いコードを書くことができます。
　
普通に記載すると下記のようにネストが多くなり、見通しが悪いコードになりますが、

　　　let changeiput = (e)=>{  
　　　　if (e.currentTarget.value % 2 == 0) {
    　　　meytext.textContent = "偶数"
　　　　}else{
    　　　meytext.textContent = "奇数";
　　　　}
　　　}

　
次のように return を使用して、見通しが良いコードにすることができます。

　　　let changeiput = (e)=>{  
 　　　　if (e.currentTarget.value % 2 == 0) return meytext.textContent = "偶数"
 　　　　return meytext.textContent = "奇数";
　　　}

form の radio ボタンをJSで取得する場合、RadioNodeList を利用すると、簡単に取得できます。
　

　　<form id="radio_ex" action="./form.php">
	<input type="radio" name="plusone" value="aaa">選択肢1
	<input type="radio" name="plusone" value="bbb">選択肢2
	<input type="radio" name="plusone" value="ccc" checked>選択肢3
	<input type="radio" name="plusone" value="ddd">選択肢4
　　</form>

    // form要素を取得
    let element = document.getElementById( "radio_ex" ) ;

    // RadioNodeListを取得
    let elements = element.plusone ;	// RadioNodeList

    // HTMLOptionsCollectionの内容
    console.log( elements[0] ) ;	// 選択肢1
    console.log( elements[1] ) ;	// 選択肢2
    console.log( elements[2] ) ;	// 選択肢3
    console.log( elements[3] ) ;	// 選択肢4

    // 現在、選択されている値を取得
    console.log( elements.value ) ;	// "ccc" (例)

    //チェックを付ける
    elements[0].ckecked = true;

    //チェックを外す
    elements[0].ckecked = false;

　
使用例

　
＜対応ブラウザ＞
・メジャーブラウザはほぼ全て対応しています。
Can I use
　
　

　

スクロールの開始位置を常に一番下に設定する方法を紹介します。
ラインを使い慣れてるユーザーには、
常に一番下に最新メッセージを表示させたプラットフォームが見慣れてるかもですね。
　

　
＜解説＞

　　　let target = document.getElementById('scroll-inner');
　　　target.scrollIntoView(false);

　
target.scrollIntoView()は、要素が（ブラウザのウィンドウ上の）表示範囲に入るまでページをスクロールします。
引数を省略または true とすることで上端に来るようにスクロールし、false ならば下端に来るようにスクロールします。

特定の要素の座標を取得するには、次のとおり getBoundingClientRect() を使用する。
　

　　let {left,top} = document.querySelector(element_selector).getBoundingClientRect()

　
これは、特定の要素の位置をブラウザの表示領域の左上を(0, 0)として、そこからの相対位置で示されています。
特定の要素の位置を取得したいとき、html の領域がブラウザの表示領域と一致していない場合などがあり、正確な値を取得できないケースがたまにある。
そういった場合も含めて、次のとおりに取得するのが良い。
　

　　function getAbsolutePosition(elm) {
       const {left,top} = elm.getBoundingClientRect();
       const {left: bleft,top: btop} = document.body.getBoundingClientRect();
       return {left: left - bleft,top: top - btop,};
    }

　　let myelmposition; 
　　myelmposition = getAbsolutePosition(elm);
　　console.log myelmposition.left;
　　console.log myelmposition.top;

Vue.router使用時に、ヘッダー／ナビメニュー／背景画像の処理をおこなったときの備忘録
　

Routerインスタンス

router.jsで生成したRouterインスタンスはthis.$routerで参照することができます。

■router.push

■router.replace

指定したパスに遷移します。
両者の違いは、遷移するのに履歴を上書きするかどうかです。「push」は履歴を上書しません。一方、「replace」は履歴を上書きします。

　　this.$router.push('/test1');
　　this.$router.replace('/test1');

■router.go

指定したページ分、進みます。マイナスの数字を指定すると、その分ページが戻ります。

　　this.$router.go(2);

■router.back

ページを戻します。

　　this.$router.back();

■router.foward

ページを勧めます。

　　this.$router.foward();

例

　　methods: {
            forward () {
                // test1へ遷移
                this.$router.push('/test1')
            },
            replace () {
                // test1へ遷移
                this.$router.replace('/test1')
            },
            forwardDouble () {
                // 2つ先へ
                this.$router.go(2)
            },
            backDouble () {
                // 2つ前へ
                this.$router.go(-2)
            },
            forward () {
                // 1つ前へ
                this.$router.forward()
            },
            back () {
                // 1つ先へ
                this.$router.back()
            }
        }           

　　<button @click="forward">/test1へ遷移</button>
　　<button @click="replace">/test1へ遷移</button>
　　<button @click="forwardDouble">2ページ先へ移動</button>
　　<button @click="backDouble">2ページ前へ移動</button>
　　<button @click="forward">1ページ先へ移動</button>
　　<button @click="back">1ページ前へ移動</button>

router-link

指定したページを表示する場合は、router-linkコンポーネントを使用します。

■router-link

　　<router-link to="/test">TESTページ</router-link>

　↓HTMLに展開すると a タグで展開されます。

　　<a heref="/test" ....>TESTページ</a>

　
aタグではなく別のタグとして展開したい場合はtagプロパティを使用します。

　　<router-link to="/test" tag="li">TESTページ</router-link>

■#router-link-active

toでバインドしたパスが、現在のパスに含まれている場合に付与されます。例えば/detailを指定したリンクは、/detail, /detail/001, /detail/002のときは付与されます。

■#router-link-exact-active

toでバインドしたパスと現在のパスが完全に一致した場合に付与されます。同じ例で考えたときに、/detail/001, /detail/002ではrouter-link-exact-activeは付与されません。
　

exactプロパティを指定すると、パスが完全一致の場合にのみrouter-link-activeクラスが付与されるようになります。

　　<router-link to="/" exact>TESTページ</router-link> 

active-class, exact-active-class に、特定にクラス名を付与できます。active-class, exact-active-classプロパティにクラス名を指定します。

　　<router-link to="/" active-class="active-link" exact-active-class="exact-active-link">TESTページ</router-link> 

ルートオブジェクト

ルートオブジェクトには現在アクティブなルートの情報となり、this.$routeとして利用することができます。

■$route.path

現在表示しているパスを返します。

　　$route.path

パスが特定のときに、特定の class を付けるときは、次のように記述すればよい。
（表示中のパスが「/」のとき、class 「toppage」を付ける）

　　<nav class="dtnavi" :class="{'toppage': $route.path === '/'}">

■$route.name

現在表示しているパスのnameを返します。

　　$route.name

■$route.params

動的なルーティングで設定したパラメータオブジェクトを返します。

　　$route.param

■$route.query

現在表示しているパスのクエリ（?の後に続くテキスト）を返します。

　　$route.query

■$route.fullPath

現在表示しているパスのフルパスを返します（クエリを含む）

　　$route.fullPath

HTMLのvideoタグで動画を自動再生するとき、iphoneのsafariでは自動再生されなかったので、その時の対応の備忘録
　

　
videoタグのvideoを自動再生するとき、autoplay属性を付与する。

　　<video id="myvideo" src="●●●/×××.mp4" autoplay></video>

　
ただし、これではiphoneでは自動再生されない。
次の２つの属性を付与する必要がある
・playsinline
　ビデオをインラインで再生する。昔は、iOSではインラインで再生されなかったが、インラインで再生できるようになった。自動再生するには、インラインで再生が必須。
・muted
　ページ遷移でいきなり音が出るのはユーザビリティが非常に悪いので、音がでないようにしておかなければ自動再生できない仕様となっているらしい。
　
★→autoplay、playsinline、muted属性３つセットで次のように記述しないと、自動再生されない。

　　<video id="myvideo" src="●●●/×××.mp4"  autoplay muted playsinline></video>

　
ただし、上記記述をしてもiphoneで自動再生されなかった。
何かしらの影響で、muted属性がうまく認識されなかった可能性があるので、jsで強制的にmuteにしてみたら、自動再生されるようになった。

　　$(function() {
　　　　var video = $('video').get(0);
　　　（または
　　　　　var video = $('#myvideo')）
　　　　video.muted = true;
    }

　
今回は、php を使って場合分けを行い、videoタグをつけていたため、
タイミング的にvideoタグのmuted属性をうまく読み込めなかった可能性がある。
こういった場合は、jsで読み込み完了時に強制的にmutedを付与すれば解決した。
　

　

fadeIn で、要素を表示すると、display が block になってしまい、
flex 等にしている要素だと不都合なので、この解決方法を調べたので備忘録として
　

　
非常に単純で、fadeIn の後に css()を続けて記載してやれば良い。

　　$(element).fadeIn().css('display','flex');

jQueryは、こんな風に繋げて記載できるので楽。やはり、DOM要素を操作するにはjQueryは秀悦！
　
ちなみに、こういう書きかたもある。

 $(element).next(element).slideDown({
 　　start: function () {
 　　　　　　　　$(this).css({display: "flex"})
            }
 });