GatsbyJS JavaScript処理の結果を画面に表示する

2019-06-07

デバッグなどで値の表示を行いたいとき、JavaScriptをどこに書くのか

JavaScript処理の結果を画面に表示する

当日の日付や外部APIの結果を画面に表示する場合、JavaScriptで処理を行ってから画面に値を渡す必要があります。 GatsbyというよりReactの仕様ですが、処理を書ける場所を説明します。

JavaScriptを書く前の準備

Gatsbyのプロジェクトをスターターから作成すると、このようなコードになっています。

import React from "react"

export default () => <div>Hello world!</div>

この記述は省略された記述方法となるので、以下のように記述しても同じ結果となります。

import React from "react"
export default () => {
    return (
        <div>Hello worlds!</div>
    )
}

JavaScriptが書ける場所

グローバルスコープやコンポーネントの中、returnの中にも記述できます。
ただ、returnの中は{}で囲う必要があります。
returnの中ではコメントは{* *}で記述します。

import React from "react"

//グローバルスコープ　ここに処理が書ける
var date = new Date();
// 西暦を取得
const year = date.getFullYear();

// 月を返す関数定義
const get_month = () => {
    return date.getMonth() + 1;
}

export default () => {
    // ここにも書ける
    // 日付を取得
    const day = date.getDate();
    return (
        <div>
            {/* 変数や関数の実行 */}
            {year}年{get_month()}月{day}日</div>
    )
}

ブラウザで確認すると、年月日の表示が確認できます。