【Rails + React】配列データの作成日を日本語表記にする

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

背景

配列データの作成日を日本語で表示する方法を調べました。

フレームワークはRails、ビューにはReactを使用しています。

内容

コントローラから"tasks"という配列データを受け渡されている前提で話を進めます。

配列データに反復処理をさせる

map関数を利用します。

Tasks Component

import React from "react";
import Task from "./Task";

class Tasks extends React.Component{
render(){
return(
<ul>
{this.props.tasks.map( task => {
return (
<Task task={task} key={task.id} />)}
</ul>
)
};
};

export default Tasks

作成日を日本語表記に作り直す

Task Component

import React from "react";

class Task extends React.Component {
render(){
let created_at = this.props.task.created_at;

let year = created_at.slice(0,4);
let month = created_at.slice(5,7);
let day = created_at.slice(8,10);
let hour = created_at.slice(11,13);
let min = created_at.slice(14,16);

let japanese_date = year + '年' + month + '月' + day + '日'+ hour + ':'+ min ;
return(
<li>{ japanese_date }</li>
)
 };
};

export default Task

今後に向けて

Rubyだとstrftimeメソッドがありますが、JavaScriptだとないんですかね？

最近Reactが楽しいです。