[JavaScript] 連想配列に forEach を使用する

小ネタです。 forEachは配列用のため、連想配列(ハッシュ)には通常使うことができません。そんなときにはObject.keys()を介すことで利用が可能になります。

const hash = {
  apple: 100,
  banana: 130,
  orange: 98
}
const result = [ ]

Object.keys(hash)
      .forEach(key => { result.push(`${key}: ${hash[key]}` )})

// [ 'apple: 100', 'banana: 130', 'orange: 98' ]
console.log(result)

参考ページ

[JavaScript] 配列の値が条件を満たすか検証する - some(), every()

every()some()は配列内の要素をテストし、条件を満たしていれば最終的にtrue、満たしていなければfalseを返します。

/**
 * 偶数チェック
 */
const list = [1, 2, 3, 4, 5]
const check = value => ((value % 2) === 0)

// テストを行う
const check1 = list.every(check)  // すべて偶数か (AND)
const check2 = list.some(check)   // 一つでも偶数か (OR)

// 結果表示
console.log(check1)  // false
console.log(check2)  // true

every()はすべての要素が条件を満たしているかどうか、some()は一つでも満たしているかの違いになります。要はeveryがANDで、someがORですね。

続きを読む

[JavaScript] 配列の全要素に処理を行い新しい配列を作成する - map()

map()を利用すると、元になった配列の要素を順番に処理していき新しい配列を生み出すことができます。mapは元になった配列を変更しません。

/**
 * 2乗する
 */
const list = [1, 2, 3, 4, 5]
const newlist = list.map( value => value * value)

// [1, 4, 9, 16, 25]
console.log(newlist)

mapはよくforEachと比較されますが、forEachは戻り値を返さない特徴があります。戻り値を利用しない場合はforEachを使った方が一般的に高速に処理が行なえます。

続きを読む

[JavaScript] 配列からひとつの値を生成する - reduce()

reduce()は配列内の値を順番に処理していき、最終的に1つの値を生成することができます。

/**
 * 配列の値をすべて足す
 */
const list = [1, 2, 3, 4, 5]
const sum = list.reduce( (prev, current) => prev + current )

// 15
console.log(sum)

returnした値が、次に処理する際のprevに入っています。returnする値は文字列や数値以外には配列やハッシュでもかまいません。初見だとちょっと理解しにくいかもしれませんねw

続きを読む

[JavaScript] 配列から特定の要素だけを取り出す - filter()

filter()は配列の要素を順番にテストしていきtrueが返された要素だけの新しい配列を返却します。

/**
 * 配列から偶数だけを取り出す
 */
const list = [1, 2, 3, 4, 5]
const newlist = list.filter( value => ((value % 2) === 0) )

// [2, 4]
console.log(newlist)

  • 元になった配列(list)は変更されません。
  • すべてfalseになった場合は空の配列が返ります。

    続きを読む

[HTML5] アドレスバーのURLを変更する - history.pushState()

SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外部からリンクを貼る際に非常に不便。

そこでHTML5から登場したWebブラウザの「履歴」を操作するHistoryAPIを利用することで、SPAにも関わらず情報が書き換わったタイミングでブラウザのアドレスバーに表示されているURLを書き換え、別のページに遷移したかのように見せることができます。

// example.com/foo から example.com/bar に変更
history.pushState({}, '', '/bar')

厳密にはpushState()を実行すると履歴が新しく追加されます。現在表示されているページの情報にURLを発行(定義)するイメージですね。

続きを読む

[HTML5] JavaScriptでtitleタグを変更する

小ネタです。 titleタグの内容を指定した文字列に変更する場合は2つの方法があります。

まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。

document.title = 'foo'

次にtitle以外の要素を変更するときと同様にquerySelector()で返却されたHTMLElementを操作する方法もあります。

document.querySelector('title').textContent = 'foo'
続きを読む

[HTML5] 要素をフェードアウト/フェードインする

指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。


www.youtube.com

ここでは大きく2種類の方法を取り上げます。 HTML5から登場したWeb Animation APIを利用したものと、はるか以前から利用されてきたsetInterval利用する物です。IE11を対象としないのであれば前者の方が滑らかに動いてくれるのでおすすめです。

続きを読む