Reactの続きです。前回まで、メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現してきました。今回はこれをリファクタリングして、今後ReactでWebアプリを作るためのスターターキットを作りたいと思います。アプリ作る人に俺はなる(ための準備編)!それではいきましょう!
【目次】
- 前回のおさらい
- 既存GitHubリポジトリをクローン
- ページタイトルとURLを変更する
- 新規リポジトリと紐づける
- リファクタリング(フッター、CSSベースカラー、ファビコン)
- Helmet(headタグ)の設定をMainコンポーネントに変更
- リダイレクト設定を変更
- 最後に
※参考:前回記事
【React】React RouterでSPAのルーティング設定(下層ページの404対策も) - クモのようにコツコツと
※参考:ReactでWebアプリを作るシリーズまとめ
qiita.com
前回のおさらい
メタ言語(EJS + Sass(SCSS) + TypeScript)スターターキットの内容をReact + TypeScript + CSS in JS環境で再現。前回はReact RouterでSPAのルーティング設定。
※参考:【React】React RouterでSPAのルーティング設定(下層ページの404対策も) - クモのようにコツコツと
これまでの経過はこちらを参照
※参考:Reactを習得するためにやったことまとめ(随時更新) - Qiita
既存GitHubリポジトリをクローン
まず「react-from-meta-lang.git」をクローンする。クローン用のURLをコピーして
※参考:GitHub - ryo-i/react-from-meta-lang
git clone
コマンドでクローン
$ git clone https://github.com/ryo-i/react-from-meta-lang.git
.gitnoreで除外されてない部分だけクローンされる
フォルダ名を「react-app-started」に打ち替えてフォルダに移動
$ cd react-app-started
npmのパッケージをインストール
$ npm install
「node_module」フォルダが追加された!
ローカルでアプリを起動
$ npm start
表示された!
ページタイトルとURLを変更する
ヘッダーのタイトルを変えたい、data.jsonを修正
"header": { "title":"Reactアプリスターターキット", "text": "React + TypeScript + CSS in JS環境" },
タイトルが変わった!
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
ディレクトリ名が変わった!
新規リポジトリと紐づける
GitHub上で新規リポジトリ「react-app-started」を作る
※参考:GitHub - ryo-i/react-app-started
次に.gitフォルダの内容を変更したい。
まずVSCodeで.gitフォルダが見えないので表示したい。こちらの記事を参考に…
※参考:Visual Studio Codeで.gitフォルダーを表示させる方法 | mrkmyki@フリーランスブログ
「Files: Exclude」から「.git」を削除すると…
「.git」フォルダが表示されるようになった!
「.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をコピーし
※参考: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に反映される
リファクタリング(フッター、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
は変数としていろんな場所に読み込ませるので、ここ一箇所を打ち変えればベースカラーが変わる。
ブラウザ確認、フッターテキストとベースカラーが変わった!
ファビコンはいったん無効にしたい。「index.html」のファビコン設定部分をコメントアウト
<!--link rel="icon" href="%PUBLIC_URL%/favicon.ico" /--> <!--link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /-->
画像ファイル名も「_bk」を加えて別名にする
うーむ、localhostだとなぜか消えないんだが…
GitHub Pages上では消えたのよで良しとするか。
ちなみにファビコン設定は「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コンポーネントでインポートしていたHelmet
とdata.json
は削除し
// import { Helmet } from "react-helmet"; // import Data from './data/data.json';
AppコンポーネントにはRouter
のみをインポート(Switch
とRoute
は削除)
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
)のcontent
にp
タグと共通の値を入れる
値が共通なのでよりシンプルになった!
そして、ネストされた階層のコンポーネントに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)
最後に
ということで、今回は前回のコードのリファクタリングがメインになりましたが、自分的にはアプリの構成がよりわかりやすくなり、そしてルーティングが不要なアプリの場合にどこを削除すればいいのかも明確になりました。このスターターキットをクローンして、これからは具体的なアプリを作るフェーズに入っていきたいと思います。
まず考えているのは、以前デザインについていろいろしらべてブログ記事にした内容を一画面でわかりやすいようにツール化することです。
※参考:【デザインの基本】メリハリ、縦横比率、画面分割、タイポ、色相環、配色 まとめ - Qiita
最初に着手するのはこちらの「文字ジャンプ率」のツール化です。
※参考:【行長・行間・ジャンプ率】タイポグラフィ事始め(適度な箱組みとは) - クモのようにコツコツと
今後もTone.jsを使った音楽アプリなど、これまでやってきたことをReact環境上で再現していこうと思います。
それではまた!
※参考:ReactでWebアプリを作るシリーズまとめ
qiita.com