導入 まず、前提としてstyled-componentsをインストールしていることとします。もししていない場合は、下記でインストールしましょう。 yarn yarn add styled-components npmを使うなら下記コマンドを実行して、インストールします。 npm npm install styled-media-query yarnを使うなら下記コマンドを実行します。 yarn yarn add styled-media-query これでインストールは完了です。 実装 実装は下記のようにできます。(公式より引用) styled-componentsで通常通り、backgroud-colorを黒で指定し、styled-media-queryで各画面サイズごとにスタイルをそれぞれ適用しています。 styled-media-query import styled from "styled-components"; // You need this as well import media from "styled-media-query"; const Box = styled.div` background: black; ${media.lessThan("medium")` /* screen width is less than 768px (medium) */ background: red; `} ${media.between("medium", "large")` /* screen width is between 768px (medium) and 1170px (large) */ background: green; `} ${media.greaterThan("large")` /* screen width is greater than 1170px (large) */ background: blue; `} `; ちなみに、それぞれのブレイクポイントのデフォルトサイズは下記のように設定されています。 このサイズはカスタム可能です(方法については今回割愛) size { huge: '1440px', large: '1170px', medium: '768px', small: '450px', } lessThan 指定されたブレークポイントまたはサイズよりも小さい画面サイズのスタイルを追加できます。 lessThan media.lessThan('medium')` /* styles ... */ ` greaterThan このメソッドでは、指定されたブレークポイントまたはサイズより大きい画面サイズのスタイルを追加できます。 greaterThan media.greaterThan('small')` /* styles ... */ ` between このメソッドでは、指定された2つのブレークポイントまたはサイズの間に画面サイズのスタイルを追加できます。 between media.between('small', 'medium')` /* styles ... */ ` 参考

Reactのアプリをコンテナ化して、 Development ➡　Productionのワークフローを学んでいる自分の備忘録になります。 Reactのアプリを作る時に必要なコマンド早見表 コマンド 何をするか npm run start developmentのためのサーバーをスタートさせる npm run test プロジェクトに関するテストを実行する npm run build プロダクションバージョンのアプリを構築する ワークフロー developmentのサーバーを立ち上げる Dockerfile.dev　ファイルからイメージをbuildしてコンテナを実行してみた。 ファイルは以下のように書いている コンテナを実行する際に、CMDに書かれているコマンドが実行され無事にサーバーが立ち上がった。 npm run testで上書きして実行する docker run <ImageID> npm run test で先ほどの、CMDのコマンドを上書きして実行する 下のスクショがnpm run testコマンドの実行結果 ただ、これだとターミナルの続きにコマンドを打つことができない docker run -it <ImageID> npm run test なので上記のコマンドのように　-itオプションを付けて実行するとよい ctrl + C でこのテストから抜けることができる またエンターキーを押すと、テストが再度実行される 問題点 上記の方法でtestコマンドを実行することができるが、testファイルに変更が加えられた時、その更新が反映されないという問題点がある。 例えば、App.test.jsのソースコードのtestの部分をコピペして2回のテストをさせるように変更しても、その変更は反映されず、相変わらず、1回だけしかテストが実行されなかった。 なぜならば、Containerのイメージを作る時にはその時点でのファイルシステムのスナップショットが撮られ、その時点のイメージを基にContainerが作られるから では、どのようにしたらtestファイルの更新をイメージをrebuild せずに反映させることができるか？ 解決方法を下記に書いていく 解決方法① docker exec -it <ImageID> npm run test 上記のコマンドを使うことで、既存の実行中のContainerを使いながら、testを実行する事ができる バインドマウントをさせてContainerを実行 上記のように書いたdocker-compose ファイルをupする バインドマウントしたContainerが実行中になる 既にバインドマウントしているContainerにさらにコマンドを実行させるために docker exec -it <ImageID> npm run test を実行する イメージをrebuildしなくても、testファイルの更新が反映されるようになった。 testファイルの更新を即時に反映させることには成功したが、バインドマウントしているContainerを実行して、execコマンドでそのContainerに新たなコマンドを実行させることが少し面倒 ということで、解決方法②により良い解決方法を書いていく 解決方法② 解決方法②は、docker-composeファイルに、新たにtestを実行するだけのアプリをつけ足す方法だ。 これでバインドマウントしたtestを実行するだけのContainerができるので、App.test.jsファイルに変更が加わった時に、即時にその変更がブラウザーに反映される(ただし、Windowsではこの方法は使えない) まとめ 今回の記事では ①developmentのサーバーを立ち上げ ②testを実行する ところまで書いたので、次は ③production用のサーバーを立ち上げる ことについて書いていく

create-react-app で React + Redux + Typescript のアプリのひな形を作るときのメモ 環境は WSL2 + VSCode 追加で行う設定は以下 1. Prettier の設定を追加 2. import に絶対パスを使う create-react-app practice のところに自分のアプリ名を入れる npx create-react-app practice --template redux-typescript cd practice Prettier Prettierを追加 yarn add -D prettier Prettierの設定を行う 設定は .prettierrc ではなく package.json に追加するのが好きなので、全部 package.json に書く。 あと VSCode とか使っていない人がチームにいたりするので、scripts にコマンドを追加しておく。 package.json { "scripts": { "format": "prettier --write src/**/*.{ts,tsx}" }, "prettier": { "arrowParens": "avoid", "printWidth": 120, "trailingComma": "es5", "tabWidth": 2, "semi": false, "singleQuote": true } } import の絶対パス指定 https://create-react-app.dev/docs/importing-a-component/#absolute-imports を参考に設定。 "include": ["src"] は最初から追加されていた tsconfig.json { "compilerOptions": { "baseUrl": "src" } }

概要 とりあえず、window.location.pathname,searchを取得したい とりあえず window.location.pathname を記述しても取得は可能 だが、きっとスマートな方法があるに違いないと思っている 2021年時点でのReact初学者 調べると、どうやらReactは歴史があり、時期によって推奨される記述方法やモジュールが変遷しているように感じている （いつか古くなると思いつつ）一応取得できたので、メモしておこうと思います。 手順 実行環境 Windows10 + WSL2 + Ubuntu 20.04 + Node.js 16 $ cat /etc/issue Ubuntu 20.04.2 LTS \n \l $ node --version v16.5.0 準備 Reactアプリケーション router-sample を作成し、React Routerモジュールをインストールします $ npm install -g create-react-app $ npx create-react-app router-sample $ cd router-sample $ npm install react-router-dom モジュール類のバージョン確認 $ npm list router-sample@0.1.0 (snip)../router-sample ├── @testing-library/jest-dom@5.14.1 ├── @testing-library/react@11.2.7 ├── @testing-library/user-event@12.8.3 ├── bindings@1.5.0 extraneous ├── file-uri-to-path@1.0.0 extraneous ├── nan@2.14.2 extraneous ├── react-dom@17.0.2 ├── react-router-dom@5.2.0 ├── react-scripts@4.0.3 ├── react@17.0.2 └── web-vitals@1.1.2 サンプルソース src/App.js import React from "react"; import { BrowserRouter as Router, Route, useLocation } from "react-router-dom"; export default function App() { return ( <Router> <Route> <Sample /> </Route> </Router> ); } function Sample() { const { pathname, search } = useLocation(); return ( <> <p><a href="/test/link?a=1&b=2">test link1</a></p> <p><a href="/go/?a=xyz">test link2</a></p> <p>location.pathname:{pathname}</p> <p>location.search:{search}</p> <p>window.location.pathname:{window.location.pathname}</p> <p>window.location.search:{window.location.search}</p> </> ) } 実行 $ npm start Webブラウザで確認します test link1 、 test link2 それぞれをクリックして、pathname、searchの値が変化することを確認します メモ 使える場所 <Router> <Route> で囲まれた部分で useLocation() を使用できるようです。そうでない場合は下記のようなエラーが発生します。 useParams() や useHistory() も同様です。 TypeError: Cannot read property 'location' of undefined 本来の使い方？ <Route path="/funcname"> のように記述して、パスによって要素を切り替えて利用するのが本来かもしれません。

SSG 想定で書いてます プリレンダのタイミングで 1 回だけファイルを読み込んで、ファイルの中身をレンダリング時に反映するといったことを想定してます プリレンダ時には反映されないうえ、力技感が否めないので、もっといい方法ないかな… 確認環境 Env Ver next 11.0.1 react 17.0.1 node 14.15.5 typescript 4.3.4 サンプルコード クライアント側では一生使わないデータが Context に保持されるのでなんとも言えない気分になります index.tsx import { useContext } from 'react'; import { ExContext } from '../Context'; import { DataYaml, getYamlData } from '../Data'; const IndexPage = ({ dataYaml }: { dataYaml: DataYaml }) => { const ctx = useContext(ExContext); // ContextにYAMLの中身を突っ込む ctx.dataYaml = dataYaml; return <p />; }; export const getStaticProps = async () => { // YAMLファイルをロード const dataYaml = getYamlData(); return { props: { dataYaml }, }; }; export default IndexPage; show-yaml.tsx import React from 'react'; import { useContext } from 'react'; import { ExContext } from '../Context'; const ShowYaml = () => { const ctx = useContext(ExContext); /** Contextに突っ込んだYAMLデータをレンダリングする */ const renderYaml = () => { return ctx.dataYaml?.foo.map((item) => { return ( <React.Fragment key={item.id}> <p>id: {item.id}</p> <p>name: {item.name}</p> </React.Fragment> ); }); }; return <div>{renderYaml()}</div>; }; export default ShowYaml; 感想 共通ラッパー辺りでデータを読み込んで、ネストしているコンポーネントに prop drilling してやれれば一番良いのですが、page コンポーネント以外に getStaticProps() を実装するとコンポーネントの引数が破綻するので、この方法は使えません _app.tsx に getStaticProps() が書けない時点でプリレンダ時に使用する共通データを一回だけ読み込むのは無理があるのかもしれない… Context API を使うのが一番無難だとは思うのですが、CSR 時に余計な物が生えるのでなんとも言えないですね… またこの方式だと、プリレンダ時にレンダーされる訳ではなく、CSR 時にレンダーされるので、その辺りも微妙感が漂います やりたいこととしては next export 時にファイルを一回読み込んで、あとはそれを使いまわしたい感じです どうしてもプリレンダ時に吐きたい場合は page コンポーネント単位でファイルを読み込んであげる他になさそう