PlusOne Blog

「JavaScript」に関する記事

NEW 【JavaScript】アロー関数(Arrow function)とは?

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

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

 

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

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

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

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

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

 

 

この記事を読む

NEW 【JavaScript】分割代入(Destructuring assignment)とは?

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

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

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

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

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

 

 

この記事を読む

NEW 【JavaScript】スプレッド構文(Spread Syntax)とは?

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

 
例:オブジェクトの場合

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

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

 

 

この記事を読む

【JavaScript】ネストを減らしてコードを綺麗にしたい

コードを書いていると、ネストが複雑になってコードが見にくくなることがよくあります。
そんなときは、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 = "奇数";
   }

 

 
 

 

この記事を読む

【JavaScript】form の radio ボタンをJSで取得する

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
 
 

 

この記事を読む

【JavaScript】スクロールの開始位置を常に一番下に設定する方法

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

 
<解説>

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

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

 

 

この記事を読む

【JavaScript】要素の座標位置を取得する

特定の要素の座標を取得するには、次のとおり 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;

 

 

この記事を読む

【JavaScript】Vue.router についての備忘録

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/JS】iphoneでvideoが自動再生されない

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

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

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

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

  <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を付与すれば解決した。
 

 

この記事を読む

【JavaScript】fadeIn()のとき、displayをflexにする方法

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

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

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

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

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

 

 

この記事を読む

【JavaScript】Intersection Observer API

画像の遅延ロードを作成しているとき、
Intersection Observer API について、調べてみたので、備忘録として。
 
Intersection Observer API とは、交差監視APIと言われ、任意の要素が表示画面内に現れるかどうかを監視・判定する API です。
引用:https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API
 

Intersection obserer の作成

コンストラクターを呼び出して Intersection observer を作成し、閾値が一方向また他の方向に交差する度に実行されるコールバック関数を渡します。

  let options = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 1.0
  }

  let observer = new IntersectionObserver(callback, options);

■Intersection observer のオプション
コンストラクタに渡された options オブジェクトは、オブザーバーのコールバックが呼び出される状況を制御し、以下のフィールドがあります:
 
root:ターゲットが見えるかどうかを確認するためのビューポートとして使用される要素です。指定されなかった場合、もしくは null の場合はデフォルトでブラウザーのビューポートが使用されます。
 
rootMargin:root の周りのマージンです。CSS margin プロパティに似た値を持つことができます。例えば、”10px 20px 30px 40px” (top, right, bottom, left) のようなものです。この値はパーセント値にすることができます。この一連の値は、交差を計算する前にルート要素の範囲のボックスの各辺を拡大または縮小させることができます。既定ではすべてゼロです。
 
threshold:単一の数値もしくは数値の配列で、オブザーバーのコールバックを実行するターゲットがどのくらいの割合で見えているかを示します。 50% 通過したときのみ検出する場合は値 0.5 を使用します。 25% を超える度にコールバックを実行する場合は、 [0, 0.25, 0.5, 0.75, 1] という配列を指定します。既定値は 0 です (つまり、1ピクセルでも表示されるとコールバックが実行されます)。1.0 の値は全てのピクセルが見えるようになるまで、閾値をまたいだとみなされないことを意味します。
 

監視される要素をターゲットにする

  var target = document.querySelector('#listItem');
  observer.observe(target);

ターゲットが IntersectionObserver に指定された閾値を満たす度にコールバックが呼び出されます。コールバックは IntersectionObserverEntry オブジェクトのリストとオブザーバーを受け取ります。
 

交差しているかどうかの判定

変更の通知を受ける時にコールバック関数に渡された IntersectionObserverEntry の isIntersecting プロパティの値をチェックすることで、変更が感知された方向 (つまり要素が見えたかどうかを) 判断することが出来ます。
isIntersecting が true であれば、ターゲットは閾値を超えて少なくとも見るようになったということですし、false であればターゲットは指定した閾値では表示されなくなったということです。

 intersectionCallback(entries) => {
   entries.forEach(entry => {
     if (entry.isIntersecting) {
       let elem = entry.isIntersecting;
   }
  });
 }

 

例)画像が画面に表示された時にロードする の作成

  document.addEventListener("DOMContentLoaded", function() {

    //Intersection obserer の作成
   let options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
   }
   imageobserver = new IntersectionObserver((entries) => {
    entries.forEach((entry) =>  {
     if (entry.isIntersecting) {
      let image = entry.target;
      image.src = image.dataset.src;
      imageobserver.unobserve(image);
     }
    });
   },options);

   //監視される要素をターゲットにする
   let images = [].slice.call(document.querySelectorAll('.lazyload'));
   images.forEach(function(image) {
    imageobserver.observe(image);
   });
  
  });

 
 

 

この記事を読む

【JavaScript】[].slice.call() による配列変換について

画像遅延読み込みについて調べていると、

  let images = [].slice.call(document.querySelectorAll('.lazyload'));

のような、「[].slice.call() 」という構文がでてきたので、調べてみた。
 
MDNの解説では、
========================
”slice メソッドを呼び出すことで、配列風オブジェクトやコレクションを新しい配列に変換することができます。
メソッドをオブジェクトに繋げるだけです。配列風オブジェクトの一例として、 arguments が挙げられます。以下に例を示します。”
========================
引用:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

  function list() {
     return Array.prototype.slice.call(arguments);
   }

   var list1 = list(1, 2, 3); // [1, 2, 3]

この「Array.prototype.slice」を短縮する書き方が「[ ].slice」です。
 
ここで、配列風オブジェクトとは何か?
まず、javascripでは、数値、文字列、真偽値、null、undefined 以外の全てはオブジェクトであり、配列もオブジェクトです。その中で配列は、一般的なオブジェクトより高機能なオブジェクトなだけです。また、このオブジェクトはプロパティを持つことができます。
配列風オブジェクトとは、配列のよう要素的なものを持ち、lengthも持っているが、配列のような slice や sort などの配列特有のメゾットを持たないオブジェクトです。また、forEach などの配列の各要素を順に処理していくメゾットも利用できません。
 
ここで、具体的な例をあげてみます。

  var object = {
      name: 'plusone',
      age: 22
    },        //配列風オブジェクト
    array = [1, 2, 3];     //配列

  console.log(object['name']);// output 'plusone'
  console.log(array[1]); // output 2

 
今回実際に、使用した querySelectorAll() の戻り値は、Nodelist になり、まさに上記で説明した「配列風オブジェクト」になります。
そのため、querySelectorAll() で取り出した要素に順に処理を与えようと forEach をそのまま使用してもエラーになります。
そこで、冒頭に出した「[].slice.call() 」で、「配列風オブジェクト」(Nodelist) を配列に変換してあげるわけです。

  let images = [].slice.call(document.querySelectorAll('.lazyload'));

 なお、ES2015では、「配列風オブジェクト」(Nodelist) を配列に変換するのには、以下の構文も使用できます。

  // Array.from()
  var args = Array.from(arguments);
  // スプレッド構文
  var args = [...arguments];

 
 

 

この記事を読む
記事一覧に戻る