CodeGym /Javaコース /Frontend SELF JA /Date. 日付と数値のフォーマット

Date. 日付と数値のフォーマット

Frontend SELF JA
レベル 37 , レッスン 1
使用可能

2.1 Dateオブジェクト

日付と数値の処理は、Webアプリ開発の重要な部分だよね。JavaScriptには、日付や数値を操作するための組み込みオブジェクトとメソッドが用意されてるんだ。この講義では、Dateオブジェクト、そのメソッド、そして日付と数値のフォーマット方法を見ていこう。

JavaScriptのDateオブジェクトは、日付と時間を表すんだよ。現在の日時を取得する、日時を設定する、そしてフォーマットする多くのメソッドを持っているんだ。

Dateオブジェクトの作成

重要!
パラメータなしでDate()オブジェクトを作成するとさ、それは現在の日付と時間を含むんだよ、その作成時点のね。

Dateオブジェクトはいくつかの方法で作成できるよ。

1. 現在の日時:

JavaScript
    
      const now = new Date();

      console.log(now); // 現在の日付と時間を出力
    
  

2. 特定の日付と時間の設定:

JavaScript
    
      const specificDate = new Date('2024-07-07T10:00:00');

      console.log(specificDate); // 2024年7月7日の日付を出力
    
  

3. 数値を使って日時を設定する:

JavaScript
    
      const anotherDate = new Date(2024, 6, 7, 10, 0, 0);

      console.log(anotherDate); // 2024年7月7日の日付を出力
    
  

2.2 Date()オブジェクトのメソッド

日付コンポーネントの取得:

  • getFullYear(): 年を取得 (4桁)
  • getMonth(): 月を取得 (0から11まで)
  • getDate(): 月の日を取得 (1から31まで)
  • getHours(): 時間を取得 (0から23まで)
  • getMinutes(): 分を取得 (0から59まで)
  • getSeconds(): 秒を取得 (0から59まで)

例:

JavaScript
    
      const now = new Date();

      console.log(now.getFullYear()); // 現在の年
      console.log(now.getMonth()); // 現在の月 (-1)
      console.log(now.getDate()); // 現在の日
      console.log(now.getHours()); // 現在の時間
      console.log(now.getMinutes()); // 現在の分
      console.log(now.getSeconds()); // 現在の秒
    
  

日付コンポーネントの設定:

  • setFullYear(year): 年を設定
  • setMonth(month): 月を設定
  • setDate(day): 月の日を設定
  • setHours(hours): 時間を設定
  • setMinutes(minutes): 分を設定
  • setSeconds(seconds): 秒を設定

例:

JavaScript
    
      const date = new Date();

      date.setFullYear(2025);
      date.setMonth(0); // 1月
      date.setDate(15);
      date.setHours(12);
      date.setMinutes(30);
      date.setSeconds(45);

      console.log(date.toString());
    
  

2.3 日付のフォーマット

JavaScriptは、日付を文字列にフォーマットするメソッドを提供してるよ。一番よく使われるのは、ロケールに依存して日付をフォーマットするtoLocaleDateString()メソッドだね。

toLocaleDateString()の使用例:

JavaScript
    
      const now = new Date();

      console.log(now.toLocaleDateString('en-US')); // "7/7/2024" (MM/DD/YYYY)
      console.log(now.toLocaleDateString('en-GB')); // "07/07/2024" (DD/MM/YYYY)
      console.log(now.toLocaleDateString('ru-RU')); // "07.07.2024" (DD.MM.YYYY)
    
  

メソッド toLocaleTimeString()

toLocaleTimeString()メソッドは、ローカライズされたフォーマットで時間を文字列として返すよ:

JavaScript
    
const now = new Date();

console.log(now.toLocaleTimeString('en-CA')); 
console.log(now.toLocaleTimeString('en-GB')); 
    
  

メソッド toLocaleString()

toLocaleString()メソッドは、ローカライズされたフォーマットで日付と時間を文字列として返すよ:

JavaScript
    
      const now = new Date();

      console.log(now.toLocaleString('en-CA')); 
      console.log(now.toLocaleString('en-GB')); 
    
  

メソッド toISOString()

toISOString()メソッドは、ISO 8601フォーマットで日付と時間を返すよ:

JavaScript
    
      const now = new Date();

      console.log(now.toISOString()); // "2023-07-05T10:00:00.000Z"
    
  

2.4 数字のフォーマット

メソッド toLocaleString()

toLocaleString()メソッドは、ローカル設定に応じて数字をフォーマットできるよ:

JavaScript
    
      const number = 1234567.89;

      console.log(number.toLocaleString()); // "1,234,567.89" アメリカのフォーマット、または "1 234 567,89" ローカルフォーマット
      console.log(number.toLocaleString('de-DE')); // "1.234.567,89" ドイツのフォーマット
    
  

Intl.NumberFormatを使った数字のフォーマット

Intl.NumberFormatコンストラクタは、さらに柔軟な数字フォーマットを提供するよ:

JavaScript
    
      const number = 1234567.89;

      const usFormatter = new Intl.NumberFormat('en-US');
      console.log(usFormatter.format(number)); // "1,234,567.89"

      const deFormatter = new Intl.NumberFormat('de-DE');
      console.log(deFormatter.format(number)); // "1.234.567,89"

      const customFormatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
      });

      console.log(customFormatter.format(number)); // "$1,234,567.89"
    
  
コメント
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION