ReactにおけるCSSの設定方法(styled-components)
はじめに
今回の記事の目的
React機能の勉強メモ。Reactで作成するアプリにCSSを適用する方法のメモ。
ReactにCSSを設定する方法メモ① styled-components
方法は3つほどあるらしいが、1番わかりやすい方法をいったんメモ。
インストールするパッケージ
styled-components
をインストールする。
npm install styled-components
package.json
には
"dependencies": { ・・・ "styled-components": "^5.3.1", },
このように記述が追加された。package-lock.json
にも、
"babel-plugin-styled-components": { ・・・ }
という記述が追加されていた。
アプリ上でインポートする。
.jsx
ファイルの上部に、
import styled from "styled-components";
を記載する。
コードの書き方
通常(CSS適用前)
まず、通常の書き方(styled-componentsを使わない)だと
export const Input = (props) => { return <input type="text"} />; };
とか
export const Header = () => { return ( <header> <Link to="/">HOME</Link> </header> ); };
となる。
styled-componentsを利用した書き方(CSS適用後)
1つめの例は
// importする import styled from "styled-components"; // 元のコードの<input>を<SInput>(自分で命名)に書き換える export const Input = (props) => { return <SInput type="text"} />; }; // styled.input と記載することでinputのスタイルにCSS設定を追加できる const SInput = styled.input` border-radius: 9999px; outline: none; `;
2つめの例は
import styled from "styled-components"; export const Header = () => { return ( <SHeader> <Link to="/">HOME</Link> </SHeader> ); }; const SHeader = styled.header` background-color: #11999e; `;
となる。
別で作ったコンポーネントに追加設定をする方法
先ほどはstyled.~
の使い方だったが今度はstyled(~)
の使い方。
もともとのHTMLの部品をもとに設定したい場合はstyled.~
を利用し、既存のコンポーネントの場合はstyled(~)
を利用する方針でよさそう。
こんな形で、ベースとなるbuttonのコンポーネントを作っておけば、
import styled from "styled-components"; export const BaseButton = styled.button` border: none; outline: none; border-radius: 9999px; &:hover { cursor: pointer; opacity: 0.8; } `;
別のコンポーネントで、styled(BaseButton)
の記載で設定CSSを呼んでくることができる。あとは個別の設定だけ上書きできる。
export const myButton = (props) => { const { children } = props; return <SButton>{children}</SButton>; }; // BaseButtonにCSSを上書きする書き方 const SButton = styled(BaseButton)` background-color: #eee; `;
Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版 | Udemy
おわりに
Reactアプリ作成に向け、CSSの適用方法を学ぶことができた。
React(Java Script)アロー関数の文法と、ハマった罠
はじめに
今回の記事の目的
アロー関数は、無名関数を簡単に記載できる便利な記法だが、省略できるパターンが多いためバグを引き起こし、原因究明に時間がかかってしまった。
同じ罠にはまらないためにメモ。
アロー関数の書き方
基本の書き方
const func1 = (str) => { return str; };
引数が1つのときは( )
を省略できる。
const func1 = str => { return str; };
中の処理が1行で終わる場合は、return
と{ }
を省略できる。
const func1 = str => str; };
はまった罠
React講座勉強中に書いてしまったコード
const func = ( 引数 ) => { <Switch> 処理 </Switch> };
コンパイルは通ってしまい、func
に何も返却されないという動きになってしまった。
こう書いてみると単純なミスだが、引数も複雑で、処理も複雑なので、混乱した。
正しく修正したコード
ちゃんとreturn文を書く。
const func = ( 引数 ) => { return ( <Switch> 処理 </Switch> ); };
または、return
と{ }
を省略して
const func = ( 引数 ) => (
<Switch>
処理
</Switch>
);
でもよい。
VScodeでReact開発をするためにESLintをインストールする方法メモと、VScodeに入れた拡張機能
はじめに
ReactでWebアプリを作成する。ついでにdockerの概念を理解する。WebアプリをAWS Amplifyを利用して公開する。
docker上に作ったReactアプリを編集し、ホットリロードする。
tomiko0404.hatenablog.com
VScodeでESLint(JavaScript のための静的検証ツール)を使えるようにする。その他、必要な拡張機能をインストールする。
なぜ一度立ち止まってeslintを適用しようかと思ったかというと、アロー関数の文法を間違えてしまい、1時間ほど悩んだためである。
今回やったこと
ESLintインストール
まずコンテナに入り、
$ sudo docker exec -u node -it front /bin/bash -l
ESLintをインストールする。
npm install eslint
基本的に参考サイトを見ながらやっていたが、-g
(グローバルインストールのオプション)を入れるとうまくいかなかったので、ローカルにインストールするコマンドにした。
ESLintの利用方法で参考にしたサイト
ESLint 最初の一歩 - Qiita
package.jsonの状態
結果的にpackage.json
はこうなった。
{ "name": "react", "version": "1.0.0", "description": "React example starter project", "keywords": [ "react", "starter" ], "main": "src/index.js", "dependencies": { "eslint": "^7.32.0", "react": "17.0.2", "react-dom": "17.0.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.0" }, "devDependencies": { "@babel/runtime": "7.13.8", "typescript": "4.1.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }
コンテナイメージの再作成
理由はわからないが、すぐにうまく動かなかったので、VSCodeの再起動と、コンテナイメージの再作成を実施。
$ sudo docker-compose down $ sudo docker-compose build $ sudo docker images $ sudo docker-compose up -d
docker操作の詳細は過去にまとめている。
tomiko0404.hatenablog.com
設定完了
コードのエラーを検知するようになった。
ReactをインポートしていないことによるESLintエラーを無視する設定
エラー検知してくれるようになったが、各ファイルでReactをインポートしていないことによるエラーが出てしまうようになった。調べたところ、かつてはjsxファイルでimport React from 'react';
をインポートしていないとエラーとなっていたらしい。今はReactは自動でインポートしてくれるため、この記載は不要。
そこで、ESLintにはこのエラーを無視してもらう必要がある。
.eslintrc.json
ファイルの中に、記載を追加する。
"rules": { "react/react-in-jsx-scope": "off" }
Reactインポートエラー無視の参考サイト
React v17 create-react-app で作ったアプリで ESLint に怒られまくった - かもメモ
'
ではなく"
で囲わないといけないようだった。
その他、VScodeに入れた拡張機能メモ
- Prettier - Code formatter(
Prettier - Code formatter - Visual Studio Marketplace
)
`Shift+Alt+f`でコードを整形してくれる。
- Bracket Pair Colorizer 2(
Bracket Pair Colorizer 2 - Visual Studio Marketplace
)
- JavaScript (ES6) code snippets(JavaScript (ES6) code snippets - Visual Studio Marketplace)
おわりに
しばらくはWebアプリ制作に向け、Reactの勉強を続ける。
気づいたことや勉強したことは適宜まとめていくことにする。
作成したReactアプリを編集・ビルド・ホットリロードする方法メモ
はじめに
今回の記事の目的
とりあえずcreate-react-appを利用して作成したReactアプリに編集を加えてビルドする方法のメモ。
また、都度ビルドするのは大変なので、ホットリロード(アプリに編集を加えると自動で随時ビルドしてくれる)のやりかたをメモ。
アプリを編集する
vscodeでアプリを編集して保存する。
この時点ではlocalhost:8000
の表示は変わらない。
Reactアプリケーションをビルドする方法(通常)
手動ビルド
いったん、ctrl+Cでアプリケーションを停止してから
npm run build
を実行する。
アプリ再開
PORT=8000 npm start
Reactアプリケーションをビルドする方法(ホットリロード)
さすがに面倒なので、ソースを監視して自動でビルドしてくれるよう設定する。
.envファイルの準備
.envファイルとは、環境変数を設定するためのファイルらしい。
npm startするときに見てくれるファイル。
ファイル名は.env
.envファイルの記載内容
PORT = 8000 CHOKIDAR_USEPOLLING = TRUE
2行目がホットリロードの設定。PORTの指定もついでに実施する。
.envファイルはpackage.jsonファイルと同じ場所に設置した。
アプリ再開(.envファイル設定後)
この状態でnpm start
すると、ソースコードの変更を検知して自動でビルドしてくれるようになった。
おわりに
次回は下準備の続きとして、VSCodeにESLintを導入する。
tomiko0404.hatenablog.com
ソースコードをGitHubで管理する方法メモ
はじめに
前提
前回作成した、dockerコンテナ上のReactアプリをGit管理する。tomiko0404.hatenablog.com
- はじめに
- ローカルにGitのインストール
- 鍵の作成とGitHubへの鍵設定
- GitHub上にリポジトリを作成する
- ローカル(vagrant)にリポジトリを作成する
- リモートリポジトリを作成する
- ローカルにある資材をステージングする
- ローカルにある資材をコミットする
- ブランチ名を確認・変更する
- GitHub側のリポジトリ(リモートリポジトリ)にpushする
- おわりに
ローカルにGitのインストール
既にできていたので今回は省略。記事可したい。鍵の作成とGitHubへの鍵設定
既にできていたので今回は省略。記事可したい。参考:
■サルでもできるCodeCommit ssh接続でgit cloneするまで - Qiita :このあたりの記事をみながら実施したはず。
■ソースコードをAWS CodeCommitで管理する方法メモ - エンジニアを目指す日常ブログ:後日AWSのCodeCommitでソースコード管理をしたときの記事。
GitHub上にリポジトリを作成する
ローカル(vagrant)にリポジトリを作成する
今回は、vagrantのほうにgitがインストールされているので、vagrantにsshし、プロジェクトのフォルダに移動した状態で操作する。
注)私の環境では、vagrant上にdockerコンテナを立ち上げるようにしているため、vagrantはホストOSの役割を担っている。つまり、ホストOS上でソースコードを管理して、dockerコンテナを立ち上げた際はホストOS上のソースコードでアプリが動作するようになっている。
【図解】Dockerの全体像を理解する -前編- - Qiita
$ git init
リモートリポジトリを作成する
$ git remote add origin git@github.com:~~~~/~~~~.git
でリモートリポジトリを作成する。
このコマンドは、GitHubでリポジトリを作成すると、チュートリアルとして表示されるので、コピペすればよい。
$ git remote add [リモートリポジトリの呼び名] [リモートリポジトリのURL]
という文法。ローカルと、URL先のリポジトリを連携するイメージと思われます。
なので、
$ git remote rm [リモートリポジトリの呼び名]
でリモートリポジトリを削除しても、GitHub側には影響を与えない。
ローカルにある資材をステージングする
$ git add .
.
はリポジトリ内のすべてのファイルを表す。ただし、.gitignore
に指定されているファイルを除く。.gitignore
ファイルは、前回npx create-react-app
をしたときにnode.js側が自動で作ってくれていた。もしgit add .
に時間がかかる場合は、ignoreすべきファイルをaddしていないか確認が必要。
ローカルにある資材をコミットする
$ git commit -m "initial commit"
ブランチ名を確認・変更する
GitHubのマスターブランチはmain
という名前になっている。ローカル側のブランチ名がmaster
になっている場合、不整合が生じてしまうため、ここで確認、変更しておく。
$ git branch * master $ git branch -M main
GitHub側のリポジトリ(リモートリポジトリ)にpushする
$ git push origin main
これでローカルの資材とGitHub上の資材が一致した。
git push
コマンドの意味は、
ローカルブランチ「main」を、リモートレポジトリ「origin」上の同名のブランチに反映する
という意味。
pushコマンドの意味の参考サイト
git push コマンドの使い方と、主要オプションまとめ | WWWクリエイターズ
パスワードについて
GitHubにpushしようとすると、毎回vagrantのパスワードを聞かれるが、仕組みがわかっていない。勉強し次第追記予定。
Gitにパスワード認証なしでPushするまでの手順 | Enjoy IT Life
ブランチ名について
もともと、リモートリポジトリにpushするコマンドは以下だと思っていたのだがうまくいかなかった。
$ git push origin master
デフォルトのブランチ名がmaster
からmain
に変更されたため、うまくいかなかった模様。
$ git branch
と
$ git remote
で確認できる。
github上のブランチ名は画面から判別できる。
おわりに
次回はアプリの編集方法をまとめる。tomiko0404.hatenablog.com
Reactアプリ(または React×TypeScriptアプリ)を作る方法メモ
はじめに
本記事の目的
Reactアプリを作成、起動する。
今回はNodeイメージを使って立ち上げたdockerコンテナ上の中に入って、アプリを作成してみる。
前提
- dockerコンテナを立ち上げられていること。
- コンテナ起動に利用したイメージにNode.jsの機能が含まれていること。
コンテナ立ち上げ手順:
tomiko0404.hatenablog.com
dockerを利用しない場合
コンテナ上ではなくローカル環境で実施しても良い。
ローカル環境で実施する場合は、
- Node.js
- npm(Node.jsのパッケージ管理ツール)
がインストールされていること。
Node.jsインストール手順
npmインストール手順
上記手順実施後以下コマンドを実施。$ sudo npm install -g npm
create-react-appのインストール
Reactアプリの作成・起動
docker上で以下を実行する。
Reactアプリ作成(基本的なひな型を作成してくれる。)
$ npx create-react-app [アプリ名]
アプリ名には大文字が使えないため注意。
このとき、`create-react-app`がインストールされていない場合は自動でインストールされる。
React×TypeScriptアプリを作成したい場合
TypeScriptにしたい場合は以下コマンド。
$ npx create-react-app [アプリ名] --template typescript
起動する
$ cd [アプリ名] $ npm start You can now view [アプリ名] in the browser. Local: http://localhost:3000 On Your Network: http://XXX.XXX.XXXX.XXX:3000 Note that the development build is not optimized. To create a production build, use yarn build.
[アプリ名]
のところは自分で作成したいアプリ名とする。今回はamplifyapp
とした。
モジュール 1 - AWS で React アプリケーションを構築する
symbolic linkが作成できないエラー
symbolic linkが作れないエラーが出るときがある。
An unexpected error occurred: "EPROTO: protocol error, symlink '../../../mime/cli.js' -> '/home/vagrant/workspace/backend-practice/front_react_back_node/node_modules/send/node_modules/.bin/mime'".
これは、WindowsPC上にVagrantを立ち上げて、Vagrant上でnodeをインストールしようとすると起きることがあるエラーらしい。
以下サイトに従って対処。
参考資料:
Windowsホスト上のVagrantのシンボリックリンクフォルダでyarn installできない問題の解決 - Qiita
解決案としてはいくつかある。
PowerShell管理者権限の確認
そもそも、コマンドの実行をPowerShellの管理者権限で実行できているかを確認する。できていなければ、一度vagrant halt
で落としてから、管理者権限のPowerShellでvagrant up
からやり直す。
管理者権限での実行方法はこちら。
tomiko0404.hatenablog.com
オプションをつける
それで解決しなければ、
--no-bin-links
のオプションをつける方法。
Vagrantの設定変更
それでもダメであれば、Vargantfileに以下の文を追加した上で、
config.vm.provider :virtualbox do |vb| vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/.","1"] end
管理者権限のあるPowerShellで以下を実行する方法がありそう。
$ fsutil behavior set SymlinkEvaluation L2L:1 R2R:1 L2R:1 R2L:1 $ fsutil behavior query symlinkevaluation
Vargantとローカルの共有フォルダ利用をやめる
何をやってもダメな場合は、ローカルと共有しているフォルダ上で作業をするのを辞め、別フォルダ(ローカルと共有していないフォルダ)で作業する(作業完了後にフォルダ移動は可)。
ローカルからアプリを参照する
ポートフォワーディングを利用することで、ローカルブラウザでlocalhost:8000
を指定することでdocker上のlocalhost:8000を参照できる。
ポートフォワーディングの設定箇所
- Vagrantfileの中に
config.vm.network "forwarded_port", guest: 8000, host: 8000
こちらの記載を入れてあることで、ローカルの8000ポートと、vagrantの8000ポートを接続できている。
- また、docker-compose.ymlの中に
ports: - 8000:8000
の記載があることで、vagrantの8000ポートとdockerの8000ポートを接続できている。
ここでは、8000ポートでReactアプリを立ち上げる必要があるため、起動のコマンドを
PORT=8000 npm start
とするとよい。
とりあえずできた!
vagrant上にdockerコンテナを立ち上げる方法メモ(docker-compose利用)
はじめに
この後追加で勉強したので以下記事に整理し直しました。(2021/10/31追記)
tomiko0404.hatenablog.com
本記事の目的
Vagrant上にdockerコンテナを立ち上げる。
Node.jsのアプリを作りたいので、ベースはNode.jsとする。
また、docker-composeというツールも利用する。
vagrantを立ち上げる
vagrantの環境構築は既に実施したので、できている前提とする。
(別途、復習しながらメモする予定。。。)
Powershell(Window標準)を管理者権限で立ち上げる
Vagrantfileのあるフォルダに移動する
PS C:\WINDOWS\system32> cd C:\Users\User\vagrant\ubuntu64_18
vagrantの起動とssh接続
> vagrant up > vagrant ssh
ちなみに、vagrantのシャットダウンは
> vagrant halt
(メモ) Vagrantfileの中身
Vagrant.configure("2") do |config| config.vm.box = "ubuntu/bionic64" config.vm.network "forwarded_port", guest: 8000, host: 8000 config.vm.network "forwarded_port", guest: 3000, host: 3000 config.vm.synced_folder "./workspace", "/home/vagrant/workspace" config.vm.provider :virtualbox do |vb| vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/home/vagrant/workspace","1"] end config.vm.provider "virtualbox" do |vb| vb.memory = "1024" end end
workspaceフォルダに移動し、作りたいアプリのフォルダを作る
ローカルのworkspaceをvagrant上のworkspaceと共有する設定もできている前提。(別途、復習しながらメモする予定。。。)
$ cd workspace $ mkdir /aws-amplify-app
dockerイメージの作成・dockerコンテナの起動
dockerをインストールする
パラメータファイルの作成
docker-compose.yml とDockerfileを作成してaws-amplify-app内のdockerフォルダに入れる。
Dockerfileとは?
Dockerイメージファイルを作るときに元ネタとなる設定値を記載するファイル。
イメージをbuildするときに実行するスクリプト。
FROM node:14.15.4-slim RUN apt-get update && apt-get install -y locales \ && locale-gen en_US.UTF-8 \ && localedef -i en_US -f UTF-8 en_US.UTF-8 \ && echo "export LC_ALL=en_US.UTF-8" >> ~/.bashrc \ && ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime RUN apt-get install -y \ wget \ curl \ && apt-get clean \ && rm -rf /var/lib/apt/lists/*
このうち以下の部分が、イメージの種類を表している。
FROM node:14.15.4-slim
認定Dockerイメージ一覧 of オープンソースソフトウェアの悩みを解決する ossplaza.com
他は日本語にする設定など。
docker-compose.ymlとは?
各種docker-composeコマンドを実行するときにつけるオプションを省略するために、設定ファイルとして外出ししたもの。
version: '3' networks: react_net: driver: bridge services: front: build: ./ image: react00 container_name: front tty: true volumes: - ../:/app working_dir: "/app" ports: - 8000:8000 networks: - react_net
dockerイメージをビルドする
Dockerfile
とdocker-compose.yml
が置いてあるフォルダで実行する。
$ sudo docker-compose build
ビルドしたイメージを確認する
$ sudo docker images REPOSITORY TAG IMAGE ID CREATED SIZE react00 latest 812778fdc1ef 2 weeks ago 216MB node 14.15.4-slim 2f75d89d8162 6 months ago 167MB
同じdocker-compose.ymlファイルを使い、"react01"をbuildすると、IMAGE IDが同じになるのはなぜ?
コンテナを立ち上げる
docker-compose.ymlファイルが存在するフォルダでコマンドを実行する。
$ sudo docker-compose up -d
d
は、バックグラウンドで立ち上げる設定(そのままターミナルで操作できる)。
ちなみに、終了するときは
$ sudo docker-compose down
コンテナの立ち上げ状況確認
$ sudo docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 31b9d55b373f react00 "docker-entrypoint.s…" 5 minutes ago Up 5 minutes 0.0.0.0:8000->8000/tcp, :::8000->8000/tcp front
コンテナのターミナルを開く
docker上での操作は基本的にdocker exec
で実施するが、毎回書くのは大変なので以下コマンドでターミナルを立ち上げることができる。(イメージ)
$ sudo docker exec -u node -it front /bin/bash -l node@31b9d55b373f:/app$ ls amplifyapp docker
execコマンドのフォーマットはこちらのよう。
docker exec [オプション] [コンテナ] [コマンド] [引数...]
-u node
はユーザの指定
-it
は対話型で開く際のオプション(よくわかってない)。
front
は自分でつけたコンテナの名前。
/bin/bash -l
がコマンド。
【補足】今回のフォルダ構成とソースコードの場所について
本記事のやりかたは、ローカル(vagrant)とdockerコンテナでフォルダを共有し、ソースコードや必要なモジュールは共有フォルダ内に配置する構成としている。
具体的にはdocker-compose.ymlの以下の部分で、
volumes: - ../:/app working_dir: "/app"
vagrantのプロジェクトフォルダとdockerの/app
フォルダを共有している。また、dockerのworking_dirを/app
としているので、dockerに入ってnpm start
すればプロジェクトフォルダ内のアプリが起動できる。
以下はあくまで個人的イメージ。
一方で実際の開発で利用する際は、フォルダの共有ではなく、dockerコンテナにソースコードをコピーして、docker内にnodeをインストールする方法のほうがよさそう。
tomiko0404.hatenablog.com
以下はあくまで個人的イメージ。
おわりに
今回はdockerコンテナを起動することができた。
関連記事
この後やったこと
作成したdockerコンテナ上で、Reactアプリを作成する。
tomiko0404.hatenablog.com
dockerのコマンド参考サイト
Dockerイメージとコンテナの削除方法 - Qiita