エンジニアを目指す日常ブログ

日々勉強したことのメモ。独学ですので間違っていたらコメント等で教えてください。

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アプリ作成に向け、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

今回やること

VScodeESLintJavaScript のための静的検証ツール)を使えるようにする。その他、必要な拡張機能をインストールする。

なぜ一度立ち止まってeslintを適用しようかと思ったかというと、アロー関数の文法を間違えてしまい、1時間ほど悩んだためである。

今回やったこと

vscode拡張機能(ESLint)インストール

ここからインストール。

ESLintの拡張機能
ESLintの拡張機能

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

設定完了

コードのエラーを検知するようになった。

ESLintエラー検知
ESLintエラー検知

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

おわりに

しばらくはWebアプリ制作に向け、Reactの勉強を続ける。
気づいたことや勉強したことは適宜まとめていくことにする。

作成したReactアプリを編集・ビルド・ホットリロードする方法メモ

はじめに

今回の記事の目的

とりあえずcreate-react-appを利用して作成したReactアプリに編集を加えてビルドする方法のメモ。

また、都度ビルドするのは大変なので、ホットリロード(アプリに編集を加えると自動で随時ビルドしてくれる)のやりかたをメモ。

前提

  • create-react-appを利用してReactアプリが起動できていること。


create-react-appを利用したアプリ作成方法
tomiko0404.hatenablog.com

アプリを編集する

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で管理する方法メモ

はじめに

今回の記事の目的

事前にローカルで作成したアプリをGitHubにアップロードして管理する方法のメモ。
リポジトリの作成から始めて事前準備を完了させる。

前提

前回作成した、dockerコンテナ上のReactアプリをGit管理する。tomiko0404.hatenablog.com

ローカルにGitのインストール

既にできていたので今回は省略。記事可したい。

鍵の作成とGitHubへの鍵設定

既にできていたので今回は省略。記事可したい。

参考:
サルでもできるCodeCommit ssh接続でgit cloneするまで - Qiita :このあたりの記事をみながら実施したはず。
ソースコードをAWS CodeCommitで管理する方法メモ - エンジニアを目指す日常ブログ:後日AWSのCodeCommitでソースコード管理をしたときの記事。


GitHub上にリポジトリを作成する

リポジトリ作成
リポジトリ作成

ローカル(vagrant)にリポジトリを作成する

今回は、vagrantのほうにgitがインストールされているので、vagrantsshし、プロジェクトのフォルダに移動した状態で操作する。


注)私の環境では、vagrant上にdockerコンテナを立ち上げるようにしているため、vagrantはホストOSの役割を担っている。つまり、ホストOS上でソースコードを管理して、dockerコンテナを立ち上げた際はホストOS上のソースコードでアプリが動作するようになっている。

ホスト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

で確認できる。

git branchとgit remoteの結果
git branchとgit remoteの結果

github上のブランチ名は画面から判別できる。

github上のブランチ名
github上のブランチ名

おわりに

次回はアプリの編集方法をまとめる。
tomiko0404.hatenablog.com

Reactアプリ(または React×TypeScriptアプリ)を作る方法メモ

はじめに

本記事の目的

Reactアプリを作成、起動する。
今回はNodeイメージを使って立ち上げたdockerコンテナ上の中に入って、アプリを作成してみる。

前提

  • dockerコンテナを立ち上げられていること。
  • コンテナ起動に利用したイメージにNode.jsの機能が含まれていること。


コンテナ立ち上げ手順:
tomiko0404.hatenablog.com

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とした。

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で落としてから、管理者権限のPowerShellvagrant 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 

とするとよい。

とりあえずできた!
Reactひな型画面
Reactひな型画面

関連記事

つづき:次回、アプリを編集したときの記事はこちら。

tomiko0404.hatenablog.com

つづき:ソースコードをGit管理した。

tomiko0404.hatenablog.com

vagrant上にdockerコンテナを立ち上げる方法メモ(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をインストールする

以下サイトを参考に実施した。
Vagrantの上にDockerを載せて開発環境を作成する(おそらくこちらを見ながらやったはず)
Ubuntuにdockerをインストールする - Qiita

パラメータファイルの作成

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-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イメージをビルドする

Dockerfiledocker-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

は、バックグラウンドで立ち上げる設定(そのままターミナルで操作できる)。
ちなみに、終了するときは

$ 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内にnodeをインストールする方法のイメージ
dockerコンテナにソースコードをコピーして、docker内にnodeをインストールする方法のイメージ

おわりに

今回はdockerコンテナを起動することができた。

関連記事

この後やったこと

作成したdockerコンテナ上で、Reactアプリを作成する。
tomiko0404.hatenablog.com

dockerのコマンド参考サイト

dockerのコマンドをまとめてくださってたサイト
Dockerイメージとコンテナの削除方法 - Qiita