Reactの続きです。前回はReact + TypeScriptの開発環境を作りました。今回はここにさらにCSS in JSも追加してみます。TypeScript環境でCSS in JSを動かすには「@typesパッケージ」が必要なこともわかりました。また、Git設定でいろいろなエラーに遭遇したので対処した内容も記録しました。それではいきましょう！
【目次】
- 前回のおさらい
- Create React App（TypeScrpt付き）をインストール
- アプリ起動（エラー発生！）
- styled-componentsインストール
- CSS in JSを設定
- エラー発生（@typesがない！）
- @types/styled-componentsをインストール
- ブラウザ確認
- おまけ：GitHubエラー対応（備忘録）
- 最後に
※参考：前回記事
【React】React + TypeScriptの開発環境を作る（デプロイまで） - クモのようにコツコツと
※参考：Reactを習得するためにやったことまとめ
qiita.com
前回のおさらい
React + TypeScriptの開発環境を作った。
※参考：【React】React + TypeScriptの開発環境を作る（デプロイまで） - クモのようにコツコツと
今回はさらにCSS in JSを追加したい。
※参考：【React】styled-componentsでCSS in JSを事始める - クモのようにコツコツと
Create React App（TypeScrpt付き）をインストール
前回と同じ流れになるがまずはTypeScript付きのCreate React Appをインストールする。アプリ名は「react-typescript-css-in-js-test」とする。
$ npx create-react-app react-typescript-css-in-js-test --template typescript
「react-typescript-css-in-js-test」フォルダが作られるので移動する。
$ cd react-typescript-css-in-js-test
アプリ起動（エラー発生！）
ローカル環境でアプリを起動する。
$ npm start
お、エラー発生。。
前回こちらであったbabel-jestのバージョン違いのエラー。
※参考：【React】Create React Appのプロジェクトの作成と実行（エラー対処も） - クモのようにコツコツと
グローバル（ユーザー直下）の下記フォルダを削除。
$ rm -r /Users/(ユーザ名)/node_modules/babel-jest
同じくjestのエラーも発生したので下記フォルダを削除。
$ rm -r /Users/(ユーザ名)/node_modules/jest
リベンジ！
$ npm start
成功！（ロゴがクルクル）
「Control + C」でいったん閉じる。
styled-componentsインストール
CSS in JS、いくつか種類があるが
※参考：ReactのCSS設定方法について調べたこと（className属性、style属性、CSS Modules、CSS in JS、UIフレームワーク） - クモのようにコツコツと
以前こちらで体験した「styled-components」にしてみる。
※参考：【React】styled-componentsでCSS in JSを事始める - クモのようにコツコツと
こちらのコマンド
$ npm install --save styled-components
package.jsonを確認、追加された！
"dependencies": { "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.3", "@testing-library/user-event": "^12.6.2", "@types/jest": "^26.0.20", "@types/node": "^12.19.15", "@types/react": "^16.14.2", "@types/react-dom": "^16.9.10", "react": "^17.0.1", "react-dom": "^17.0.1", "react-scripts": "4.0.1", "styled-components": "^5.2.1", // 追加！ "typescript": "^4.1.3", "web-vitals": "^0.2.4" },
CSS in JSを設定
前回の記事と同じ内容を設定してみる。
※参考：【React】styled-componentsでCSS in JSを事始める - クモのようにコツコツと
まずstyled-componentsをインポート
import styled from 'styled-components';
変数Blockで全体的な設定
const Block = styled.div`
margin: 20px;
padding: 0 20px;
background: #333;
border-radius: 10px;
`;
変数CssInJsTestで基本的な設定
const CssInJsTest = styled.p`
color: red;
`;
変数keyColorで変数、CssInJsTest2でhoverや入れ子タグを設定
const keyColor = 'yellow'; const CssInJsTest2 = styled.p` color: ${keyColor}; &:hover { background: rgba(255,255,255,0.3); } & span { font-weight: bold; } `;
コンポーネントBlock、CssInJsTest、CssInJsTest2を追加
<Block>
<CssInJsTest>
CSS in JSテストですと。
</CssInJsTest>
<CssInJsTest2>
CSS in JS<span>テスト2</span>ですと。
</CssInJsTest2>
</Block>
エラー発生（@typesがない！）
アプリを起動すると…
$ npm start
下記のエラーになった
Could not find a declaration file for module 'styled-components'. '/(パス)/react-typescript-css-in-js-test/node_modules/styled-components/dist/styled-components.cjs.js' implicitly has an 'any' type. Try `npm i --save-dev @types/styled-components` if it exists or add a new declaration (.d.ts) file containing `declare module 'styled-components';`
モジュール 'styled-components'の宣言ファイルが見つかりませんでした。 '/(パス)/react-typescript-css-in-js-test/node_modules/styled-components/dist/styled-components.cjs.js'は暗黙的に 'any'型を持っています。
npm i --save-dev @ types / styled-componentsが存在する場合は試してみるか、declare module'styled-components ';を含む新しい宣言（.d.ts）ファイルを追加してください。
どうやら「styled-components」をTypeScript環境で使うには型の設定などがないからエラーになるようだ。「@types/styled-components」が必要とのこと。
@typesパッケージとはJSのライブラリなどをTypeScript環境で動くようにしてくれるパッケージ類のようだ。
※参考：JavaScriptの資産と@types | Revised Revised TypeScript in Definitelyland
※参考：@types パッケージ (DefinitelyTyped) - TypeScript Deep Dive 日本語版
そういえば先ほど見たpackage.jsonでも@types/react、@types/react-domなどのパッケージがすでにいくつか入っていた！
@typesパッケージの有無はこちらのページで調べられるようだ。
※参考：TypeScript: Search for typed packages
@types/styled-componentsをインストール
「@types/styled-components」が必要とのことでインストールしてみる。
$ npm i --save-dev @types/styled-components
※参考：@types/styled-components - npm
package.jsonを確認、追加された！
"devDependencies": { "@types/styled-components": "^5.1.7" }
ブラウザ確認
アプリを起動すると
npm start
やた！表示された！
hoverも効いている
ソース（GitHub） ※参考：GitHub - ryo-i/react-typescript-css-in-js-test
プレビュー（GitHub Pages）
※参考：React App
おまけ：GitHubエラー対応（備忘録）
今回、GitHub上に作ったリポジトリとアプリのフォルダをgit remoteで紐付けたところ
$ git remote add origin https://github.com/ryo-i/react-typescript-css-in-js-test.git
※参考：GitHub - ryo-i/react-typescript-css-in-js-test
いろいろなエラーが起こり四苦八苦した、、
下記の記事に助けられましたmm
git statusで変更ファイルを確認しようとしたところ
$ git status
untracked fileが表示された。無関係な別階層のフォルダ名だった。
※参考：untracked fileを削除するためにはgit cleanを使う - Qiita
その階層を調べると「.git/」ファイルがあった。間違えてここでGit設定をしていたようだ。削除する。
次にGitHubにプッシュしたときにもエラー発生
$ git push origin main
ブランチの状態を確認するとデフォルトブランチがmainじゃなくてmasterになっていた。
$ git branch
こちらの記事などを参考にmasterからmainに変更しようとしたが、
※参考：GitHubの既存プロジェクトもデフォルトブランチをmainに
※参考：Gitのローカルリポジトリをmasterからmainに変更する方法 - Qiita
「gitがバージョンアップされない」→バージョンアップ→「パスが通ってない」などいろいろ起こる…
ちなみにGitHubのデフォルトブランチ名がmasterからmainになったのはBLM運動を考慮してとのこと
※参考：ギットハブ、「マスター」の用語を変更--BLM運動がきっかけに - ZDNet Japan
次にデフォルトブランチ名をmasterからmainに改名する方法を試す。
git branch -m master main
※参考：Git(GitHub)のデフォルトブランチを改名する - Qiita
こちらはうまくいったようだ！
リモートにプッシュしようとすると「originがすでに存在しています」というエラー。「origin」を削除する。
※参考：fatal: remote origin already exists. と表示された場合の解決法 - Qiita
さらにリモートブランチをローカルブランチ に強制一致させる。
$ git push -f origin master
これでローカルとリモートの一致に成功した！
※参考：GitHubにpushする時にerror: failed to push some refs と表示されてpushできない時 - Qiita
ちなみに逆もできる。ローカルブランチ をリモートブランチ に強制一致させる方法。
$ git fetch origin
git reset --hard origin/main
ローカルの状態がわけわからなかったこの方法も有効かと♪
※参考：gitでリモートのブランチにローカルを強制一致させたい時 - Qiita
最後に
ということでReact + TypeScript + CSS in JSの環境を作れました。TypeScript環境にライブラリ等を追加するには@Typeパッケージが必要ということがわかりました。
また、GitHubとの同期時にエラーが次々と起こり、ネット上の先人達の記事に助けられました。自分もこうやって誰かの問題解決に役立つべく情報を発信していきたいと改めて感じました。
今後やりたいこと
- この環境にJSのライブラリを追加してみる
- この環境でFirebaseのDBにアクセスしてみる
それではまた！
※参考：Reactを習得するためにやったことまとめ
qiita.com
