Vue.js を使った時間変換ツール

はじめに

このプロジェクトでは、Vue.js を使って時刻変換ツールを作成する方法を学びます。このツールを使えば、日付とタイムスタンプの間で変換できます。これは多くのビジネスアプリケーションで共通の要件です。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• Vue.js プロジェクトをセットアップし、提供されたコード構造を理解する方法
• 日付とタイムスタンプの間で変換する機能を実装する方法
• 変換結果が望ましい形式で正しく表示されるようにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• Vue.js を使って簡単な Web アプリケーションを構築する
• Web アプリケーションで日付と時刻のデータを扱う
• 日付やタイムスタンプなど、異なる時刻表現の間で変換する
• 変換機能の正しさをテストして検証する

Skills Graph

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── element-ui.css
├── element-ui.js
├── index.html
└── vue.js

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

リアルタイム検索機能を実装する

このステップでは、日付とタイムスタンプの間で変換する機能を実装します。

1. Vue.js インスタンス内のhandleTransform()メソッドを探します。

2. handleTransform()メソッドの中で、日付とタイムスタンプの間で変換するロジックを追加する必要があります。

3. formInline.dateが空でなく、formInline.timeStampが空の場合、日付値を 13 桁のタイムスタンプに変換し、それに応じてformInline.timeStampを更新する必要があります。

   let date = this.formInline.date;
   let timeStamp = this.formInline.timeStamp;
   if (date && !timeStamp) {
     let newValue = new Date(date);
     this.formInline.timeStamp = newValue.getTime();
   }

4. formInline.dateが空で、formInline.timeStampが空でない場合、タイムスタンプ値をYYYY-MM-DD hh:mm:ss形式の日付文字列に変換し、それに応じてformInline.dateを更新する必要があります。

   if (!date && timeStamp) {
     timeStamp = new Number(timeStamp);
     let d = new Date(timeStamp);
     var Y = d.getFullYear() + "-";
     var M =
       (d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1) +
       "-";
     var D = d.getDate() < 10 ? "0" + d.getDate() + " " : d.getDate() + " ";
     var H = d.getHours() + ":";
     var M2 =
       (d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes()) + ":";
     var S = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
     this.formInline.date = Y + M + D + H + M2 + S;
   }

5. 完全なコードは以下の通りです。

   handleTransform() {
      // TODO
      let date = this.formInline.date;
      let timeStamp = this.formInline.timeStamp;
      if (date &&!timeStamp) {
        let newValue = new Date(date);
        this.formInline.timeStamp = newValue.getTime();
      }
      if (!date && timeStamp) {
        timeStamp = new Number(timeStamp);
        let d = new Date(timeStamp);
        var Y = d.getFullYear() + "-";
        var M =
          (d.getMonth() + 1 < 10
           ? "0" + (d.getMonth() + 1)
            : d.getMonth() + 1) + "-";
        var D =
          d.getDate() < 10? "0" + d.getDate() + " " : d.getDate() + " ";
        var H = d.getHours() + ":";
        var M2 =
          (d.getMinutes() < 10? "0" + d.getMinutes() : d.getMinutes()) +
          ":";
        var S =
          d.getSeconds() < 10? "0" + d.getSeconds() : d.getSeconds();
        this.formInline.date = Y + M + D + H + M2 + S;
      }
   }

6. index.htmlファイルを保存し、Web ページを更新します。日付と時刻を入力または選択し、その後「変換」ボタンをクリックすることで変換機能をテストします。

変換結果を検証する

このステップでは、日付とタイムスタンプの間の変換が期待通りに機能していることを検証します。

1. Web ページを開き、変換結果を確認します。
2. 日付と時刻ピッカーに日付と時刻を入力または選択すると、タイムスタンプ入力ボックスに対応する 13 桁のタイムスタンプが表示されるはずです。
3. タイムスタンプ入力ボックスに 13 桁のタイムスタンプを入力すると、日付と時刻ピッカーに正しい日付と時刻が表示されるはずです。
4. 日付形式がYYYY-MM-DD hh:mm:ssと表示され、タイムスタンプが 13 桁であることを確認します。
5. 両方向の変換をテストして、正しく機能していることを確認します。

おめでとうございます！Vue.js を使って日付 - タイムスタンプ変換ツールを正常に実装しました。もしさらに質問があるか、追加の支援が必要な場合は、遠慮なくお尋ねください。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。