【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑦

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

 

 

JavaScriptの学習方法

1. マンガJavaScript読む
2. 改訂新版JavaScript本格入門読む
3. Webページで使われているような部品をJSで作る(タブ、フォーム、ドロワーメニュー、スライドショー、オリジナルゲームを作る、検索ボックス、ページネーション)
4. APIリクエストで得たデータでコンテンツを作る

— フロントエンドエンジニア (@terrace_tech) June 30, 2020

 

マンガJavaScript第１３話　日付オブジェクト

＼日付オブジェクトとは？／
年月日や時間などを表現するためのオブジェクト。

日付オブジェクトには様々なメソッドが用意されています。
例えば時間を取得したり、設定したりするものです。

プログラムでは日付や時間で処理を分岐させることがよくあります。
「ある時間」から「どれくらいの時間がたったのか」を知りたいことも多いです。

日付オブジェクトの作成

 var d = new Date();

「日付オブジェクト」は「new Date( )」と初期化すると現在時刻で新しいオブジェクトを呼び出します。

var d = new Date(1999, 11, 31);

また上記のように「年月日時分秒」と引数を渡せばその日時の「日付オブジェクト」を作成します。

日付オブジェクトから日時の取得

alert(d.getHours() + "時" + d.getMinutes() + "分");

「new Date ()」で作成した「d」変数の、「d.getHours」と「d.getMinutes」メソッドを使って「時」「分」を取り出しています。

var month = d.getMonth() + 1;

 

ある時間からの経過時間を知る

例えばユーザーのWebページの滞在時間や、元旦からの経過日数を知りたいという場合があります。
そんな時に使うメソッドが以下のものです。

「getTime」‥『1970年1月1日0時0分0秒からのミリ秒』を取得することができる。

経過時間を知るためには‥①「元となる時間」と②「現在時間」、それぞれの「日付オブジェクト」を作成する必要がある。

①、②の「日付オブジェクト」の「getTime」メソッドの戻り値の差を調べることで経過時間を知ることができる。

「2001年1月1日」からの、経過秒と経過日数を計算して表示するプログラミを書いてみましょう！

var dNow = new Date();   //現在の日付オブジェクト
var dOld = new Date(2001,1,1);  //2001年1月1日の日付オブジェクト
var elapseMilliSeconds = dNow.getTime() - dOld.getTime(); //経過時間（ミリ秒の差)
var elapseSeconds = elapseMiliSeconds/ 1000; //ミリ秒を1000で割って秒に
var elapseDay = elapseSeconds /60 /60 /24;  //秒を60秒、60分、24時間で割って日数に
alert("経過秒は" + elapseSeconds); //経過秒を表示
alert("経過日数は" + elapseDay); //経過日数を表示

現在の経過ミリ秒を得たい場合‥「new Date().getTime()」以外にも「+new Date()」でも取得できます。

次に経過時間を簡単に計算するプログラムを書いてみます。

var start = +new Date(); //開始（現在の日付オブジェクト)
var str = "";
for(var i = 0; i < 1000000; i ++) {
    str += i;
}
var end = +new Date(); //終了（現在の日付オブジェクト）
var elapseMilliSeconds = end - start; //経過時間（ミリ秒の差）
alert("経過ミリ秒は" + elapseMilliSeconds); //経過秒をダイアログを表示

日付オブジェクトを使ったメソッド

下記の説明中の「d」は、現在時刻で初期化を行った「日付オブジェクト」を指します。

//例) 2010年12月31日1時2分3秒4ミリ秒の場合
var d = new Date();

式	意味	使い方	説明
.getFullYear()	西暦を取得	a = d.getFullYear();	変数「a」に「2010」が入る
.getMonth()	月を取得	a = d.getMonth();	変数「a」に「11」が入る
.getDate()	日を取得	a = d.getDate();	変数「a」に「31」が入る
.getDay()	曜日(0〜6:日曜日開始)を取得	a = d.getDay();	変数「a」に「5」(金)が入る
.getHours()	時を取得	a = d.getHours();	変数「a」に「1」が入る
.getMinutes()	分を取得	a = d.getMinutes();	変数「a」に「2」が入る
.getSeconds()	秒を取得	a = d.getSeconds();	変数「a」に「3」が入る
.getMilliseconds()	ミリ秒を取得	a = d.getMilliseconds();	変数「a」に「4」が入る

日付の設定

式	意味
.setFullYear(n)	西暦を設定
.setMonth(n)	月を設定
.setDate(n)	日を設定
.setDay(n)	曜日を設定
.setHours(n)	時を設定
.setMinutes(n)	分を設定
.setSeconds(n)	秒を設定
.setMilliseconds(n)	ミリ秒を設定

特殊

1970年0時0分0秒からのミリ秒を取得、設定します。
この時間は「UTC」と呼ばれる時間です。

式	意味
.getTime()	ミリ秒を取得
.setTime(n)	ミリ秒を設定

「UTC」→「協定世界時」と呼ばれるもの。この時間は、国際協定により人工的に維持されている世界共通の標準時である。
日本の時間はこの「UTC」より９時間進んでいます。

「GMT」→「グリニッジ標準時」と呼ばれるもの。この時間は、ロンドンにあるグリニッジ天文台での平均太陽時である。
かつて世界の基準時刻として使われていた。

 

日付オブジェクトのメソッドその２

UTCの取得

式	意味
.getUTCFullYear()	西暦を取得
.getUTCMonth()	月を取得
.getUTCDate()	日を取得
.getUTCDay()	曜を取得
.getUTCHours()	時を取得
.getUTCMinutes()	分を取得
.getUTCSeconds()	秒を取得
.getUTCMilliseconds()	ミリ秒を取得

UTCの選定

式	意味
.getUTCFullYear(n)	西暦を選定
.getUTCMonth(n)	月を選定
.getUTCDate(n)	日を選定
.getUTCDay(n)	曜を選定
.getUTCHours(n)	時を選定
.getUTCMinutes(n)	分を選定
.getUTCSeconds(n)	秒を選定
.getUTCMilliseconds(n)	ミリ秒を選定

第１４話　配列のソートと無名関数

「sort」メソッド→対象の要素を「辞書順」に並べ替える
「reverse」メソッド→配列を逆順に並べ替える

配列のソート

実際にコードを書いてみましょう。

var arr = ["dog", "cat", 900, 1000]; //配列作成
arr.sort(); //辞書順にソート
document.write(arr); //配列を表示

arr.reverse();
document.write(arr);

引数をとるソート

「sort」メソッドは引数として関数をとることができます。

var budget = [30000,10000,20000,15000]; //配列作成
budget.sort(function (a,b) {/*要素の比較*/})  //関数を引数に設定

「sort」メソッドが配列を並べ替える時に、引数に指定した関数「function (a,b) {〜}」が呼び出されます。

戻り値として「０より大きいか小さいか」を戻せば良いので、数値の場合は単純に引き算をすればソートできます。

var budget = [30000,10000,20000,15000]; //配列作成
budget.sort(function (a,b) {return a - b});
document.write(budget);

 

無名関数

「sort」の引数として「function (a,b){〜}」という関数を指定しました。
この関数には「function」の後に関数名がないので「無名関数」といいます。

 

使い捨ての関数としての「無名関数」

「無名関数」のメリットは使い捨ての関数を簡単に作れるところです。
この使い捨ての関数はメソッドの引数としてよく利用されます。

こちらは「無名関数」を利用したプログラムです。

// 「sort」の引数として、使い捨ての関数を作成して利用する
var no = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];    // 配列作成
no.sort(function (a, b) {
    // 偶数を前に、奇数を後ろにソートする
    if (a % 2 == 0 && b % 2 != 0) return -1;
    if (a % 2 != 0 && b % 2 == 0) return 1;
    return 0;
});
alert(no);    // 「2, 4, 6, 8, 10, 1, 3, 5, 7, 9」と表示

変数に格納する「無名関数」

「無名関数」のもう1つの使い方として「変数に格納する」というものがあります。

ソート用の関数の使い回し例をコードに書いてみました。

var fnc = function(a,b) {return a - b};

var budget = [30000,10000,20000,15000];
budget.sort(fnc);
document.write((budget) + "<br>");

var budget2 = [80000,1000,99000,100000];
budget2.sort(fnc);
document.write(budget2);

もう1つの例として「型、オブジェクト、クラス」の章で出てきたプログラムを書いてみます。

//生徒クラスを作成
var Student = function(name,score) {
  this.name = name || "???";
  this.score = score || 0;
  this.show = function() {
  window.alert("名前:" + this.name + "/点数:" + this.score);
  };
 };

また「無名関数」はクラスだけではなく、変数や関数を共通のオブジェクトの配下にまとめたい時にも利用できます。

var myFunctions = new Object(); //オブジェクトを作成

myFunctions.alertTitle = function () {alert(document.tilte)};
//「alertTitle」というプロパティに、関数を代入

myFunctions.alertTitle();
//「alertTitle」メソッドを実行して、Webページのタイトルを表示する

変数「myFunctions.alertTitle」に、「無名関数」を代入しています。

家計の予算を例にコードを書いてみました

1ヶ月の家計の予算順に並べるプログラムを書いてみました！

var bugetArray =[
      ["食費",200000]
    ,["光熱費",25000]
    ,["交際費",10000]
    ,["ガソリン代", 3000]
    ];

    //ソート
    //引数「a]や「b」には「["食費",20000]」のような配列が設定される
    //予算の数値は、配列の2番目の要素なので「a[1]」「b[1]」で参照できる
    bugetArray.sort(function(a,b){return a[1] - a[1]});

    //一覧表示
    for(var i = 0; i < bugetArray.length; i ++){
      document.write(
        i + ":"
        + bugetArray[i][0]
        + ","
        + bugetArray[i][1] + "<br>"
      );
    }

マンガJavaScript１３話〜１４話まとめ

ここまでの内容をまとめておきます！
・日付オブジェクト
　・作成方法
　・どのように利用するか　
　・日付メソッドまとめ
・配列のソート
・無名関数

 

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら