Qiita 投稿4回目です。今回はGitHub Pagesに関する記事です。

当記事は作成したアプリ(React TypeScript)をGitHub Pages で公開する内容です。

GitHub Pgaeについて

GitHub PageとはGitHubにより自身のレポジトリのプロジェクトを静的ホスティングを行えるサービスです。

GitHub Pagesでホスティングを行えるのは HTML CSS JavaScriptのみです。サーバーサイドのホスティングを行うことはできません。

また、GitHub Pagesを利用する場合はGitHubアカウントの取得とホスティングを行いたいWebアプリかWebサイトのリポジトリが必要になります。

GitHub　Pagesには利用規約があります。使用制限や禁止要項などが存在します。ホスティングをしたいプロジェクトが利用規約に反していないかを確認してGitHub Pagesを利用しましょう。

利用規約はこちらから（https://docs.github.com/ja/free-pro-team@latest/github/working-with-github-pages/about-github-pages）

GitHub Pagesを利用した理由

私がなぜ GitHub Pagesを利用したかというとGitHub Pagesが容易に利用できそうだったからです。

私は今まで、Netlifyやfirebaseでフロントのホスティングを行なっていましたが、GitHub Pagesに関する記事を見たときに簡単そうだったので、GitHub Pagesを利用しました。

プロジェクトをGitHubからホスティングできるというのはとても魅力的だと思います。皆様ぜひホスティングにお悩みの際はGitHub Pagesを利用してみてはいかがですか？

他のホスティングサービスについて

フロントのホスティングサービスはGitHub Pages意外にも多々あります。

有名なサービスとしてNetlifyやfirebaseなどが存在します。

ホスティングサービスによるプロジェクトの速度のちがいについては正直よくわかりません。

どのサービスも黄本無料で利用することができます。ただし場合によっては有料プランになることもあるそうです。（今まで無料だったので、どうしたら有料になるかは不明。誰か分かる方教えてください）

基本無料ってとてもいいですよね。私のような学習でデプロイを行うにはとてもありがたいです。

GitHub Pagesのセットアップ

それでは本題のGitHub Pagesの利用方法について解説します。

今回はReactで作成したアプリをGitHub Pagesに公開する方法なので、VueやAngularといった他の人気javaScriptフレームワークの場合異なるかもしれないのでその場合はご了承ください。

デプロイしたいプロジェクトはないがGitHub Pagesを利用してみたい人は [create react app] で作成された初期のアプリなどで試してみてください。

リポジトリを作成していない人はリポジトリの作成を行い、リポジトリにソースコードを push してください。

まず

yarn add gh-pages @types/gh-pages

でGitHub Pagesに関するライブラリをインストールしましょう。

これでめちゃくちゃ簡単にGitHub Pagesにデプロイを行うことができます。

次にインストールをしたgh-pagesを用いて簡単でデプロイができるように設定を行います。

//...
"homepage": "https://[自身のGitHubのアカウント名].github.io/[デプロイしたいリポジトリの名前]/"

"scripts": {
  //...
  "deploy": "yarn build && gh-pages -d build"
}

package.jsonに上記の内容を追加します。

これでGitHub Pagesのセットアップは完了です。

ちょー簡単ですね。

作成したReact製アプリをGitHub Pagesにデプロイする

ではGitHub Pagesに作成したプロジェクトをデプロイしましょう。
先ほど追加したpackage.jsonのscriptsを実行します。

yarn deploy

ではGitHubのリポジトリのsettingを確認しましょう。

これで公開されています！

しかし ...

URLにアクセスしても何も表示されない！

解決策

<base href="<GitHub Pagesの公開URL>">

上記をpublic/index.htmlのheadに追加することで表示することができました！

以上がReactアプリをGitHub Pagesにデプロイする方法です。

参考サイト

GitHub Pagesについて

ReactアプリをGitHub Pages(Project Pages)で公開する

GitHub PagesにReactアプリをデプロイする方法

はじめに

Windows10 64bitでTypeScriptでReact Appを生成するまでの環境構築方法をまとめておきます。

Chocolateyをインストール

Windows用のパッケージマネージャーChocolateyをインストールします。
ソフトウェアのインストールと更新、削除が簡単にできるようになります。

Chocolatey Software | Installing Chocolatey にあるコマンドを管理者権限のPowerShellで実行します。
インストール終了後は、バージョン確認出来たらOKです。

> choco -v

nodistのインストール

nodistを使ってNode.jsをバージョン管理します。

Chocolateyを使ってnodistをインストールします。
管理者権限のコマンドプロンプトで実行します。
インストールしてバージョン確認します。

> choco install -y nodist
> nodist -v

開発時はLST推奨版のバージョンで開発を行うことが多いと思います。
Node.jsからLST推奨版のバージョンをインストールします。
(2020/10/25時点では、v12.19.0が最新でした)

> nodist + 12.19.0

globalで使用するバージョンを指定しないとデフォルト指定されずインストールしたのに何故か古いバージョンで動いているといったことになるため注意が必要です。
Node.jsのバージョンを確認します。

> nodist global 12.19.0
> node --version

Windowsで、Chocolateyとnodistで、バージョン切り替え可能なNode.jsの環境を構築する - Qiita より

yarnのインストール

JavaScriptのパッケージマネージャyarnをインストールします。
npmよりインストール速度が速く厳密にバージョンを固定出来るのが特徴です。

Chocolateyを使ってyarnをインストールします。
管理者権限のコマンドプロンプトで実行します。
インストールしたらパスを指定しておきます。

> choco install yarn
> set Path = %Path%;"C:\Program Files (x86)\Yarn\bin"

コマンドプロンプトを再起動してバージョン確認します。

> yarn -v

このあとCreate React Appを使うのにnpxを使いたい場合、
nodeistからだと自動でnpxがインストールされない(さらにnpmが古い)ため個別でインストールします。
今回は、v6.14.8をインストールしました。

> nodist npm global 6.14.8
> npm install -g npx

Chocolateyからyarnをインストールする手順 - Qiita より

React Appの生成

Create React Appを使ってReact Appを生成します。

npxは、npmパッケージを実行するコマンドです。
ローカルにインストールされていないコマンドの場合は、最新版をダウンロードして実行した後、そのコマンドのパッケージを削除してくれます。
詳しくは、npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita 参照。

npx create-react-app hello-world --template typescript

因みにnpmのバージョンを挙げていないとCreate React Appを使う時に以下のエラーが出ます。

npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:

公式ドキュメントによるReact + TypeScriptのスタートガイドは以下です。
microsoft/TypeScript-React-Starter: A starter template for TypeScript and React with a detailed README describing how to use the two together.

はじめに

Windows10 64bitでTypeScriptでReact Appを生成するまでの環境構築方法をまとめておきます。

Chocolateyをインストール

Windows用のパッケージマネージャーChocolateyをインストールします。
ソフトウェアのインストールと更新、削除が簡単にできるようになります。

Chocolatey Software | Installing Chocolatey にあるコマンドを管理者権限のPowerShellで実行します。
インストール終了後は、バージョン確認出来たらOKです。

> choco -v

nodistのインストール

nodistを使ってNode.jsをバージョン管理します。

Chocolateyを使ってnodistをインストールします。
管理者権限のコマンドプロンプトで実行します。
インストールしてバージョン確認します。

> choco install -y nodist
> nodist -v

開発時はLST推奨版のバージョンで開発を行うことが多いと思います。
Node.jsからLST推奨版のバージョンをインストールします。
(2020/10/25時点では、v12.19.0が最新でした)

> nodist + 12.19.0

globalで使用するバージョンを指定しないとデフォルト指定されずインストールしたのに何故か古いバージョンで動いているといったことになるため注意が必要です。
Node.jsのバージョンを確認します。

> nodist global 12.19.0
> node --version

Windowsで、Chocolateyとnodistで、バージョン切り替え可能なNode.jsの環境を構築する - Qiita より

yarnのインストール

JavaScriptのパッケージマネージャyarnをインストールします。
npmよりインストール速度が速く厳密にバージョンを固定出来るのが特徴です。
バージョンはyarn.lockファイルに記録されてインストール時に同じバージョンがインストールされます。

Chocolateyを使ってyarnをインストールします。
管理者権限のコマンドプロンプトで実行します。
インストールしたらパスを指定しておきます。

> choco install yarn
> set Path = %Path%;"C:\Program Files (x86)\Yarn\bin"

コマンドプロンプトを再起動してバージョン確認します。

> yarn -v

このあとCreate React Appを使うのにnpxを使いたい場合、
nodeistからだと自動でnpxがインストールされない(さらにnpmが古い)ため個別でインストールします。
今回は、v6.14.8をインストールしました。

> nodist npm global 6.14.8
> npm install -g npx

Chocolateyからyarnをインストールする手順 - Qiita より

React Appの生成

Create React Appを使ってReact Appを生成します。

npxは、npmパッケージを実行するコマンドです。
ローカルにインストールされていないコマンドの場合は、最新版をダウンロードして実行した後、そのコマンドのパッケージを削除してくれます。
詳しくは、npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita 参照。

npx create-react-app hello-world --template typescript

因みにnpmのバージョンを挙げていないとCreate React Appを使う時に以下のエラーが出ます。

npm ERR! cb.apply is not a function
npm ERR! A complete log of this run can be found in:

公式ドキュメントによるReact + TypeScriptのスタートガイドは以下です。
microsoft/TypeScript-React-Starter: A starter template for TypeScript and React with a detailed README describing how to use the two together.

はじめに

今までなんとなく使用していたので、英語のドキュメントを読んで仕事に応用するまでの記録してみます。

Formikとは

Formikとは、Reactでよく使われているツールで、フォームで使う機能を簡単かつ簡潔に実装できるようにしてくれるライブラリーです。要は、フォーム管理ツールです。

ドキュメントは?

https://formik.org/docs/overview

読んでいきます。

学びや気づき

Formik を理解する上で大事な要素を学びます。

<Field />（Fieldコンポーネント）

<Field /> は name属性を使用して自動的に Formik に入力を伝えます。デフォルトは HTML の <input /> 要素になります。

なぜ <Field /> を使うのか？

どの要素にも必ず必要なhandleChangeをすべての要素でpropsとして渡すのは、無駄ですよね？
そんなとき、FormikのFieldコンポーネントを使うと、handleChangeやerrorをpropsとして送る必要がなくなります。
便利なやつです。

https://formik.org/docs/api/field

name 属性

Fieldの一意の識別子です。

id や name を使って識別する。

例えば、formik.values.email でアクセスできます。

<input
  id="email"
  name="email"
  type="email"
  onChange={formik.handleChange}
  value={formik.values.email}
/>

<Form />（Formコンポーネント）

<Form />（Formコンポーネント）はHTML の

要素の小さなラッパーです。

Formik の handleSubmit と handleReset に自動的にフックします。他のすべてのプロップは DOM ノードに直接渡されます。

<FieldArray />（FieldArray コンポーネント）

一般的な配列/リストの操作を支援するコンポーネントです。

これに、関連する配列を保持する値の中のキーへのパスを持つ name プロパティを渡します。

実際の使われ方

const InnerForm = (form) => {
  return ( < Component/> )
}

const RequestForm = withFormik({
  mapPropsToValues: ({ props }) => ({ initialValues}),
  validationSchema: Yup.object().shape({バリデーションの設定}),
  mapPropsToStatus: () => ({ triedSubmit: false }),
  validateOnMount: true,
  handleSubmit: (values, { props: { handleSubmit }, ...actions }) => {
    handleSubmit(values, actions)
  },
})(InnerForm)

DevToolで見るとわかるが、InnerFormコンポーネントがFormikにラップされています。

withFormik とは

withFormik()で作る方法とFormikコンポーネントを直接使う方法があるみたい。

withFormik のOptionに
- mapPropsToValues
- validationSchema
- mapPropsToStatus
- validateOnMount
- handleSubmit

など、があります。

mapPropsToValues とは

このオプションが指定された場合、Formik は状態変化を更新可能なフォームに転送し、これらの値を props.values として新しいコンポーネントで利用できるようにします。

withFormik()でinitialValuesを設定する際に使われます。

詳しい具体例は、以下の記事をみて欲しいです。

Warning: A component is changing an uncontrolled input of type email to be controlled.
警告。コンポーネントが、制御されていないemail型の入力を制御対象に変更しています。

というエラーが出るための対策として、mapPropsToValuesを使っています。

https://formik.org/docs/api/withFormik#mappropstovalues-props-props--values

validationSchema とは

Formikが持つYup用の特別な設定オプション

mapPropsToStatus とは

更新可能なフォームの状態に転送し、これらの値を props.status として新しいコンポーネントで利用できるようにします。任意の状態をフォームに保存したり、インスタンス化したりするのに便利です。

validateOnMount とは

このオプションを使用して、コンポーネントがマウント（レンダリングされることをマウントという）またはinitialValues変更されたときに検証を実行するようにFormikに指示します。

デフォルトはfalseです。

handleSubmit とは

サブミットの処理をするやつです。データ送信のハンドラです。

formik.errors

custom validation function を介して入力されます。

キースストロークごとに、全てのエラーオブジェクトに格納される。

touched

Formik はどのフィールドがタッチされたかを追跡することができる。
この情報は touched と呼ばれるオブジェクトに保存されます。
各キーは boolean true/false のみです。

touched を利用するために、formik.handleBlur を各入力の onBlur プロップに渡すことができます。この関数はformik.handleChangeと似たように動作します。

どのフィールドを更新するかを決定するためにname属性を使用します。

handleChange

1ページにおける全ての form要素（例えば<input>, <select>, <textarea>）に対して、handleChangeは、一括で再利用される。

values

フォームが持つ要素の現在の値

<ErrorMessage />

バリデーション（検証）に関して

Formikにおいて、バリデーション（検証）は使い手（開発者）、つまりあなたに任されています。

カスタム検証関数validate関数の代わりに、

yup

検証には、Yupというライブラリがよく用いられています。

FormikにはvalidationSchemaと呼ばれるYupのための特別な設定オプションがあります。

validationSchema

Formikが持つYup用の特別な設定オプション

参考

• Formikを試してみた - Qiita
• Better React Forms with Formik - YouTube
• FormikでReactのformを簡単に扱おう！ - Qiita

開発環境

• Typescript
• React
• Material UI

コード

onChangeの引数はevent.target.valueで取得できます。

searchWindow.tsx

import * as React from "react";
import { useState } from "react";
import TextField from "@material-ui/core/TextField";

export default function SearchWindow() {
  const [value, setValue] = useState('default'); // valueをstateで管理

  return (
    <div>
      // 入力値をevent.target.valueで取得。setValueでvalueの値を更新
      <TextField onChange={(event) => setValue(event.target.value)} />
      <p>{value}</p>
    </div>
  );
}

useStateの使い方は下記を参考にしてください。
【React】カウンターAppでuseState, useEffectを使ってみた

app.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import SearchWindow from '.s earchWindow.tsx';

function App() {
  return (
    <SearchWindow />
  );
}

ReactDOM.render(<App/>, document.querySelector('#app'));

動作確認

先日 create-react-app 4.0.0 がリリースされました

このバージョンでは

• react-refresh が標準搭載
• react 17 のサポート
• typescript 4 のサポート

など他にもたくさんの update がされています．

この記事の内容

issue にもあるように create-react-app でセットアップされたプロジェクトはパスエイリアスの設定をサポートしていないので 3系で作成したプロジェクトでは tsconfig.json とは別に tsconfig.paths.json などの別のファイルを用意し extends を使うことで問題を 回避 していました．

新しいバージョンで作成したプロジェクトではこの回避方法で起動しようとするとエラーが発生し起動できなくなっています．

この記事では別の回避方法で起動する手順を紹介したいと思います．

エラーの原因

• react-scripts start 内で verifyTypeScriptSetup を呼び出す．ここでは tsconfig を読み込んで期待する中身かどうかをチェック．そうでなければ設定値補正する
  • paths が設定された tsconfig は期待していないので ここで 中身を補正しようとする際にエラーが発生する
  • （readonly なプロパティに値を代入しようとしている動きなので bug っぽい...?）

方針

• 1. verifyTypeScriptSetup が呼ばれるタイミングでは react-scripts が期待している tsconfig の中身のまま実行させる
• 2. webpack の設定を構成する際に ForkTsCheckerWebpackPlugin が参照する tsconfig の中身をパスエイリアス設定済みのファイルを参照するように差し替える
  • そうしないと型チェック時のモジュール解決ができません

1. react-app-rewired のインストールと設定

$ yarn add -D react-app-rewired

また package.json の起動コマンドを適宜修正します

2. tsconfig.json の修正

create-react-app で生成された tsconfig.json を別の名前にリネームします．ここでは tsconfig-react-scripts.json としましたが別の名前でもOKです．
この tsconfig は react-scripts が期待している中身にしておきたいので何も手を加えないようにします．

tsconfig-react-scripts.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
    .... 生成された tsconfig.json の中身のままにする
}

それとは別で tsconfig.json も用意します．これは tsconfig-react-scripts.json を extends しつつパスエイリアスを設定します．

tsconfig.json

{
  "extends": "./tsconfig-react-scripts.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}

3. config-overrides.js の修正

const path = require('path');

module.exports = {
  webpack: function (config, env) {
    const forkTsCheckerWebpackPlugin = config.plugins.find(
      (plugin) => plugin.constructor.name == 'ForkTsCheckerWebpackPlugin'
    );

    if (forkTsCheckerWebpackPlugin) {
      // 方針2: ForkTsCheckerWebpackPlugin が参照する tsconfig の中身をパスエイリアス設定済みのファイルを参照するように差し替える
      forkTsCheckerWebpackPlugin.tsconfig = path.resolve('./tsconfig.json');
    }

    config.resolve.alias['~'] = path.resolve('./src');

    return config;
  },
  paths: (paths, env) => {
    const overridePaths = {
      ...paths,
      // 方針1: verifyTypeScriptSetup が参照する tsconfig のパスを差し替える
      appTsConfig: path.resolve('./tsconfig-react-scripts.json'),
    };

    return overridePaths;
  },
};

これで dev server が起動できるようになります．

jest を使う時にはもう一工夫必要なので今回の記事の内容を含めたサンプルのリポジトリを作成しました．参考にしていただければと思います．
https://github.com/Yama-Tomo/cra-v4-with-alias-import

■ はじめに

Reactについて記事にしました。
この記事で得る内容は以下の通りです。

・Reactの基礎知識が増える

■ Reactとは何か

Facebookが開発したJavascriptライブラリのこと

■ Reactで何をするのか

WebのUIを作る為にある
→UIは、見た目（view）と、機能（Controller）の2つに分類される
→コンポーネントとは、見た目と機能がセットになったもので、これを作るのがReactである

■補足
・フレームワークではない
・SPAではない（SPA = Single Page Applicationの略で、Webページを移動することなくコンテンツの切り替えを行うこと）

■ Reactの特徴

・Virtual DOM

Reactで管理しているDOMで、通常のDOMはレンダリングで管理するが、Virtual DOMは別に管理するので
効率よくDOM操作を行うことができる

例：ReactのDOM操作

render(
  <div id='hoge'>fuga</div>
)

// renderというメソッドを使い、"hoge"のid属性を持つdiv要素を、fugaという中身で作る

・DOM（Document Object Model）
→インターフェイスで、HTMLにアクセスする窓口の役割を持ち、HTML構造・見た目・コンテンツを変える

例：通常のDOM操作

document.getElementById("hoge").innerText='fuga'

// "hoge"のid属性を持つ要素の中のテキストが'fuga'に変わる
// これだと、ブラウザのレンダリングに影響を与えるので、効率が悪い = パフォーマンスが悪くなる

・差分描画

変更されたVirtual DOMの差分を再描画する
→変更のあった部分だけを書き換えていくので、効率よくWebサイトの見た目を変えることができる

・JSX

Javascript内でHTMLの様に記述できるので、HTML,CSSを使っていた人にも馴染みやすい

react

ReactDOM.render(
  <div className={hoge}/>
    <h1>Hello World!</h1>
  </div>
)

今回は自分が一番苦労したprettierのonSaveが効かない時の対処法を述べていこうと思います。
1
Vscodeの設定画面を開いてEditor:Format On Saveにチェックを入れる。
2
Vscodeの設定画面を開いてEditor:Default Formatterがnullになっていないかチェックをする。
自分の場合はesbnp.prettier-vscodeで通常通りprettierを走らせることができました。

今回はPrettierのonSaveが効かない場合の対処法を書きました。
巷の解決法は1しかなく。自力で解決するのに時間がかかってしまったのでつまづいてる方の手助けになれたら幸いです。

また、この解決方でもprettierを走らせることができない場合はcommit時にprettierを走らせる実装をしてみてはいかがでしょうか？

pakege.json

"lint-staged": {
    "*.{html,css,md,json,yaml}": "prettier --write",
    "*.{js,ts,tsx}": [
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

lint-stagedとhuskyとprettierをnpm installしてpakege.jsonにこのような記述を描いてあげるとcommit時にprettierが走ってくれます。

今回は自分が一番苦労したprettierのonSaveが効かない時の対処法を述べていこうと思います。
1
Vscodeの設定画面を開いてEditor:Format On Saveにチェックを入れる。
2
Vscodeの設定画面を開いてEditor:Default Formatterがnullになっていないかチェックをする。
自分の場合はesbnp.prettier-vscodeで通常通りprettierを走らせることができました。

今回はPrettierのonSaveが効かない場合の対処法を書きました。
巷の解決法は1しかなく。自力で解決するのに時間がかかってしまったのでつまづいてる方の手助けになれたら幸いです。

また、この解決方でもprettierを走らせることができない場合はcommit時にprettierを走らせる実装をしてみてはいかがでしょうか？

pakege.json

"lint-staged": {
    "*.{html,css,md,json,yaml}": "prettier --write",
    "*.{js,ts,tsx}": [
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }

lint-stagedとhuskyとprettierをnpm installしてpakege.jsonにこのような記述を描いてあげるとcommit時にprettierが走ってくれます。