未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる

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

つるぴよ
つるぴよ
もりけん塾に入塾しました!

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

 

あわせて読みたい
【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す!⑥ JavaScriptを勉強してフロントエンジニアを目指しています! 今回は学習ロードマップの1番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。...

 

つるぴよ
つるぴよ
ここからやっと第2部です!

 

目次

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

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

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

ねこまる
ねこまる
どんな時に使うの??
例えば日付や時間で処理を分岐させたい時に使うよ!
つるぴよ
つるぴよ

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

日付オブジェクトの作成

 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」メソッドを使って「時」「分」を取り出しています。

\メソッドまとめ/
「getHours」‥「時間」を取得するメソッド
「getMinutes」‥「分」を取得するメソッド
「getFullyear」‥「年」を取得するメソッド
「getMonth」‥「月」を取得するメソッド
「get〜」の意味→「日付オブジェクト」から値を取り出す時に基本的に使うメソッド。
「getMonth」の注意点!
「月」は普通「1月」から始まります。
それに対してプログラムの正解では数字が「0」から始まります。
そのままだと「0月」から始まって「11月」で終わってしまいます。
そのため、取得した「月」の数字に「1」を足す必要があります。
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」という2つの時間について説明するね!

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

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

 

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

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) ミリ秒を選定
特殊
意味
.getTimezoneOffset() UTCへの差分(分単位)を取得。日本は-540(-9時間)
文字列取得
意味
.toString() 現地時刻を文字列で取得
.toLocaleString() 現地時刻を文字列で取得
.toVarDate() 現地時刻を文字列で取得
.toGMTString() UTCを文字列で取得
.toUTCString() UTCを文字列で取得

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

つるぴよ
つるぴよ
配列を並べ替えることを「ソート」と言うよ!

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

\「sort」メソッドの並べ替えの順番の決め方/
「sort」メソッドは引数を取り、特殊なルールで配列を並べ替えることもできます。
引数として関数(functionオブジェクト)を取ります。
関数内で引数として与えられた2つの要素「小さいか大きいか」を戻り値として戻す。
「無名関数」とは??
以前「型、クラス、オブジェクト」の章で出てきた「名前を持たない」関数です。
「sort」メソッドなどの「関数を引数に取る関数」では「無名関数」を使い捨て用途で使われたり、変数に処理を格納する目的でも利用されます。

配列のソート

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

var arr = ["dog", "cat", 900, 1000]; //配列作成
arr.sort(); //辞書順にソート
document.write(arr); //配列を表示
結果
1000,900,cat,dog
「reverse」メソッドで配列を逆の順番に並べ替えてみましょう。
arr.reverse();
document.write(arr);
結果
dog,cat,900,1000

引数をとるソート

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

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

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

\「sort」メソッドが関数を呼ぶ手順/

①「sort」メソッドは並べ替えのために比較したい要素を2つ選ぶ
②選んだ2つの要素を引数にして関数を呼び出す
1) 呼ばれた関数は第1引数に1つ目の要素を、第2引数に2つ目の要素を受け取って処理を開始する。
2 ) 2つの要素を比較して、どちらが前か後ろかを戻り値として戻す)
③「sort」メソッドは呼んだ関数の戻り値を元に、選んだ2つの要素を並べ替える。
④次に比較したい要素があるか確認する。
1)ある場合は①に戻る
2)ない場合は処理が終了する
先ほど書いたプログラムでいくと、引数「a,b」として2つの要素を受け取ります。関数ではこの「a,b」を比較します。
「aはbの前か」「aはbの後ろか」を決めて戻り値を戻し、これに従って「sort」メソッドは配列を並べ替えていきます。「ソート」は文字列やオブジェクトにも使えます。

ここでは数値を比較した場合について「値が数値の場合の意味」を参考につけて、関数の戻り値の対応表をまとめておきます。

戻り値 並べ替え 値が数値の場合の意味
0より小さい値 「a」を「b」より前に移動 「a」が小さいと判断
0 並べ替えなし 「a」と「b」は同じ
0より大きい値 「a」を「b」の後ろに移動 「a」の方が大きいと判断

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

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

 

無名関数

「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」と表示
結果
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);
結果
10000,15000,20000,30000
1000,80000,99000,100000

もう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>"
      );
    }
結果
0:食費,200000
1:光熱費,25000
2:交際費,10000
3:ガソリン代,3000

少し解説すると、「a[1]」「b[1]」配列として引数を利用しています。
この際、「a」「b」は、「bugetArray」(この場合は配列)の要素を表します。
また、添え字の「1」は、配列の2番目の値(予算にあたる数字)を示します。

マンガJavaScript13話〜14話まとめ

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

 

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

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

フォローはこちら

目次