GoogleカレンダーのようなカレンダーUIを簡単に作れるライブラリ「FullCalendar」を実務で使う機会があり、色々とカスタマイズして使ってみたので整理しておく。 「最もポピュラーなJavaScriptカレンダー」 FullCalendar カレンダーライブラリの選定 カレン…

やりたいこと styled-componentsでcss propsを使ってスタイリングをしたい 開発環境 開発環境はCRAで構築したReactアプリケーションであり、TypeScript、styled-componentsを採用している。 コンポーネントへのスタイル注入方法を検討中、css propsを活用し…

すでに令和も4年。平成まではギリ西暦⇔和暦の変換ができていたけれど、令和になってからは覚えるのもめんどくさくなり、ググらないと今は令和何年なのかもわからないという人もいるのでは？ 前職は病院の事務員だったので、様々な行政の書類や日々の業務の中…

create-react-app で生成されている /public/manifest.json とは何者なのか？無知であったマニフェストファイルについて改めて調べてみた。 調査前の前提知識 デフォルトで生成される manifest.json { "short_name": "React App", "name": "Create React App…

ErrorBoundary コンポーネントツリーのどこかで例外が発生した場合、アプリケーション全体が影響を受けてしまう。アプリの規模が大きくなると、例外が発生した箇所を特定するのが難しくなってくる。 ErrorBoundaryは、特定のコンポーネントで例外が発生した…

Hooksとは？ React16.8.0で追加された機能 クラスコンポーネントよりもコード量が少なくなる ロジックを分離できるので、ロジックの再利用やテストがしやすい。 フック API リファレンス 主なフックとしてあげられているものをまとめてみる useState stateと…

ReactでApolloを使うキャッチアップのため、GithubのGraphQLAPIを使ってクエリを叩いてみた。 graphql-code-generatarもテストしてみたので使用感について書いてみる。 環境構築 環境構築はCRAで。 npx create-react-app graphql-react-app --template types…

今回はGatsbyで起こったが、emotionの仕様みたいなのでメモしておく。 "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", やりたいこと こんな感じで first-childに対してスタイルを当てたかった。 `.Pagination__block { &:first-child.-active …

結論は、「Presentialも、Containerも、StyledComponentも全部まとめて書きたい！」です。 Reactでコンポーネントを書くときに、PresentialとContainerの役割を分離するというのが基本みたい。 ファイルそのものを分割してそれぞれに役割を持たせるというの…

Gatsbyブログを作ったので、雑に環境構築についてメモしておく。 TypeScriptやReactのキャッチアップも兼ねていたので、ESLintやPrettier、StyleLintも入れてみた。 前回のブログでも書いたが、React+TypeScriptキャッチアップにはもってこいだと思っている…