クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【React】React + TypeScript + CSS in JSスターターキットを作る(アプリ作る人に俺はなる!)

Reactの続きです。前回まで、メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたいと思います。アプリ作る人に俺はなる(ための準備編)!それではいきましょう!

【目次】

※参考:前回記事
【React】React RouterでSPAのルーティング設定(下層ページの404対策も) - クモのようにコツコツと

※参考:ReactでWebアプリを作るシリーズまとめ
qiita.com

前回のおさらい

メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現。前回はReact RouterでSPAのルーティング設定。 https://cdn-ak.f.st-hatena.com/images/fotolife/i/idr_zz/20210228/20210228173111.jpg

※参考:【React】React RouterでSPAのルーティング設定(下層ページの404対策も) - クモのようにコツコツと

これまでの経過はこちらを参照

※参考:Reactを習得するためにやったことまとめ(随時更新) - Qiita

既存GitHubリポジトリをクローン

まず「react-from-meta-lang.git」をクローンする。クローン用のURLをコピーして f:id:idr_zz:20210310051121j:plain

※参考:GitHub - ryo-i/react-from-meta-lang

git cloneコマンドでクローン

$ git clone https://github.com/ryo-i/react-from-meta-lang.git

.gitnoreで除外されてない部分だけクローンされる f:id:idr_zz:20210310051227j:plain


フォルダ名を「react-app-started」に打ち替えてフォルダに移動

$ cd react-app-started

npmのパッケージをインストール

$ npm install

「node_module」フォルダが追加された! f:id:idr_zz:20210310051422j:plain


ローカルでアプリを起動

$ npm start

表示された! f:id:idr_zz:20210310051516j:plain

ページタイトルとURLを変更する

ヘッダーのタイトルを変えたい、data.jsonを修正

        "header": {
            "title":"Reactアプリスターターキット",
            "text": "React + TypeScript + CSS in JS環境"
        },

タイトルが変わった! f:id:idr_zz:20210310052602j:plain


URLも変えたい。package.jsonのhomepageはGitHub PagesのURLになってる。

  "homepage": "https://ryo-i.github.io/react-from-meta-lang",

ローカルではディレクトリ名以降が適用されているようだ。

ディレクトリ名を「react-from-meta-lang」から「react-app-started」に打ち替える

  "homepage": "https://ryo-i.github.io/react-app-started",

Control + Cで閉じてから再起動すると

$ npm start

ディレクトリ名が変わった! f:id:idr_zz:20210310053828j:plain

新規リポジトリと紐づける

GitHub上で新規リポジトリ「react-app-started」を作る

※参考:GitHub - ryo-i/react-app-started


次に.gitフォルダの内容を変更したい。

まずVSCodeで.gitフォルダが見えないので表示したい。こちらの記事を参考に…

※参考:Visual Studio Codeで.gitフォルダーを表示させる方法 | mrkmyki@フリーランスブログ

「Files: Exclude」から「.git」を削除すると… f:id:idr_zz:20210310054340j:plain

「.git」フォルダが表示されるようになった! f:id:idr_zz:20210310054524j:plain


「.git」フォルダの中の「config」ファイルを確認

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true
[remote "origin"]
    url = https://github.com/ryo-i/react-from-meta-lang.git
    fetch = +refs/heads/*:refs/remotes/origin/*
[branch "main"]
    remote = origin
    merge = refs/heads/main

remote "origin"に「react-from-meta-lang.git」リポジトリと紐づいた設定が書かれている。


いったん「.git」フォルダごと削除して、再作成

$ git init

「config」の中身は初期値のみになった。

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true

「react-app-started」リポジトリからクローンのURLをコピーし f:id:idr_zz:20210310054932j:plain

※参考:GitHub - ryo-i/react-app-started

git remoteコマンドでローカルフォルダと紐づける

$ git remote add origin https://github.com/ryo-i/react-app-started.git

「config」にremote "origin"設定が追加された!

[remote "origin"]
    url = https://github.com/ryo-i/react-app-started.git
    fetch = +refs/heads/*:refs/remotes/origin/*

「.git」フォルダを削除、再作成しなくても、このurlだけ打ち変えれば良かったのかもしれないが、念のため。


これでGitHubにコミットをプッシュすると

$ git add .
git commit -m "変更内容"
git push origin main

「react-app-started」リポジトリに反映される。

※参考:GitHub - ryo-i/react-app-started

そしてGitHub Pagesにデプロイすると

$ npm run deploy

「react-app-started」のGitHub Pagesに反映される

※参考:helmetで打ち替えテストだよ〜ん

リファクタリング(フッター、CSSベースカラー、ファビコン)

フッターの文字を変更し忘れてた。

「data/data.json」のフッター部分を修正

        "footer": {
             "text":"©️ react-app-started"
         }

react-app-startedに変更


CSSのベースカラーを変更したい。「style/variables.json」を変更。

{
    "variable": {
        "baseColor": "#A63744",
        "textColor": "#333",
        "textColor_w": "#fff",
        "bgColor_g": "#eee",
        "textSize": "14px"
    }
}

baseColorの値を自分のブログと同じ#A63744にしよう。

このbaseColorは変数としていろんな場所に読み込ませるので、ここ一箇所を打ち変えればベースカラーが変わる。

ブラウザ確認、フッターテキストとベースカラーが変わった! f:id:idr_zz:20210310060637j:plain


ファビコンはいったん無効にしたい。「index.html」のファビコン設定部分をコメントアウト

<!--link rel="icon" href="%PUBLIC_URL%/favicon.ico" /-->
<!--link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /-->

画像ファイル名も「_bk」を加えて別名にする f:id:idr_zz:20210310060737j:plain


うーむ、localhostだとなぜか消えないんだが… f:id:idr_zz:20210310060822j:plain

GitHub Pages上では消えたのよで良しとするか。 f:id:idr_zz:20210310060840j:plain


ちなみにファビコン設定は「manifest.json」内にも見受けられるのだが

"icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],

画像のファイル名を変えているため、リンク切れになっているはずなんだよなー。

manifest.json ファイルは、WebExtension API を使う拡張機能に必ず含めなければならない唯一のファイルです。

※参考:manifest.json - Mozilla | MDN

WebExtensionsは、Mozillaが開発を進めているブラウザ拡張機能用API。Chrome用のAPIとの互換性を持っているため、さまざまなブラウザで動作する拡張機能を作成できる。

※参考:WebExtensions:Dev Basics/Keyword - @IT

Helmet(headタグ)の設定をMainコンポーネントに変更

Helmetの設定はAppコンポーネントにしていたが、Mainコンポーネントで設定しよう。(Appコンポーネントだと二元管理になりそうだったので)

AppコンポーネントでインポートしていたHelmetdata.jsonは削除し

// import { Helmet } from "react-helmet";
// import Data from './data/data.json';

AppコンポーネントにはRouterのみをインポート(SwitchRouteは削除)

import { BrowserRouter as Router } from 'react-router-dom'; // Routing

なお、ルーティングに関わる行にはコメント// Routingを付けることにする(今後、シングルページで完結してルーティング設定が不要なケースもあり得るので、後から消しやすいように)。


全体をRouterで囲うだけのシンプルな構成になった♪

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Main />
        <Footer />
      </Router>
    </div>
  );
}

HeaderコンポーネントとMainコンポーネントでルーティング設定をする。Routerを個別のコンポーネントで囲うとパスが紐づかないため、このように全体を囲う形にする。

※参考:【React】React RouterでSPAのルーティング設定(下層ページの404対策も) - クモのようにコツコツと


MainコンポーネントでHelmetをインポートする。

import { Helmet } from "react-helmet";

Helmetのルーティング設定を追記

function Main() {
  return (
    <main>
      <SectionTag>
        <Switch>
          <Route exact path={ homeUrl + "/" }>
            <Helmet>
              <title>{ mainTitle }</title>
              <meta name="description" content={ mainText } />
            </Helmet>
            <h1>{ mainTitle }</h1>
            <p dangerouslySetInnerHTML={{ __html: mainText }}></p>
            <Inner />
          </Route>
          <Route path={ homeUrl + "/other" }>
            <Helmet>
              <title>{ otherTitle }</title>
              <meta name="description" content={ otherText } />
            </Helmet>
            <h1>{ otherTitle }</h1>
            <p dangerouslySetInnerHTML={{ __html: otherText }}></p>
          </Route>
        </Switch>
      </SectionTag>
    </main>
  );
}
  • titleタグにh1タグと共通の値を入れる
  • metaタグ(description)のcontentpタグと共通の値を入れる

値が共通なのでよりシンプルになった!

そして、ネストされた階層のコンポーネントにheadを設定してもブラウザの挙動は変わらなかった♪

リダイレクト設定を変更

別ページでリロードするとメインページにリダイレクトされてしまうことに気づいた。

前回「index.html」に書いたリダイレクト設定とはディレクトリ名が変わったためだった。

if (path && path === '/react-from-meta-lang/other') {
// 後略

ディレクトリ名が/react-from-meta-lang/other'になっている。

※参考:【React】React RouterでSPAのルーティング設定(下層ページの404対策も) - クモのようにコツコツと


ディレクトリ名を/react-app-started/otherに変更する。

      const otherPagePath = '/react-app-started/other';
      const path = sessionStorage.getItem('path');
      console.log(path);

      if (path && path === otherPagePath) {
        sessionStorage.removeItem('path');
        window.history.replaceState(null, null, './other');
      }

変数otherPagePathに切り出して、ディレクトリ名が見えやすいようにした。

これで別ページでリロードしてもメインページ遷移せずに別ページのまま保持されるようになった!


コード(GitHub)

※参考:GitHub - ryo-i/react-app-started

プレビュー(GitHub Pages)

※参考:helmetで打ち替えテストだよ〜ん

最後に

ということで、今回は前回のコードのリファクタリングがメインになりましたが、自分的にはアプリの構成がよりわかりやすくなり、そしてルーティングが不要なアプリの場合にどこを削除すればいいのかも明確になりました。このスターターキットをクローンして、これからは具体的なアプリを作るフェーズに入っていきたいと思います。

まず考えているのは、以前デザインについていろいろしらべてブログ記事にした内容を一画面でわかりやすいようにツール化することです。

※参考:【デザインの基本】メリハリ、縦横比率、画面分割、タイポ、色相環、配色 まとめ - Qiita

最初に着手するのはこちらの「文字ジャンプ率」のツール化です。

※参考:【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは) - クモのようにコツコツと

今後もTone.jsを使った音楽アプリなど、これまでやってきたことをReact環境上で再現していこうと思います。

それではまた!


※参考:ReactでWebアプリを作るシリーズまとめ
qiita.com