時刻(文字列)を分割して、フロント側で計算処理を行う。[vue.js]

どうも松井です。週4日をフリーランスとして働き、1日をwebサービス開発の時間に当てています。

早速、本題に入っていきます。

前提条件の確認

今回の前提条件は以下です。

・googleスプレドシートをDatabaseとして利用している

・vue.jsを使った実装を行っている

・時刻の文字列をフロント側で分割したい

・スプレッドシートからの取得は全て文字列になる

・スプレッドシートのAPI化できている

API化できてない場合は、前回書いたこちらの記事で実装できます。

僕の場合は、1.時刻を表示させる->2.表示させた時刻を編集する->時刻の差分を計算して、クライアント側で表示させるを実行するために行いました。

なぜこのやり方なのか

前提条件でも書いたように、スプレッドシートからの取得は、全て文字列になってしまうため時刻の場合は、時間と分を分割して計算する処理が必要でした。

数字に変換でいけいるでしょ？みたいな感じで当初Number()で変換を試みたのですが、NaNを返してしまったので今回の処理を実行しています。

分割にはsplitを使う

文字や配列の分割方法はいくつかあると思いますがsplitを使いました。splitは、文字を任意の場所で分割することができます。

splitの基本的な構文は、

var str = '文字列';

str.split(区切り文字・正規表現, 分割数);

です。詳しくはこちらを参照ください。

実際に時と分を分割した処理はこちら、

var date = '取得したい文字列';
str.split(':');

区切り文字を「:」とすることで、時間と分に分割できました。

Databaseの配列に追加するには

例えばAとBはDatabaseにあり、その合計だけはフロント側で実装させたい。それを同一の配列に含んでおきたい場合の処理です。なんともイレギュラー。。

前回の記事でご紹介した箇所に、追加でコードを書いて、その上で分割の処理を実装しています。

axios内に書かないと、まず配列として取得できないようなので書いていきます。

自分が実際に書いたコードは以下。

    mounted(){
           axios.get('apiのurl').then(response => {
               response.data.forEach(item =>{
                   item.workTimeHour = (() => {
                       const startTimeArray = item.startTime;
                       const stopTimeArray = item.stopTime;
                       const BreakTimeArray = item.breakTime;
                       const [resultStartHour, resultStartMinute] = startTimeArray.split(':');
                       const [resultBreakHour, resultBreakMinute] = BreakTimeArray.split(':');
                       const [resultStoptHour, resultStopMinute] = stopTimeArray.split(':');
               
                       return (resultStoptHour - resultStartHour - resultBreakHour + (resultStopMinute - resultStartMinute - resultBreakMinute) / 60.0);
                   })();

               this.list.push(item)
           })
       })
 
   },

workTimeHourは1日の稼働時間です。開始時間と終了時間、休憩時間の文字列を分割、その差分を稼働時間として計算しています。

書き方があまりよくないかもですが、今回は動くことが最優先っだったので直接処理を書いてます。

ひとこと

スプレッドシートをDatabaseにフロントで表示しようとしたら文字列として出力されました。文字列だと後々面倒そうなので、文字列を分割し、さらに時間の単位を(時)に変換しました。そのメモとして書きました。

誰かのお役に立てれば嬉しいです。