エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

ビジネスのお勉強メモ

ビジネスの用語メモ

はじめに

ビジネスやニュースの勉強をしようと思い週刊誌を購読し始めた。 わからない単語が多いので調べたことをメモ。

用語集

投資に関する用語

PBR（Price Book-value Ratio）

PBRとは、今の株価がどれだけ割安か、を表す指標。 1以下であれば割安で、1以上であれば割高。

Price Book-value Ratioの略称で和訳は株価純資産倍率。PBRは、当該企業について市場が評価した値段（時価総額）が、会計上の解散価値である純資産（株主資本）の何倍であるかを表す指標であり、株価を一株当たり純資産（BPS）で割ることで算出できる。
PBR｜証券用語解説集｜野村證券

PBRが高いということは、「目に見える資産（純資産）に現れない、投資家からの期待値」が高いらしい。例えば、2022/2/17時点でAppleのPBRは 44.8[倍] と、ものすごい数字になっていた。日本の企業だと大抵、1~2倍。

  • PBR = 株価 [円]／BPS [円]
  • BPS = 純資産[円]／発行済み株式数

非財務資本

決算報告？などに出てこない、定性的な企業の価値。最近は株価を上げるためにはとにかくこの非財務資本が大事らしい。

非財務情報（Non-Financial Information）とは、ディスクロージャー情報のうち、財務諸表などで開示される情報以外の情報である。具体的には、有価証券報告書やCSR報告書などで報告されている、MD&A（経営者による財政状態及び経営成績の検討と分析）などの定性的情報がこれに該当する。
非財務情報 | みずほ証券 ファイナンス用語集

有形資産と無形資産

有形資産は、形のある資産。 無形資産は、物理的な形のない資産。権利やソフトウェアなど。非財務資本と違うのは、金銭的に換算できること。

有形資産の例

  • 現金
  • 証券
  • 土地
  • 建物

無形資産の例

  • ソフトウェア
  • ブランド
  • 特許
  • のれん

【東建コーポレーション】有形資産｜住まいの反対語･対称語集 https://www.nikkei4946.com/knowledgebank/selection/detail.aspx?value=1494

無形資産への注目

「ライフシフト」という本が発売され、この中で提案されている３つの無形資産が今後重要になるとのこと。

  • 生産性資産：スキルや知識。
  • 活力資産：やる気の根源。家族とか健康とか。
  • 変身資産：時代に合わせて自分を変えていく力。（大事だなぁ）

ライフシフトについて｜ライフシフト LIFE SHIFT

ESG

環境（Environment）・社会（Social）・ガバナンス（Governance）の頭文字をとった言葉。

SDGsという言葉も最近よくテレビで見るようになったが、投資の世界ではとにかくESGが流行っているらしい。「儲けだけでなく環境のため、社会のために活動する」ことが求められてくる時代になったとのこと。

重要ポイントは「気候変動への対応」「人的資本を生かす（リスキル等）取り組み」。

ESG投資は、従来の財務情報だけでなく、環境（Environment）・社会（Social）・ガバナンス（Governance）要素も考慮した投資のことを指します。特に、年金基金など大きな資産を超長期で運用する機関投資家を中心に、企業経営のサステナビリティを評価するという概念が普及し、気候変動などを念頭においた長期的なリスクマネジメントや、企業の新たな収益創出の機会（オポチュニティ）を評価するベンチマークとして、国連持続可能な開発目標（SDGs）と合わせて注目されています。
ESG投資（METI/経済産業省）

のれん

のれん　＝　企業を買収するために払った額　ー　買収した企業の純資産。

M&A（合併・買収）の際、買収額のうち相手企業の純資産額を上回る部分のこと。純資産は総資産から負債を除いた後に残る部分で、企業の正味価値を示す。これを超えて支払った部分が「のれん」で、買収先のブランド力など見えない資産の対価と解釈される。のれんは買収側企業が資産として計上する。
「のれん」とは 見えない資産の対価: 日本経済新聞

世界に関する用語

ODA（政府開発援助）

おわりに

ほぼ自分用メモなので、地道に更新していきます。

Gatsbyブログでデザインを変更する（CSS適用方法）

ブログ作成 Gatsby

はじめに

前回はGatsbyブログをスターターキットを作成して、公開した。

自分のブログに変更していくために、今回はCSSの適用方法を理解する。ほぼReactで勉強したことと同じだが、Gatsby特有／gatsby-starter-blogスターターキット特有部分もある。

この記事のゴール

  • 以下の仕組みを理解する。
    • サイトデザインのCSS追加方法
  • AboutページのCSSをいじってみる。
  • ブログ全体のCSSをいじってみる。

前回の記事

tomiko0404.hatenablog.com

前提

  • gatsby-starter-blogスターターキットを利用したgatsbyブログを立ち上げ済
  • Vagrantを開発環境として利用
  • Gatsby Cloudで公開済（今回は利用しないので、なくても可）

CSSの追加

  • 一部のページにスタイル適用したい場合
    • CSS Module等を利用する
  • 全体にスタイルを適用したい場合
    • layout.cssを利用する
    • gatsby-browser.jsを利用する ※gatsby-starter-blogスターターキットで利用されている方法

一部のページへのスタイル適用：CSS Moduleの利用

公式チュートリアルではCSS Moduleを利用してCSS適用しているので、AboutページにCSS適用してみる。

インストール

パッケージのインストールなどは不要。

CSSファイル作成

.module.cssを拡張子とするファイルを作成する。

src/components/my-layout.module.css

.my-container {
    margin: auto;
    max-width: 500px;
    font-family: sans-serif;
    background-color: khaki;
}

CSSは一般的にクラス名をケバブケースで記載する（my-container）。 一方でReactでは、クラス名をキャメルケースで記載する（myContainer）。

Gatsbyでは、.module.cssファイルでケバブケース、インポートした.jsファイルではキャメルケースで記載しておくと自動で読み替えて同じものとして扱ってくれる。

Aboutページへの適用

Aboutページに適用する。 <MyLayout>コンポーネントでレイアウトを外だししているので、<MyLayout>コンポーネントにCSSを適用する。今回は<main>タグにクラスを適用する。

src/components/myLayout/myLayout.js

import * as React from 'react'
import { Link } from 'gatsby'
import {myContainer} from "../components/my-layout.module.css"

const MyLayout = (props) => {
    const {pageTitle, children} = props;

    return(
        <div>
            <title>{pageTitle}</title>
            <nav>
                <ul>
                    <li><Link exact to="/">Home</Link></li>
                    <li><Link to = "/about">About</Link></li>
                </ul>
            </nav>
            <main className={myContainer}>
                <h1>{pageTitle}</h1>
                {children}
            </main>
        </div>
    )

}

export default MyLayout;

結果、CSSが適用された。

適用結果
適用結果

全体へのCSS適用①：layout.cssの利用

公式チュートリアルの以下ページを参考に実施する。

参考： Standard Styling with Global CSS Files | Gatsby

components/layout.jsとcomponents/layout.cssを作成する必要があるが、スターターキットで既にlayout.jsは作成されているので、layout.cssを作成する。

CSSファイルの作成

src/copmonents/layout.css

h1 {
    background-color: skyblue;
}

layout.jsへのインポート

layout.jsにインポート文を追加する。

src/components/layout.js

import "./layout.css"

Layoutコンポーネントの適用

index.jsの応答値を全体的に、layout.jsで作成したコンポーネント<Layout>で囲む必要がある。スターターキットにより既に実現されているので省略する。

結果、すべてのページの<h1>タグにCSSが適用された。

適用結果
適用結果

全体へのCSS適用②：gatsby-browser.jsを利用する

全体にCSSを適用したい場合はgatsby-browser.jsの中でstyle.cssをインポートし、style.cssの中に適用させたいCSSを記述する。

以下のチュートリアルにあるとおり、CSS-in-JSではないことに注意する。公式では全体に適用させるこの方法はあまりおすすめしていないようだ。layout.cssかglobal-styles.jsの利用が最善だ、と述べている。

参考： Standard Styling with Global CSS Files | Gatsby

CSSファイルのインポート

gatsby-starter-blogではstyle.cssが存在しており、以下ファイルでインポートされている。

gatsby-browser.js

// normalize CSS across browsers
import "./src/normalize.css"
// custom CSS styles
import "./src/style.css"

CSS変更

style.cssを変更してみる。

h2,h3,h4,h5,h6 {
  font-weight: var(--fontWeight-bold);
  /* color: var(--color-heading); */
  color: blue;
}

見出しだけ青字に変更された。

適用結果
適用結果

gatsby-browser.jsとは

Gatsbyのルートフォルダに置く特別なファイルで、この中でexportすることでグローバルAPIを作成することができる。

The file gatsby-browser.js lets you respond to Gatsby-specific events within the browser, and wrap your page components in additional global components. The Gatsby Browser API gives you many options for interacting with the client-side of Gatsby. To use Browser APIs, create a file in the root of your site at gatsby-browser.js. Export each API you want to use from this file.

参考：Gatsby Browser APIsについて
Gatsby Browser APIs | Gatsby

その他、Reactのデザイン変更方法メモ

過去にReactのデザイン変更方法をメモしていた。 tomiko0404.hatenablog.com

この中でもchakra-uiは使いたいので、後日gatsbyへの導入方法を調べる予定。

参考：CSSでの変数利用

gatsby-starter-blogスターターキットのstyle.cssでは、CSSの値を直接設定するのではなく、CSSファイルの冒頭で変数化して利用していた。 こうすることで、ここでは18px、こっちでは19pxということが起きず、統一性が保てるメリットがあると思われる。

変数の定義

変数名は--で開始する。

:root {
  --main-bg-color: brown;
}

:rootは、HTML全体の意味。

変数の利用

var(変数名)で利用する。

body {
  background-color: var(--main-bg-color);
}

おわりに

スタイルを変更するための基礎を理解した。

関連記事

つづき

Gatsbyブログに好きなページを追加する

ブログ作成 Gatsby

はじめに

前回はGatsbyブログをスターターキットを作成して、公開した。

自分のブログに変更していくためのやり方を学ぶ。今回はページの追加とルーティングを実施する。ここではマークダウンによる記事入稿ではなく、単純にReactでページを作成する。

この記事のゴール

  • 以下の仕組みを理解する。
    • Gatsbyサイトへのページの追加方法
    • ルーティングの方法
    • ページ遷移方法
  • Gatsbyサイトに、記事ではないページを追加（Aboutページ：「このサイトについて」）し、トップページからリンクを貼る。

前回の記事

tomiko0404.hatenablog.com

前提

  • gatsby-starter-blogスターターキットを利用したgatsbyブログを立ち上げ済
  • Vagrantを開発環境として利用
  • Gatsby Cloudで公開済（今回は利用しないので、なくても可）

Gatsbyのページ作成

公式サイトにあるとおり、

Gatsby automatically creates pages for React components that are the default export of files in the src/pages directory.

/src/pagesフォルダ配下に、ページコンポーネントを作成しておくと、対応するページを自動的に作成してくれるとのこと。

注意点①

関数をエクスポートすることでコンポーネントとして利用できる。

その際、

export default

でコンポーネント化する必要があるので注意。いつものような

export const Component () => {}

の書き方だとNG。

注意点②

.jsxファイルでは改めてReactをインポートする必要はないが、ここで作成するのは.jsなので、先頭でReactのインポートが必要。

import * as React from 'react'

404ページ

src/pages/404.jsという名前のコンポーネントを作成しておくと、404エラーページとして、存在しないURLを指定されたときに表示してくれる。

Aboutページを作成する

コンポーネント作成

Aboutページを作成してみる。

注意点①②以外はいつも勉強してきたReactの書き方と同じ。

src/pages/about.js

import * as React from 'react'

const About = () => {

    return (
        <main>
            <title>About me</title>
            <h1>このサイトについて</h1>
            <p>ayです。Gatsbyを利用し作成しています。
            </p>
            <p>お問い合わせはこちら 03-xxxx-xxxx</p>
        </main>
    )

}

export default About;

Webページへの反映

コンポーネントを作成しただけで、localhost:8000/aboutにページが作成された。ルーティング等は不要。

Aboutページが作成された
Aboutページが作成された

※私の環境ではVagrantを利用しているためlocalhost:8000が利用できずlocalhost:8001にルーティングされている（詳細不明）。

リンク作成

通常のReactと同じように<Link>コンポーネントが使える。Gatsbyにデフォルトで含まれているようなので、改めてnpm install react-router-dom等をする必要はない。

また、Gatsbyでは「プリロード」という機能がある。<Link>コンポーネントをクリックしてからロードするのではなく、クリックする前にロードしておく機能。

Gatsbyコンポーネントは、プリロードLinkと呼ばれるパフォーマンス機能を提供します。これは、リンクがスクロールして表示されたとき、またはマウスをその上に置いたときに、リンクされたページのリソースが要求されることを意味します。そうすれば、ユーザーが実際にリンクをクリックしたときに、新しいページを非常にすばやく読み込むことができます。 Part 2: Use and Style React Components | Gatsby

トップページ→Aboutページのリンク追加

Linkを利用するにはインポートする必要がある。

import { Link} from "gatsby"

index.jsはgatsby-starter-blogスターターキットによりすでに実装されている。return文の適当なところにリンクを追加する。

src/pages/index.js

import * as React from "react"
import { Link, graphql } from "gatsby"

・・・省略・・・

  return (
・・・省略・・・

      {/* Aboutページを追加*/}
      <Link to="/about">このサイトについて</Link>

・・・省略・・・
  )
}

export default BlogIndex

・・・省略・・・

Aboutページ→トップページのリンク追加

AboutページにもLinkタグを追加する。

import * as React from 'react'
import { Link } from "gatsby"   // 追加

const About = () => {

    return (
        <main>
            <title>About me</title>
            <h1>このサイトについて</h1>
            <Link exact to="/">ホームへ戻る</Link>  {/* 追加 */}
            <p>ayです。Gatsbyを利用し作成しています。</p>
            <p>お問い合わせはこちら 03-xxxx-xxxx</p>
        </main>
    )

}

export default About;

リンク追加後の画面

各ページへのリンクを追加することができた。

Aboutページ（トップページへのリンク追加後）

Aboutページ（トップページへのリンク追加後）
">トップページ（Aboutページへのリンク追加後）
トップページ（Aboutページへのリンク追加後）

おわりに

Gatsbyブログにページを追加してリンクを貼ることができた。

関連記事

つづき

ページのデザインを変更する。 tomiko0404.hatenablog.com

gatsby developで出たエラーの対処法

ブログ作成 Gatsby

はじめに

Gatsbyを利用してWebサイトを作成していた際、gatsby developコマンドを実行時に発生したエラーの対処方法。

エラーの内容

実行したコマンド

$ gatsby develop

発生したエラー

 ERROR 

UNHANDLED REJECTION ENOSPC: System limit for number of file watchers reached, watch
'[フォルダ名省略]/gatsby-starter-blog/gatsby-config.js'



  Error: ENOSPC: System limit for number of file watchers reached, watch ''[フォルダ名省略]/gatsby-starter-blog/gatsby-confi
  g.js'
  
  - watchers:244 FSWatcher.
    node:internal/fs/watchers:244:19
  
  - node:fs:2247 Object.watch
    node:fs:2247:34
  
  - nodefs-handler.js:119 createFsWatchInstance
    [gatsby-starter-blog]/[chokidar]/lib/nodefs-handler.js:119:15
  
  - nodefs-handler.js:166 setFsWatchListener
    [gatsby-starter-blog]/[chokidar]/lib/nodefs-handler.js:166:15
  
  - nodefs-handler.js:331 NodeFsHandler._watchWithNodeFs
    [gatsby-starter-blog]/[chokidar]/lib/nodefs-handler.js:331:14
  
  - nodefs-handler.js:395 NodeFsHandler._handleFile
    [gatsby-starter-blog]/[chokidar]/lib/nodefs-handler.js:395:23
  
  - nodefs-handler.js:637 NodeFsHandler._addToNodeFs
    [gatsby-starter-blog]/[chokidar]/lib/nodefs-handler.js:637:21
  
  - index.js:451 
    [gatsby-starter-blog]/[chokidar]/index.js:451:21
  
  - async Promise.all

原因

Linuxで監視できるファイル数上限を超えているとのこと。

対処方法

案①：キャッシュを削除する

キャッシュを削除する。

$ gatsby clean

./cacheフォルダを削除する動作。

案②：ファイル数上限を上げる

以下サイトに従ってコマンドを実行。

参考資料： listen/README.md at master · guard/listen · GitHub

設定値の確認

$ cat /proc/sys/fs/inotify/max_user_watches
8192

設定値の一時的変更

$ sudo sysctl fs.inotify.max_user_watches=524288 
fs.inotify.max_user_watches = 524288
$ sudo sysctl -p

永続的にパラメータを変更（私の環境では未実施）

$ sudo sh -c "echo fs.inotify.max_user_watches=524288 >> /etc/sysctl.conf"
$ sudo sysctl -p
  • sysctlはカーネルのパラメータを実行時に修正するのに用いるコマンド。
  • sysctl -p [ファイル]で指定したファイルの設定を読み込み反映する。ファイルを指定しない場合は/etc/sysctl.confが読み込まれる。永続的に変更する際は必須だが、一時的な変更の際はおそらくやらなくても良い。
  • sh -c " コマンド "はシェルスクリプトを一行だけ実行したいときに使うコマンド。
  • echo [内容] >> [ファイル]は内容をファイルに追加で書き込んでいる。

参考資料： sysctl - システム管理コマンドの説明 - Linux コマンド集 一覧表

おわりに

案①では解決せず、案②で一時的に設定変更することでgatsby developを実行できた。

GatsbyブログをGatsby Cloudで公開してみた

ブログ作成 Gatsby

はじめに

Gatsbyブログをローカルで立ち上げてみた。 公式チュートリアルに従うと、ここでホスティングサービスGatsby Cloudを利用して公開してみる手順があるので、やってみる。

この記事のゴール

前回の記事

tomiko0404.hatenablog.com

前提

  • Vagrantで作成したGatsbyプロジェクトが存在する
  • gatsby-starter-blogスターターキットを利用

システム構成

作成するシステムの構成を図にする。

一般的には、ヘッドレスCMSとホスティングサービスを組み合わせることが多い。 JAMSTACK（JavaScript/APIs/Markup）と言われる形式。

Git Hubとローカルを連携する

GitHub上で新規リポジトリを作成。

その後、 gatsby/gatsby-starter-blog上で以下のとおりGitHubにプッシュする。

$ git init
$ git status
$ git add .
$ git commit -m "first commit"
$ git branch
$ git branch -M main
$ git remote add origin git@xxxxxxxxxxxxxxxxxxx.git
$ git push -u origin main

参考：Gitに入門した際の記事はこちら。
ソースコードをGitHubで管理する方法メモ - エンジニアを目指す日常ブログ

Gatsby Cloudにログイン

Git Hub アカウントでログインした。

無料プランと有料プランがあり、最初の14日間は有料プランのトライアルとなる。14日後自動で無料プランにダウングレードするとの記載がある。

サイトを追加

Add a siteを選択した。

サイトを追加
サイトを追加

Git Hubとの連携

Import from a Git repository → Git Hubを選択する。

インポート元をGitHubにする
インポート元をGitHubにする

Gatsby CloudからGit Hubへのアクセス許可を与える。今回はブログ用のリポジトリのみ選択。

アクセス権限
アクセス権限

リポジトリを選択する。

リポジトリをインポート
リポジトリをインポート

サイトの設定

サイト名はデフォルトのままにした。

CMSの設定、環境変数も特に変更せず、下部のBuild Siteをクリック。

サイトの設定
サイトの設定

サイトの完成

設定の確認

GitHubにプッシュしていたブログがホスティングされた。

サイトの情報
サイトの情報

https://対応もしている模様。

試しに公開したブログ：https://mylearningblogmain.gatsbyjs.io/

おわりに

Gatsby Cloudを使ってサイトを公開することができた。

関連記事

つづき

Vagrant上でGatsbyブログを編集・ビルド・デプロイしてみた

ブログ作成 Gatsby

はじめに

Gatsbyでブログを作ってみたい。前回に引き続き、スターターキットそのままのブログに少し編集を加えてみる。また、本番環境で使うコマンド「ビルド」と「サーブ」を試してみる。

この記事のゴール

  • 以下の仕組みを理解する。
    • アプリのビルド、デプロイ、ホットリロード
  • 以下を実践する。
    • ローカル環境でブログに変更を加える。
    • ローカル環境でブログをビルドし、localhostにデプロイしてみる

前回の記事

tomiko0404.hatenablog.com

前提

  • Vagrant/ubuntu18 上に環境構築
  • Node.js、Reactはインストール済み
  • gatsby-starter-blogスターターキットを利用

手動で記事を追加してみる

content/blog配下にay-page/index.mdを追加する。 中身はマークダウンで記載する。

最初の5行はgatsbyの記法（GraphQL記法？）とのこと。

---
title: ay-page　追加
date: "2022-02-05T22:12:03.284Z"
description: "ay-pageです"
---

## はじめに
ページを追加した。

### やりかた
`content/blog`配下に`ay-page/index.md`を追加した。

gatsby develop --host=0.0.0.0 を実行すると、localhost:8000/ay-page にアクセスできるようになる。

ページを追加
ページを追加

トップページにもリンクが追加された。

トップページ
トップページ

ビルド＆サーブ

以下のコマンドを実行すると、ビルドできる。 ビルドによりpublicフォルダ内にay-pageフォルダとindex.htmlが作成された。

$ gatsby build

以下のコマンドで、本番用サーバにデプロイできる。

$ gatsby serve

こちらのコマンドを実行するとlocalhost:9000にデプロイされた。

developとbuild / serveの違い

あまり正確ではないが今のところ以下のようなイメージ。

gatsby developはホットリロードが有効で、ローカルで開発するのに使う。メモリを大量に使う。

一方で、実際に商用に公開する際はgatsby buildにより作成したビルドファイルをgatsby serveで実行しておくだけなので、メモリは大きく利用しない。

おわりに

ローカルでビルド（gatsby build）とデプロイ（gatsby serve）まで実施した。

実際にブログとして利用する際には、ビルドから本番環境のWebサーバで実行するのが一般的らしい。

などを使えばクラウド上でビルドできるほか、GitHub Actionと連携すればGitにpushしたら自動的にビルド＆デプロイすることも可能らしい。

次回はこちらを試してみたい。

つづきの記事

tomiko0404.hatenablog.com

Vagrant上でGatsbyブログのひな型を作成した

ブログ作成 Gatsby React Node.js

はじめに

せっかくReactを勉強していることもあり、Gatsbyでブログを作成してみたい。（完成しないかもしれないけど…）

本記事では、まずはスターターキットを利用して、型だけ作ってみる。

この記事のゴール

  • Vagrant上でGatsbyをインストール
  • スターターキットを利用してプロジェクトを作成
  • お試し起動

前提・環境

  • Vagrant/ubuntu18 上に環境構築
  • Node.js、Reactはインストール済み

前提の環境構築の参考記事：
Linux仮想環境：Vagrantの立ち上げ方メモ - エンジニアを目指す日常ブログ
Node.js インストール方法メモ - エンジニアを目指す日常ブログ

Gatsbyのインストール

以下のコマンドでインストールする。

$ npm install -g gatsby-cli

インストール時に躓いたエラー①

インストール後、

$ gatsby -help

を実行するとエラーが発生した。

Node.jsのバージョンを変更して対処した。

tomiko0404.hatenablog.com

インストール時に躓いたエラー②

Vagrantを使っている場合、ローカルとフォルダを共有して使うことが多いと思うが、ローカルと共有しているフォルダでnpm installをするとエラーが起きることが多いようである。

参考： Reactアプリ（または React×TypeScriptアプリ）を作る方法メモ - エンジニアを目指す日常ブログ

ローカルと共有しているworkspaceフォルダの外で作業を実施したら問題なかった。

共有できないのは不便だが、以下のVSCode機能を使うと不便さはある程度解消できる。 tomiko0404.hatenablog.com

参考

Vagrantfileに以下のように記載するとフォルダを共有できる。

 config.vm.synced_folder "./workspace", "/home/vagrant/workspace"

プロジェクトの作成

以下のコマンドを実行し、スターターキット（テンプレート）からプロジェクトを作成する。

$ npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

スターターキットはGatsby Starters: Library | Gatsbyから選ぶことができる。

今回はgatsby-starter-blogというスターターキットを利用した。 www.gatsbyjs.com

プロジェクト作成時に躓いたエラー

プロジェクト作成時にメモリ不足エラーが発生。 Vagrantの設定値を変更して対処。 tomiko0404.hatenablog.com

試しに起動してみる

以下のコマンドを実行する。

$ gatsby develop --host=0.0.0.0

Vagrantなどの仮想マシンを利用していない場合は単純にgatsby developで良いそうだが、Vagrantの場合は--host=0.0.0.0のオプションが必要らしい。

参考： Part 1: Create and Deploy Your First Gatsby Site | Gatsby

0.0.0.0はホスト全体をさすそうだが、なぜこのオプションが必要なのかは勉強不足でよくわかりません。

127.0.0.1とlocalhostと0.0.0.0の違い - Qiita

※なぜかgatsby developコマンドで実行し、ブラウザでlocalhost:8001を開くとサイトが表示される不思議もあり。

試しにアクセスしてみる

以下のようなメッセージが出てくるので、

You can now view gatsby-starter-blog in the browser.
⠀
  Local:            http://localhost:8000/
  On Your Network:  http://XX.XX.XX.XX:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  Local:            http://localhost:8000/___graphql
  On Your Network:  http:/XX.XX.XX.XX:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build

※On Your Networkの内容は伏字にした。

ブラウザでlocalhost:8000にアクセスするとブログが表示される。

ブログのひな型を表示できた
ブログのひな型を表示できた

実行停止する

ここでは単に、通常のReactでいうnpm startした状態のようで、ctrl+cで実行を停止すればサイトも表示できなくなる。

記事を編集してみる

再び$ gatsby develop --host=0.0.0.0を実行し、content/blog/hello-world/index.mdを書き換えてみる。

gatsby-developでは開発用にホットリロードが有効になっている。

ホットリロードが有効になっており、ブラウザの表示も変更される。
ホットリロードが有効になっており、ブラウザの表示も変更される。

おわりに

インストールを乗り越えた。 今後は少し中身を編集してみて、仕組みを勉強する。

つづきの記事

tomiko0404.hatenablog.com

参考記事

qiita.com