Zenn
Closed12

JSで学んだことをメモる

JavaScript
ぐらにゅぐらにゅ

12/2 Array操作関係の高階関数 vs for-of の考察

  • 配列に対して何かしらの操作をするのであれば、for-ofよりfilterやmapを使った方がいい（for-ofの場合は可読性の観点や取り回しのめんどくささから使わない方がベター）
  • 条件に合致したらループを抜けたいのであればfor-of（逆にforEachなどはbreakできないので使わない方がよい）
  • 配列のすべての要素にアクセスするかつ途中で抜けないのであれば、可読性の観点からforEachを利用してもいい。ただし、計算速度はfor-of > forEachなので自分はfor-ofを推奨する。
  • 関数としてループを反復利用したい場合はfor-ofよりforEachがよい
ぐらにゅぐらにゅ

12/3 JSON.parseを利用したJSONかどうかの判定

JSON.parse はJSON→文字列に変換する関数。
JSON.parseに有効ではない文字列を投入すると、SyntaxErrorが返ってくる。
これを利用することで、文字列がJSONかどうかを判定することができる。

test.js
    function isJSON(str){
      try {
        JSON.parse(str);
      } catch(e) {
        return false
      }
      return true;
    }
ぐらにゅぐらにゅ

12/4 分割代入構文

解説ページ：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

  • 簡単な例
example.js
const testData = {
    "header": ["header"],
    "data": {
        data1: 1,
        data2: 2
     }
}

const {header, data} = testData
const  {data: outputData} = testData
const {data:{data2}} = testData

console.log(header) // "header"
console.log(data) // {data1: 1, data2: 2}
console.log(outputData) // {data1: 1, data2: 2}
console.log(data2) // 2
  • 所感
    REST API叩いたときに出力される要素数が多かったり、取り回しが面倒そうなデータ構造だった時なんかに使うととても便利。あとの使い方はまだ勉強中なので、もっといい感じに使いたい。
ぐらにゅぐらにゅ

12/7 Dateで曜日を取得する

.getDay() を使うと曜日に対応した数字（日曜始まりの0～6）が返ってくる。

  • example （今日が月曜日の場合）
test.js
const date = new Date () ;
console.log(date.getDay) // 1

これを利用すると数日後は何曜日か？や、今週の〇曜日は何日か？などの取り回しが出来る。便利。

ぐらにゅぐらにゅ

12/8 sort関数メモ

Array.sort() を使うことで配列をソートすることができる。

  • example1
example1.js
const stringArray = [ "computer", "mendako", "debug","build", "apple", ]
stringArray .sort()
console.log(stringArray ) // ["apple", "build", "computer", "debug", "mendako"]

const numArray = [3, 1, 5, 10, 4]
numArray.sort()
console.log(numArray) // [1, 10, 3, 4, 5]

example1のように Array.map()はデフォルトでは文字列として比較・ソートされるため、数字の大小でソートする場合は次のように書く。

  • example2
example2.js
const numArray = [3, 1, 5, 10, 4]
const ascArray = numArray.sort((a, b) => a - b);
console.log(ascArray ) // [1, 3, 4, 5, 10]

const descArray = numArray.sort((a, b) => b - a);
console.log(descArray) //  [10, 5, 4, 3, 1]
ぐらにゅぐらにゅ

12/9 カラーコードのランダム生成

JavaScriptでカラーコードをランダム生成したくなったことがあったのでその時のメモ。

example.js
// rgb()形式
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
const color = `rgb(${r},${g},${b})`;

// 16進数形式
const r = ('0' + Math.floor(Math.random() * 256).toString(16)).slice(-2);
const g = ('0' + Math.floor(Math.random() * 256).toString(16)).slice(-2);
const b = ('0' + Math.floor(Math.random() * 256).toString(16)).slice(-2);
const color = '#' + r + g + b;

参考：https://qiita.com/frost_star/items/9b39be94101b1fe58592

ぐらにゅぐらにゅ

12/10 サクッとYYYY-MM-DDでdate取得する

ISO8601に準拠した形式は、以下のように取得可能である。

example1.js
const event = new Date('10 December 2020 14:00 UTC');
console.log(event.toISOString()); // "2020-12-10T14:00:00.000Z"

これをsplitを利用して分割するとYYYY-MM-DDが簡単に取得できる。

example2.js
const event = new Date('10 December 2020 14:00 UTC');
const output = event.toISOString().split('T')[0] // "2020-12-10"

参考サイト：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

ぐらにゅぐらにゅ

12/11 非同期処理メモ1

.thenを使うとシーケンシャルにできる。

example.js
// 非同期処理: 3倍にする
const treble = function(number) {
  return new Promise(function(resolve) {
    resolve(number * 3);
  });
};

// 同期処理: ログに表示する
const dump = function(number) {
  console.log(number);
  return number;
};

treble(10) // 10 * 3 -> 30
  .then(treble) // 30 * 3 -> 90
  .then(dump)
  .then(treble) // 90 * 3 -> 270
  .then(dump);

参考&引用元：https://qiita.com/kiyodori/items/da434d169755cbb20447

ぐらにゅぐらにゅ

12/14 アロー関数メモ１

function()の代替として、ES2015から利用できるようになった。

example.js
const bookList  = [
    {title: 'JavaScriptふりがなプログラミング', price: '1643円'},
    {title: '初めてのJavaScript', price: '3520円'},
    {title: 'JavaScript本格入門', price: '3278円'}
]

const bookTitleList = bookList.map(function(book){ return book.title })
console.log(bookTitle) //  ["JavaScriptふりがなプログラミング", "初めてのJavaScript", "JavaScript本格入門"]

const bookTitleList = bookList.map(book => book.title)
console.log(bookTitle) //  ["JavaScriptふりがなプログラミング", "初めてのJavaScript", "JavaScript本格入門"]

アロー関数を使うことでコードが短くシンプルに書けるようになった。
ただし、thisやargumentsなどの振る舞いが変わってくるので注意が必要。
参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ぐらにゅぐらにゅ

12/15 例外処理とその考え方メモ

（多分そのうち気づいたら増える）

ぐらにゅぐらにゅ

12/16 try-catchの書き方メモ

聞かれて一応勉強しなおしたのでメモする。

  • 基本的な書き方
example1.js
try{
    // 実行したいコードを書く
} catch(error) {
    // tryで例外が発生したらその情報がerrorに格納される
    // errorはcatchブロックにて利用可能
    console.log(error)
}

また以下のように例外毎に条件付けを行うこともできる。

example2.js
try {
  myroutine(); // 3 つの例外を投げる可能性があります
} catch (e) {
  if (e instanceof TypeError) {
    // TypeError 例外を処理するための文
  } else if (e instanceof RangeError) {
    // RangeError 例外を処理するための文
  } else if (e instanceof EvalError) {
    // EvalError 例外を処理するための文
  } else {
    // 任意の指定されていない例外を操作するための文
    logMyErrors(e); // エラーハンドラーに例外オブジェクトを渡す
  }
}
  • finallyブロック
    finallyブロックはcatchの有無にかかわらず実行可能です。
example3.js
openMyFile();
try {
  // リソースを結び付けます
  writeMyFile(theData);
} catch(error){
  // 例外処理
  console.log(error)
} finally {
  closeMyFile(); // リソースを常に閉じます
}

参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/try...catch

ぐらにゅぐらにゅ

12/18 ECMAScriptとBabel

ECMAScriptとは

ECMAScriptとはJavaScriptの標準仕様。技術委員はブラウザベンダーやECMAScriptに関心のある企業などによって構成されており、仕様を検討・議論している。
ECMAScriptを見る必要がある場合は以下のケース。

  • 仕様に基づいてJSは動いているため、仕様を読むことによりJSを正しく理解できる
  • 現在の動向を把握する
  • JSという言語を使用からきっちり学ぶ

参考：https://jsprimer.net/basic/ecmascript/

最新の機能を使いたい場合

このスクラップは2021/10/10にクローズされました