- 日付や時間を表示させたい
と言う方向けの記事になっています。
本記事を読むことで、このように時間を表示させることができます。
1. 概要
アプリに現在の日付、時間を表示する方法を紹介します。
現在の日付、時間を表示するには、new Date()メソッド を使うことで実装することができます。
2. new Date()
new Date()とは、
指定した時刻を表す日付オブジェクトを生成するメソッドです。
引数に日時、時間などを指定することができ、
何も指定されなかった場合は
現在のデバイスに設定されている時刻を取得します。
3. toLocaleString()メソッド
toLocaleString()メソッドは、
Dateオブジェクトを文字列に変換する
メソッドです。
new Date()と組み合わせて、
new Date().toLocaleString() と書くことができます。
このようにして書くことで、現在時刻を取得し、文字列として表示することができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
import React from 'react'; import { View, Text, StyleSheet} from 'react-native'; export default class App extends React.Component { constructor(props) { super(props); this.state = { current: new Date().toLocaleString() }; } render() { return ( <View style={styles.container}> <Text style={styles.text}>現在時刻</Text> <Text style={styles.text}>{this.state.current}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 24, margin: 10, }, }); |
しかし、このままでは、
時間は更新されずにその時に取得した時間をそのまま文字列として表示します。
現在時刻をリアルタイムで表示し続けたいと言う方は、setInterval()メソッドを使うことで、時間を更新することができます。
4. setInterval()メソッド
setInterval()メソッドは、
一定時間ごとに特定の処理を繰り返すタイマー処理です。
setInterval(関数function, 時間[ms])
と書くことで、指定した時間間隔で処理を繰り返すことができます。
下記のように書くと、1000msの間隔で日時を取得し、this.state.currentに時間情報を設定することができます。
|
1 2 3 4 5 6 7 |
componentDidMount() { setInterval( () => { this.setState({ current: new Date().toLocaleString(), }) },1000) } |
5. 曜日の表示
getDay()メソッドを使うことで、曜日を表示させることができます。
getDay()メソッド
getDay()では、曜日情報を取得することができますが、
返り値が[0〜6]の数値で返ってきます。
0が日曜で6が土曜なので、
曜日の配列を別途で用意して変換する必要あります。
以下のようなソースコードを書くことで曜日を表示することができます。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import React from 'react'; import { View, Text, StyleSheet} from 'react-native'; const weekday = ['日', '月', '火', '水', '木', '金', '土']; export default class App extends React.Component { constructor(props) { super(props); this.state = { week: new Date().getDay() }; } render() { return ( <View style={styles.container}> <Text style={styles.text}>this.state.week</Text> <Text style={styles.text}>{this.state.week}</Text> <Text style={styles.text}>weekday[this.state.week]</Text> <Text style={styles.text}>{weekday[this.state.week]}</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 24, margin: 10, }, }); |
結果
6. 日付、年、時間などをそれぞれ表示する方法
new Date().の後に以下のメソッドを付けつことで特定の情報を表示させることができます。| 情報 | メソッド |
| 年 | new Date().getFullYear(); |
| 月 | new Date().getMonth(); |
| 日 | new Date().getDate(); |
| 曜日 | new Date().getDay(); |
| 時 | new Date().getHours(); |
| 分 | new Date().getMinutes(); |
| 秒 | new Date().getSeconds(); |
| ミリ秒 | new Date().getMilliseconds(); |
7. 実装
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
import React from 'react'; import { View, Text, StyleSheet} from 'react-native'; const weekday = ['日', '月', '火', '水', '木', '金', '土']; export default class App extends React.Component { constructor(props) { super(props); this.state = { }; } componentDidMount() { setInterval( () => { this.setState({ current: new Date().toLocaleString(), // 現時刻 year: new Date().getFullYear(), // 年 month: new Date().getMonth()+1, // 月 date: new Date().getDate(), // 日 week: weekday[new Date().getDay()], // 曜日 hours: new Date().getHours(), // 時 minutes: new Date().getMinutes(), // 分 seconds: new Date().getSeconds(), // 秒 }) },1000) } render() { return ( <View style={styles.container}> <Text style={styles.text}>現在時刻</Text> <View style={styles.box}> <Text style={styles.text}>{this.state.current} ({this.state.week})</Text> </View> <View style={styles.box}> <Text style={styles.text}> {this.state.year}年 {this.state.month}月 {this.state.date}日 {this.state.hours}時 {this.state.minutes}分 {this.state.seconds}秒 ({this.state.week}) </Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 24, margin: 10, }, box: { borderWidth: 1, borderColor: "black", borderRadius: 10, width: "95%", alignItems: 'center', justifyContent: 'center', margin: 10, } }); |
結果
8. まとめ
今回は、日時の取得方法について紹介しました。日時表示はどんなアプリでも使えますので、
new Data()
で取得できると言うことは、最低限覚えておきましょう(^^)
